/* ============================================================
   Cleaning Monstar — Single product page (product-v1)
   Scoped to .cmp (the product <article>). Woo's own front-end
   sheets are dequeued on this page (inc/cm-product-page.php), so
   every Woo element the template prints is styled here: the cart
   form, notices, star ratings and the review form.
   ============================================================ */

.cmp{
  --mint-ink:#0E8A62;          /* accent dark enough for text (4.2:1 on white) */
  --star:#FFC53D;
  --star-off:#D5DCE4;
  --cmp-bag:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cmp [hidden]{display:none!important}
html.cmp-noscroll{overflow:hidden}
html.cmp-bar-on body{padding-bottom:78px}
/* the product page carries its own sticky buy bar instead of Call / Quote */
body.single-product .mobile-sticky-cta{display:none!important}

/* ---------- Hero ---------- */
.cmp-hero{
  padding:calc(var(--header-h) + 22px) 0 84px;
  background:
    radial-gradient(900px 420px at 92% -6%,rgba(87,199,255,.16),transparent 60%),
    radial-gradient(760px 420px at 0% 12%,rgba(53,214,160,.14),transparent 62%),
    var(--cloud);
}
.cmp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;color:var(--grey);margin-bottom:22px}
.cmp-crumbs a{color:var(--grey);transition:color .15s}
.cmp-crumbs a:hover{color:var(--navy)}
.cmp-crumbs [aria-hidden]{color:var(--grey-light)}
.cmp-crumbs [aria-current]{color:var(--navy);font-weight:500}

.cmp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}

/* ---------- Gallery carousel ---------- */
.cmp-gallery{position:sticky;top:90px;min-width:0}
.cmp-stage{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.cmp-track{
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none;
}
.cmp-track::-webkit-scrollbar{display:none}
.cmp-track:focus-visible{box-shadow:inset 0 0 0 3px var(--blue)}
/* The frame keeps its shape whatever the photo: without the absolute image a
   tall portrait graphic set the height of the whole track and stretched
   every slide with it. */
.cmp-slide{position:relative;flex:0 0 100%;aspect-ratio:1/1;min-height:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:#fff}
.cmp-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.cmp-gallery.is-ready .cmp-slide{cursor:zoom-in}

.cmp-arrow{
  position:absolute;top:50%;z-index:2;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--navy);cursor:pointer;
  box-shadow:0 6px 20px rgba(23,32,51,.16);
  transition:transform .18s ease,background .18s ease;
}
.cmp-arrow svg{width:22px;height:22px}
.cmp-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.cmp-arrow:active{transform:translateY(-50%) scale(.95)}
.cmp-prev{left:16px}
.cmp-next{right:16px}
.cmp-counter{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-family:var(--font-display);font-size:.8rem;font-weight:500;letter-spacing:.02em;
  color:#fff;background:rgba(23,32,51,.72);padding:6px 12px;border-radius:100px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.cmp-counter b{font-weight:700}
.cmp-gallery:not(.is-ready) .cmp-counter{display:none}
.cmp-expand{
  position:absolute;top:16px;right:16px;z-index:2;
  width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--navy);cursor:pointer;
  box-shadow:0 6px 20px rgba(23,32,51,.14);transition:transform .18s ease;
}
.cmp-expand svg{width:19px;height:19px}
.cmp-expand:hover{transform:scale(1.07)}

.cmp-thumbs{display:flex;gap:10px;margin-top:14px;overflow-x:auto;scrollbar-width:none;padding:3px}
.cmp-thumbs::-webkit-scrollbar{display:none}
.cmp-thumb{
  flex:1 1 0;min-width:56px;max-width:92px;aspect-ratio:1/1;padding:0;border:0;
  border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;opacity:.6;
  box-shadow:0 0 0 1px var(--line);transition:opacity .18s ease,box-shadow .18s ease;
}
.cmp-thumb img{width:100%;height:100%;object-fit:cover}
.cmp-thumb:hover{opacity:1}
.cmp-thumb[aria-current="true"]{opacity:1;box-shadow:0 0 0 2.5px var(--mint)}

/* ---------- Buy box ---------- */
.cmp-buy{min-width:0;padding-top:4px}
.cmp-title{font-size:clamp(1.9rem,3.3vw,2.75rem);line-height:1.08;letter-spacing:-.025em;margin-bottom:12px}
.cmp-rating{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;color:var(--grey);margin-bottom:12px}
.cmp-rating:hover span{color:var(--navy);text-decoration:underline}
/* a rating earned before this site (cm_prev_reviews), labeled with where it came from */
.cmp-rating-prev{margin:-4px 0 14px;font-size:.85rem;color:var(--grey)}
.cmp-rating-prev span{color:var(--star)}
.cmp-reviews-prev{margin:10px 0 0;font-size:.9rem;color:var(--grey)}
.cmp-price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:4px 0 2px;
  font-family:var(--font-display);font-weight:700;font-size:2rem;letter-spacing:-.02em;color:var(--navy);
}
.cmp-price del{font-size:1.15rem;font-weight:500;color:var(--grey-light)}
.cmp-price ins{text-decoration:none}
.cmp-buy #payment-method-message{margin:6px 0 0}

