.product-price {
    color: #e64d5c;
    font-size: 1.4rem !important;
}
.school-item {
	height: 150px;               /* fixed cell height (adjust as needed) */
	display: flex;
	align-items: center;         /* vertical centering */
	justify-content: center;     /* horizontal centering */
}

.school-logo {
	max-height: 100px;           /* keeps logos proportional */
	max-width: 60%;             /* prevents overflow */
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 767.98px) {
	/* Mobile adjustments */
	section[style*="background-color"] .row {
		text-align: center;
	}
	section[style*="background-color"] img {
		max-width: 100%;
	}
	section[style*="background-color"] .bg-white {
		margin-top: 1.5rem;
		padding: 2rem 1.5rem;
	}
}

@font-face {
  font-family: 'Feather';
  src:
    url('https://ais.plogyearbook.com/fz/d0cae9067e/0/x9oDB4c1EtL0apZRyx8s7l7T-VxKmsEPkydV4XDlvHg/~/Feather.ttf?sdxovp') format('truetype'),
    url('Feather.woff?sdxovp') format('woff'),
    url('https://ais.plogyearbook.com/fz/4b0e891fba/0/Mt9Cf54HQm_QxhXoZ5HBA2F4i_YviKgQ3qtZUx-nRjU/~/Feather.svg?sdxovp#Feather') format('svg');
  font-weight: normal;
  font-style: normal;
}

body { 
    font-family:
    "caecilia", sans-serif; !important;
    font-size: 1rem;
    font-weight: 400;
    color: #2d2d2d;
    background-color: #ffffff;
}
html {
	scroll-behavior: smooth;
}
/* Container-fluid padding */
@media only screen and (max-width: 768px) {
    .container-fluid { 
        padding-left:1rem !important;
        padding-right:1rem !important;
    }
    /* Announcement bar */
    .navbar-topbar {
        padding-top: 0.25;
        padding-bottom: 0.25;
        font-size: 0.5rem;
    }  
    .bg-cover .bg-white-90 {
        background-color: rgba(255, 255, 255, .9)!important;
    }
}
@media only screen and (min-width: 768px) {
    .container-fluid {
        padding-left:3rem !important;
        padding-right:3rem !important;
    }
    /* Announcement bar */
    .navbar-topbar {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0.75rem;
    }   
    .bg-cover .bg-white-90 {
        background-color: rgba(255, 255, 255, 0)!important;
    }    
}
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
}
@media (min-width: 992) {
    .container {
        max-width: 960px;
    }
}
input {
    border-radius: 6px !important;
}
.form-control {
    border-radius: 6px !important;
}
/* Announcement bar background  color */
.bg-light {
    background-color: #d6d6d6 !important;
}
/* Change navbar background color
.main-menu {
    background-color: white;
} */

.footer {
    background-color: #ffffff !important;
    color: #000000;
    position: relative;
    z-index: 2;
}
.bg-dark {
    background-color: #2d2d2d !important;
}
.bg-very-light {
    background-color: #f6f6f8;
}
/* Change the color of the navbar on hover  */
.navbar-light .navbar-nav .nav-link:focus, 
.navbar-light .navbar-nav .nav-link:hover { 
    color: #bfd730!important;
}
/* Change promotion color */
.promotion {
    background-color: #79449e !important;
    color: #ffffff !important;
}
/* Change the background color for the cart icon  */
[data-cart-items]::before { 
    background-color: #337ab7;
    color: #ffffff !important;
}

.btn-white-primary {
    background-color: #f5f5f5;
}

.main.cart .quantity button[class*=btn] {
    background: none;
    border-radius: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.navbar-toggler {
    padding: 0.5rem 0 0.5rem 0.5rem;
}
.navbar-light .navbar-toggler {
    color: #2d2d2d; 
}
.btn {
    border-radius: 6px;
}

/* Change the background color of the more info on the quick view  */
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #faa21b;
    border-color: #faa21b;
}
/* logo size */
@media (max-width: 991px) {
   .navbar-brand-logo {
        height: 50px;
    }
    .hide-mobile {
        display:none;
    }
}
@media (min-width: 992px) {
   .navbar-brand-logo {
    height: 55px;
    }
}

/* Change the  color of the navbar items */
a {
    color: #000000;
}
a:hover {
    color: #bfd730;
}
.nav-link:hover {
    color: #bfd730;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 400 !important;
    color: #2d2d2d !important;
    font-size: 0.9rem;
}

.navbar-light .navbar-nav .show>.nav-link {
    font-weight: 400;
    color: #bfd730 !important;
}

.navbar-light .navbar-nav .show>.nav-link:hover {
    font-weight: 400;
    color: #bfd730 !important;;
}

.nav-tabs .nav-link.active {
    color: #2d2d2d !important;;
    font-weight: 600;
}

.nav-link.active::before {
    border-top: 1px solid  !important;;
}
/*
a:not(.btn) {
    color: #2d2d2d !important;
}
*/
/* Hover status on links */
a:not(.btn):hover .list-styled-link {
    color: #000000 !important;
}

.list-styled-link {
    background: linear-gradient(0deg, #dbe6a6, #dbe6a6) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 350ms;
    --bg-h: 100%;
}
.list-styled-link:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
    color:#000000 !important;
}


/* Change the  text color of  categories dropdown items  */
/**
.list-styled-link:focus, 
.list-styled-link:hover {
    color: #111;
}
    
.list-styled-link {  
    color: #2d2d2d;
    position: relative;
}
.list-styled-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #2d2d2d;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.list-styled-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
**/
.list-group-item-action {
    color: #2d2d2d;
}

