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

body { 
    font-family:
    "Montserrat", serif; !important;
    font-size: 0.9rem;
    font-weight: 300;
    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: #2d2d2d !important;
    color: #ffffff;
    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: #0e9648!important;
}
/* Change promotion color */
.promotion {
    background-color: #0e9648 !important;
    color: #ffffff !important;
}
/* Change the background color for the cart icon  */
[data-cart-items]::before { 
    background-color: #0e9648;
    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: 42px;
    }
    .hide-mobile {
        display:none;
    }
}
@media (min-width: 992px) {
   .navbar-brand-logo {
    height: 62px;
    }
}

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

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

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

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

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

.nav-link.active::before {
    border-top: 1px solid #0e9648 !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, #9ed28c, #9ed28c) 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: #0e9648 !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: #0e9648;
}

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

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

.text-body {
    color: #2d2d2d !important;
    font-weight: 300 !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: #0e9648;
  color: #ffffff;
  border: 1px solid #0e9648;
  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: #0e9648 !important;
    background-color: #0e9648 !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    color: #ffffff !important;
    border-color: #5b225f !important;
    background-color: #5b225f !important;
}
.btn-dark:hover, .btn-dark:active, .btn-dark:focus {
    color: #ffffff !important;
    border-color: #5b225f !important;
    background-color: #5b225f !important;
}
.btn-dark {
    color: #ffffff;
    border-color: #2d2d2d !important;
    background-color: #2d2d2d !important;
}
.btn-outline-primary {
    color: #0e9648 !important;
    border-color: #0e9648 !important;
    border-radius: 0px !important;
}
.btn-outline-primary:hover {
    background-color: #0e9648 !important;
    border-color: #0e9648 !important;
    color: #ffffff !important;
}
.btn-upload {
    border-radius: 6px;
    border: 1px solid #666666;
}
.btn-upload:hover {
    border: 1px solid #3b3b3b;
    background-color: #3b3b3b;
    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:#0e9648;
    background-color:#0e9648;
}
.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;
}
/*Photo prints cropping overlay to top layer*/
.px-photo-prints .px-cropping-overlay {
    z-index: 9999;
}
/*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: #3b3b3b;
    color: #ffffff;
    outline: none;
    cursor: pointer !important;
    border-radius: 6px;
}
.variant-selector label.field-label input:hover + .label-img img {
    outline: 2px solid #3b3b3b;
    border-radius: 6px;
}
.variant-selector label.field-label input:checked + .label-img {
    outline: 2px solid #3b3b3b !important;
    border-radius: 6px !important;
}
.variant-selector label.field-label input:hover + .label-img-color img {
    outline: 2px solid #3b3b3b;
    border-radius: 5px !important;
}
.variant-selector label.field-label input:checked + .label-img-color img {
    outline: 2px solid #3b3b3b !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://cdn.pixfizz.com/fz/99c75efb46/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: #5b225f !important;
    border-color: #5b225f !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: #3b3b3b;
  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: #3b3b3b 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);
    }
    
/* ===== START: Gallery v2 Lightbox ===== */
    #lightbox-modal {
    	display: none;
    	position: fixed;
    	inset: 0;
    	z-index: 9999;
    	background: rgba(0, 0, 0, 0.9);
    	align-items: center;
    	justify-content: center;
    }
    
    #lightbox-modal.active {
    	display: flex;
    }
    
    #lightbox-image {
    	max-width: 90vw;
    	max-height: 90vh;
    	object-fit: contain;
    	border-radius: 4px;
    }
    
    .lightbox-button,
    .lightbox-close {
    	position: fixed;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	width: 48px;
    	height: 48px;
    	background: rgba(255, 255, 255, 0.15);
    	border: none;
    	border-radius: 50%;
    	cursor: pointer;
    	z-index: 10000;
    	transition: background 0.2s ease;
    }
    
    .lightbox-button:hover,
    .lightbox-close:hover {
    	background: rgba(255, 255, 255, 0.3);
    }
    
    .lightbox-button svg,
    .lightbox-close svg {
    	width: 20px;
    	height: 20px;
    }
    
    .lightbox-prev {
    	left: 24px;
    	top: 50%;
    	transform: translateY(-50%);
    }
    
    .lightbox-next {
    	right: 24px;
    	top: 50%;
    	transform: translateY(-50%);
    }
    
    .lightbox-close {
    	top: 24px;
    	right: 24px;
    }
    /* ===== Mobile: gallery action buttons ===== */
    @media (max-width: 991px) {
    	.account-g2-shell .col-12.col-lg-6 .d-flex.flex-wrap {
    		flex-direction: column;
    		align-items: stretch;
    	}
    
    	.account-g2-shell .col-12.col-lg-6 .d-flex.flex-wrap .btn,
    	.account-g2-shell .col-12.col-lg-6 .d-flex.flex-wrap a.btn {
    		width: 100%;
    		margin-right: 0 !important;
    		margin-bottom: 0.5rem;
    		justify-content: center;
    	}
    }   
    
/* Gallery show: keep action buttons on one line at desktop */
@media (min-width: 992px) {
	.account-g2-show .row.align-items-end .col-lg-6 .d-flex {
		flex-wrap: nowrap !important;
	}
}
/* ===== END: Gallery v2 Lightbox ===== */

    /* 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;
    }
/* ===== START: 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;
}
/* Gallery G2 — grid container */
.account-g2-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

@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));
	}
}

/* =========
   GRID VIEW
   ========= */

.account-g2-projects--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

@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));
	}
}

.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 */
.account-g2-card__media {
	height: 180px;
	background: #fff;
	overflow: hidden;
}

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

/* Ensure px-project-preview fills its container in all views */
.account-g2-card__media px-project-preview {
	display: block;
	width: 100%;
	height: 100%;
}

.account-g2-card__media px-project-preview::part(img) {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.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;
	flex-wrap: wrap;
	gap: 4px 10px;
	color: rgba(0, 0, 0, 0.55);
}

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

/* Grid actions — hover reveal, absolute positioned */
.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;
}

/* Form tags inside actions must not break flex layout */
.account-g2-actions form {
	display: contents;
}

/* Icon button — grid default */
.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;
	color: rgba(0, 0, 0, 0.65);
	text-decoration: none !important;
	cursor: pointer;
}

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

/* Labels: hidden in grid, shown in list */
.account-g2-list-label {
	display: none;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
}

/* Elements shown only in list view: hidden by default */
.account-g2-list-only {
	display: none;
}

/* Overflow dropdown: hidden in grid */
.account-g2-overflow {
	display: none;
}

/* Order CTA: hidden in grid */
.account-g2-list-order {
	display: none;
}

/* Create tile */
.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 */
.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;
}

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

/* =========
   LIST VIEW
   ========= */

.account-g2-projects--list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Card-wrap becomes a horizontal row */
.account-g2-projects--list .account-g2-card-wrap {
	display: flex;
	align-items: stretch;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(16, 24, 40, 0.06);
	transition: box-shadow 0.18s ease;
}

.account-g2-projects--list .account-g2-card-wrap:hover {
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10);
}

/* Card becomes image + content flex row, loses own card styling */
.account-g2-projects--list .account-g2-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 0;
	box-shadow: none;
	border: none;
	min-width: 0;
}

.account-g2-projects--list .account-g2-card:hover {
	transform: none;
	box-shadow: none;
}

/* Fixed-width image in list */
.account-g2-projects--list .account-g2-card__media {
	flex-shrink: 0;
	width: 130px;
	height: auto;
	align-self: stretch;
	border-radius: 0;
}

