/** Shopify CDN: Minification failed

Line 3482:1 Unexpected "("
Line 6187:0 Unexpected "}"

**/
/* ES_BUILD v50 */
/* =========================================================
   ES PDP Hover Swap
   Show the next image on hover for the currently selected color
   (Overlay image is appended via JS)
   ========================================================= */

.es-pdp-hover-swap{
  position: relative !important;
  display: block;
}

/* ES: Mobile "Showing X–Y of Z results" line under Filters / Sort */
@media (max-width: 767px){
  .collection-page-fullwidth .es-mobile-results-count,
  .collection-page-sidebar .es-mobile-results-count,
  .collection-page-fullwidth-sty2 .es-mobile-results-count{
    padding: 8px 0 0;
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.12);
    font-size: 12px;
    line-height: 1.2;
    color: rgba(0,0,0,0.75);
  }

  /* Inline mode: when Filters are hidden, "Showing ..." sits in the left toolbar slot */
  .collection-page-fullwidth .es-mobile-results-count--inline,
  .collection-page-sidebar .es-mobile-results-count--inline,
  .collection-page-fullwidth-sty2 .es-mobile-results-count--inline{
    /* Inline mode should look like plain text (not a boxed button) */
    padding: 0 10px !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    color: rgba(0,0,0,0.75) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   FIX46 (final): Swatch "+" circle
   - Smaller on desktop + mobile
   - Draw "+" with CSS (avoids Android font clipping)
   - Works even if markup has NO "+" text (we override old rules that hide ::before/::after)
   ========================================================================== */

/* Base (desktop/tablet) */
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  /* Smaller circle (desktop/tablet) */
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(0,0,0,0.75) !important;
  display: inline-grid !important;
  place-items: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  font-size: 0 !important; /* hide any text "+" */
  line-height: 0 !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 10px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 1px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle:hover,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle:hover,
.quickview-product a.es-more-swatch.es-more-swatch--circle:hover,
.more_variant a.es-more-swatch.es-more-swatch--circle:hover{
  border-color: rgba(0,0,0,0.35) !important;
}

/* Mobile */
@media (max-width: 767px){
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    /* Smaller circle (mobile) */
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}


/* === v26: Quickview main image vertical centering (non-1:1 images) ===
   Keep the main image vertically centered inside the locked square container.
   Scope: quickview only.
*/
.quickview-product .product-media.thumbnail-left .featured-image > a.product-photo{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.quickview-product .product-media.thumbnail-left .featured-image > a.product-photo img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.es-pdp-hover-swap .es-pdp-hover-alt{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s ease;
  will-change: opacity;
  pointer-events: none;
  z-index: 2;
}

/* Ensure the base image stays under the hover overlay */
.es-pdp-hover-swap img.engoj_img_main,
.es-pdp-hover-swap img.engoj_img_main_quickview{
  position: relative;
  z-index: 1;
}

.es-pdp-hover-swap.es-pdp-hovering .es-pdp-hover-alt{
  opacity: 1;
}

.color-gray-darker {
    color: #333;
}

/* =========================================================
   Eyeshells: Mobile collection layout + swatches (Zenni-like)
   - Bigger, easier-to-tap swatches
   - “+N” pill looks intentional
   - Tighter grid spacing on mobile collection pages
   ========================================================= */

@media screen and (max-width: 767px){
  /* Tighter gutters + less vertical whitespace on collection grids */
  .collection_prod .row.grid-uniform{
    margin-left: -8px;
    margin-right: -8px;
  }
  .collection_prod .row.grid-uniform > [class*="col-"]{
    padding-left: 8px;
    padding-right: 8px;
  }
  .collection_prod .js_size_prod.pb-4{
    padding-bottom: 12px !important;
  }

  /* Product card spacing */
  .product-item-v1 .product.mb-30{
    margin-bottom: 10px !important;
  }
  .product-item-v1 .info-product{
    padding-top: 6px;
  }
  .product-item-v1 .price-product{
    margin-bottom: 3px;
    line-height: 1.1;
  }
  .product-item-v1 .title-product{
    margin-bottom: 4px;
    line-height: 1.15;
  }

  /* Swatches row (Zenni-like strip) */
  .product-item-v1 .image-thumbnail{
    margin-top: 6px;
    gap: 8px;
  }
  .product-item-v1 .image-thumbnail .variant-image-group{
    height: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-item-v1 .image-thumbnail .variant-image-group::-webkit-scrollbar{
    display: none;
  }
  .product-item-v1 .image-thumbnail .variant-image-group .border_thumbnail{
    display: inline-flex;
    flex: 0 0 auto;
  }
  .product-item-v1 .image-thumbnail .variant-image-group span.border{
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .product-item-v1 .image-thumbnail .variant-image-group .circle-thumb{
    width: 24px;
    height: 24px;
    border-radius: 0;
    border: 0 !important;
  box-shadow: none;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  /* Underline indicator (straight, square ends) */
.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0,0,0,0.28);
  border-radius: 0;
  pointer-events: none;
}
.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb.active::after{
  height: 2px;
  background: #111;
}

.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb.active{
    border: 0 !important;
  box-shadow: none;
  }

  /* “+N” more colors square (Zenni-ish) */
  .product-item-v1 .image-thumbnail .more_variant{
    margin-left: 0;
    flex: 0 0 auto;
  }
  .product-item-v1 .image-thumbnail .es-more-swatch{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    min-width: 24px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.22);
    background: transparent;
    color: #111;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
  }
}

/* ---------------------------------------------------------
   Mobile: fix “+ in circle” button being clipped on Android
   (and make it slightly smaller)
--------------------------------------------------------- */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail{
    overflow: visible !important;
    min-height: 28px !important;
  }
  .product-item-v1 .image-thumbnail .more_variant{
    overflow: visible !important;
  }
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle:before,
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle:after{
    width: 12px !important;
    height: 2px !important;
  }
}

/* Search overlay should cover all in-page floating controls (e.g. PDP VIDEO button)
   so nothing can sit above the dimmed layer. */
.search-full-destop .bg_search_box{
  z-index: 100 !important;
}
.search-full-destop .search-eveland.active{
  z-index: 101 !important;
}

/* =========================================================
   FIX46: Swatch "+" circle (smaller + always visible)
   - Desktop + Mobile sizes reduced
   - Draw "+" via CSS lines (avoids Android font clipping)
   - Overrides older rules that set ::before/::after content:none
   ========================================================= */

/* Base (desktop/tablet) */
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
  /* Use currentColor for the "+" lines */
  color: rgba(0,0,0,.72) !important;
}

.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 12px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 1px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

/* Mobile */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 11px !important;
    height: 2px !important;
  }
}

/* =========================================================
   Eyeshells: PDP swatches (match collection underline style)
   - No borders
   - Selected: black thick underline
   - Unselected: grey thin underline
   - Horizontal scroll when many colors
   ========================================================= */

.maxus-productdetail__options .swatch{
  display: block;
}

/* Keep label on its own line */
.maxus-productdetail__options .swatch .title_variant{
  display: block;
  width: 100%;
  margin: 0 0 8px 0;
}

/* Swatches row (scrollable) */
.maxus-productdetail__options .swatch .es-swatch-strip{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: 2px; /* room for overline */
}
.maxus-productdetail__options .swatch .es-swatch-strip::-webkit-scrollbar{ display:none; }

.maxus-productdetail__options .swatch .es-swatch-strip > div[data-value]{
  flex: 0 0 auto;
}

.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px; /* room for the overline */
}
.maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
	  /* Larger PDP swatches (customers often zoom/compare colors) */
	  width: 52px !important;
	  height: 52px !important;
	  min-width: 52px !important;
	  min-height: 52px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
  background-position: center !important;
  position: relative;
  display: block;
}

	
/* PDP swatch indicator: an overline ABOVE the swatch image (so it never crops/blocks the thumbnail) */
.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(0,0,0,0.28);
  pointer-events: none;
}

/* =========================================================
   Eyeshells: Mobile collection Filters + Sort (Zenni-style)
   - Put “Filters” + “Sort by: Relevance” on one line
   - Zenni-like spacing and typography
   - No rounded corners
   ========================================================= */

@media screen and (max-width: 767px){
  .shop_control{
    align-items: center;
    padding: 12px 0 10px !important;
    gap: 12px;
  }

  /* Proportions: Filters smaller, Sort bigger (like Zenni) */
  .shop_control > [class*="col-"]:nth-child(1){
    flex: 0 0 42% !important;
    max-width: 42% !important;
  }
  .shop_control > [class*="col-"]:nth-child(2){
    flex: 0 0 58% !important;
    max-width: 58% !important;
  }

  /* Clean edges: remove extra gutters */
  .shop_control > [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* FILTERS button: square outline */
  .shop_control .filter_sortby.title_filter{
    width: 100%;
  }
  .shop_control .filter_sortby .filter{
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(0,0,0,0.9) !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  .shop_control .filter_sortby .filter svg{
    width: 18px;
    height: 18px;
  }

  /* Replace “FILTERS” (uppercase) with “Filters” (Zenni-like) */
  .shop_control .filter_sortby .filter p{
    margin: 0 !important;
    font-size: 0 !important; /* hide original text */
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .shop_control .filter_sortby .filter p::after{
    content: "Filters";
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Sort dropdown: text-like on the right */
  .shop_control .collection-sorting{
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }
  .shop_control .collection-sorting .dropdown{
    width: 100%;
  }
  .shop_control .collection-sorting .dropdown-toggle{
    width: 100%;
    height: 40px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  /* Add “Sort by:” prefix (keeps the dynamic label visible) */
  .shop_control .collection-sorting .dropdown-toggle::before{
    content: "⇅";
    font-weight: 600;
    margin-right: 6px;
  }

  /* Dropdown menu align right */
  .shop_control .collection-sorting .dropdown-content{
    left: auto;
    right: 0;
    min-width: 220px;
  }
}


/* =========================================================
   Eyeshells: Keep PDP VIDEO button stable during image hover swap
   - Hover swap overlay uses z-index:2; lift VIDEO/360 above it.
   ========================================================= */

.gallery-control .btn-video,
.gallery-control .btn-360{
  z-index: 30 !important;
}

.maxus-productdetail__options .swatch .es-swatch-strip div[data-value] input[type="radio"]:checked ~ .radio_style2::before{
  height: 3px;
  background: #111;
}
@media screen and (max-width: 989px){
	  /* Mobile: keep swatches large enough for customers to compare colors */
	  .maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
	    width: 52px !important;
	    height: 52px !important;
	    min-width: 52px !important;
	    min-height: 52px !important;
	  }
	}

	/* Safety: hide any leftover tooltip elements inside swatch blocks */
	.maxus-productdetail__options .swatch .tooltip{ display:none !important; }

/* Selected state */
.maxus-productdetail__options .swatch .es-swatch-strip > div[data-value] input[type="radio"]:checked ~ .radio_style2 .color_style2{
  box-shadow: none;
}

/* PDP: show color names under each swatch thumbnail */
.maxus-productdetail__options .swatch .text_color{
  display: block !important;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.1;
  color: #222;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* If you ever want the indicator to be a bit more obvious everywhere */
@media screen and (max-width: 989px){
  .es-swipe-enabled .es-swipe-indicator{
    width: 54px;
    height: 5px;
  }
  .es-swipe-enabled .es-swipe-thumb{
    height: 5px;
  }
}

/* =========================================================
   Eyeshells: Quickview swatches should WRAP (multi-line)
   - Keep PDP as horizontal scroll
   - Only affects the quick-view modal
   ========================================================= */
#quick-view .maxus-productdetail__options .swatch .es-swatch-strip,
.br-product-popup .maxus-productdetail__options .swatch .es-swatch-strip{
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
#quick-view .maxus-productdetail__options .swatch .es-swatch-strip > div[data-value],
.br-product-popup .maxus-productdetail__options .swatch .es-swatch-strip > div[data-value]{
  margin-bottom: 8px;
}
.frame-details li {
    padding-top:4px;
    padding-bottom:4px;
}
.frame-details .h2,.frame-details h2{
    font-size: 18px!important;
    font-weight: bold;
}
.frame-details{
  text-align:left;font-weight: 600;margin-bottom:20px;
}
.des_text.col-md-12 {
padding:0 30px 40px;
}
.des_text.col-md-12 {
padding:0 15px 40px;
}

.frame-details span.color-primary,.frame-details a {
    color: #D4AF37;
}

.comp-pdp-nav-tab .tab-content .frame-width:before {
    background: url(/dev/image/site/frame-size-icons/frame-width.svg) no-repeat;
}

.maxus-productdetail__options .swatch .title_variant{
  display:block!important;
  width:100%;
  font-size: 14px!important;
  border: none!important;
}
.maxus-productdetail__options .swatch label {
    min-width: 60px!important;
    height: 60px!important;

}
.maxus-productdetail__options .swatch_radio1 .radio_style2 .color_style2 {
    border: 1px solid #e0e0e0;
}
.maxus-productdetail__options .swatch_radio1 input:checked+.radio_style2 .color_style2 {
    border: 2px solid #111;
}
.maxus-productdetail__options:not(:last-child) {
    margin-right: 0!important;
}
.maxus-productdetail__options .radio_style2 span {
    font-size: 12px;
    line-height: 13px;
    margin-right: 10px;
    margin-top: 5px;
}
.maxus-productdetail__options .swatch {
    align-items: flex-start!important;
}
.maxus-productdetail__options .radio_style2 {
    display: flex;
    align-items: center;
  flex-direction: column;
  max-width: 70px;
  text-align: center;
}
.ciloe-size-guide {
    padding-top: 0!important;
}

@media (min-width: 768px){
  .detail-info {
    position: sticky;
}

  .detail-info.static {
    position: static;
}

  .des_text.col-md-12 {
padding:0 30px 40px;
}
  .list_ul_engo_full.only-mb{
  display:none!important;
}
  }

@media (min-width: 1024px){
.margin-left-15-md {
    margin-left: 15px;
}
.padding-left-30-md {
    padding-left: 30px;
}

  .margin-bottom-0 {
    margin-bottom: 0;
}

  .list-unstyled {
    padding-left: 0;
    list-style: none;
}
}

@media (max-width: 767px){
.list_ul_engo_full.only-pc{
  display:none!important;
}}




/* =========================================================
   Product card: show 2nd image on hover (grid/list)
   ========================================================= */

/* New implementation used by product-item-v1/product-item-grid */
.engo-hover-swap{
  position: relative;
  display: block;
  overflow: hidden;
}

/* ============================
   Mobile collection toolbar FINAL overrides
   Fixes:
   1) "FiltersFilters" duplicate label (caused by earlier ::after label)
   2) Hover makes text/icon disappear (theme sets white on hover but we keep transparent bg)
   3) Reduce inner whitespace + keep Filters & Sort on ONE row
   ============================ */

@media (max-width: 767px){
  /* Keep on one row reliably (account for gap with calc) */
  .collection-page-fullwidth .shop_control{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 10px 0 !important;
  }

  .collection-page-fullwidth .shop_control > [class*="col-"]{
    min-width: 0 !important;
  }

  .collection-page-fullwidth .shop_control > [class*="col-"]:nth-child(1){
    flex: 0 1 calc(44% - 4px) !important;
    max-width: calc(44% - 4px) !important;
  }
  .collection-page-fullwidth .shop_control > [class*="col-"]:nth-child(2){
    flex: 0 1 calc(56% - 4px) !important;
    max-width: calc(56% - 4px) !important;
  }

  /* Filters button: compact + no hover inversion */
  .collection-page-fullwidth .shop_control .filter_sortby .filter{
    height: 34px !important;
    padding: 0 8px !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.9) !important;
    border-radius: 0 !important;
  }
  .collection-page-fullwidth .shop_control .filter_sortby .filter svg{
    width: 14px !important;
    height: 14px !important;
    fill: #111 !important;
  }
  .collection-page-fullwidth .shop_control .filter_sortby .filter p{
    margin: 0 0 0 4px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    color: #111 !important;
  }
  /* IMPORTANT: remove earlier pseudo-label to avoid "FiltersFilters" */
  .collection-page-fullwidth .shop_control .filter_sortby .filter p::after{
    content: none !important;
  }

  .collection-page-fullwidth .shop_control .filter_sortby .filter:hover,
  .collection-page-fullwidth .shop_control .filter_sortby .filter:focus{
    background: transparent !important;
    border-color: rgba(0,0,0,0.9) !important;
  }
  .collection-page-fullwidth .shop_control .filter_sortby .filter:hover p,
  .collection-page-fullwidth .shop_control .filter_sortby .filter:focus p{
    color: #111 !important;
  }
  .collection-page-fullwidth .shop_control .filter_sortby .filter:hover svg,
  .collection-page-fullwidth .shop_control .filter_sortby .filter:focus svg{
    fill: #111 !important;
  }

  /* Sort: compact + right aligned; keep only icon + current value */
  .collection-page-fullwidth .shop_control .collection-sorting,
  .collection-page-fullwidth .shop_control .collection-sorting .dropdown{
    width: 100% !important;
  }

  .collection-page-fullwidth .shop_control .collection-sorting .dropdown-toggle{
    height: 34px !important;
    padding: 0 6px !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: #111 !important;
  }

  /* Only icon prefix (no "Sort by:") */
  .collection-page-fullwidth .shop_control .collection-sorting .dropdown-toggle::before{
    content: "⇅";
    margin-right: 6px;
    font-weight: 600;
    color: #111;
  }

  /* Dropdown menu: shrink width and reduce right-side whitespace */
  .collection-page-fullwidth .shop_control .collection-sorting .dropdown-menu.dropdown-content{
        left: auto !important;
    right: 0 !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 90vw !important;
  }
  .collection-page-fullwidth .shop_control .collection-sorting .dropdown-content a,
  .collection-page-fullwidth .shop_control .collection-sorting .dropdown-content button{
    padding: 10px 12px !important;
    white-space: nowrap !important;
  }
}
.engo-hover-swap img{
  display: block;
}
.engo-hover-swap .engo-secondary-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Make hover swap instant (no fade animation) */
  transition: none;
}
.engo-hover-swap .engo-primary-image{
  /* Make hover swap instant (no fade animation) */
  transition: none;
}
@media (hover:hover) and (pointer:fine){
  .engo-hover-swap:hover .engo-secondary-image{ opacity: 1; }
  .engo-hover-swap:hover .engo-primary-image{ opacity: 0; }
}

/* Legacy class used by product-item-list (in case theme CSS doesn't define it) */
.img-product a.engoj_find_img{ position: relative; display: block; }
.img-product a.engoj_find_img .img-product-hover{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Make hover swap instant (no fade animation) */
  transition: none;
}

/* Disable zoom animation for product cards using hover swap */
.product-thumb:hover .engo-hover-swap.zoom-thumb img{
  transform: none !important;
  -webkit-transform: none !important;
}
@media (hover:hover) and (pointer:fine){
  .img-product a.engoj_find_img:hover .img-product-hover{ opacity: 1; }
}


/* =========================================================
   Collection page: make image swap truly instant
   (Theme SCSS sets .img-product img { transition: 0.8s; } which
   still animates the primary image unless we override it.)
   ========================================================= */

/* Remove ALL transitions/animations on product images in collection grid */
.collection-page-fullwidth .img-product img,
.collection-page-fullwidth .engoj_find_img img,
.collection-page-fullwidth .engo-hover-swap img,
.collection-page-fullwidth .img-product a.engoj_find_img .img-product-hover,
.collection-page-fullwidth .engo-hover-swap .engo-primary-image,
.collection-page-fullwidth .engo-hover-swap .engo-secondary-image{
  transition: none !important;
  animation: none !important;
}

/* Prevent any hover zoom/transform effects in collection grid */
.collection-page-fullwidth .img-product:hover img,
.collection-page-fullwidth .img-product a:hover img{
  transform: none !important;
  -webkit-transform: none !important;
}


/* =========================================================
   Collection page: Quick View icon (magnifier)
   Make it less visually distracting.

   Option 1 (enabled below): keep the icon subtly visible all
   the time (no pop-in / no slide-in). Hover only strengthens it.

   If you prefer "only show on hover but instant", see Option 2
   further below.
   ========================================================= */

/* --- Option 1: subtle always-visible (recommended) --- */
/* Broad selector (covers all product card variants used in collection) */
.collection-page-fullwidth .product .product-icon-action .quick-view,
/* Specific fallback */
.collection-page-fullwidth .product-item-v1 .product .product-icon-action .quick-view{
  visibility: visible !important;
  opacity: 0.18 !important;
  transform: none !important;
  transition: none !important;
}
.collection-page-fullwidth .product:hover .product-icon-action .quick-view,
.collection-page-fullwidth .product-item-v1 .product:hover .product-icon-action .quick-view{
  opacity: 1 !important;
}

/* Also remove the built-in stagger delay on quick view */
.collection-page-fullwidth .product:hover .product-icon-action .quick-view,
.collection-page-fullwidth .product-item-v1 .product:hover .product-icon-action .quick-view{
  transition-delay: 0s !important;
}

/* Keep the button itself from animating in/out */
.collection-page-fullwidth .product .product-icon-action .quick-view a,
.collection-page-fullwidth .product .product-icon-action .quick-view button,
.collection-page-fullwidth .product-item-v1 .product .product-icon-action .quick-view a,
.collection-page-fullwidth .product-item-v1 .product .product-icon-action .quick-view button{
  transition: none !important;
}

/* --- Option 2: ONLY show on hover, but instant (uncomment to use) --- */
/*
.collection-page-fullwidth .product .product-icon-action .quick-view,
.collection-page-fullwidth .product-item-v1 .product .product-icon-action .quick-view{
  visibility: hidden !important;
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}
.collection-page-fullwidth .product:hover .product-icon-action .quick-view,
.collection-page-fullwidth .product-item-v1 .product:hover .product-icon-action .quick-view{
  visibility: visible !important;
  opacity: 1 !important;
}
*/

/* =========================================================
   2026-01-01: Product card UX polish (Home + Collection)
   - Keep product image area stable (prevents slider collapse)
   - Instant 2nd-image swap (no animation)
   - Quick View: quieter (hover-only + delay + no motion)
   ========================================================= */

/* 1) Stable image box (square like Zenni). Prevents carousel height collapse */
.product-item-v1 .img-product a.engoj_find_img{
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .product-item-v1 .img-product a.engoj_find_img::before{
    content: "";
    display: block;
    padding-bottom: 100%;
  }
}
.product-item-v1 .img-product a.engoj_find_img > img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* 2) Instant hover swap (no fade). Keep only on real hover devices */
.product-item-v1 .engo-hover-swap .engo-primary-image,
.product-item-v1 .engo-hover-swap .engo-secondary-image{
  transition: none !important;
}
.product-item-v1 .engo-hover-swap .engo-secondary-image{
  opacity: 0 !important;
}
@media (hover:hover) and (pointer:fine){
  .product-item-v1 .engo-hover-swap:hover .engo-secondary-image{ opacity: 1 !important; }
  .product-item-v1 .engo-hover-swap:hover .engo-primary-image{ opacity: 0 !important; }
}

/* 3) Quick View: hover-only + delayed show, no move/scale animation */
.product-item-v1 .product-icon-action .quick-view{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
  transition: opacity 0s linear 0s !important;
}
@media (hover:hover) and (pointer:fine){
  .product-item-v1 .product:hover .product-icon-action .quick-view{
    opacity: 1 !important;
    pointer-events: auto !important;
    transition-delay: 150ms !important; /* 120–180ms sweet spot */
  }
}
/* Touch devices: no hover Quick View (avoid flicker) */
@media (hover:none), (pointer:coarse){
  .product-item-v1 .product-icon-action .quick-view{ display: none !important; }
}

/* 4) Reduce load-in animations in product carousels (match Collection feel) */
.section-product-v1 .product_item,
.section-flash-sale .product_new > .col-12{
  animation: none !important;
  transform: none !important;
}

/* =========================================================
   2026-01-01: Quick View (magnifier) — make Home & Collection identical
   - Show ONLY on hover
   - No slide/scale animation
   - ~150ms delay to avoid “flashing” when the cursor passes quickly
   - Hide on touch devices
   ========================================================= */

@media (hover:hover) and (pointer:fine){
  /* Default hidden state */
  [class*="product-item-v"] .product-icon-action .quick-view{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    animation: none !important;
    transition: opacity 0s linear 0s, visibility 0s linear 150ms !important;
    transition-delay: 0s !important;
  }

  /* Show on hover (delayed) */
  [class*="product-item-v"] .product:hover .product-icon-action .quick-view,
  [class*="product-item-v"]:hover .product-icon-action .quick-view{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    animation: none !important;
    transition: opacity 0s linear 150ms, visibility 0s linear 0s !important;
  }

  /* Ensure the button itself doesn't animate */
  [class*="product-item-v"] .product-icon-action .quick-view a,
  [class*="product-item-v"] .product-icon-action .quick-view button{
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Touch devices: hide Quick View overlay to avoid hover flicker */
@media (hover:none), (pointer:coarse){
  [class*="product-item-v"] .product-icon-action .quick-view{
    display: none !important;
  }
}

/* =========================================================
   2026-01-01: Flash Sale (2nd slider) dots spacing
   Fix: dots were sticking to the content above (no breathing room)
   ========================================================= */

.section-flash-sale .slick_product_5{
  padding-bottom: 44px !important; /* creates space for the absolute-positioned dots */
}
.section-flash-sale .slick_product_5 .slick-dots,
.section-flash-sale .slick-dots{
  bottom: 8px !important;
}

/* =========================================================
   2026-01-01: Mini cart — show RX / lens details like the full cart
   - Use the same line-item properties output (bulleted list)
   - Keep it readable in the narrow drawer
   ========================================================= */

.minicart-properties{
  margin: 6px 0 0;
  padding-left: 18px;
}
.minicart-properties li{
  font-size: 12px;
  line-height: 1.35;
  margin: 2px 0;
  color: #666;
}
.minicart-properties .product-details__item-label{
  font-weight: 600;
}


/* =========================================================
   Eyeshells: Mobile swipe second image (Zenni-like)
   Applies site-wide on product cards that have a 2nd image (items get .es-swipe-enabled)
   ========================================================= */
.es-card-media-mobile{ display:none !important; }

@media screen and (max-width: 989px){
  .es-swipe-enabled .es-card-media-desktop{ display:none !important; }
  .es-swipe-enabled .es-card-media-mobile{ display:block !important; }

  .es-swipe-enabled .es-card-media-swipe{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .es-swipe-enabled .es-card-media-swipe::-webkit-scrollbar{ display:none; }

  .es-swipe-enabled .es-swipe-slide{
    flex:0 0 100%;
    scroll-snap-align:start;
  }

  .es-swipe-enabled .es-swipe-slide img{
    width:100%;
    display:block;
  }

  .es-swipe-enabled .es-card-media-mobile{ position: relative; }

  .es-swipe-enabled .es-swipe-indicator{
    position:absolute;
    left:50%;
    bottom:8px;
    transform:translateX(-50%);
    width:44px;
    height:4px;
    pointer-events:none;
    /* Keep the swipe progress indicator under the sticky mobile header */
    z-index:1;
    --es-progress: 0;
  }
  .es-swipe-enabled .es-swipe-indicator.is-hidden{
    display:none !important;
  }
  .es-swipe-enabled .es-swipe-track{
    position:absolute;
    inset:0;
    border-radius:0;
    background: rgba(255,255,255,0.55);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
  }
  .es-swipe-enabled .es-swipe-thumb{
    position:absolute;
    top:0;
    left:0;
    height:4px;
    width:50%;
    border-radius:0;
    background: rgba(0,0,0,0.65);
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    transform: translateX(calc(var(--es-progress, 0) * 100%));
    transition: transform 120ms linear;
  }

}

/* =========================================================
   Eyeshells: Collection swatches (Desktop = same as Mobile)
   - No borders
   - Unselected: grey thin underline (straight)
   - Selected: black thick underline
   - Show as a horizontal strip (scrollable if needed)
   - More colors: circle "+" button
   ========================================================= */

.product-item-v1 .image-thumbnail{
  margin-top: 6px;
  gap: 8px;
}

.product-item-v1 .image-thumbnail .variant-image-group{
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.product-item-v1 .image-thumbnail .variant-image-group::-webkit-scrollbar{ display:none; }

.product-item-v1 .image-thumbnail .variant-image-group .border_thumbnail{
  display: inline-flex;
  flex: 0 0 auto;
}

.product-item-v1 .image-thumbnail .variant-image-group span.border{
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb{
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 0 !important;
  box-shadow: none;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Underline indicator (straight, square ends) */
.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0,0,0,0.28);
  border-radius: 0;
  pointer-events: none;
}
.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb.active::after{
  height: 2px;
  background: #111;
}

/* Ensure "+"" lives neatly next to the strip */
.product-item-v1 .image-thumbnail .more_variant{
  margin-left: 0;
  flex: 0 0 auto;
}

.product-item-v1 .image-thumbnail .more_variant a,
.product-item-v1 .image-thumbnail .es-more-swatch{
  text-decoration: none;
}

.product-item-v1 .image-thumbnail .es-more-swatch{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.22);
  background: transparent;
  color: #111;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}


/* === FIX17: reliable underline for collection swatches (desktop+mobile) === */
/* Some browsers may not render ::after lines consistently on small thumbs; use border-bottom instead */
.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb::after{ display:none !important; }
.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb{
  border-bottom: 1px solid rgba(0,0,0,0.28) !important;
}
.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb.active{
  border-bottom: 2px solid #111 !important;
}


/* === FIX18: Collection swatch underline (reliable on desktop) ===
   Draw underline on the wrapper span (.border_thumbnail) instead of the <a> thumb.
   This avoids cases where borders on the thumb are reset/overridden by legacy styles.
*/
.product-item-v1 .image-thumbnail .variant-image-group span.border_thumbnail{
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.28) !important;
  padding: 0 0 4px 0 !important;
  margin: 0 6px 0 0 !important;
  border-radius: 0 !important;
  line-height: 0 !important;
}
.product-item-v1 .image-thumbnail .variant-image-group span.border_thumbnail.is-active{
  border-bottom: 2px solid #111 !important;
}
.product-item-v1 .image-thumbnail .variant-image-group span.border_thumbnail:last-child{
  margin-right: 0 !important;
}

/* Ensure the thumb itself has no border so the look matches mobile */
.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb{
  border: 0 !important;
  box-shadow: none !important;
}



/* ===========================
   FIX19: Desktop collection swatch underline (match mobile)
   - Ensure underline visible on desktop by applying the same swatch sizing/layout outside media queries.
   - Grey thin underline for all swatches; active = black thicker underline.
   =========================== */
.product-item-v1 .image-thumbnail .variant-image-group{
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-item-v1 .image-thumbnail .variant-image-group::-webkit-scrollbar{ display:none; }

.product-item-v1 .image-thumbnail .variant-image-group .border_thumbnail{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb{
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
  background-position: center !important;
  position: relative !important;
}

/* Straight underline */
.product-item-v1 .image-thumbnail .variant-image-group .circle-thumb::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: rgba(0,0,0,0.28) !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}
.product-item-v1 .image-thumbnail .variant-image-group a.active.circle-thumb::after,
.product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb.active::after{
  height: 2px !important;
  background: #111 !important;
}

/* “More colors” circle + */
.product-item-v1 .image-thumbnail .more_variant{
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}
.product-item-v1 .image-thumbnail .es-more-swatch{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  background: transparent !important;
  color: #111 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.product-item-v1 .image-thumbnail .es-more-swatch::before{
  content: "+" !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
/* Remove any accidental text inside */
.product-item-v1 .image-thumbnail .es-more-swatch *{ display:none !important; }

/* === FIX20: Desktop collection swatches - single underline, no duplicate plus, larger thumbs === */
/* Apply to collection/list product cards (product-item-v1) */
@media (min-width: 768px){
  .product-item-v1 .image-thumbnail .variant-image-group{
    gap: 6px !important;
  }
  .product-item-v1 .image-thumbnail .variant-image-group .border_thumbnail{
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    padding: 0 0 8px 0 !important; /* space for underline */
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Ensure NO legacy underline/border shows on the <a> itself */
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
    background-position: center !important;
    border-bottom: 0 !important;
  }
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb.active{
    border-bottom: 0 !important;
  }
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb::before,
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb::after{
    content: none !important;
    display: none !important;
  }

  /* Single underline on wrapper span */
  .product-item-v1 .image-thumbnail .variant-image-group .border_thumbnail::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 2px !important;
    height: 1px !important;
    background: rgba(0,0,0,0.28) !important;
    pointer-events: none !important;
  }
  .product-item-v1 .image-thumbnail .variant-image-group .border_thumbnail.is-active::after{
    height: 2px !important;
    background: #111 !important;
  }

  /* More colors: keep only ONE plus (remove pseudo plus if present) */
  .product-item-v1 .image-thumbnail .es-more-swatch::before{
    content: none !important;
    display: none !important;
  }
  .product-item-v1 .image-thumbnail .es-more-swatch{
    font-size: 16px !important;
    line-height: 1 !important;
  }
}


/* === FIX21: Desktop collection swatches (40x40) + single underline + single plus === */
@media (min-width: 768px){
  /* Swatch row spacing */
  .product-item-v1 .image-thumbnail .variant-image-group{
    gap: 8px !important;
  }

  /* Disable span-based underline from previous fixes (avoid double lines) */
  .product-item-v1 .image-thumbnail .variant-image-group span.border_thumbnail::after,
  .product-item-v1 .image-thumbnail .variant-image-group span.border_thumbnail.is-active::after{
    content: none !important;
    display: none !important;
  }

  /* Swatch thumbnails */
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;

    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;

    background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
    background-position: center !important;

    /* Unselected: grey thin underline (inset so it can't be clipped) */
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.28) !important;
  }

  /* Selected: black thick underline */
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb.active{
    box-shadow: inset 0 -3px 0 #111 !important;
  }

  /* Kill any legacy pseudo underlines on anchors */
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb::before,
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb::after{
    content: none !important;
    display: none !important;
  }

  /* "+ more" circle: ensure only ONE plus (no pseudo) */
  .product-item-v1 .image-thumbnail .es-more-swatch{
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,0.35) !important;
    background: transparent !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #111 !important;
    text-decoration: none !important;
  }
  .product-item-v1 .image-thumbnail .es-more-swatch::before,
  .product-item-v1 .image-thumbnail .es-more-swatch::after{
    content: none !important;
    display: none !important;
  }
}

/* === FIX22: PDP desktop swatches (match Zenni thumbnail width=72) === */
@media (min-width: 990px){
  .maxus-productdetail__options .swatch .es-swatch-strip{
    gap: 14px !important;
  }

  .maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }

  /* Color name under image (balanced spacing like Zenni) */
  .maxus-productdetail__options .swatch .es-swatch-strip .text_color{
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}


/* =============================
   FIX23 — Collection swatch underline (single) + mobile '+' single
   Goal:
   - Unselected: thin gray straight line
   - Selected: thick black straight line
   - Remove any duplicated underline rules left from previous FIXes
   - '+ more colors' circle shows ONLY one '+' on mobile (no '++')
   ============================= */

/* Collection (mobile + desktop): nuke all previous underline implementations */
.product-item-v1 .image-thumbnail .variant-image-group span.border_thumbnail::before,
.product-item-v1 .image-thumbnail .variant-image-group span.border_thumbnail::after,
.product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb::before,
.product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb::after {
  content: none !important;
  display: none !important;
}

.product-item-v1 .image-thumbnail .variant-image-group span.border_thumbnail {
  border: 0 !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
}

/* Single underline lives on the swatch thumbnail via inset shadow */
.product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

.product-item-v1 .image-thumbnail .variant-image-group span.border_thumbnail.is-active a.circle-thumb,
.product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb.active {
  box-shadow: inset 0 -3px 0 #111 !important;
}

/* Collection: keep the requested sizes */
@media (max-width: 767px) {
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb { width: 24px !important; height: 24px !important; min-width: 24px !important; }
  .product-item-v1 .image-thumbnail .variant-image-group { height: 34px !important; }
}

@media (min-width: 768px) {
  .product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb { width: 40px !important; height: 40px !important; min-width: 40px !important; }
  .product-item-v1 .image-thumbnail .variant-image-group { height: 48px !important; }
}

/* Collection: '+ more colors' — mobile must be a SINGLE '+' (avoid '++' from text + ::before) */
@media (max-width: 767px) {
  .product-item-v1 .image-thumbnail .variant-image-group a.es-more-swatch {
    font-size: 0 !important; /* hides any text node '+' */
    line-height: 1 !important;
  }
  .product-item-v1 .image-thumbnail .variant-image-group a.es-more-swatch::before {
    content: "+" !important;
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  .product-item-v1 .image-thumbnail .variant-image-group a.es-more-swatch::after {
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   FIX25 — PDP swatch: Zenni-size + no cropping + overline not covering image
   ========================================================= */


/* Desktop (Zenni-like sizing/spacing) */
@media (min-width: 990px){
  .maxus-productdetail__options .swatch .es-swatch-strip{
    gap: 16px !important;
    padding-top: 8px !important; /* room for overline */
  }

  .maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;

    /* Keep the overline ABOVE the image (no blocking) */
    padding-top: 8px !important;
    box-sizing: border-box !important;

    /* Show full thumbnail (no crop) */
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-clip: content-box !important;
    background-origin: content-box !important;
  }
}

/* Mobile: still clear, not too small */
@media (max-width: 989px){
  .maxus-productdetail__options .swatch .es-swatch-strip{
    gap: 12px !important;
    padding-top: 8px !important;
  }

  .maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;

    padding-top: 8px !important;
    box-sizing: border-box !important;

    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-clip: content-box !important;
    background-origin: content-box !important;
  }
}

/* =========================================================
   FIX26 (2026-01-03): PDP swatch overline without covering image
   - Move indicator line to wrapper (radio_style2 border-top)
   - Ensure swatch thumbnails are not cropped (background-size: contain)
   - Increase desktop PDP swatch size to Zenni-like
   ========================================================= */

/* PDP: swatch strip spacing */
.maxus-productdetail__options .swatch .es-swatch-strip{
  padding-top: 0 !important; /* don't reserve space for a pseudo overline */
}

/* PDP: remove any old pseudo overline that sits ON TOP of the image */
/* PDP: make thumbnails show FULL image (no crop) */
.maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 989px){
  .maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }
}

/* PDP: indicator line ABOVE the swatch image (not covering it) */
.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2{
  border-top: 1px solid rgba(0,0,0,0.28);
  padding-top: 10px; /* space between line and image */
}
.maxus-productdetail__options .swatch .es-swatch-strip > div[data-value] input[type="radio"]:checked ~ .radio_style2{
  border-top: 3px solid #111;
  padding-top: 8px; /* keep visual height similar */
}

/* PDP: ensure wrapper doesn't clip */
.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2,
.maxus-productdetail__options .swatch .es-swatch-strip > div[data-value]{
  overflow: visible !important;
}



/* === FIX27: more-colors circle shows a SINGLE "+" (no duplicate) === */
.es-more-swatch::before,
.es-more-swatch::after{
  content: none !important;
  display: none !important;
}
.es-more-swatch{
  font-size: 16px !important;
  line-height: 1 !important;
}
/* ================================================================ */

/* ============================================================================
   FIX30 (2026-01-03): PDP swatch — 防止第一个颜色缩略图被“线/容器”遮挡或裁切
   说明：custom.css 里历史 swatch 样式较多，这里用更高优先级 + !important 统一收口。
   目标：
   - 未选中：灰色细线（直线、方头）
   - 选中：黑色加粗线
   - 线在缩略图上方的留白区域，不压到图片
   ============================================================================ */

/* 1) 让 swatch 容器不要固定高度/不要裁切 */
.maxus-productdetail__options .swatch .es-swatch-strip{
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: auto !important;
  align-items: flex-start !important;
}

/* 2) 每个 swatch 项：上方预留空间放“线”，避免压到图片 */
.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  /* 预留给上方线的空间 */
  padding-top: 12px !important;
  box-sizing: border-box !important;

  /* 不用 border-top（border 会参与 background-clip 等奇怪的覆盖），统一用 ::before */
  border: 0 !important;
  overflow: visible !important;
}

/* 3) 默认灰色细线 */
.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: rgba(0,0,0,0.35) !important;
  border-radius: 0 !important; /* 方头 */
  pointer-events: none !important;
}

/* 4) 选中：黑色加粗线（不影响图片显示） */
.maxus-productdetail__options .swatch .es-swatch-strip > div[data-value] input[type="radio"]:checked ~ .radio_style2::before{
  height: 4px !important;
  background: #111 !important;
}

/* 5) 缩略图本体：确保完整显示，不裁切 */
.maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* 6) 防止旧版本残留的 border-top 继续叠加（彻底清零） */
.maxus-productdetail__options .swatch .es-swatch-strip > div[data-value] input[type="radio"]:checked ~ .radio_style2{
  border-top: 0 !important;
}

