/* Result visualization slides in the WooCommerce product gallery (Master 019).
   The image file is text-free; the panel labels and the disclosure live here. */

.woocommerce-product-gallery__image.cc-viz{position:relative}

/* A sitewide rule crops every gallery image to a square. A visualization is a
   two-panel comparison; cropping it would cut a panel off, so the slide keeps
   the file's own proportions. The ratio arrives per slide as --cc-viz-ar, so
   portrait, landscape and square comparisons all render uncropped; the 4:5
   fallback is the shape the first set of visualizations was built at. */
body.single-product.woocommerce div.product .woocommerce-product-gallery__image.cc-viz img{
  aspect-ratio:var(--cc-viz-ar,1122/1402)!important;object-fit:cover!important;height:auto!important;width:100%!important;
}
body.single-product.woocommerce div.product .woocommerce-product-gallery__image.cc-viz img.zoomImg{
  aspect-ratio:auto!important;width:auto!important;height:auto!important;object-fit:unset!important;
}

.cc-viz .cc-viz__lab{
  position:absolute;top:12px;z-index:3;pointer-events:none;
  max-width:calc(50% - 20px);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-size:10.5px;font-weight:600;
  line-height:1.25;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 11px;border-radius:999px;
  background:rgba(27,26,23,.74);color:#FBF7EF;
}
.cc-viz .cc-viz__lab--l{left:12px}
.cc-viz .cc-viz__lab--r{right:12px;text-align:right}


/* The zoom layer WooCommerce injects sits above the image; the labels must stay above it. */
.cc-viz .zoomImg{z-index:2}

@media (max-width: 480px){
  .cc-viz .cc-viz__lab{top:8px;font-size:8.5px;letter-spacing:.08em;padding:6px 8px;max-width:calc(50% - 14px)}
  .cc-viz .cc-viz__lab--l{left:8px}
  .cc-viz .cc-viz__lab--r{right:8px}
}

/* ---------------------------------------------------------------------------
   Phone layout of the single-product grid (fixed 15 September 2026).

   The product container collapses to one column at <=900px with
   `grid-template-columns: 1fr`. A bare `1fr` is `minmax(auto, 1fr)`, so the
   track can never be narrower than its widest item's min-content - and the
   gallery's min-content is 425px. Inside a 393px phone the content box is
   361px, so the track blew out to 424.5px and every child rendered ~8% wider
   than the screen: the title, the description, the payment buttons and the
   sticky bar were all cut off down the right-hand edge.

   `minmax(0, 1fr)` caps the track at the container, and `min-width: 0` lets the
   children shrink below their min-content instead of pushing the track wider.
   The desktop rule already does this correctly; only the mobile override did
   not.
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  html body.single-product.woocommerce div.product{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body.single-product.woocommerce div.product > *{min-width:0!important}
  html body.single-product.woocommerce div.product .woocommerce-product-gallery{
    max-width:100%!important;
  }

  /* form.cart is a nowrap flex row, so Square's digital-wallet block was pushed
     past the right edge and the Google Pay / Apple Pay button was cut in half.
     Let the row wrap and give the wallet its own full-width line under the
     quantity and Add to cart. */
  html body.single-product.woocommerce div.product form.cart{flex-wrap:wrap!important}
  html body.single-product.woocommerce div.product form.cart #wc-square-digital-wallet{
    flex:1 0 100%!important;width:100%!important;max-width:100%!important;margin-top:12px!important;
  }
  html body.single-product.woocommerce div.product form.cart #wc-square-digital-wallet > div,
  html body.single-product.woocommerce div.product form.cart .gpay-button-fill,
  html body.single-product.woocommerce div.product form.cart #gpay-button-online-api-id{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
}

/* ---------------------------------------------------------------------------
   Phone: the title sits between the breadcrumb and the gallery.

   assets/pdp.js moves the real <h1> above the gallery below 900px. Two things
   follow from that move:

   * main#main carried 136px of top padding. The header is position:sticky, so
     it is already in flow and that padding was never clearing anything - on a
     phone it was just an empty band under the breadcrumb. 28px is enough
     breathing room now that the title occupies that space.
   * the gallery was position:static, so its absolutely positioned zoom trigger
     anchored to a higher ancestor. With the title above it, the trigger landed
     beside the title instead of on the image. Give the gallery its own
     positioning context.
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  body.single-product main#main{padding-top:28px!important}

  html body.single-product.woocommerce div.product > h1.product_title{
    margin:0!important;
  }

  html body.single-product.woocommerce div.product .woocommerce-product-gallery{
    position:relative!important;
  }
}