/* px-project-preview must fill the fixed list media container */
.account-g2-projects--list .account-g2-card__media px-project-preview {
	display: block;
	width: 130px;
	height: 100%;
	min-height:90px;
}
.account-g2-projects--list .account-g2-card__media px-project-preview::part(img) {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
/* Content fills remaining space */
.account-g2-projects--list .account-g2-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Actions: lose absolute, become always-visible side panel */
.account-g2-projects--list .account-g2-actions {
	position: static;
	opacity: 1;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0 8px;
	border-left: 1px solid rgba(0, 0, 0, 0.06);
	align-self: stretch;
}

/* No hover-reveal needed in list */
.account-g2-projects--list .account-g2-card-wrap:hover .account-g2-actions {
	opacity: 1;
}

/* Icon buttons: column layout, transparent bg, labeled */
.account-g2-projects--list .account-g2-icon-btn {
	flex-direction: column;
	gap: 4px;
	width: 52px;
	height: auto;
	min-height: 64px;
	border-radius: 10px;
	border: none;
	background: transparent;
	color: rgba(0, 0, 0, 0.55);
}

.account-g2-projects--list .account-g2-icon-btn:hover {
	background: rgba(0, 0, 0, 0.04);
	color: rgba(0, 0, 0, 0.85);
}

/* Show labels in list */
.account-g2-projects--list .account-g2-list-label {
	display: block;
}

/* Show list-only elements in list */
.account-g2-projects--list .account-g2-list-only {
	display: inline;
}

/* Order button in list view — primary accent, matches v2 feel */
.account-g2-order-btn {
	color: var(--acv2-primary, #00bcd4);
	border-color: var(--acv2-border, #e8e8e8);
}
.account-g2-order-btn:hover {
	background: var(--acv2-primary, #00bcd4);
	color: #fff;
	border-color: var(--acv2-primary, #00bcd4);
}
/* ----- START: Copy-to-clipboard toast ----- */
.account-g2-copy-tip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 4px;
	pointer-events: none;
	animation: acv2CopyFade 2s ease forwards;
	z-index: 10;
}
@keyframes acv2CopyFade {
	0%, 70% { opacity: 1; }
	100%    { opacity: 0; }
}
/* ----- END: Copy-to-clipboard toast ----- */
/* Hide standalone share button in list — moves to overflow */
.account-g2-projects--list .account-g2-share-btn {
	display: inline-flex !important;
}

/* Hide cart icon in list — replaced by Order pill */
.account-g2-projects--list .account-g2-cart-btn {
	display: none;
}

/* Show overflow dropdown in list */
.account-g2-projects--list .account-g2-overflow {
	display: block;
}

/* Strip Bootstrap's dropdown caret */
.account-g2-overflow .dropdown-toggle::after {
	display: none;
}

/* Order CTA — list view */
.account-g2-projects--list .account-g2-list-order {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0 16px 0 4px;
	align-self: center;
}

.account-g2-projects--list .account-g2-list-order .btn {
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 20px;
	border-radius: 999px;
	display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== END: Account Galleries V2 (G2) ===== */

/* =========================
   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 (grid-based, left-to-right order) */
.account-g2-photo-masonry {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	grid-auto-rows: 10px;
	gap: 14px;
}
@media (min-width: 768px) {
	.account-g2-photo-masonry {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 992px) {
	.account-g2-photo-masonry {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	.account-g2-photo-masonry {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.account-g2-photo-masonry__item {
	grid-row-end: span 20;
	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: 100%;
	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: #5b225f;
}

/* 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 #5b225f;
}

.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: #0e9648;
  list-style-type: circle !important;
}
.product-description ul {
    list-style-type: circle !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: #0e9648;
    --highlight-color-light: #e3e3e3;
}
/** 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 #e3e3e3;
}
.card-outline-address:hover {
    outline: 2px solid #0e9648;
}
.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: #0e9648;
    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: #5b225f;
}

/* 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;
}
/* ==========================================================
START: PRODUCT INVENTORY BADGE STYLES
Purpose:
Visual badge styling for product inventory status
========================================================== */

.px-stock-badge-wrap {
	line-height: 1;
}

.px-stock-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 8px 12px;
	font-size: 13px;
	border: 1px solid rgba(0,0,0,0.10);
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	user-select: none;
}

/* In Stock */

.px-stock-in {
	background: rgba(40, 167, 69, 0.10);
	color: #1f7a32;
	border-color: rgba(40, 167, 69, 0.25);
}

/* Limited Stock */

.px-stock-limited {
	background: rgba(255, 193, 7, 0.14);
	color: #9a6a00;
	border-color: rgba(255, 193, 7, 0.35);
}

/* Low Stock */

.px-stock-low {
	background: rgba(220, 53, 69, 0.12);
	color: #b21f2d;
	border-color: rgba(220, 53, 69, 0.30);
	animation: px-stock-pulse 1.6s ease-in-out infinite;
}

/* Out of Stock */

.px-stock-out {
	background: rgba(220, 53, 69, 0.12);
	color: #b21f2d;
	border-color: rgba(220, 53, 69, 0.30);
}

/* Pulse animation for urgency */

@keyframes px-stock-pulse {
	0% { transform: translateY(0); }
	50% { transform: translateY(-1px); }
	100% { transform: translateY(0); }
}

/* Mobile adjustments */

@media (max-width: 576px) {
	.px-stock-badge {
		padding: 9px 12px;
		font-size: 13px;
	}
}

/* ==========================================================
END: PRODUCT INVENTORY BADGE STYLES
========================================================== */
/* Collection description callout */
.collection-description-callout {
    background-color: #fff3cd;
    border: 1px solid #ffeaa0;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    padding: 16px 20px;
    color: #664d03;
    font-size: 0.95rem;
    line-height: 1.6;
}
.collection-description-callout:empty {
    display: none;
}
.collection-description-callout p:last-child {
    margin-bottom: 0;
}
/* ===== START: Color Palette Dropdown ===== */
.color-palette-dropdown .dropdown-toggle {
	padding: 0.4rem 0.75rem;
	font-size: 0.875rem;
	background-color: #fff;
}
.color-palette-dropdown .dropdown-toggle::after {
	margin-left: auto;
}
.color-palette-dropdown-menu {
	max-height: 260px;
	overflow-y: auto;
	padding: 0.25rem 0;
}
.cp-dd-swatch-preview,
.cp-dd-swatch {
	display: inline-block;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 3px;
	border: 1px solid #ddd;
	margin-right: 0.5rem;
}
.cp-dd-label-preview,
.cp-dd-label {
	font-size: 0.8rem;
	color: #333;
}
.color-palette-dropdown-menu .dropdown-item {
	padding: 0.35rem 0.75rem;
}
.color-palette-dropdown-menu .dropdown-item.active,
.color-palette-dropdown-menu .dropdown-item:active {
	background-color: #f0f0f0;
	color: #333;
}
.color-palette-dropdown-menu .dropdown-item:hover {
	background-color: #f8f8f8;
}
/* ===== END: Color Palette Dropdown ===== */
/* ===== START: Account V2 Shell =====

   Structural layout for the account v2 two-column shell:
   sidebar navigation + content area.
   Scoped entirely under .acv2 to avoid leakage.

   Uses site theme tokens via Liquid snippets for colors
   and border-radius. Falls back to sensible defaults if
   snippets are empty.

   ===== */

/* --- Custom properties (scoped) --- */
.acv2 {
	--acv2-accent: #faa21b;
	--acv2-accent-soft: #faa21b1a;
	--acv2-text: #2d2d2d;
	--acv2-text-muted: rgba(0, 0, 0, 0.50);
	--acv2-bg-page: #f5f6f8;
	--acv2-bg-card: rgba(255, 255, 255, 0.55);
	--acv2-border: rgba(0, 0, 0, 0.06);
	--acv2-radius: 6px;
	--acv2-radius-lg: 18px;
	--acv2-shadow: 0 14px 40px rgba(16, 24, 40, 0.10);
	--acv2-shadow-sm: 0 4px 16px rgba(16, 24, 40, 0.06);
	background: var(--acv2-bg-page);
	padding: 28px 0 60px;
}

/* --- Shell grid --- */
.acv2__shell {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* --- Sidebar --- */
.acv2-sidebar {
	position: sticky;
	top: 90px;
	background: var(--acv2-bg-card);
	border: 1px solid var(--acv2-border);
	border-radius: var(--acv2-radius-lg);
	box-shadow: var(--acv2-shadow);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	overflow: hidden;
}

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

.acv2-sidebar__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 14px;
	margin: 2px 6px;
	border-radius: 14px;
	color: rgba(0, 0, 0, 0.70);
	text-decoration: none !important;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.acv2-sidebar__item:hover {
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08);
	transform: translateY(-1px);
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none !important;
}

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

.acv2-sidebar__chev svg {
	width: 18px;
	height: 18px;
}

.acv2-sidebar__item:hover .acv2-sidebar__chev {
	opacity: 0.85;
	transform: translateX(1px);
}

.acv2-sidebar__item.is-active {
	background: var(--acv2-accent-soft);
	box-shadow: inset 0 0 0 1px var(--acv2-accent-soft);
}

.acv2-sidebar__item.is-active .acv2-sidebar__label {
	color: rgba(0, 0, 0, 0.85);
	font-weight: 800;
}

.acv2-sidebar__item.is-active .acv2-sidebar__chev {
	opacity: 1;
	color: var(--acv2-accent);
}

.acv2-sidebar__divider {
	height: 1px;
	margin: 6px 10px;
	background: rgba(0, 0, 0, 0.07);
}

.acv2-sidebar__item.is-logout {
	background: rgba(255, 255, 255, 0.35);
}

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

/* --- Page header --- */
.acv2-page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.acv2-page-title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 4px;
	color: var(--acv2-text);
}

.acv2-page-sub {
	color: var(--acv2-text-muted);
	font-size: 14px;
	margin: 0;
}

.acv2-page-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.acv2-accent {
	color: var(--acv2-accent);
}

/* --- Content area --- */
.acv2__content {
	min-width: 0;
}

/* --- Cards --- */
.acv2-card {
	background: var(--acv2-bg-card);
	border: 1px solid var(--acv2-border);
	border-radius: var(--acv2-radius-lg);
	box-shadow: var(--acv2-shadow-sm);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.acv2-card--pad {
	padding: 24px;
}

/* --- Section headers --- */
.acv2-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.acv2-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--acv2-text-muted);
}

.acv2-section-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--acv2-accent);
	text-decoration: none !important;
}

.acv2-section-link:hover {
	text-decoration: underline !important;
}

/* --- Form card (for info/addresses/dates forms) --- */
.acv2-form-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 18px;
	color: var(--acv2-text);
}

/* --- Status pills --- */
.acv2-pill {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.acv2-pill--shipped {
	background: #dbe7fb;
	color: #1a56db;
}

.acv2-pill--confirmed {
	background: #dff4e6;
	color: #0f7d3a;
}

.acv2-pill--delivered {
	background: #f0f1f3;
	color: #5b6271;
}

.acv2-pill--pending {
	background: #fbeacc;
	color: #9a5a06;
}

.acv2-pill--primary {
	background: var(--acv2-accent-soft);
	color: var(--acv2-accent);
}

.acv2-pill--neutral {
	background: #f0f1f3;
	color: #5b6271;
}

/* --- Empty state --- */
.acv2-empty {
	text-align: center;
	padding: 48px 24px;
}

.acv2-empty__icon {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--acv2-accent-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.acv2-empty__icon svg {
	width: 24px;
	height: 24px;
	opacity: 0.6;
}

.acv2-empty__title {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 6px;
}

.acv2-empty__sub {
	font-size: 14px;
	color: var(--acv2-text-muted);
	max-width: 360px;
	margin: 0 auto;
}

/* --- Dot separator --- */
.acv2-dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.25);
	vertical-align: middle;
	margin: 0 2px;
}

/* --- Icon circle buttons --- */
.acv2-icon-btn {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid var(--acv2-border);
	background: rgba(255, 255, 255, 0.88);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.acv2-icon-btn:hover {
	background: rgba(0, 0, 0, 0.04);
	color: rgba(0, 0, 0, 0.85);
}

.acv2-icon-btn svg {
	width: 15px;
	height: 15px;
}

/* --- Responsive --- */
@media (max-width: 991px) {
	.acv2 {
		padding: 16px 0 40px;
	}

	.acv2__shell {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0 16px;
	}

	.acv2-sidebar {
		position: static;
	}

	.acv2-page-title {
		font-size: 24px;
	}

	.acv2-page-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (max-width: 575px) {
	.acv2-page-title {
		font-size: 20px;
	}

	.acv2-page-actions {
		width: 100%;
	}

	.acv2-page-actions .account-g2-search {
		flex: 1;
	}
}
/* ===== START: Account V2 Dashboard + Orders CSS ===== */

/* --- Dashboard grid (two-col layout) --- */
.acv2-dash-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}

.acv2-dash-main {
	min-width: 0;
}

.acv2-dash-side {
	min-width: 0;
}

@media (max-width: 991px) {
	.acv2-dash-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Order rows (used in orders page + dashboard) --- */
.acv2-order-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	flex-wrap: wrap;
}

.acv2-order-row--first {
	border-top: none;
}

.acv2-order-meta {
	flex: 1 1 auto;
	min-width: 0;
}

.acv2-order-code {
	font-weight: 700;
	font-size: 14px;
	font-family: ui-monospace, 'SF Mono', monospace;
}

.acv2-order-sub {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.50);
	margin-top: 2px;
}

.acv2-order-status {
	flex-shrink: 0;
}

.acv2-order-total {
	font-weight: 700;
	font-size: 15px;
	flex-shrink: 0;
	min-width: 70px;
	text-align: right;
}

.acv2-order-actions {
	flex-shrink: 0;
}

@media (max-width: 575px) {
	.acv2-order-row {
		gap: 8px 12px;
		padding: 12px 14px;
	}

	.acv2-order-total {
		font-size: 14px;
	}
}

/* --- Date rows (used in dates page) --- */
.acv2-date-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.acv2-date-row--first {
	border-top: none;
}

.acv2-date-info {
	flex: 1 1 auto;
	min-width: 0;
}

.acv2-date-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}
/* ── account v2: order details ── */
.acv2-back {
	margin-bottom: 4px;
}
.acv2-back__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: #6b7280;
	text-decoration: none;
}
.acv2-back__link svg {
	width: 14px;
	height: 14px;
	transform: rotate(180deg);
}
.acv2-back__link:hover {
	color: #111;
}

.acv2-detail-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 767px) {
	.acv2-detail-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.acv2-detail-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
	margin-bottom: 4px;
}
.acv2-detail-value {
	font-size: 14px;
	font-weight: 600;
	color: #111;
}