/* ============================================================================
   FIX30 (2026-01-03): PDP swatch — 防止第一个颜色缩略图被“线/容器”遮挡或裁切
   说明：custom.css 里 swatch 样式迭代较多，这里用更高优先级 + !important 统一收口。
   目标：
   - 未选中：灰色细线（直线、方头）
   - 选中：黑色加粗线
   - 线位于缩略图上方的留白区域，不压到图片
   ============================================================================ */

/* 1) PDP swatch 容器：不固定高度、不裁切 */
.maxus-productdetail__options .swatch .es-swatch-strip{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* 2) 单个 swatch item：给“上方线条”留空间 */
.maxus-productdetail__options .swatch .es-swatch-strip > div[data-value]{
  height: auto !important;
}
.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 10px !important; /* 线条留白 */
  margin: 0 12px 0 0 !important;
  border: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
}

/* 3) 上划线：默认灰色细线；选中黑色加粗 */
.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: #bdbdbd !important;
  border-radius: 0 !important; /* 方头 */
  pointer-events: none !important;
}
/* 清理历史样式可能产生的第二条线 */
.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2::after{
  content: none !important;
  display: none !important;
}
.maxus-productdetail__options .swatch .es-swatch-strip > div[data-value] input[type="radio"]:checked ~ .radio_style2::before{
  height: 4px !important;
  background: #000 !important;
}

/* 4) 缩略图（图片本体） */
.maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
  display: block !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  overflow: visible !important;
}

/* 桌面端：参考 Zenni 的尺寸（更大更清晰） */
@media (min-width: 990px){
  .maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
    width: 72px !important;
    height: 72px !important;
  }
  .maxus-productdetail__options .swatch .es-swatch-strip .radio_style2{
    margin-right: 14px !important;
  }
}

/* 移动端：保留较清晰的显示（不强行缩小） */
@media (max-width: 989px){
  .maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
    width: 56px !important;
    height: 56px !important;
  }
}

/* 5) 颜色文字在图片下方（已有，但这里防止被其它样式挤压） */
.maxus-productdetail__options .swatch .es-swatch-strip .text_color{
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}


/* === FIX31: PDP swatch overline should NOT cover the first swatch + full color name === */
.maxus-productdetail__options .swatch .es-swatch-strip{
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-left: 2px !important; /* prevent first item from touching edge */
}

.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2{
  padding-top: 10px !important;  /* reserve space for the overline */
  width: 96px !important;        /* enough room for color name */
}

.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2::before{
  top: 0 !important;
  z-index: 1 !important;
}

.maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
  width: 72px !important;
  height: 72px !important;
  margin-top: 0 !important;
}

.maxus-productdetail__options .swatch .es-swatch-strip .text_color{
  width: 96px !important;
  max-width: 96px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.15 !important;
}

/* === FIX31: ensure "+ circle" shows a SINGLE plus (no duplicated +) === */
.product-item-v1 .image-thumbnail .es-more-swatch{
  font-size: 0 !important; /* hide any text node like "+" or "+N" */
}

.product-item-v1 .image-thumbnail .es-more-swatch::before{
  font-size: 16px !important;
}

/* === FIX34: PDP swatch label not cut off (Zenni-like width + wrap) === */
.product-detail .swatch_radio2{
  padding-left: 10px !important; /* avoid first item clipping */
  padding-right: 6px !important;
  overflow: visible !important;
}
.product-detail .swatch_radio2 > div,
.product-detail .swatch_radio2 .radio_style2{
  overflow: visible !important;
}
.product-detail .swatch_radio2 .text_color{
  display: block !important;
  width: 100% !important;
  max-width: 72px !important; /* keep Zenni-like width */
  min-height: 26px !important; /* allow 2 lines without overlap */
  margin-top: 6px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;

  text-align: center !important;
  font-size: 11px !important;
  line-height: 1.15 !important;

  white-space: normal !important;  /* wrap long names */
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  hyphens: auto;
}
.product-detail .swatch_radio2 > div:first-child{
  padding-left: 2px !important;
}

/* === FIX35: PDP swatch (desktop) wrap like Zenni + tighten vertical spacing === */
@media (min-width: 992px){
  /* PDP swatch strip wrapper (Maxus) */
  .maxus-productdetail__options .swatch .es-swatch-strip{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 14px 14px !important; /* column row */
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Each swatch item: slightly wider so long labels don't feel cramped */
  .maxus-productdetail__options .swatch .es-swatch-strip .radio_style2{
    width: 88px !important;
    padding-top: 6px !important; /* reduce gap between line and image */
    overflow: visible !important;
  }
  .maxus-productdetail__options .swatch .es-swatch-strip .color_style2{
    width: 88px !important;
    margin-top: 0 !important;
  }
  .maxus-productdetail__options .swatch .es-swatch-strip .text_color{
    width: 88px !important;
    max-width: 88px !important;
    margin-top: 3px !important; /* reduce gap image->label */
  }

  /* PDP swatch strip wrapper (older markup) */
  .product-detail .swatch_radio2{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 14px 14px !important;
    overflow: visible !important;
  }
  .product-detail .swatch_radio2 .radio_style2{
    width: 88px !important;
    padding-top: 6px !important;
    overflow: visible !important;
  }
  .product-detail .swatch_radio2 .color_style2{
    width: 88px !important;
    margin-top: 0 !important;
  }
  .product-detail .swatch_radio2 .text_color{
    width: 88px !important;
    max-width: 88px !important;
    margin-top: 3px !important;
  }
}

/* Tighten overall block spacing slightly (all devices) */
.maxus-productdetail__options .swatch,
.product-detail .swatch{
  margin-top: 6px !important;
}

/* FIX36: Collection cards “+” indicator always visible (avoid being removed by conflicting ::before rules) */
.product-item-v1 .es-more-swatch,
.product-card .es-more-swatch,
.grid-item .es-more-swatch{
  /* Collection "+ in circle": show a SINGLE plus (use the actual text content) */
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.product-item-v1 .es-more-swatch::before,
.product-card .es-more-swatch::before,
.grid-item .es-more-swatch::before{
  content: none !important;
}

/* FIX38: Collection "+" must be visible.
   Some earlier mobile rules set font-size:0 to hide text and relied on ::before.
   Now we render a single "+" using the actual text node (no pseudo content). */
@media (max-width: 767px){
  .variant-image-group a.es-more-swatch,
  .product-item-v1 .image-thumbnail .es-more-swatch{
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #111 !important;
  }
}

.variant-image-group a.es-more-swatch::before,
.variant-image-group a.es-more-swatch::after,
.product-item-v1 .image-thumbnail .es-more-swatch::before,
.product-item-v1 .image-thumbnail .es-more-swatch::after,
.product-item-v1 .es-more-swatch::before,
.product-item-v1 .es-more-swatch::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   FIX39 (2026-01-03): Desktop "+ in circle" consistency
   Problem:
   - Desktop collection: circle shows but "+" missing (font-size:0 rule)
   - Desktop homepage: "+" shows but circle missing (different wrapper/CSS)
   Fix:
   - On desktop, force the real text "+" to be visible AND always show the circle
   - Apply to both collection product cards and homepage product cards
   ========================================================= */

@media (min-width: 768px){
  /* Make homepage product swatches match collection swatches (square + underline) */
  .product-item-v1 .image-thumbnail .variant-image-group .circle-thumb{
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* 1) Always show ONE real '+' (do NOT rely on ::before) */
  .product-item-v1 .image-thumbnail .es-more-swatch,
  .product-item-v1 .more_variant .es-more-swatch,
  .product-card .es-more-swatch,
  .grid-item .es-more-swatch{
    font-size: 16px !important; /* override older font-size:0 rule */
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #111 !important;
  }

  .product-item-v1 .image-thumbnail .es-more-swatch::before,
  .product-item-v1 .image-thumbnail .es-more-swatch::after,
  .product-item-v1 .more_variant .es-more-swatch::before,
  .product-item-v1 .more_variant .es-more-swatch::after,
  .product-card .es-more-swatch::before,
  .product-card .es-more-swatch::after,
  .grid-item .es-more-swatch::before,
  .grid-item .es-more-swatch::after{
    content: none !important;
    display: none !important;
  }

  /* 2) Always show the circle container (match 40x40 desktop swatches) */
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch,
  .product-item-v1 .more_variant a.es-more-swatch,
  .product-card .more_variant a.es-more-swatch,
  .grid-item .more_variant a.es-more-swatch,
  a.es-more-swatch{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,0.22) !important;
    background: transparent !important;
    text-decoration: none !important;
  }
}

/* =========================================================
   Eyeshells: Mobile header icons stay on ONE row
   Issue: search / wishlist / cart drop to a second line on iPhone widths
   Fix: force .menu_moblie to be a non-wrapping flex row and make .menuright a flex icon row
   ========================================================= */
@media screen and (max-width: 1199px){
  .menu_moblie{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .menu_moblie .menuleft{
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .menu_moblie .menuright{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    white-space: nowrap;
    /* Tight, consistent spacing between icons */
    gap: 4px;
  }
  /* Fallback spacing ONLY if a browser doesn't support flex-gap */
  @supports not (gap: 4px){
    .menu_moblie .menuright > * + *{ margin-left: 4px; }
  }

  /* Neutralize Bootstrap utility spacing that can force wrapping in tight widths */
  .menu_moblie .menuright .js-search-destop{ padding-right: 0 !important; }
  .menu_moblie .menuright .js-call-wishlist{ margin-right: 0 !important; }

  /* Make icon hit areas consistent */
  .menu_moblie .menuright > span,
  .menu_moblie .menuright > a{
    display: inline-flex;
    align-items: center;
  }
}


/* =========================================================
   ES FIX: Quickview variant pills (legacy .swatch) should WRAP
   - Quickview uses .swatch { display:flex } without flex-wrap, so items get clipped
   - Restrict to quickview modal only; do not affect PDP
   ========================================================= */
#quick-view.swym-ready .swatch,
#quick-view .swatch,
.br-product-popup .swatch{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  overflow: visible !important;
  row-gap: 10px;
}

#quick-view .swatch .header,
.br-product-popup .swatch .header{
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  float: none !important;
  min-width: 0 !important;
}

/* Quickview: hide the "Color" label for a cleaner look (PDP stays unchanged) */
#quick-view .maxus-productdetail__options .title_variant{
  display: none !important;
}

#quick-view .swatch .swatch-element,
.br-product-popup .swatch .swatch-element{
  float: none !important; /* float is ignored in flex context; keep explicit */
  margin: 0 10px 0 0 !important;
}

#quick-view .swatch-element label,
.br-product-popup .swatch-element label{
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}
/* =========================================================
   ES FIX (v6): Quickview legacy swatches should WRAP everywhere
   Reason: theme SCSS sets .product-quickview ... .swatch { flex-wrap: nowrap; }
   This override targets the actual quickview container #popup-quickview.
   ========================================================= */
#popup-quickview .product-quickview .popup-quickview .swatch{
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  overflow: visible !important;
  row-gap: 10px;
}
#popup-quickview .product-quickview .popup-quickview .swatch .header{
  float: none !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  min-width: 0 !important;
}
#popup-quickview .product-quickview .popup-quickview .swatch .swatch-element{
  float: none !important;
  margin: 0 10px 10px 0 !important;
}
#popup-quickview .product-quickview .popup-quickview .swatch-element label{
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;
}


/* Quickview: allow variant swatches to wrap */

#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .swatch{
  display: flex !important;
  flex-wrap: wrap !important;
  position: relative;
  padding-left: 70px;
}
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .swatch > .header{
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  margin: 0 !important;
  line-height: 30px;
}

/* ============================
   2026-01 fixes
   ============================ */

/* PDP: keep gallery VIDEO/360 controls under the sticky header (fix overlap while scrolling) */
#header{
  z-index: 80 !important; /* header was z-index:3 in theme; 80 keeps it above gallery controls */
}

@media (max-width: 767px){
  /* Collection toolbar: make Filters + Sort sit on ONE row and reduce vertical whitespace */
  .collection-page-fullwidth .shop_control{
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .collection-page-fullwidth .shop_control > [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important; /* allow flex items to shrink instead of wrapping */
  }

  .collection-page-fullwidth .shop_control > [class*="col-"]:nth-child(1){
    flex: 0 0 44% !important;
    max-width: 44% !important;
  }
  .collection-page-fullwidth .shop_control > [class*="col-"]:nth-child(2){
    flex: 1 1 56% !important;
    max-width: 56% !important;
  }

  /* Tighten the Filters button (less empty space inside border) */
  .collection-page-fullwidth .shop_control .filter_sortby .filter{
    width: 100% !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    border-width: 1px !important;
  }
  .collection-page-fullwidth .shop_control .filter_sortby .filter svg{
    width: 14px !important;
    height: 14px !important;
  }
  .collection-page-fullwidth .shop_control .filter_sortby .filter p{
    font-size: 13px !important;
    letter-spacing: .08em !important;
    text-transform: none !important;
    margin-left: 6px !important;
    line-height: 1 !important;
  }

  /* Sort dropdown: remove min-width so it can fit next to Filters */
  .collection-page-fullwidth .shop_control .collection-sorting,
  .collection-page-fullwidth .shop_control .collection-sorting .dropdown{
    width: 100% !important;
  }
  .collection-page-fullwidth .shop_control .collection-sorting .dropdown-toggle{
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }
}

/* =========================================================
   Mobile collection toolbar - final fixes (v5)
   - Fix sort dropdown being open by default (do NOT force display)
   - Make Filters button shrink-to-content to avoid big empty space inside border
   ========================================================= */
@media (max-width: 767px){
  /* Filters button: shrink to content */
  /* IMPORTANT: only target the mobile filter block (it has Bootstrap class `d-flex`).
     The theme includes a second filter button for XL desktop: `d-none d-xl-block`.
     If we style `.filter_sortby` generically, we override Bootstrap's `d-none` and
     end up showing BOTH buttons on mobile. */
  .collection-page-fullwidth .shop_control .filter_sortby.d-flex{
    display: flex !important;
    align-items: center !important;
  }
  .collection-page-fullwidth .shop_control .filter_sortby.d-flex .filter{
    width: auto !important;
    justify-content: center !important;
    padding: 0 12px !important;
  }

  /* Sort dropdown: keep closed/open behavior from bootstrap; only control sizing/position */
  .collection-page-fullwidth .shop_control .collection-sorting .dropdown-menu.dropdown-content{
    left: auto !important;
    right: 0 !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 90vw !important;
  }
  .collection-page-fullwidth .shop_control .collection-sorting .dropdown-menu.dropdown-content li a{
    padding: 10px 12px !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   Mobile collection toolbar: tighten Filters button width
   - Make Filters button shrink-to-content to avoid big empty space inside border
   - Keep Sort dropdown behavior intact (no forced display)
   ========================================================= */
@media (max-width: 767px){
  .collection-page-fullwidth .shop_control .filter_sortby.d-flex{
    display: flex !important;
    align-items: center !important;
  }
  .collection-page-fullwidth .shop_control .filter_sortby.d-flex .filter{
    width: max-content !important; /* shrink to content */
    justify-content: center !important;
    padding: 0 12px !important;
  }
}

/* =========================================================
   ES FIX (v9): Quickview swatches - hide Color heading + tighten spacing
   - Remove the option label (Color) for a cleaner look
   - Make the swatch grid more compact inside quickview only
   ========================================================= */
#quick-view .maxus-productdetail__options .title_variant,
.br-product-popup .maxus-productdetail__options .title_variant{
  display: none !important;
}

#quick-view .maxus-productdetail__options{
  margin-top: 10px !important;
}

#quick-view .maxus-productdetail__options .es-swatch-strip,
.br-product-popup .maxus-productdetail__options .es-swatch-strip{
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  justify-content: flex-start !important; /* align-left (match the icon list above) */
  align-content: flex-start !important;
  gap: 8px !important;
  row-gap: 4px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#quick-view .maxus-productdetail__options .swatch,
.br-product-popup .maxus-productdetail__options .swatch{
  text-align: left !important;
}

#quick-view .maxus-productdetail__options .es-swatch-strip > div[data-value],
.br-product-popup .maxus-productdetail__options .es-swatch-strip > div[data-value]{
  margin-bottom: 0 !important;
}

#quick-view .maxus-productdetail__options .maxus-color .radio_style2,
.br-product-popup .maxus-productdetail__options .maxus-color .radio_style2{
  width: 64px !important;
  padding-top: 2px !important;
}

#quick-view .maxus-productdetail__options .maxus-color .radio_style2 .color_style2,
.br-product-popup .maxus-productdetail__options .maxus-color .radio_style2 .color_style2{
  width: 64px !important;
  height: 64px !important;
}

#quick-view .maxus-productdetail__options .maxus-color .radio_style2 .text_color,
.br-product-popup .maxus-productdetail__options .maxus-color .radio_style2 .text_color{
  width: 64px !important;
  max-width: 64px !important;
  min-height: 0 !important;
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}


/* =========================================================
   Eyeshells: Quickview (PDP-style swatch) spacing + alignment
   - Remove legacy quickview swatch left-reserved space
   - Hide "Color" label in quickview
   - Tighten vertical gaps between swatches
   ========================================================= */

/* Legacy quickview swatch CSS reserves space for a left header (padding-left:70px)
   and forces .swatch to flex. That breaks our PDP-style swatch layout.
   Only reset when the PDP-style wrapper exists. */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .swatch{
  display: block !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Hide any legacy header label slot (if present) */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .swatch > .header{
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
}

/* Hide Color label (title_variant) in quickview and remove its space */
#quick-view .maxus-productdetail__options .title_variant{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Align swatch group to the left edge (match the specs list) */
#quick-view .maxus-productdetail__options .es-swatch-strip{
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  row-gap: 10px !important;
}

/* Remove extra bottom margin on each swatch item (use row-gap instead) */
#quick-view .maxus-productdetail__options .maxus-color{
  margin-bottom: 0 !important;
}

/* Make swatches slightly more compact in quickview (keeps many colors readable) */
#quick-view .maxus-productdetail__options .maxus-color .radio_style2{
  width: 64px !important;
  padding-top: 3px !important;
}
#quick-view .maxus-productdetail__options .maxus-color .radio_style2 .color_style2{
  width: 64px !important;
  height: 64px !important;
}
#quick-view .maxus-productdetail__options .maxus-color .radio_style2 .text_color{
  width: 64px !important;
  max-width: 64px !important;
  min-height: 22px !important;
  margin-top: 3px !important;
  font-size: 11px !important;
}

/* =========================================================
   Eyeshells: Quickview (PDP-style swatch) spacing + alignment
   ========================================================= */

/* Legacy quickview swatch CSS reserves space for a left header (padding-left:70px)
   and forces .swatch to flex. When we reuse PDP-style swatches in quickview,
   that pushes the whole swatch block to the right and creates big vertical gaps.
   The overrides below apply ONLY to quickview and ONLY when the PDP-style wrapper
   .maxus-productdetail__options is present. */

#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .swatch{
  display: block !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

/* If the theme outputs a legacy header element, neutralize it */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .swatch > .header{
  position: static !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none !important;
}

/* Hide "Color" label (Liquid: p.title_variant) in quickview */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .title_variant{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Align swatch strip with the spec list above (remove left padding) */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .es-swatch-strip{
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  row-gap: 10px !important;
}

/* Remove extra bottom margins that stack with row-gap */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .maxus-color{
  margin-bottom: 0 !important;
}

/* Slightly more compact tiles in quickview so more colors fit */
@media screen and (min-width: 768px){
  #quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .maxus-color .radio_style2{
    width: 64px !important;
    padding-top: 3px !important;
  }
  #quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .maxus-color .radio_style2 .color_style2{
    width: 64px !important;
    height: 64px !important;
  }
  #quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .maxus-color .radio_style2 .text_color{
    width: 64px !important;
    max-width: 64px !important;
    min-height: 22px !important;
    font-size: 11px !important;
    margin-top: 3px !important;
  }
}

/* =========================================================
   Eyeshells: Quickview (PDP-style swatch) spacing + alignment
   ========================================================= */

/* 1) Remove legacy quickview swatch layout (left header reserve) */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .swatch{
  display: block !important;
  padding-left: 0 !important;
}
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .swatch > .header{
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: none !important;
}

/* 2) Hide "Color" label in quickview (do not reserve space) */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .title_variant{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* 3) Align swatches to the left and tighten vertical spacing */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .es-swatch-strip{
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  row-gap: 10px !important;
}
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .maxus-color{
  margin-bottom: 0 !important;
}

/* Optional: slightly smaller swatches in quickview (more compact when many colors) */
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .maxus-color .radio_style2{
  width: 64px !important;
  padding-top: 3px !important;
}
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .maxus-color .radio_style2 .color_style2{
  width: 64px !important;
  height: 64px !important;
}
#quick-view .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .maxus-color .radio_style2 .text_color{
  width: 64px !important;
  max-width: 64px !important;
  min-height: 22px !important;
  margin-top: 3px !important;
  font-size: 11px !important;
}

/* =========================================================
   FIX (v12): Quickview swatch alignment + compact spacing
   - Ensure swatch block starts flush-left (align with spec icons above)
   - Remove bootstrap column paddings inside the swatch strip
   - Reduce vertical gaps between swatch rows
   - Apply to both Quick View containers (#quick-view and .br-product-popup)
   ========================================================= */

/* Hide the "Color" heading completely inside quickview */
#quick-view .maxus-productdetail__options .title_variant,
.br-product-popup .maxus-productdetail__options .title_variant{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Align the whole options block to the same left edge */
#quick-view .maxus-productdetail__options,
#popup-quickview .maxus-productdetail__options,
.br-product-popup .maxus-productdetail__options{
  padding-left: 0 !important;
  /* Shift left so swatches align with the spec-list icon edge (FA glasses icon + gap) */
  margin-left: -24px !important;
  /* Tighten vertical gap between the last spec line and the swatch overline */
  margin-top: -8px !important;

}

@media (max-width: 767px){
  #quick-view .maxus-productdetail__options,
  #popup-quickview .maxus-productdetail__options,
  .br-product-popup .maxus-productdetail__options{
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}

/* Use a compact 2-col grid for quickview swatches */
#quick-view .maxus-productdetail__options .es-swatch-strip,
.br-product-popup .maxus-productdetail__options .es-swatch-strip{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
  row-gap: 12px !important;
  justify-content: start !important;
  align-content: start !important;
  overflow: visible !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove bootstrap column spacing inside swatch grid cells */
#quick-view .maxus-productdetail__options .es-swatch-strip > .maxus-color,
.br-product-popup .maxus-productdetail__options .es-swatch-strip > .maxus-color{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
  flex: initial !important;
  display: flex !important;
  justify-content: flex-start !important;
}

/* Slightly reduce the reserved space above thumbnails in quickview */
#quick-view .maxus-productdetail__options .es-swatch-strip .radio_style2,
.br-product-popup .maxus-productdetail__options .es-swatch-strip .radio_style2{
  padding-top: 8px !important; /* was 12px globally */
}

/* Keep quickview tiles compact */
#quick-view .maxus-productdetail__options .es-swatch-strip .radio_style2,
.br-product-popup .maxus-productdetail__options .es-swatch-strip .radio_style2{
  width: 64px !important;
  max-width: 64px !important;
}

#quick-view .maxus-productdetail__options .es-swatch-strip .color_style2,
.br-product-popup .maxus-productdetail__options .es-swatch-strip .color_style2{
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
}

#quick-view .maxus-productdetail__options .es-swatch-strip .text_color,
.br-product-popup .maxus-productdetail__options .es-swatch-strip .text_color{
  margin-top: 2px !important;
  line-height: 1.15 !important;
}

/* =========================================================
   FIX (v13): Quickview swatch tighter vertical rhythm
   - Reduce row gap between swatch rows
   - Reduce label reserved height
   - Tighten overline-to-image spacing
   - Quickview only (#quick-view and .br-product-popup)
   ========================================================= */

#quick-view .maxus-productdetail__options .es-swatch-strip,
.br-product-popup .maxus-productdetail__options .es-swatch-strip{
  column-gap: 16px !important;
  row-gap: 8px !important;
}

#quick-view .maxus-productdetail__options .es-swatch-strip .radio_style2,
.br-product-popup .maxus-productdetail__options .es-swatch-strip .radio_style2{
  padding-top: 3px !important;
}

#quick-view .maxus-productdetail__options .es-swatch-strip .text_color,
.br-product-popup .maxus-productdetail__options .es-swatch-strip .text_color{
  margin-top: 2px !important;
  min-height: 16px !important;
  padding: 0 2px !important;
}

/* =========================================================
   FIX (v14): Quickview swatch block LEFT alignment
   Issue: quickview .swatch was forced to display:flex (legacy rule)
          which can shrink/center the new .es-swatch-strip block.
   Fix: force the COLOR swatch container (.swatch_radio1) back to block
        and stretch the swatch strip to full width so it aligns with
        the spec icons/text above.
   Applies to: #quick-view, #popup-quickview, and .br-product-popup
   ========================================================= */

#quick-view .maxus-productdetail__options .swatch.swatch_radio1,
#popup-quickview .maxus-productdetail__options .swatch.swatch_radio1,
.br-product-popup .maxus-productdetail__options .swatch.swatch_radio1{
  display: block !important;
  width: 100% !important;
}

#quick-view .maxus-productdetail__options,
#popup-quickview .maxus-productdetail__options,
.br-product-popup .maxus-productdetail__options{
  text-align: left !important;
}

#quick-view .maxus-productdetail__options .swatch.swatch_radio1 .es-swatch-strip,
#popup-quickview .maxus-productdetail__options .swatch.swatch_radio1 .es-swatch-strip,
.br-product-popup .maxus-productdetail__options .swatch.swatch_radio1 .es-swatch-strip{
  width: 100% !important;
  justify-content: flex-start !important; /* if any rule flips it back to flex */
  justify-items: start !important;        /* grid */
  margin-left: 0 !important;
}

#quick-view .maxus-productdetail__options .swatch.swatch_radio1 .es-swatch-strip > .maxus-color,
#popup-quickview .maxus-productdetail__options .swatch.swatch_radio1 .es-swatch-strip > .maxus-color,
.br-product-popup .maxus-productdetail__options .swatch.swatch_radio1 .es-swatch-strip > .maxus-color{
  justify-content: flex-start !important;
}

/* Optional: make each quickview tile's content left-aligned (thumbnail + text)
   so the first column reads flush-left like the specs above. */
#quick-view .maxus-productdetail__options .swatch.swatch_radio1 .radio_style2,
#popup-quickview .maxus-productdetail__options .swatch.swatch_radio1 .radio_style2,
.br-product-popup .maxus-productdetail__options .swatch.swatch_radio1 .radio_style2{
  align-items: flex-start !important;
}

#quick-view .maxus-productdetail__options .swatch.swatch_radio1 .text_color,
#popup-quickview .maxus-productdetail__options .swatch.swatch_radio1 .text_color,
.br-product-popup .maxus-productdetail__options .swatch.swatch_radio1 .text_color{
  text-align: left !important;
}

/* FIX (v15): ensure swatch strip sits tight under specs */
#quick-view .maxus-productdetail__options .es-swatch-strip,
#popup-quickview .maxus-productdetail__options .es-swatch-strip,
.br-product-popup .maxus-productdetail__options .es-swatch-strip{
  margin-top: 0 !important;
}

/* =========================================================
   Quickview (desktop) — swatch alignment + compact spacing
   Fixes:
   1) Swatch block left edge aligns with the spec list icons
   2) Reduce vertical gaps between swatch rows
   3) Hide the original option label ("Color") and its spacing
   4) Tighten the price divider spacing
   ========================================================= */

/* Hide default option label/select (we use the Zenni-style swatches) */
.br-product-popup .product-popup-content .selector-wrapper > label,
#quick-view .product-quickview .selector-wrapper > label {
  display: none !important;
}
.br-product-popup .product-popup-content .selector-wrapper select.single-option-selector,
#quick-view .product-quickview .selector-wrapper select.single-option-selector {
  display: none !important;
}
.br-product-popup .product-popup-content .selector-wrapper,
#quick-view .product-quickview .selector-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Align swatches to the left (same start as spec list) */
.br-product-popup .product-popup-content .maxus-productdetail__options,
#quick-view .product-quickview .maxus-productdetail__options {
  margin-left: 0 !important;
}
.br-product-popup .product-popup-content .maxus-productdetail__options .swatch,
#quick-view .product-quickview .maxus-productdetail__options .swatch {
  padding-left: 0 !important;
  margin-top: 8px !important;
}

