/* Ward Store — single product page (Claude Design v2). Logical properties throughout (RTL/LTR). */

.ward-pd{padding-bottom:clamp(40px,5vw,64px)}
.ward-pd-top{display:flex;flex-wrap:wrap;gap:clamp(20px,3.8vw,48px);align-items:flex-start}

/* ---------- Media gallery ---------- */
/* Stage = square, capped in height (--ward-stage-max) so it never dominates the first screen; it widens rather than grows taller.
   container-type:size → the image can size itself against the stage (cqw / cqh). */
.ward-pd-media{--ward-stage-max:440px;flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:12px}
.ward-gallery-main{position:relative;width:100%;aspect-ratio:1/1;max-height:var(--ward-stage-max);min-height:0;border-radius:var(--r-lg);overflow:clip;background:var(--ward-surface);container-type:size} /* min-height:0 → tall media can never stretch the stage; width:100% → the stage always spans its column (without it Firefox/Safari carry max-height through aspect-ratio onto the width → a narrow square at the column start, i.e. an empty strip next to the details) */
.ward-gallery-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ward-gallery-track::-webkit-scrollbar{display:none}
.ward-gallery-track:focus-visible{outline:2px solid var(--ward-ink);outline-offset:-4px}
.ward-gm-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
.ward-gm-zoom{all:unset;position:absolute;inset:0;cursor:zoom-in}
/* Where the crop limit leaves bands (very tall / very wide / tiny photos), the photo's own outer edge is stretched across them
   and softened, so the stage always reads as filled (a plain studio background simply continues). Tall photos extend their
   left / right edges, wide ones (.is-wide) their top / bottom edges; both halves sit behind the photo. Physical sides on purpose:
   the photo itself is never mirrored in RTL. */
.ward-gm-zoom::before,.ward-gm-zoom::after{content:"";position:absolute;z-index:0;background-image:var(--ward-img-bg,none);background-repeat:no-repeat;filter:blur(10px);pointer-events:none;
  top:-20px;bottom:-20px;width:calc(50% + 20px);background-size:4000% 100%}
.ward-gm-zoom::before{left:-20px;background-position:left center}
.ward-gm-zoom::after{right:-20px;background-position:right center}
.ward-gm-zoom.is-wide::before,.ward-gm-zoom.is-wide::after{left:-20px;right:-20px;width:auto;height:calc(50% + 20px);background-size:100% 4000%}
.ward-gm-zoom.is-wide::before{top:-20px;bottom:auto;background-position:center top}
.ward-gm-zoom.is-wide::after{top:auto;bottom:-20px;background-position:center bottom}
.ward-gm-zoom:focus-visible{outline:2px solid var(--ward-ink);outline-offset:-4px}
/* Controlled cover: the image fills the stage at its own ratio (--ward-img-r = source w/h, --ward-img-w = source width, both set
   per image in the template), centred. Limits: at most 12% of the image's length is cropped away (6% per side; v2.8.3, was 30% — tightly framed products lost their ends on wide stages) and it is never
   shown wider than 2x its source, so very tall / very wide / tiny photos keep slim bands instead of losing the product.
   Fallback (no container units / no ratio): plain cover — fills, never distorts. The lightbox still shows the whole photo. */
.ward-gm-slide img{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display:block;max-width:none;max-height:none;
  width:100%;height:100%;object-fit:cover;object-position:center;
  --ward-img-h:min(max(100cqh,100cqw / var(--ward-img-r,1)),100cqh / .88,100cqw / (.88 * var(--ward-img-r,1)),var(--ward-img-w,9999px) * 2 / var(--ward-img-r,1));
  height:var(--ward-img-h);width:calc(var(--ward-img-h) * var(--ward-img-r,1))}