.acv2-card__head {
	padding: 20px 24px 12px;
	font-size: 15px;
	font-weight: 600;
	color: #111;
}

.acv2-lineitem {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-top: 1px solid #f3f4f6;
}
.acv2-lineitem--first {
	border-top: none;
}
.acv2-lineitem__thumb {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	background: #f9fafb;
}
.acv2-lineitem__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
px-project-preview.acv2-lineitem__img::part(img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.acv2-lineitem__body {
	flex: 1;
	min-width: 0;
}
.acv2-lineitem__name {
	font-size: 14px;
	font-weight: 600;
	color: #111;
	margin-bottom: 2px;
}
.acv2-lineitem__price {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 4px;
}
.acv2-lineitem__option {
	font-size: 12px;
	color: #6b7280;
}
.acv2-lineitem__actions {
	flex-shrink: 0;
}
@media (max-width: 767px) {
	.acv2-lineitem {
		flex-wrap: wrap;
	}
	.acv2-lineitem__actions {
		width: 100%;
		margin-top: 8px;
	}
}

.acv2-totals__row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: #6b7280;
	padding: 6px 0;
}
.acv2-totals__row--total {
	border-top: 1px solid #e5e7eb;
	margin-top: 8px;
	padding-top: 14px;
	font-size: 16px;
	font-weight: 700;
	color: #111;
}

.acv2-delivery-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 767px) {
	.acv2-delivery-grid {
		grid-template-columns: 1fr;
	}
}
.acv2-delivery-address {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.6;
}
/* ── order details: card spacing ── */
.acv2-order-detail .acv2-card + .acv2-card {
	margin-top: 16px;
}
.acv2-order-detail .acv2-page-head {
	margin-bottom: 16px;
}
/* ===== END: Account V2 Dashboard + Orders CSS ===== */

/* ===== END: Account V2 Shell ===== */
/* ============================================================
   Shop All — placeholder for collections without an image
   ============================================================ */

.shop-all-placeholder {
	width: 100%;
	padding-top: 100%;
	position: relative;
	background: #e9ecef;
}

.shop-all-placeholder span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #adb5bd;
	font-size: 2.5rem;
	font-weight: 700;
	text-transform: uppercase;
}
/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS (single source of truth — scoped to kiosk)
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen {
	/* Surfaces & colour */
	--k-bg:          #eef0f4;
	--k-card:        #ffffff;
	--k-card-soft:   #f5f6f8;
	--k-text1:       #14181f;
	--k-text2:       #4a5568;
	--k-text3:       #8898a8;
	--k-muted:       #aab4be;
	--k-border:      #e7eaee;
	--k-border-s:    #d4d8df;
	--k-accent:      #faa21b;
	--k-accent-h:    color-mix(in srgb, var(--k-accent) 85%, #000);
	--k-accent-bg:   color-mix(in srgb, var(--k-accent) 8%, transparent);
	--k-accent-tint: color-mix(in srgb, var(--k-accent) 55%, #fff);
	--k-shadow:      0 2px 12px rgba(20, 24, 31, 0.06);
	--k-shadow-h:    0 8px 32px rgba(20, 24, 31, 0.12);
	--k-danger-text: #c0392b;
	--k-danger-bg:   rgba(192, 57, 43, 0.06);

	/* Touch sizing (60px primary standard) */
	--k-input-height:      60px;
	--k-input-radius:      12px;
	--k-btn-login-height:  60px;
	--k-btn-login-radius:  14px;
	--k-tab-height:        56px;
	--k-login-card-radius: 20px;
}

/* ══════════════════════════════════════════════════════════
   GENERAL KIOSK BODY OVERRIDES
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen {
	background: var(--k-bg);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	overflow-x: hidden;
}

/* Allow text selection only where the customer types */
.kiosk-touchscreen input,
.kiosk-touchscreen textarea {
	user-select: text;
	-webkit-user-select: text;
}

/* Hide standard Shopper nav, footer, promo bars, breadcrumbs
   — all replaced by the kiosk top-rail */
.kiosk-touchscreen .navbar,
.kiosk-touchscreen footer,
.kiosk-touchscreen .footer,
.kiosk-touchscreen .header__promotion,
.kiosk-touchscreen .header__bottom-promotion,
.kiosk-touchscreen .nav-promo-bar,
.kiosk-touchscreen .gdpr-banner,
.kiosk-touchscreen .cookie-consent,
.kiosk-touchscreen .breadcrumb-wrapper,
.kiosk-touchscreen .d-none.d-md-block:has(.breadcrumb) {
	display: none !important;
}

/* Remove top margin that accounts for the standard navbar */
.kiosk-touchscreen .main,
.kiosk-touchscreen .pt-md-7 {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Coupon input — hidden when kiosk-hide-coupon is active (class added via Liquid) */
.kiosk-touchscreen .k-hide-coupon .coupon-form,
.kiosk-touchscreen .k-hide-coupon [data-coupon],
.kiosk-touchscreen .k-hide-coupon .cart-coupon {
	display: none !important;
}

/* Shipping option — hidden when kiosk-hide-shipping is active */
.kiosk-touchscreen .k-hide-shipping .shipping-option,
.kiosk-touchscreen .k-hide-shipping [data-shipping-option],
.kiosk-touchscreen .k-hide-shipping .checkout-shipping-row {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════
   CLEANUP — remove duplicate / non-functional chrome
   These hide markup immediately. The proper fix is to also
   remove the source snippets (see notes), but this stops the
   double headers / backs / dead button on the live kiosk now.
   ══════════════════════════════════════════════════════════ */
/* 1. Hide the legacy injected top bar (.kiosk-bar).
      .k-rail is the canonical header (Start Over JS, idle screen
      and sticky bar are all wired to it). */
body.kiosk-touchscreen .kiosk-bar {
	display: none !important;
}
/* Undo the top padding the .kiosk-bar snippet forced onto <body>
   (it sets `body { padding-top: 64px !important }`). */
body.kiosk-touchscreen {
	padding-top: 0 !important;
	background: var(--k-bg) !important;
}

/* 2. (Removed) The rail's old "Back" button was replaced by the
      Home / Log out / Cart / Account buttons in the kiosk/top-rail
      snippet, so the left group is shown normally now. */

/* 3. Hide the "Start Uploading Photos" sticky bar on the
      photo-prints page — it triggers nothing here and the
      right-hand panel already carries the real Add to Cart CTA. */
body:has(#photo-prints-container) #kiosk-sticky-bar {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════
   LOGIN / REGISTRATION PAGE
   Single centred card, tab switching between Sign In and
   Create Account. Inherits the tokens above.
   ══════════════════════════════════════════════════════════ */
/* ── Page background ── */
.kiosk-touchscreen .k-login-page {
	min-height: calc(100vh - 72px);
	display: flex;
	align-items: center;
	padding: 2rem 0;
	background: var(--k-bg);
}

/* ── Header: eyebrow + heading ── */
.kiosk-touchscreen .k-login-header {
	margin-bottom: 2rem;
}
.kiosk-touchscreen .k-login-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--k-accent);
	margin-bottom: 0.5rem;
}
.kiosk-touchscreen .k-login-title {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--k-text1);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}
.kiosk-touchscreen .k-login-sub {
	font-size: 0.95rem;
	color: var(--k-text2);
	margin-bottom: 0;
}
.kiosk-touchscreen .k-login-sub strong {
	color: var(--k-text1);
}

/* ── Card ── */
.kiosk-touchscreen .k-login-card {
	background: var(--k-card);
	border: 1px solid var(--k-border);
	border-radius: var(--k-login-card-radius);
	box-shadow: var(--k-shadow);
	overflow: hidden;
}

/* ── Tab navigation (pill-style, side by side) ── */
.kiosk-touchscreen .k-login-tabs {
	display: flex;
	padding: 1.25rem 1.5rem 0;
	gap: 0.5rem;
	border-bottom: none;
}
.kiosk-touchscreen .k-tab-item {
	flex: 1;
}
.kiosk-touchscreen .k-tab-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: var(--k-tab-height);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--k-text2);
	background: transparent;
	border: 1px solid var(--k-border-s);
	border-radius: 12px;
	padding: 0 1rem;
	transition: background 120ms, color 120ms, border-color 120ms;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .k-tab-link:hover,
.kiosk-touchscreen .k-tab-link.is-touching {
	color: var(--k-text1);
	border-color: var(--k-text2);
	text-decoration: none;
}
.kiosk-touchscreen .k-tab-link.active,
.kiosk-touchscreen .k-tab-link.active:hover {
	color: var(--k-text1);
	background: var(--k-card-soft);
	border-color: var(--k-text1);
	font-weight: 700;
}
.kiosk-touchscreen .k-tab-icon {
	display: none;
}

/* ── Tab content area ── */
.kiosk-touchscreen .k-tab-content {
	padding: 1.5rem;
}

/* ── Form labels ── */
.kiosk-touchscreen .k-login-card label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--k-text2);
	margin-bottom: 0.3rem;
}