/* The strip had padding-left:10px in es-swatch css; remove it for quickview */
.br-product-popup .product-popup-content .maxus-productdetail__options .es-swatch-strip,
#quick-view .product-quickview .maxus-productdetail__options .es-swatch-strip {
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  row-gap: 10px !important;
}

/* Make each swatch cell compact */
.br-product-popup .product-popup-content .maxus-productdetail__options .maxus-color,
#quick-view .product-quickview .maxus-productdetail__options .maxus-color {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
}
.br-product-popup .product-popup-content .maxus-productdetail__options .radio_style2,
#quick-view .product-quickview .maxus-productdetail__options .radio_style2 {
  padding-top: 3px !important;
  padding-bottom: 4px !important;
  margin-bottom: 0 !important;
}
.br-product-popup .product-popup-content .maxus-productdetail__options .text_color,
#quick-view .product-quickview .maxus-productdetail__options .text_color {
  margin-top: 2px !important;
  min-height: 18px !important;
}

/* Tighten the divider under the price (top of specs block) */
.br-product-popup .product-popup-content .product-stock.product-stock-status,
#quick-view .product-quickview .product-stock.product-stock-status {
  margin-top: 10px !important;
  padding-top: 10px !important;
}


/* =====================================================================
   QUICKVIEW – SWATCH LAYOUT (v17 override)
   Goals:
   1) Align swatch block to the same left edge as the spec icons above.
   2) Reduce vertical spacing between swatch rows.
   3) Show 4 swatches per row on desktop.
   4) Tighten spacing around the divider under the price.
   ===================================================================== */

/* Tighten the price block + any divider/HR right under it */
.product-quickview .popup-quickview .product-info-main .product-item .details .product-price{
  margin-bottom: 8px !important;
}
.product-quickview .popup-quickview hr{
  margin: 8px 0 !important;
}

/* Override the theme's default swatch layout in quickview (it pushes swatches right) */
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .swatch{
  display: block !important;         /* theme sets flex !important */
  padding-left: 0 !important;        /* theme sets 70px */
  margin-left: 0 !important;
  max-width: none !important;
}
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .swatch > .header{
  display: none !important;
}

/* Layout: 4 per row on desktop, 2 per row on mobile */
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .es-swatch-strip{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  row-gap: 16px !important;
  justify-items: start !important;   /* make each tile start from the left */
  align-items: start !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
@media (max-width: 767px){
  .product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .es-swatch-strip{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 14px !important;
  }
}

/* Make each swatch tile compact + left-aligned */
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .es-swatch-strip > .maxus-color{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove extra spacing coming from internal blocks (if any) */
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .radio_style2,
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .color_style2,
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .text_color,
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .line{
  margin: 0 !important;
  padding: 0 !important;
}

/* If you use the small underline (line/line2), keep it tight */
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .line{
  height: 2px !important;
  width: 64px !important;
  margin: 0 0 6px 0 !important;
}

/* Slightly smaller label in quickview so 4-per-row stays clean */
.product-quickview .popup-quickview .product-info-main .product-item .details .maxus-productdetail__options .text_color{
  font-size: 12px !important;
  line-height: 1.2 !important;
  margin-top: 6px !important;
}

/* =====================================================================
   QUICKVIEW – SWATCH LAYOUT (v17 override)
   ===================================================================== */

/* Tighten spacing around the divider under price (often an <hr> from description) */
.product-quickview .popup-quickview hr {
  margin: 10px 0 !important;
}
.product-quickview .popup-quickview .product-price {
  margin-bottom: 10px !important;
}

/* Kill the theme's quickview swatch left padding + forced flex (engo-customize.scss) */
.product-quickview .popup-quickview .product-info-main .product-item .details .swatch {
  display: block !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.product-quickview .popup-quickview .product-info-main .product-item .details .swatch > .header {
  display: none !important;
}

/* Allow the swatch block to use full width (needed for 4 columns) */
#quick-view .maxus-productdetail__options .swatch,
.br-product-popup .product-popup-content .maxus-productdetail__options .swatch {
  max-width: none !important;
  width: 100% !important;
}

/* Desktop: 4 per row */
#quick-view .maxus-productdetail__options .es-swatch-strip,
.br-product-popup .product-popup-content .maxus-productdetail__options .es-swatch-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  row-gap: 18px !important;
  justify-items: start !important;
}

/* Mobile/tablet: keep 2 per row for readability */
@media (max-width: 767px) {
  #quick-view .maxus-productdetail__options .es-swatch-strip,
  .br-product-popup .product-popup-content .maxus-productdetail__options .es-swatch-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 14px !important;
  }
}

/* Left-align each swatch tile (so the first tile aligns with the spec icon edge) */
#quick-view .maxus-productdetail__options .es-swatch-strip > .maxus-color,
.br-product-popup .product-popup-content .maxus-productdetail__options .es-swatch-strip > .maxus-color {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* If your existing PDP swatch styles add centering, neutralize them in quickview */
#quick-view .maxus-productdetail__options .es-swatch-strip .radio_style2,
.br-product-popup .product-popup-content .maxus-productdetail__options .es-swatch-strip .radio_style2 {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

#quick-view .maxus-productdetail__options .es-swatch-strip .color_style2,
.br-product-popup .product-popup-content .maxus-productdetail__options .es-swatch-strip .color_style2 {
  margin: 0 !important;
}

#quick-view .maxus-productdetail__options .es-swatch-strip .text_color,
.br-product-popup .product-popup-content .maxus-productdetail__options .es-swatch-strip .text_color {
  margin-top: 8px !important;
}


/* =========================================================
   FIX: Product-card swatch "+" circle (collection + homepage)
   - Place the "+" circle immediately after the last visible swatch (no big empty gap)
   - Hover (desktop): invert colors (white -> black)
   ========================================================= */

/* Ensure the swatch strip sizes-to-content so the "+" sits right after it */
.product-item-v1 .image-thumbnail{
  gap: 6px !important;
}
.product-item-v1 .image-thumbnail .variant-image-group{
  flex: 0 0 auto !important;
  min-width: auto !important;
  overflow: visible !important;
}
.product-item-v1 .image-thumbnail .more_variant{
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}

/* "+" circle: default = white bg + black plus; hover = inverted */
.product-item-v1 .image-thumbnail .es-more-swatch{
  background: #fff !important;
  border: 1px solid #111 !important;
  color: #111 !important;
  text-decoration: none !important;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

@media (hover:hover) and (pointer:fine){
  .product-item-v1 .image-thumbnail .es-more-swatch:hover{
    background: #111 !important;
    color: #fff !important;
  }
}

.product-item-v1 .image-thumbnail .es-more-swatch:focus,
.product-item-v1 .image-thumbnail .es-more-swatch:focus-visible{
  background: #111 !important;
  color: #fff !important;
}

/* === FIX: "+" circle size + hover invert (circle + plus) === */
.product-item-v1 .image-thumbnail .es-more-swatch{
  /* Include border inside box to prevent Android clipping */
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #111 !important;
  color: #111 !important;
  box-sizing: border-box !important;
}

/* Ensure the plus is centered and scaled for 30x30 */
.product-item-v1 .image-thumbnail .es-more-swatch::before{
  font-size: 14px !important;
  line-height: 1 !important;
}

@media (hover:hover) and (pointer:fine){
  .product-item-v1 .image-thumbnail .es-more-swatch:hover{
    background: #111 !important;
    color: #fff !important;
    border-color: #fff !important; /* invert outer circle too */
  }
}

.product-item-v1 .image-thumbnail .es-more-swatch:focus,
.product-item-v1 .image-thumbnail .es-more-swatch:focus-visible{
  background: #111 !important;
  color: #fff !important;
  border-color: #fff !important;
}


/* === FIX: More colors "+" circle (30x30) + hover invert (circle + plus) === */
/* Applies to product cards on collection + homepage */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch,
.product-item-v1 .image-thumbnail a.es-more-swatch{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #111 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

@media (max-width: 767px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch,
  .product-item-v1 .image-thumbnail a.es-more-swatch{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 14px !important;
  }
}

/* Desktop hover / keyboard focus invert */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch:hover,
.product-item-v1 .image-thumbnail a.es-more-swatch:hover,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch:focus,
.product-item-v1 .image-thumbnail a.es-more-swatch:focus,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch:focus-visible,
.product-item-v1 .image-thumbnail a.es-more-swatch:focus-visible{
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
  outline: none !important;
}

/* If "+" is rendered via ::before on mobile, ensure it follows currentColor */
.product-item-v1 .image-thumbnail a.es-more-swatch::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch::before{
  color: currentColor !important;
}

/* Prevent page-wide horizontal scrollbar (caused by occasional 100vw sections / overlays) */
html, body{ overflow-x: clip; }
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
}


/* === PDP: Related products full-width (match collection-style cards, but edge-to-edge) === */
.related-product.es-related-fullwidth{
  /* NOTE: using 100vw can introduce a persistent horizontal scrollbar on some browsers.
     Keep this section container-width to avoid any overflow issues. */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  overflow-x: clip;
}
/* Keep heading aligned with site container */
.related-product.es-related-fullwidth .es-related-heading{
  padding-left: 15px;
  padding-right: 15px;
}

/* Carousel track/item spacing (avoid relying on Bootstrap grid widths) */
.related-product.es-related-fullwidth .es-related-slider{
  width: 100%;
  margin: 0;
}
.related-product.es-related-fullwidth .es-related-item{
  padding: 0 14px;
  box-sizing: border-box;
}

/* Zenni-like header: title on the left, nav buttons on the right */
.related-product.es-related-fullwidth .es-related-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 8px;
}
.related-product.es-related-fullwidth .es-related-title{
  text-align: left;
  margin: 0;
}
.related-product.es-related-fullwidth .es-related-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}
.related-product.es-related-fullwidth .es-related-arrow{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid #000;
  background: #fff;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.related-product.es-related-fullwidth .es-related-arrow svg{
  width: 16px;
  height: 16px;
  display: block;
}
.related-product.es-related-fullwidth .es-related-arrow svg path{
  stroke: #000;
  transition: stroke .15s ease;
}
/* Next button default filled (like Zenni) */
.related-product.es-related-fullwidth .es-related-next{
  background: #000;
}
.related-product.es-related-fullwidth .es-related-next svg path{
  stroke: #fff;
}
/* Hover invert */
.related-product.es-related-fullwidth .es-related-arrow:hover{
  background: #000;
}
.related-product.es-related-fullwidth .es-related-arrow:hover svg path{
  stroke: #fff;
}
.related-product.es-related-fullwidth .es-related-next:hover{
  background: #fff;
}
.related-product.es-related-fullwidth .es-related-next:hover svg path{
  stroke: #000;
}
/* Disabled state (slick adds .slick-disabled to arrow buttons) */
.related-product.es-related-fullwidth .es-related-arrow.slick-disabled,
.related-product.es-related-fullwidth .es-related-arrow:disabled{
  background: #f3f3f3;
  border-color: #d0d0d0;
  cursor: default;
}
.related-product.es-related-fullwidth .es-related-arrow.slick-disabled svg path,
.related-product.es-related-fullwidth .es-related-arrow:disabled svg path{
  stroke: #a0a0a0;
}
.related-product.es-related-fullwidth .es-related-arrow.slick-disabled:hover,
.related-product.es-related-fullwidth .es-related-arrow:disabled:hover{
  background: #f3f3f3;
}
.related-product.es-related-fullwidth .es-related-arrow.slick-disabled:hover svg path,
.related-product.es-related-fullwidth .es-related-arrow:disabled:hover svg path{
  stroke: #a0a0a0;
}

/* Smaller cards, more density */
.related-product.es-related-fullwidth .js_product_related .slick-slide{ padding: 0 10px; }
.related-product.es-related-fullwidth .js_product_related{ margin: 0 -10px; }
.related-product.es-related-fullwidth .product-item,
.related-product.es-related-fullwidth .product-item-v1{
  border-radius: 12px;
}
.related-product.es-related-fullwidth .product-item .product-image,
.related-product.es-related-fullwidth .product-item-v1 .product-image{
  background: #f7f7f7;
  border-radius: 12px;
  overflow: hidden;
}
.related-product.es-related-fullwidth .product-item .product-image img,
.related-product.es-related-fullwidth .product-item-v1 .product-image img{
  transform: translateZ(0);
}

/* Ensure hover action buttons (Quick View etc.) stay clickable above the image link inside Slick */
.related-product.es-related-fullwidth .product-icon-action{
  z-index: 50;
}
.related-product.es-related-fullwidth .product-icon-action a,
.related-product.es-related-fullwidth .product-icon-action button{
  pointer-events: auto;
}

/* Some theme versions set pointer-events:none on the .quick-view wrapper.
   That can make the quickview icon appear clickable but ignore taps/clicks inside
   a draggable slider. Force it on for the related slider. */
.related-product.es-related-fullwidth .product-icon-action .quick-view{
  pointer-events: auto !important;
}
/* Give the product grid a comfortable full-width gutter */
.related-product.es-related-fullwidth .related-tabs{
  padding-left: 18px;
  padding-right: 18px;
}
@media (max-width: 767px){
  .related-product.es-related-fullwidth .related-tabs{
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* Ensure items start from the left (no centering) */
.related-product.es-related-fullwidth .js_product_related{
  justify-content: flex-start !important;
}


/* === Related products: keep dots away from footer (slick default uses absolute positioning) === */
.related-product.es-related-fullwidth{ padding-bottom: 8px; }
.related-product.es-related-fullwidth .js_product_related.slick-dotted.slick-slider{ margin-bottom: 0 !important; }
.related-product.es-related-fullwidth .js_product_related .slick-dots{
  position: static !important;
  margin: 16px 0 40px !important;
  padding: 0 !important;
}

/* For Zenni-style arrows, we don't need dots */
.related-product.es-related-fullwidth .js_product_related .slick-dots{ display: none !important; }

/* === ES Related: Premium navigation progress (before arrows) === */
.related-product.es-related-fullwidth .es-related-nav{ display:flex; align-items:center; gap:10px; }
.related-product.es-related-fullwidth .es-related-progress{ width: 120px; height: 6px; background: rgba(0,0,0,0.10); border-radius: 999px; overflow: hidden; }
.related-product.es-related-fullwidth .es-related-progress-bar{ display:block; height: 100%; width: 0%; background: #000; border-radius: 999px; transition: width .22s ease; }

/* === ES Related: edge fade mask (desktop) === */
.related-product.es-related-fullwidth .related-tabs{ position: relative; }
.related-product.es-related-fullwidth .related-tabs::before,
.related-product.es-related-fullwidth .related-tabs::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 42px; pointer-events: none; z-index: 3; opacity: 1; transition: opacity .18s ease; }
.related-product.es-related-fullwidth .related-tabs::before{ left: 0; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.related-product.es-related-fullwidth .related-tabs::after{ right: 0; background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.related-product.es-related-fullwidth.es-related-at-start .related-tabs::before{ opacity: 0; }
.related-product.es-related-fullwidth.es-related-at-end .related-tabs::after{ opacity: 0; }
 (max-width: 767px){
  .related-product.es-related-fullwidth .related-tabs::before,
  .related-product.es-related-fullwidth .related-tabs::after{ display:none; }
  .related-product.es-related-fullwidth .es-related-progress{ width: 92px; }
}

/* Grab cursor feels premium on desktop drag */
.related-product.es-related-fullwidth .es-related-slider{ cursor: grab; }
.related-product.es-related-fullwidth .es-related-slider.es-dragging{ cursor: grabbing; }





/* =============================
   Swatch hover preview underline (Zenni-like)
   - Hover shows a temporary "preview" state (NOT a real selection)
   - Gold line grows left ➜ right
   ============================= */
:root{
  --es-swatch-gold: #c7a54a;
}

/* Product cards swatches: use a pseudo underline that we can animate on hover preview */
.product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb,
.product-item-v1 .image-thumbnail .variant-image-group a.circle{
  position: relative;
}

.product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb::after,
.product-item-v1 .image-thumbnail .variant-image-group a.circle::after{
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--es-swatch-gold);
  border-radius: 2px;
  transform: scaleX(.15);
  transform-origin: left center;
  opacity: 0;
  transition: transform .22s ease, opacity .12s ease;
  pointer-events: none;
}

.product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb.is-preview::after,
.product-item-v1 .image-thumbnail .variant-image-group a.circle.is-preview::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Never show the preview underline on the actually-selected swatch (selected uses the normal black underline) */
.product-item-v1 .image-thumbnail .variant-image-group a.circle-thumb.active::after,
.product-item-v1 .image-thumbnail .variant-image-group a.circle.active::after{
  opacity: 0 !important;
  transform: scaleX(.15) !important;
}

/* PDP + Quickview swatches: keep existing grey/black line (::before) and add a gold animated overlay (::after) */
.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2{
  position: relative;
}

.maxus-productdetail__options .swatch .es-swatch-strip .radio_style2::after{
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--es-swatch-gold);
  border-radius: 2px;
  transform: scaleX(.15);
  transform-origin: left center;
  opacity: 0;
  transition: transform .22s ease, opacity .12s ease;
  pointer-events: none;
}

.maxus-productdetail__options .swatch .es-swatch-strip .maxus-color.is-preview .radio_style2::after{
  opacity: 1;
  transform: scaleX(1);
}

.maxus-productdetail__options .swatch .es-swatch-strip .maxus-color input[type="radio"]:checked ~ .radio_style2::after{
  opacity: 0 !important;
  transform: scaleX(.15) !important;
}

/* =========================
   Quickview thumbnail nav (replace dots with subtle hover arrows)
   ========================= */
.quickview-product .more-views{ position: relative; }
.quickview-product .es-qv-thumb-prev,
.quickview-product .es-qv-thumb-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.65);
  color: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, background .18s ease;
  z-index: 5;
}
.quickview-product .es-qv-thumb-prev{ left: -6px; }
.quickview-product .es-qv-thumb-next{ right: -6px; }

.quickview-product .more-views:hover .es-qv-thumb-prev,
.quickview-product .more-views:hover .es-qv-thumb-next{
  opacity: 1;
  pointer-events: auto;
}

.quickview-product .es-qv-thumb-prev:hover,
.quickview-product .es-qv-thumb-next:hover{
  background: rgba(255,255,255,.92);
}

/* === ES PDP/Quickview Specs & Tabs Fix (v10) === */
/* Mobile PDP tabs: Details / Shipping / Reviews -> horizontal (Zenni-like) */
@media (max-width: 767.98px){
  .tab-pd-details .tab_prod{
    display: flex !important;
    justify-content: space-around;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px;
    margin: 0;
  }
  .tab-pd-details .tab_prod > li{
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }
  .tab-pd-details .tab_prod > li > a{
    display: block;
    white-space: nowrap;
  }

  /* Tighten whitespace under tabs */
  .tab-pd-details{
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }
  .tab-pd-details .tab-content{
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 0 !important;
  }
  .tab-pd-details .product-desc{
    padding-top: 14px !important; /* default was large */
  }
  .tab-pd-details .product-desc > :first-child{ margin-top: 0 !important; }
  .tab-pd-details .product-desc > :last-child{ margin-bottom: 0 !important; }

  /* Quickview tabs: keep horizontal + give content padding */
  .quickview-product .tab_prod{
    display:flex !important;
    justify-content: space-around;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px;
    margin: 0;
  }
  .quickview-product .tab_prod > li{ flex: 1 1 0; min-width: 0; text-align:center; }
  .quickview-product .tab_prod > li > a{ display:block; white-space:nowrap; }
  .quickview-product .tab-content{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Specs block: avoid "Bridge -> blank line" caused by default UL margin on mobile */
  .frame-details ul.list-unstyled,
  .frame-details .margin-bottom-0{
    margin-bottom: 0 !important;
  }

  /* Keep gutters: do NOT let content touch screen edge */
  .frame-details .frame-size .left-section,
  .frame-details .frame-size .right-section{
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 0 !important;
  }
  .frame-details .frame-size li{ margin: 0 !important; }

  /* Very small screens: stacked columns shouldn't create extra vertical gaps */
}

@media (max-width: 575.98px){
  .frame-details .frame-size .left-section{ margin-bottom: 0 !important; }
}


/* Proper spacing between SPECIFICATIONS and FRAME SIZE (stacked layout only) */
@media (max-width: 767.98px){
  .frame-details .specification + .frame-size{ margin-top: 18px; }
}
/* === end v10 === */


/* === ES Quickview Layout Fix (v10.1) === */
/* Quickview modal uses desktop viewport, so don't rely on mobile media query */
.quickview-product .tab_prod{
  display:flex !important;
  justify-content: space-around;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px;
  margin: 0;
}
.quickview-product .tab_prod > li{ flex: 1 1 0; min-width: 0; text-align:center; }
.quickview-product .tab_prod > li > a{ display:block; white-space:nowrap; }
/* Restore side padding so content doesn't stick to modal edge */
.quickview-product .tab-pd-details .container{
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.quickview-product .tab-pd-details .tab-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* === end v10.1 === */

/* === v27: Zenni-style FRAME MEASUREMENTS icons (PDP + Quickview) ===
   IMPORTANT:
   - Only target the 6 measurement rows (no pollution of body description/specs).
   - Quickview content is injected into `.quickview-product` (template #quick-view is NOT in DOM),
     so we must target `.quickview-product .des ...` instead of `#quick-view ...`.
*/

/* Make the 6 measurement rows icon + text, Zenni-like */
.tab-pd-details #des .frame-details .frame-size li.frame-width,
.tab-pd-details #des .frame-details .frame-size li.lens-width,
.tab-pd-details #des .frame-details .frame-size li.bridge,
.tab-pd-details #des .frame-details .frame-size li.temple-length,
.tab-pd-details #des .frame-details .frame-size li.lens-height,
.tab-pd-details #des .frame-details .frame-size li.frame-weight,
.quickview-product .des .frame-size li.frame-width,
.quickview-product .des .frame-size li.lens-width,
.quickview-product .des .frame-size li.bridge,
.quickview-product .des .frame-size li.temple-length,
.quickview-product .des .frame-size li.lens-height,
.quickview-product .des .frame-size li.frame-weight,
.quickview-product .des li.frame-width,
.quickview-product .des li.lens-width,
.quickview-product .des li.bridge,
.quickview-product .des li.temple-length,
.quickview-product .des li.lens-height,
.quickview-product .des li.frame-weight{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0 !important;
}

/* Base icon box */
.tab-pd-details #des .frame-details .frame-size li.frame-width::before,
.tab-pd-details #des .frame-details .frame-size li.lens-width::before,
.tab-pd-details #des .frame-details .frame-size li.bridge::before,
.tab-pd-details #des .frame-details .frame-size li.temple-length::before,
.tab-pd-details #des .frame-details .frame-size li.lens-height::before,
.tab-pd-details #des .frame-details .frame-size li.frame-weight::before,
.quickview-product .des .frame-size li.frame-width::before,
.quickview-product .des .frame-size li.lens-width::before,
.quickview-product .des .frame-size li.bridge::before,
.quickview-product .des .frame-size li.temple-length::before,
.quickview-product .des .frame-size li.lens-height::before,
.quickview-product .des .frame-size li.frame-weight::before,
.quickview-product .des li.frame-width::before,
.quickview-product .des li.lens-width::before,
.quickview-product .des li.bridge::before,
.quickview-product .des li.temple-length::before,
.quickview-product .des li.lens-height::before,
.quickview-product .des li.frame-weight::before{
  content: "";
  display: block;
  width: 60px;
  height: 28px;
  flex: 0 0 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
  transform: translateY(1px);
}

/* Map icons */
.tab-pd-details #des .frame-details .frame-size li.frame-width::before,
.quickview-product .des .frame-size li.frame-width::before,
.quickview-product .des li.frame-width::before{ background-image: url(frame-total-width.svg); }

.tab-pd-details #des .frame-details .frame-size li.lens-width::before,
.quickview-product .des .frame-size li.lens-width::before,
.quickview-product .des li.lens-width::before{ background-image: url(frame-lens-width.svg); }

.tab-pd-details #des .frame-details .frame-size li.bridge::before,
.quickview-product .des .frame-size li.bridge::before,
.quickview-product .des li.bridge::before{ background-image: url(frame-bridge-width.svg); }

.tab-pd-details #des .frame-details .frame-size li.temple-length::before,
.quickview-product .des .frame-size li.temple-length::before,
.quickview-product .des li.temple-length::before{ background-image: url(frame-temple-length.svg); }

.tab-pd-details #des .frame-details .frame-size li.lens-height::before,
.quickview-product .des .frame-size li.lens-height::before,
.quickview-product .des li.lens-height::before{ background-image: url(frame-lens-height.svg); }

.tab-pd-details #des .frame-details .frame-size li.frame-weight::before,
.quickview-product .des .frame-size li.frame-weight::before,
.quickview-product .des li.frame-weight::before{ background-image: url(frame-weight.svg); }

/* Mobile alignment: make SVG left edge align with the section title.
   Root cause: bootstrap columns (.col-sm-6) keep 15px padding even on mobile.
   We remove the inner gutters ONLY inside `.frame-size`, and neutralize `.row` negative margins. */
@media (max-width: 767.98px){
  .tab-pd-details #des .frame-details .frame-size .row,
  .quickview-product .des .frame-size .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .tab-pd-details #des .frame-details .frame-size .left-section,
  .tab-pd-details #des .frame-details .frame-size .right-section,
  .quickview-product .des .frame-size .left-section,
  .quickview-product .des .frame-size .right-section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* mobile icon size */
  .tab-pd-details #des .frame-details .frame-size li.frame-width::before,
  .tab-pd-details #des .frame-details .frame-size li.lens-width::before,
  .tab-pd-details #des .frame-details .frame-size li.bridge::before,
  .tab-pd-details #des .frame-details .frame-size li.temple-length::before,
  .tab-pd-details #des .frame-details .frame-size li.lens-height::before,
  .tab-pd-details #des .frame-details .frame-size li.frame-weight::before,
  .quickview-product .des .frame-size li.frame-width::before,
  .quickview-product .des .frame-size li.lens-width::before,
  .quickview-product .des .frame-size li.bridge::before,
  .quickview-product .des .frame-size li.temple-length::before,
  .quickview-product .des .frame-size li.lens-height::before,
  .quickview-product .des .frame-size li.frame-weight::before,
  .quickview-product .des li.frame-width::before,
  .quickview-product .des li.lens-width::before,
  .quickview-product .des li.bridge::before,
  .quickview-product .des li.temple-length::before,
  .quickview-product .des li.lens-height::before,
  .quickview-product .des li.frame-weight::before{
    width: 52px;
    height: 24px;
    flex: 0 0 52px;
  }
}
/* === end v27 === */

/* === v27.1: Quickview FRAME SIZE should never wrap (Frame\nWidth) ===
   Only affects Quickview measurement rows.
   - No right-aligned values
   - No horizontal scrollbar
   - Keep other logic unchanged
*/

/* 1) Keep the 6 measurement rows on ONE line */
.quickview-product .des .frame-size li.frame-width,
.quickview-product .des .frame-size li.lens-width,
.quickview-product .des .frame-size li.bridge,
.quickview-product .des .frame-size li.temple-length,
.quickview-product .des .frame-size li.lens-height,
.quickview-product .des .frame-size li.frame-weight,
.quickview-product .des li.frame-width,
.quickview-product .des li.lens-width,
.quickview-product .des li.bridge,
.quickview-product .des li.temple-length,
.quickview-product .des li.lens-height,
.quickview-product .des li.frame-weight{
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* Keep value spacing natural (do NOT push values to the far right) */
.quickview-product .des .frame-size li span.color-primary,
.quickview-product .des li span.color-primary{
  margin-left: 8px !important;
}

/* 2) Only when there is a SINGLE swatch, keep popup width from collapsing */
@media (min-width: 992px){
  #quick-view.es-qv-single-swatch .content.product-quickview{
    min-width: 700px !important;
  }
}
/* Extra safety: prevent any accidental horizontal scroll in the popup */
#quick-view.es-qv-single-swatch .content.product-quickview{
  overflow-x: hidden !important;
}

/* === end v27.1 === */


/* Safety: if old quickview code injected a FA glasses icon, hide it */
.tab-pd-details #des .frame-details .frame-size li i.fas.fa-glasses,
.tab-pd-details #des .frame-details .frame-size li i.fa.fa-glasses,
.tab-pd-details #des .frame-details .frame-size li i[class*="fa-glasses"],
#popup-quickview .des .frame-size li i.fas.fa-glasses,
#popup-quickview .des li i.fas.fa-glasses,
#quick-view .des .frame-size li i.fas.fa-glasses,
#quick-view .des li i.fas.fa-glasses,
.br-product-popup .des .frame-size li i.fas.fa-glasses{
  display: none !important;
}

/* Also hide any FA glasses icon inside PDP Details FRAME SIZE (if present) */
.tab-pd-details #des .frame-details .frame-size li i.fas.fa-glasses{
  display: none !important;
}
/* === end v12 === */



/* === v17: FRAME SIZE spacing tune (desktop + quickview) === */
/* Goal: keep two sub-columns compact so right side doesn't overflow; keep icon width 60 but reduce internal gutters */
@media (min-width: 768px){
  /* Use grid for the inner two lists to control column gap (tighter than Bootstrap gutters) */
  .tab-pd-details #des .frame-details .frame-size .row,
  #popup-quickview .des .frame-size .row,
  #quick-view .des .frame-size .row,
  .br-product-popup .des .frame-size .row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
  }

  /* Remove Bootstrap float/padding on the two inner columns (outer .frame-size already has padding) */
  .tab-pd-details #des .frame-details .frame-size .left-section,
  .tab-pd-details #des .frame-details .frame-size .right-section,
  #popup-quickview .des .frame-size .left-section,
  #popup-quickview .des .frame-size .right-section,
  #quick-view .des .frame-size .left-section,
  #quick-view .des .frame-size .right-section,
  .br-product-popup .des .frame-size .left-section,
  .br-product-popup .des .frame-size .right-section{
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Each line: icon + text (grid is more stable than flex with anonymous text nodes) */
  .tab-pd-details #des .frame-details .frame-size li.font-bold,
  #popup-quickview .des .frame-size li.font-bold,
  #quick-view .des .frame-size li.font-bold,
  .br-product-popup .des .frame-size li.font-bold{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    line-height: 1.25 !important;
    min-width: 0;
  }
  /* Icon box stays centered */
  .tab-pd-details #des .frame-details .frame-size li.font-bold::before,
  #popup-quickview .des .frame-size li.font-bold::before,
  #quick-view .des .frame-size li.font-bold::before,
  .br-product-popup .des .frame-size li.font-bold::before{
    justify-self: center;
  }

  /* Help long values wrap nicely without pushing the right column */
  .tab-pd-details #des .frame-details .frame-size li.font-bold,
  #popup-quickview .des .frame-size li.font-bold,
  #quick-view .des .frame-size li.font-bold,
  .br-product-popup .des .frame-size li.font-bold{
    min-width: 0;
  }
  .tab-pd-details #des .frame-details .frame-size li.font-bold span.color-primary,
  #popup-quickview .des .frame-size li.font-bold span.color-primary,
  #quick-view .des .frame-size li.font-bold span.color-primary,
  .br-product-popup .des .frame-size li.font-bold span.color-primary{
    min-width: 0;
    overflow-wrap: anywhere;
  }
}
/* === end v17 === */


/* === v18: FRAME SIZE text wrapping fix (keep label+value inline; avoid breaking 'grams' mid-word) === */
.tab-pd-details #des .frame-details .frame-size li.frame-width,
.tab-pd-details #des .frame-details .frame-size li.lens-width,
.tab-pd-details #des .frame-details .frame-size li.bridge,
.tab-pd-details #des .frame-details .frame-size li.temple-length,
.tab-pd-details #des .frame-details .frame-size li.lens-height,
.tab-pd-details #des .frame-details .frame-size li.frame-weight,
.quickview-product .des li.frame-width,
.quickview-product .des li.lens-width,
.quickview-product .des li.bridge,
.quickview-product .des li.temple-length,
.quickview-product .des li.lens-height,
.quickview-product .des li.frame-weight{
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.tab-pd-details #des .frame-details .frame-size li.frame-width .color-primary,
.tab-pd-details #des .frame-details .frame-size li.lens-width .color-primary,
.tab-pd-details #des .frame-details .frame-size li.bridge .color-primary,
.tab-pd-details #des .frame-details .frame-size li.temple-length .color-primary,
.tab-pd-details #des .frame-details .frame-size li.lens-height .color-primary,
.tab-pd-details #des .frame-details .frame-size li.frame-weight .color-primary,
.quickview-product .des li.frame-width .color-primary,
.quickview-product .des li.lens-width .color-primary,
.quickview-product .des li.bridge .color-primary,
.quickview-product .des li.temple-length .color-primary,
.quickview-product .des li.lens-height .color-primary,
.quickview-product .des li.frame-weight .color-primary{
  white-space: nowrap !important;
}


/* === v18: Quickview icon visibility (some templates don't match #popup-quickview/#quick-view) === */
.quickview-product .des li.font-bold{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-left: 0 !important;
}
.quickview-product .des li.font-bold::before{
  content: "";
  display: block;
  width: 60px;
  height: 28px;
  flex: 0 0 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
  transform: translateY(1px);
}
@media (max-width: 767.98px){
  .quickview-product .des li.font-bold::before{
    width: 52px;
    height: 24px;
    flex: 0 0 52px;
  }
}
.quickview-product .des li.frame-width::before{ background-image: url(frame-total-width.svg) !important; }
.quickview-product .des li.lens-width::before{ background-image: url(frame-lens-width.svg) !important; }
.quickview-product .des li.bridge::before{ background-image: url(frame-bridge-width.svg) !important; }
.quickview-product .des li.temple-length::before{ background-image: url(frame-temple-length.svg) !important; }
.quickview-product .des li.lens-height::before{ background-image: url(frame-lens-height.svg) !important; }
.quickview-product .des li.frame-weight::before{ background-image: url(frame-weight.svg) !important; }


/* === v19: FRAME SIZE heading align + Quickview icon hard-override + label balance === */
/* Align FRAME SIZE heading left edge with the SVG icon left edge by removing .row negative margins */
.tab-pd-details #des .frame-details .frame-size .row,
.quickview-product .des .frame-size .row,
#popup-quickview .des .frame-size .row,
#quick-view .des .frame-size .row,
.br-product-popup .des .frame-size .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Quickview: force pseudo-icons to render even if other CSS resets ::before */
.quickview-product .des li.frame-width::before,
.quickview-product .des li.lens-width::before,
.quickview-product .des li.bridge::before,
.quickview-product .des li.temple-length::before,
.quickview-product .des li.lens-height::before,
.quickview-product .des li.frame-weight::before{
  content: "" !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Also cover cases where the quickview description isn't wrapped in .des (rare templates) */
.quickview-product li.frame-width::before,
.quickview-product li.lens-width::before,
.quickview-product li.bridge::before,
.quickview-product li.temple-length::before,
.quickview-product li.lens-height::before,
.quickview-product li.frame-weight::before{
  content: "" !important;
  display: block !important;
}


/* v19: qv fallback background-image mapping (when .des wrapper is missing) */
.quickview-product li.frame-width::before{ background-image: url(frame-total-width.svg) !important; }
.quickview-product li.lens-width::before{ background-image: url(frame-lens-width.svg) !important; }
.quickview-product li.bridge::before{ background-image: url(frame-bridge-width.svg) !important; }
.quickview-product li.temple-length::before{ background-image: url(frame-temple-length.svg) !important; }
.quickview-product li.lens-height::before{ background-image: url(frame-lens-height.svg) !important; }
.quickview-product li.frame-weight::before{ background-image: url(frame-weight.svg) !important; }


/* === v22: Quickview image/thumbnail layout stability (prevent jump when image ratios differ) === */
/*
  Your product images are mostly 1:1, but some aren't.
  When swapping main images in Quickview, the main image height changes and pushes the thumbnail strip up/down.
  We lock the main image area to a stable box (square) and make the image fit inside (contain).
*/
.quickview-product #quick-view .product-media.thumbnail-left{
  display: flex;
  flex-direction: column;
}

.quickview-product #quick-view .product-media.thumbnail-left .featured-image{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.quickview-product #quick-view .product-media.thumbnail-left .featured-image > a.product-photo{
  position: absolute;
  inset: 0;
  display: block;
}

.quickview-product #quick-view .product-media.thumbnail-left .featured-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Keep a consistent gap between main image and thumbs */
.quickview-product #quick-view .product-media.thumbnail-left .more-views{
  margin-top: 14px;
  flex: 0 0 auto;
}

/* Mobile: slightly shorter gap */
@media (max-width: 767.98px){
  .quickview-product #quick-view .product-media.thumbnail-left .more-views{
    margin-top: 10px;
  }
}