.cmp-excerpt{margin-top:18px;max-width:54ch;color:var(--grey);font-size:1.03rem;line-height:1.65}
.cmp-quick{margin-top:20px;display:grid;gap:11px}
.cmp-quick li{display:flex;align-items:flex-start;gap:11px;font-size:.98rem;line-height:1.45;color:var(--charcoal)}
.cmp-quick li b,.cmp-features li b{font-weight:600;color:var(--navy)}
.cmp-tick{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--navy)}
.cmp-tick svg{width:12px;height:12px}

.cmp-stock{display:flex;align-items:center;gap:10px;margin-top:24px;font-family:var(--font-display);font-weight:600;font-size:.93rem;color:var(--navy)}
.cmp-dot{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(53,214,160,.22)}
.cmp-stock.is-low .cmp-dot{background:#FF8F73;box-shadow:0 0 0 4px rgba(255,182,163,.45)}
.cmp-stock.is-out{color:var(--grey)}
.cmp-stock.is-out .cmp-dot{background:var(--grey-light);box-shadow:none}

/* Woo's add-to-cart form, laid out as: [ - 1 + ] [ Add to cart ] / [ Buy it now ] */
.cmp-cart{margin-top:14px}
.cmp-cart form.cart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.cmp-cart form.cart ~ *{margin-top:12px}
/* WooPay / Google Pay / Amazon Pay and the Affirm-Klarna-Afterpay message are
   unhooked in inc/cm-product-page.php; hidden here too so a plugin update that
   re-registers them cannot crowd the Add to cart / Buy it now pair. */
.cmp-cart .wcpay-express-checkout-wrapper,.cmp-cart #wcpay-express-checkout-element,
.cmp-cart #wcpay-woopay-button,.cmp-cart #wcpay-express-checkout-button-separator,
.cmp-buy #payment-method-message{display:none!important}
.cmp-cart .quantity{display:flex;align-items:center;height:58px;padding:0 6px;border:1.5px solid var(--line);border-radius:100px;background:#fff;transition:border-color .15s,box-shadow .15s}
.cmp-cart .quantity:focus-within{border-color:var(--mint);box-shadow:0 0 0 4px rgba(53,214,160,.16)}
.cmp-cart .quantity:has(input[type=hidden]){display:none}
.cmp-cart .quantity input.qty{
  width:44px;height:100%;padding:0;border:0;background:transparent;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--navy);
  -moz-appearance:textfield;appearance:textfield;
}
.cmp-cart .quantity:not(.has-stepper) input.qty{width:64px}
.cmp-cart .quantity input.qty:focus{outline:none}
.cmp-cart .quantity input.qty::-webkit-outer-spin-button,
.cmp-cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cmp-step{width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:var(--navy);font-size:1.35rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.cmp-step:hover:not(:disabled){background:rgba(53,214,160,.16)}
.cmp-step:disabled{color:var(--grey-light);cursor:not-allowed}

/* The Woo button carries `.button.alt`, which Woo's sheet paints purple at
   specificity (0,3,1). That sheet is dequeued here, but the selectors below
   out-rank it anyway so a plugin that re-enqueues it cannot repaint the CTA. */
.cmp .cmp-cart form.cart .single_add_to_cart_button.button,.cmp-buy-now,.cmp-sticky-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:58px;margin:0;padding:0 28px;border:0;border-radius:100px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.cmp .cmp-cart form.cart .single_add_to_cart_button.button,.cmp-sticky-btn{background:var(--mint);color:var(--navy);box-shadow:0 10px 24px rgba(53,214,160,.38)}
.cmp .cmp-cart form.cart .single_add_to_cart_button.button:hover,.cmp-sticky-btn:hover{background:var(--mint-deep);color:var(--navy);transform:translateY(-2px);box-shadow:0 16px 32px rgba(53,214,160,.45)}
.cmp-cart .single_add_to_cart_button::before{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--cmp-bag) center/contain no-repeat;mask:var(--cmp-bag) center/contain no-repeat}
.cmp-buy-now{grid-column:1/-1;background:var(--navy);color:#fff}
.cmp-buy-now:hover{background:var(--navy-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
.cmp .cmp-cart form.cart .single_add_to_cart_button.button:active,.cmp-buy-now:active,.cmp-sticky-btn:active{transform:scale(.98);box-shadow:none}
.cmp .cmp-cart form.cart .single_add_to_cart_button.button.disabled,.cmp .cmp-cart form.cart .single_add_to_cart_button.button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.cmp-assure{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:16px}
.cmp-assure li{display:flex;align-items:flex-start;gap:14px}
.cmp-assure-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--navy)}
.cmp-assure-ico svg{width:20px;height:20px}
.cmp-assure b{display:block;font-family:var(--font-display);font-weight:600;font-size:.95rem;line-height:1.35;color:var(--navy)}
.cmp-assure small{display:block;margin-top:2px;font-size:.88rem;line-height:1.5;color:var(--grey)}
.cmp-assure a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}

/* ---------- Woo notices ---------- */
.cmp .woocommerce-notices-wrapper:empty{display:none}
.cmp .woocommerce-notices-wrapper{margin-bottom:22px}
.cmp .woocommerce-message,.cmp .woocommerce-info,.cmp .woocommerce-error{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;
  margin:0 0 10px;padding:14px 16px 14px 20px;list-style:none;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--mint);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);color:var(--navy);font-size:.97rem;
}
.cmp .woocommerce-error{display:block;border-left-color:#D6455D}
.cmp .woocommerce-error li{padding:2px 0}
.cmp-notice-actions{display:flex;flex-wrap:wrap;gap:10px}
.cmp .woocommerce-message .button,.cmp .woocommerce-info .button{
  display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:100px;
  font-family:var(--font-display);font-weight:600;font-size:.93rem;
  border:1.5px solid var(--line);background:#fff;color:var(--navy);transition:border-color .15s,background .15s;
}
.cmp .woocommerce-message .button:hover{border-color:var(--mint)}
.cmp .woocommerce-message .cmp-notice-btn{background:var(--mint);border-color:var(--mint)}
.cmp .woocommerce-message .cmp-notice-btn:hover{background:var(--mint-deep);border-color:var(--mint-deep)}

/* ---------- Star ratings (Woo prints .star-rating; its icon font is not loaded) ---------- */
.cmp .star-rating{position:relative;display:inline-block;flex:none;font-size:1rem;line-height:1;letter-spacing:.08em;white-space:nowrap}
.cmp .star-rating::before{content:"\2605\2605\2605\2605\2605";color:var(--star-off)}
.cmp .star-rating span{position:absolute;top:0;left:0;height:100%;overflow:hidden;font-size:0}
.cmp .star-rating span::before{content:"\2605\2605\2605\2605\2605";font-size:1rem;letter-spacing:.08em;color:var(--star)}

/* ---------- At a glance ---------- */
.cmp-stats{background:#fff;border-block:1px solid var(--line);padding:54px 0}
.cmp-stats-row{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.cmp-stat{padding:4px 40px;border-left:1px solid var(--line)}
.cmp-stat:first-child{padding-left:0;border-left:0}
.cmp-stat-num{
  display:flex;align-items:baseline;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5.4vw,4.4rem);
  line-height:1;letter-spacing:-.04em;color:var(--navy);
}
.cmp-stat-pre{margin-right:.3em;font-size:.3em;font-weight:600;letter-spacing:0;color:var(--grey)}
.cmp-stat-unit{margin-left:.07em;font-size:.46em;font-weight:700;letter-spacing:-.01em;color:var(--mint-ink)}
.cmp-stat dd{margin-top:12px;max-width:24ch;font-size:1rem;line-height:1.5;color:var(--grey)}

/* ---------- Details ---------- */
.cmp-details{padding:84px 0}
.cmp-details-head{max-width:64ch;margin-bottom:34px}
.cmp-details-head h2{font-size:clamp(1.7rem,2.9vw,2.3rem);line-height:1.12;margin-bottom:14px}
.cmp-details-head p{font-size:1.04rem;line-height:1.7;color:var(--grey)}
.cmp-details-head p+p{margin-top:14px}
.cmp-details-head .cmp-details-deck{margin:-2px 0 12px;font-family:var(--font-display);font-weight:600;font-size:1.1rem;line-height:1.45;color:var(--navy)}
/* Two even columns: one tall stack of bullets beside a short headline column
   left half the section empty. */
.cmp-features{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;border-top:1px solid var(--line)}
.cmp-features li{display:flex;align-items:flex-start;gap:14px;padding:18px 2px;border-bottom:1px solid var(--line);font-size:1.02rem;line-height:1.55;color:var(--charcoal)}
.cmp-features .cmp-tick{width:24px;height:24px;margin-top:0}
.cmp-features .cmp-tick svg{width:13px;height:13px}

/* Long descriptions (hundreds of words, bold lines standing in for headings)
   sit behind a native <details>: the text stays on the page for search
   engines and curious shoppers without burying the reviews and quote band. */
/* Specifications: the product's visible WooCommerce attributes. */
.cmp-specs{margin-top:44px}
.cmp-specs h3{margin-bottom:14px;font-size:1.2rem;line-height:1.3}
.cmp-spec-list{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;border-top:1px solid var(--line)}
.cmp-spec{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:16px;padding:14px 2px;border-bottom:1px solid var(--line)}
.cmp-spec.is-wide{grid-column:1/-1;grid-template-columns:minmax(120px,calc((100% - 52px) * .2)) 1fr}
.cmp-spec dt{font-size:.95rem;line-height:1.5;color:var(--grey)}
.cmp-spec dd{margin:0;font-weight:500;font-size:.98rem;line-height:1.5;color:var(--navy)}

.cmp-more{margin-top:30px}
.cmp-more > summary{
  list-style:none;display:inline-flex;align-items:center;gap:10px;
  height:46px;padding:0 22px;border:1.5px solid var(--line);border-radius:100px;background:#fff;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--navy);
  transition:border-color .15s;
}
.cmp-more > summary::-webkit-details-marker{display:none}
.cmp-more > summary:hover{border-color:var(--mint)}
.cmp-more > summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.cmp-more > summary svg{width:16px;height:16px;transition:transform .2s ease}
.cmp-more[open] > summary svg{transform:rotate(180deg)}
.cmp-more[open] [data-closed],.cmp-more:not([open]) [data-open]{display:none}
.cmp-more-body{max-width:70ch;margin-top:32px}
.cmp-more-body h3{margin:34px 0 10px;font-size:1.2rem;line-height:1.3}
.cmp-more-body h3:first-child{margin-top:0}
.cmp-more-body p{font-size:1rem;line-height:1.75;color:var(--grey)}
.cmp-more-body p+p{margin-top:12px}
.cmp-more-body strong{color:var(--navy);font-weight:600}

/* ---------- Product video ---------- */
/* With a video, it sits beside the details headline instead of in its own band. */
.cmp-details-top.has-video{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"video head";
  gap:56px;align-items:center;margin-bottom:48px;
}
.cmp-details-top.has-video .cmp-video-frame{grid-area:video}
.cmp-details-top.has-video .cmp-details-head{grid-area:head;max-width:none;margin-bottom:0}
.cmp-video-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#0E1421;box-shadow:var(--shadow)}
.cmp-video-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0E1421}
.cmp-video-play{
  position:absolute;inset:0;margin:auto;width:88px;height:88px;border:0;border-radius:50%;
  display:grid;place-items:center;background:var(--mint);color:var(--navy);cursor:pointer;
  box-shadow:0 14px 34px rgba(14,20,33,.35);transition:transform .18s ease,background .18s ease;
}
.cmp-video-play svg{width:30px;height:30px;margin-left:4px}
.cmp-video-play:hover{transform:scale(1.06);background:var(--mint-deep)}
.cmp-video-play:active{transform:scale(.97)}

/* ---------- Reviews ---------- */
.cmp-reviews{background:#fff;padding:0 0 88px}
.wrap.cmp-reviews-inner{max-width:868px;border-top:1px solid var(--line);padding-top:26px}
.cmp-reviews-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.cmp-reviews-head h2{margin:0;font-size:1.3rem;line-height:1.2}
.cmp-reviews-sum{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:.95rem;color:var(--grey)}
.cmp-reviews-sum strong{font-family:var(--font-display);font-size:1.2rem;line-height:1;color:var(--navy)}
.cmp-review-toggle{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 20px;border:1.5px solid var(--line);border-radius:100px;background:#fff;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--navy);
  transition:border-color .15s,background .15s;
}
.cmp-review-toggle:hover{border-color:var(--mint)}
.cmp-review-toggle[aria-expanded="true"]{background:var(--cloud)}
.cmp-reviews-sum .star-rating{font-size:1.15rem}
.cmp-reviews-sum .star-rating span::before{font-size:1.15rem}
.cmp-reviews .woocommerce-Reviews-title,.cmp-reviews .woocommerce-noreviews{display:none}
.cmp-reviews ol.commentlist{list-style:none;margin:22px 0 0;display:grid;gap:14px}
.cmp-reviews .comment_container{display:flex;gap:16px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cloud)}
.cmp-reviews .comment_container img.avatar{flex:none;width:48px;height:48px;border-radius:50%}
.cmp-reviews .comment-text{flex:1;min-width:0}
.cmp-reviews .comment-text .meta{margin:6px 0 8px;font-size:.9rem;color:var(--grey)}
.cmp-reviews .woocommerce-review__author{font-family:var(--font-display);color:var(--navy)}
.cmp-reviews .woocommerce-review__verified{font-style:normal;font-weight:600;color:var(--mint-ink)}
.cmp-reviews .comment-text .description p{line-height:1.6;color:var(--charcoal)}
.cmp-reviews .cmp-review-title{margin:2px 0 6px;font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.35;color:var(--navy)}
.cmp-reviews ol.children{list-style:none;margin:12px 0 0 32px}

.cmp-reviews #review_form_wrapper{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cloud)}
.cmp-reviews .comment-reply-title{display:block;margin-bottom:6px;font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--navy)}
.cmp-reviews .comment-reply-title small{display:block;font-size:.85rem;font-weight:500}
.cmp-reviews .comment-notes{margin-bottom:16px;font-size:.88rem;color:var(--grey)}
.cmp-reviews .comment-form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.cmp-reviews .comment-form > *{grid-column:1/-1}
.cmp-reviews .comment-form > .comment-form-author{grid-column:1}
.cmp-reviews .comment-form > .comment-form-email{grid-column:2}
.cmp-reviews .comment-form p,.cmp-reviews .comment-form-rating{margin:0 0 14px}
.cmp-reviews .comment-form label{display:block;margin-bottom:6px;font-family:var(--font-display);font-weight:500;font-size:.85rem;color:var(--navy)}
.cmp-reviews .comment-form input[type=text],.cmp-reviews .comment-form input[type=email],
.cmp-reviews .comment-form textarea,.cmp-reviews .comment-form select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  font-family:var(--font-body);font-size:16px;color:var(--charcoal);transition:border-color .15s,box-shadow .15s;
}
.cmp-reviews .comment-form input:focus,.cmp-reviews .comment-form textarea:focus,.cmp-reviews .comment-form select:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 4px rgba(53,214,160,.16)}
.cmp-reviews .comment-form textarea{min-height:120px;resize:vertical}
.cmp-reviews .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:10px}
.cmp-reviews .comment-form-cookies-consent input{margin-top:4px;accent-color:var(--mint-ink)}
.cmp-reviews .comment-form-cookies-consent label{margin:0;font-family:var(--font-body);font-weight:400;font-size:.88rem;color:var(--grey)}
.cmp-reviews .required{color:#C2334D}
.cmp-reviews .form-submit{margin:6px 0 0}
/* #respond input#submit: Woo's own rule uses two ids, so this one does too */
.cmp .cmp-reviews #respond input#submit,.cmp-reviews .form-submit input[type=submit]{
  height:52px;padding:0 30px;border:0;border-radius:100px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1;
  background:var(--navy);color:#fff;transition:transform .18s,background .18s;
}
.cmp .cmp-reviews #respond input#submit:hover,.cmp-reviews .form-submit input[type=submit]:hover{background:var(--navy-soft);color:#fff;transform:translateY(-2px)}
.cmp-reviews .woocommerce-verification-required,.cmp-reviews .must-log-in{color:var(--grey)}
.cmp-reviews .must-log-in a{color:var(--navy);text-decoration:underline}