/* ── Inputs (60px height for touch) ── */
.kiosk-touchscreen .k-input {
	height: var(--k-input-height);
	font-size: 1rem;
	border-color: var(--k-border-s);
	border-radius: var(--k-input-radius) !important;
	padding: 0.5rem 1rem;
	transition: border-color 120ms, box-shadow 120ms;
}
.kiosk-touchscreen .k-input:focus {
	border-color: var(--k-accent);
	box-shadow: 0 0 0 3px var(--k-accent-bg);
}

/* ── Password toggle ── */
.kiosk-touchscreen .k-password-wrap {
	position: relative;
}
.kiosk-touchscreen .k-password-wrap .k-input {
	padding-right: 3.5rem;
}
.kiosk-touchscreen .k-password-toggle {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--k-text3);
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .k-password-toggle svg {
	width: 22px;
	height: 22px;
}

/* ── Login / register buttons (60px, full width, with arrow) ──
   Scoped to .k-login-card so they don't collide with the
   global .k-btn touch button defined further down. */
.kiosk-touchscreen .k-login-card .k-btn {
	width: 100%;
	height: var(--k-btn-login-height);
	font-size: 1rem;
	font-weight: 700;
	border-radius: var(--k-btn-login-radius);
	margin-top: 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.kiosk-touchscreen .k-btn-arrow {
	flex-shrink: 0;
}

/* ── Forgot password link ── */
.kiosk-touchscreen .k-forgot-link {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--k-text1);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.kiosk-touchscreen .k-forgot-link:hover {
	text-decoration: underline;
}

/* ── Terms link ── */
.kiosk-touchscreen .k-terms {
	font-size: 0.8rem;
	color: var(--k-text2);
}
.kiosk-touchscreen .k-terms a {
	color: var(--k-accent);
}

/* ── Captcha wrapper ── */
.kiosk-touchscreen .k-captcha-wrap {
	margin-bottom: 0.5rem;
}

/* ── Alert overrides ── */
.kiosk-touchscreen .k-alert {
	font-size: 0.9rem;
	border-radius: var(--k-input-radius);
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.kiosk-touchscreen .k-alert svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
.kiosk-touchscreen .k-alert-danger {
	color: var(--k-danger-text);
	background: var(--k-danger-bg);
	border: 1px solid var(--k-danger-bg);
}

/* ── Staff hint ── */
.kiosk-touchscreen .k-login-staff-hint {
	font-size: 0.8rem;
	color: var(--k-muted);
}

/* ── Kiosk password-reset modal overrides ── */
.kiosk-touchscreen #modalPasswordReset .modal-content {
	border-radius: var(--k-login-card-radius);
}
.kiosk-touchscreen #modalPasswordReset .form-control {
	height: var(--k-input-height);
	font-size: 1rem;
	border-radius: var(--k-input-radius);
}
.kiosk-touchscreen #modalPasswordReset .btn {
	height: var(--k-btn-login-height);
	font-size: 1rem;
	border-radius: var(--k-btn-login-radius);
}
.kiosk-touchscreen #modalPasswordReset .close {
	min-width: 44px;
	min-height: 44px;
}

/* ══════════════════════════════════════════════════════════
   TOP RAIL
   ══════════════════════════════════════════════════════════ */
.k-rail {
	position: sticky;
	top: 0;
	z-index: 200;
	height: 72px;
	background: var(--k-card);
	border-bottom: 1px solid var(--k-border);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0 24px;
	gap: 16px;
	box-shadow: 0 1px 8px rgba(20, 24, 31, 0.05);
}
.k-rail-left  { display: flex; align-items: center; justify-self: start; gap: 10px; }
.k-rail-right { display: flex; align-items: center; justify-self: end; gap: 10px; }
.k-rail-brand {
	display: flex; align-items: center; gap: 12px; justify-self: center;
}
.k-rail-brand .k-logo {
	width: 36px; height: 36px; border-radius: 10px;
	background: linear-gradient(135deg, var(--k-accent), var(--k-accent-tint));
	color: white; font-weight: 800; font-size: 16px;
	display: grid; place-items: center;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 8px color-mix(in srgb, var(--k-accent) 25%, transparent);
	overflow: hidden;
}
.k-rail-brand .k-logo img {
	width: 100%; height: 100%; object-fit: contain;
}
.k-rail-brand .k-brand-text {
	font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
	display: flex; flex-direction: column; line-height: 1.1; color: var(--k-text1);
}
.k-rail-brand .k-brand-text small {
	font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--k-text3); margin-top: 2px;
}
.k-rail-btn {
	display: inline-flex; align-items: center; gap: 10px;
	height: 52px; padding: 0 20px;
	border-radius: 999px;
	font-size: 15px; font-weight: 600;
	color: var(--k-text2);
	background: var(--k-card);
	border: 1px solid var(--k-border-s);
	cursor: pointer;
	text-decoration: none;
	transition: background 120ms, color 120ms;
	-webkit-tap-highlight-color: transparent;
}
.k-rail-btn:hover,
.k-rail-btn.is-touching { background: var(--k-card-soft); color: var(--k-text1); text-decoration: none; }
/* Logo links home */
.k-rail-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.k-rail-logo-link:hover { text-decoration: none; }
/* Cart button + live count badge */
.k-rail-cart { position: relative; }
.k-rail-cart-badge {
	position: absolute; top: -4px; right: -4px;
	min-width: 22px; height: 22px; padding: 0 6px;
	border-radius: 999px;
	background: var(--k-accent); color: #fff;
	font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
}
.k-rail-status {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 700;
	color: var(--k-text2);
	background: var(--k-card-soft);
	border: 1px solid var(--k-border);
	padding: 6px 12px 6px 10px;
	border-radius: 999px;
}
.k-rail-dot {
	width: 8px; height: 8px; border-radius: 999px;
	background: #18a957;
	box-shadow: 0 0 0 3px rgba(24, 169, 87, 0.18);
}

/* ══════════════════════════════════════════════════════════
   HOME SCREEN (kiosk/home snippet)
   ══════════════════════════════════════════════════════════ */