/* === v23: Quickview thumbnails fixed box (no vertical jump when aspect ratios differ) ===
   The default thumb CSS uses max-height + width:auto, so landscape images become shorter and look like they "jump".
   We render every thumb into a fixed square box and use object-fit: contain.
*/
.quickview-product #quick-view .more-views .owl-carousel.es-thumb-track,
.quickview-product #quick-view .more-views .es-thumb-track{
  height: 96px; /* stable strip height */
  align-items: center;
}

.quickview-product #quick-view .more-views .owl-carousel.es-thumb-track .item a,
.quickview-product #quick-view .more-views .es-thumb-track .item a{
  width: 78px;
  height: 78px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 4px !important;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
}

.quickview-product #quick-view .more-views .owl-carousel.es-thumb-track img,
.quickview-product #quick-view .more-views .es-thumb-track img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  display:block;
}

@media (max-width: 767.98px){
  .quickview-product #quick-view .more-views .owl-carousel.es-thumb-track,
.quickview-product #quick-view .more-views .es-thumb-track{
    height: 88px;
  }
  .quickview-product #quick-view .more-views .owl-carousel.es-thumb-track .item a,
.quickview-product #quick-view .more-views .es-thumb-track .item a{
    width: 72px;
    height: 72px;
    padding: 4px !important;
  }
}

/* === v24: Quickview main image + thumbnails fully stable (fix layout jump) ===
   Root cause: the injected quickview markup lives inside .quickview-product and does NOT include #quick-view,
   so earlier selectors like .quickview-product #quick-view ... didn't match.
   This block targets the real DOM and locks the main image box + thumb strip heights.
*/

/* Main media column: stack main image + thumbs */
.quickview-product .product-media.thumbnail-left{
  display: flex;
  flex-direction: column;
}

/* Lock main image area to a stable square box (your catalog is mostly 1:1) */
.quickview-product .product-media.thumbnail-left .featured-image{
  position: relative;
  width: 100%;
  overflow: hidden;
  /* fallback: padding-top square */
  height: 0 !important;
  padding-top: 100% !important;
  flex: 0 0 auto;
}
@supports (aspect-ratio: 1 / 1){
  .quickview-product .product-media.thumbnail-left .featured-image{
    height: auto !important;
    padding-top: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Ensure injected <a.product-photo> fills the locked box */
.quickview-product .product-media.thumbnail-left .featured-image > a.product-photo{
  position: absolute;
  inset: 0;
  display: block;
}

/* Main image fits inside without changing layout */
.quickview-product .product-media.thumbnail-left .featured-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Thumb strip: reserve height so it doesn't move when images/JS load */
.quickview-product .product-media.thumbnail-left .more-views{
  margin-top: 14px;
  flex: 0 0 auto;
  min-height: 96px !important;
}

/* Make owl containers respect our reserved height */
.quickview-product .product-media.thumbnail-left .more-views .owl-stage-outer,
.quickview-product .product-media.thumbnail-left .more-views .owl-stage{
  min-height: 96px !important;
}

/* Fixed thumb boxes (no jump on different aspect ratios) */
.quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track,
.quickview-product .product-media.thumbnail-left .more-views .es-thumb-track{
  height: 96px !important;
  display: flex;
  align-items: center;
}
.quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track .owl-item{
  display: flex;
  align-items: center;
}
.quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track .item a,
.quickview-product .product-media.thumbnail-left .more-views .es-thumb-track .item a{
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px !important;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
}
.quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track img,
.quickview-product .product-media.thumbnail-left .more-views .es-thumb-track img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  display: block;
}

@media (max-width: 767.98px){
  .quickview-product .product-media.thumbnail-left .more-views{
    margin-top: 10px;
    min-height: 88px !important;
  }
  .quickview-product .product-media.thumbnail-left .more-views .owl-stage-outer,
  .quickview-product .product-media.thumbnail-left .more-views .owl-stage{
    min-height: 88px !important;
  }
  .quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track,
.quickview-product .product-media.thumbnail-left .more-views .es-thumb-track{
    height: 88px !important;
  }
  .quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track .item a,
.quickview-product .product-media.thumbnail-left .more-views .es-thumb-track .item a{
    width: 72px;
    height: 72px;
    padding: 4px !important;
  }
}

/* === ES Mobile PDP Tabs (Zenni-like) v25 === */
@media (max-width: 767.98px){
  /* Make the tab bar look like Zenni mobile (bigger labels + stronger active underline) */
  .tab-pd-details .bd-tab{
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.10);
  }
  .tab-pd-details .bd-tab .container,
  .tab-pd-details .bd-tab .container-v2{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .tab-pd-details .tab_prod{
    display: flex !important;
    gap: 0 !important;
    overflow-x: visible !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px !important;
    margin: 0 !important;
  }
  .tab-pd-details .tab_prod > li{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center;
    margin: 0 !important;
  }
  .tab-pd-details .tab_prod > li > a{
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px 0 14px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: #111 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Override theme underline_scale to a Zenni-like centered underline */
  .tab-pd-details .tab_prod > li > a.underline_scale:after{
    left: 50% !important;
    width: 56px !important;
    bottom: -1px !important;
    border-bottom: 3px solid var(--color-main2, #b48d1a) !important;
    transform: translateX(-50%) scaleX(0) !important;
    transform-origin: center !important;
  }
  .tab-pd-details .tab_prod > li > a.underline_scale.active:after,
  .tab-pd-details .tab_prod > li > a.underline_scale:hover:after{
    transform: translateX(-50%) scaleX(1) !important;
  }

  /* Content spacing: closer to Zenni (tabs to content) */
  .tab-pd-details{
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }
  .tab-pd-details .tab-content{
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 10px !important;
  }
  .tab-pd-details .product-desc{
    padding-top: 10px !important;
  }

  /* Quickview: keep same tab style (useful if QV is opened on mobile) */
  .quickview-product .tab_prod{
    display: flex !important;
    gap: 0 !important;
    overflow-x: visible !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.10);
  }
  .quickview-product .tab_prod > li{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center;
  }
  .quickview-product .tab_prod > li > a{
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 0 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
  }
  .quickview-product .tab_prod > li > a.underline_scale:after{
    left: 50% !important;
    width: 52px !important;
    bottom: -1px !important;
    border-bottom: 3px solid var(--color-main2, #b48d1a) !important;
    transform: translateX(-50%) scaleX(0) !important;
    transform-origin: center !important;
  }
  .quickview-product .tab_prod > li > a.underline_scale.active:after,
  .quickview-product .tab_prod > li > a.underline_scale:hover:after{
    transform: translateX(-50%) scaleX(1) !important;
  }
}

/* =========================================================
   v28: Quickview main image lock + TRUE vertical centering
   Fix: wide/short images were sticking to the top because
   the container height followed the image.
   Solution: lock featured-image to a stable square and
   absolutely fill it with a flex-centered <a.product-photo>.
   Scope: Quickview only.
   ========================================================= */
.quickview-product .product-media.thumbnail-left .featured-image{
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  aspect-ratio: 1 / 1;
}
@supports not (aspect-ratio: 1 / 1){
  .quickview-product .product-media.thumbnail-left .featured-image::before{
    content: "" !important;
    display: block !important;
    padding-bottom: 100% !important;
  }
}

/* Fill the locked container */
.quickview-product .product-media.thumbnail-left .featured-image > a.product-photo{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Center ALL quickview main images (base + hover overlay) inside the container */
.quickview-product .product-media.thumbnail-left .featured-image > a.product-photo > img,
.quickview-product .product-media.thumbnail-left .featured-image > a.product-photo img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}

/* =========================================================
   Mobile PDP: Long-press Swatch Preview (bubble zoom)
   - Long press (hold) on swatch image shows a temporary preview bubble
   - Release to dismiss
   - Does NOT interfere with normal tap-to-select swatch
   Scope: template-product + mobile only
   ========================================================= */
@media (max-width: 767.98px){
  /* Prevent iOS callout/selection on swatch labels */
  .es-swatch-strip label{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
}

.es-swatch-preview-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  pointer-events: none;
}
.es-swatch-preview-overlay.is-visible{
  display: block;
}
.es-swatch-preview-bubble{
  position: absolute;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 36px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity .12s ease;
  will-change: transform, opacity;
}
.es-swatch-preview-overlay.is-visible .es-swatch-preview-bubble{
  opacity: 1;
}
.es-swatch-preview-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}


/* === v35: iPad / Tablet Details layout polish (PDP Details tab only) ===
   Triggered only on iPad (html.es-ipad), so it won't affect desktop.
   Goal:
   - Avoid 3-column look on iPad (Specifications had 2 inner columns + Frame Measurements)
   - Prevent Frame Measurements right column from clipping / overflow
   - Keep headings + SVG icons left-aligned and stable
*/
@media (min-width: 768px) and (max-width: 1366.98px){
  html.es-ipad .tab-pd-details #des .frame-details .specification .row,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* SPECIFICATIONS: stack inner columns to avoid cramped 3-column appearance */
  html.es-ipad .tab-pd-details #des .frame-details .specification .left-section,
  html.es-ipad .tab-pd-details #des .frame-details .specification .right-section{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html.es-ipad .tab-pd-details #des .frame-details .specification .right-section{
    margin-top: 12px;
  }

  /* FRAME MEASUREMENTS: stack inner columns on iPad so the right side never clips */
  html.es-ipad .tab-pd-details #des .frame-details .frame-size .left-section,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size .right-section{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html.es-ipad .tab-pd-details #des .frame-details .frame-size .right-section{
    margin-top: 14px;
  }

  /* Slightly tighten spacing so the block reads like Zenni on tablet */
  html.es-ipad .tab-pd-details #des .frame-details .frame-size ul{
    margin-bottom: 0 !important;
  }
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.frame-width,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.lens-width,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.bridge,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.temple-length,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.lens-height,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.frame-weight{
    gap: 10px;
  }

  /* Tablet icon box: a bit narrower to give text more room */
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.frame-width::before,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.lens-width::before,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.bridge::before,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.temple-length::before,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.lens-height::before,
  html.es-ipad .tab-pd-details #des .frame-details .frame-size li.frame-weight::before{
    width: 56px;
    flex: 0 0 56px;
  }
}
/* === end v35 === */

/* === v39 iPad: Details tab layout polish (spacing + alignment) === */
/*
  Fixes:
  - SHARE icons not touching the divider line
  - “Specifications” block aligns with the description left edge
  - Frame Measurements columns closer (less empty gap)
  - Consistent row spacing inside Frame Measurements
*/

/* iPad / iOS Safari only (prevents affecting small desktop windows) */
@supports (-webkit-overflow-scrolling: touch) {
  @media (min-width: 768px) and (max-width: 1366px) {
    /* SHARE block: add breathing room above the divider */
    .detail-share-socials{
      margin-bottom: 22px !important;
      padding-bottom: 10px;
    }

    /* Align Specifications / Measurements with the description content */
    .tab-pd-details #des .frame-details .specification,
    .tab-pd-details #des .frame-details .frame-size{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .tab-pd-details #des .frame-details .specification .h2,
    .tab-pd-details #des .frame-details .frame-size .h2{
      margin-left: 0 !important;
    }

    /* Make the internal Measurements 2-col layout tighter and more consistent */
    .tab-pd-details #des .frame-details .frame-size .row{
      margin-left: 0 !important;
      margin-right: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 24px;
    }
    .tab-pd-details #des .frame-details .frame-size .left-section,
    .tab-pd-details #des .frame-details .frame-size .right-section{
      padding-left: 0 !important;
      padding-right: 0 !important;
      width: auto !important;
      max-width: none !important;
      float: none !important;
    }
    .tab-pd-details #des .frame-details .frame-size ul{
      margin-bottom: 0 !important;
    }
    .tab-pd-details #des .frame-details .frame-size li{
      margin: 10px 0 !important;
      line-height: 1.35;
    }
    .tab-pd-details #des .frame-details .frame-size li:last-child{
      margin-bottom: 0 !important;
    }
  }
}



/* === ES iPad PDP Tabs: use the SAME Zenni-like mobile tab bar ===
   iPad Safari is treated as desktop by the theme, so the tabs look small.
   This block applies the mobile tab bar styling on iPad (iOS Safari) only.
*/
@supports (-webkit-touch-callout: none){
  @media (min-width: 768px) and (max-width: 1366px){
    .tab-pd-details .bd-tab{
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,.10);
    }
    .tab-pd-details .bd-tab .container,
    .tab-pd-details .bd-tab .container-v2{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .tab-pd-details .tab_prod{
      display: flex !important;
      gap: 0 !important;
      justify-content: space-around !important;
      align-items: center !important;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 10px !important;
      margin: 0 !important;
    }
    .tab-pd-details .tab_prod > li{
      flex: 1 1 0;
      min-width: 0;
      text-align: center;
    }
    .tab-pd-details .tab_prod > li > a{
      display: flex !important;
      align-items: center;
      justify-content: center;
      padding: 16px 0 14px !important;
      font-size: 17px !important;
      font-weight: 600 !important;
      line-height: 1.1 !important;
      color: #111 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      -webkit-tap-highlight-color: transparent;
    }
    .tab-pd-details .tab_prod > li > a.underline_scale:after{
      left: 50% !important;
      width: 56px !important;
      bottom: -1px !important;
      border-bottom: 3px solid var(--color-main2, #b48d1a) !important;
      transform: translateX(-50%) scaleX(0) !important;
      transform-origin: center !important;
    }
    .tab-pd-details .tab_prod > li > a.underline_scale.active:after,
    .tab-pd-details .tab_prod > li > a.underline_scale:hover:after{
      transform: translateX(-50%) scaleX(1) !important;
    }

    /* Content spacing under the bar */
    .tab-pd-details{
      padding-bottom: 16px !important;
      margin-bottom: 16px !important;
    }
    .tab-pd-details .tab-content{
      padding-left: 16px !important;
      padding-right: 16px !important;
      padding-top: 0 !important;
    }
  }
}

/* === ES v44 iPad: Specifications aligns with paragraph ===
   Fix the remaining 15px drift caused by Bootstrap .row negative margins.
   We keep the Details tab's inner padding (16px) and zero out the row margins
   inside .frame-details so the whole section starts exactly at the same left edge
   as the description paragraph.
*/
@media (min-width: 768px) and (max-width: 1366px){
  html.es-ipad .tab-pd-details #des .frame-details{
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Use the Details tab container padding; don't add another gutter here */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* Cancel Bootstrap row gutters that were pulling the block left */
  html.es-ipad .tab-pd-details #des .frame-details > .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove any extra column padding inside the two main blocks */
  html.es-ipad .tab-pd-details #des .frame-details > .row > [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Some headings use a helper class that adds left margin on >=1024px */
  html.es-ipad .tab-pd-details #des .frame-details .margin-left-15-md{
    margin-left: 0 !important;
  }
}

/* Also apply when iPad detection class is unavailable (iOS WebKit) */
@supports (-webkit-touch-callout: none){
  @media (min-width: 768px) and (max-width: 1366px){
    html.es-ipad .tab-pd-details #des .frame-details{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    html.es-ipad .tab-pd-details #des .frame-details > .row{
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

/* ===============================
   v44 iPad polishing
   - Align the embedded "Specifications" / "Frame Measurements" block with the
     description paragraph above (no more drifting to the screen edge).
   - Keep the two main columns (Specs + Measurements) but render measurements
     itself as a SINGLE column on iPad.
   =============================== */
html.es-ipad .tab-pd-details #des .frame-details{
  /* match the content gutter of the Details tab on iPad */
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box;
}

/* Prevent bootstrap `.row` negative margins from cancelling the tab padding */
html.es-ipad .tab-pd-details #des .frame-details > .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The user HTML template adds extra padding helper classes; neutralize on iPad */
html.es-ipad .tab-pd-details #des .frame-details .specification,
html.es-ipad .tab-pd-details #des .frame-details .frame-size{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Some templates have the title shifted by `.margin-left-15-md` at 1024px; remove on iPad */
html.es-ipad .tab-pd-details #des .frame-details .margin-left-15-md{
  margin-left: 0 !important;
}

/* Frame Measurements: force one column (stack left/right sections) */
html.es-ipad .tab-pd-details #des .frame-details .frame-size .row{
  display: block !important;
}
html.es-ipad .tab-pd-details #des .frame-details .frame-size .left-section,
html.es-ipad .tab-pd-details #des .frame-details .frame-size .right-section{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* If any earlier grid styles were applied, explicitly disable them */
html.es-ipad .tab-pd-details #des .frame-details .frame-size .row{
  grid-template-columns: none !important;
  column-gap: 0 !important;
}

/* === v41 iPad: Details alignment + Frame Measurements single column ===
   Fixes:
   - 'Specifications' block flush-left (misaligned with description)
   - Frame Measurements forced to single column on iPad
*/
@supports (-webkit-touch-callout: none){
  @media (min-width: 768px) and (max-width: 1366px){

    /* Neutralize bootstrap .row negative gutters inside description template */
    .tab-pd-details #des .frame-details .row{
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Ensure both sections align with the same left edge as description text */
    html.es-ipad .tab-pd-details #des .frame-details{
      margin-left: 0 !important;
      margin-right: 0 !important;
      /* match the paragraph indent in Details (prevents "Specifications" from touching screen edge) */
      padding-left: 15px !important;
      padding-right: 15px !important;
      box-sizing: border-box;
    }
    .tab-pd-details #des .frame-details .specification,
    .tab-pd-details #des .frame-details .frame-size{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .tab-pd-details #des .frame-details .specification .left-section,
    .tab-pd-details #des .frame-details .specification .right-section,
    .tab-pd-details #des .frame-details .frame-size .left-section,
    .tab-pd-details #des .frame-details .frame-size .right-section{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Force Frame Measurements to stack into ONE column */
    .tab-pd-details #des .frame-details .frame-size .row{
      display: block !important; /* overrides any grid/flex rules */
    }
    .tab-pd-details #des .frame-details .frame-size .left-section,
    .tab-pd-details #des .frame-details .frame-size .right-section{
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    .tab-pd-details #des .frame-details .frame-size .right-section{
      margin-top: 0 !important; /* remove the big gap when it stacks */
    }
  }
}

/* === ES v43 iPad: make Specifications block align with description left edge (no extra inner gutter) ===
   Problem: On iPad, .frame-details content can appear "more indented" than the description paragraph
   because we add padding on .frame-details AND Bootstrap column padding.
   Fix: keep the same left padding as the Details content (16px), and remove extra Bootstrap column padding
   ONLY for the immediate columns inside .frame-details.
*/
@supports (-webkit-touch-callout: none){
  @media (min-width: 768px) and (max-width: 1366px){

    /* Align with the description paragraph (the parent Details container already has padding) */
    .tab-pd-details #des .frame-details{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Prevent Bootstrap .row (-15px margins) from pulling this section to the screen edge */
    html.es-ipad .tab-pd-details #des .frame-details > .row{
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Remove the extra 15px "Bootstrap col" padding that causes the section to shift right */
    html.es-ipad .tab-pd-details #des .frame-details > .row > [class*="col-"]{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Keep the two main blocks readable with a small gap */
    html.es-ipad .tab-pd-details #des .frame-details > .row{
      display: flex !important;
      flex-wrap: wrap;
      column-gap: 48px;
      row-gap: 0;
    }
    html.es-ipad .tab-pd-details #des .frame-details .specification,
    html.es-ipad .tab-pd-details #des .frame-details .frame-size{
      float: none !important;
      flex: 1 1 0;
      min-width: 340px;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Cancel desktop-only utility offset on iPad */
    html.es-ipad .tab-pd-details #des .frame-details .margin-left-15-md{
      margin-left: 0 !important;
    }

    /* Safety: ensure Frame Measurements stays single-column on iPad (override any grid rules) */
    html.es-ipad .tab-pd-details #des .frame-details .frame-size .row{
      display: block !important;
      grid-template-columns: none !important;
    }
  }
}

/* =========================================================
   FINAL OVERRIDE: Mobile “+ circle” size + Android clipping
   ========================================================= */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail{
    overflow: visible !important;
    min-height: 28px !important;
  }
  .product-item-v1 .image-thumbnail .more_variant{
    overflow: visible !important;
  }
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
  }
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::after{
    width: 12px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FINAL OVERRIDE: Mobile “+ circle” size + Android clipping
   ========================================================= */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail{
    overflow: visible !important;
    min-height: 28px !important;
  }
  .product-item-v1 .image-thumbnail .more_variant{
    overflow: visible !important;
  }
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::after{
    width: 12px !important;
    height: 2px !important;
    border-radius: 1px !important;
  }
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::before{
    transform: translate(-50%, -50%) !important;
  }
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::after{
    transform: translate(-50%, -50%) rotate(90deg) !important;
  }
}

/* =========================================================
   FINAL OVERRIDE: Collection swatch "+" circle size
   User target sizes:
   - Desktop / Tablet: 22px circle
   - Phone: 20px circle
   (Keep "+" drawn by CSS to avoid Android glyph clipping)
   ========================================================= */

/* Desktop / Tablet */
@media (min-width: 750px){
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch--circle,
  .quickview-product a.es-more-swatch--circle,
  .more_variant a.es-more-swatch--circle{
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }

  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch--circle::after{
    width: 10px !important;
    height: 2px !important;
  }
}

/* Phone */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch--circle,
  .quickview-product a.es-more-swatch--circle,
  .more_variant a.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FINAL OVERRIDE (v49): "More colors" plus circle size
   Some earlier legacy rules set .es-more-swatch to 34px with higher specificity
   (.more_variant a.es-more-swatch). This block wins by matching BOTH classes
   and the .more_variant context.
   Desktop/Tablet: 22px
   Phone: 20px
   ========================================================= */

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  width: 10px !important;
  height: 2px !important;
}

@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FINAL OVERRIDE (v49): "More colors" plus circle size
   - Beats legacy 34px rules by matching BOTH classes + .more_variant context
   - Desktop/Tablet: 22px circle
   - Phone: 20px circle
   ========================================================= */

/* Desktop / Tablet */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 10px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 1px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

/* Phone */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FINAL OVERRIDE (v49): "More colors" plus circle size
   - Beats legacy 34px rules by matching BOTH classes + .more_variant context
   - Desktop/Tablet: 22px circle
   - Phone: 20px circle
   ========================================================= */

/* Desktop / Tablet */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  width: 10px !important;
  height: 2px !important;
}

/* Phone */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FINAL OVERRIDE (v49): "More colors" plus circle size
   - Beats legacy 34px rules by matching BOTH classes + .more_variant context
   - Desktop/Tablet: 22px circle
   - Phone: 20px circle
   ========================================================= */

/* Desktop / Tablet */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  width: 10px !important;
  height: 2px !important;
}

/* Phone */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FINAL OVERRIDE (v49): "More colors" plus circle size
   - Beats legacy 34px rules by matching BOTH classes + .more_variant context
   - Desktop/Tablet: 22px circle
   - Phone: 20px circle
   ========================================================= */

/* Desktop / Tablet */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  width: 10px !important;
  height: 2px !important;
}

/* Phone */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FINAL OVERRIDE (v49): "More colors" plus circle size
   - Beats legacy 34px rules by matching BOTH classes + .more_variant context
   - Desktop/Tablet: 22px circle
   - Phone: 20px circle
   ========================================================= */

/* Desktop / Tablet */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 10px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 1px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

/* Phone */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FINAL OVERRIDE (v49): "More colors" plus circle size
   - Beats legacy 34px rules by matching BOTH classes + .more_variant context
   - Desktop/Tablet: 22px circle
   - Phone: 20px circle
   ========================================================= */

/* Desktop / Tablet */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 10px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 1px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}
/* =========================================================
   FINAL OVERRIDE (v49): "More colors" plus circle size
   - Beats legacy 34px rules by matching BOTH classes + .more_variant context
   - Desktop/Tablet: 22px circle
   - Phone: 20px circle
   ========================================================= */

/* Desktop / Tablet */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 10px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 1px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

/* Phone */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FINAL OVERRIDE (v49): "More colors" plus circle size
   - Beats legacy 34px rules by matching BOTH classes + .more_variant context
   - Desktop/Tablet: 22px circle
   - Phone: 20px circle
   ========================================================= */