.list-styled-link:hover {
    color: #faa21b;
}

.list-group-item-action:hover {
    color: #faa21b;
}

.text-body[href]:focus, .text-body[href]:hover {
    color: #bfd730 !important;
}

.main.cart .quantity button[class*=btn]:hover {
    background-color: none;
}

.px-icons {
    fill: #2d2d2d;
}
.px-icons:hover {
    fill: #faa21b;
}

/* Account navigation text color on hover */
.list-group-item-action:focus,
.list-group-item-action:hover {
    #faa21b !important;
}

/* Change the  text color of  "happy holidays" below the header  */
.text-white {
    color: #fff !important;
}

/* Change the  text color of  categories dropdown items  */
.list-styled-link:focus, 
.list-styled-link:hover {
    color: #111;
}
    
.list-styled-link {  
    color: #000000;
}

.list-group-item-action {
    color: #2d2d2d;
}

.list-styled-link:hover {
    color: #bfd730;
}

.list-group-item-action:hover {
    color: #bfd730;
}

/* Change the  text color of class containing text-body  */

.text-body {
    color: #2d2d2d !important;
    font-weight: 400 !important;
}

/* Change the text color of the element with text-gray-400 class */
.text-gray-400 {
    color: #909090;
}    

/* Change the text color of the element with text-muted class  */
.text-muted {
    color: #767676;
}