.k-home {
	min-height: calc(100vh - 72px);
	display: flex; flex-direction: column; justify-content: center;
	padding: 32px 32px 120px; /* bottom pad for sticky bar */
	gap: 28px;
}
.k-home-inner {
	max-width: 1000px; margin: 0 auto; width: 100%;
}
.k-home-head { text-align: center; margin-bottom: 32px; }
.k-home-title {
	font-size: 38px; font-weight: 800; letter-spacing: -0.025em;
	margin: 0 0 10px; color: var(--k-text1);
}
.k-home-sub {
	font-size: 18px; color: var(--k-text2); margin: 0;
}
.k-home-tiles {
	display: grid; gap: 24px;
}
.k-home-tiles--two { grid-template-columns: 1fr 1fr; }
.k-home-tiles--one { grid-template-columns: 1fr; }
.k-tile {
	position: relative; border-radius: 24px;
	background: var(--k-card); box-shadow: var(--k-shadow);
	border: 1px solid var(--k-border);
	cursor: pointer; overflow: hidden;
	padding: 32px 32px 26px;
	min-height: 280px;
	display: flex; flex-direction: column; justify-content: space-between;
	transition: box-shadow 200ms ease, transform 180ms ease;
	text-decoration: none; color: inherit;
	-webkit-tap-highlight-color: transparent;
}
.k-tile:hover,
.k-tile.is-touching { box-shadow: var(--k-shadow-h); transform: translateY(-3px); text-decoration: none; color: inherit; }
.k-tile--dark {
	background: linear-gradient(160deg, #1a1f2a 0%, #0e1218 100%);
	border-color: rgba(255,255,255,0.06);
}
/* ── Tile photo — sits on the right, fades into the tile on its left edge ──
   Upload kiosk-prints.jpg and kiosk-film.jpg in Pixfizz; they load via asset_url.
   If asset_url doesn't resolve to your uploaded files, paste the image URL directly
   into the two url(...) values below. */
.k-tile-art {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}
/* Left-edge fade so the photo blends into the tile and never sits behind text */
.k-tile-art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0) 62%);
}
.k-tile--dark .k-tile-art::after {
	background: linear-gradient(to right, #161b24 0%, rgba(22,27,36,0.6) 30%, rgba(22,27,36,0) 62%);
}
.k-tile-art--prints { background-image: url('https://cdn.pixfizz.com/fz/38c5925112/0/I90O9csn2BsN9YueX-5IWzOr6ze3xTBxEBU9wculhdE/~/kiosk-prints.jpg'); }
.k-tile-art--film   { background-image: url('https://cdn.pixfizz.com/fz/fe62a55864/0/SZSXqvQd7m74i5en_kYtMH4XNp40cYvEoGrs7JmQmPM/~/kiosk-film.jpg'); }

/* Keep the text and footer above the photo and clear of it */
.k-tile-content { position: relative; z-index: 2; max-width: 52%; }
.k-tile-foot { position: relative; z-index: 2; }
.k-tile-eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--k-accent); margin-bottom: 4px;
}
.k-tile--dark .k-tile-eyebrow { color: #ffb878; }
.k-tile-title {
	font-size: 32px; font-weight: 800; letter-spacing: -0.025em;
	margin: 10px 0 6px; line-height: 1.05; color: var(--k-text1);
}
.k-tile--dark .k-tile-title { color: #f5f6f8; }
.k-tile-desc { font-size: 15px; color: var(--k-text2); line-height: 1.5; max-width: 300px; }
.k-tile--dark .k-tile-desc { color: rgba(245,246,248,0.7); }
.k-tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.k-tile-hint { font-size: 12.5px; font-weight: 600; color: var(--k-text3); }
.k-tile--dark .k-tile-hint { color: rgba(245,246,248,0.5); }
.k-tile-arrow {
	width: 52px; height: 52px; border-radius: 999px;
	background: var(--k-accent); color: white;
	display: grid; place-items: center;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--k-accent) 32%, transparent);
}
.k-tile--dark .k-tile-arrow { background: white; color: #1a1f2a; box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
.k-home-escape {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	margin-top: 8px; font-size: 14px; color: var(--k-text3); font-weight: 600;
}
.k-home-escape-line { flex: 0 1 100px; height: 1px; background: var(--k-border-s); }
.k-home-escape-link {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--k-text2); padding: 8px 14px; border-radius: 999px;
	text-decoration: none;
	transition: background 120ms, color 120ms;
}
.k-home-escape-link:hover { background: var(--k-card-soft); color: var(--k-text1); text-decoration: none; }

/* ══════════════════════════════════════════════════════════
   STICKY CTA BAR
   ══════════════════════════════════════════════════════════ */
.k-sticky-bar {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 150;
	background: var(--k-card);
	border-top: 1px solid var(--k-border);
	padding: 16px 24px;
	display: flex; align-items: center; gap: 14px;
	box-shadow: 0 -4px 20px rgba(20, 24, 31, 0.08);
}
.k-sticky-bar .k-info-note {
	flex: 1;
	display: flex; align-items: center; gap: 10px;
	font-size: 14px; color: var(--k-text2);
}
.k-sticky-bar .k-info-note strong { color: var(--k-text1); font-weight: 800; }
.k-sticky-bar .k-info-note .ico {
	width: 28px; height: 28px; border-radius: 999px;
	background: var(--k-accent-bg); color: var(--k-accent);
	display: grid; place-items: center; flex-shrink: 0;
}
.k-sticky-actions {
	display: flex; align-items: center; gap: 10px;
}

/* ══════════════════════════════════════════════════════════
   TOUCH BUTTONS (global .k-btn — rail, sticky bar, home, etc.)
   ══════════════════════════════════════════════════════════ */
.k-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 60px; padding: 0 28px;
	border-radius: 14px;
	font-size: 16px; font-weight: 700; letter-spacing: -0.005em;
	cursor: pointer; white-space: nowrap;
	transition: background 120ms, color 120ms, box-shadow 120ms, transform 80ms;
	border: none; text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.k-btn:active,
.k-btn.is-touching { transform: translateY(1px); }
.k-btn-primary {
	background: var(--k-accent); color: white;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 16px color-mix(in srgb, var(--k-accent) 28%, transparent);
}
.k-btn-primary:hover,
.k-btn-primary.is-touching { background: var(--k-accent-h); color: white; text-decoration: none; }
.k-btn-secondary {
	background: var(--k-card); color: var(--k-text1);
	border: 1px solid var(--k-border-s);
}
.k-btn-secondary:hover { background: var(--k-card-soft); }

/* ══════════════════════════════════════════════════════════
   IDLE / ATTRACTOR SCREEN
   ══════════════════════════════════════════════════════════ */
.k-idle-screen {
	position: fixed; inset: 0;
	z-index: 9999;
	display: flex; flex-direction: column;
	background: linear-gradient(155deg, #f4f6fa 0%, #eef0f4 45%, #ece6dd 100%);
	cursor: pointer;
	/* Hidden by default — JS adds .is-visible */
	opacity: 0; pointer-events: none;
	transition: opacity 600ms ease;
}
.k-idle-screen.is-visible {
	opacity: 1; pointer-events: auto;
}
.k-idle-bg {
	position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.k-idle-bg .bg-glow {
	position: absolute; border-radius: 999px;
	filter: blur(90px); opacity: 0.55;
}
.k-idle-bg .bg-glow-a {
	width: 700px; height: 700px; left: -180px; top: -240px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--k-accent) 32%, transparent), transparent 70%);
	animation: idle-drift-a 12s ease-in-out infinite alternate;
}
.k-idle-bg .bg-glow-b {
	width: 620px; height: 620px; right: -160px; bottom: -180px;
	background: radial-gradient(closest-side, rgba(241,176,107,0.30), transparent 70%);
	animation: idle-drift-b 14s ease-in-out infinite alternate;
}
@keyframes idle-drift-a {
	0%   { transform: translate(0,0) scale(1); }
	100% { transform: translate(28px, 20px) scale(1.06); }
}
@keyframes idle-drift-b {
	0%   { transform: translate(0,0) scale(1); }
	100% { transform: translate(-24px, -16px) scale(1.05); }
}
.k-idle-bg .bg-grid {
	position: absolute; inset: 0;
	background-image: radial-gradient(circle at center, rgba(20,24,31,0.05) 1px, transparent 1.2px);
	background-size: 24px 24px;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.k-idle-content {
	position: relative; flex: 1;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	padding: 60px; gap: 48px;
}
/* Brand stack */
.k-idle-brand {
	display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.k-idle-logo { position: relative; width: 110px; height: 110px; }
.k-idle-logo .halo {
	position: absolute; inset: 0; border-radius: 32px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--k-accent) 28%, transparent), transparent 72%);
	pointer-events: none;
}
.k-idle-logo .halo-1 { inset: -16px; animation: idle-breathe 4.5s ease-in-out infinite; }
.k-idle-logo .halo-2 { inset: -34px; animation: idle-breathe 4.5s ease-in-out -1.5s infinite; opacity: 0.6; }
.k-idle-logo .halo-3 { inset: -54px; animation: idle-breathe 4.5s ease-in-out -3s infinite; opacity: 0.32; }
@keyframes idle-breathe {
	0%, 100% { transform: scale(0.9); opacity: 0.4; }
	50%      { transform: scale(1.1); opacity: 0.85; }
}
.k-idle-logo .mark {
	position: relative; width: 100%; height: 100%;
	border-radius: 28px;
	background: linear-gradient(135deg, var(--k-accent), var(--k-accent-tint));
	color: white; font-weight: 800; font-size: 52px; letter-spacing: -0.04em;
	display: grid; place-items: center; overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.4),
		0 16px 40px color-mix(in srgb, var(--k-accent) 28%, transparent),
		0 4px 12px rgba(20,24,31,0.08);
}
.k-idle-logo .mark img { width: 70%; height: 70%; object-fit: contain; }
.k-idle-name {
	font-size: 50px; font-weight: 800; letter-spacing: -0.03em;
	color: var(--k-text1); margin: 0; line-height: 1;
}
.k-idle-tag {
	font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
	text-transform: uppercase; color: var(--k-text3); margin: 0;
}
/* Tap CTA */
.k-idle-cta {
	position: relative; display: flex; flex-direction: column;
	align-items: center; gap: 16px; padding: 8px 0;
}
.k-idle-cta .cta-aura {
	position: absolute; left: 50%; top: 50%;
	width: 440px; height: 120px;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--k-accent) 14%, transparent), transparent 70%);
	border-radius: 999px;
	animation: idle-aura 3s ease-in-out infinite;
	pointer-events: none;
}
@keyframes idle-aura {
	0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.85); }
	50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}