/* Desktop / Tablet */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
.quickview-product a.es-more-swatch.es-more-swatch--circle,
.more_variant a.es-more-swatch.es-more-swatch--circle{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* "+" lines (desktop/tablet) */
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::before,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::before,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 10px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 1px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
.quickview-product a.es-more-swatch.es-more-swatch--circle::after,
.more_variant a.es-more-swatch.es-more-swatch--circle::after{
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

/* Phone */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle,
  .quickview-product a.es-more-swatch.es-more-swatch--circle,
  .more_variant a.es-more-swatch.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v1 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::before,
  .product-item-v2 .image-thumbnail a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product .more_variant a.es-more-swatch.es-more-swatch--circle::after,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::before,
  .quickview-product a.es-more-swatch.es-more-swatch--circle::after,
  .more_variant a.es-more-swatch.es-more-swatch--circle::before,
  .more_variant a.es-more-swatch.es-more-swatch--circle::after{
    width: 9px !important;
    height: 2px !important;
  }
}

/* =========================================================
   FIX50: tighter swatch spacing
   - Reduce spacing between swatches (collection cards)
   ========================================================= */
.product-item-v1 .image-thumbnail,
.product-item-v2 .image-thumbnail{
  gap: 6px !important; /* space between swatch strip and + circle */
}

.product-item-v1 .image-thumbnail .variant-image-group,
.product-item-v2 .image-thumbnail .variant-image-group{
  gap: 4px !important; /* space between swatch circles */
}

@media (max-width: 767px){
  .product-item-v1 .image-thumbnail,
  .product-item-v2 .image-thumbnail{
    gap: 5px !important;
  }
  .product-item-v1 .image-thumbnail .variant-image-group,
  .product-item-v2 .image-thumbnail .variant-image-group{
    gap: 3px !important;
  }
}

/* =========================================================
   FIX51 (2026-01-10): iPad/tablet inconsistency across different collection templates
   Symptom: On some collection templates the "+" circle still renders at legacy 34px.
   Root cause: Older rules target `.es-more-swatch` without requiring `--circle`, and
   some templates/cards only render the base class.
   Fix: Force the circle size for BOTH `.es-more-swatch` and `.es-more-swatch--circle`
   (scoped to the swatch "more" button contexts) so every collection template matches.
   Desktop/Tablet: 22px
   Phone: 20px
   ========================================================= */

/* Desktop + Tablet */
@media (min-width: 750px){
  /* Collection cards + any embedded collection grids */
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch,
  .product-item-v1 .image-thumbnail a.es-more-swatch,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch,
  .product-item-v2 .image-thumbnail a.es-more-swatch,
  .quickview-product .more_variant a.es-more-swatch,
  .quickview-product a.es-more-swatch,
  .more_variant a.es-more-swatch,

  /* Fallback for templates that only output the modifier class */
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch--circle,
  .quickview-product a.es-more-swatch--circle,
  .more_variant a.es-more-swatch--circle{
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
}

/* Phone */
@media (max-width: 749px){
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch,
  .product-item-v1 .image-thumbnail a.es-more-swatch,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch,
  .product-item-v2 .image-thumbnail a.es-more-swatch,
  .quickview-product .more_variant a.es-more-swatch,
  .quickview-product a.es-more-swatch,
  .more_variant a.es-more-swatch,
  .product-item-v1 .image-thumbnail .more_variant a.es-more-swatch--circle,
  .product-item-v1 .image-thumbnail a.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail .more_variant a.es-more-swatch--circle,
  .product-item-v2 .image-thumbnail a.es-more-swatch--circle,
  .quickview-product .more_variant a.es-more-swatch--circle,
  .quickview-product a.es-more-swatch--circle,
  .more_variant a.es-more-swatch--circle{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* =========================================================
   CLS fixes (PDP)
   ========================================================= */

/* 1) PDP urgency/counter text (often filled by JS after load)
   Reserve at least one line (two lines on mobile) so AddToCartForm
   doesn't get pushed down after numbers/text appear.
*/
.count-down .text,
.random_product,
.visitor {
  min-height: 1.4em;
}
@media (max-width: 767px){
  .count-down .text,
  .random_product,
  .visitor {
    min-height: 2.8em;
  }
}

/* 2) Social share icons (FontAwesome) - reserve box size before font loads */
.detail-share-socials .casano-social-product a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.detail-share-socials .casano-social-product i{
  line-height: 1;
}

/* 3) Trust badge image - avoid reflow when it loads */
.trust_bagde img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* 4) Header small counters - prevent tiny shifts when counters appear */
.swym-wishlist-header-counter{
  display: inline-block;
  min-width: 10px;
}

/* NOTE: .number-cart in this theme is a small dot badge (no text).
   Avoid setting min-width/flex here; it can turn the dot into an oval. */

/* Mobile header badges (cart + wishlist)
   - Keep UI clean: hide badges when count is 0
   - Position badge at the icon's top-right corner
*/
.menu_moblie .menuright a{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.menu_moblie .menuright .enj-cartcount{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  background: #D4AF37;
  color: #fff;
  pointer-events: none;
}

.menu_moblie .menuright .swym-wishlist-header-counter.swym-mobile{
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  background: #D4AF37;
  color: #fff;
  pointer-events: none;
  display: none;
}

.menu_moblie .menuright .swym-wishlist-header-counter.swym-mobile.show-badge{
  display: inline-flex;
}

.es-badge-hidden{ display: none !important; }
.menu_moblie .menuright .es-badge-hidden{ display: none !important; }

/* =========================================================
   ES FIX: Mobile "My Favorites" (Swym wishlist) alignment
   Goal: keep cards centered and prevent the single-item case
         from sticking to the left on mobile.
   Approach: keep a stable 2-column grid and center the grid block.
========================================================= */

@media (max-width: 767px){
  .swym-ui-component,
  .swym-wishlist-page{
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* Stable grid: keep a consistent 2-column layout and stable card sizing.
     For 1 item, the 2-col grid block is centered (no "stuck to left"),
     while the card remains in column 1 to keep structure consistent. */
  .swym-wishlist-grid,
  .swym-wishlist-items,
  .swym-wishlist-container .swym-wishlist-grid,
  .swym-ui-component .swym-wishlist-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: calc(170px * 2 + 12px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: start !important;
    align-items: start !important;
  }

  /* Ensure children can stretch nicely and don’t carry legacy widths/margins */
  .swym-wishlist-grid > *,
  .swym-wishlist-items > *{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Stable square image box + centered image */
  .swym-wishlist-item-image,
  .swym-wishlist-image,
  .swym-product-image,
  .swym-ui-component .swym-wishlist-item-image,
  .swym-ui-component .swym-product-image{
    width: 100% !important;
    aspect-ratio: 1 / 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff;
  }

  .swym-ui-component img,
  .swym-ui-component .swym-wishlist-item-image img,
  .swym-ui-component .swym-product-image img,
  .swym-wishlist-item-image img,
  .swym-product-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
}
/* --------------------------------------------------------
   Mobile left drawer open (body.activemenu_mobile)
   Fix: floating VIDEO button / chat / back-to-top appearing above the overlay
   While the drawer is open, hide floating UI elements.
-------------------------------------------------------- */

body.activemenu_mobile .btn-video,
body.activemenu_mobile .btn_video,
body.activemenu_mobile .text_video{
  display: none !important;
}

body.activemenu_mobile #back-to-top,
body.activemenu_mobile .btn_backtop,
body.activemenu_mobile .back-to-top-fab,
body.activemenu_mobile .back-to-top{
  display: none !important;
}

body.activemenu_mobile #shopify-chat,
body.activemenu_mobile #shopify-chat-dummy,
body.activemenu_mobile #dummy-chat-button-iframe,
body.activemenu_mobile inbox-online-store-chat,
body.activemenu_mobile iframe[src*="inbox"],
body.activemenu_mobile iframe[src*="chat.shopify"],
body.activemenu_mobile iframe[title*="Shopify Inbox"]{
  display: none !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------
   Mobile PDP: prevent VIDEO button from sliding into the sticky header area
   - Some PDP layouts make the media/gallery sticky while scrolling.
   - The VIDEO button is absolutely positioned near the top of the gallery;
     when the gallery sticks to the viewport, it can overlap the header.
   Fix: keep it below the header height on mobile.
-------------------------------------------------------- */

@media (max-width: 767px){
  /* Use the same compact header height we set for mobile (menu_moblie min-height:54px) */
  :root{ --es-header-h: 54px; }

  body.template-product .gallery-control .btn-video,
  body.template-product .prod_sticky .btn-video,
  body.template-product .product_sidebar .btn-video,
  body.template-product .prod_extended .btn-video{
    top: calc(env(safe-area-inset-top, 0px) + var(--es-header-h) + 10px) !important;
    z-index: 60 !important; /* below header (999) but above gallery */
  }
}


/* Eyeshells: Mini cart close button reliability + header layering */
.js-minicart .mini-cart-head{
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f7f7f7;
}
.js-minicart .close-mini-cart{
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =========================================================
   Eyeshells UX: PDP add-to-cart → open minicart drawer
   - Show a subtle toast in the minicart header (premium, non-intrusive)
========================================================= */
.js-minicart .mini-cart-head{ position: sticky; }

}


/* =============================
   Header stability (no "shake")
   - Prevent font/icon swap & sticky init transitions from shifting header
   - Reserve consistent tap areas for header icons
============================= */
html.es-loading #header,
html.es-loading .menu_moblie,
html.es-loading .header-ontop,
html.es-loading .header-sticky,
html.es-loading .header_sticky,
html.es-loading .menuright,
html.es-loading .menuright *{
  transition: none !important;
  animation: none !important;
}

/* Keep layout width stable between pages with/without scrollbar (desktop) */
@supports (scrollbar-gutter: stable) {
  html{ scrollbar-gutter: stable; }
}

/* Mobile header: tighter, more premium proportions (still easy to tap) */
.menu_moblie{
  min-height: 54px;
  padding: 7px 12px !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.menu_moblie .menuright{
  display: flex;
  align-items: center;
}
.menu_moblie .menuright > span,
.menu_moblie .menuright > a{
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu_moblie .menuright svg{
  width: 22px;
  height: 22px;
  display: block;
}
.menu_moblie .menuright i{
  font-size: 21px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile hamburger icon: remove extra top offset so header height stays compact */
@media (max-width: 1199px){
  .menu_moblie .menuleft .iconmenu{
    margin-top: 0 !important;
    margin-right: 12px !important;
  }
  .menu_moblie .menuleft .iconmenu span{
    margin-bottom: 5px !important;
  }
}

/* Desktop header: subtle separator line (only when not transparent/absolute) */
@media (min-width: 1200px){
  #header:not(.header-absolute){
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
}

/* --------------------------------------------------------
   Desktop header: lock final icon rail spacing + badge placement
   - Prevent late-parsed theme CSS (e.g., margin-right:13px) from overriding gap
   - Move cart dot badge to top-right (match wishlist dot)
-------------------------------------------------------- */
@media (min-width: 1200px){
  /* Ensure the final layout stays tight and never "drifts" after load */
  #header .currencies-login .cart-login-search > ul{
    gap: 4px !important;
  }
  #header .currencies-login .cart-login-search > ul > li{
    margin: 0 !important;
    margin-right: 0 !important;
  }
  #header .currencies-login .cart-login-search > ul > li:last-child{
    margin-right: 0 !important;
  }
  #header .currencies-login .cart-login-search > ul > li > a{
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  /* Cart dot badge: top-right (dot only) */
  #header .currencies-login .cart-login-search a.cart{
    position: relative !important;
  }
  #header .currencies-login .cart-login-search a.cart .number-cart.active{
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    bottom: auto !important;
    left: auto !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #D4AF37 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
}

/* Avoid any badge text affecting icon layout (badge is absolute) */
.menu_moblie .menuright .enj-cartcount,
.menu_moblie .menuright .swym-wishlist-header-counter.swym-mobile{
  position: absolute;
}

/* If your header has an "ontop" animation, don't animate on initial paint */
html.es-loading .header-ontop{ transform: none !important; }

/* Product card image hover: gold underline (desktop hover only) */

/* Desktop header icons hover: subtle gray circle (LensCrafters-like, restrained) */
@media (min-width: 1200px){
  #header .currencies-login .cart-login-search > ul > li > a{
    transition: background-color .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  #header .currencies-login .cart-login-search > ul > li > a:hover{
    background-color: rgba(17,17,17,.055);
  }
  #header .currencies-login .cart-login-search > ul > li > a:focus-visible{
    outline: none;
    background-color: rgba(17,17,17,.055);
    box-shadow: 0 0 0 1px rgba(212,175,55,.42);
  }
  #header .currencies-login .cart-login-search > ul > li > a:active{
    background-color: rgba(17,17,17,.085);
  }
}


/* ES FIX: Desktop header wishlist badge anchor
   Some Swym themes inject the counter outside the <a>, so absolute positioning
   can anchor to the header instead of the icon. Anchor it to the <li>. */
@media (min-width: 1200px){
  #header .currencies-login .cart-login-search > ul > li{
    position: relative;
  }
  /* Wishlist badge (gold dot) should NEVER flash when wishlist is empty.
     Hide by default; show only when Swym injects a non-empty count.
     This prevents the "flash then disappear" effect on page navigation. */
  #header .swym-wishlist-header-counter{
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    bottom: auto !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #D4AF37 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    display: none !important; /* default hidden to prevent flashing */
  }
  /* Swym usually leaves this span empty when count is 0.
     When it contains text, show the dot. */
  #header .swym-wishlist-header-counter:not(:empty){
    display: block !important;
  }
}


/* ============================
   2026-01-12 PDP spacing fix
   Give the content a little breathing room under the header shadow line.
   (Previously tightened in engo-customize.scss; this override restores spacing.)
   ============================ */

/* Desktop/tablet */
.prod_extended .wrap-bread-crumb .bread-crumb,
.product_sidebar .wrap-bread-crumb .bread-crumb,
.prod_sticky .wrap-bread-crumb .bread-crumb{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Mobile */
@media (max-width: 767px){
  .prod_extended .wrap-bread-crumb .bread-crumb,
  .product_sidebar .wrap-bread-crumb .bread-crumb,
  .prod_sticky .wrap-bread-crumb .bread-crumb{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}


/* =========================================================
   Eyeshells: Cart auto-update stability tweaks
   - Prevent "jitter" when totals change
   - Indicate updating without layout shift
========================================================= */
.page-cart .amount{
  font-variant-numeric: tabular-nums;
}
.page-cart .product-price .amount,
.page-cart .product-subtotal .amount,
.page-cart .cart-amount .amount,
.page-cart .total-checkout .amount{
  display: inline-block;
  min-width: 8ch;
  text-align: right;
}

/* Cart table headers: keep Title Case (avoid global uppercase styles) */
.page-cart .shop_table thead th{
  text-transform: none !important;
}

.page-cart.es-cart-updating .shop_table,
.page-cart.es-cart-updating .cart_totals{
  opacity: .65;
}
.page-cart.es-cart-updating .cart-qty-input{
  pointer-events: none;
}

/* Cart live update (section refresh) */
#shopify-section-main.es-cart-replacing{
  transition: opacity .12s ease;
}
#shopify-section-main.es-cart-replacing .shop_table,
#shopify-section-main.es-cart-replacing .cart_totals{
  opacity: .65;
}
#shopify-section-main.es-cart-replacing .cart-qty-input,
#shopify-section-main.es-cart-replacing a.remove{
  pointer-events: none;
}

/* Smooth removal (avoid "jump" feeling when deleting an item) */
.page-cart tr.cart_item td{
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}
.page-cart tr.cart_item.es-row-removing td{
  opacity: 0;
  transform: translateY(-4px);
}



/* =========================================================
   Cart page: Soft luxe refinement (v43)
   - Keep original cart layout (no sidebar)
   - Premium spacing, typography, and controls
========================================================= */

.page-cart.es-cart-soft-luxe-page .container{
  max-width: 1240px;
}

.page-cart.es-cart-soft-luxe-page .content-cart-page{
  padding-top: 18px;
  padding-bottom: 88px;
}

/* Table container becomes a card (desktop + mobile) */
.page-cart.es-cart-soft-luxe-page .table-responsive{
  background: #fff;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,.06);
  overflow: hidden;
}

.page-cart.es-cart-soft-luxe-page .shop_table{
  border: 0 !important;
  margin: 0;
  width: 100%;
  table-layout: auto;
  background: transparent !important;
}

/* Clean, modern table header */
.page-cart.es-cart-soft-luxe-page .shop_table thead th{
  background: rgba(17,17,17,.02);
  border-bottom: 1px solid rgba(17,17,17,.08) !important;
  color: rgba(17,17,17,.60) !important;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 16px 18px !important;
}

.page-cart.es-cart-soft-luxe-page .shop_table thead th.product-thumbnail{
  padding-left: 22px !important;
}

/* Give the product details the space they need */
.page-cart.es-cart-soft-luxe-page th.product-price,
.page-cart.es-cart-soft-luxe-page td.product-price{
  width: 120px;
}

.page-cart.es-cart-soft-luxe-page th.product-quantity,
.page-cart.es-cart-soft-luxe-page td.product-quantity{
  width: 150px;
}

.page-cart.es-cart-soft-luxe-page th.product-subtotal,
.page-cart.es-cart-soft-luxe-page td.product-subtotal{
  width: 130px;
}

.page-cart.es-cart-soft-luxe-page th.product-remove,
.page-cart.es-cart-soft-luxe-page td.product-remove{
  width: 70px;
  text-align: center;
}

.page-cart.es-cart-soft-luxe-page tr.cart_item td{
  border-top: 0 !important;
  padding: 22px 18px !important;
  vertical-align: top !important;
}

.page-cart.es-cart-soft-luxe-page tr.cart_item + tr.cart_item td{
  border-top: 1px solid rgba(17,17,17,.08) !important;
}

.page-cart.es-cart-soft-luxe-page td.product-thumbnail{
  width: 150px;
  padding-left: 22px !important;
}

.page-cart.es-cart-soft-luxe-page td.product-thumbnail img{
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

.page-cart.es-cart-soft-luxe-page .product-name-thumb > a{
  font-weight: 600;
  color: #111;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: .01em;
}

.page-cart.es-cart-soft-luxe-page .product-name-thumb small{
  font-size: 13px !important;
  color: rgba(17,17,17,.54) !important;
  margin-top: 4px;
}

.page-cart.es-cart-soft-luxe-page .product-name-thumb ul{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.page-cart.es-cart-soft-luxe-page .product-name-thumb li{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(17,17,17,.58);
  margin: 4px 0;
}

.page-cart.es-cart-soft-luxe-page .product-details__item-label{
  color: rgba(17,17,17,.70);
  font-weight: 600;
}

.page-cart.es-cart-soft-luxe-page td.product-price,
.page-cart.es-cart-soft-luxe-page td.product-subtotal{
  white-space: nowrap;
}

.page-cart.es-cart-soft-luxe-page td.product-price .amount,
.page-cart.es-cart-soft-luxe-page td.product-subtotal .amount{
  font-weight: 600;
  color: rgba(17,17,17,.82);
}

/* Quantity input: clean but not bulky */
.page-cart.es-cart-soft-luxe-page .cart-qty-input{
  width: 92px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.18);
  background: #fff;
  text-align: center;
  font-weight: 600;
  color: #111;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.page-cart.es-cart-soft-luxe-page .cart-qty-input:focus{
  outline: none;
  border-color: rgba(212,175,55,.75);
  box-shadow: 0 12px 30px rgba(0,0,0,.08), 0 0 0 4px rgba(212,175,55,.18);
}

/* V44 Quantity: Apple-like glass +/- control */
.page-cart.es-cart-soft-luxe-page .es-qty-control{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.page-cart.es-cart-soft-luxe-page .es-qty-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.92);
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.page-cart.es-cart-soft-luxe-page .es-qty-btn:hover{
  background: rgba(212,175,55,.14);
}

.page-cart.es-cart-soft-luxe-page .es-qty-btn:active{
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.page-cart.es-cart-soft-luxe-page .es-qty-control .cart-qty-input{
  width: 44px;
  height: 34px;
  min-width: 44px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
  font-weight: 700;
  text-align: center;
}

.page-cart.es-cart-soft-luxe-page .es-qty-control .cart-qty-input:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}

.page-cart.es-cart-soft-luxe-page .es-qty-control input[type=number]::-webkit-outer-spin-button,
.page-cart.es-cart-soft-luxe-page .es-qty-control input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.page-cart.es-cart-soft-luxe-page .es-qty-control input[type=number]{
  -moz-appearance: textfield;
}

/* Remove icon: subtle luxury circle */
.page-cart.es-cart-soft-luxe-page td.product-remove a.remove{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(17,17,17,.04);
  transition: background .15s ease, transform .15s ease;
}

.page-cart.es-cart-soft-luxe-page td.product-remove a.remove:hover{
  background: rgba(212,175,55,.16);
}

.page-cart.es-cart-soft-luxe-page td.product-remove a.remove:active{
  transform: translateY(1px);
}

/* Totals area: keep original structure, but present as premium blocks */
.page-cart.es-cart-soft-luxe-page .cart_totals{
  margin-top: 22px;
}

@media (min-width: 992px){
  .page-cart.es-cart-soft-luxe-page .cart_totals{
    display: flex;
    align-items: flex-start;
    /* Align summary with the cart table edge (more symmetrical on wide desktop) */
    justify-content: flex-end;
    gap: 24px;
  }
}

.page-cart.es-cart-soft-luxe-page .continue-shopping-1 a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.92);
  color: #111;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1;
  transition: background .15s ease, transform .15s ease;
}

.page-cart.es-cart-soft-luxe-page .continue-shopping-1 a:hover{
  background: rgba(17,17,17,.03);
}

.page-cart.es-cart-soft-luxe-page .continue-shopping-1 a:active{
  transform: translateY(1px);
}

.page-cart.es-cart-soft-luxe-page .cart-check{
  background: #fff;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,.06);
  padding: 20px 22px;
  width: 100%;
  max-width: 440px;
}

.page-cart.es-cart-soft-luxe-page .cart-check .cart-title{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(17,17,17,.55);
  margin-bottom: 12px;
}

.page-cart.es-cart-soft-luxe-page .cart-check .total-checkout{
  width: 100%;
  margin-bottom: 14px;
}

.page-cart.es-cart-soft-luxe-page .cart-check .cart-amount .amount{
  font-size: 18px;
  letter-spacing: .01em;
}

.page-cart.es-cart-soft-luxe-page .cart-check .checkout-button{
  border-radius: 999px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;

  background: linear-gradient(135deg, rgba(212,175,55,1) 0%, rgba(212,175,55,.88) 40%, rgba(212,175,55,1) 100%) !important;
  color: #111827 !important;
  border: 1px solid rgba(17,17,17,.10) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.10), 0 0 0 4px rgba(212,175,55,.12) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.page-cart.es-cart-soft-luxe-page .cart-check .checkout-button:hover{
  filter: brightness(1.02);
  box-shadow: 0 22px 55px rgba(0,0,0,.12), 0 0 0 4px rgba(212,175,55,.16) !important;
  transform: translateY(-1px);
}

.page-cart.es-cart-soft-luxe-page .cart-check .checkout-button:active{
  transform: translateY(1px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10), 0 0 0 4px rgba(212,175,55,.10) !important;
}


/* V45: Trust highlights under checkout (premium + conversion friendly) */
.page-cart.es-cart-soft-luxe-page .es-cart-trust{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.page-cart.es-cart-soft-luxe-page .es-cart-trust .es-step{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(17,17,17,.07);
}
.page-cart.es-cart-soft-luxe-page .es-cart-trust .es-step__dot{
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.page-cart.es-cart-soft-luxe-page .es-cart-trust .es-step__text{
  font-size: 12px;
}

/* V45: Remove icon refinement (smaller X + luxury hover) */
.page-cart.es-cart-soft-luxe-page td.product-remove a.remove{
  color: rgba(17,17,17,.56);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.page-cart.es-cart-soft-luxe-page td.product-remove a.remove svg{
  width: 12px;
  height: 12px;
  fill: currentColor;
  opacity: .72;
}
.page-cart.es-cart-soft-luxe-page td.product-remove a.remove:hover{
  color: #111;
  background: rgba(212,175,55,.18);
}

/* V45: Extra glass highlight for quantity control */
.page-cart.es-cart-soft-luxe-page .es-qty-control{
  position: relative;
  overflow: hidden;
}
.page-cart.es-cart-soft-luxe-page .es-qty-control::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  opacity: .9;
  pointer-events: none;
}
.page-cart.es-cart-soft-luxe-page .es-qty-btn,
.page-cart.es-cart-soft-luxe-page .es-qty-control .cart-qty-input{
  position: relative;
  z-index: 1;
}

/* V45: Carousel arrows disabled state */
.page-cart.es-cart-soft-luxe-page .es-ec-carousel__btn.is-disabled{
  opacity: .35;
  pointer-events: none;
}



@media (max-width: 991px){
  .page-cart.es-cart-soft-luxe-page .shop_table thead th{
    padding: 12px 14px !important;
  }
  .page-cart.es-cart-soft-luxe-page tr.cart_item td{
    padding: 14px 14px !important;
  }
  .page-cart.es-cart-soft-luxe-page td.product-thumbnail{
    width: 110px;
  }
  .page-cart.es-cart-soft-luxe-page .product-name-thumb > a{
    font-size: 14px;
  }
  .page-cart.es-cart-soft-luxe-page .product-name-thumb li{
    font-size: 12.5px;
  }
  .page-cart.es-cart-soft-luxe-page .cart-check{
    max-width: 100%;
  }
}
/* =========================================================
   Popup Ajax Add-to-cart close animation (PDP)
   Fix: remove distracting "fly to top-left" collapse on close.
   The original popup animates width/height from 100% -> 0 which
   visually "shoots" the popup to the top-left corner.
   We override the base popup to stay full-screen and only fade.
   ========================================================= */
.engo-popup{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.engo-popup .overlay-addcart{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(29, 29, 31, 0.58);
  opacity: 0;
  transition: opacity 200ms ease;
}

.engo-popup.active{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s;
}

.engo-popup.active .overlay-addcart{ opacity: 1; }
.engo-popup .content{
  width: calc(100vw - 40px);
  max-width: 800px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  padding: 20px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  z-index: 2;

  background: #fff;
  border-radius: 0 !important; /* square corners */
  box-shadow: 0 18px 60px rgba(0,0,0,.22);

  transform: translateY(14px) scale(.985);
  opacity: 0;
  will-change: transform, opacity;

  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity 200ms ease;
}
.engo-popup.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s;
}
.engo-popup.active .overlay-addcart{ opacity: 1; }
.engo-popup.active .content{
  transform: translateY(0) scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .engo-popup,
  .engo-popup .overlay-addcart,
  .engo-popup .content{
    transition: none !important;
    animation: none !important;
  }
  .engo-popup .content{ transform: none !important; }
}

/* Cart header row: make it readable (Title Case + better size/spacing) */
.page-cart .content-cart-page .shop_table .cart-title th{
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: none !important;
  padding: 16px 20px !important;
  line-height: 1.2 !important;
}
@media (max-width: 767px){
  .page-cart .content-cart-page .shop_table .cart-title th{
    font-size: 12px !important;
    letter-spacing: .06em !important;
    padding: 12px 12px !important;
  }
}
/* =========================================================
   Cart thumbnail aspect-ratio fix (prevents image stretching)
   - Works for 1:1 images (most products) and also non-square
   - Applies to Cart page + Mini cart / AJAX cart
   ========================================================= */

/* Cart page (table) */
.page-cart td.product-thumbnail > a{
  display: block;
  width: 140px;
  height: 140px;
  overflow: hidden;
}
.page-cart td.product-thumbnail img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Mobile cart */
@media (max-width: 767px){
  .page-cart td.product-thumbnail > a{
    width: 90px;
    height: 90px;
  }
}

/* Mini cart (dropdown) */
.product-mini-cart .product-thumb-link{
  display: block;
  width: 80px;
  height: 80px;
  overflow: hidden;
}
.product-mini-cart .product-thumb-link img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* AJAX cart (drawer template) */
.thumb_img_cartmini > a{
  display: block;
  width: 80px;
  height: 80px;
  overflow: hidden;
}
.thumb_img_cartmini img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}



/* ES: Hard-disable Bootstrap tooltip/popover UI (fallback) */
.tooltip,
.popover{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* =========================================================
   Mobile menu top header (Eyebuydirect-style)
   - Replaces the non-clickable "COLLECTIONS" bar with:
     [X close] .................................. [Sign in]
   ========================================================= */
.es-mmenu-top{
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  z-index: 5;
}
.es-mmenu-close{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 0; /* icon-only button */
  line-height: 0;
  padding: 0;
}
.es-mmenu-close .es-ico-close{
  width: 20px;
  height: 20px;
  display: block;
}
.es-mmenu-signin{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #D4AF37;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
}
.es-mmenu-signin:hover,
.es-mmenu-signin:focus{
  opacity: .92;
}

/* === ES: Eyebuydirect-style Mobile Menu === */
@media (max-width: 991px){
  /* Top bar */
  .box_contentmenu .es-mmenu-top{
    position: sticky;
    top: 0;
    z-index: 6;
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.10);
  }
  .box_contentmenu .es-mmenu-close{
    width: 44px;
    height: 44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border: 0;
    background: transparent;
    color: #111;
    font-size: 0;
    line-height: 0;
    padding: 0;
  }
  .box_contentmenu .es-mmenu-close .es-ico-close{
    width: 20px;
    height: 20px;
  }
  .box_contentmenu .es-mmenu-close:active{
    transform: scale(.98);
  }
  .box_contentmenu .es-mmenu-signin{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height: 40px;
    padding: 10px 18px;
    background: #D4AF37;
    color:#fff !important;
    font-weight: 600;
    text-decoration:none !important;
    border-radius: 0; /* user requested square corners */
  }

  /* Accordion root */
  .box_contentmenu .es-mmenu-acc{
    background:#fff;
  }

  /* Top-level rows */
  .box_contentmenu .es-acc-trigger,
  .box_contentmenu .es-acc-direct{
    width:100%;
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 22px 18px;
    border: 0;
    background: transparent;
    color:#111;
    text-decoration:none !important;
    border-bottom: 1px solid rgba(0,0,0,.10);
  }
  .box_contentmenu .es-acc-trigger{
    cursor:pointer;
  }
  .box_contentmenu .es-acc-text{
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .2px;
  }
  .box_contentmenu .es-acc-left{
    display:inline-flex;
    align-items:center;
    gap: 10px;
  }

  /* Badge (like NEW) */
  .box_contentmenu .es-acc-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    background: #d0021b;
    color:#fff;
    border-radius: 4px;
    line-height: 1;
  }

  /* Chevron */
  .box_contentmenu .es-acc-chevron,
  .box_contentmenu .es-sub-chevron{
    width: 10px;
    height: 10px;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    transition: transform .2s ease;
    flex: 0 0 auto;
    margin-left: 10px;
  }
  .box_contentmenu .es-acc-item.is-open > .es-acc-trigger .es-acc-chevron{
    transform: rotate(-135deg);
  }
  .box_contentmenu .es-sub-acc-item.is-open > .es-sub-trigger .es-sub-chevron{
    transform: rotate(-135deg);
  }

  /* Panels */
  .box_contentmenu .es-acc-panel,
  .box_contentmenu .es-sub-panel{
    overflow: hidden;
    transition: height .25s ease;
    border-bottom: 1px solid rgba(0,0,0,.10);
    background: #fff;
  }
  .box_contentmenu .es-acc-panel-inner{
    padding: 10px 0 14px;
  }

  /* Panel links */
  .box_contentmenu .es-acc-link{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 14px 18px 14px 28px;
    font-size: 18px;
    font-weight: 600;
    color:#111;
    text-decoration:none !important;
  }
  .box_contentmenu .es-acc-link:active{
    background: rgba(0,0,0,.04);
  }
  .box_contentmenu .es-acc-link--all{
    padding-left: 18px;
    font-weight: 700;
  }

  /* Nested accordion */
  .box_contentmenu .es-sub-trigger{
    width:100%;
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 14px 18px 14px 28px;
    border: 0;
    background: transparent;
    color:#111;
    cursor:pointer;
    text-align:left;
  }
  .box_contentmenu .es-acc-text--sub{
    font-size: 18px;
    font-weight: 700;
  }
  .box_contentmenu .es-sub-panel-inner{
    padding: 6px 0 10px;
    background: rgba(0,0,0,.02);
  }
  .box_contentmenu .es-acc-link--suball{
    padding-left: 38px;
    font-weight: 700;
  }
  .box_contentmenu .es-acc-link--grand{
    padding-left: 48px;
    font-weight: 600;
  }
}

/* Reduce overly large typography on very small phones */
@media (max-width: 360px){
  .box_contentmenu .es-acc-text{ font-size: 24px; }
}

/* =========================================================
   Mobile menu (EBD-style) — premium typography + spacing
   - Smaller type, cleaner rhythm, but KEEP comfortable tap targets
   - Only affects the mobile menu overlay (.box_contentmenu)
   ========================================================= */
@media (max-width: 991px){
  /* Top bar */
  .box_contentmenu .es-mmenu-top{
    padding: 12px 16px;
    border-bottom-color: rgba(0,0,0,.06);
  }
  .box_contentmenu .es-mmenu-close{
    font-size: 0; /* icon-only */
  }
  .box_contentmenu .es-mmenu-close .es-ico-close{ width: 20px; height: 20px; }
  .box_contentmenu .es-mmenu-signin{
    min-height: 38px;
    padding: 9px 14px;
    font-size: 14px;
    letter-spacing: .2px;
    border-radius: 0 !important; /* keep square */
  }

  /* Level 1 rows (main categories) */
  .box_contentmenu .es-acc-text{
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .1px;
  }
  .box_contentmenu .es-acc-trigger{
    padding: 14px 18px;
    border-bottom-color: rgba(0,0,0,.06);
  }

  /* Level 1 "All" / Level 2 links */
  .box_contentmenu .es-acc-link{
    font-size: 15px;
    font-weight: 500;
    padding: 12px 18px 12px 28px; /* keep indent, slightly tighter */
  }
  .box_contentmenu .es-acc-link--all{
    padding-left: 18px;
    font-weight: 600;
  }

  /* Nested accordion rows */
  .box_contentmenu .es-sub-trigger{
    padding: 12px 18px 12px 28px;
  }
  .box_contentmenu .es-acc-text--sub{
    font-size: 15px;
    font-weight: 600;
  }

  /* Deeper links */
  .box_contentmenu .es-acc-link--suball{ font-weight: 600; }
  .box_contentmenu .es-acc-link--grand{ font-weight: 500; }

  /* Sub panels */
  .box_contentmenu .es-acc-panel-inner{
    padding: 6px 0 8px;
  }
  .box_contentmenu .es-sub-panel-inner{
    padding: 4px 0 8px;
    background: rgba(0,0,0,.015);
  }

  /* Chevron slightly smaller/softer */
  .box_contentmenu .es-acc-chevron,
  .box_contentmenu .es-sub-chevron{
    transform: rotate(45deg) scale(.9);
    opacity: .8;
  }
}