/* star picker Woo's JS builds in place of the rating <select> */
.cmp-reviews p.stars{margin:0 0 4px;line-height:1}
.cmp-reviews p.stars span{display:inline-flex;gap:2px}
.cmp-reviews p.stars a{position:relative;display:inline-block;width:36px;height:36px;overflow:hidden;font-size:0;color:var(--star-off);text-decoration:none;transition:color .12s,transform .12s}
.cmp-reviews p.stars a::before{content:"\2605";position:absolute;inset:0;font-size:32px;line-height:36px;text-align:center;color:inherit}
.cmp-reviews p.stars a:hover{transform:scale(1.12)}
.cmp-reviews p.stars.selected a{color:var(--star)}
.cmp-reviews p.stars.selected a.active ~ a{color:var(--star-off)}
.cmp-reviews p.stars:hover a,.cmp-reviews p.stars.selected:hover a{color:var(--star)}
.cmp-reviews p.stars:hover a:hover ~ a{color:var(--star-off)}

/* ---------- Full-screen viewer ---------- */
.cmp-viewer{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;overflow:hidden;background:rgba(14,20,33,.97);color:#fff;
}
.cmp-viewer::backdrop{background:rgba(14,20,33,.6)}
.cmp-viewer[open]{display:block;animation:cmpFade .2s ease}
@keyframes cmpFade{from{opacity:0}to{opacity:1}}
.cmp-viewer-bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;pointer-events:none}
.cmp-viewer-bar > *{pointer-events:auto}
.cmp-viewer-count{font-family:var(--font-display);font-size:.9rem;color:rgba(255,255,255,.82)}
.cmp-viewer-close{width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .15s}
.cmp-viewer-close:hover{background:rgba(255,255,255,.24)}
.cmp-viewer-close svg{width:22px;height:22px}
.cmp-viewer-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}
.cmp-viewer-track::-webkit-scrollbar{display:none}
.cmp-viewer-slide{flex:0 0 100%;height:100%;display:grid;place-items:center;padding:76px 24px 40px;scroll-snap-align:start;scroll-snap-stop:always}
.cmp-viewer-slide img{width:auto;height:auto;max-width:min(100%,1100px);max-height:calc(100dvh - 116px);object-fit:contain;border-radius:12px}
.cmp-viewer .cmp-arrow{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.cmp-viewer .cmp-arrow:hover{background:rgba(255,255,255,.26)}
.cmp-viewer .cmp-prev{left:20px}
.cmp-viewer .cmp-next{right:20px}

/* ---------- Sticky buy bar ---------- */
.cmp-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:950;
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(23,32,51,.10);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.cmp-sticky.is-visible{transform:none}
.cmp-sticky-inner{display:flex;align-items:center;gap:14px}
.cmp-sticky-thumb{flex:none;width:48px;height:48px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.cmp-sticky-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cmp-sticky-meta b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--navy)}
.cmp-sticky-meta .price{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--navy)}
.cmp-sticky-meta .price del{margin-right:6px;font-weight:500;color:var(--grey-light)}
.cmp-sticky-meta .price ins{text-decoration:none}
.cmp-sticky-btn{height:50px;padding:0 30px}