.k-idle-cta .cta-line {
	position: relative; font-size: 34px; font-weight: 700;
	letter-spacing: -0.022em; color: var(--k-text1); margin: 0;
}
.k-idle-cta .cta-bar {
	position: relative; display: block;
	width: 52px; height: 5px; border-radius: 999px;
	background: var(--k-accent);
	box-shadow: 0 0 20px color-mix(in srgb, var(--k-accent) 42%, transparent);
	animation: idle-bar 2.4s ease-in-out infinite;
	transform-origin: center;
}
@keyframes idle-bar {
	0%, 100% { transform: scaleX(0.5); opacity: 0.5; }
	50%      { transform: scaleX(1);   opacity: 1; }
}
/* Value props */
.k-idle-props {
	display: flex; align-items: center; gap: 16px;
	font-size: 15px; font-weight: 600; color: var(--k-text2);
}
.k-idle-props .prop { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.k-idle-props .prop .ico {
	width: 36px; height: 36px; border-radius: 11px;
	background: var(--k-card); border: 1px solid var(--k-border);
	color: var(--k-accent); display: grid; place-items: center;
	box-shadow: 0 2px 8px rgba(20,24,31,0.06);
}
.k-idle-props .prop-dot {
	width: 4px; height: 4px; border-radius: 999px;
	background: var(--k-muted); opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT / PDP / CART / CHECKOUT KIOSK ADJUSTMENTS
   Larger tap targets, clearance for the sticky bar
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-details,
.kiosk-touchscreen .product-page,
.kiosk-touchscreen .product-details-prints {
	padding-bottom: 100px; /* clear sticky bar */
}
/* Make primary product buttons large touch targets */
.kiosk-touchscreen .btn-design-now,
.kiosk-touchscreen .btn-start-creating,
.kiosk-touchscreen .btn-add-to-cart,
.kiosk-touchscreen .product-cta .btn-primary {
	min-height: 60px !important;
	font-size: 16px !important;
	border-radius: 14px !important;
	padding: 0 28px !important;
}
/* Cart page kiosk overrides */
.kiosk-touchscreen .cart,
.kiosk-touchscreen section.main.cart {
	padding-bottom: 100px !important;
}
/* Checkout page kiosk overrides */
.kiosk-touchscreen .checkout-page,
.kiosk-touchscreen .checkout {
	padding-bottom: 100px !important;
}

/* Native Shopper form controls — comfortable for finger use */
.kiosk-touchscreen .form-control,
.kiosk-touchscreen .custom-select,
.kiosk-touchscreen select {
	min-height: 56px;
	font-size: 1.05rem;
}

/* ── Photo-prints size steppers → round +/- like the cart ──
   Light DOM, but the component sets its own button radius/fill,
   so the visual props are forced. Scoped to the prints panel. */
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: max-content;
	background: transparent;
	border: 0;
	padding: 0;
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	border-radius: 999px !important;
	background: var(--k-card) !important;
	border: 1px solid var(--k-border-s) !important;
	color: var(--k-text1) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(20, 24, 31, 0.05);
	transition: background 120ms, border-color 120ms, transform 80ms;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button:hover {
	background: var(--k-card-soft) !important;
	border-color: var(--k-text3) !important;
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button:active {
	transform: scale(0.92);
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button:disabled {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button svg {
	width: auto !important;
	height: 20px !important;
}
/* Quantity number (a tappable <span>) */
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity span {
	min-width: 32px;
	text-align: center;
	font-size: 17px;
	font-weight: 800;
	color: var(--k-text1);
	cursor: pointer;
}

/* ══════════════════════════════════════════════════════════
   CART PAGE — card-based layout (kiosk)
   Restyles the standard Shopper cart markup toward the kiosk
   card design. Scoped to .kiosk-touchscreen .main.cart so it
   can't leak to other pages.
   ══════════════════════════════════════════════════════════ */
/* Use more of the wide kiosk screen + breathing room top/bottom */
.kiosk-touchscreen .main.cart {
	padding-top: 40px !important;
}
.kiosk-touchscreen .main.cart > .container {
	max-width: 1440px;
	padding-left: 32px;
	padding-right: 32px;
}

/* ── Heading: left-aligned, bold, with an eyebrow ── */
.kiosk-touchscreen .main.cart h3 {
	text-align: left !important;
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--k-text1);
	margin-bottom: 30px;
}
.kiosk-touchscreen .main.cart h3::before {
	content: "Review your order";
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-accent);
	margin-bottom: 6px;
}

/* ── Line-item cards ── */
.kiosk-touchscreen .main.cart .list-group-lg {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.kiosk-touchscreen .main.cart .list-group-lg > .list-group-item {
	background: var(--k-card);
	border: 1px solid var(--k-border) !important;
	border-radius: 16px;
	box-shadow: var(--k-shadow);
	padding: 26px 28px;
}
/* Rounded thumbnail (px-project-preview image lives in shadow DOM) */
.kiosk-touchscreen .main.cart .list-group-item img,
.kiosk-touchscreen .main.cart .list-group-item px-project-preview {
	border-radius: 12px;
	overflow: hidden;
}
.kiosk-touchscreen .main.cart .list-group-item px-project-preview::part(img) {
	border-radius: 12px;
}
/* edit pill under the thumbnail */
.kiosk-touchscreen .main.cart .btn-light.btn-xxs {
	border-radius: 999px;
	border: 1px solid var(--k-border-s);
	background: var(--k-card-soft);
	padding: 5px 16px;
	font-weight: 600;
}
/* Title + price */
.kiosk-touchscreen .main.cart .list-group-item .font-weight-bolder a {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--k-text1);
}
.kiosk-touchscreen .main.cart .list-group-item .font-weight-bolder .ml-auto {
	font-size: 18px;
	font-weight: 800;
	color: var(--k-text1);
	white-space: nowrap;
}
/* Options meta — muted secondary text */
.kiosk-touchscreen .main.cart .list-group-item .d-flex[style*="0.8em"] {
	color: var(--k-text3);
	font-size: 13px !important;
	line-height: 1.7;
	margin-bottom: 10px;
}

/* ── Quantity stepper → pill with round +/- (non-cut-print only;
      cut-print lines render "{n} prints" text and have no .quantity) ── */
.kiosk-touchscreen .main.cart .quantity {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--k-card-soft);
	border: 1px solid var(--k-border);
	border-radius: 999px;
	padding: 6px;
}
.kiosk-touchscreen .main.cart .quantity .minus-btn,
.kiosk-touchscreen .main.cart .quantity .plus-btn {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--k-card);
	border: 1px solid var(--k-border-s);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--k-text1);
	padding: 0;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(20, 24, 31, 0.05);
	transition: background 120ms, border-color 120ms, transform 80ms;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .main.cart .quantity .minus-btn:hover,
.kiosk-touchscreen .main.cart .quantity .plus-btn:hover {
	background: var(--k-card-soft);
}
.kiosk-touchscreen .main.cart .quantity .minus-btn:active,
.kiosk-touchscreen .main.cart .quantity .plus-btn:active {
	transform: scale(0.94);
}
.kiosk-touchscreen .main.cart .quantity .minus-btn svg,
.kiosk-touchscreen .main.cart .quantity .plus-btn svg {
	width: 22px;
	height: 22px;
}
.kiosk-touchscreen .main.cart .quantity input {
	width: 52px;
	height: 48px;
	text-align: center;
	border: none;
	background: transparent;
	font-size: 18px;
	font-weight: 800;
	color: var(--k-text1);
	padding: 0;
}
.kiosk-touchscreen .main.cart .quantity input:focus {
	outline: none;
	box-shadow: none;
}
/* Remove control — muted */
.kiosk-touchscreen .main.cart .list-group-item .text-gray-400 {
	color: var(--k-text3) !important;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ── Right column: order summary card ── */
.kiosk-touchscreen .main.cart .card.bg-light {
	background: var(--k-card) !important;
	border: 1px solid var(--k-border);
	border-radius: 16px;
	box-shadow: var(--k-shadow);
}
.kiosk-touchscreen .main.cart .card.bg-light .card-body {
	padding: 24px 26px;
}
.kiosk-touchscreen .main.cart .card.bg-light .card-body::before {
	content: "Order summary";
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: var(--k-text1);
	margin-bottom: 10px;
}
/* Summary rows: flat, not cards */
.kiosk-touchscreen .main.cart .card.bg-light .list-group-item {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 10px 0 !important;
	color: var(--k-text2);
}
/* Big total row (the bold Subtotal line) gets a divider + size bump */
.kiosk-touchscreen .main.cart .card.bg-light .list-group-item.font-weight-bold {
	border-top: 1px solid var(--k-border) !important;
	margin-top: 6px;
	padding-top: 14px;
	font-size: 20px !important;
	color: var(--k-text1);
}
.kiosk-touchscreen .main.cart .card.bg-light .list-group-item.font-weight-bold .ml-auto {
	font-size: 20px !important;
	font-weight: 800;
}

/* ── Coupon: tidy rounded input ── */
.kiosk-touchscreen .main.cart #cartCouponCode {
	height: 56px;
	border-radius: 12px;
	font-size: 1rem;
	border-color: var(--k-border-s);
}
.kiosk-touchscreen .main.cart .form-row .btn.btn-primary {
	border-radius: 12px;
	min-height: 56px;
}

/* ── Continue Shopping / Clear Cart buttons ── */
.kiosk-touchscreen .main.cart .cart-action-btn {
	border-radius: 12px !important;
	border: 1px solid var(--k-border-s) !important;
	background: var(--k-card) !important;
	color: var(--k-text1) !important;
	min-height: 56px;
	font-weight: 600;
}
.kiosk-touchscreen .main.cart .cart-action-btn:hover {
	background: var(--k-card-soft) !important;
}

/* Footer-only checkout on kiosk: hide the in-panel "Proceed to Checkout"
   so the only checkout button is the sticky footer. Scoped to kiosk +
   the cart only — the public shop's button is never touched. */
.kiosk-touchscreen .main.cart #checkoutBtn {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT PAGE — kiosk
   Scoped to .kiosk-touchscreen .checkout-page. Visual only —
   no order/payment logic touched. The public shop checkout has
   no .kiosk-touchscreen body class, so none of this applies there.
   ══════════════════════════════════════════════════════════ */
/* Width + breathing room, matching the cart */
.kiosk-touchscreen .checkout-page {
	padding-top: 40px !important;
}
.kiosk-touchscreen .checkout-page > .container {
	max-width: 1440px;
	padding-left: 32px;
	padding-right: 32px;
}

/* Section headings (Delivery / Store Locations / Contact / Payment / Order Summary) */
.kiosk-touchscreen .checkout-page h6.font-weight-bolder {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--k-text1);
	margin: 4px 0 14px;
}
.kiosk-touchscreen .checkout-page h6.font-size-lg.font-weight-bolder {
	font-size: 22px;
}

