/* ==========================================================
   VOYAGER - cart surfaces + image blending (round 9, 2026-09-25)

   Switch this snippet OFF to return to where round 8 left off.

   1. Cart-page cross-sells: the block was already in the cart
      template and renders fine - it was only centre-aligned
      against a left-aligned catalogue.
   2. White-backed product photos. Every product image in this
      catalogue ships with an opaque white background; the site
      already handles that with mix-blend-mode:multiply, but the
      original rules only cover .product-small cards inside
      #main. The PDP gallery, the cart cross-sells and the mini
      cart were left out, which is where the white boxes show.
      This extends the SAME idiom rather than inventing another.
   3. The mini cart / side cart panel: raw white, remove buttons
      squashed into 24x44 ovals by border-radius:100% on a
      non-square box, and a lime-green native progress bar.
   4. Mobile menu: nine category links sat as visual equals next
      to the four real destinations.
   ========================================================== */

/* ---------- 1. cart cross-sells ---------------------------- */
html body .cross-sells-product .wc-block-components-product-title,
html body .cross-sells-product .wc-block-components-product-price{
  text-align:left !important;
}
html body .cross-sells-product .wc-block-components-product-title{
  margin:0 0 4px !important; font-size:14.5px !important;
  font-weight:600 !important; line-height:1.35 !important;
}
html body .cross-sells-product a.wc-block-components-product-name{
  color:var(--ink) !important; text-decoration:none !important;
}
html body .cross-sells-product .wc-block-components-product-price{
  font-weight:700 !important; color:var(--ink) !important;
  font-variant-numeric:tabular-nums !important;
}
html body .cross-sells-product .wc-block-components-product-rating-stars{
  display:none !important;
}

/* ---------- 2. white-backed photos ------------------------- */
html body .woocommerce-product-gallery img,
html body .cross-sells-product .wc-block-components-product-image img,
html body ul.woocommerce-mini-cart li.mini_cart_item img,
html body [class*="wishlist"] .box-image img{
  mix-blend-mode:multiply !important;
}

/* ---------- 3. mini cart / side cart ----------------------- */
html body #cart-popup,
html body #cart-popup .cart-popup-inner{ background:var(--cream) !important; }
html body #cart-popup .cart-popup-inner{ padding:22px 20px !important; }
html body #cart-popup .cart-popup-title span{
  font-size:14px !important; letter-spacing:.14em !important;
  font-weight:700 !important; color:var(--ink) !important;
}
html body #cart-popup .cart-popup-title .is-divider{
  background:var(--sand) !important; height:1px !important;
  width:100% !important; max-width:none !important; margin:14px 0 4px !important;
}
html body ul.woocommerce-mini-cart li.mini_cart_item{
  display:grid !important;
  grid-template-columns:56px 1fr auto !important;
  align-items:center !important; gap:14px !important;
  padding:14px 0 !important; margin:0 !important;
  border-bottom:1px solid var(--sand) !important;
}
html body ul.woocommerce-mini-cart li.mini_cart_item > a:not(.remove){
  grid-column:1 !important; grid-row:1 !important;
  display:block !important; width:56px !important; height:56px !important;
  background:var(--tile) !important; border-radius:12px !important;
  overflow:hidden !important; padding:6px !important; margin:0 !important;
  font-size:14.5px !important; font-weight:600 !important; color:var(--ink) !important;
}
html body ul.woocommerce-mini-cart li.mini_cart_item > a:not(.remove) img{
  width:100% !important; height:100% !important; object-fit:contain !important;
  margin:0 !important; float:none !important; border-radius:0 !important;
  background:transparent !important; padding:0 !important;
}
html body ul.woocommerce-mini-cart li.mini_cart_item .ux-mini-cart-qty{
  grid-column:2 !important; font-size:13px !important; color:var(--muted) !important;
}
html body ul.woocommerce-mini-cart li.mini_cart_item .ux-mini-cart-qty .amount{
  color:var(--ink) !important; font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
}
/* was a 24x44 oval: border-radius:100% on a non-square box */
html body ul.woocommerce-mini-cart li.mini_cart_item a.remove{
  position:static !important; grid-column:3 !important;
  width:30px !important; height:30px !important; min-width:0 !important;
  padding:0 !important; margin:0 !important;
  border-radius:50% !important; border:1px solid var(--sand) !important;
  background:transparent !important; color:var(--ink) !important;
  font-size:17px !important; line-height:28px !important; text-align:center !important;
  opacity:1 !important; flex:0 0 auto !important;
}
html body ul.woocommerce-mini-cart li.mini_cart_item a.remove:hover{
  background:var(--ink) !important; color:var(--cream) !important;
  border-color:var(--ink) !important;
}
html body .ux-mini-cart-footer{ border-top:0 !important; padding-top:8px !important; }
html body .left-to-free-shipping p{
  font-size:13px !important; color:var(--muted) !important; margin:0 0 8px !important;
}
html body .left-to-free-shipping progress{
  -webkit-appearance:none !important; appearance:none !important;
  width:100% !important; height:6px !important; border:0 !important;
  border-radius:99px !important; background:var(--sand) !important;
  color:var(--ink) !important; overflow:hidden !important;
}
html body .left-to-free-shipping progress::-webkit-progress-bar{
  background:var(--sand) !important; border-radius:99px !important;
}
html body .left-to-free-shipping progress::-webkit-progress-value{
  background:var(--ink) !important; border-radius:99px !important;
}
html body .left-to-free-shipping progress::-moz-progress-bar{
  background:var(--ink) !important; border-radius:99px !important;
}
html body p.woocommerce-mini-cart__total{
  display:flex !important; justify-content:space-between !important;
  align-items:baseline !important;
  border-top:1px solid var(--sand) !important; border-bottom:0 !important;
  margin:14px 0 0 !important; padding:14px 0 0 !important;
  font-size:15px !important; color:var(--ink) !important;
}
html body p.woocommerce-mini-cart__total .amount{
  font-size:19px !important; font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
}
html body p.woocommerce-mini-cart__buttons{
  display:flex !important; flex-direction:column !important;
  gap:10px !important; margin:16px 0 0 !important;
}
html body p.woocommerce-mini-cart__buttons a.button{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important; margin:0 !important; min-height:50px !important;
  border-radius:99px !important; font-size:15px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  background:transparent !important; color:var(--ink) !important;
  border:1.5px solid var(--ink) !important;
}
html body p.woocommerce-mini-cart__buttons a.button.checkout{
  background:var(--ink) !important; color:var(--cream) !important;
}