/* Change the text color of the element with text-gray-300 class  */
.text-gray-300 {color: #767676;}

/* Active nav-tabs color  */
.nav-item.show .nav-link, 
.nav-link.active {color: #2d2d2d;}

/* Change the text color of the element with text-primary class  */
.text-primary { color: #2d2d2d!important;}

/* Button color when active */
.btn-dark:not(:disabled):not(.disabled).active, 
.btn-dark:not(:disabled):not(.disabled):active, 
.show > .btn-dark.dropdown-toggle {
    color: #fff;
    background-color: #060606;
    border-color: #000;
}

/* Change the text color of the element with text-gray-500 class  */
.text-gray-500{color: #525252 !important;}

/* Text color in form-control  */
.form-control {
    color : #111;
    font-size: 0.875rem;
}

/* Email header css */
.hover-underline:hover {
  text-decoration: underline !important;
}

@media (max-width: 640px) {
  .sm-inline-block {
    display: inline-block !important;
  }
  .sm-w-auto {
    width: auto !important;
  }
  .sm-w-full {
    width: 100% !important;
  }
  .sm-px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sm-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .sm-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .sm-text-left {
    text-align: left !important;
  }
}

/* copied from product-filter master */
input {
    /* -webkit-appearance: checkbox !important; */
}
    
.product-single .product-price {
    display: block;
    margin-bottom: 1.1rem;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .1em;
    font-weight:bold;
}
.discount-pill {
  position: absolute;
  top: -8px;
  right: 0px;
  background-color: #337ab7;
  color: #ffffff;
  border: 1px solid #337ab7;
  padding: 0.3rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.4s ease-out;
  z-index: 10;
  overflow: hidden; /* Required for shimmer containment */
}

  .animate-fade-in {
    animation: fadeInSlideDown 0.6s ease-out forwards;
    animation-delay: 0.2s;
  }
  
/* Shimmer layer */
.discount-pill::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  height: 100%;
  width: 50%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
}

/* Trigger shimmer on hover */
.discount-pill:hover::before {
  animation: shimmer 1s ease-in-out;
}

/* Animation keyframes */
@keyframes shimmer {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}  

.product-single .product-name {
    margin-top: .6rem;
    letter-spacing: .02em !important;
    font-size: 1.5rem;
    font-weight: 400;
}

.product-single .product-category {
    margin-top: .6rem;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    font-size: .8rem;
    color: #969696;
}
.collection-name {
    font-weight:600;
}
.font-size-xs {
    font-size: 0.75rem !important;
}

input[type="color"] {
	-webkit-appearance: none;
	border: 1px solid gray;
	width: 40px;
	height: 40px;
	padding: 0.1rem;
	border-radius:2px !important;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}
.btn-primary {
    color: #ffffff !important;
    border-color: #337ab7 !important;
    background-color: #337ab7 !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    color: #ffffff !important;
    border-color: #1c6c8c !important;
    background-color: #1c6c8c !important;
}
.btn-dark:hover, .btn-dark:active, .btn-dark:focus {
    color: #ffffff !important;
    border-color: #1c6c8c !important;
    background-color: #1c6c8c !important;
}
.btn-dark {
    color: #ffffff;
    border-color: #2d2d2d !important;
    background-color: #2d2d2d !important;
}
.btn-outline-primary {
    color: #337ab7 !important;
    border-color: #337ab7 !important;
    border-radius: 0px !important;
}
.btn-outline-primary:hover {
    background-color: #337ab7 !important;
    border-color: #337ab7 !important;
    color: #ffffff !important;
}
.btn-upload {
    border-radius: 6px;
    border: 1px solid #666666;
}
.btn-upload:hover {
    border: 1px solid #bfd730;
    background-color: #bfd730;
    color: #ffffff;
}
.btn-upload.fe-image::before {
    font-family: 'Feather' !important;
    margin-right: 0.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* copied from px-option */
.select-box::before {
    top: 74% !important;
}
.px-title {
    font-weight:600;
    margin:0;
    padding: 0.5rem 0 2px;
    font-size:0.8rem;
}
/* Radio buttons */
.custom-control-input:checked~.custom-control-label::before {
    border-color:#337ab7;
    background-color:#337ab7;
}
.custom-control.custom-checkbox {
    display: block;    
}
/*Photo prints variant image radius*/
.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control label img {
    border-radius: 6px;
}
/*Product page radio pill button style */
.variant-selector label {
    display: block;
}
.variant-selector label.field-label .label-text{
    outline: 1px solid #666666;
    background: #ffffff;
    color: #000000;
    font-size: 0.65rem;
    border-radius: 6px;
    margin-bottom:10px;
}
.variant-selector label.field-label .label-img {
    cursor: pointer;
    display: inline-block;
    /*filter: drop-shadow(1px 1px 2px #d6d6d6);*/
    border-radius: 6px;
    width: 100%;
}
.variant-selector label.field-label .label-img img {
    border-radius: 6px;
}
.variant-selector label.field-label:hover .label-text,
.variant-selector label.field-label input:checked + .label-text {
    background: #bfd730;
    color: #ffffff;
    outline: none;
    cursor: pointer !important;
    border-radius: 6px;
}
.variant-selector label.field-label input:hover + .label-img img {
    outline: 2px solid #bfd730;
    border-radius: 6px;
}
.variant-selector label.field-label input:checked + .label-img {
    outline: 2px solid #bfd730 !important;
    border-radius: 6px !important;
}
.variant-selector label.field-label input:hover + .label-img-color img {
    outline: 2px solid #bfd730;
    border-radius: 5px !important;
}
.variant-selector label.field-label input:checked + .label-img-color img {
    outline: 2px solid #bfd730 !important;
    border-radius: 5px;
}
.product-form {
    display: block !important;

}    

@media all and (max-width:100em){
    .btn-dark {
        display:block;
        width: 100%;
    }
}
.product-image-full {
    display:none !important;
}

.product-form select {
    width: 100%;
    -webkit-appearance: none;
}
.product-form select {
    max-width: none;
    padding: 0.75rem 5rem 0.75rem 1rem;
    color: #222;
    border-color: #ccc;
    font-size: 1rem;
    background-color: whitesmoke;
    border: 1px solid whitesmoke;
    margin: 0 0 10px 0;
    width: 100%;
    -webkit-appearance: auto;
}
/** Breadcrumb alignment **/
.breadcrumb{display:flex;flex-wrap:wrap;padding:0 0;margin-bottom:1.5rem;list-style:none;background-color:transparent}
.breadcrumb-item+.breadcrumb-item{display:inline-flex; padding-left:.5rem}
.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}
.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}
.breadcrumb-item.active{color:inherit}
.breadcrumb-item+.breadcrumb-item::before {
    display:inline-block;
    padding-right:0.5rem;
    color:#909090;
    content: url('https://ais.plogyearbook.com/fz/1ff3d38fb3/0/FssXgJxeYAIWGEdwtgHZGGxc8kC-Zc7ouZ5LPgXOTo4/~/chevron-right-regular.svg');
    opacity: 0.5;
    width:0.9rem;
    height:auto;
}

/* form index layout */
.card-actions .card-action+.card-action+.card-action {display:none}

@media only screen and (min-width: 992px){
    .classic .flex-row {display:none}

    .navbar-sidenav {display:none!important}
}
.classic .flex-row .nav-item.ml-lg-n4 {margin-right: 1.25rem;}
.navbar-sidenav {display: flex !important}
 @media only screen and (max-width: 768px){
    .btn-gray-500 {margin-top:10px;}
    .navbar-sidenav {display:none!important}
} 
.card-img-overlay form { display:inline-block }
.bg-cover-main{min-height: 510px;}
.bg-cover-grid{min-height: 240px;}
.progress .progress-bar {width: 66%}
.custom-select{background-color: whitesmoke!important }
.card-actions .card-action+.card-action+.card-action {display:none;}
.btn-white-primary:focus, .btn-white-primary:hover {
    background-color: #1c6c8c !important;
    border-color: #1c6c8c !important;
    color: #ffffff !important;
}
.address form {display:inline-block;}
.address .btn-circle {border-radius: 50%;}
.dropright-toggle span.active:after {color:black;}
.dropright-toggle::after {display:none;}
.shoppage select.custom-select.custom-select-xs{display:none;}
.reorder .btn a {color:black;}
.btn-outline-dark a:hover {color:#fff;}  
.reorder:hover {color:#fff;}  
.myaccount .dropdown-menu {left:-100px;}
.tooltip-inner { font-size: 0.85rem; }
.card-body { padding: 1rem; }
.card-actions {
    padding: 1rem;
    bottom: 1.5rem;
}
.card-actions .card-action+.card-action+.card-action {display:none;}

/** Info button on variants **/
.info-button {
    font-size: 0.9rem;
    padding-left: 5px;
    vertical-align: top;
}
/* Popup container - can be anything you want */
.popup-option {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup-option .close {
  position: absolute;
  right: 4px !important;
  top: 4px !important;
  padding: 5px;
  color: #ffffff;
  transition: color .3s;
  font-size: 1em;
  line-height: .6em;
  font-weight: 300;
}


/* The actual popup */
.popup-option .popuptext-option {
  display: none;
  width: 320px;
  background-color: #bfd730;
  color: #ffffff;
  font-size: 0.85rem;
  text-align: center;
  border-radius: 0px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -16px;
  font-weight: 300;
  border-radius:6px;
}

/* Popup arrow */
.popup-option .popuptext-option::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 8%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #bfd730 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup-option .show-option {
  display: block;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
/** Class to assign to gallery to have it sticky on page scroll **/
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.dropdown-menu {
    opacity: inherit;
    display: none;
}

/** Cart notification popup **/
.cart-notification .tooltip-inner {
    background-color: #faa21b;
    font-size: 1.2em;
    padding: 0.5em 1em;
}
.cart-notification.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #faa21b;
}
/** Gallery Styling **/
.add-gallery-button {
    position: absolute;
    top: 8px;
    right: 32px;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    color: #767676;
    padding: 3px 6px;
    border-radius: 3px;
    transition: all 0.3s;
}
.add-gallery-button:hover, .add-gallery-button:focus {
    background: #DDDDDD;
    outline: none;
    color: #767676;
}
.gallery-preview {
    display: flex;
    height: 150px;
    background: #FAFAFA;
    border: 1px solid #DDDDDD;
    padding: 0;
    cursor: pointer;
}
.gallery-main-image {
    height: 100%;
    max-width: 150px;
    object-fit: cover;
    width: 150px;
}
.gallery-preview__desc {
    padding: 13px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: calc(100% - 150px);
}
.gallery-preview__heading-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
}
.gallery-preview__heading-wrapper h6 {
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #111111;
    margin-bottom: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.gallery-preview__button {
    border: none;
    background: none;
    height: max-content;
    padding: 3px 6px;
    border-radius: 3px;
    transition: all 0.3s;
}
.gallery-preview__button:hover, .gallery-preview__button:focus {
    background: #DDDDDD;
    outline: none;
}
.gallery-preview__date {
    font-size: 15px;
    line-height: 22px;
    color: #767676;
}
.gallery-preview__image-count {
    display: flex;
    gap: 8px;
}
.gallery-preview__image-count span {
    font-size: 15px;
    line-height: 22px;
    color: #767676;
}
.gallery-preview__desc__bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
/* Gallery Grid */
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        max-width: 900px;
        margin: auto;
    }

    .gallery img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
    }

    .gallery img:hover {
        transform: scale(1.05);
    }

    /* Lightbox (Fullscreen View) */
    .lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .lightbox img {
        max-width: 90%;
        max-height: 80%;
        border-radius: 5px;
    }
    /* Caption Styling */
    .lightbox .caption {
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold;
        color: white;
    }
    .lightbox .close,
    .lightbox .prev,
    .lightbox .next {
        position: absolute;
        color: white;
        font-size: 30px;
        cursor: pointer;
        padding: 10px;
    }

    .lightbox .close {
        top: 10px;
        right: 20px;
    }

    .lightbox .prev {
        left: 20px;
    }

    .lightbox .next {
        right: 20px;
    }
/* =========================
   Account Galleries V2 (G2)
   ========================= */

.account-g2 {
	background: #f6f7fa;
}

/* IMPORTANT: container is Bootstrap's .container.
   This targets containers INSIDE a section with .account-g2. */
.account-g2 .container {
	max-width: 1400px;
}

/* Back link */
.account-g2-back svg {
	width: 18px;
	height: 18px;
	opacity: 0.6;
}

/* Search pill */
.account-g2-search {
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 6px;
	padding: 1px 10px;
	box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);
	min-width: 220px;
}
.account-g2-search svg {
	width: 18px;
	height: 18px;
	opacity: 0.5;
	margin-right: 8px;
}
.account-g2-search input {
	background: transparent;
	box-shadow: none !important;
}

/* =========
   INDEX GRID
   ========= */

.account-g2-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;

	/* prevents super-wide awkwardness on huge screens */
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.account-g2-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.account-g2-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.account-g2-card-wrap {
	position: relative;
}

/* Shared card */
.account-g2-card {
	display: block;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	color: inherit;
	text-decoration: none !important;

	position: relative;
	z-index: 1;
}

.account-g2-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 40px rgba(16, 24, 40, 0.12);
}