/* Section cards → white, rounded, soft shadow */
.kiosk-touchscreen .checkout-page .card.px-rounded {
	background: var(--k-card) !important;
	border: 1px solid var(--k-border) !important;
	border-radius: 16px !important;
	box-shadow: var(--k-shadow) !important;
	overflow: hidden;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .list-group-item {
	border-color: var(--k-border);
}

/* Nested totals card inside Order Summary → flatten so it isn't a box-in-a-box */
.kiosk-touchscreen .checkout-page .card.px-rounded .card {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card .card-body {
	padding: 4px 0 !important;
}
/* Big bold Total row */
.kiosk-touchscreen .checkout-page .list-group-item.font-weight-bolder {
	font-size: 18px !important;
	color: var(--k-text1);
	border-top: 1px solid var(--k-border);
	margin-top: 6px;
	padding-top: 12px !important;
}

/* Option rows (delivery + payment-method radios) → touch size + selected state */
.kiosk-touchscreen .checkout-page label.list-group-item {
	min-height: 64px;
	cursor: pointer;
	transition: background 120ms, box-shadow 120ms;
}
.kiosk-touchscreen .checkout-page label.list-group-item:has(.custom-control-input:checked) {
	background: var(--k-accent-bg);
	box-shadow: inset 0 0 0 2px var(--k-accent);
}
.kiosk-touchscreen .checkout-page .custom-control-label {
	font-size: 1.05rem !important;
}

/* Film-delivery / rush radios → selectable pills */
.kiosk-touchscreen .checkout-page .field-label {
	display: block;
	border: 1px solid var(--k-border-s);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
}
.kiosk-touchscreen .checkout-page .field-label .label-text {
	display: block;
	padding: 16px;
	text-align: center;
	font-weight: 600;
	font-size: 1rem;
}
.kiosk-touchscreen .checkout-page .field-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.kiosk-touchscreen .checkout-page .field-label:has(input:checked) {
	border-color: var(--k-accent);
	background: var(--k-accent-bg);
}

/* Inputs / selects / textarea (sizing comes from the global 56px rule) — just round */
.kiosk-touchscreen .checkout-page .form-control,
.kiosk-touchscreen .checkout-page .custom-select {
	border-radius: 12px;
	border-color: var(--k-border-s);
}

/* Full-width CTA buttons (payment / order) → big, brand-coloured */
.kiosk-touchscreen .checkout-page .btn-block {
	min-height: 58px;
	font-size: 16px;
	font-weight: 700;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.kiosk-touchscreen .checkout-page .btn-block.btn-primary,
.kiosk-touchscreen .checkout-page .btn-block.btn-dark {
	background: var(--k-accent);
	border-color: var(--k-accent);
	color: #fff;
}
.kiosk-touchscreen .checkout-page .btn-block.btn-primary:hover,
.kiosk-touchscreen .checkout-page .btn-block.btn-dark:hover {
	background: var(--k-accent-h);
	border-color: var(--k-accent-h);
	color: #fff;
}
/* The real "place order" button gets the most weight */
.kiosk-touchscreen .checkout-page #pixfizz-pay-at-store .btn {
	min-height: 64px;
	font-size: 18px;
}
/* Small inline Save buttons stay modest but finger-friendly */
.kiosk-touchscreen .checkout-page .btn-xs,
.kiosk-touchscreen .checkout-page .btn-sm:not(.btn-block) {
	min-height: 44px;
}

/* Footer-only-checkout decision: the sticky footer can't reliably submit
   payment, so hide it on checkout (the in-panel button is the real CTA).
   Only matches on the kiosk checkout — the cart keeps its footer. */
body.kiosk-touchscreen:has(.checkout-page) #kiosk-sticky-bar {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT PAGE — kiosk polish (cart-matched)
   Flows top-down like the cart. The previous "fit 1920×1080"
   version force-centred the row and stretched the left column,
   which shoved Store Locations to the bottom and left an
   L-shaped void. Removed — only safe, non-layout polish kept.
   ══════════════════════════════════════════════════════════ */
/* Section headings */
.kiosk-touchscreen .checkout-page h6.font-weight-bolder {
	margin: 0 0 12px !important;
}
/* Card padding */
.kiosk-touchscreen .checkout-page .card.px-rounded > .list-group-item {
	padding: 20px !important;
}
/* Order Summary — product line */
.kiosk-touchscreen .checkout-page .list-group-item.px-rounded-top {
	padding: 18px 20px !important;
}
.kiosk-touchscreen .checkout-page .list-group-item.px-rounded-top img {
	max-height: 84px !important;
	width: auto !important;
}
.kiosk-touchscreen .checkout-page .list-group-item.px-rounded-top p.mb-4 {
	margin-bottom: 6px !important;
}
/* Totals block + hr spacing */
.kiosk-touchscreen .checkout-page .card.mb-2 {
	margin-bottom: 0 !important;
}
.kiosk-touchscreen .checkout-page .card.px-rounded hr {
	margin-top: 14px !important;
	margin-bottom: 14px !important;
}
/* Film + service-time selectors — trim oversized gaps but keep air */
.kiosk-touchscreen .checkout-page .variant-selector .mb-5 {
	margin-bottom: 4px !important;
}
.kiosk-touchscreen .checkout-page .variant-selector .mt-3 {
	margin-top: 12px !important;
}
.kiosk-touchscreen .checkout-page .variant-selector .px-title {
	margin-bottom: 0 !important;
}
/* Order notes — comfortable 3 rows */
.kiosk-touchscreen .checkout-page textarea.form-control {
	min-height: 84px !important;
	height: 84px !important;
}
/* Store-location tiles — clear selected state for touch */
.kiosk-touchscreen .checkout-page .card.card-lg.px-rounded {
	transition: box-shadow 120ms, border-color 120ms;
}
.kiosk-touchscreen .checkout-page .card.card-lg.px-rounded:has(.custom-control-input:checked) {
	border-color: var(--k-accent) !important;
	box-shadow: inset 0 0 0 2px var(--k-accent) !important;
	background: var(--k-accent-bg) !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.k-home-tiles--two { grid-template-columns: 1fr; }
	.k-home-title { font-size: 30px; }
	.k-tile-title { font-size: 26px; }
	.k-idle-name { font-size: 38px; }
	.k-idle-cta .cta-line { font-size: 26px; }
	.k-idle-props { flex-wrap: wrap; justify-content: center; gap: 10px; }
}

@media (max-width: 767.98px) {
	.kiosk-touchscreen .k-login-page {
		padding: 1.5rem 0;
		align-items: flex-start;
	}
	.kiosk-touchscreen .k-login-header {
		margin-bottom: 1.5rem;
	}
	.kiosk-touchscreen .k-login-title {
		font-size: 1.5rem;
	}
	.kiosk-touchscreen .k-login-tabs {
		padding: 1rem 1rem 0;
	}
	.kiosk-touchscreen .k-tab-content {
		padding: 1.25rem 1rem;
	}
}
/* ══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE (PDP) — kiosk + touch only
   Restyles the standard Shopper buy flow toward the kiosk
   prototype: eyebrow + big title, step-numbered option groups,
   large tile selectors with a clear checked state, a restyled
   scanning dropdown, and a big brand Add to Cart CTA.

   Scoped to .kiosk-touchscreen and (for the option/CTA rules)
   to .product-form, so nothing leaks to the public storefront
   or to the kiosk cart / checkout (which style .field-label
   their own way). Visual only — no markup or logic touched.

   KNOWN CSS-ONLY LIMITS (by design, see notes to AdeB):
   - Scanning stays a native <select> styled as a big dropdown;
     it cannot become a tile row without markup changes.
   - Per-option helper subtitles ("Most common — Portra…") are
     not in the live data, so they can't be injected.
   - "Step N" numbering uses a CSS counter on .select-box. It
     relies on Pixfizz hiding inactive option groups with
     display:none (hidden groups are not counted). If the
     numbers ever read wrong, delete the .px-title label::before
     rule below — everything else is unaffected.
   ══════════════════════════════════════════════════════════ */

/* ── Wider use of the kiosk screen ── */
.kiosk-touchscreen .page-content > .container {
	max-width: 1320px;
}

/* ── Flip the column balance: options lead, image is a side card ──
   Live markup ships the gallery in .col-md-7 (58%) and the options
   in .col-md-5 (42%). The prototype is the opposite — options get
   the screen, the image is a compact card. Override the two columns
   (min-width guard so narrow / portrait still stacks full width). */
@media (min-width: 901px) {
	.kiosk-touchscreen .product-single > .col-md-7 {
		flex: 0 0 37%;
		max-width: 37%;
	}
	.kiosk-touchscreen .product-single > .col-md-5 {
		flex: 0 0 63%;
		max-width: 63%;
	}
}

/* ── Details column header: eyebrow + big title + big price ── */
.kiosk-touchscreen .product-details .product-category {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-accent);
	margin: 0 0 8px;
}
.kiosk-touchscreen .product-details .product-name {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	color: var(--k-text1);
	margin: 0 0 12px;
}
.kiosk-touchscreen .product-details .product-price {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--k-text1);
	margin-bottom: 18px;
}
.kiosk-touchscreen .product-details .product-price px-product-price {
	font: inherit;
}