/* ============================================================
   Responsive
   ============================================================ */
@media (hover:none){
  .cmp-stage .cmp-arrow,.cmp-viewer .cmp-arrow{display:none}
}
@media(max-width:980px){
  .cmp-grid{grid-template-columns:1fr;gap:30px}
  .cmp-details-top.has-video{grid-template-columns:1fr;grid-template-areas:"head" "video";gap:24px;margin-bottom:36px}
  .cmp-gallery{position:static;max-width:640px;width:100%;margin:0 auto}
  .cmp-details-grid{grid-template-columns:1fr;gap:34px}
  .cmp-details-copy{position:static}
  .cmp-stat{padding:4px 24px}
}
@media(max-width:860px){
  .cmp-features{grid-template-columns:1fr;gap:0}
  .cmp-spec-list{grid-template-columns:1fr;gap:0}
  .cmp-spec,.cmp-spec.is-wide{grid-template-columns:40% 1fr}
}
@media(max-width:680px){
  .cmp-hero{padding:calc(var(--header-h) + 6px) 0 48px}
  .cmp-crumbs{margin-bottom:10px;font-size:.82rem}
  /* the photo runs edge to edge on phones: it is the product, give it the width */
  .cmp-gallery{margin:0 -18px;width:auto;max-width:none}
  .cmp-stage{border-radius:0;border-left:0;border-right:0;box-shadow:none}
  /* compact on phones: a 4:3 frame instead of a full square, and swiping with
     the 1 / N counter instead of a thumbnail strip, so the product name, price
     and buy buttons reach the first screen */
  .cmp-slide{aspect-ratio:4/3}
  .cmp-thumbs{display:none}
  .cmp-title{font-size:1.8rem}
  .cmp-price{font-size:1.75rem}
  .cmp-cart .single_add_to_cart_button,.cmp-buy-now{padding:0 18px}
  .cmp-stats{padding:30px 0}
  .cmp-stats-row{grid-template-columns:1fr}
  .cmp-stat{display:grid;grid-template-columns:minmax(118px,auto) 1fr;align-items:center;gap:18px;padding:18px 0;border-left:0;border-top:1px solid var(--line)}
  .cmp-stat:first-child{padding-top:0;border-top:0}
  .cmp-stat:last-child{padding-bottom:0}
  .cmp-stat-num{font-size:2.5rem}
  .cmp-stat dd{margin-top:0}
  /* every row shares one number column so the labels line up, and a lead-in
     like "Up to" sits on its own line above the number instead of squeezing it */
  @supports (grid-template-columns:subgrid){
    .cmp-stats-row{grid-template-columns:minmax(104px,max-content) 1fr;column-gap:18px}
    .cmp-stat{grid-column:1 / -1;grid-template-columns:subgrid}
  }
  .cmp-stat-num{display:block}
  .cmp-stat-pre{display:block;margin:0 0 6px;font-size:.34em;line-height:1.2;letter-spacing:.02em}
  .cmp-details{padding:52px 0}
  .cmp-details-head{margin-bottom:22px}
  .cmp-details-head h2{font-size:1.5rem}
  .cmp-details-head p{font-size:1rem}
  .cmp-features li{padding:14px 0;font-size:.98rem}
  .cmp-specs{margin-top:34px}
  .cmp-spec{gap:12px;padding:12px 0}
  /* edge to edge on phones, like the gallery */
  .cmp-video-frame{margin:0 -18px;border-radius:0;box-shadow:none}
  .cmp-video-play{width:72px;height:72px}
  .cmp-video-play svg{width:26px;height:26px}
  .cmp-more{margin-top:22px}
  .cmp-more > summary{display:flex;justify-content:center;width:100%}
  .cmp-more-body{margin-top:24px}
  .cmp-more-body h3{margin-top:28px;font-size:1.08rem}
  .cmp-reviews{padding:0 0 60px}
  .wrap.cmp-reviews-inner{padding-top:22px}
  .cmp-reviews-head h2{font-size:1.15rem}
  .cmp-review-toggle{width:100%;margin:6px 0 0}
  .cmp-reviews .comment-form{grid-template-columns:1fr}
  .cmp-reviews .comment-form > .comment-form-author,.cmp-reviews .comment-form > .comment-form-email{grid-column:1/-1}
  .cmp-reviews #review_form_wrapper{padding:20px}
  .cmp-sticky-thumb{display:none}
  .cmp-sticky-btn{padding:0 22px}
}