/* Very small phones: keep it readable without feeling huge */
@media (max-width: 360px){
  .box_contentmenu .es-acc-text{ font-size: 16px; }
  .box_contentmenu .es-acc-link{ font-size: 14.5px; }
}


/* =========================================================
   ES: EBD menu polish — active GOLD bar + chevron snap (no shake)
   - Left indicator uses brand gold #D4AF37
   - Chevron uses a single "wing flex" (squash) on open/close (no vibration)
   - Larger close X
   ========================================================= */
@media (max-width: 1024px){
  /* Left active bar on the currently opened row */
  .box_contentmenu .es-acc-item > .es-acc-trigger,
  .box_contentmenu .es-sub-acc-item > .es-sub-trigger{
    position: relative;
  }

  .box_contentmenu .es-acc-item.is-open > .es-acc-trigger::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width: 3px;
    background: #D4AF37;
  }
  .box_contentmenu .es-sub-acc-item.is-open > .es-sub-trigger::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width: 2px;
    background: #D4AF37;
    opacity: .9;
  }

  /* Close icon sizing (match EBD-style proportions) */
  .box_contentmenu .es-mmenu-close{ font-size: 0; }
  .box_contentmenu .es-mmenu-close .es-ico-close{ width: 20px; height: 20px; }

  /* Chevron "wing flex" — single squash (no wobble) */
  @keyframes esChevOpen {
    0%   { transform: rotate(45deg) scaleX(1) scaleY(1); }
    70%  { transform: rotate(-135deg) scaleX(1.18) scaleY(.86); }
    100% { transform: rotate(-135deg) scaleX(1) scaleY(1); }
  }
  @keyframes esChevClose{
    0%   { transform: rotate(-135deg) scaleX(1) scaleY(1); }
    70%  { transform: rotate(45deg) scaleX(1.18) scaleY(.86); }
    100% { transform: rotate(45deg) scaleX(1) scaleY(1); }
  }

  .box_contentmenu .es-acc-item.is-opening > .es-acc-trigger .es-acc-chevron,
  .box_contentmenu .es-sub-acc-item.is-opening > .es-sub-trigger .es-sub-chevron{
    animation: esChevOpen .22s cubic-bezier(.2,.85,.2,1) both;
    transition: none;
    will-change: transform;
  }

  .box_contentmenu .es-acc-item.is-closing > .es-acc-trigger .es-acc-chevron,
  .box_contentmenu .es-sub-acc-item.is-closing > .es-sub-trigger .es-sub-chevron{
    animation: esChevClose .20s cubic-bezier(.2,.85,.2,1) both;
    transition: none;
    will-change: transform;
  }
}


/* =========================================================
   Font Awesome SVG+JS sizing fix (prevents huge icons)
   - Keeps appearance consistent with font icons
   ========================================================= */
svg.svg-inline--fa{
  display:inline-block;
  height:1em;
  width:1em;
  vertical-align:-0.125em;
  overflow:visible;
}
svg.svg-inline--fa.fa-fw{ width:1.25em; }
.fa-layers svg.svg-inline--fa{ position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; }


/* =========================================================
   ES Search Overlay: premium UI + better UX (no layout flash)
   - Removes legacy body push-down
   - Adds clear button, suggestion chips, skeleton states
   ========================================================= */

/* Legacy code pushed <body> down when search opens (causes a grey flash). Disable it safely. */
body.activedestop{ margin-top: 0 !important; }

/* Slightly faster/cleaner fade */
.search-full-destop .bg_search_box{
  background-color: rgba(0, 0, 0, 0.55) !important;
  transition: opacity .22s ease, visibility .22s ease !important;
}

/* Premium spacing + type (override old SCSS without editing it) */
.search-full-destop .search-eveland .drawer-search-top{
  padding: 22px 15px 10px !important;
}
.search-full-destop .search-eveland .drawer-search-top .drawer-search-title{
  font-size: 30px !important;
  letter-spacing: .2px;
  margin-bottom: 14px !important;
}
@media (max-width: 767px){
  .search-full-destop .search-eveland .drawer-search-top{
    padding: 18px 15px 8px !important;
  }
  .search-full-destop .search-eveland .drawer-search-top .drawer-search-title{
    font-size: 24px !important;
    margin-bottom: 10px !important;
  }
}

/* Form width: keep centered but less "wide + empty" */
.search-full-destop .search-eveland .wg-search-form{
  width: min(720px, 92vw) !important;
}

/* Input wrapper with embedded buttons */
.search-full-destop .search-eveland .wg-search-form .es-search-inputwrap{
  position: relative;
  width: 100%;
}
.search-full-destop .search-eveland .wg-search-form .search-input{
  height: 48px !important;
  line-height: 46px !important;
  padding-right: 96px !important; /* space for clear + submit */
  border-bottom: 2px solid rgba(0,0,0,0.12) !important;
}
.search-full-destop .search-eveland .wg-search-form .search-input:focus{
  border-bottom-color: rgba(0,0,0,0.28) !important;
}

/* submit button (keep existing icon) */
.search-full-destop .search-eveland .wg-search-form .es-search-submit{
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  height: 44px !important;
  width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(0,0,0,.62) !important;
}

/* clear button */
.search-full-destop .search-eveland .wg-search-form .es-search-clear{
  position: absolute !important;
  top: 50% !important;
  right: 46px !important;
  transform: translateY(-50%) !important;
  height: 32px !important;
  width: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: rgba(255,255,255,0.9) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(0,0,0,0.55) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .15s ease, transform .15s ease !important;
}
.search-full-destop .search-eveland .wg-search-form .es-search-clear.is-visible{
  opacity: 1 !important;
  pointer-events: auto !important;
}
.search-full-destop .search-eveland .wg-search-form .es-search-clear:hover{
  transform: translateY(-50%) scale(1.03) !important;
  border-color: rgba(0,0,0,0.2) !important;
}

/* Suggestions */
.search-full-destop .es-search-suggest{
  width: min(720px, 92vw);
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 767px){
  .search-full-destop .es-search-suggest{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.search-full-destop .es-search-suggest__title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(0,0,0,0.55);
  margin-bottom: 8px;
}

/* Recent title row + clear link */
.search-full-destop .es-suggest-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.search-full-destop .es-recent-clear{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.45);
  cursor: pointer;
}
.search-full-destop .es-recent-clear:hover{
  color: rgba(0,0,0,0.82);
  text-decoration: underline;
}
.search-full-destop .es-recent-clear:focus-visible{
  outline: 2px solid rgba(0,0,0,0.25);
  outline-offset: 2px;
  border-radius: 8px;
}

