/* Zen Bliss product page: the WooCommerce markup around the zb blocks (spec-product-page.md 4).
   zb-pdp-sub, zb-facts, zb-trust, zb-fbt, zb-details, zb-batches, zb-faq and zb-sticky are styled by the ported zb.css;
   this file covers layout, gallery, price, pills, quantity, the add-to-cart button and the full-width bands.
   Sizes are Dawn's 10px-rem values in px (spec P1); breakpoints 750 / 990 as Dawn. */

/* ---- layout: media 55% / info 45% from 990px, 50/50 from 750px, info column sticky (spec 4.0) ----
   Gallery and summary are wrapped in .zb-product__main (product-page.php). That wrapper is the grid, so the sticky
   summary can only travel as far as the gallery row; the bands below (details, lab, reviews) flow normally. */
.zb-product::before,.zb-product::after{display:none}
.zb-product .zb-product__main{display:flow-root}
@media (min-width:750px){
  .zb-product .zb-product__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  .zb-product .zb-product__main::before,.zb-product .zb-product__main::after{display:none}
  /* Both columns are sticky, as Dawn's product__column-sticky on the media wrapper and the info container: the shorter
     one (usually the single image) follows the reader down the taller one, so no empty column is ever on screen. */
  .zb-product .zb-product__main > .woocommerce-product-gallery{grid-column:1;grid-row:1;width:auto!important;float:none!important;margin:0!important;position:sticky!important;top:calc(var(--zb-sticky-top,0px) + 30px)!important;z-index:2}   /* !important: Kadence/WooCommerce set div.images position:relative with higher specificity */
  .zb-product .zb-product__main > .summary{grid-column:2;grid-row:1;width:auto!important;float:none!important;margin:0!important;position:sticky;top:calc(var(--zb-sticky-top,0px) + 30px)}
}
@media (min-width:990px){.zb-product .zb-product__main{grid-template-columns:minmax(0,11fr) minmax(0,9fr);column-gap:50px}}

/* ---- gallery: stacked photos + lightbox, as Dawn's "stacked" media layout (spec 4.1; owner report 2026-10-17) ----
   No slider (product-page.php), so every photo is a plain figure child: full width one under the other from 750px,
   so the media column is as tall as Shopify's; on phones the first photo is full width and the rest are small tiles. */
/* WooCommerce's template hides the gallery inline (style="opacity: 0") until its JS has set up the slider; with no
   slider the stacked layout is final from the first paint, and waiting for the footer scripts kept the first photo
   (the LCP element) invisible for the whole JS download on phones (Lighthouse 2026-10-18 render delay). */