.ward-gm-slide.is-video{background:#1B1B1F}
.ward-gm-play{all:unset;cursor:pointer;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff}
.ward-gm-play:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.ward-gm-play-icon{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--ward-ink);display:grid;place-items:center;transition:transform .15s}
.ward-gm-play-icon .ward-i{margin-inline-start:4px}
[dir="rtl"] .ward-gm-play-icon .ward-i{margin-inline-start:0;margin-inline-end:4px;transform:scaleX(-1)}
.ward-gm-play:hover .ward-gm-play-icon{transform:scale(1.05)}
.ward-gm-play-label{font-size:13px;color:#D6D7DA}
.ward-gm-slide.is-playing iframe,.ward-gm-slide.is-playing video{width:100%;height:100%;border:0;display:block;background:#000}
.ward-gm-slide.is-placeholder .ward-product-placeholder{width:100%;height:100%}
.ward-gm-badge{position:absolute;top:16px;inset-inline-start:16px;z-index:2;background:var(--ward-pink);color:#fff;font-size:13px;font-weight:800;padding:5px 10px 4px;border-radius:7px}
.ward-gm-actions{position:absolute;top:12px;inset-inline-end:12px;z-index:2;display:flex;flex-direction:column;gap:8px}
.ward-gm-act{width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ward-ink);display:grid;place-items:center;box-shadow:var(--shadow-1);cursor:pointer;padding:0}
.ward-gm-act:hover,.ward-gm-act[aria-pressed="true"]{color:var(--ward-pink)}
.ward-gm-act[aria-pressed="true"] .ward-i{fill:currentColor}
.ward-gm-counter{position:absolute;bottom:14px;inset-inline-end:14px;z-index:2;background:rgba(17,17,20,.7);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);pointer-events:none}
.ward-gm-slide.is-playing ~ .ward-gm-counter{display:none}

.ward-thumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.ward-thumbs::-webkit-scrollbar{display:none}
.ward-thumb{width:clamp(60px,5.6vw,76px);aspect-ratio:1/1;flex:none;border-radius:var(--r);border:2px solid transparent;background:var(--ward-surface);padding:0;overflow:hidden;cursor:pointer;display:grid;place-items:center}
.ward-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ward-thumb.is-active{border-color:var(--ward-ink)}
.ward-thumb.is-video{background:#1B1B1F;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:700}

/* ---------- Info ---------- */
.ward-pd-info{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:18px}
.ward-pd-head{display:flex;flex-direction:column;gap:10px}
.ward-pd-cat{align-self:flex-start;font-size:13px;font-weight:700;color:var(--ward-pink)}
.ward-pd-title{margin:0;font-size:clamp(23px,2.3vw,30px);font-weight:800;line-height:1.3;text-wrap:pretty}
.ward-pd-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.ward-pd-rating{display:inline-flex;align-items:center;gap:8px;color:var(--ward-ink)}
.ward-pd-rating span{color:var(--ward-muted);text-decoration:underline}
.ward-pd-rating:hover span{color:var(--ward-pink)}
.ward-pd-sep{width:4px;height:4px;border-radius:50%;background:#D5D6DA}
.ward-pd-stock{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ward-success)}
.ward-pd-stock-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.ward-pd-stock.is-low{color:var(--ward-warning-ink)}
.ward-pd-stock.is-out{color:var(--ward-muted)}
.ward-pd-stock.is-back{color:var(--ward-warning-ink)}
.ward-stars-rate{--ward-star:16px;position:relative;display:inline-block;font-size:var(--ward-star);line-height:1;letter-spacing:1px;white-space:nowrap;vertical-align:middle}
.ward-stars-rate::before{content:"★★★★★";color:#E6E6E9}
.ward-stars-rate::after{content:"★★★★★";color:#F2A516;position:absolute;inset-block-start:0;inset-inline-start:0;width:var(--ward-rate);overflow:hidden}
.ward-pd-price-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0;border-block:1px solid var(--ward-line-2)}
.ward-pd-price{font-size:clamp(26px,2.3vw,30px);font-weight:800;line-height:1}
.ward-pd-from{font-size:15px;font-weight:500;color:var(--ward-muted)}
.ward-pd-old{font-size:17px}
.ward-pd-save{background:var(--ward-tint);color:var(--ward-pink-2);font-size:13px;font-weight:800;padding:5px 10px 4px;border-radius:7px}
.ward-pd-short{margin:0;font-size:15px;line-height:1.75;color:var(--ward-ink-2)}
.ward-pd-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 16px}
.ward-pd-benefits .ward-feature{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5}
.ward-pd-check{width:22px;height:22px;border-radius:50%;background:var(--ward-success-bg);color:var(--ward-success);display:grid;place-items:center;flex:none}

/* ---------- Options / swatches (drive WooCommerce's hidden selects) ---------- */
.ward-pd-form{margin:0;display:flex;flex-direction:column;gap:16px}
.ward-attrs{display:flex;flex-direction:column;gap:16px}
.ward-attr{display:flex;flex-direction:column;gap:10px;border-radius:var(--r);transition:box-shadow .2s}
.ward-attr.is-attention{box-shadow:0 0 0 3px var(--ward-tint),0 0 0 4px var(--ward-pink)}
.ward-attr-label{font-size:14px}
.ward-attr-label span{color:var(--ward-muted)}
.ward-swatches{display:flex;flex-wrap:wrap;gap:10px}
.ward-swatch{position:relative;cursor:pointer;font:inherit;color:var(--ward-ink);background:#fff}
.ward-swatch.is-color{width:44px;height:44px;border-radius:50%;padding:0;border:2px solid var(--ward-line);display:grid;place-items:center}
.ward-swatch-dot{width:32px;height:32px;border-radius:50%;border:1px solid rgba(17,17,20,.12)}
.ward-swatch.is-chip{min-height:44px;min-width:52px;padding:0 16px;border-radius:var(--r);border:1.5px solid var(--ward-line);font-size:14px;font-weight:500}
.ward-swatch[aria-checked="true"]{border-color:var(--ward-ink)}
.ward-swatch.is-chip[aria-checked="true"]{background:var(--ward-surface-3);font-weight:800}
.ward-swatch:hover:not(:disabled){border-color:var(--ward-ink)}
.ward-swatch:disabled{cursor:not-allowed;opacity:.4}
.ward-swatch.is-out::after,.ward-swatch.is-unavailable::after{content:"";position:absolute;inset:50% 4px auto;height:1.5px;background:var(--ward-ink);transform:rotate(-35deg)}
.ward-swatch:focus-visible{outline:2px solid var(--ward-ink);outline-offset:2px}
.ward-native-select{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ward-reset{align-self:flex-start;font-size:13px;color:var(--ward-muted);text-decoration:underline}
.ward-pd .woocommerce-variation-price,.ward-pd .woocommerce-variation-availability{display:none}
.ward-pd .woocommerce-variation-description{font-size:14px;color:var(--ward-ink-2)}
.ward-pd .wc-no-matching-variations{font-size:14px;color:#B42318;margin:0}
.ward-pd .single_variation_wrap{display:flex;flex-direction:column;gap:16px}

/* ---------- Quantity + buttons ---------- */
.ward-pd-qty-row{display:flex;flex-direction:column;gap:10px}
.ward-pd-label{font-size:14px;color:var(--ward-muted)}
.ward-pd-qty-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ward-pd .ward-qty{display:flex;align-items:center;height:48px;border:1.5px solid var(--ward-line);border-radius:var(--r);background:#fff;overflow:hidden}
.ward-pd .ward-qty button{width:46px;height:100%;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--ward-ink);padding:0}
.ward-pd .ward-qty button:hover{background:var(--ward-surface-3)}
.ward-pd .ward-qty .qty{width:44px;height:100%;border:0;text-align:center;font-size:16px;font-weight:700;background:none;-moz-appearance:textfield;padding:0}
.ward-pd .ward-qty .qty::-webkit-inner-spin-button,.ward-pd .ward-qty .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ward-pd-shipnote{font-size:13px;color:var(--ward-ink-2)}
.ward-pd-buttons{display:flex;gap:10px;flex-wrap:wrap}
.ward-pd-add,.ward-pd-buy{flex:1 1 180px;height:54px;border-radius:var(--r);border:0;font-family:inherit;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:#fff;transition:background-color .15s,opacity .15s}
.ward-pd-add{background:var(--ward-ink);font-weight:700}
.ward-pd-add:hover{background:#2A2A30}
.ward-pd-buy{background:var(--ward-pink);font-weight:800}
.ward-pd-buy:hover{background:var(--ward-pink-2)}
.ward-pd-add.disabled,.ward-pd-buy.disabled{opacity:.45;cursor:not-allowed}
.ward-pd-add.is-loading{opacity:.7;pointer-events:none}
.ward-pd-add.is-added{background:var(--ward-success)}
.ward-pd-need{margin:0;font-size:13px;font-weight:700;color:#B42318}
.ward-pd-notice{border-radius:var(--r);padding:12px 14px;font-size:14px;font-weight:500}
.ward-pd-notice.is-error{background:var(--ward-error-bg);color:#B42318}
.ward-pd-notice li{list-style:none}
.ward-pd-soldout{display:flex;flex-direction:column;gap:12px}
.ward-pd-soldout p{margin:0;font-size:15px;font-weight:700;color:var(--ward-ink-2)}
.ward-pd-wa{height:48px;border-radius:var(--r);border:1.5px solid #CDEFD9;background:#F2FBF5;color:#0B6B3A;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.ward-pd-wa:hover{color:#0B6B3A;border-color:var(--ward-whatsapp)}
.ward-pd-delivery{list-style:none;margin:0;padding:0;border:1px solid var(--ward-line-2);border-radius:16px;overflow:clip}
.ward-pd-delivery li{display:flex;align-items:center;gap:14px;padding:14px 16px}
.ward-pd-delivery li + li{border-top:1px solid #F1F1F3}
.ward-pd-delivery-icon{width:38px;height:38px;border-radius:var(--r-sm);background:var(--ward-surface);display:grid;place-items:center;flex:none}
.ward-pd-delivery-text{display:flex;flex-direction:column;gap:1px}
.ward-pd-delivery-text b{font-size:14px}
.ward-pd-delivery-text span{font-size:12.5px;color:var(--ward-muted)}

/* ---------- Sticky section tabs ---------- */
.ward-pd-tabs{position:sticky;top:0;z-index:20;background:#fff;margin:clamp(36px,4.4vw,56px) calc(-1 * var(--gutter)) 0;padding-inline:var(--gutter);border-bottom:1px solid var(--ward-line);display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.ward-pd-tabs::-webkit-scrollbar{display:none}
/* v3.1.4 mobile swipe: thumbnails and section tabs scroll on their own (no chaining into the page / browser history
   gesture); thumbnails settle gently at the start edge. */
@media (max-width:767px){
  .ward-thumbs{scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain}
  .ward-thumb{scroll-snap-align:start}
  .ward-pd-tabs{overscroll-behavior-x:contain}
}
.ward-pd-tab{padding:16px 0 13px;font-size:15px;font-weight:500;color:var(--ward-muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.ward-pd-tab:hover{color:var(--ward-ink)}
.ward-pd-tab.is-active{color:var(--ward-ink);font-weight:800;border-bottom-color:var(--ward-ink)}
.ward-pd [id^="ward-"],.ward-pd #reviews{scroll-margin-top:72px}

/* ---------- Details ---------- */
.ward-pd-details{display:flex;flex-wrap:wrap;gap:clamp(28px,4.4vw,56px);padding-top:clamp(24px,3.2vw,40px)}
.ward-pd-desc{flex:1.4 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px}
.ward-pd-side{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:28px}
.ward-pd-side section{display:flex;flex-direction:column;gap:14px}
.ward-pd-h2{margin:0;font-size:clamp(19px,1.9vw,24px);font-weight:800}
.ward-pd-h3{margin:14px 0 0;font-size:17px;font-weight:700}
.ward-pd-prose{font-size:16px;line-height:1.8;color:var(--ward-ink-3);text-align:start;overflow-wrap:anywhere}
.ward-pd-prose > *:first-child{margin-top:0}
.ward-pd-prose p{margin:0 0 1em}
.ward-pd-prose img{border-radius:16px;height:auto}
.ward-pd-prose :where(ul,ol){padding-inline-start:1.4em}
.ward-pd-box{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ward-pd-box li{min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--ward-surface);font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px}
.ward-pd-box .ward-i{color:var(--ward-muted)}
.ward-pd-specs{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ward-line-2);border-radius:14px;overflow:hidden;font-size:14px}
.ward-pd-specs th,.ward-pd-specs td{padding:12px 14px;text-align:start;vertical-align:top;border-bottom:1px solid #F1F1F3}
.ward-pd-specs tr:last-child th,.ward-pd-specs tr:last-child td{border-bottom:0}
.ward-pd-specs th{width:42%;background:#FAFAFB;color:var(--ward-ink-2);font-weight:400}
.ward-pd-specs td{font-weight:500}
.ward-pd-acc{border-bottom:1px solid var(--ward-line)}
.ward-pd-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:15px;font-weight:700;cursor:pointer}
.ward-pd-acc summary::-webkit-details-marker{display:none}
.ward-pd-acc .ward-i-minus,.ward-pd-acc[open] .ward-i-plus{display:none}
.ward-pd-acc[open] .ward-i-minus{display:block}
.ward-pd-acc p{margin:0 0 14px;font-size:14px;line-height:1.75;color:var(--ward-ink-2)}

/* ---------- Reviews ---------- */
.ward-reviews{padding-top:clamp(36px,4.4vw,56px);display:flex;flex-direction:column;gap:20px}
.ward-rv-n{color:var(--ward-muted);font-weight:500}
.ward-rv-layout{display:flex;flex-wrap:wrap;gap:clamp(20px,3.2vw,40px);align-items:flex-start}
.ward-rv-summary{flex:0 1 300px;min-width:240px;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:16px;background:var(--ward-surface-2)}
.ward-rv-avg{display:flex;align-items:center;gap:10px}
.ward-rv-avg b{font-size:44px;line-height:1}
.ward-rv-based{font-size:13px;color:var(--ward-muted)}
.ward-rv-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ward-rv-bars li{display:grid;grid-template-columns:12px 1fr 36px;align-items:center;gap:10px;font-size:12px;color:var(--ward-ink-2)}
.ward-rv-bar{height:6px;border-radius:3px;background:var(--ward-line);overflow:hidden}
.ward-rv-bar span{display:block;height:100%;background:var(--ward-ink);border-radius:3px}
.ward-rv-pct{text-align:end}
.ward-rv-none{margin:0;font-size:14px;color:var(--ward-ink-2)}
.ward-rv-main{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:24px}
.ward-rv-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.ward-rv-card{border:1px solid var(--ward-line-2);border-radius:16px;padding:18px}
.ward-rv-card article{display:flex;flex-direction:column;gap:10px}
.ward-rv-card .children{list-style:none;margin:12px 0 0;padding:0 0 0 0;padding-inline-start:16px;border-inline-start:2px solid var(--ward-line-2)}
.ward-rv-card .children .ward-rv-card{border:0;padding:8px 0}
.ward-rv-head{display:flex;align-items:center;gap:10px}
.ward-rv-avatar{width:38px;height:38px;border-radius:50%;background:var(--ward-tint);color:var(--ward-pink);display:grid;place-items:center;font-weight:800;flex:none}
.ward-rv-who{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.ward-rv-who b{font-size:14px}
.ward-rv-verified{font-size:12px;color:var(--ward-success);display:inline-flex;align-items:center;gap:4px}
.ward-rv-date{font-size:12px;color:var(--ward-subtle);white-space:nowrap}
.ward-rv-text{font-size:14px;line-height:1.7;color:var(--ward-ink-3)}
.ward-rv-text p{margin:0}
.ward-rv-pending{margin:0;font-size:12px;color:var(--ward-warning-ink)}
.ward-rv-pages ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.ward-rv-pages a,.ward-rv-pages span{min-width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--ward-line);display:grid;place-items:center;font-weight:700}
.ward-rv-pages .current{background:var(--ward-ink);color:#fff;border-color:var(--ward-ink)}
.ward-rv-form{border-top:1px solid var(--ward-line-2);padding-top:20px}
.ward-rv-form form{display:flex;flex-direction:column;gap:14px;max-width:640px}
.ward-rv-form .ward-field{margin:0;display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
.ward-rv-form input[type=text],.ward-rv-form input[type=email],.ward-rv-form textarea{width:100%;min-height:48px;border:1.5px solid var(--ward-line);border-radius:var(--r);padding:10px 14px;font-size:16px;font-weight:400;background:#fff}
.ward-rv-form textarea{min-height:120px;resize:vertical}
.ward-rv-form input:focus,.ward-rv-form textarea:focus{outline:0;border-color:var(--ward-ink)}
.ward-rv-form .required{color:var(--ward-error)}
.ward-rv-form .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:13px;margin:0}
.ward-rv-form .form-submit{margin:0}
.ward-rv-form .ward-btn{min-height:50px;padding:0 28px;font-size:15px}
/* beats WooCommerce's "#respond input#submit" (ID selector) grey button */
.ward-rv-form #respond input#submit.ward-btn{background:var(--ward-ink);color:#fff;border:0;border-radius:var(--r);font-family:inherit;font-weight:700;line-height:1.2}
.ward-rv-form #respond input#submit.ward-btn:hover{background:var(--ward-pink);color:#fff}
.ward-rv-verify{font-size:14px;color:var(--ward-ink-2)}
.ward-rate-input{border:0;margin:0;padding:0}
.ward-rate-input legend{font-size:14px;font-weight:700;padding:0;margin-bottom:6px}
.ward-rate-stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.ward-rate-stars input{position:absolute;opacity:0;width:1px;height:1px}
.ward-rate-stars label{font-size:30px;line-height:1;color:#D5D6DA;cursor:pointer;padding:4px;min-width:44px;min-height:44px;display:grid;place-items:center}
.ward-rate-stars input:checked ~ label,.ward-rate-stars label:hover,.ward-rate-stars label:hover ~ label{color:#F2A516}
.ward-rate-stars input:focus-visible + label{outline:2px solid var(--ward-ink);outline-offset:-4px;border-radius:8px}
.ward-rate-error{margin:6px 0 0;font-size:13px;font-weight:700;color:#B42318}
.ward-rate-input.is-invalid .ward-rate-stars{box-shadow:0 0 0 1.5px var(--ward-error);border-radius:var(--r)}

.ward-pd-related{padding-top:clamp(36px,4.4vw,56px)}

/* ---------- Mobile sticky purchase bar ---------- */
.ward-mobile-buy{display:none}
@media (max-width:1023.98px){
  body.single-product{--ward-bottom-ui:calc(80px + env(safe-area-inset-bottom))}
  .ward-mobile-buy{position:fixed;inset-inline:0;bottom:0;z-index:80;display:flex;align-items:center;gap:10px;background:#fff;box-shadow:var(--shadow-bar);padding:10px 16px calc(18px + env(safe-area-inset-bottom))}
  .ward-mobile-price{display:flex;flex-direction:column;flex:none;min-width:0;max-width:34%}
  .ward-mobile-price del{font-size:12px;line-height:1.1}
  .ward-mobile-price b{font-size:18px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ward-mobile-price .ward-pd-from{font-size:12px}
  .ward-bar-add{width:52px;height:52px;border-radius:var(--r);border:1.5px solid var(--ward-ink);background:#fff;color:var(--ward-ink);display:grid;place-items:center;flex:none;cursor:pointer;padding:0}
  .ward-bar-buy{flex:1;height:52px;border-radius:var(--r);border:0;background:var(--ward-pink);color:#fff;font-family:inherit;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;min-width:0;white-space:nowrap;padding:0 12px}
  .ward-bar-buy:hover{color:#fff;background:var(--ward-pink-2)}
  .ward-bar-buy.is-notify{background:var(--ward-ink)}
  .ward-mobile-buy .is-disabled{opacity:.5}
  /* While Add to cart / Buy now / Order on WhatsApp are on screen, the floating WhatsApp steps aside */
  body.single-product .ward-whatsapp{transition:opacity .2s,visibility .2s}
  body.single-product.ward-cta-in-view .ward-whatsapp{opacity:0;visibility:hidden;pointer-events:none}
}
@media (max-width:640px){
  .ward-pd .ward-crumbs{display:none}   /* media first on phones */
  .ward-pd-top{padding-top:0}
  .ward-pd-media{margin-inline:calc(-1 * var(--gutter));--ward-stage-max:min(84vw,44svh)}   /* slightly wider than tall, so price + actions rise */
  .ward-gallery-main{border-radius:0}
  .ward-thumbs{padding-inline:var(--gutter)}
  .ward-pd-buttons{flex-wrap:nowrap}
  .ward-pd-add,.ward-pd-buy{flex:1 1 0;min-width:0;font-size:15px;padding:0 8px}
}
@media (min-width:1024px){
  .ward-pd-top{flex-wrap:nowrap}   /* gallery + details always side by side from 1024px */
  .ward-pd-media{flex:0 1 480px;position:sticky;top:16px;--ward-stage-max:clamp(360px,calc(100svh - 360px),480px)}
}
@media (min-width:641px) and (max-width:1023.98px){
  .ward-pd-media{max-width:560px}   /* tablets: a compact stage instead of a very wide strip a filled photo would have to crop hard */
}

/* ---------- Lightbox ---------- */
.ward-lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(17,17,20,.95);color:#fff;overflow:hidden}
.ward-lightbox[open]{display:grid;place-items:center}
.ward-lightbox::backdrop{background:transparent}
.ward-lb-img{max-width:min(92vw,1100px);max-height:86dvh;object-fit:contain;user-select:none;-webkit-user-drag:none}
.ward-lb-close,.ward-lb-nav{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.ward-lb-close:hover,.ward-lb-nav:hover{background:rgba(255,255,255,.22)}
.ward-lb-close{top:16px;inset-inline-end:16px}
.ward-lb-nav{top:50%;transform:translateY(-50%)}
.ward-lb-nav.is-prev{inset-inline-start:16px}
.ward-lb-nav.is-next{inset-inline-end:16px}
.ward-lightbox.is-single .ward-lb-nav,.ward-lightbox.is-single .ward-lb-count{display:none}
.ward-lb-count{position:absolute;bottom:20px;inset-inline:0;text-align:center;font-size:13px;font-weight:700}
body.ward-lb-open{overflow:hidden}

/* ---------- Toast ---------- */
.ward-toast{position:fixed;z-index:120;inset-inline:16px;bottom:calc(var(--ward-bottom-ui) + 16px);margin-inline:auto;max-width:420px;background:var(--ward-ink);color:#fff;border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:500;box-shadow:var(--shadow-2);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;overflow-wrap:anywhere}
.ward-toast.is-on{opacity:1;transform:none}
.ward-toast a{color:#fff;font-weight:800;text-decoration:underline;white-space:nowrap}
@media (prefers-reduced-motion:reduce){ .ward-toast,.ward-gm-play-icon{transition:none} }