/* Uniform media + body (matches create tile and gallery tiles) */
.account-g2-card__media {
	height: 180px;
	background: #fff;
	overflow: hidden;
}

.account-g2-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.account-g2-card__body {
	padding: 12px 14px 14px 14px;
}

.account-g2-card__title {
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.account-g2-card__meta {
	margin-top: 8px;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(0, 0, 0, 0.55);
}

.account-g2-card__meta svg {
	width: 16px;
	height: 16px;
	opacity: 0.55;
}

/* Top-right actions on tiles */
.account-g2-actions {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 8px;
	opacity: 0;
	transition: opacity 0.18s ease;
	z-index: 3;
}

.account-g2-card-wrap:hover .account-g2-actions {
	opacity: 1;
}

.account-g2-icon-btn {
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.88);
	border-radius: 999px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.account-g2-icon-btn svg {
	width: 16px;
	height: 16px;
	opacity: 0.8;
}

/* Create tile (uniform height because it uses card__media + card__body) */
.account-g2-create-tile {
	border: 2px dashed rgba(0, 0, 0, 0.14);
	background: rgba(255, 255, 255, 0.62);
	box-shadow: none;
}

.account-g2-create-tile:hover {
	border-color: rgba(13, 110, 253, 0.25);
	box-shadow: 0 14px 40px rgba(16, 24, 40, 0.10);
}

.account-g2-create-icon {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: rgba(13, 110, 253, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}

.account-g2-create-plus {
	font-size: 34px;
	line-height: 1;
	color: #0d6efd;
	font-weight: 600;
	transform: translateY(-1px);
}

/* Empty gallery tile (index card “no images yet”) */
.account-g2-empty-tile {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	background: linear-gradient(
		145deg,
		rgba(255,255,255,0.95),
		rgba(245,247,250,0.95)
	);
}

.account-g2-empty-icon {
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: rgba(13,110,253,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.account-g2-empty-icon svg {
	width: 22px;
	height: 22px;
	opacity: 0.6;
}

.account-g2-empty-title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
	color: #d93025; /* matches your red “No images yet” */
}

.account-g2-empty-sub {
	font-size: 12px;
	color: rgba(0,0,0,0.55);
}

/* =========================
   GALLERY SHOW (PHOTO GRID)
   ========================= */

/* ensure show page doesn’t feel constrained */
.account-g2-show .container {
	max-width: 1400px;
}

/* Default: uniform tiles */
.account-g2-photo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (min-width: 768px) {
	.account-g2-photo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.account-g2-photo-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.account-g2-photo-tile {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10);
	cursor: pointer;
	transition: transform 0.16s ease;
}

.account-g2-photo-tile:hover {
	transform: scale(1.01);
}

.account-g2-photo-tile img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	.account-g2-photo-tile img {
		height: 260px;
	}
}

/* Masonry option (column-based) */
.account-g2-photo-masonry {
	column-count: 1;
	column-gap: 14px;
}

@media (min-width: 768px) {
	.account-g2-photo-masonry {
		column-count: 2;
	}
}

@media (min-width: 1200px) {
	.account-g2-photo-masonry {
		column-count: 3;
	}
}

.account-g2-photo-masonry__item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 14px;

	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10);
	cursor: pointer;
	transition: transform 0.16s ease;
}