/* ── Gallery → soft rounded card, rounded image ── */
.kiosk-touchscreen .product-single .px-product-gallery {
	background: var(--k-card);
	border: 1px solid var(--k-border);
	border-radius: 24px;
	box-shadow: var(--k-shadow);
	padding: 20px;
}
.kiosk-touchscreen .product-single .px-product-gallery .px-display,
.kiosk-touchscreen .product-single .px-product-gallery .px-item,
.kiosk-touchscreen .product-single .px-product-gallery .px-item img {
	border-radius: 16px;
}
/* Keep the image a tidy card rather than a tall slab */
.kiosk-touchscreen .product-single .px-product-gallery .px-item img {
	max-height: 460px;
	object-fit: cover;
}

/* ══════════════════════════════════════════════════════════
   OPTION GROUPS — step eyebrow + title
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-form px-option-selector {
	counter-reset: k-step;
}
.kiosk-touchscreen .product-form .select-box {
	counter-increment: k-step;
	margin-bottom: 26px;
}
.kiosk-touchscreen .product-form .select-box .px-title {
	display: block;
	margin-bottom: 12px;
}
.kiosk-touchscreen .product-form .select-box .px-title label {
	position: relative;
	display: block;
	margin: 0;
	padding-top: 18px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--k-text1);
}
.kiosk-touchscreen .product-form .select-box .px-title label::before {
	content: "Step " counter(k-step);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-accent);
}

/* ══════════════════════════════════════════════════════════
   TILE SELECTORS (radio .field-label)
   ══════════════════════════════════════════════════════════ */
/* Equal-height tiles across a row: make each column a flex cell so
   the tile fills it, even when one label wraps to two lines. */
.kiosk-touchscreen .product-form .select-box .row.d-flex {
	margin-left: -6px;
	margin-right: -6px;
	align-items: stretch;
}
.kiosk-touchscreen .product-form .select-box .row.d-flex > [class*="col-"] {
	display: flex;
	padding-left: 6px;
	padding-right: 6px;
	margin-bottom: 12px;
}

/* ── Neutralise the base Shopper option styling ──
   The stock theme turns each .label-text into its own bordered
   button and fills it solid on select. We want the .field-label
   tile to be the ONE container, so strip the inner element back
   to plain centred text. !important guards against the base
   rules which are similarly specific. */
.kiosk-touchscreen .product-form .field-label .label-text {
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--k-text1) !important;
}

.kiosk-touchscreen .product-form .field-label {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 100%;
	min-height: 72px;
	margin: 0;
	padding: 12px 14px;
	background: var(--k-card);
	border: 2px solid var(--k-border-s);
	border-radius: 14px;
	box-shadow: var(--k-shadow);
	cursor: pointer;
	position: relative;
	transition: border-color 120ms, background 120ms, box-shadow 120ms, transform 80ms;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .product-form .field-label:hover {
	border-color: var(--k-text3);
}
.kiosk-touchscreen .product-form .field-label:active,
.kiosk-touchscreen .product-form .field-label.is-touching {
	transform: translateY(1px);
}
/* Hide the native radio — the tile itself is the control */
.kiosk-touchscreen .product-form .field-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

/* Selected state — accent border + light tint + dark text + check badge.
   No solid fill: the badge carries the "selected" signal so the label
   stays readable. */
.kiosk-touchscreen .product-form .field-label:has(input:checked) {
	border-color: var(--k-accent);
	background: var(--k-accent-bg);
	box-shadow: var(--k-shadow);
}
.kiosk-touchscreen .product-form .field-label:has(input:checked) .label-text {
	color: var(--k-accent-h) !important;
}
.kiosk-touchscreen .product-form .field-label:has(input:checked)::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background-color: var(--k-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px;
}

/* ══════════════════════════════════════════════════════════
   SCANNING — native <select> styled as a big touch dropdown
   (cannot be tiled without markup changes)
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-form .select-box select.form-control {
	height: 64px;
	min-height: 64px;
	width: 100%;
	border: 1.5px solid var(--k-border-s);
	border-radius: 14px;
	background-color: var(--k-card);
	box-shadow: var(--k-shadow);
	font-size: 16px;
	font-weight: 600;
	color: var(--k-text1);
	padding: 0 50px 0 18px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238898a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 18px;
}
.kiosk-touchscreen .product-form .select-box select.form-control:focus {
	border-color: var(--k-accent);
	box-shadow: 0 0 0 3px var(--k-accent-bg);
	outline: none;
}

/* ══════════════════════════════════════════════════════════
   ADD TO CART — big brand CTA
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-form .add-to-cart-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 68px !important;
	margin-top: 10px;
	padding: 0 28px !important;
	background: var(--k-accent);
	border: none;
	border-radius: 16px !important;
	color: #fff;
	font-size: 18px !important;
	font-weight: 800;
	letter-spacing: -0.01em;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
		0 6px 18px color-mix(in srgb, var(--k-accent) 30%, transparent);
	transition: background 120ms, transform 80ms;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .product-form .add-to-cart-button::before {
	content: "";
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kiosk-touchscreen .product-form .add-to-cart-button:hover,
.kiosk-touchscreen .product-form .add-to-cart-button.is-touching {
	background: var(--k-accent-h);
	color: #fff;
	text-decoration: none;
}
.kiosk-touchscreen .product-form .add-to-cart-button:active {
	transform: translateY(1px);
}

/* ══════════════════════════════════════════════════════════
   LONG DESCRIPTION (below the buy box) — readable body text
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-description {
	font-size: 15px;
	line-height: 1.65;
	color: var(--k-text2);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — narrower kiosk / portrait
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.kiosk-touchscreen .product-details .product-name {
		font-size: 32px;
	}
	.kiosk-touchscreen .product-details .product-price {
		font-size: 26px;
	}
	.kiosk-touchscreen .product-form .field-label {
		min-height: 66px;
	}
}
/* ══════════════════════════════════════════════════════════
   STICKY BAR — cart-status note (product / prints pages)
   Pairs with the reworked kiosk/sticky-bar snippet: the whole
   note is a tap-through to the cart, with a "View cart" affordance
   pinned right. Empty state is plain text (.k-info-note, no link).
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .k-sticky-bar a.k-info-note--link {
	text-decoration: none;
	color: var(--k-text2);
	transition: color 120ms;
}
.kiosk-touchscreen .k-sticky-bar a.k-info-note--link:hover {
	color: var(--k-text1);
	text-decoration: none;
}
.kiosk-touchscreen .k-sticky-bar .k-info-note__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-weight: 700;
	color: var(--k-accent);
}
/* ===== END: Kiosk PDP overlay ===== */
/* ══════════════════════════════════════════════════════════
   UPLOAD DIALOG (px-upload-dialog) — kiosk touch sizing
   The source buttons ship as .btn.btn-xs, so they're small and
   barely rounded. Scoped to .kiosk-touchscreen (body-level class),
   so the public storefront's dialog is untouched.
   ══════════════════════════════════════════════════════════ */

/* Stack the source buttons with breathing room */
.kiosk-touchscreen .px-upload-dialog .px-ud-sources {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Both source buttons → big, rounded touch targets */
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn {
	width: 100%;
	min-height: var(--k-btn-login-height);   /* 60px */
	border-radius: var(--k-btn-login-radius); /* 14px */
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Primary "This Device" — accent fill */
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-primary {
	background: var(--k-accent);
	border-color: var(--k-accent);
	color: #fff;
}
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-primary:hover,
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-primary.is-touching {
	background: var(--k-accent-h);
	border-color: var(--k-accent-h);
	color: #fff;
}
/* Secondary "My Galleries" — outline that matches kiosk surfaces */
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-outline-secondary:not(.btn-primary) {
	background: var(--k-card);
	border: 1px solid var(--k-border-s);
	color: var(--k-text1);
}
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-outline-secondary:not(.btn-primary):hover {
	background: var(--k-card-soft);
}
/* Close control → finger-friendly tap target */
.kiosk-touchscreen .px-upload-dialog .px-ud-close {
	min-width: 44px;
	min-height: 44px;
}
/* Wider modal — comfortable on a kiosk screen, capped for safety */
.kiosk-touchscreen dialog.px-upload-dialog {
	width: min(560px, 92vw);
	max-width: 560px;
}
/* "Scan QR code..." caption — readable, not tiny */
.kiosk-touchscreen .px-upload-dialog .px-ud-picker-qr p {
	font-size: 1rem;
	color: var(--k-text2);
	margin-bottom: 1rem;
}
/* Optional: title a touch larger to match the bigger modal */
.kiosk-touchscreen .px-upload-dialog .px-ud-header h6 {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--k-text1);
}

/* ===== END: Kiosk Touchscreen Mode ===== */