/* ---------- 4. mobile menu --------------------------------- */
html body #main-menu.mobile-sidebar{ background:var(--cream) !important; }
html body #main-menu .sidebar-menu > li > a{
  font-size:16px !important; font-weight:600 !important;
  color:var(--ink) !important; padding:13px 22px !important;
  border-bottom:1px solid var(--sand) !important;
}
html body #main-menu .sidebar-menu li li > a{
  font-size:14.5px !important; font-weight:500 !important;
  color:var(--muted) !important; padding:10px 22px 10px 34px !important;
  border-bottom:0 !important;
}
html body #main-menu .sidebar-menu > li.current-menu-item > a{ color:var(--ink) !important; }

/* ---------- 5. product grid: pin the price to the card bottom ----
   On the shop and category grids a two-line title pushed its price
   down, so the price sits on the same line as its neighbours only
   when every title happens to be the same length. Flatsome's
   equalize-box evens the card heights but not the content inside
   them. Chain the flex column all the way down and let the price
   wrapper take the slack.
   Note: .box is not a direct child of .col - Flatsome inserts a
   .col-inner between them, and only on some renders, so these are
   descendant selectors on purpose.                                 */
html body .products.row > .product-small.col{
  display:flex !important; flex-direction:column !important;
}
html body .products.row > .product-small.col > .col-inner{
  display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important; min-height:0 !important;
}
html body .products.row > .product-small.col .box{
  display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important; height:auto !important; min-height:0 !important;
}
html body .products.row > .product-small.col .box-text{
  display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important; min-height:0 !important;
}
/* flex children default to min-width:auto, which lets a nowrap
   category eyebrow force the card wider than its column */
html body .products.row > .product-small.col .box-text > *{
  min-width:0 !important; max-width:100% !important;
}
html body .products.row > .product-small.col .box-text > .price-wrapper{
  margin-top:auto !important;
}

/* same bottom-alignment for the cross-sell cards too: the block is a
   CSS grid, so the items already stretch - they just needed the
   internal column and somewhere for the slack to go */
/* sn-mobile-v2-css carries body.sn-mobile #main .cross-sells-product
   {display:block!important} - an id, so class repetition alone loses.
   These selectors include #main to outrank it. */
html body #main .cross-sells-product.cross-sells-product,
html body .cross-sells-product.cross-sells-product.cross-sells-product{
  display:flex !important; flex-direction:column !important;
}
html body #main .cross-sells-product > div:first-child,
html body .cross-sells-product.cross-sells-product > div:first-child{
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important;
}
html body #main .cross-sells-product > div:first-child > *,
html body .cross-sells-product.cross-sells-product > div:first-child > *{ min-width:0 !important; }
html body #main .cross-sells-product .wc-block-components-product-price,
html body .cross-sells-product.cross-sells-product .wc-block-components-product-price{
  margin-top:auto !important; display:block !important;
}

/* ---------- 6. make the whole tile a link ------------------
   The <a> around the product image had height 0: its only child
   is an absolutely positioned <img>, so the anchor had no box of
   its own and only the product NAME was reliably clickable.
   Give the anchor the tile's box and lift the controls above it. */