.account-g2-photo-masonry__item:hover {
	transform: scale(1.01);
}

.account-g2-photo-masonry__item img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Hover actions on photos */
.account-g2-photo-actions {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 8px;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.account-g2-photo-tile:hover .account-g2-photo-actions,
.account-g2-photo-masonry__item:hover .account-g2-photo-actions {
	opacity: 1;
}

.account-g2-filename {
	font-size: 11px;
	padding: 6px 8px;
	text-align: center;
	background: rgba(255, 255, 255, 0.9);
}

/* Upload */
.account-g2-upload {
	border-radius: 999px;
}

/* Upload status (prevents “Upload Failed” being visible by default) */
.account-g2-upload-status .multiple-upload-progress,
.account-g2-upload-status .multiple-upload-err-msg {
	display: none;
}
.account-g2-upload-status .multiple-upload-progress.active,
.account-g2-upload-status .multiple-upload-err-msg.active {
	display: block;
}

/* Empty gallery “big state” on gallery show page */
.account-g2-empty-gallery {
	background: rgba(255,255,255,0.75);
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 22px;
	box-shadow: 0 16px 60px rgba(16, 24, 40, 0.10);
	padding: 60px 24px;
	text-align: center;
	cursor: pointer;
}

.account-g2-empty-gallery__icon {
	width: 86px;
	height: 86px;
	border-radius: 999px;
	background: rgba(13,110,253,0.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px auto;
}

.account-g2-empty-gallery__icon svg {
	width: 28px;
	height: 28px;
	opacity: 0.7;
}

.account-g2-empty-gallery__title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0f172a;
}

.account-g2-empty-gallery__sub {
	max-width: 680px;
	margin: 12px auto 0 auto;
	font-size: 18px;
	color: rgba(0,0,0,0.55);
	line-height: 1.6;
}

/* Tabs */
.account-g2-tabs {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.account-g2-tabs .nav-link {
	border: 0;
	color: rgba(0, 0, 0, 0.55);
	font-weight: 600;
	padding-left: 0;
	padding-right: 18px;
}

.account-g2-tabs .nav-link.active {
	color: #0d6efd;
	background: transparent;
}

/* =========================
   GALLERY V2 MODAL
   ========================= */

.modal-g2 {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 20px 70px rgba(16, 24, 40, 0.20);
	overflow: hidden;
}

.modal-g2-close {
	position: absolute;
	right: 14px;
	top: 12px;
	z-index: 2;
	opacity: 0.6;
}

.modal-g2-close:hover {
	opacity: 1;
}

.modal-g2-input {
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
}

.modal-g2-btn {
	border-radius: 999px;
	padding-left: 28px;
	padding-right: 28px;
}
/* Keep gallery show header + tabs + grid aligned */
.account-g2-show .account-g2-shell {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/* When buttons wrap, keep them looking intentional */
@media (max-width: 991px) {
	.account-g2-show .row.align-items-end .d-flex {
		gap: 10px;
		justify-content: flex-start !important;
	}
	.account-g2-show .row.align-items-end .btn {
		margin-right: 0 !important;
	}
}
/* =========================
   Account Navigation V2
   ========================= */

.account-nav-v2 {
	position: relative;
}

.account-nav-v2__card {
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba(16, 24, 40, 0.10);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	overflow: hidden;
}

.account-nav-v2__title {
	padding: 16px 16px 12px 16px;
	font-weight: 800;
	letter-spacing: 0.2px;
	color: rgba(0, 0, 0, 0.75);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.70),
		rgba(255, 255, 255, 0.35)
	);
}

.account-nav-v2__list {
	padding: 6px;
}

.account-nav-v2__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 12px;
	border-radius: 14px;
	color: rgba(0, 0, 0, 0.70);
	text-decoration: none !important;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.account-nav-v2__item:hover {
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08);
	transform: translateY(-1px);
}

.account-nav-v2__label {
	font-weight: 600;
}

.account-nav-v2__chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.55;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.account-nav-v2__item:hover .account-nav-v2__chev {
	opacity: 0.85;
	transform: translateX(1px);
}

