/* Product page. From the Phase 2 prototype (product.html and shared/site.css). */

:root { --hd-h: 120px; --snav-h: 0px; }
.psec, .psec [id], #build, #quick { scroll-margin-top: calc(var(--hd-h) + var(--snav-h) + 16px); }

/* Shared bits */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 0; font: var(--fw-m) var(--t-xs)/1.5 var(--font); }
.badge--mint { background: var(--mint); color: var(--navy); }
.badge--mint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.badge--peach { background: var(--peach); color: var(--navy); }
.badge--yellow { background: var(--yellow); color: var(--navy); }

/* Pre-order (WTS Site): the line under the buy box, and the option and add-on labels in the builder */
[data-stock-in][hidden], [data-stock-pre][hidden] { display: none !important; }
.ship__pre { display: block; margin-bottom: 6px; padding: 12px 14px; background: var(--mint); color: var(--navy); }
.ship__pre [data-pre-note]:empty { display: none; }
.pre-tag { display: block; width: fit-content; margin-top: 4px; padding: 1px 8px; background: var(--yellow); color: var(--navy); font-size: var(--t-xs); font-weight: var(--fw-m); }
.stars { color: var(--navy); letter-spacing: 2px; }
.stars b { color: var(--navy); font-weight: 400; }
.btn--lg { min-height: 60px; font-size: var(--t-l); padding: 0 32px; }
/* Top: gallery and buy column */
.pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 40px; }
.gal { position: sticky; top: calc(var(--hd-h) + 16px); display: grid; gap: 12px; }
.gal__main { background: var(--mist); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; }
.gal__open { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gal__zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; background: #fff; border: 2px solid var(--navy); border-radius: var(--btn-radius); color: var(--navy); font-size: var(--t-s); font-weight: var(--fw-m); }
.gal__zoom .ic { width: 20px; height: 20px; }
.gal__open:hover .gal__zoom { background: var(--mist); }

/* The large photos: a modal dialog, from the prototype's review-photo lightbox */
.lb { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(0, 0, 40, .7); }
html.lb-open { overflow: hidden; }
.lb__panel { display: grid; gap: 12px; width: min(1100px, 100%); max-height: 100%; padding: 16px; background: #fff; border-radius: var(--radius-lg); color: var(--navy); }
.lb__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lb__top h2 { font-size: var(--t-l); }
.lb__img { display: grid; place-items: center; min-height: 0; background: var(--mist); border-radius: var(--radius); }
.lb__img img { display: block; max-width: 100%; height: auto; max-height: calc(100dvh - 210px); object-fit: contain; touch-action: pan-y pinch-zoom; }
.lb__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lb__nav[hidden] { display: none; }
.lb__nav p { font-size: var(--t-s); color: var(--muted); text-align: center; }
.gal__main img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gal__thumbs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.gal__thumbs button { width: 100%; aspect-ratio: 1; padding: 4px; background: var(--mist); border: 2px solid transparent; border-radius: 0; cursor: pointer; display: grid; place-items: center; }
.gal__thumbs button[aria-pressed="true"] { border-color: var(--navy); }
.gal__thumbs img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

/* Looping videos in the gallery (inc/loop-video.php, assets/js/product.js) */
.gal__main { position: relative; }
.gal__vid { position: absolute; inset: 0; background: var(--mist); }
.gal__vid img, .gal__vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gal__play, .gal__pause { position: absolute; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; background: #fff; border: 2px solid var(--navy); border-radius: var(--btn-radius); color: var(--navy); font: var(--fw-m) var(--t-s)/1.2 var(--font); cursor: pointer; }
.gal__play { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gal__pause { left: 12px; bottom: 12px; }
.gal__play:hover, .gal__pause:hover { background: var(--mist); }
.gal__play .ic, .gal__pause .ic { width: 20px; height: 20px; }
.gal__thumbs button { position: relative; }
.gal__badge { position: absolute; left: 4px; bottom: 4px; display: grid; place-items: center; width: 24px; height: 24px; background: var(--navy); color: #fff; }
.gal__badge .ic { width: 16px; height: 16px; }

.buy { display: grid; gap: 20px; min-width: 0; }
.buy h1 { font-size: var(--t-3xl); font-weight: var(--fw-h); letter-spacing: -.02em; }
.buy__sub { margin-top: 4px; font-size: var(--t-l); color: var(--muted); }
.buy__rate { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; font-size: var(--t-s); }
.buy__rate a { display: inline-flex; align-items: center; min-height: 48px; }
p.sale { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--t-s); } /* p.: WooCommerce also gives a product on sale the class "sale" */
.price { font-size: 2.5rem; font-weight: var(--fw-m); line-height: 1.1; font-variant-numeric: tabular-nums; }
.price del { font-size: var(--t-l); color: var(--muted); font-weight: 400; margin-right: 8px; }
.price ins { text-decoration: none; }
.price__pl { font-size: var(--t-s); color: var(--muted); margin-top: 8px; }
/* WooCommerce's stylesheet colours prices and stock lines olive and its buttons purple. Its selectors are long
   (.woocommerce:where(...) div.product p.price), so these are made just as specific. */
main div.pdp-wrap.product :is(p.price, span.price, p.stock) { color: var(--navy); }
.price__pl strong { color: var(--navy); }
.nobf { margin-top: 10px; font-size: var(--t-s); line-height: 1.5; }
.nobf__tag { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 0; background: var(--mint); font-weight: var(--fw-m); }
.nobf a { white-space: nowrap; }
.buy__short { color: var(--navy); }
.buy__short > * + * { margin-top: 10px; }
.buy__link { display: inline-flex; align-items: center; min-height: 48px; font-weight: var(--fw-m); }

/* At a glance (ACF highlight: logo + text) */
.fitmini { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.fitmini li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: #fff; font-size: var(--t-s); line-height: 1.3; font-weight: var(--fw-m); }
.fitmini img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.fitmini p { margin: 0; }

/* Builder */
.bld { border: 2px solid var(--navy); border-radius: var(--radius-lg); background: #fff; display: flex; flex-direction: column; }
.bld__head { background: var(--navy); color: #fff; padding: 14px 18px 12px; --focus: var(--peach); border-radius: 0; }
.bld__head h2 { font-size: var(--t-l); }
.bld__head p { font-size: var(--t-s); color: #e6e6ff; }
.prog { list-style: none; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; margin-top: 12px; }
.prog button { width: 100%; display: grid; justify-items: center; gap: 4px; min-height: 64px; padding: 6px 2px; border: 0; border-radius: 0; background: rgba(255, 255, 255, .08); color: #fff; font: var(--fw-m) var(--t-xs)/1.15 var(--font); cursor: pointer; }
.prog button:disabled { cursor: default; color: #c9c9ee; }
.prog .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #c9c9ee; font-weight: var(--fw-m); }
.prog [aria-current="step"] { background: #fff; color: var(--navy); }
.prog [aria-current="step"] .n, .prog .is-done .n { background: var(--green); border-color: var(--green); color: var(--navy); }
.prog button:not(:disabled):not([aria-current="step"]):hover { background: rgba(255, 255, 255, .18); }
.bld__body { padding: 18px; }
.bstep__h { margin-bottom: 14px; }
.bstep__h h3 { font-size: var(--t-xl); outline-offset: 4px; }
.bstep__h p { color: var(--muted); font-size: var(--t-s); margin-top: 2px; }
.bld__foot { position: sticky; bottom: 0; z-index: 3; border-top: 2px solid var(--line); padding: 12px 18px; display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center; background: var(--mist); border-radius: 0; box-shadow: 0 -8px 18px rgba(0, 0, 92, .08); }
.bld__tot { font-weight: var(--fw-m); font-size: var(--t-l); font-variant-numeric: tabular-nums; line-height: 1.15; }
.bld__tot small { display: block; font-size: var(--t-xs); font-weight: var(--fw-m); color: var(--muted); }
.bld__nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bld__nav .btn { padding: 0 18px; }
.bld__err { margin-top: 12px; padding: 12px 14px; border: 2px solid var(--red); border-radius: 0; color: var(--red); font-weight: var(--fw-m); }

/* Step 2: the choice (pedestal) */
.ped { border: 0; padding: 0; margin: 0; min-width: 0; }
.ped__opts { display: grid; gap: 8px; }
.ped__o { display: grid; grid-template-columns: 26px 64px 1fr auto; gap: 14px; align-items: center; min-height: 72px; padding: 8px 16px; border: 2px solid var(--line-strong); border-radius: 0; cursor: pointer; }
.ped__o input { width: 24px; height: 24px; margin: 0; accent-color: var(--navy); }
.ped__art { width: 64px; aspect-ratio: 1; background: var(--mist); border-radius: 0; overflow: hidden; }
.ped__art img { width: 100%; height: 100%; object-fit: contain; }
.ped__o b { display: block; font-weight: var(--fw-m); line-height: 1.25; }
.ped__o small { display: block; color: var(--muted); font-size: var(--t-xs); }
.ped__o em { font-style: normal; font-weight: var(--fw-m); white-space: nowrap; }
.ped__o:has(input:checked) { border-color: var(--navy); background: var(--mint); box-shadow: inset 0 0 0 1px var(--navy); }
.ped__o:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }
.ped__o.is-out { cursor: not-allowed; opacity: .75; }
.ped__oos { color: var(--red) !important; font-weight: var(--fw-m); }
.bld__notice:not(:empty) { margin-top: 12px; }

/* Step 3: add-ons as tick rows */
.adds { display: grid; gap: 14px; }
.adds h4 { font-size: var(--t-b); margin-bottom: 6px; }
.adds ul { list-style: none; display: grid; gap: 8px; }
.tk { display: grid; grid-template-columns: 30px 52px 1fr; gap: 6px 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--line); border-radius: 0; }
.tk.is-on { border-color: var(--navy); background: var(--mint); }
.tk > input { width: 26px; height: 26px; margin: 0; accent-color: var(--navy); }
.tk__art { width: 52px; aspect-ratio: 1; background: var(--mist); border-radius: 0; overflow: hidden; }
.tk__art img { width: 100%; height: 100%; object-fit: contain; }
.tk label { cursor: pointer; line-height: 1.25; }
.tk label b { display: block; font-weight: var(--fw-m); }
.tk label span { font-size: var(--t-xs); color: var(--muted); }
.tk__more { grid-column: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tk__more .stepper { height: 52px; }

/* Step 4: review */
.rv-lines { list-style: none; display: grid; border-top: 1px solid var(--line); }
.rv-lines li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rv-lines b { font-weight: var(--fw-m); }
.rv-lines small { display: block; font-size: var(--t-xs); color: var(--muted); }
.rv-lines .amt { font-weight: var(--fw-m); font-variant-numeric: tabular-nums; text-align: right; }
.rv-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 4px; font-size: var(--t-l); font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
.rv-fit { margin-top: 10px; padding: 10px 12px; border-radius: 0; background: var(--mist); font-size: var(--t-s); display: grid; gap: 4px; }
.rv-fit p { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rv-done { display: grid; gap: 12px; justify-items: start; padding: 18px; border-radius: 0; background: var(--mint); }
.rv-done b { font-size: var(--t-l); }
.rv-done .row { display: flex; flex-wrap: wrap; gap: 8px; }

/* WooCommerce's own add-to-cart form: "Only want the toilet?" (change 15) */
.quick { display: grid; gap: 10px; padding: 14px 16px; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); }
.quick--plain { border: 0; padding: 0; }
.quick__t { font-size: var(--t-s); }
.quick__t b { font-size: var(--t-b); }
.quick form.cart { display: grid; gap: 12px; margin: 0; }
.quick table.variations { border-collapse: collapse; width: 100%; }
.quick table.variations th, .quick table.variations td { display: block; padding: 0; text-align: left; }
.quick table.variations label { font-weight: var(--fw-m); }
.quick select { width: 100%; min-height: 52px; margin-top: 4px; padding: 0 14px; border: 2px solid var(--line-strong); border-radius: var(--btn-radius); background: #fff; font: var(--t-b) var(--font); color: var(--navy); }
.quick .reset_variations { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--t-s); }
.quick .woocommerce-variation-price .price { font-size: var(--t-xl); }
.quick .woocommerce-variation-availability p, .quick .stock { font-size: var(--t-s); font-weight: var(--fw-m); }
.quick .out-of-stock { color: var(--red); }
.quick .in-stock { color: var(--navy); }
.quick .woocommerce-variation-add-to-cart, .quick form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.quick .quantity input.qty { width: 80px; height: 60px; border: 2px solid var(--line-strong); border-radius: var(--btn-radius); text-align: center; font: var(--fw-m) var(--t-l) var(--font); color: var(--navy); }
.quick form.cart .single_add_to_cart_button.button { flex: 1; min-height: 60px; padding: 0 24px; border: 2px solid var(--green); border-radius: var(--btn-radius); background: var(--green); color: var(--navy); font: var(--fw-m) var(--t-l)/1.2 var(--font); cursor: pointer; }
.quick form.cart .single_add_to_cart_button.button:hover { background: var(--green-2); border-color: var(--green-2); }
.quick form.cart .single_add_to_cart_button.button.disabled { opacity: .5; cursor: not-allowed; }
.quick .wts-oos-msg { padding: 10px 12px; border-radius: 0; background: #ffe3dc; font-weight: var(--fw-m); font-size: var(--t-s); }

.ship { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--mist); font-size: var(--t-s); }
.ship p { display: flex; gap: 10px; align-items: flex-start; }
.ship .ic { width: 22px; height: 22px; margin-top: 1px; }
.ship a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.ship .instock { color: var(--navy); font-weight: var(--fw-m); } /* .ship: WooCommerce also gives the whole product the class "instock" */
.buy__extra:empty { display: none; }

/* Section menu that sticks (change 17) */
.snav { position: sticky; top: calc(var(--admin-bar) + var(--hd-h)); z-index: 40; background: #fff; border-block: 2px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 92, .06); }
.snav .wrap { display: flex; align-items: center; gap: 16px; }
.snav ul { list-style: none; display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.snav ul::-webkit-scrollbar { display: none; }
.snav a { display: flex; align-items: center; min-height: 60px; padding: 0 12px; border-bottom: 4px solid transparent; color: var(--navy); font-weight: var(--fw-m); text-decoration: none; white-space: nowrap; }
.snav a:hover { background: var(--mist); }
.snav a[aria-current="true"] { border-bottom-color: var(--green); background: var(--mint); }
.snav__buy { display: flex; align-items: center; gap: 12px; flex: none; }
.snav__buy p { font-size: var(--t-l); font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
.snav__buy .btn { min-height: 48px; }

/* Sections below, all open (change 18) */
.psec { padding-block: 56px; border-bottom: 1px solid var(--line); }
.psec--mist { background: var(--mist); }
.psec h2.h { font-size: var(--t-2xl); margin-bottom: 16px; }
.psec .lead { color: var(--muted); max-width: 64ch; margin-bottom: 24px; }
.mosaic { display: grid; gap: 40px; margin-top: 48px; }
.mosaic__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.mosaic__row:nth-child(even) .mosaic__img { order: 2; }
.mosaic__img img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; max-width: 1000px; }
.vid { margin: 0; display: grid; gap: 8px; }
.vid__t { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0; background: var(--navy); color: #fff; }
.vid--short .vid__t { aspect-ratio: 9 / 16; max-height: 640px; }
.vid__t img, .vid__t iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vid__play { position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--navy); }
.vid__play .ic { width: 48px; height: 48px; color: var(--green); }
.vid__t:hover .vid__play, .vid__t:focus-visible .vid__play { background: var(--navy-2); }
.vid figcaption { font-size: var(--t-s); color: var(--muted); }

/* Complete your system (change 16) */
.grp { padding-block: 24px; border-bottom: 1px solid var(--line); }
.grp:last-of-type { border-bottom: 0; }
.grp__h { display: flex; gap: 12px 20px; align-items: baseline; flex-wrap: wrap; margin-bottom: 16px; }
.grp__h h3 { font-size: var(--t-xl); }
.grp__h p { color: var(--muted); font-size: var(--t-s); }
.accs { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.ac { display: grid; grid-template-columns: 136px 1fr; gap: 6px 16px; align-content: start; height: 100%; padding: 16px; border: 2px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.ac.is-in { border-color: var(--navy); }
.ac__art { grid-row: span 3; aspect-ratio: 1; overflow: hidden; background: var(--mist); border-radius: 0; }
.ac__art img { width: 100%; height: 100%; object-fit: contain; }
.ac__name { font-size: var(--t-b); font-weight: var(--fw-m); line-height: 1.25; }
.ac__name a { display: inline-block; padding-block: 12px; margin-block: -12px; text-decoration: none; } /* 48px tap height */
.ac__name a:hover { text-decoration: underline; }
.ac__why { font-size: var(--t-s); color: var(--muted); line-height: 1.45; }
.ac__price { font-size: var(--t-l); font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
.ac__ctl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.ac__ctl .btn { flex: 1; min-width: 140px; }
.ac__in { grid-column: 1 / -1; font-size: var(--t-s); font-weight: var(--fw-m); color: var(--navy); }
.ac__oos { font-weight: var(--fw-m); color: var(--muted); }
.chips { grid-column: 1 / -1; min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.chips legend { margin-bottom: 6px; padding: 0; font-size: var(--t-s); font-weight: var(--fw-m); }
.chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; gap: 8px; align-items: center; min-height: 48px; padding: 0 14px; border: 2px solid var(--line-strong); border-radius: 0; font-size: var(--t-s); cursor: pointer; }
.chip input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.chip:has(input:checked) { border-color: var(--navy); background: var(--mint); }
.chip:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Manuals (change 20) */
/* The product brochure above the manuals: its first page, the 45° corner, one clear button */
.broch { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 24px 32px; align-items: center; max-width: 860px; margin-bottom: 28px; padding: 24px; background: var(--mist); color: var(--navy); text-decoration: none;
  --cut: 28px; clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.broch__cover img { display: block; width: 100%; height: auto; box-shadow: 0 10px 28px rgba(0, 0, 92, .18); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.broch:hover .broch__cover img { transform: translateY(-4px) rotate(-1deg); }
.broch__body { display: grid; gap: 8px; justify-items: start; }
.broch__t { font-size: var(--t-xl); font-weight: var(--fw-h); line-height: 1.2; }
.broch__p { color: var(--fg); }
.broch small { color: var(--muted); font-size: var(--t-xs); }
.broch__btn { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .broch__cover img { transition: none; } }
/* Builder: how many toilets, and the add-ons that follow it (Eemeli, 29 Oct) */
.bqty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 20px; padding: 14px 16px; background: var(--mist); }
.bqty__l { font-size: var(--t-b); font-weight: var(--fw-m); }
.tk__per { margin: 0; color: var(--muted); font-size: var(--t-s); }
.dl { list-style: none; display: grid; gap: 10px; max-width: 860px; }
.dl a { display: grid; grid-template-columns: 52px 1fr auto; gap: 4px 16px; align-items: center; padding: 14px 18px; border: 2px solid var(--line); border-radius: var(--radius-lg); background: #fff; text-decoration: none; }
.dl a:hover { border-color: var(--navy); }
.dl .ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 0; background: var(--mist); }
.dl b { font-size: var(--t-b); font-weight: var(--fw-m); line-height: 1.25; }
.dl small { display: block; color: var(--muted); font-size: var(--t-xs); }
.dl .open { display: inline-flex; gap: 6px; align-items: center; font-weight: var(--fw-m); text-decoration: underline; text-underline-offset: 3px; }

/* Reviews: Customer Reviews for WooCommerce, shown in full (change 19). Restyled later. */
.reviews, .reviews-more { font-size: var(--t-b); }
.reviews-more { margin-top: 32px; }

/* Highlighted products */
.rel { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.rel__card { display: grid; gap: 8px; height: 100%; padding: 12px; border: 2px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; }
.rel__card:hover { border-color: var(--navy); }
.rel__card img { width: 100%; height: auto; border-radius: 0; background: var(--mist); }
.rel__card b { font-size: var(--t-b); }
.rel__price { font-weight: var(--fw-m); }

/* Calmer product page (Eemeli, 31 Oct): one question at a time. template-parts/product/calm.php */
.fitmini__fit span { display: grid; gap: 2px; }
.fitmini__fit small { font-size: var(--t-xs); font-weight: 400; color: var(--muted); }
.bld--calm .bld__body { padding: 16px 18px 4px; }
.bld--calm .bstep__h { margin: 0; }
.bld--calm .bqty { margin-bottom: 16px; }
.bld--calm .bld__foot { position: static; box-shadow: none; }
.prog--calm { margin: 0; padding: 14px 18px 0; }
.prog--calm button { background: var(--mist); color: var(--navy); }
.prog--calm button:disabled { color: var(--muted); }
.prog--calm .n { border-color: var(--line-strong); }
.prog--calm [aria-current="step"] { background: var(--mint); }
.adds__more { margin: 14px 0 0; font-size: var(--t-s); color: var(--muted); }
.bld__msg:empty { display: none; }
.bld__msg { margin-top: 12px; }
/* The builder's Add to cart adds the toilet alone too: WooCommerce's box keeps only the express payment buttons */
.bld:not([hidden]) ~ .quick--calm { border: 0; padding: 0; }
.bld:not([hidden]) ~ .quick--calm :is(.quick__t, .stock, form.cart > .quantity, .single_add_to_cart_button, table.variations, .single_variation, .woocommerce-variation-add-to-cart > .quantity) { display: none !important; }
.pdp--calm .prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-block: 24px; max-width: 1000px; }
.pdp--calm .prose .gallery br { display: none; }
.pdp--calm .prose .gallery-item { margin: 0; max-width: none !important; width: auto !important; }
.pdp--calm .prose .gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pdp--calm .prose .gallery-caption { margin-top: 6px; font-size: var(--t-xs); color: var(--muted); }
.pdp--calm .prose .wp-caption, .pdp--calm .prose p > img:only-child { max-width: min(100%, 560px) !important; }
.pdp--calm .prose .wp-caption img { width: 100%; height: auto; }
.dts { border-top: 2px solid var(--line); }
.dt { border-bottom: 2px solid var(--line); }
.dt > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 4px; color: var(--navy); list-style: none; cursor: pointer; }
.dt > summary::-webkit-details-marker { display: none; }
.dt > summary:hover .dt__h { text-decoration: underline; text-underline-offset: 4px; }
.dt__h { font-size: var(--t-l); }
.dt__ic { flex: none; position: relative; width: 24px; height: 24px; }
.dt__ic::before, .dt__ic::after { content: ""; position: absolute; left: 3px; right: 3px; top: 11px; height: 2px; background: currentColor; transition: transform .2s; }
.dt__ic::after { transform: rotate(90deg); }
.dt[open] .dt__ic::after { transform: rotate(0); }
.dt__body { padding: 4px 4px 40px; }
.dt__body .mosaic { margin-top: 24px; }
.revs--short :is(.cr-ajax-search, .cr-review-tags-filter, .cr-count-row, .cr-ajax-reviews-cus-images-div, .cr-show-more-button, .cr-show-more-reviews-prd, .cr-reviews-grid, h3:has(+ .cr-reviews-grid)) { display: none !important; }
.revs--short .commentlist > li:nth-child(n+4) { display: none; }
.revs__all { margin-top: 24px; text-align: center; }
.revs__all .btn { width: min(100%, 440px); }
@media (prefers-reduced-motion: reduce) { .dt__ic::after { transition: none; } }

/* Eemeli, 3 Nov: the price and Add to cart clearly visible, the videos large, the 45° cut on some boxes */
/* The price: WooCommerce's own rule (.woocommerce div.product p.price, 1.25em) had made it 24px */
main div.pdp-wrap.product p.price { font-size: 2.75rem; line-height: 1.1; }
/* Add to cart, the most important element in a shop: big and the full width of the buy box */
.bld--calm .bld__foot { grid-template-columns: 1fr; }
.bld--calm .bld__tot { font-size: var(--t-xl); }
.bld--calm .bld__nav { justify-content: stretch; }
.bld--calm .bld__nav .btn { flex: 1 1 auto; min-height: 64px; font-size: var(--t-l); }
.bld--calm .bld__nav #bld-back { flex: 0 0 auto; }
main div.pdp-wrap.product .quick form.cart .single_add_to_cart_button.button { min-height: 64px; font-size: var(--t-l); }
/* The videos: a section of their own, as wide as the text column allows */
.psec--vids .vids--big { max-width: 1000px; grid-template-columns: 1fr; gap: 32px; }
.psec--vids .vids--n2 { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.psec--vids .vid--short { justify-self: center; width: min(100%, 405px); }
.psec--vids .vid__play { width: 96px; height: 96px; }
.psec--vids .vid figcaption { font-size: var(--t-b); }
/* The 45° corner on some of the boxes (about 40%), not all: the buy box, the videos, product cards,
   the reviews summary. A bordered box gets its diagonal edge drawn by a background band. */
.bld, .vid__t, .rel__card, .pdp-wrap .ivole-summaryBox {
  --cut: 28px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.bld { background-image: linear-gradient(135deg, var(--navy) 0 calc(var(--cut) * .7071 + 2px), transparent 0); background-origin: border-box; }
.rel__card { background-image: linear-gradient(135deg, var(--line) 0 calc(var(--cut) * .7071 + 2px), transparent 0); background-origin: border-box; }
.rel__card:hover { background-image: linear-gradient(135deg, var(--navy) 0 calc(var(--cut) * .7071 + 2px), transparent 0); }
.psec--vids .vid__t { --cut: 40px; }
/* Square corners: Customer Reviews draws its boxes rounded */
.pdp-wrap #reviews :is([class*="cr-"], [class*="ivole"], [class*="iv-"]):not(.cr-avatar, .cr-avatar *) { border-radius: 0 !important; }
/* A product with no reviews of its own: no section of its own, only "Let our customers speak for us" */
.reviews-more :is(.cr-all-reviews-shortcode.cr-is-empty, h3:has(+ .cr-all-reviews-shortcode.cr-is-empty)) { display: none !important; }
.reviews-more:has(.cr-is-empty) { margin-top: 0; }
@media (max-width: 759px) {
  main div.pdp-wrap.product p.price { font-size: 2.25rem; }
  .bld, .vid__t, .rel__card, .psec--vids .vid__t { --cut: 20px; }
}

.ped__pick label { display: block; margin: 0 0 8px; font-weight: var(--fw-m); }
.ped__pick select { width: 100%; min-height: 56px; padding: 0 14px; border: 2px solid var(--navy); border-radius: 0; background-color: #fff; color: var(--navy); font: inherit; font-size: var(--t-b); }
.ped__pick select:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* Phone bar: Add to cart stays at the bottom (change 17) */
.sbar { display: none; }

@media (max-width: 1023px) {
  .pdp { gap: 32px; }
  .snav__buy p { display: none; }
}
@media (max-width: 759px) {
  .pdp { grid-template-columns: 1fr; gap: 20px; }
  .gal { position: static; }
  .buy h1 { font-size: var(--t-2xl); }
  .price { font-size: 2rem; }
  .bld__head { padding: 12px 14px 10px; }
  .bld__head > p { display: none; }
  .prog { margin-top: 8px; gap: 4px; }
  .prog button { min-height: 56px; }
  .bld__body { padding: 14px; }
  .bstep__h h3 { font-size: var(--t-l); }
  .bld__foot { padding: 10px 12px; gap: 8px; }
  .bld__nav { flex-wrap: nowrap; }
  .bld__nav .btn { min-height: 48px; padding: 0 14px; font-size: var(--t-s); white-space: nowrap; }
  .bld__tot { font-size: var(--t-b); }
  .ped__o { grid-template-columns: 26px 48px 1fr; }
  .ped__o em { grid-column: 3; }
  .ped__art { width: 48px; }
  .snav { position: static; box-shadow: none; }
  .snav__buy { display: none; }
  .snav a { min-height: 52px; }
  .psec { padding-block: 40px; }
  .psec h2.h { font-size: var(--t-xl); }
  .mosaic__row { grid-template-columns: 1fr; gap: 16px; }
  .mosaic__row:nth-child(even) .mosaic__img { order: 0; }
  .accs { grid-template-columns: 1fr; }
  .ac { grid-template-columns: 84px 1fr; }
  .broch { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 16px; padding: 16px; }
  .broch__t { font-size: var(--t-l); }
  .broch__btn { width: 100%; }
  .dl a { grid-template-columns: 44px 1fr; }
  .dl .open { grid-column: 2; }
  .dl .ico { width: 44px; height: 44px; }
  .how2 { grid-template-columns: 1fr; gap: 24px; }
  .pdp--calm .prose .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pdp--calm .fitmini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp--calm .fitmini li { padding: 10px; }
  .how2__vid { max-width: 320px; }
  .dt > summary { min-height: 60px; }
  .dt__h { font-size: var(--t-b); }
  .sbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 2px solid var(--navy); box-shadow: 0 -12px 30px rgba(0, 0, 92, .14); transform: translateY(110%); transition: transform .25s; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sbar.is-on { transform: none; }
  .sbar__in { display: flex; gap: 12px; align-items: center; padding: 10px 16px; }
  .sbar__name { font-weight: var(--fw-m); line-height: 1.2; flex: 1; min-width: 0; }
  .sbar__price { font-size: var(--t-l); font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
  body:has(.sbar.is-on) .ft { padding-bottom: 84px; }
}