html body .product-small .box-image{ position:relative !important; }
/* the image wrapper is .image-fade_in_back on archives but a BARE div
   on the homepage and related rows - match both, never .image-tools */
html body .product-small .box-image > div:not(.image-tools){ position:static !important; }
/* z-index stays auto on purpose: a positioned element WITH a z-index
   creates a stacking context, and mix-blend-mode:multiply then blends
   against that context instead of the tile - which brings the white
   photo backgrounds straight back. Positioned + z-index:auto gives the
   anchor its box without isolating the blend. */
html body .product-small .box-image > div:not(.image-tools) > a{
  position:absolute !important;
  left:0 !important; top:0 !important; right:0 !important; bottom:0 !important;
  display:block !important; z-index:auto !important;
}
html body .product-small .box-image .image-tools,
html body .product-small .box-image button.sn-card-wish,
html body .product-small .box-image form.cart{ z-index:4 !important; }

/* ---------- 7. title alignment + type size -----------------
   .title-wrapper carries margin:0 auto. In the old block layout
   that did nothing; inside the flex column added in section 5 it
   centred and shrank the title while the price stayed left. */
html body .products.row > .product-small.col .box-text > .title-wrapper{
  margin-left:0 !important; margin-right:0 !important; width:100% !important;
}
html body .products.row .product-small .name a{ font-size:16px !important; }
html body .products.row .product-small .price,
html body .products.row .product-small .price .amount{ font-size:16.5px !important; }

/* ---------- 8. wishlist cards ------------------------------
   The <img> carried the tile as its OWN background plus 24px
   padding AND mix-blend-mode:multiply. Multiply then blended the
   img's own tile background against the page, so the padding ring
   came out darker than the photo area - two nested boxes.
   The surface has to live on an element that does NOT blend, and
   the card markup (article > a > img + h2) has no image wrapper,
   so the anchor's ::before provides it.
   The img stays position:relative with z-index AUTO on purpose -
   a z-index here would isolate the blend again.                */
html body .sn-saved-card > a{ position:relative !important; display:block !important; }
html body .sn-saved-card > a::before{
  content:"" !important; position:absolute !important;
  left:0 !important; right:0 !important; top:0 !important;
  aspect-ratio:1/1 !important;
  background:var(--tile) !important; border-radius:18px !important;
}
html body .sn-saved-card > a > img{
  position:relative !important;
  background:transparent !important; border-radius:0 !important;
  padding:24px !important; mix-blend-mode:multiply !important;
}
/* The remove button is a 34x34 circle carrying a 55.2px line-height
   from an inherited rule, which shoved the x below centre. */
html body .sn-saved-card button{
  display:flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important; font-size:19px !important; padding:0 !important;
}
/* shop cards set product titles in sentence case; match them */
html body .sn-saved-card h2{
  text-transform:none !important; font-size:15px !important; letter-spacing:0 !important;
}


/* --- ROOT CAUSE of "product images are not clickable" (2026-09-26) ---
   Flatsome renders two .image-tools overlays per card. Both are EMPTY
   (quick view and grid tools are off) yet both stretch across the whole
   .box-image at z-index 4 and become visible on :hover. Hover, then click,
   and the click lands on an empty div. That is why it only ever failed for
   a real cursor and never for a scripted click - a scripted click never
   hovers first. Let pointer events through the empty container, keep them
   on anything that might ever render inside it. */
html body .product-small .box-image .image-tools{ pointer-events:none !important; }
html body .product-small .box-image .image-tools a,
html body .product-small .box-image .image-tools button,
html body .product-small .box-image .image-tools input,
html body .product-small .box-image .image-tools .wishlist-button,
html body .product-small .box-image .image-tools .quick-view{ pointer-events:auto !important; }


/* --- hero card: kill the nested tile (2026-09-26) ---
   .sn-hero-card is already a tile in the same cream as the .box-image tile
   inside it, so the only thing that reads is the inner tile's drop shadow -
   a rectangle floating for no reason. One tile per product. */
html body .sn-hero-card .box-image{ background:transparent !important; box-shadow:none !important; }


/* --- phone cart: checkout before the recommendations (2026-09-26) ---
   The block cart nests the cross-sells INSIDE .wc-block-cart__main, so on a
   phone the totals and the Apmoketi button land after every recommended
   product - measured at 4084px down on a 24-item cart. display:contents
   dissolves the main column so its children become flex items of
   .wc-block-cart directly, which lets order: put the sidebar in front of the
   cross-sells without touching the React tree. Capped at 780px because
   WooCommerce switches the sidebar layout to two columns at 782px. */
@media (max-width:780px){
  html body .wc-block-cart .wc-block-cart__main{ display:contents !important; }
  html body .wc-block-cart .wc-block-cart-items{ order:1 !important; }
  html body .wc-block-cart .wc-block-cart__sidebar{ order:2 !important; }
  html body .wp-block-woocommerce-cart-cross-sells-block{ order:3 !important; }
}