.account-nav-v2__item.is-active {
	background: rgba(13, 110, 253, 0.10);
	box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.20);
}

.account-nav-v2__item.is-active .account-nav-v2__label {
	color: rgba(0, 0, 0, 0.85);
	font-weight: 800;
}

.account-nav-v2__item.is-active .account-nav-v2__chev {
	opacity: 1;
}

.account-nav-v2__divider {
	height: 1px;
	margin: 6px 10px;
	background: rgba(0, 0, 0, 0.07);
}

.account-nav-v2__item.is-logout {
	background: rgba(255, 255, 255, 0.35);
}

.account-nav-v2__item.is-logout:hover {
	background: rgba(220, 53, 69, 0.08);
	box-shadow: 0 10px 26px rgba(220, 53, 69, 0.10);
}

.account-nav-v2__item.is-logout .account-nav-v2__label {
	color: rgba(0, 0, 0, 0.70);
}
/* =========================
   SAVED PROJECTS (G2)
   ========================= */

.account-g2-project-grid {
	gap: 22px;
}

/* Force consistent card sizing */
.account-g2-project-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.account-g2-project-media {
	height: 240px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

@media (min-width: 768px) {
	.account-g2-project-media {
		height: 260px;
	}
}

/* px preview should fill the media area */
.account-g2-project-preview {
	width: 100%;
	height: 100%;
	display: block;
}

/* Lock body height so cards always match */
.account-g2-project-card .account-g2-card__body {
	flex: 1;
	min-height: 84px;
}

/* Clamp title to prevent taller cards */
.account-g2-project-card .account-g2-card__title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Clamp meta line too (prevents wrap on long product names like “MetalPrint 16x20”) */
.account-g2-project-card .account-g2-card__meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* View toggle buttons */
.account-g2-viewtoggle {
	gap: 8px;
}
.account-g2-viewtoggle .btn {
	border-radius: 999px;
	padding-left: 14px;
	padding-right: 14px;
}

/* Grid container */
.account-g2-projects--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

@media (min-width: 768px) {
	.account-g2-projects--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	.account-g2-projects--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* List container */
.account-g2-projects--list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* List cards become horizontal rows */
.account-g2-projects--list .account-g2-card {
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: stretch;
}

.account-g2-projects--list .account-g2-project-media {
	height: 160px;
}

.account-g2-projects--list .account-g2-card__body {
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* =========================
   END SAVED PROJECTS (G2)
   ========================= */
/* Keep your existing lightbox CSS + download overlay CSS as-is */
    
* {
  box-sizing: border-box; }

.input-number {
  display: flex;
}
input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}
.input-number input {
  width: 80px;
  height: 54px;
  padding: 0 6px;
  vertical-align: top;
  text-align: center;
  outline: none; }
.main.cart .quantity input {
    width:50px;
}
/* Keep Bootstrap's padding-left so switch has space */
.custom-control.custom-switch {
	padding-left: 2.25rem; 
}

/* Align label text vertically with switch */
.custom-control.custom-switch .custom-control-label {
	padding-top: 0.15rem;   /* nudge text down slightly */
	line-height: 1.4;       /* ensures balanced alignment */
}

/* Adjust the switch knob/track so they sit in line */
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after {
	top: 0.2rem; /* moves both track + knob down */
}
/* leave Bootstrap structure & your Liquid form intact */

/* room for the switch so it doesn't overlap the text */
.custom-control.custom-switch {
  padding-left: 2.35rem; /* slight extra space looks nicer with your font size */
}

/* micro-align the switch */
.custom-switch .custom-control-label::before {  /* track */
  top: .20rem;              /* was .20 for both */
}

.custom-switch .custom-control-label::after {   /* knob */
  top: calc(.20rem + 2px);  /* 2px lower than the track to center visually */
  background-color: #1c6c8c;
}

/* tiny Safari nudge to avoid sub-pixel rounding */
@supports (-webkit-hyphens:none) {
  .custom-switch .custom-control-label::after {
    top: calc(.20rem + 2.5px);
  }
}
/* Adjust switch knob and border color */
.custom-switch .custom-control-label::before {
    border: 1px solid #1c6c8c;
}

.input-number input,
.input-number-decrement,
.input-number-increment {
  border: 1px solid #ccc;
  height: 54px;
  user-select: none; }

.input-number-decrement,
.input-number-increment {
  display: inline-block;
  width: 30px;
  line-height: 52px;
  background: none;
  color: #444;
  text-align: center;
  font-weight: bold;
  cursor: pointer; }
  .input-number-decrement:active,
  .input-number-increment:active {
    background: #ddd; }

.input-number-decrement {
  border-right: none;
  border-radius: 6px 0 0 6px; }

.input-number-increment {
  border-left: none;
  border-radius: 0 6px 6px 0; }
  
.card {
    color: #2d2d2d;
}  
/** Support swap on hover for px-image-preview **/
.card-img-hover px-design-preview::part(img) {
	float: left
}

.card-img-hover px-design-preview.card-img-top::part(img) {
	transition: opacity .2s ease-in-out
}

.card-img-hover px-design-preview.card-img-back::part(img) {
	opacity: 0
}

.card-img-hover px-design-preview.card-img-front::part(img) {
	position: absolute;
	left: 0;
    top: 0;
}

.card-img:hover .card-img-hover px-design-preview.card-img-back::part(img) {
	opacity: 1
}

.card-img:hover .card-img-hover px-design-preview.card-img-front::part(img) {
	opacity: 0
}
  
#stamped-main-widget input#stamped-button-submit {
    pointer-events: auto !important;
}
.shop-banner {
    width: 100%; 
    height: 100%;
}

@media(min-width: 576px) {
    .shop-banner {
        height: 292px;
    }
}


@media(min-width: 768px) {
    .shop-banner {
        height: 189px;
    }
}

@media(min-width: 992px) {
    .shop-banner {
        height: 258px;
    }
}

@media(min-width: 1200px) {
    .shop-banner {
        height: 310px;
    }
}

li::marker {
  color: #de1f1f;
  list-style-type: square !important;
}
.product-description ul {
    list-style-type: square !important;
}

.table thead th {
    font-weight:700;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: white;
    position: sticky;
    top: 0;
}
.table tbody td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.card-copyaction {
    position: absolute;
    top: 7rem;
    z-index: 1;
}
.card-cartaction {
    position: absolute;
    top: 13rem;
    z-index: 1;
}
.card-deleteaction {
    position: absolute;
    top: 1rem;
    z-index: 1;
}
.card-shareaction {
    position: absolute;
    top: 10rem;
    z-index: 1;
}

.header-link {
    color: currentColor !important;
}
/** Password reveal **/
.user-box {
  position: relative;
  margin-bottom: 30px;
}
.user-box input:focus ~ label,
.user-box input:valid ~ label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #333;
}
.password-toggle-icon {
  position: absolute;
  top: 62%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

.shadow {
    box-shadow: 0 .25rem .25rem rgba(17, 17, 17, .3)!important;
}

/** Checkbox styles **/
.checkbox-wrapper-4 * {
    box-sizing: border-box;
  }
  .checkbox-wrapper-4 .cbx {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: inline-block;
  }
  .checkbox-wrapper-4 .cbx:not(:last-child) {
    margin-right: 6px;
  }
  .checkbox-wrapper-4 .cbx:hover {
    background: rgba(0,119,255,0.06);
  }
  .checkbox-wrapper-4 .cbx span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
  }
  .checkbox-wrapper-4 .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid #cccfdb;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0,16,75,0.05);
  }
  .checkbox-wrapper-4 .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
  }
  .checkbox-wrapper-4 .cbx span:last-child {
    padding-left: 8px;
    line-height: 18px;
  }
  .checkbox-wrapper-4 .cbx:hover span:first-child {
    border-color: #07f;
  }
  .checkbox-wrapper-4 .inp-cbx {
    position: absolute;
    visibility: hidden;
  }
  .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
    background: #07f;
    border-color: #07f;
    animation: wave-4 0.4s ease;
  }
  .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
  }
  .checkbox-wrapper-4 .inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
  }
  @media screen and (max-width: 640px) {
    .checkbox-wrapper-4 .cbx {
      width: 100%;
      display: inline-block;
    }
  }
  @-moz-keyframes wave-4 {
    50% {
      transform: scale(0.9);
    }
  }
  @-webkit-keyframes wave-4 {
    50% {
      transform: scale(0.9);
    }
  }
  @-o-keyframes wave-4 {
    50% {
      transform: scale(0.9);
    }
  }
  @keyframes wave-4 {
    50% {
      transform: scale(0.9);
    }
  }