.zb-product .woocommerce-product-gallery{position:relative;margin-bottom:24px;width:100%!important;float:none!important;opacity:1!important}
.zb-product .woocommerce-product-gallery__wrapper{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.zb-product .woocommerce-product-gallery__image{flex:1 1 100%;margin:0}
.zb-product .woocommerce-product-gallery__image img{display:block;width:100%;height:auto;max-height:calc(100vh - 60px);object-fit:contain;border-radius:16px}
/* Kadence squashes every photo after the first to a 65px thumbnail strip when there is no slider (woocommerce.min.css
   ...__image:nth-child(n+2) img{height:65px}); stacked photos keep their own height. */
.zb-product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2) img{height:auto!important}
@media (max-width:749px){.zb-product .woocommerce-product-gallery__image:not(:first-child){flex:0 0 calc(25% - 9px)}}
.zb-product .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.zb-product .flex-control-thumbs li{width:64px!important;float:none!important;margin:0!important;padding:0}
.zb-product .flex-control-thumbs img{border:1px solid transparent;border-radius:10px;opacity:.6;cursor:pointer;transition:opacity .15s ease}
.zb-product .flex-control-thumbs img.flex-active,.zb-product .flex-control-thumbs img:hover{opacity:1;border-color:var(--zb-line,#dde5dd)}

/* ---- title and rating badge (spec 4.2, 4.3) ---- */
.zb-product .summary .product_title{margin:0 0 10px}
.zb-rating{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px}
.zb-rating .star-rating{float:none;margin:0;color:var(--zb-star,#e0a62b)}
.zb-rating__link{color:var(--zb-ink-2,#4d5b51);text-decoration:none}
.zb-rating__link:hover{text-decoration:underline}

/* ---- price: "$59.99 CAD", Sale / Sold out badges, shipping line (spec 4.5) ---- */
.zb-price{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 0 4px}
.zb-product .zb-price .price{margin:0;font-size:16px;font-weight:400;letter-spacing:1.3px;line-height:1.3;color:var(--zb-ink,#14201a)}
.zb-product .zb-price del{margin-right:8px;font-weight:400;color:var(--zb-ink-2,#4d5b51);opacity:1}
.zb-product .zb-price ins{text-decoration:none;font-weight:400;background:none}
.zb-price__badge{display:inline-block;padding:5px 13px 6px;border-radius:40px;background:var(--zb-green-900,#0f3a0c);color:#fff;font-size:12px;letter-spacing:1px;line-height:1}
.zb-price__ship{margin:0 0 15px;font-size:12px;letter-spacing:.7px;color:var(--zb-ink-2,#4d5b51)}
.zb-price__ship a{color:inherit;text-decoration:underline;text-underline-offset:.3em}
@media (min-width:750px){.zb-product .zb-price .price{font-size:18px}}

/* ---- WooCommerce form: variation table becomes pill rows, quantity then a full-width button (spec 4.6 to 4.8) ---- */
.zb-buy{margin:0 0 10px}
.zb-product form.cart{display:block;margin:0}
.zb-product form.cart:not(.variations_form),.zb-product .woocommerce-variation-add-to-cart{display:flex;flex-direction:column;align-items:flex-start}
.zb-product table.variations,.zb-product table.variations tbody,.zb-product table.variations tr,
.zb-product table.variations th,.zb-product table.variations td{display:block;width:auto;margin:0;padding:0;border:0;background:none;text-align:left}
.zb-product table.variations{margin:0 0 4px}
.zb-product table.variations th.label{display:none}
.zb-product .zb-variation-select{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.zb-product .reset_variations{display:none!important}
.zb-product .woocommerce-variation-price{display:none}
/* WooCommerce's availability line is never shown: Shopify printed no stock text; sold out shows on the price badge and the button. */
.zb-product .stock.out-of-stock,.zb-product .stock.in-stock,.zb-product .woocommerce-variation-availability{display:none}
.zb-product .single_variation_wrap .woocommerce-variation{margin:0}

.zb-pills{min-width:0;margin:0 0 12px;padding:0;border:0}
.zb-pills legend{float:none;width:auto;margin:0 0 6px;padding:0;border:0;font-size:13px;font-weight:400;letter-spacing:.4px;line-height:1.4;color:var(--zb-ink,#14201a)}
.zb-pill__input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.zb-pill{display:inline-block;margin:7px 5px 2px 0;padding:10px 20px;border:1px solid rgba(20,32,26,.55);border-radius:40px;background:#fff;color:var(--zb-ink,#14201a);font-size:14px;letter-spacing:1px;line-height:1;cursor:pointer;transition:border-color .1s ease}
.zb-pill:hover{border-color:var(--zb-ink,#14201a)}
.zb-pill__input:checked + .zb-pill,.zb-pill.is-selected{border-color:var(--zb-ink,#14201a);background:var(--zb-ink,#14201a);color:#fff}
.zb-pill__input:focus-visible + .zb-pill{outline:2px solid var(--zb-green,#1f6b17);outline-offset:2px}
.zb-pill__input.is-unavailable + .zb-pill{text-decoration:line-through;color:rgba(20,32,26,.55)}
.zb-pill__input.is-unavailable:checked + .zb-pill{color:#fff}
.zb-pills--static .zb-pill{cursor:default}

.zb-qty__label{display:block;margin:0 0 6px;font-size:13px;letter-spacing:.4px;color:var(--zb-ink,#14201a)}
.zb-product form.cart .quantity{display:flex;align-items:stretch;width:140px;min-height:45px;margin:0 0 15px!important;float:none!important;border:1px solid rgba(20,32,26,.55);border-radius:12px;background:#fff;overflow:hidden}
.zb-product form.cart .quantity .qty{flex:1 1 auto;width:auto!important;min-width:0;height:auto;margin:0;padding:0;border:0!important;border-radius:0;background:none;box-shadow:none!important;text-align:center;font-size:16px;color:var(--zb-ink,#14201a);-moz-appearance:textfield;appearance:textfield}
.zb-product form.cart .quantity .qty::-webkit-outer-spin-button,.zb-product form.cart .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zb-product form.cart .quantity .zb-qty__btn,.zb-product form.cart .quantity .zb-qty__btn:hover,.zb-product form.cart .quantity .zb-qty__btn:focus{flex:0 0 45px;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--zb-ink,#14201a);font:inherit;font-size:18px;line-height:1;cursor:pointer}
.zb-product form.cart .quantity:focus-within{border-color:var(--zb-ink,#14201a);box-shadow:0 0 0 1px var(--zb-ink,#14201a)}
.zb-product form.cart .quantity:has(input[type="hidden"]) .zb-qty__btn{display:none}

.zb-form-error{width:100%;margin:0 0 12px;font-size:14px;line-height:1.4;color:#b3261e}
.zb-fbt .zb-form-error{margin:0}
.zb-form-error[hidden],.zb-trust [hidden],.zb-fbt [hidden]{display:none!important}

.zb-pdp .zb-product form.cart button.single_add_to_cart_button,.zb-pdp .zb-buy .zb-buy__sold-out{width:100%;min-height:47px;margin:0;padding:0 30px;float:none;border:1px solid var(--zb-green,#1f6b17);border-radius:40px;background:var(--zb-green,#1f6b17);color:#fff;font:inherit;font-size:15px;letter-spacing:1px;line-height:1.2;box-shadow:none;cursor:pointer}
.zb-pdp .zb-product form.cart button.single_add_to_cart_button:not(.disabled):hover{background:var(--zb-green,#1f6b17);color:#fff;box-shadow:0 0 0 1px var(--zb-green,#1f6b17)}
.zb-pdp .zb-product form.cart button.single_add_to_cart_button.disabled,.zb-pdp .zb-buy .zb-buy__sold-out[disabled]{opacity:.5;cursor:not-allowed}
.zb-pdp .zb-product form.cart button.single_add_to_cart_button[aria-busy="true"]{opacity:.7;cursor:progress}

/* ---- frequently bought together extras (spec 4.10) ---- */
.zb-fbt__title{font-size:14px}
.zb-fbt .button[aria-busy="true"]{opacity:.6;cursor:progress}
.zb-fbt .button[disabled]{opacity:.5;cursor:not-allowed}

/* ---- sections after the summary: full-width bands without horizontal scroll (spec 4.11 to 4.14) ---- */
.zb-pdp-band{clear:both;padding:27px 0}
.zb-pdp-lab{padding:0}
.zb-pdp-also{padding-bottom:39px}
@media (min-width:750px){.zb-pdp-band{padding:36px 0}.zb-pdp-lab{padding:0}.zb-pdp-also{padding-bottom:52px}}
.zb-pdp-band .page-width{max-width:none;padding-left:0;padding-right:0}
/* The coloured band (lab results, scheme-2) is painted edge to edge by border-image, which never adds scroll width. */
.zb-pdp-band > .zb-scheme-2,.zb-pdp-band > .color-scheme-2{border-image:conic-gradient(var(--zb-bg,#eef4ef) 0 0) fill 0//0 100vmax}
.zb-details__gap{height:40px}
.zb-pdp-also .related-products__heading{margin:0 0 24px}

/* ---- phone sticky bar button (layout in zb.css) ---- */
.zb-sticky [data-zb-sticky-add]{flex:none;min-width:0;min-height:44px;padding:0 24px;border:1px solid var(--zb-green,#1f6b17);border-radius:40px;background:var(--zb-green,#1f6b17);color:#fff;font:inherit;font-size:15px;white-space:nowrap;cursor:pointer}