.search-full-destop .es-search-suggest__items{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-full-destop .es-suggest-chip{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  padding: 8px 10px;
  border-radius: 0;
  font-size: 14px;
  line-height: 1;
  color: rgba(0,0,0,0.82);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.search-full-destop .es-suggest-chip:hover{
  border-color: rgba(0,0,0,0.22);
  transform: translateY(-1px);
}
.search-full-destop .es-suggest-chip:active{
  transform: translateY(0px);
}
.search-full-destop .es-search-empty{
  font-size: 14px;
  color: rgba(0,0,0,0.45);
}

/* Results container: allow more room on tall screens */
.search-full-destop .search-eveland .result_prod{
  /* Center results so the grid has symmetrical gutters (no "left tight / right empty" feel) */
  width: min(840px, 94vw) !important;
  box-sizing: border-box !important;
  height: auto !important;
  max-height: calc(100vh - 260px) !important;
  margin: 16px auto 0 !important;
  padding: 0 10px !important;
}

/* View all */
.search-full-destop .es-search-viewall{
  padding: 12px 0 2px;
  text-align: center;
}
.search-full-destop .es-search-viewall-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  min-height: 42px;
  padding: 0 16px;

  /* EYESHELLS uses a straight-corner design language */
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.14);
  background: #fff;
  color: rgba(0,0,0,0.88);
  text-decoration: none;

  font-weight: 700;
  letter-spacing: 0;

  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.search-full-destop .es-search-viewall-btn:hover{
  background: rgba(0,0,0,0.92);
  color: #fff;
  border-color: rgba(0,0,0,0.92);
}

/* Empty state */
.search-full-destop .es-search-empty-state{
  padding: 18px 0;
  color: rgba(0,0,0,0.65);
  font-size: 14px;
}
.search-full-destop .es-search-empty-state strong{
  color: rgba(0,0,0,0.88);
}

.search-full-destop .es-search-empty-sub{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Skeleton */
.search-full-destop .es-skel .product_info{
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-full-destop .es-skel-img{
  width: 80px;
  height: 80px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.search-full-destop .es-skel-line{
  width: 100%;
  height: 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  margin-bottom: 8px;
  overflow: hidden;
  position: relative;
}
.search-full-destop .es-skel-line.small{ width: 55%; height: 10px; }

.search-full-destop .es-skel-img::after,
.search-full-destop .es-skel-line::after{
  content:"";
  position:absolute;
  top:0; left:-40%;
  width:40%;
  height:100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.65), rgba(255,255,255,0));
  animation: esShimmer 1.1s infinite;
}
@keyframes esShimmer{
  0%{ left:-40%; }
  100%{ left:120%; }
}

/* Brand focus ring (gold) */
.search-full-destop .es-suggest-chip:focus-visible,
.search-full-destop .es-search-viewall-btn:focus-visible,
.search-full-destop .search-eveland .wg-search-form .es-search-clear:focus-visible,
.search-full-destop .search-eveland .wg-search-form .es-search-submit:focus-visible{
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}

/* --- Search results: premium product cards (no layout changes elsewhere) --- */
.search-full-destop .es-search-grid{
  display: grid;
  /* Mobile: keep a stable 2-column layout (fits 320px+ screens) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* Extra-small phones: tighten spacing + type so 2 columns never feel cramped */
@media (max-width: 360px){
  .search-full-destop .es-search-grid{ gap: 8px; }
  .search-full-destop .es-scard__img{ padding: 12px; }
  .search-full-destop .es-scard__meta{ padding: 8px 10px 10px; min-height: 66px; }
  .search-full-destop .es-scard__title{ font-size: 13px; }
}
@media (min-width: 768px){
  .search-full-destop .es-search-grid{ gap: 14px; }
}

.search-full-destop .es-scard{
  display: flex;
  flex-direction: column;
  /* Prevent grid items from forcing overflow on narrow screens */
  min-width: 0;
  border: 1px solid rgba(0,0,0,0.08);
  /* EYESHELLS uses a straight-corner design language */
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.search-full-destop .es-scard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0.16);
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}
@media (hover:none){
  .search-full-destop .es-scard:hover{
    transform: none;
    box-shadow: none;
  }
}

.search-full-destop .es-scard__img{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #fff;
  /* More breathing room so wide frames never feel clipped */
  padding: 16px;
}
.search-full-destop .es-scard__img img{
  /* Use intrinsic sizing + max bounds to avoid any edge clipping */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


/* Skeleton inside premium cards should fill the image area */
.search-full-destop .es-scard.es-skel .es-scard__img{
  padding: 0;
  background: rgba(0,0,0,0.03);
}
.search-full-destop .es-scard.es-skel .es-skel-img{
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
}

.search-full-destop .es-scard__meta{
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 72px;
}
@media (min-width: 768px){
  .search-full-destop .es-scard__meta{ padding: 12px 14px 14px; }
}

.search-full-destop .es-scard__title{
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  color: rgba(0,0,0,0.88);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px){
  .search-full-destop .es-scard__title{ font-size: 15px; }
}

.search-full-destop .es-scard__price .price{
  font-weight: 800;
  color: rgba(0,0,0,0.88);
}
.search-full-destop .es-scard__price .price-old{
  margin-left: 8px;
  text-decoration: line-through;
  color: rgba(0,0,0,0.48);
  font-weight: 700;
}

/* Highlight match (uses brand gold) */
.search-full-destop .hightlight{
  background: rgba(212,175,55,0.22);
  border-radius: 4px;
  padding: 0 2px;
}

/* Mini chips for empty-state suggestions */
.search-full-destop .es-suggest-chip--mini{
  padding: 6px 9px;
  font-size: 13px;
}

/* Skeleton updated for card layout */
.search-full-destop .es-scard.es-skel{
  border-color: rgba(0,0,0,0.06);
  box-shadow: none;
}
.search-full-destop .es-scard.es-skel .es-scard__img .es-skel-img{
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
}


/* =========================================================
   ES Search overlay: remove "dark/grey flash" on open
   Root cause: .bg_search_box fades in immediately (dark),
   while title/form slide in with delayed transitions.
   Fix: show title/form instantly and keep overlay transition fast.
   ========================================================= */
.search-full-destop .search-eveland{
  transform: none !important;
  transition: opacity .12s ease-out !important;
}
.search-full-destop .search-eveland.active{
  /* Keep it a stable fullscreen panel so the backdrop never shows alone */
  height: 100vh !important;
  overflow: auto !important;
  transition: opacity .12s ease-out !important;
}
/* Remove delayed slide-in that causes the initial "grey" moment */
.search-full-destop .search-eveland .drawer-search-top,
.search-full-destop .search-eveland .wg-search-form{
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  transition-delay: 0s !important;
}
/* Backdrop: still dims, but faster + slightly lighter */
.search-full-destop .bg_search_box{
  background-color: rgba(0, 0, 0, 0.55) !important;
  transition: opacity .12s ease-out, visibility .12s ease-out !important;
}



/* =========================================================
   ES Search overlay — desktop layout polish
   - Fix missing left/right card borders caused by .row negative margins
   - Improve desktop density (3–4 columns) so cards aren't overly tall/vertical
   ========================================================= */

/* Bootstrap .row on the results container adds negative margins that can clip card borders
   because .result_prod has overflow-x:hidden. Remove the negative margins locally. */
.search-full-destop .result_prod .js_search_results.row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Search loading/result grid should always span full width inside Bootstrap `.row` */
.search-full-destop .result_prod .es-search-grid-wrap{
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.search-full-destop .result_prod .es-search-grid{
  width: 100% !important;
}

/* Make the grid more "desktop appropriate" (less vertical, more columns) */
@media (min-width: 1024px){
  .search-full-destop .es-search-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}
@media (min-width: 1280px){
  .search-full-destop .es-search-grid{
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

/* Give a little inner gutter so outer card borders never sit on the clipping edge */
.search-full-destop .result_prod .es-search-grid{
  padding: 1px 2px; /* tiny, but enough to keep borders visible */
  box-sizing: border-box;
}

/* Allow a wider results area on large screens so 3–4 columns feel natural */
@media (min-width: 1024px){
  .search-full-destop .search-eveland .result_prod{
    width: min(1200px, 94vw) !important;
  }
}

/* =========================================================
   FIX: Mobile Search Overlay – reduce bottom white space + bigger product images
   - Shrinks extra bottom padding from the base theme
   - Tightens grid/card spacing for 2-column mobile layout
   - Lets product images fill the square area (no tiny thumbnails)
   ========================================================= */

/* Mobile: keep images centered and never cropped.
   (iOS Safari can crop with width/height:100% + object-fit in some cases.) */
.search-full-destop .es-scard__img img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Mobile tuning */
@media (max-width: 767px){
  /* Base theme adds 50px bottom padding on active search overlay; shrink it */
  .search-full-destop .search-eveland.active{
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  /* Tighten the results panel so the grid sits higher and uses more of the screen */
  .search-full-destop .search-eveland .result_prod{
    margin-top: 12px !important;
    padding: 0 8px !important;
    max-height: calc(100vh - 235px) !important;
  }

  /* Denser 2-col grid */
  .search-full-destop .es-search-grid{ gap: 8px !important; }

  /* Bigger product image inside each card */
  .search-full-destop .es-scard__img{ padding: 10px !important; }

  /* Compress meta area a bit so image gets more prominence */
  .search-full-destop .es-scard__meta{
    padding: 8px 10px 10px !important;
    min-height: 60px !important;
    gap: 5px !important;
  }
}

/* Extra-small phones */
@media (max-width: 360px){
  .search-full-destop .search-eveland .result_prod{ padding: 0 6px !important; }
  .search-full-destop .es-search-grid{ gap: 7px !important; }
  .search-full-destop .es-scard__img{ padding: 8px !important; }
  .search-full-destop .es-scard__meta{ padding: 8px 9px 9px !important; min-height: 58px !important; }
  .search-full-destop .es-scard__title{ font-size: 13px !important; }
}

/* === Slideshow V1: Fix desktop arrow-circle jump on hover (keep translateY centering) === */
.section-slideshow-v1 button.prev-slide:hover,
.section-slideshow-v1 button.next-slide:hover,
.section-slideshow-v1 .prev-slide:hover,
.section-slideshow-v1 .next-slide:hover{
  transform: translateY(-50%) scale(1.06) !important;
}


/* --- FIX: Slideshow V1 desktop arrow-circle "jump" on hover
   Cause: a hover transform (e.g., scale) overrides translateY(-50%) centering.
   Fix: always keep translateY(-50%) in transform stack.
------------------------------------------------------------------ */
.section-slideshow-v1 .prev-slide,
.section-slideshow-v1 .next-slide{
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.section-slideshow-v1 .prev-slide:hover,
.section-slideshow-v1 .next-slide:hover{
  transform: translateY(-50%) scale(1.06) !important;
}

/* =============================
   Footer: trust badge (minimal, brand-like)
   - Replaces 3rd-party seals (e.g., Norton) with a clean "Secure checkout"
   ============================= */
.es-footer-trust{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  opacity: .65;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  transition: opacity .18s ease;
}
.es-footer-trust:hover{
  opacity: .85;
}
.es-footer-trust__icon svg{
  width: 14px;
  height: 14px;
  display: block;
}
.es-footer-trust__text{ display: inline-block; }
@media (max-width: 767.98px){
  .es-footer-trust{
    font-size: 11px;
    padding: 6px 10px;
  }
  .es-footer-trust__icon svg{
    width: 13px;
    height: 13px;
  }
}


/* ES safety: footer always visible */
#shopify-section-footer{display:block !important;visibility:visible !important;}

/* === ES UX: QuickView overlay color should not shift (avoid double-backdrop) === */
#quick-view.active{background: transparent !important;}
#quick-view .overlay-quickview{
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 220ms ease-in-out;
  background: rgba(29, 29, 31, 0.55) !important;
  pointer-events: none;
}
#quick-view.active .overlay-quickview{opacity: 1; pointer-events: auto;}

/* =========================================================
   ES FIX (v33): Quickview overlay color "light -> dark" flash
   Cause: quickview container itself has a background + transitions "all"
   while overlay fades in, so users see a double-stage dimming.
   Fix: remove container background + limit transitions, and show overlay
        instantly at final darkness (no fade).
   ========================================================= */
#quick-view,
#quick-view.br-product-popup{
  background: transparent !important;
  transition: opacity .18s ease-in-out, transform .18s ease-in-out !important;
}
#quick-view.active,
#quick-view.br-product-popup.active{
  background: transparent !important;
}

/* Keep ONLY ONE dim layer */
#quick-view .overlay-quickview{
  background: rgba(29,31,35,0.55) !important;
  transition: none !important;
}
#quick-view.active .overlay-quickview{
  opacity: 1 !important;
}
#quick-view:not(.active) .overlay-quickview{
  opacity: 0 !important;
}

/* =========================================================
   ES QUICKVIEW OVERLAY SMOOTHNESS
   ---------------------------------------------------------
   Fixes:
   1) Remove parent backdrop on .tshopify-popup.active (prevents double-dark overlay)
   2) Keep .overlay-quickview full-size always, and animate ONLY opacity
   3) Ensure overlay color is stable and click-to-close still works
   ========================================================= */

/* Remove the extra backdrop applied by the popup container itself */
.tshopify-popup.active{
  background: transparent !important;
}

/* Make overlay always cover the viewport; animate opacity only */
.tshopify-popup .overlay-quickview{
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  pointer-events: none;
  background: rgba(29, 29, 31, 0.62) !important;
  transition: opacity 180ms ease !important;
}
.tshopify-popup.active .overlay-quickview{
  opacity: 1;
  pointer-events: auto;
}

/* Prevent quickview modal content from animating background or causing tint changes */
.tshopify-popup .content{
  background: #fff !important;
}

/* Optional: slightly reduce popup animation on low-end devices */
@media (prefers-reduced-motion: reduce){
  .tshopify-popup,
  .tshopify-popup .content,
  .tshopify-popup .overlay-quickview{
    transition: none !important;
  }
}

/* =========================================================
   ES PDP Tabs Desktop Polish (Details / Shipping / Reviews)
   Fix: underline too close to text + tab bar feels short.
   Approach: give tabs a taller hit area and reposition the
   underline (without changing content or functionality).
   Scope: PDP only (desktop).
   ========================================================= */
@media (min-width: 990px){
  /* Tab bar container: clean baseline */
  .tab-pd-details .bd-tab{
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,.12);
  }
  .tab-pd-details .bd-tab .container,
  .tab-pd-details .bd-tab .container-v2{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Make the tabs feel less cramped */
  .tab-pd-details .tab_prod{
    display: flex !important;
    align-items: center;
    gap: 18px;
    margin: 0 !important;
    padding: 0 0 2px !important;

    /* remove bootstrap nav-tabs underline so we control the baseline */
    border-bottom: none !important;
  }

  .tab-pd-details .tab_prod > li{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Taller clickable area + nicer vertical rhythm */
  .tab-pd-details .tab_prod > li > a{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    height: 46px;          /* overall tab height */
    padding: 0 2px;        /* keep labels visually aligned */

    line-height: 1.05 !important;
    font-weight: 600 !important;
    text-transform: none !important;

    text-decoration: none !important;
    border: 0 !important;
  }

  /* Underline: move it away from the text so it doesn't "stick" */
  .tab-pd-details .tab_prod > li > a.underline_scale:after{
    bottom: 8px !important;              /* <- line position */
    border-bottom-width: 2px !important; /* keep crisp */
    transform: scaleX(0) !important;
    transform-origin: left !important;
  }
  .tab-pd-details .tab_prod > li > a.underline_scale:hover:after,
  .tab-pd-details .tab_prod > li > a.underline_scale.active:after{
    transform: scaleX(1) !important;
  }
}

/* =========================================================
   ES: Eyebuydirect-style pagination (restored)
   - Desktop centered
   - Active + hover uses Eyeshells gold #D4AF37
   - Ellipsis swaps to arrow on hover
   ========================================================= */
:root{ --es-gold: #D4AF37; }

/* Center the whole pagination block */
body .pagi-nav{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}
body .pagi-nav.text-right{
  text-align: center !important;
}

/* Base layout */
body .pagi-nav .es-pagination{ display: block !important; }
body .pagi-nav .es-pagination__list{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
body .pagi-nav .es-pagination__item{ flex: 0 0 auto !important; }

/* Buttons */
body .pagi-nav .es-pagination__link{
  width: 34px !important;
  height: 34px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  background: #F2F2F2 !important;
  border: 1px solid #F2F2F2 !important;
  color: #111 !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

body .pagi-nav .es-pagination__link--current,
body .pagi-nav .es-pagination__link[aria-current="page"]{
  background: var(--es-gold) !important;
  border-color: var(--es-gold) !important;
  color: #111 !important;
}

@media (hover: hover){
  body .pagi-nav .es-pagination__link:hover,
  body .pagi-nav .es-pagination__link:focus-visible{
    background: var(--es-gold) !important;
    border-color: var(--es-gold) !important;
    color: #111 !important;
  }
}

/* Ellipsis jump: dots -> arrow */
body .pagi-nav .es-pagination__link--gap{
  position: relative !important;
  overflow: hidden !important;
}
body .pagi-nav .es-pagination__gap-dots,
body .pagi-nav .es-pagination__gap-arrow{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}
body .pagi-nav .es-pagination__gap-dots{ opacity: 1 !important; }
body .pagi-nav .es-pagination__gap-arrow{ opacity: 0 !important; font-size: 20px !important; }

@media (hover: hover){
  body .pagi-nav .es-pagination__link--gap:hover .es-pagination__gap-dots{ opacity: 0 !important; }
  body .pagi-nav .es-pagination__link--gap:hover .es-pagination__gap-arrow{ opacity: 1 !important; }
}

/* =========================================================
   ES COLLECTION: Desktop "Showing X–Y of Z results" next to Filters
   ========================================================= */
.es-desktop-results-count{
  display: none;
}

@media (min-width: 1200px){
  .es-desktop-results-count{
    display: inline-block;
    margin-left: 14px;
    font-size: 13px;
    line-height: 1;
    color: rgba(0,0,0,0.68);
    white-space: nowrap;
  }

  /* Make the Filters row inline so the count sits right after it */
  .shop_control .filter_sortby.title_filter,
  .shop_control .filter_sortby{
    display: flex;
    align-items: center;
    gap: 14px;
  }
}

/* =========================================================
   ES FINAL OVERRIDE (V11) — Eyebuydirect-style pagination
   - Active + hover: EYESHELLS gold #D4AF37
   - Square buttons, larger tap target (desktop/mobile)
   - Ellipsis hover turns into arrow (stays clickable)
   - Always centered on desktop
   ========================================================= */

:root{
  --es-pagination-active: #D4AF37;
}

/* Center the whole pagination bar */
body .pagi-nav{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

body .pagi-nav.text-right{
  text-align: center !important;
}

/* Pagination list */
body .pagi-nav .es-pagination__list{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Button base */
body .pagi-nav .es-pagination__link{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 0 !important;
  border: none !important;
  background: #f1f1f1 !important;
  color: #111 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

/* Active */
body .pagi-nav .es-pagination__link--current,
body .pagi-nav .es-pagination__link[aria-current="page"]{
  background: var(--es-pagination-active) !important;
  color: #fff !important;
}

/* Hover */
@media (hover: hover){
  body .pagi-nav .es-pagination__link:hover{
    background: var(--es-pagination-active) !important;
    color: #fff !important;
  }
}

/* Ellipsis: dots + arrow overlay (never wraps) */
body .pagi-nav .es-pagination__link--gap{
  position: relative !important;
  overflow: hidden !important;
}

body .pagi-nav .es-pagination__gap-dots,
body .pagi-nav .es-pagination__gap-arrow{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

body .pagi-nav .es-pagination__gap-dots{ opacity: 1 !important; }
body .pagi-nav .es-pagination__gap-arrow{ opacity: 0 !important; font-size: 20px !important; }

@media (hover: hover){
  body .pagi-nav .es-pagination__link--gap:hover .es-pagination__gap-dots{ opacity: 0 !important; }
  body .pagi-nav .es-pagination__link--gap:hover .es-pagination__gap-arrow{ opacity: 1 !important; }
}

/* Compact on very small screens */
@media (max-width: 360px){
  body .pagi-nav .es-pagination__list{ gap: 3px !important; }
  body .pagi-nav .es-pagination__link{ width: 40px !important; height: 40px !important; min-width: 40px !important; }
}

/* =========================================================
   ES PAGINATION MICROFIX (V12)
   Fixes:
   1) Current page is a <span> and was inheriting .pagi-nav span{margin-right:4px}
      causing a bigger gap after the selected page.
   2) Ellipsis dots looked slightly higher due to inherited span styles.
   ========================================================= */

/* Prevent legacy .pagi-nav span styles from affecting our new pagination */
body .pagi-nav .es-pagination__item,
body .pagi-nav .es-pagination__link,
body .pagi-nav .es-pagination__gap-dots,
body .pagi-nav .es-pagination__gap-arrow{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Make sure fixed-size buttons stay perfectly aligned */
body .pagi-nav .es-pagination__link{
  box-sizing: border-box !important;
  line-height: 1 !important;
}

/* Visually nudge dots to the optical center */
body .pagi-nav .es-pagination__link--gap .es-pagination__gap-dots{
  transform: translate(-50%, -50%) translateY(1px) !important;
}

/* =========================================================
   ES PAGINATION MICROFIX v13
   - Keep the ellipsis (gap) button perfectly level with the other buttons
   - Avoid sub-pixel jumps when swapping dots <-> arrows
   ========================================================= */
body .pagi-nav .es-pagination__list{
  align-items: center !important;
}

body .pagi-nav .es-pagination__item{
  display: flex !important;
  align-items: center !important;
}

body .pagi-nav .es-pagination__link{
  align-self: center !important;
}

/* Use inset instead of translate-centering (reduces rounding differences) */
body .pagi-nav .es-pagination__gap-dots,
body .pagi-nav .es-pagination__gap-arrow{
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
}

/* Remove the optical nudge in v12 (can cause the gap button to feel "higher") */
body .pagi-nav .es-pagination__link--gap .es-pagination__gap-dots{
  transform: none !important;
}

/* =========================================================
   ES QUICKVIEW DESKTOP FIX (V15)
   Base: eyeshells_v15_quickview_pricefix.zip
   Goal:
   - Keep desktop Quickview popup width/height stable (no per-product resizing)
   - Left image area stays fixed (no scrolling)
   - ONLY ONE scrollbar on the right column, at the outer right edge
   - Add to cart scrolls together with the right content (original behavior)
   ========================================================= */

@media (min-width: 992px){
  /* Prevent page layout shifting when opening the modal (Chrome/Edge) */
  html{ scrollbar-gutter: stable; }

  /* Lock page scrolling while Quickview is open.
     We hide the root scrollbars but compensate with padding-right so the modal never shifts. */
  html.es-qv-open{
    overflow: hidden;
    overscroll-behavior: none;
    padding-right: var(--es-qv-sbw, 0px);
  }

  body.es-qv-open{
    overscroll-behavior: none;
    padding-right: var(--es-qv-sbw, 0px);
  }

  /* Fixed-size popup container */
  .quickview-product.tshopify-popup.active .content.product-quickview{
    width: 900px !important;
    max-width: calc(100vw - 80px) !important;
    height: 650px !important;
    max-height: calc(100vh - 80px) !important;
    /* Keep a comfortable left/top/bottom padding, but remove right padding
       so the ONLY scrollbar on the right column can sit at the popup edge */
    /* keep left padding, remove right padding so the right scrollbar hugs the edge */
    padding: 26px 0 26px 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* never show an outer scrollbar */
  }

  /* Two-column layout with a stable ratio: 54% / 42% + 4% gap */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row{
    display: grid !important;
    grid-template-columns: 54fr 42fr !important;
    column-gap: 4% !important;
    height: 100% !important;
    margin: 0 !important; /* remove bootstrap negative margins */
    align-items: stretch !important;
  }

  .quickview-product.tshopify-popup.active .content.product-quickview > .row > [class*="col-"]{
    padding: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
  }

  /* Left media column */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-7{
    grid-column: 1 !important;
    overflow: hidden !important;
  }

  /* Right info column with the ONLY scrollbar */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5{
    grid-column: 2 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    /* Cleaner “big-site” scrollbar look (still native-feeling) */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.28) transparent;
  }

  /* WebKit scrollbar styling (Chrome/Edge/Safari) */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar{
    width: 12px;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-track{
    background: transparent;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-thumb{
    background-color: rgba(0,0,0,.28);
    border-radius: 999px;
    border: 4px solid transparent;
    background-clip: content-box;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-button{
    width: 0;
    height: 0;
    display: none;
  }


  /* Prevent ANY nested vertical scroll areas so QuickView never shows double scrollbars
     (this can happen when a long swatch grid or option list becomes scrollable). */
  .quickview-product.tshopify-popup.active .popup-quickview,
  .quickview-product.tshopify-popup.active .popup-quickview .product-info-main,
  .quickview-product.tshopify-popup.active .popup-quickview .product-info-main .product-item,
  .quickview-product.tshopify-popup.active .popup-quickview .product-info-main .detail-info,
  .quickview-product.tshopify-popup.active .popup-quickview .product-info-main .product-details,
  .quickview-product.tshopify-popup.active .popup-quickview .product-info-main .maxus-productdetail__options,
  .quickview-product.tshopify-popup.active .popup-quickview .product-info-main .swatch,
  .quickview-product.tshopify-popup.active .popup-quickview .product-info-main .es-swatch-strip{
    overflow-y: visible !important;
  }

  /* IMPORTANT: the theme originally limits .detail-info with max-height + internal scroll.
     When we move scrolling to the right column, max-height can clip content (e.g. 3-row swatches)
     and make "ADD TO CART" unreachable. Remove the height cap entirely so the col-5 scrollbar
     always reaches the true bottom of content. */
  .quickview-product.tshopify-popup.active .popup-quickview .detail-info{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  /* Extra breathing room so the last block (ADD TO CART / wishlist) can always scroll into view */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5{
    padding-bottom: 22px !important;
    scrollbar-gutter: stable;
}

  /* Ensure ONLY the right column can scroll vertically */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5{
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5 *{
    overflow-y: visible !important;
  }

  /* WebKit scrollbar styling (Chrome/Edge/Safari) */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar{
    width: 10px;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.22);
    border-radius: 999px;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-track{
    background: transparent;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-button{
    width: 0;
    height: 0;
    display: none;
  }

  /* Keep content away from the scrollbar but don't push it inward */
  .quickview-product.tshopify-popup.active .content.product-quickview .popup-quickview{
    padding-right: 0 !important;
  }

  .quickview-product.tshopify-popup.active .content.product-quickview .popup-quickview .product-item{
    padding-right: 16px !important; /* keep text away from the scrollbar */
    box-sizing: border-box !important;
  }

  /* Left side: make the main image area stable and fill space */
  .quickview-product.tshopify-popup.active .content.product-quickview .product-media{
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .quickview-product.tshopify-popup.active .content.product-quickview .product-media .featured-image{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .quickview-product.tshopify-popup.active .content.product-quickview .product-media .featured-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .quickview-product.tshopify-popup.active .content.product-quickview .product-media .more-views{
    flex: 0 0 auto !important;
    margin-top: 14px !important;
  }

  /* Slightly tighten the top gap on the right so it doesn't feel empty */
  .quickview-product.tshopify-popup.active .content.product-quickview .popup-quickview .product-name{
    margin-top: 0 !important;
  }
}

/* =========================================================
   ES QUICKVIEW: remove open "shake" caused by scrollbar appearing late
   Root cause: the right column could be overflow-y:auto in some states,
   so the scrollbar appears only after swatches/images render, shifting
   the whole right area from right->left.
   Fix: force the right column to ALWAYS reserve the scrollbar.
   ========================================================= */
@media (min-width: 992px){
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5{
    overflow-y: auto !important; /* always reserve scrollbar -> no horizontal jump */
    scrollbar-gutter: stable;
  }
}

/* =========================================================
   ES QUICKVIEW: remove open "shake" caused by scrollbar appearing late
   Root cause: the right column could switch overflow-y behavior while
   quickview content is injected (especially when many swatches load).
   That makes the scrollbar appear AFTER the modal is visible, nudging
   everything from right -> left.
   Fix: force the right column to ALWAYS reserve the scrollbar.
   ========================================================= */
@media (min-width: 992px){
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5{
    overflow-y: auto !important;           /* always reserve scrollbar */
    scrollbar-gutter: stable;     /* keep width stable (Chrome) */
  }
}

/* =========================================================
   ES QUICKVIEW: eliminate open "shake" from popup width/height transitions
   Theme default animates ALL properties from width/height:0 -> auto,
   which can create a visible jitter on open.
   Fix: keep the popup overlay full-screen at all times and only fade opacity.
   (Scoped to quickview + loading popups only.)
   ========================================================= */
.quickview-product.tshopify-popup,
.loading.tshopify-popup{
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  -webkit-transition: opacity 160ms ease-in-out, visibility 0s linear 0s !important;
  -moz-transition: opacity 160ms ease-in-out, visibility 0s linear 0s !important;
  -ms-transition: opacity 160ms ease-in-out, visibility 0s linear 0s !important;
  -o-transition: opacity 160ms ease-in-out, visibility 0s linear 0s !important;
  transition: opacity 160ms ease-in-out, visibility 0s linear 0s !important;
}

.quickview-product.tshopify-popup .content,
.loading.tshopify-popup .content{
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

/* =========================================================
   ES QUICKVIEW: eliminate open "shake" from popup width/height transitions
   Theme default animates ALL properties from width/height:0 -> auto,
   which can create a visible jitter on open.
   Fix: keep the popup overlay full-screen at all times and only fade opacity.
   (Scoped to quickview + loading popups only.)
   ========================================================= */
@media (min-width: 992px){
  .quickview-product.tshopify-popup,
  .loading.tshopify-popup{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transition: opacity 160ms ease-in-out, visibility 0s linear 0s !important;
  }
  .quickview-product.tshopify-popup .content,
  .loading.tshopify-popup .content{
    transition: none !important;
  }
}

/* =========================================================
   ES QUICKVIEW FINAL OVERRIDES
   - Close (X) button back outside, always visible
   - Keep ONLY ONE consistent scrollbar on the right column
   - Prevent swatch-click "shift" by keeping scrollbar reserved
   ========================================================= */

@media (min-width: 992px) {
  /* 1) Close (X) always visible, outside the popup */
  .quickview-product.tshopify-popup .content.product-quickview {
    overflow: visible !important; /* allow close button to sit outside */
  }

  .quickview-product.tshopify-popup .close-window {
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
	    background: rgba(255, 255, 255, 0.96) !important;
	    border: 1px solid rgba(0, 0, 0, 0.12) !important;
	    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }

  .quickview-product.tshopify-popup .close-window svg {
    width: 18px !important;
    height: 18px !important;
	    fill: rgba(17, 17, 17, 0.9) !important;
  }

  .quickview-product.tshopify-popup .close-window:hover {
	    background: #d4af37 !important;
	    border-color: rgba(0, 0, 0, 0.0) !important;
  }

	  .quickview-product.tshopify-popup .close-window:hover svg {
	    fill: #ffffff !important;
	  }

  /* 2) Ensure ONLY the right column scrolls (no inner/extra scrollbars)
        NOTE: keep popup overflow visible so the close button can sit outside. */
  .quickview-product.tshopify-popup.active .content.product-quickview {
    overflow: visible !important;
  }

  /* The right info column is the only scroll container */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5 {
    overflow-y: scroll !important; /* always reserve scrollbar width => no shift */
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
  }

  /* Left image column never scrolls */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-7 {
    overflow: hidden !important;
  }
}

/* =========================================================
   ES QUICKVIEW: Scrollbar polish (big-site style)
   - Option #2 behavior: show scrollbar only when needed, but keep layout stable
   - Cleaner, thinner scrollbar, flush to the right edge
   Notes:
   - We keep `scrollbar-gutter: stable` so when the bar appears, layout doesn't shift.
   - We DO NOT force the bar to always show (no `scroll`), per option #2.
   ========================================================= */

@media (min-width: 992px) {
  /* Right column is the only scroll container */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5 {
    /* Keep scrollbar width RESERVED at all times.
       Otherwise, when many swatches exist and user clicks a color further down,
       the scrollbar appears and the whole modal shifts left/right. */
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
  }

  /* Make sure content doesn't collide with the scrollbar */
  .quickview-product.tshopify-popup.active .content.product-quickview .popup-quickview .product-item {
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* WebKit (Chrome/Edge/Safari) */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar {
    width: 8px;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-track {
    background: transparent;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.34);
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
  }
}

/* FINAL SAFETY OVERRIDE: never allow the right column scrollbar to toggle */
@media (min-width: 992px){
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5{
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
  }
}


/* =========================================================

/* =========================================================

/* =========================================================
   ES QUICKVIEW: Scrollbar ultra-minimal (premium)
   - Super slim, low-contrast, edge-flush
   - Still stable layout (scrollbar-gutter)
   ========================================================= */
@media (min-width: 992px) {
  /* Right column: only scroll container */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5 {
    overflow-y: scroll !important; /* reserve scrollbar => no modal drift */
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
  }

  /* Minimal padding so content never touches the thumb */
  .quickview-product.tshopify-popup.active .content.product-quickview .popup-quickview .product-item {
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* WebKit (Chrome/Edge/Safari) */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar {
    width: 4px;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-track {
    background: transparent;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.30);
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
  }
}

/* ===== ES Quickview Premium Close Button + Thumbnail Side Click Zones ===== */
/* Premium close button (always visible, outside top-right) */
.quickview-product.tshopify-popup.active .content.product-quickview .close-window{
  width: 40px;
  height: 40px;
  right: -18px;
  top: -18px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.78) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.quickview-product.tshopify-popup.active .content.product-quickview .close-window svg{
  fill: currentColor !important;
  opacity: 1;
}
.quickview-product.tshopify-popup.active .content.product-quickview .close-window:hover{
  transform: translateZ(0) scale(1.06);
  background: rgba(255,255,255,0.96);
  box-shadow:
    0 0 0 2px rgba(199,165,74,0.55),
    0 16px 42px rgba(0,0,0,0.28);
}

/* Thumbnail side click zones (left / right) */
.quickview-product.tshopify-popup.active .content.product-quickview .more-views{
  position: relative;
}
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone{
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 46px;
  border: 0;
  padding: 0;
  background: transparent;
  z-index: 6;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.quickview-product.tshopify-popup.active .content.product-quickview .more-views:hover .es-qv-thumb-zone{
  opacity: 1;
  pointer-events: auto;
}
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone-prev{ left: -26px; }
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone-next{ right: -26px; }

.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  opacity: 0;
  transition: opacity .18s ease;
}
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone-prev::before{
  background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0) 100%);
}
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone-next::before{
  background: linear-gradient(270deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0) 100%);
}
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone:hover::before{
  opacity: 1;
}

.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.70);
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.quickview-product.tshopify-popup.active .content.product-quickview .more-views:hover .es-qv-thumb-zone-icon{ opacity: 1; }
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone:hover .es-qv-thumb-zone-icon{
  background: rgba(255,255,255,0.96);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 0 2px rgba(199,165,74,0.35), 0 14px 32px rgba(0,0,0,0.18);
}

/* Make QV right scrollbar feel cleaner (still native) */
.quickview-product.tshopify-popup.active .content.product-quickview .col-5{
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.38) transparent;
}
.quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar{ width: 10px; }
.quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-track{ background: transparent; }
.quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.30);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.quickview-product.tshopify-popup.active .content.product-quickview .col-5:hover::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.40);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* ===== ES FIX (v3): Quickview thumbnail arrows click now scrolls reliably ===== */
/* Root cause: earlier CSS forced the thumb rail into a flex layout even when Owl isn't initialized,
   causing thumbnails to shrink-to-fit (no overflow), so scrollBy/scrollLeft appeared to do nothing.
   This patch:
   - keeps Owl layout intact when .owl-loaded exists
   - makes the rail a true horizontal scroll container when Owl is NOT loaded
*/

/* Make click-zones sit a bit OUTSIDE the strip + ensure they are always on top */
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone{
  z-index: 20 !important;
  width: 54px !important;
}
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone-prev{ left: -44px !important; }
.quickview-product.tshopify-popup.active .content.product-quickview .more-views .es-qv-thumb-zone-next{ right: -44px !important; }

/* When Owl is NOT initialized: use native horizontal scroll so JS scrollBy works */
.quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track:not(.owl-loaded),
.quickview-product .product-media.thumbnail-left .more-views .es-thumb-track{
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: 10px;
  padding: 2px 6px;
  scrollbar-width: none;
}
.quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track:not(.owl-loaded)::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track:not(.owl-loaded) .item,
.quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track:not(.owl-loaded) .item a{
  flex: 0 0 auto !important;
}

/* ALSO lock flex sizing for the normalized class-only track (prevents thumbs shrinking to fit, which breaks scrolling) */
.quickview-product .product-media.thumbnail-left .more-views .es-thumb-track .item,
.quickview-product .product-media.thumbnail-left .more-views .es-thumb-track .item a{
  flex: 0 0 auto !important;
}

/* When Owl IS initialized: DO NOT force flex on the carousel wrapper (keeps next/prev working) */
.quickview-product .product-media.thumbnail-left .more-views .owl-carousel.es-thumb-track.owl-loaded{
  display: block !important;
  overflow: visible !important;
}


/* Native scroll thumbs: hide scrollbar */
.quickview-product .product-media.thumbnail-left .more-views .es-thumb-track::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* =========================================================
   ES QUICKVIEW: Prevent "extra X" flash on close
   - When .active is removed, the base theme close-window rules momentarily apply
     during the transition and can look like a second X.
   - Hide the close button immediately when popup is not active.
   ========================================================= */
@media (min-width: 992px){
  .quickview-product.tshopify-popup:not(.active) .close-window{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }
}



/* === QuickView scrollbar: remove top/bottom arrow buttons (Windows Chrome/Edge) === */
.quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-button,
.quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5 *::-webkit-scrollbar-button{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Extra specificity for single-button scrollbars */
.quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-button:single-button,
.quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5 *::-webkit-scrollbar-button:single-button{
  display: none !important;
}


/* =========================================================
   ES QUICKVIEW: Apple-grade scrollbar (subtle / premium)
   - ultra slim, low contrast, shows stronger on hover
   - no arrows
   - keeps layout stable (scrollbar-gutter)
   ========================================================= */

@media (min-width: 992px){
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5{
    scrollbar-gutter: stable !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.14) transparent;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5:hover{
    scrollbar-color: rgba(0,0,0,0.32) transparent;
  }

  /* WebKit (Chrome / Edge / Safari) */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar{
    width: 6px;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-track{
    background: transparent;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-thumb{
    background-color: rgba(0,0,0,0.14);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color .18s ease;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5:hover::-webkit-scrollbar-thumb{
    background-color: rgba(0,0,0,0.30);
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-thumb:active{
    background-color: rgba(0,0,0,0.40);
  }
}

/* =========================================================
   ES QUICKVIEW ULTRA INVISIBLE SCROLLBAR (V9)
   Goal:
   - Default: scrollbar completely invisible (no track/thumb)
   - Show only on hover OR while scrolling (Apple-like)
   - Keep layout width stable (no left/right drift)
   ========================================================= */
@media (min-width: 992px){
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5{
    overflow-y: scroll !important; /* always reserve gutter -> no drift */
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* invisible by default */
  }

  /* Firefox: show on hover / scroll */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5:hover,
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5.es-qv-scrollbar-show{
    scrollbar-color: rgba(0,0,0,.28) transparent;
  }

  /* WebKit (Chrome/Edge/Safari) */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar{
    width: 10px;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-track{
    background: transparent;
  }

  /* Default: fully invisible thumb */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-thumb{
    background-color: transparent;
    border-radius: 999px;
    border: 4px solid transparent;
    background-clip: content-box;
  }

  /* Hover / scrolling: reveal thumb */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5:hover::-webkit-scrollbar-thumb,
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5.es-qv-scrollbar-show::-webkit-scrollbar-thumb{
    background-color: rgba(0,0,0,.22);
  }

  /* Active drag feel (slightly stronger) */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5:hover::-webkit-scrollbar-thumb:active,
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5.es-qv-scrollbar-show::-webkit-scrollbar-thumb:active{
    background-color: rgba(0,0,0,.32);
  }

  /* No arrows */
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-button{
    width: 0;
    height: 0;
    display: none;
  }
}

/* =========================================================
   ES QUICKVIEW PATCH (V13)
   Fix: When right column content is short, Windows/WebKit can still render
   scrollbar up/down buttons even though thumb is invisible.
   Force-hide ALL scrollbar buttons for the quickview right panel.
   ========================================================= */
@media (min-width: 992px){
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:single-button,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:vertical:start,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:vertical:end,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:increment,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:decrement{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* Some Chromium builds require removing the track-piece for buttons */
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-track-piece{
    background: transparent !important;
  }
}

/* =========================================================
   ES QUICKVIEW PATCH (V13)
   Fix: When right column content is short, some Windows/WebKit setups can
   still render scrollbar up/down buttons even though the thumb is invisible.
   Force-hide ALL scrollbar buttons for the quickview right panel.
   ========================================================= */
@media (min-width: 992px){
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:single-button,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:vertical:start,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:vertical:end,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:increment,
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-button:decrement{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* Safety: no corner artifacts */
  .quickview-product.tshopify-popup.active .content.product-quickview .col-5::-webkit-scrollbar-corner{
    background: transparent !important;
  }
}

/* =========================================================
   ES QUICKVIEW PATCH (V14)
   Issue:
   - Forcing overflow-y:scroll on the quickview right column can render only
     the up/down scrollbar arrow buttons on some Windows/WebKit setups when
     the content is short (no real overflow). This looks broken.
   Fix:
   - Use overflow-y:auto while keeping layout stable using scrollbar-gutter:stable.
   ========================================================= */
@media (min-width: 992px){
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5{
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }
  .quickview-product.tshopify-popup.active .content.product-quickview > .row > .col-5::-webkit-scrollbar-button{
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
}

/* =========================================================
   ES CART EMPTY STATE (Premium / Apple-like)
   - Elegant empty cart card + CTA buttons
   - Optional recommended products grid (collection selectable)
   ========================================================= */
.page-cart .es-empty-cart{
  padding: 44px 0 72px;
}
.page-cart .es-empty-cart__inner{
  max-width: 980px;
  margin: 0 auto;
}
.page-cart .es-empty-cart__card{
  position: relative;
  border-radius: 22px;
  padding: 44px 28px 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  border: 1px solid rgba(17,17,17,.06);
  text-align: center;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.page-cart .es-empty-cart__icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
  background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.06));
  border: 1px solid rgba(212,175,55,.35);
  margin: 0 auto 14px;
}
.page-cart .es-empty-cart__icon svg{
  width: 40px !important;
  height: 40px !important;
  display: block;
}
.page-cart .es-empty-cart__icon svg path{
  fill: currentColor !important;
}
.page-cart .es-empty-cart__title{
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: .2px;
  margin: 0 0 8px;
  color: #111;
  text-transform: none;
}
.page-cart .es-empty-cart__sub{
  max-width: 620px;
  margin: 0 auto 18px;
  color: rgba(17,17,17,.72);
  font-size: 14px;
  line-height: 1.6;
}

.page-cart .es-empty-cart__actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.page-cart .es-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  user-select: none;
}
.page-cart .es-btn:active{ transform: translateY(1px); }
.page-cart .es-btn--primary{
  background: #D4AF37;
  color: #111;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(212,175,55,.25);
}
.page-cart .es-btn--primary:hover{
  box-shadow: 0 14px 32px rgba(212,175,55,.32);
}
.page-cart .es-btn--ghost{
  background: rgba(17,17,17,.04);
  color: #111;
  border: 1px solid rgba(17,17,17,.08);
}
.page-cart .es-btn--ghost:hover{
  background: rgba(17,17,17,.06);
}

.page-cart .es-empty-cart__meta{
  margin: 6px 0 16px;
  color: rgba(17,17,17,.62);
  font-size: 13px;
}
.page-cart .es-empty-cart__meta a{
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-cart .es-empty-cart__perks{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(17,17,17,.08);
}
.page-cart .es-empty-cart__perk{
  font-size: 12px;
  color: rgba(17,17,17,.70);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(17,17,17,.06);
}

.page-cart .es-empty-cart__reco{
  margin-top: 28px;
}
.page-cart .es-empty-cart__reco-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 6px 12px;
}
.page-cart .es-empty-cart__reco-title{
  font-size: 14px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(17,17,17,.86);
  margin: 0;
}
.page-cart .es-empty-cart__reco-link{
  font-size: 12px;
  color: rgba(17,17,17,.70);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-cart .es-empty-cart__product{
  margin-bottom: 18px;
}

/* Mobile spacing */
@media (max-width: 767px){
  .page-cart .es-empty-cart{ padding: 26px 0 56px; }
  .page-cart .es-empty-cart__card{ padding: 34px 18px 22px; border-radius: 18px; }
  .page-cart .es-empty-cart__title{ font-size: 22px; }
  .page-cart .es-btn{ width: 100%; max-width: 320px; }
  .page-cart .es-empty-cart__actions{ gap: 8px; }
}

/* =========================================================
   ES CART EMPTY STATE (Ultra / Apple-grade v2)
   - Adds search bar, category tiles, steps, and a sleek carousel
   ========================================================= */
.page-cart .es-empty-cart{
  position: relative;
  background:
    radial-gradient(700px 240px at 50% -40px, rgba(212,175,55,.16), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(17,17,17,.02), rgba(255,255,255,0) 60%);
}

.page-cart .es-empty-cart__search{ margin: 10px auto 6px; max-width: 640px; }
.page-cart .es-empty-cart__search-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.page-cart .es-empty-cart__search-input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #111;
  font-size: 14px;
}
.page-cart .es-empty-cart__search-input::placeholder{ color: rgba(17,17,17,.45); }
.page-cart .es-empty-cart__search-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(17,17,17,.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
  transition: background-color .15s ease, transform .15s ease;
}
.page-cart .es-empty-cart__search-btn:hover{ background: rgba(17,17,17,.06); }
.page-cart .es-empty-cart__search-btn:active{ transform: translateY(1px); }

.page-cart .es-empty-cart__search-suggest{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
}
.page-cart .es-pill{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(17,17,17,.78);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,17,17,.06);
  transition: background-color .15s ease, transform .15s ease;
}
.page-cart .es-pill:hover{ background: rgba(255,255,255,.78); }
.page-cart .es-pill:active{ transform: translateY(1px); }

.page-cart .es-empty-cart__discover{ margin-top: 18px; }
.page-cart .es-empty-cart__tiles{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.page-cart .es-ec-tile{
  position: relative;
  display: block;
  border-radius: 18px;
  padding: 18px 16px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.page-cart .es-ec-tile:before{
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(380px 140px at 30% 0%, rgba(212,175,55,.18), rgba(255,255,255,0) 60%);
  opacity: .9;
  pointer-events: none;
}
.page-cart .es-ec-tile:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0,0,0,.08); }
.page-cart .es-ec-tile__kicker{
  display: block;
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(17,17,17,.55);
  margin: 0 0 4px;
}
.page-cart .es-ec-tile__title{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin: 0 0 6px;
}
.page-cart .es-ec-tile__meta{
  display: block;
  font-size: 12px;
  color: rgba(17,17,17,.62);
}

.page-cart .es-empty-cart__steps{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.page-cart .es-step{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,17,17,.06);
}
.page-cart .es-step__dot{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  background: rgba(212,175,55,.24);
  border: 1px solid rgba(212,175,55,.32);
}
.page-cart .es-step__text{ font-size: 12px; color: rgba(17,17,17,.70); }

.page-cart .es-ec-carousel{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
}
.page-cart .es-ec-carousel__btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background-color .15s ease;
}
.page-cart .es-ec-carousel__btn:hover{ background: rgba(255,255,255,.92); }
.page-cart .es-ec-carousel__btn:active{ transform: translateY(1px); }

.page-cart .es-ec-carousel__track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.page-cart .es-ec-carousel__track::-webkit-scrollbar{ width: 0; height: 0; }
.page-cart .es-ec-carousel__item{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 240px;
}

.page-cart .es-ec-mini{
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.page-cart .es-ec-mini:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0,0,0,.08); }
.page-cart .es-ec-mini__media{ display: block; background: rgba(17,17,17,.02); }
.page-cart .es-ec-mini__media img{ width: 100%; height: 240px; object-fit: cover; display: block; }
.page-cart .es-ec-mini__info{ padding: 12px 12px 14px; text-align: left; }
.page-cart .es-ec-mini__type{ font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: rgba(17,17,17,.50); margin-bottom: 4px; }
.page-cart .es-ec-mini__title{ display: block; font-size: 13px; font-weight: 600; color: #111; line-height: 1.25; margin: 0 0 6px; }
.page-cart .es-ec-mini__price{ font-size: 13px; color: rgba(17,17,17,.78); }
.page-cart .es-ec-mini__price-compare{ margin-left: 6px; color: rgba(17,17,17,.40); text-decoration: line-through; }

.page-cart .es-empty-cart__help{ margin-top: 22px; }
.page-cart .es-empty-cart__help-card{
  border-radius: 18px;
  padding: 18px 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  text-align: center;
}
.page-cart .es-empty-cart__help-title{ font-size: 14px; font-weight: 700; color: #111; margin-bottom: 6px; }
.page-cart .es-empty-cart__help-sub{ font-size: 13px; color: rgba(17,17,17,.64); margin-bottom: 10px; }
.page-cart .es-empty-cart__help-link{ font-size: 13px; color: #111; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 991px){
  .page-cart .es-empty-cart__tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .page-cart .es-empty-cart__search-row{ padding: 10px 10px 10px 12px; }
  .page-cart .es-empty-cart__tiles{ gap: 10px; }
  .page-cart .es-ec-carousel{ grid-template-columns: 1fr; }
  .page-cart .es-ec-carousel__btn{ display: none; }
  .page-cart .es-ec-carousel__item{ width: 76vw; max-width: 320px; }
}

/* ============================
   Premium FAQ page (Apple-ish)
   ============================ */
.page_aboutus_v1.page_FQA .asked{ margin-top: 72px; }
.page_aboutus_v1.page_FQA .asked .container-v2{ max-width: 1120px; }
.page_aboutus_v1.page_FQA .asked .top_asked{ text-align: center; max-width: 860px; margin: 0 auto; }
.page_aboutus_v1.page_FQA .asked .top_asked h3{ font-size: 36px; font-weight: 650; letter-spacing: -0.02em; }
.page_aboutus_v1.page_FQA .asked .top_asked p{ font-size: 15px; color: rgba(17,17,17,.62); }

.page_aboutus_v1.page_FQA .es-faq-toolbar{ margin-top: 26px; margin-bottom: 22px; }

/* Toolbar layout: search + actions in one premium row (cleaner / more balanced) */
.page_aboutus_v1.page_FQA .es-faq-toolbar-inner{
  width: min(760px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.page_aboutus_v1.page_FQA .es-faq-toolbar-top{
  display: flex;
  align-items: center;
  gap: 12px;
}
.page_aboutus_v1.page_FQA .es-faq-actions{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(17,17,17,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  height: 44px; /* match search height */
}
.page_aboutus_v1.page_FQA .es-faq-action{
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(17,17,17,.74);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 8px 12px;
  border-radius: 999px;
  line-height: 16px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
  height: 36px;
  display: inline-flex;
  align-items: center;
}
.page_aboutus_v1.page_FQA .es-faq-action:hover{
  background: rgba(17,17,17,.06);
  color: #111;
}
.page_aboutus_v1.page_FQA .es-faq-action:active{
  transform: translateY(1px);
}
.page_aboutus_v1.page_FQA .es-faq-action:disabled{
  opacity: .35;
  cursor: default;
}

.page_aboutus_v1.page_FQA .es-faq-search{ position: relative; width: auto; flex: 1 1 auto; min-width: 260px; }
.page_aboutus_v1.page_FQA .es-faq-search-input{
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.92);
  padding: 12px 44px 12px 44px;
  font-size: 15px;
  line-height: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.page_aboutus_v1.page_FQA .es-faq-search-input:focus{
  border-color: rgba(17,17,17,.28);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
  background: rgba(255,255,255,1);
}
.page_aboutus_v1.page_FQA .es-faq-search-ico{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(17,17,17,.52);
  font-size: 14px;
}
.page_aboutus_v1.page_FQA .es-faq-search-clear{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: rgba(17,17,17,.06);
  color: rgba(17,17,17,.70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, background .18s ease;
}
.page_aboutus_v1.page_FQA .es-faq-search-clear:hover{ background: rgba(17,17,17,.10); }
.page_aboutus_v1.page_FQA .es-faq-search-meta{ font-size: 13px; color: rgba(17,17,17,.55); min-height: 18px; }

.page_aboutus_v1.page_FQA .es-faq-empty{
  margin-top: 12px;
  width: 100%;
  display: block;
}
.page_aboutus_v1.page_FQA .es-faq-empty-card{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 18px;
  padding: 18px 20px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 46px rgba(0,0,0,.06);
  text-align: center;
}
.page_aboutus_v1.page_FQA .es-faq-empty-title{ font-weight: 800; font-size: 14px; color: #111; margin-bottom: 6px; }
.page_aboutus_v1.page_FQA .es-faq-empty-subtitle{ font-size: 13px; color: rgba(17,17,17,.60); margin-bottom: 12px; }
.page_aboutus_v1.page_FQA .es-faq-empty-cta{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.page_aboutus_v1.page_FQA .es-faq-empty-cta:hover{ opacity: .92; }

.page_aboutus_v1.page_FQA .content_askeds{
  padding-top: 22px;
  border-top: 1px solid rgba(17,17,17,.10);
  margin-top: 10px;
}
.page_aboutus_v1.page_FQA .box_content_question{
  padding-bottom: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(17,17,17,.08);
}
.page_aboutus_v1.page_FQA .box_content_question:last-child{ border-bottom: none; }
.page_aboutus_v1.page_FQA .engoc-faq-icon-plus,
.page_aboutus_v1.page_FQA .engoc-faq-icon-minus{ display: none !important; }

.page_aboutus_v1.page_FQA .title_question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}
.page_aboutus_v1.page_FQA .title_question .es-faq-question{ flex: 1; padding-right: 8px; }

.page_aboutus_v1.page_FQA .es-faq-icon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(17,17,17,.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
  flex: 0 0 auto;
}
.page_aboutus_v1.page_FQA .es-faq-icon:before{
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(17,17,17,.62);
  border-bottom: 2px solid rgba(17,17,17,.62);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.page_aboutus_v1.page_FQA .title_question.engoc-toggle-icon .es-faq-icon:before{
  /* Chevron rotates up when expanded */
  transform: rotate(-135deg);
}
.page_aboutus_v1.page_FQA .title_question:hover .es-faq-icon{ background: rgba(17,17,17,.08); }

.page_aboutus_v1.page_FQA .card-body{
  padding: 0 0 14px 0;
  font-size: 15px;
  color: rgba(17,17,17,.78);
  line-height: 28px;
}
.page_aboutus_v1.page_FQA .card-body p{ color: inherit; }

.page_aboutus_v1.page_FQA .es-faq-support{ margin-top: 22px; }
.page_aboutus_v1.page_FQA .es-faq-support-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 40px rgba(0,0,0,.05);
}
.page_aboutus_v1.page_FQA .es-faq-support-title{ font-size: 14px; font-weight: 850; color: #111; margin-bottom: 4px; }
.page_aboutus_v1.page_FQA .es-faq-support-text{ font-size: 13px; color: rgba(17,17,17,.62); }
.page_aboutus_v1.page_FQA .es-faq-support-text a{ color: #111; text-decoration: underline; text-underline-offset: 3px; }
.page_aboutus_v1.page_FQA .es-faq-support-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.page_aboutus_v1.page_FQA .es-faq-support-btn:hover{ opacity: .92; }

@media (max-width: 991px){
  .page_aboutus_v1.page_FQA .asked{ margin-top: 54px; }
  .page_aboutus_v1.page_FQA .asked .top_asked h3{ font-size: 30px; }
}
@media (max-width: 767px){
  .page_aboutus_v1.page_FQA .asked .top_asked{ text-align: left; padding: 0 6px; }
  .page_aboutus_v1.page_FQA .es-faq-toolbar{ margin-top: 16px; }
  .page_aboutus_v1.page_FQA .es-faq-toolbar-top{ flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
  .page_aboutus_v1.page_FQA .es-faq-actions{ justify-content: center; width: fit-content; margin: 0 auto; }
  .page_aboutus_v1.page_FQA .content_askeds{ padding-top: 16px; }
  .page_aboutus_v1.page_FQA .es-faq-support-card{ flex-direction: column; align-items: flex-start; }
}

/* =============================
   FAQ polish v21 (alignment + hover + spacing)
   ============================= */
/* Add breathing room before footer */
.page_aboutus_v1.page_FQA .asked{ padding-bottom: 72px; }
.page_aboutus_v1.page_FQA .es-faq-support{ margin-bottom: 18px; }

/* Make each FAQ row feel like a premium card so uneven heights between columns look intentional */
.page_aboutus_v1.page_FQA .box_content_question{
  border-bottom: none !important;
  margin-bottom: 14px;
  padding: 0 14px;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(0,0,0,.035);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.page_aboutus_v1.page_FQA .box_content_question:last-child{ border: 1px solid rgba(17,17,17,.08) !important; }

/* Subtle Apple-ish hover */
.page_aboutus_v1.page_FQA .box_content_question:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(17,17,17,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* Better visual alignment for multi-line questions */
.page_aboutus_v1.page_FQA .title_question{
  align-items: flex-start;
  padding: 16px 0;
}
.page_aboutus_v1.page_FQA .title_question .es-faq-question{
  line-height: 22px;
  padding-top: 2px;
}

.page_aboutus_v1.page_FQA .box_content_question:hover .es-faq-icon{
  background: rgba(17,17,17,.08);
  transform: scale(1.05);
}

/* Answer spacing inside the card */
.page_aboutus_v1.page_FQA .card-body{
  padding: 0 0 16px 0;
}

@media (max-width: 991px){
  .page_aboutus_v1.page_FQA .asked{ padding-bottom: 56px; }
}
@media (max-width: 767px){
  .page_aboutus_v1.page_FQA .box_content_question{ padding: 0 12px; border-radius: 16px; }
}

/* =============================
   FAQ Luxe v22 (single column + Apple spacing)
   ============================= */
/* Slightly narrower canvas for a more premium, editorial feel */
.page_aboutus_v1.page_FQA .asked .container-v2{ max-width: 980px; }
.page_aboutus_v1.page_FQA .content_askeds{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.page_aboutus_v1.page_FQA .content_askeds > .col-lg-12{ padding-left: 0; padding-right: 0; }

/* Softer glass card + stronger focus state */
.page_aboutus_v1.page_FQA .box_content_question{
  padding: 0 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.page_aboutus_v1.page_FQA .box_content_question:hover{
  transform: translateY(-2px);
}
.page_aboutus_v1.page_FQA .box_content_question:focus-within{
  border-color: rgba(17,17,17,.16);
  box-shadow: 0 18px 48px rgba(0,0,0,.08);
}

/* More spacious tap target */
.page_aboutus_v1.page_FQA .title_question{ padding: 18px 0; }

/* Slightly more refined icon button */
.page_aboutus_v1.page_FQA .es-faq-icon{
  width: 32px;
  height: 32px;
  background: rgba(17,17,17,.045);
}
.page_aboutus_v1.page_FQA .es-faq-icon:before{ font-size: 19px; }

/* Extra breathing room before footer */
.page_aboutus_v1.page_FQA .asked{ padding-bottom: 92px; }

@media (max-width: 767px){
  .page_aboutus_v1.page_FQA .content_askeds{ max-width: 100%; }
  .page_aboutus_v1.page_FQA .box_content_question{ padding: 0 14px; border-radius: 18px; }
}

/* =============================
   FAQ Luxe v23 (tighter rhythm)
   - Reduce vertical whitespace between rows
   - Slightly smaller tap target while keeping premium feel
   ============================= */
.page_aboutus_v1.page_FQA .box_content_question{
  margin-bottom: 10px; /* was 14px */
  padding: 0 14px;     /* was 0 18px */
  border-radius: 18px; /* was 20px */
}
.page_aboutus_v1.page_FQA .title_question{
  padding: 14px 0;     /* was 18px */
}
.page_aboutus_v1.page_FQA .card-body{
  padding: 0 0 14px 0; /* keep answers tidy */
}
.page_aboutus_v1.page_FQA .box_content_question:hover{
  transform: translateY(-1px); /* was -2px */
}

@media (max-width: 767px){
  .page_aboutus_v1.page_FQA .box_content_question{
    margin-bottom: 8px;
    padding: 0 12px;
    border-radius: 16px;
  }
  .page_aboutus_v1.page_FQA .title_question{ padding: 13px 0; }
}

/* ==============================
   EYESHELLS – Luxe Contact Us Page
   ============================== */
.page_aboutus_v1.page_contact.es-contact-luxe {
  background: #fff;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-mapwrap {
  padding-top: 40px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-mapcard {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 34px rgba(0,0,0,0.06);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-mapcard #map {
  height: 380px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-shell {
  padding: 56px 0 100px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 36px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-title {
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-subtitle {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.60);
  margin: 0;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 991px) {
  .page_aboutus_v1.page_contact.es-contact-luxe .es-contact-grid {
    grid-template-columns: 1fr;
  }
  .page_aboutus_v1.page_contact.es-contact-luxe .es-contact-shell {
    padding: 44px 0 80px;
  }
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
  padding: 26px;
  backdrop-filter: blur(10px);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-cardhead {
  margin-bottom: 18px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-cardtitle {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-carddesc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0,0,0,0.60);
  margin: 0;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-formwrap {
  margin-top: 14px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-fields {
  display: grid;
  gap: 14px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-label {
  display: block;
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-input,
.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-textarea {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-textarea {
  min-height: 160px;
  resize: vertical;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-input::placeholder,
.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-textarea::placeholder {
  color: rgba(0,0,0,0.35);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-input:focus,
.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-textarea:focus {
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 0 0 6px rgba(212,175,55,0.16);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: #fff;
  background: #D4AF37;
  box-shadow: 0 10px 26px rgba(212,175,55,0.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-btn:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
  box-shadow: 0 12px 30px rgba(212,175,55,0.42);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-btn:active {
  transform: translateY(0px);
  box-shadow: 0 8px 20px rgba(212,175,55,0.28);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(0,0,0,0.48);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-alert {
  display: flex;
  gap: 10px;
  border-radius: 18px;
  padding: 12px 14px;
  margin: 0 0 16px;
  border: 1px solid rgba(0,0,0,0.06);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-alert-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  flex: 0 0 28px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-alert--success {
  background: rgba(46, 204, 113, 0.10);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-alert--success .es-contact-alert-icon {
  background: rgba(46, 204, 113, 0.18);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-alert--error {
  background: rgba(231, 76, 60, 0.10);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-alert--error .es-contact-alert-icon {
  background: rgba(231, 76, 60, 0.18);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-alert-text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(0,0,0,0.70);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-infolist {
  display: grid;
  gap: 12px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-infoitem {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  /* Better vertical alignment for the icon + single-line email text */
  align-items: center;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-infoicon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(0,0,0,0.60);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-infotext {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0,0,0,0.70);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-helpbox {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-help-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-help-desc {
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  line-height: 1.6;
  margin: 0 0 12px;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  color: rgba(0,0,0,0.85);
  font-weight: 650;
  font-size: 13px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.page_aboutus_v1.page_contact.es-contact-luxe .es-contact-help-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}


/* ==============================
   EYESHELLS – Luxe About Us Page
   ============================== */

.page_aboutus_v1.page_aboutus_v2.es-about-luxe{
  background:#fff;
}

/* Override the legacy large spacing */
.page_aboutus_v1.page_aboutus_v2.es-about-luxe .about_top{ margin-top: 52px !important; }
.page_aboutus_v1.page_aboutus_v2.es-about-luxe .about_top .paddingright{ padding-right: 0 !important; }

@media (max-width: 991px){
  .page_aboutus_v1.page_aboutus_v2.es-about-luxe .about_top{ margin-top: 36px !important; }
}

/* Richtext wrapper */
.page_aboutus_v1.page_aboutus_v2.es-about-luxe .es-about-richtext{
  max-width: 1120px;
  margin: 0 auto;
}

/* Upgrade the embedded About markup (keeps your original copy) */
.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about{
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 28px 22px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 28px !important;
  background: radial-gradient(900px 260px at 50% -80px, rgba(212,175,55,0.14), rgba(255,255,255,0) 65%), rgba(255,255,255,0.96) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.06) !important;
}

@media (max-width: 767px){
  .page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about{
    padding: 22px 16px !important;
    border-radius: 22px !important;
  }
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .hero{
  padding: 8px 0 6px;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .hero h1{
  font-size: clamp(30px, 3.2vw, 46px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 10px !important;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .hero p{
  font-size: 15px !important;
  color: rgba(0,0,0,0.64) !important;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about h2{
  font-size: clamp(18px, 2.1vw, 26px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  margin-top: 12px !important;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about h2::after{
  content: '';
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(212,175,55,0.92);
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about p{
  color: rgba(0,0,0,0.72) !important;
}

/* Value cards */
.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .cards{
  gap: 14px !important;
  margin-top: 16px !important;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .card{
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 22px !important;
  padding: 18px 18px !important;
  background: rgba(255,255,255,0.94) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06) !important;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .card::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  border-radius: 22px 22px 0 0;
  background: rgba(212,175,55,0.88);
  opacity: .68;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.08) !important;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .card h3{
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .card p{
  font-size: 13.5px !important;
  color: rgba(0,0,0,0.62) !important;
}

/* Bullet list polish (keeps the same text) */
.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about ul.narrow{
  list-style: none !important;
  padding-left: 0 !important;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about ul.narrow li{
  position: relative;
  padding-left: 22px !important;
  margin: 10px 0 !important;
}

.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about ul.narrow li::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(212,175,55,0.92);
  position: absolute;
  left: 0;
  top: .72em;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(212,175,55,0.14);
}

/* Make the last section feel like a soft callout */
.page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .section:last-child{
  margin-top: 18px;
  padding: 18px 18px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(212,175,55,0.06);
}

@media (max-width: 767px){
  .page_aboutus_v1.page_aboutus_v2.es-about-luxe .eyeshells-about .section:last-child{
    padding: 16px 16px;
    border-radius: 18px;
  }
}


/* ==============================
   Luxe policy / default pages
   (Shipping policy, warranty, etc.)
   Keeps original copy, upgrades layout
================================ */

/* ==============================
   Sticky footer (premium feel on short pages)
   Problem: pages with very little content (e.g., Warranty) can look "cut off"
   because the footer floats upward leaving a large empty area below it.
   Fix: flex layout that pushes the footer to the bottom of the viewport.
   Safe: does not affect normal pages with longer content.
================================ */
html, body{height:100%;}

body .wrap{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body .wrap .contentbody{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

#MainContent.es-main-content{
  flex: 1 0 auto;
}

/* Make footer naturally stick to the bottom when there is extra vertical space */
#shopify-section-footer{
  margin-top: auto;
}

.template-page .es-page-card{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 24px;
  padding: 26px 26px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 16px 42px rgba(0,0,0,0.06);
}

.template-page .es-page-card p{
  color: rgba(0,0,0,0.66);
  line-height: 1.75;
  font-size: 15px;
}

.template-page .es-page-card h2,
.template-page .es-page-card h3,
.template-page .es-page-card h4{
  color: rgba(0,0,0,0.92);
  letter-spacing: -0.01em;
}

.template-page .es-page-card h2{
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 760;
  font-size: 22px;
}

/* Luxe gold underline accents for policy-like pages only (shipping/return/warranty/etc.) */
.template-page .es-page-card.es-policy-page h2{
  /* Replace any older underline styles with a subtle luxe accent */
  border-bottom: 0 !important;
  display: inline-block;
  padding-bottom: 2px;
}

.template-page .es-page-card.es-policy-page h2:after{
  content: '';
  display: block;
  height: 2px;
  width: 64px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(212,175,55,0.85);
}

/* Warranty page: flatten any legacy inner wrapper so it doesn't look double-boxed */
.template-page .es-page-card.es-policy-warranty > div:first-child{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

.template-page .es-page-card h3{
  margin-top: 18px;
  margin-bottom: 10px;
  font-weight: 740;
  font-size: 18px;
}

.template-page .es-page-card a{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.template-page .es-page-card ul,
.template-page .es-page-card ol{
  padding-left: 1.25rem;
}

.template-page .es-page-card li{
  margin: 8px 0;
}

/* Shipping policy callout */
.template-page .es-policy-note{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin: 0 0 16px 0;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(212,175,55,0.08);
}

.template-page .es-policy-note__icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(212,175,55,0.98);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  flex: 0 0 auto;
}

.template-page .es-policy-note__title{
  font-size: 15px;
  font-weight: 780;
  margin: 0 0 6px 0;
  color: rgba(0,0,0,0.92);
}

.template-page .es-policy-note__text{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(0,0,0,0.64);
}

/* ==============================
   Luxe wide layout for Shipping Policy (desktop)
   Prevents policy pages from looking too narrow on large screens.
   Only applied when main-page.liquid adds .es-container-wide.
================================ */
@media (min-width: 992px){
  .template-page .container.es-container-wide{
    max-width: 1280px;
  }

  /* If the policy body is wrapped in a centered max-width div (common when pasting HTML),
     expand it on desktop so the page doesn't look like a thin column. */
  .template-page .container.es-container-wide .es-page-card > div{
    max-width: 1280px !important;
  }
}

@media (min-width: 1400px){
  .template-page .container.es-container-wide{
    max-width: 1440px;
  }
}

/* Shopify built-in policy pages ( /policies/... ) */
@media (min-width: 992px){
  .template-policy .shopify-policy__container{
    max-width: 1280px;
  }
}

@media (min-width: 1400px){
  .template-policy .shopify-policy__container{
    max-width: 1440px;
  }
}

@media (max-width: 767px){
  .template-page .es-page-card{
    padding: 18px 16px;
    border-radius: 18px;
  }
  .template-page .es-policy-note{
    padding: 14px 14px;
    border-radius: 18px;
  }
}

/* ==============================
   Luxe styling for Shopify built-in policy pages
   (/policies/refund-policy, /policies/shipping-policy, etc.)
   Makes Warranty / Return policy pages match the Luxe look.
================================ */

.template-policy .shopify-policy__container{
  /* Add generous breathing room (especially before the footer) */
  padding: 28px 14px 120px;
}

.template-policy .shopify-policy__title{
  text-align: center;
  margin: 6px auto 18px;
}

.template-policy .shopify-policy__title h1{
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 820;
  color: rgba(0,0,0,0.92);
  margin: 0 0 10px 0;
}

/* Soft gold underline under the policy title */
.template-policy .shopify-policy__title:after{
  content: '';
  display: block;
  height: 3px;
  width: 86px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: rgba(212,175,55,0.95);
}

.template-policy .shopify-policy__body{
  /* Prevent the policy content from looking like a thin column on desktop */
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 24px;
  padding: 26px 26px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 16px 42px rgba(0,0,0,0.06);
}

@media (min-width: 1400px){
  .template-policy .shopify-policy__body{
    max-width: 1240px;
  }
}

/* If older policy content contains an extra “inner card” wrapper,
   flatten it so the page doesn’t look double-boxed. */
.template-policy .shopify-policy__body > div{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

.template-policy .shopify-policy__body p{
  color: rgba(0,0,0,0.66);
  line-height: 1.78;
  font-size: 15px;
  margin: 10px 0;
}

.template-policy .shopify-policy__body h2,
.template-policy .shopify-policy__body h3,
.template-policy .shopify-policy__body h4{
  color: rgba(0,0,0,0.92);
  letter-spacing: -0.01em;
}

.template-policy .shopify-policy__body h2{
  margin-top: 22px;
  margin-bottom: 10px;
  font-weight: 780;
  font-size: 22px;
  /* Override any older inline underlines and replace with a luxe gold accent */
  border-bottom: 0 !important;
  display: inline-block;
  padding-bottom: 2px;
}

.template-policy .shopify-policy__body h2:after{
  content: '';
  display: block;
  height: 2px;
  width: 64px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(212,175,55,0.85);
}

.template-policy .shopify-policy__body h3{
  margin-top: 18px;
  margin-bottom: 10px;
  font-weight: 760;
  font-size: 18px;
}

.template-policy .shopify-policy__body a{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.template-policy .shopify-policy__body ul,
.template-policy .shopify-policy__body ol{
  padding-left: 1.25rem;
}

.template-policy .shopify-policy__body li{
  margin: 8px 0;
  color: rgba(0,0,0,0.66);
}

@media (min-width: 992px){
  .template-policy .shopify-policy__container{
    padding: 34px 20px 140px;
  }
  .template-policy .shopify-policy__body{
    padding: 30px 34px;
  }
}

@media (max-width: 767px){
  .template-policy .shopify-policy__title h1{
    font-size: 32px;
  }
  .template-policy .shopify-policy__body{
    padding: 18px 16px;
    border-radius: 18px;
  }
}

/* ==============================
   Luxe policy CTA (Warranty / Return / Shipping helper)
   Adds a premium finishing block for short pages so the layout
   feels intentional (not "content ends and footer starts").
================================ */

.template-page .es-policy-cta,
.template-policy .es-policy-cta{
  margin-top: 18px;
  margin-bottom: 64px;
}

.template-page .es-policy-cta__card,
.template-policy .es-policy-cta__card{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 26px;
  padding: 22px 24px;
  border: 1px solid rgba(212,175,55,0.22);
  background:
    radial-gradient(900px 220px at 20% 10%, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0) 60%),
    radial-gradient(700px 220px at 90% 0%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0) 55%),
    rgba(255,255,255,0.95);
  box-shadow: 0 18px 55px rgba(0,0,0,0.08);
}

.template-page .es-policy-cta__card:before,
.template-policy .es-policy-cta__card:before{
  content: '';
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(212,175,55,0.40) 0%, rgba(212,175,55,0.0) 60%);
  filter: blur(2px);
  pointer-events: none;
}

.template-page .es-policy-cta__left,
.template-policy .es-policy-cta__left{
  min-width: 0;
}

.template-page .es-policy-cta__badge,
.template-policy .es-policy-cta__badge{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 760;
  letter-spacing: -0.01em;
  color: rgba(0,0,0,0.78);
  background: rgba(212,175,55,0.14);
  border: 1px solid rgba(212,175,55,0.22);
  margin-bottom: 10px;
}

.template-page .es-policy-cta__title,
.template-policy .es-policy-cta__title{
  margin: 0 0 6px 0;
  font-weight: 860;
  letter-spacing: -0.02em;
  color: rgba(0,0,0,0.92);
}

.template-page .es-policy-cta__text,
.template-policy .es-policy-cta__text{
  margin: 0 0 10px 0;
  color: rgba(0,0,0,0.64);
  line-height: 1.65;
  font-size: 14px;
}

.template-page .es-policy-cta__meta,
.template-policy .es-policy-cta__meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(0,0,0,0.56);
  font-size: 13px;
}

.template-page .es-policy-cta__meta-item,
.template-policy .es-policy-cta__meta-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.template-page .es-policy-cta__meta a,
.template-policy .es-policy-cta__meta a{
  color: rgba(0,0,0,0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.template-page .es-policy-cta__dot,
.template-policy .es-policy-cta__dot{
  opacity: 0.55;
}

.template-page .es-policy-cta__actions,
.template-policy .es-policy-cta__actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-page .es-policy-cta__btn,
.template-policy .es-policy-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  text-decoration: none;
  white-space: nowrap;
}

.template-page .es-policy-cta__btn--gold,
.template-policy .es-policy-cta__btn--gold{
  background: rgba(212,175,55,0.98);
  color: rgba(0,0,0,0.92);
  box-shadow: 0 16px 34px rgba(212,175,55,0.26);
  border: 1px solid rgba(212,175,55,0.45);
}

.template-page .es-policy-cta__btn--ghost,
.template-policy .es-policy-cta__btn--ghost{
  background: rgba(255,255,255,0.82);
  color: rgba(0,0,0,0.86);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.template-page .es-policy-cta__btn:hover,
.template-policy .es-policy-cta__btn:hover{
  transform: translateY(-1px);
}

.template-page .es-policy-cta__btn--gold:hover,
.template-policy .es-policy-cta__btn--gold:hover{
  box-shadow: 0 18px 42px rgba(212,175,55,0.30);
}

.template-page .es-policy-cta__btn--ghost:hover,
.template-policy .es-policy-cta__btn--ghost:hover{
  background: rgba(255,255,255,0.92);
  box-shadow: 0 16px 38px rgba(0,0,0,0.08);
}

@media (max-width: 767px){
  .template-page .es-policy-cta,
  .template-policy .es-policy-cta{
    margin-bottom: 46px;
  }
  .template-page .es-policy-cta__card,
  .template-policy .es-policy-cta__card{
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    border-radius: 20px;
  }
  .template-page .es-policy-cta__actions,
  .template-policy .es-policy-cta__actions{
    width: 100%;
  }
  .template-page .es-policy-cta__btn,
  .template-policy .es-policy-cta__btn{
    width: 100%;
  }
}

/* V44 Cart recommendations (You may also like) */
.page-cart.es-cart-soft-luxe-page .es-cart-reco{
  margin-top: 24px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(252,251,249,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.06);
}

.page-cart.es-cart-soft-luxe-page .es-cart-reco__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.page-cart.es-cart-soft-luxe-page .es-cart-reco__title{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.page-cart.es-cart-soft-luxe-page .es-cart-reco__subtitle{
  margin: 0;
  font-size: 13px;
  color: rgba(17,17,17,.62);
}

.page-cart.es-cart-soft-luxe-page .es-cart-reco .es-ec-carousel{
  margin-top: 10px;
}

@media (min-width: 990px){
  .page-cart.es-cart-soft-luxe-page .es-cart-reco{
    padding: 24px 24px 20px;
  }
}

/* V45: Trust bullets under checkout (subtle, premium) */
.page-cart.es-cart-soft-luxe-page .es-cart-trust{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.page-cart.es-cart-soft-luxe-page .es-cart-trust li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(17,17,17,.62);
}
.page-cart.es-cart-soft-luxe-page .es-cart-trust .es-cart-trust__dot{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  background: rgba(212,175,55,.22);
  border: 1px solid rgba(212,175,55,.32);
  flex: 0 0 22px;
}
@media (min-width: 992px){
  .page-cart.es-cart-soft-luxe-page .es-cart-trust{
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
}

/* V45: More refined remove icon */
.page-cart.es-cart-soft-luxe-page td.product-remove a.remove{
  color: rgba(17,17,17,.58);
}
.page-cart.es-cart-soft-luxe-page td.product-remove a.remove svg{
  width: 12px;
  height: 12px;
  fill: currentColor;
  opacity: .9;
}
.page-cart.es-cart-soft-luxe-page td.product-remove a.remove:hover{
  color: #111;
}

/* V45: Extra glass highlight for qty control */
.page-cart.es-cart-soft-luxe-page .es-qty-control{
  position: relative;
  overflow: hidden;
}
.page-cart.es-cart-soft-luxe-page .es-qty-control::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  opacity: .55;
  pointer-events: none;
}
.page-cart.es-cart-soft-luxe-page .es-qty-control > *{
  position: relative;
  z-index: 1;
}
.page-cart.es-cart-soft-luxe-page .es-qty-btn{
  background: rgba(255,255,255,.88);
}

/* V45: Carousel button disabled state */
.page-cart .es-ec-carousel__btn.is-disabled{
  opacity: .35;
  pointer-events: none;
  filter: grayscale(1);
}

/* ==============================
   FAQ Icon – Scheme B (Chevron rotate)
   + Clean, modern, premium feel
   + Uses existing .engoc-toggle-icon state class
================================ */
.page_aboutus_v1.page_FQA .es-faq-icon:before{
  content: "" !important;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(17,17,17,.62);
  border-bottom: 2px solid rgba(17,17,17,.62);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.page_aboutus_v1.page_FQA .title_question.engoc-toggle-icon .es-faq-icon:before{
  transform: rotate(-135deg);
}

/* ==============================
   About Us – prevent content from sticking to footer
================================ */
.page_aboutus_v1.page_aboutus_v2.es-about-luxe{
  padding-bottom: 72px;
}
@media (max-width: 767px){
  .page_aboutus_v1.page_aboutus_v2.es-about-luxe{
    padding-bottom: 54px;
  }
}

/* ==========================================================
   ES CLS FIX (v1)
   Goal: reduce layout shifts (CLS) on collection/home grids.
   Safe rules: only target product cards / dynamic widgets.
========================================================== */

/* 1) Stabilize product thumbnail box so images never change card height */
.product-thumb .product-thumb-link{
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}
.product-thumb .product-thumb-link > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* 2) Reserve space for review badge injected by JS (prevents late push-down) */
.shopify-product-reviews-badge{
  display: block;
  min-height: 18px;
}

/* 3) Keep product card info area height consistent (title/price/swatches) */
.product-item .product-info,
.product-item-v1 .product-info{
  min-height: 82px;
}

/* 4) Breadcrumb/collection banner: avoid micro-shifts due to late font swap */
.wrap-bread-crumb .bg_bread,
.wrap-bread-crumb .bg-bread{
  min-height: 140px;
}


/* 5) Ensure wishlist/search action icons reserve space even if icon-font swaps */
.cart-login-search a i,
.cart-login-search a svg{
  display: inline-block;
  width: 20px;
  height: 20px;
}

/* =====================================================
   ES Related products (Top-tier)
   - Page-style scroll (~85% of visible width per click)
   - Progress bar placed BEFORE arrows
   - Edge fade masks (desktop)
   - Grab / Grabbing cursor for draggable slider
   ===================================================== */

.related-product.es-related-fullwidth .es-related-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

.related-product.es-related-fullwidth .es-related-progress{
  width: 120px;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.related-product.es-related-fullwidth .es-related-progress-bar{
  display: block;
  height: 100%;
  width: 0%;
  background: #000;
  border-radius: 999px;
  transition: width .24s ease;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .es-related-progress{
    width: 88px;
    height: 5px;
  }
}

.related-product.es-related-fullwidth .es-related-slider{
  cursor: grab;
}

.related-product.es-related-fullwidth .es-related-slider.es-is-dragging{
  cursor: grabbing;
}

/* Edge fade masks (desktop only) */
.related-product.es-related-fullwidth .related-tabs{
  position: relative;
}

.related-product.es-related-fullwidth .related-tabs::before,
.related-product.es-related-fullwidth .related-tabs::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .18s ease;
}

.related-product.es-related-fullwidth .related-tabs::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth .related-tabs::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth.es-related-at-start .related-tabs::before{ opacity: 0; }
.related-product.es-related-fullwidth.es-related-at-end .related-tabs::after{ opacity: 0; }

@media (max-width: 767px){
  .related-product.es-related-fullwidth .related-tabs::before,
  .related-product.es-related-fullwidth .related-tabs::after{
    display: none;
  }
}

/* =====================================================
   ES Related products (Top-tier)
   - Page-style scroll (~85% of visible width per click)
   - Progress bar placed BEFORE arrows
   - Edge fade masks (desktop)
   - Grab / Grabbing cursor for draggable slider
   ===================================================== */

.related-product.es-related-fullwidth .es-related-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

.related-product.es-related-fullwidth .es-related-progress{
  width: 120px;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.related-product.es-related-fullwidth .es-related-progress-bar{
  display: block;
  height: 100%;
  width: 0%;
  background: #000;
  border-radius: 999px;
  transition: width .24s ease;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .es-related-progress{
    width: 88px;
    height: 5px;
  }
}

.related-product.es-related-fullwidth .es-related-slider{
  cursor: grab;
}

.related-product.es-related-fullwidth .es-related-slider.es-is-dragging{
  cursor: grabbing;
}

/* Edge fade masks (desktop only) */
.related-product.es-related-fullwidth .related-tabs{
  position: relative;
}

.related-product.es-related-fullwidth .related-tabs::before,
.related-product.es-related-fullwidth .related-tabs::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .18s ease;
}

.related-product.es-related-fullwidth .related-tabs::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth .related-tabs::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth.es-related-at-start .related-tabs::before{
  opacity: 0;
}

.related-product.es-related-fullwidth.es-related-at-end .related-tabs::after{
  opacity: 0;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .related-tabs::before,
  .related-product.es-related-fullwidth .related-tabs::after{
    display: none;
  }
}

/* =====================================================
   ES Related products (Top-tier)
   - Page-style scroll (~85% of visible width per click)
   - Progress bar placed BEFORE arrows
   - Edge fade masks (desktop)
   - Grab / Grabbing cursor for draggable slider
   ===================================================== */

.related-product.es-related-fullwidth .es-related-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

.related-product.es-related-fullwidth .es-related-progress{
  width: 120px;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.related-product.es-related-fullwidth .es-related-progress-bar{
  display: block;
  height: 100%;
  width: 0%;
  background: #000;
  border-radius: 999px;
  transition: width .24s ease;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .es-related-progress{
    width: 88px;
    height: 5px;
  }
}

.related-product.es-related-fullwidth .es-related-slider{
  cursor: grab;
}

.related-product.es-related-fullwidth .es-related-slider.es-is-dragging{
  cursor: grabbing;
}

/* Edge fade masks (desktop) */
.related-product.es-related-fullwidth .related-tabs{
  position: relative;
}

.related-product.es-related-fullwidth .related-tabs::before,
.related-product.es-related-fullwidth .related-tabs::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .18s ease;
}

.related-product.es-related-fullwidth .related-tabs::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth .related-tabs::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth.es-related-at-start .related-tabs::before{ opacity: 0; }
.related-product.es-related-fullwidth.es-related-at-end .related-tabs::after{ opacity: 0; }

@media (max-width: 767px){
  .related-product.es-related-fullwidth .related-tabs::before,
  .related-product.es-related-fullwidth .related-tabs::after{
    display: none;
  }
}

/* =====================================================
   ES Related products (Top-tier)
   - Page-style scroll (~85% of visible width per click)
   - Progress bar placed BEFORE arrows
   - Edge fade masks (desktop)
   - Grab / Grabbing cursor for draggable slider
   ===================================================== */

.related-product.es-related-fullwidth .es-related-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

.related-product.es-related-fullwidth .es-related-progress{
  width: 120px;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.related-product.es-related-fullwidth .es-related-progress-bar{
  display: block;
  height: 100%;
  width: 0%;
  background: #000;
  border-radius: 999px;
  transition: width .24s ease;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .es-related-progress{
    width: 88px;
    height: 5px;
  }
}

.related-product.es-related-fullwidth .es-related-slider{
  cursor: grab;
}

.related-product.es-related-fullwidth .es-related-slider.es-is-dragging{
  cursor: grabbing;
}

.related-product.es-related-fullwidth .related-tabs{
  position: relative;
}

.related-product.es-related-fullwidth .related-tabs::before,
.related-product.es-related-fullwidth .related-tabs::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .18s ease;
}

.related-product.es-related-fullwidth .related-tabs::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth .related-tabs::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth.es-related-at-start .related-tabs::before{
  opacity: 0;
}

.related-product.es-related-fullwidth.es-related-at-end .related-tabs::after{
  opacity: 0;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .related-tabs::before,
  .related-product.es-related-fullwidth .related-tabs::after{
    display: none;
  }
}

/* =====================================================
   ES Related products (Top-tier)
   - Page-style scroll (~85% of visible width per click)
   - Progress bar placed BEFORE arrows
   - Edge fade masks (desktop)
   - Grab / Grabbing cursor for draggable slider
   ===================================================== */

.related-product.es-related-fullwidth .es-related-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

.related-product.es-related-fullwidth .es-related-progress{
  width: 120px;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}

.related-product.es-related-fullwidth .es-related-progress-bar{
  display: block;
  height: 100%;
  width: 0%;
  background: #000;
  border-radius: 999px;
  transition: width .24s ease;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .es-related-progress{
    width: 88px;
    height: 5px;
  }
}

.related-product.es-related-fullwidth .es-related-slider{ cursor: grab; }
.related-product.es-related-fullwidth .es-related-slider.es-is-dragging{ cursor: grabbing; }

/* Edge fade masks to hint more items on desktop */
.related-product.es-related-fullwidth .related-tabs{ position: relative; }
.related-product.es-related-fullwidth .related-tabs::before,
.related-product.es-related-fullwidth .related-tabs::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .18s ease;
}
.related-product.es-related-fullwidth .related-tabs::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.related-product.es-related-fullwidth .related-tabs::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth.es-related-at-start .related-tabs::before{ opacity: 0; }
.related-product.es-related-fullwidth.es-related-at-end .related-tabs::after{ opacity: 0; }

@media (max-width: 767px){
  .related-product.es-related-fullwidth .related-tabs::before,
  .related-product.es-related-fullwidth .related-tabs::after{ display: none; }
}

/* =====================================================
   ES Related products (Top-tier)
   - Page-style scroll (~85% of visible width per click)
   - Progress bar placed BEFORE arrows
   - Edge fade masks (desktop)
   - Grab / Grabbing cursor for draggable slider
   ===================================================== */

.related-product.es-related-fullwidth .es-related-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

.related-product.es-related-fullwidth .es-related-progress{
  width: 120px;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.related-product.es-related-fullwidth .es-related-progress-bar{
  display: block;
  height: 100%;
  width: 0%;
  background: #000;
  border-radius: 999px;
  transition: width .24s ease;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .es-related-progress{
    width: 88px;
    height: 5px;
  }
}

.related-product.es-related-fullwidth .es-related-slider{
  cursor: grab;
}

.related-product.es-related-fullwidth .es-related-slider.es-is-dragging{
  cursor: grabbing;
}

.related-product.es-related-fullwidth .related-tabs{
  position: relative;
}

.related-product.es-related-fullwidth .related-tabs::before,
.related-product.es-related-fullwidth .related-tabs::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .18s ease;
}

.related-product.es-related-fullwidth .related-tabs::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth .related-tabs::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth.es-related-at-start .related-tabs::before{
  opacity: 0;
}

.related-product.es-related-fullwidth.es-related-at-end .related-tabs::after{
  opacity: 0;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .related-tabs::before,
  .related-product.es-related-fullwidth .related-tabs::after{
    display: none;
  }
}


/* =====================================================
   ES Related products (Top-tier)
   - Page-style scroll (~85% of visible width per click)
   - Progress bar placed BEFORE arrows
   - Edge fade masks (desktop)
   - Grab / Grabbing cursor for draggable slider
   ===================================================== */

.related-product.es-related-fullwidth .es-related-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

.related-product.es-related-fullwidth .es-related-progress{
  width: 120px;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.related-product.es-related-fullwidth .es-related-progress-bar{
  display: block;
  height: 100%;
  width: 0%;
  background: #000;
  border-radius: 999px;
  transition: width .24s ease;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .es-related-progress{
    width: 88px;
    height: 5px;
  }
}

.related-product.es-related-fullwidth .es-related-slider{
  cursor: grab;
}

.related-product.es-related-fullwidth .es-related-slider.es-is-dragging{
  cursor: grabbing;
}

/* Edge fade masks for a premium carousel look */
.related-product.es-related-fullwidth .related-tabs{
  position: relative;
}

.related-product.es-related-fullwidth .related-tabs::before,
.related-product.es-related-fullwidth .related-tabs::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .18s ease;
}

.related-product.es-related-fullwidth .related-tabs::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth .related-tabs::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.related-product.es-related-fullwidth.es-related-at-start .related-tabs::before{
  opacity: 0;
}

.related-product.es-related-fullwidth.es-related-at-end .related-tabs::after{
  opacity: 0;
}

@media (max-width: 767px){
  .related-product.es-related-fullwidth .related-tabs::before,
  .related-product.es-related-fullwidth .related-tabs::after{
    display: none;
  }
}