/** Photo Prints Highlight Color **/.px-photo-prints {
    --highlight-color: #faa21b;
    --highlight-color-light: #1c6c8c;
}
/** Slider option **/
.variant-selector label.field-label input[name="variants[push-pull]"] + .label-text {
    max-width:86px !important;
}

.slidecontainer {
  width: 100%;
  padding-top:12px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #e9e9e9;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #faa21b;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}
/** Multi Upload Group Styling **/
px-multi-image-upload {
    --handle-width: 18px;
    --handle-gap: 8px;
}

px-multi-image-upload .px-title {
    margin: 0;
    padding: 0.5em 0 2px;
}

px-multi-image-upload .px-title label {
    margin-bottom: 0;
}

px-multi-image-upload .image-uploads-wrapper {
    border-left: 1px dashed #aaa;
    padding-left: 0.75em;
}

px-multi-image-upload :not(.px-multi-upload-button-container[hidden]) + .image-uploads-wrapper {
    margin-top: 1em;
}

px-multi-image-upload px-option {
    display: block;
    outline-offset: -1px;
}
px-image-upload {
    margin-bottom: 1rem;   
}

px-multi-image-upload px-image-upload {
    padding: 4px;
    transition: background-color 0.2s;
}

px-multi-image-upload[data-drag-active="true"] px-image-upload {
    opacity: 0.5;
    outline: 2px dashed #aaa;
}

px-multi-image-upload[data-drag-active="true"] px-option[data-dropzone-active="true"] px-image-upload {
    background-color: #faa21b;
    outline-color: #faa21b;
}

px-multi-image-upload px-image-upload .px-thumbnail {
    align-items: center;
    cursor: pointer;
    display: flex !important;
    padding-left: calc(var(--handle-width) + var(--handle-gap));
    position: relative;
}

px-multi-image-upload px-image-upload .px-thumbnail::before {
    --vertical-margin: 4px;
    background-color: #faa21b;
    background-image: url('data:image/svg+xml,<svg width="800" height="800" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 8C10.3284 8 11 7.32843 11 6.5C11 5.67157 10.3284 5 9.5 5C8.67157 5 8 5.67157 8 6.5C8 7.32843 8.67157 8 9.5 8ZM9.5 14C10.3284 14 11 13.3284 11 12.5C11 11.6716 10.3284 11 9.5 11C8.67157 11 8 11.6716 8 12.5C8 13.3284 8.67157 14 9.5 14ZM11 18.5C11 19.3284 10.3284 20 9.5 20C8.67157 20 8 19.3284 8 18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5ZM15.5 8C16.3284 8 17 7.32843 17 6.5C17 5.67157 16.3284 5 15.5 5C14.6716 5 14 5.67157 14 6.5C14 7.32843 14.6716 8 15.5 8ZM17 12.5C17 13.3284 16.3284 14 15.5 14C14.6716 14 14 13.3284 14 12.5C14 11.6716 14.6716 11 15.5 11C16.3284 11 17 11.6716 17 12.5ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z" fill="%23fff"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    content: "";
    display: block;
    height: calc(100% - 2 * var(--vertical-margin));
    left: 0;
    position: absolute;
    width: var(--handle-width);
}
.checkout-page {
    background-color: #f6f6f6;
}
/** custom admin border radius setting **/
.px-rounded {
    border-radius: 6px;
}
.px-rounded-top {
    border-radius: 6px 6px 0 0;
}
.px-rounded-bottom {
    border-radius: 0 0 6px 6px;
}
.card-outline-address {
    outline: 1px solid #1c6c8c;
}
.card-outline-address:hover {
    outline: 2px solid ;
}
.no-crop {
    width: 100%;  /* Makes it responsive */
    height: auto; /* Keeps original aspect ratio */
    object-fit: contain; /* Ensures the full image is visible */
    max-width: 100vw; /* Prevents overflow */
}
/* Scroll to top button */
#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background-color: #337ab7;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1001;
}

/* Button hover effect */
#scrollToTopBtn:hover {
    background-color: #1c6c8c;
}

/* Show the button */
#scrollToTopBtn.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
/** Show 2nd image on hover for variants **/
.picture2 {
    display: none;
}
.thumbnail:hover .picture1 {
    display: none;
}
.thumbnail:hover .picture2 {
    display: block;
}
#gdpr-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 9999;
  font-family: sans-serif;
}
#gdpr-banner h2 {
  margin: 0 0 10px 0;
}
#gdpr-banner p {
  font-size: 14px;
  margin-bottom: 10px;
}
#gdpr-banner .gdpr-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.gdpr-btn {
  padding: 10px 16px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}
/**
.gdpr-btn.accept {
  background-color: #007bff;
  color: white;
}
.gdpr-btn.deny {
  background-color: #e4e6eb;
  color: #333;
}
**/
.gdpr-links {
  font-size: 12px;
  margin-top: 8px;
}
.gdpr-links a {
  margin-right: 10px;
  color: #007bff;
  text-decoration: none;
}
.badge-dark {
    color: #ffffff;
    background-color: #000000;
}
.google-stars {
    color: #ecbe2d;
}
/** reduce padding on user account menu on mobile screens **/
@media (max-width: 767.98px) {
    .list-group-sm .list-group-item {
        padding: 0.5rem 1.25rem;
        font-size: 0.85rem;
    }
    h3, .h3 {
        font-size: 1.5rem;
    }
    body {
        font-size: 90%;
    }
    .btn {
        font-size: 90%;
    }
    .text-primary {
        font-size: 90%;
    }
    .navbar {
        padding: 1rem 1rem;
    }
    .btn-xxs {
        height: calc(1.40625rem + .375rem + 2px);
        padding: .125rem .75rem;
        font-size: .8rem;
    }
    .list-group-lg .list-group-item {
        padding: 1rem 1rem;
    }
    .main.cart .quantity {
        padding-top:10px;
    }
    .main.cart .quantity input {
        font-size: 0.9rem;
    }
    .shipping-available {
        font-size: 80% !important;
    }
}
/** increase weight of active menu item in account menu **/
.account-nav span.active {
    font-weight: 600;
}
/** photo stack effect in cart for cut print quantity > 1 **/
.photo-stack-wrapper {
  display: inline-block;
  position: relative;
}

.photo-stack-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  z-index: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  background: transparent;
  pointer-events: none;
}

.photo-stack-layer.layer-1 {
  top: 1px;
  left: 1px;
  z-index: 1;
}

.photo-stack-layer.layer-2 {
  top: 4px;
  left: 4px;
  z-index: 0;
}
/** animate cut print quantity badge in cart **/
.image-count-badge {
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: default;
}

.image-count-badge .extra-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.image-count-badge:hover .extra-label {
  max-width: 40px;
  opacity: 1;
  margin-left: 0.25rem;
}
/** animate icons in cart **/
.cart-action-icon {
  transition: transform 0.2s ease;
}

a:hover .cart-action-icon,
button:hover .cart-action-icon {
  transform: translateX(3px);
}
.animate-promo {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.animate-promo.fade-out {
  opacity: 0;
  transform: translateX(20px);
}
/** Filters **/
.dropdown-toggle::after {
	content:none;
}

.filter-fab {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 1030; /* above content but below modals */
	border-radius: 999px;
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
/* Promo error animation */
.promo-error {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.promo-error.show {
	opacity: 1;
	transform: translateY(0);
}
/* Global overflow fix 
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}
*/
/* Fix Bootstrap modal scrollbar compensation */
.modal {
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow-x: hidden !important;
}

body.modal-open {
    overflow-x: hidden !important;
}

#modalPromotions .promo-cta {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;

	height: auto !important;
	line-height: 1.2;

	word-break: break-word;
	overflow-wrap: anywhere;
	max-width: 100%;
}


/* Prevent gallery overflow */
.px-product-gallery,
.px-display,
.px-navigation {
    max-width: 100% !important;
    overflow-x: hidden !important;
}