/* =========================================================
Budget Screens - inner-page design system
(matches the hand-built home page: Fraunces + Hanken Grotesk,
cloudpillo.com colour palette)
========================================================= */
/* ---------------------------------------------------------------
PALETTE — cloudpillo.com, sampled from the live site 2026-08-08.
Token NAMES are unchanged so nothing downstream breaks; only the
values are remapped. Keep this block identical to the :root block
inside src/index.html, which is a standalone document.
#ff7300 cp-orange primary CTA -> --gold
#0e1a2b cp-black text, icons, dark panels -> --ink / --gold-deep
#f4ca66 soft yellow deal callout / tinted borders -> --gold-soft
#f2bc41 yellow announcement bar -> --sun
#b4e2f8 sky blue feature + risk panels -> --sky
#e9f3fb pale blue image backgrounds -> --cream-2
#f4f4f1 page grey page background -> --cream
#6b6b6b muted text -> --ink-soft
#ebebeb hairline borders -> --line
#00b67a Trustpilot green, star fill -> --star
Orange is CTA-only on the reference site; icons, labels and links
stay dark. --gold-deep therefore maps to the navy, not to a second
orange, which is why .btn-primary is a flat fill rather than a
gradient below.
--------------------------------------------------------------- */
:root{
--gold:#ff7300;
--gold-deep:#0e1a2b;
--gold-soft:#f4ca66;
--cream:#f4f4f1;
--cream-2:#e9f3fb;
--ink:#0e1a2b;
--ink-soft:#6b6b6b;
--line:#ebebeb;
--white:#ffffff;
--sky:#b4e2f8;
--sun:#f2bc41;
--star:#00b67a;
--shadow:0 18px 50px -22px rgba(14,26,43,.35);
--shadow-sm:0 8px 24px -14px rgba(14,26,43,.3);
--maxw:1180px;
--safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:18px;line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
h3{font-size:1.3rem}
p{color:var(--ink-soft)}
.wrap,.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.section-label,.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px}
/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;font-family:"Hanken Grotesk",sans-serif;font-size:1rem;font-weight:700;letter-spacing:.02em;cursor:pointer;border:1.5px solid transparent;transition:.28s ease;text-align:center}
.btn-primary{background:var(--gold);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(255,115,0,.55)}
.btn-ghost,.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--gold);color:var(--gold-deep)}
.btn-light{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px)}
.btn-paypal{background:#ffc439;color:#14264b;font-weight:700}
.btn-paypal:hover{transform:translateY(-2px)}
.btn-block{width:100%}
/* ---- Nav (solid, inner pages) ---- */
.nav--solid{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;color:var(--ink);margin-right:auto}
.brand .mark{width:34px;height:34px;border-radius:50%;flex:none;background:var(--ink);color:#fff;display:grid;place-items:center}
.nav--solid .brand .mark{background:var(--gold)}
.brand .flag{height:26px;width:auto;display:block;border-radius:3px;flex:none}
.brand .name{font-family:"Fraunces",serif;font-size:1.18rem;letter-spacing:.01em;line-height:1.05}
.brand .name small{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.nav-links{display:none;align-items:center;gap:26px}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:.97rem;transition:.2s}
.nav-links a:hover{color:var(--gold-deep)}
.cart-icon{position:relative;display:flex;color:var(--ink)}
.cart-icon:hover{color:var(--gold-deep)}
#cart-badge{position:absolute;top:-8px;right:-10px;background:var(--gold-deep);color:#fff;font-size:.66rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav-cta{display:none;min-height:44px;padding:0 22px;border-radius:999px;background:var(--gold);color:#fff;font-weight:700;font-size:.92rem;align-items:center}
.nav-cta:hover{transform:translateY(-1px)}
.burger{width:48px;height:48px;border:1px solid var(--line);background:#fff;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:55;background:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:.35s ease;padding:80px 24px 40px}
body.menu-open .overlay{opacity:1;visibility:visible;transform:none}
.overlay a{color:#fff;font-family:"Fraunces",serif;font-size:2rem;font-weight:500;min-height:52px;display:flex;align-items:center}
.overlay a:hover{color:var(--gold-soft)}
.overlay .btn{margin-top:18px;font-family:"Hanken Grotesk",sans-serif;font-size:1rem}
/* ---- Footer (matches home) ---- */
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:46px 0 calc(36px + var(--safe-b));margin-top:40px}
.footer .wrap{display:flex;flex-direction:column;gap:22px}
.footer .brand{color:#fff}
.footer .brand .name{color:#fff}
.footer-cols{display:grid;grid-template-columns:1fr;gap:26px}
.footer-col h4{color:#fff;font-family:"Hanken Grotesk",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;opacity:.75}
.footer-col nav{display:flex;flex-direction:column;gap:11px}
.footer-col nav a{font-size:.94rem;font-weight:600;transition:.2s;padding:3px 0;display:inline-block}
.footer-col nav a:hover{color:var(--gold-soft)}
@media(min-width:620px){.footer-cols{grid-template-columns:repeat(3,1fr)}}
.footer .fine{font-size:.82rem;opacity:.6;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
/* =========================================================
PRODUCT PAGE (layout follows the cloudpillo.com format:
trust strip, gallery + buy box above the fold, then a
scrolling narrative, proof, risk reversal and FAQ)
========================================================= */
/* ---- 1. Trust strip under the nav ---- */
.trust-strip{background:var(--cream);border-bottom:1px solid var(--line)}
.trust-strip-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 34px;margin:0;padding:11px 0}
.trust-strip-list li{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink-soft);line-height:1.35}
.trust-strip-list li strong{color:var(--ink);font-weight:700}
.trust-strip-list svg{width:18px;height:18px;color:var(--gold-deep);flex:none}
.trust-strip-stars{display:flex;gap:1px;flex:none}
.trust-strip-stars svg{width:14px;height:14px;color:var(--star)}
@media(max-width:720px){
.trust-strip-list{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:26px;padding:10px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.trust-strip-list::-webkit-scrollbar{display:none}
.trust-strip-list li{white-space:nowrap;font-size:.8rem}
}
/* ---- 2. Breadcrumb ---- */
#product-hero{padding:0 0 20px}
.breadcrumb{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink-soft);padding:18px 0 6px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--gold-deep)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink);font-weight:600}
/* ---- 3. Hero grid: gallery + buy box ---- */
.product-grid{display:grid;grid-template-columns:1fr;gap:34px;margin:12px 0 16px}
@media(min-width:900px){.product-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:52px;align-items:start}}
/* Gallery: vertical thumb rail beside the main stage */
.product-gallery{display:grid;grid-template-columns:1fr;gap:12px;align-self:start}
@media(min-width:900px){
.product-gallery{grid-template-columns:88px minmax(0,1fr);position:sticky;top:90px}
/* Products with a single photo have no thumbnail rail, so the stage takes the full width. */
.product-gallery.is-single{grid-template-columns:minmax(0,1fr)}
}
.gallery-rail{display:flex;gap:10px;order:2;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery-rail::-webkit-scrollbar{display:none}
@media(min-width:900px){
.gallery-rail{order:0;flex-direction:column;overflow-x:visible;overflow-y:auto;max-height:560px;padding-bottom:0}
}
.gallery-thumb{width:80px;height:80px;flex:none;border-radius:14px;overflow:hidden;border:2px solid var(--line);background:var(--cream);cursor:pointer;padding:0;transition:.2s}
.gallery-thumb:hover{border-color:var(--gold-soft)}
.gallery-thumb.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,115,0,.16)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-stage{position:relative;min-width:0}
.gallery-main{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,var(--cream),var(--cream-2));aspect-ratio:1/1;border:1px solid var(--line)}
.gallery-main img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.gallery-sale-badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--gold);color:#fff;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:6px 13px;border-radius:999px}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s;z-index:2}
.gallery-arrow:hover{background:#fff;border-color:var(--gold);color:var(--gold-deep)}
.gallery-arrow svg{width:20px;height:20px}
.gallery-prev{left:12px}
.gallery-next{right:12px}
/* ---- 4. Buy box ---- */
.product-info{padding-top:2px;min-width:0}
.buybox-rating{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-soft);margin-bottom:12px}
.buybox-rating strong{color:var(--ink);font-weight:700}
.buybox-rating em{font-style:italic}
.buybox-rating:hover{color:var(--gold-deep)}
.buybox-stars{display:flex;gap:1px;flex:none}
.buybox-stars svg{width:16px;height:16px;color:var(--star)}
/* The keyword string is still the for SEO, but it reads as a quiet kicker
so the product name carries the visual weight (as on the reference page). */
.product-h1-keywords{font-size:.83rem;line-height:1.5;font-weight:600;letter-spacing:.01em;color:var(--ink-soft);font-family:"Hanken Grotesk",sans-serif;margin-bottom:10px}
/* Visual title. It is a
, not the
, so it needs the heading styling spelled out. */
.product-title{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin-bottom:14px}
.price-block{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.price-now{font-size:2.1rem;font-weight:600;font-family:"Fraunces",serif;color:var(--ink);line-height:1}
.price-was{color:var(--ink-soft);text-decoration:line-through;font-size:1.15rem}
.price-save{background:var(--cream);border:1px solid var(--gold-soft);color:var(--gold-deep);font-weight:700;font-size:.8rem;padding:4px 11px;border-radius:999px}
.price-tax{font-size:.86rem;color:var(--ink-soft)}
.sale-timer{margin:14px 0 0}
.sale-timer:empty{margin:0}
.buybox-bullets{list-style:none;margin:18px 0 0;display:grid;gap:9px}
.buybox-bullets li{display:flex;align-items:flex-start;gap:10px;font-size:1rem;color:var(--ink);line-height:1.45}
.buybox-bullets svg{width:18px;height:18px;color:var(--gold-deep);flex:none;margin-top:3px}
/* Deal callout (renders only when an offer is set) */
.deal-callout{margin:20px 0 0;padding:16px 18px;border-radius:16px;background:var(--gold-soft);border:1px solid var(--sun)}
.deal-callout-title{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);margin-bottom:6px}
.deal-callout-title svg{width:19px;height:19px;color:var(--gold-deep);flex:none}
.deal-callout-body{font-size:.94rem;color:var(--ink-soft);line-height:1.55;margin:0}
/* Option / bundle cards */
.option-cards{display:grid;gap:11px;margin:20px 0 0}
/* Two-axis variants (size + firmness) and the label-only colour picker sit as
inline chips under a group label, rather than full-width stacked cards. */
.option-group{margin:20px 0 0}
.option-group-label{font-size:.95rem;color:var(--ink-soft);margin-bottom:9px}
.option-group-label strong{color:var(--ink)}
.option-cards.is-inline{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.option-cards.is-inline .option-card{padding:11px 15px;min-width:0}
.option-cards.is-inline .option-card-body{gap:1px}
.option-cards.is-inline .option-card-label{font-size:.95rem}
.option-cards.is-inline .option-card-price{font-size:.85rem;color:var(--ink-soft);font-weight:500}
/* VARIANT DROPDOWN (CEO 2026-09-02). The card grid became a wall on a product
with 47 sellable lines, and a native select is also what a phone renders as
its own full-screen picker. Styled here rather than left to the browser:
an unstyled class is invisible to every gate this estate owns and obvious to
anyone who opens the page. `appearance:none` plus an inline SVG chevron so the
control matches the buy box on every browser; 16px font on the control itself
because anything smaller makes iOS Safari zoom the page on focus. */
.option-select-wrap{position:relative;margin:0}
.option-select{
-webkit-appearance:none;appearance:none;
width:100%;box-sizing:border-box;
padding:13px 42px 13px 15px;
font:inherit;font-size:16px;line-height:1.3;color:var(--ink);
background:var(--white);
border:1px solid var(--line);border-radius:12px;
cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1a2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px;
}
.option-select:hover{border-color:var(--ink-soft)}
.option-select:focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-color:var(--sun)}
.option-select option{color:var(--ink);background:var(--white)}
/* Price restated immediately above the Add to Cart button. */
.atc-price{display:flex;align-items:baseline;gap:10px;margin:22px 0 0}
.atc-price-label{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.atc-price-now{font-family:"Fraunces",serif;font-size:1.5rem;font-weight:600;color:var(--ink)}
.atc-price-was{font-size:1rem;font-weight:600;color:var(--ink-soft);text-decoration:line-through}
.option-card{position:relative;display:flex;align-items:center;gap:13px;padding:13px 16px;border:1.5px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:.2s;color:var(--ink)}
.option-card:hover{border-color:var(--gold-soft)}
.option-card.is-selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,115,0,.14)}
.option-card input{position:absolute;opacity:0;pointer-events:none}
.option-card-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;transition:.2s}
.option-card.is-selected .option-card-radio{border-color:var(--gold-deep)}
.option-card.is-selected .option-card-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold-deep)}
.option-card-pic{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--cream);flex:none}
.option-card-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.option-card-label{font-weight:700;font-size:1rem}
.option-card-price{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;color:var(--ink)}
.option-card-price s{color:var(--ink-soft);font-weight:400;font-size:.9rem}
.option-card-price em{font-style:normal;background:var(--gold-soft);color:var(--ink);font-size:.76rem;font-weight:700;padding:3px 9px;border-radius:999px}
.option-card-badge{position:absolute;top:-10px;right:14px;background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.option-note{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.option-note svg{width:18px;height:18px;color:var(--gold-deep);flex:none;margin-top:2px}
.option-note strong{color:var(--ink)}
/* Add to cart */
.atc-row{display:flex;gap:12px;margin:22px 0 18px}
.qty-input{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.qty-btn{width:46px;height:52px;background:transparent;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink)}
.qty-btn:hover{color:var(--gold-deep)}
.qty-input input{width:46px;height:52px;border:none;text-align:center;font-size:1rem;font-weight:600;background:transparent;-moz-appearance:textfield}
.qty-input input::-webkit-outer-spin-button,.qty-input input::-webkit-inner-spin-button{-webkit-appearance:none}
/* Product page only: narrower, and tall enough to match the Add to Cart button. The cart keeps the defaults. */
.atc-row .qty-btn{width:40px;height:56px}
.atc-row .qty-input input{width:40px;height:56px}
.atc-btn{flex:1;min-width:0;height:56px;min-height:56px;font-size:1.05rem;white-space:nowrap;padding-left:18px;padding-right:18px}
/* Reassurance rows under the button */
/* Reassurance rows: icon sits in a soft chip, text alongside. */
.buybox-rows{list-style:none;margin:0;display:grid;gap:10px;padding:18px 0;border-top:1px solid var(--line)}
.buybox-rows li{display:flex;align-items:center;gap:13px;font-size:.94rem;color:var(--ink);line-height:1.45}
/* --line (#ebebeb) rather than --cream here: the page tint is too close to white to read as a chip. */
.buybox-row-chip{width:38px;height:38px;border-radius:11px;background:var(--line);display:grid;place-items:center;flex:none}
.buybox-rows svg{width:19px;height:19px;color:var(--gold-deep)}
.buybox-rows a{color:var(--gold-deep);font-weight:600;text-decoration:underline}
/* Cross-sell inside the buy box, each row with a one-tap add. */
.buybox-also{border-top:1px solid var(--line);padding:20px 0 4px}
.buybox-also-heading{font-size:1.3rem;margin-bottom:14px}
.buybox-also-item{display:flex;align-items:center;gap:14px;padding:10px 0}
.buybox-also-pic{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--cream-2);flex:none}
.buybox-also-pic img{width:100%;height:100%;object-fit:cover}
.buybox-also-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.buybox-also-name{font-family:"Fraunces",serif;font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.25}
.buybox-also-name:hover{color:var(--gold)}
.buybox-also-price{font-weight:700;color:var(--ink);font-size:.98rem}
.buybox-also-price s{color:var(--ink-soft);font-weight:400;font-size:.86rem;margin-left:5px}
.buybox-also-add{width:44px;height:44px;border-radius:50%;border:none;background:var(--gold);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:.2s}
.buybox-also-add:hover{transform:scale(1.06)}
.buybox-also-add svg{width:20px;height:20px}
.buybox-also-add .ic-tick{display:none}
.buybox-also-add.is-added{background:var(--star)}
.buybox-also-add.is-added .ic-plus{display:none}
.buybox-also-add.is-added .ic-tick{display:block}
/* Disclosures */
.buybox-disclosures{border-top:1px solid var(--line);margin-top:16px}
.buybox-disc{border-bottom:1px solid var(--line)}
.buybox-disc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;cursor:pointer;list-style:none;font-size:1.02rem;font-weight:600;color:var(--ink)}
.buybox-disc summary::-webkit-details-marker{display:none}
.buybox-disc-icon{flex:none;color:var(--ink);transition:transform .3s}
.buybox-disc-icon svg{width:17px;height:17px;display:block}
.buybox-disc[open] .buybox-disc-icon{transform:rotate(45deg)}
.buybox-disc-body{padding:0 2px 20px}
.buybox-disc-body p{font-size:.94rem;color:var(--ink-soft);line-height:1.6;margin-bottom:12px}
.buybox-disc-body p:last-child{margin-bottom:0}
.buybox-disc-body a{color:var(--gold-deep);font-weight:600;text-decoration:underline}
.buybox-disc-body .spec-table{border-top:none;max-width:none}
.buybox-disc-body .spec-table th,.buybox-disc-body .spec-table td{padding:10px 2px;font-size:.92rem}
/* ---- 5. Often bought together ---- */
.also-like{padding:clamp(38px,6vw,58px) 0 0}
.also-like h2{font-size:clamp(1.4rem,3vw,1.8rem);margin-bottom:20px}
.also-like-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.also-like-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.also-like-grid{grid-template-columns:repeat(3,1fr)}}
.also-card{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.25s}
.also-card:hover{border-color:var(--gold-soft);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.also-card-pic{width:74px;height:74px;border-radius:13px;overflow:hidden;background:linear-gradient(160deg,var(--cream),var(--cream-2));flex:none}
.also-card-pic img{width:100%;height:100%;object-fit:cover}
.also-card-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.also-card-name{font-family:"Fraunces",serif;font-size:1.02rem;font-weight:600;line-height:1.25}
.also-card-price{font-weight:700;color:var(--ink)}
.also-card-price s{color:var(--ink-soft);font-weight:400;font-size:.88rem;margin-left:6px}
/* ---- 6. Highlight / guarantee cards ---- */
.product-highlights{padding:clamp(38px,6vw,58px) 0 0}
.highlight-row{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.highlight-row{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.highlight-row{grid-template-columns:repeat(4,1fr)}}
.highlight-card{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:16px}
.highlight-icon{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0}
/* ── USP card shades (fleet standard 2026-08-04, matches insectscreens.it) ──
Four soft shades, one per card. Card 1 follows the brand's own accent tokens where
they exist; every colour carries a literal fallback so this renders correctly on any
palette in the fleet, including repos that use different token names.
Retargeted from .atc-trust-item to .highlight-card: the product page reformat
replaced the old 2x2 trust grid with this 4-up guarantee row, which is the same
icon + title + description card. NOTE: these are the fleet pastels, not the
cloudpillo palette — flagged for David to choose which wins here. */
.highlight-card:nth-child(1){background:var(--accent-tint,var(--paper-2,#eaf2fb));border-color:var(--accent-soft,#d5e5f6)}
.highlight-card:nth-child(1) .highlight-icon{color:var(--accent,#0b6bcb)}
.highlight-card:nth-child(2){background:#eaf7ef;border-color:#d3ecdd}
.highlight-card:nth-child(2) .highlight-icon{color:#178a50}
.highlight-card:nth-child(3){background:#fdf6e9;border-color:#f1e4c8}
.highlight-card:nth-child(3) .highlight-icon{color:#a8730f}
.highlight-card:nth-child(4){background:#f1effb;border-color:#e0dcf4}
.highlight-card:nth-child(4) .highlight-icon{color:#5b4bc4}
.highlight-card .highlight-icon{border-color:inherit}
.highlight-text strong{display:block;font-size:.92rem}
.highlight-text span{font-size:.82rem;color:var(--ink-soft);line-height:1.45}
/* ---- 7. The pitch ---- */
.pitch{padding:clamp(48px,7vw,80px) 0 0}
.pitch-inner{max-width:760px}
.pitch-heading{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:6px 0 14px}
.pitch-sub{font-size:1.18rem;line-height:1.5;color:var(--ink-soft);margin-bottom:22px}
.details-heading{margin:6px 0 22px}
.about-para{margin-bottom:14px;color:var(--ink-soft);font-size:1.05rem}
/* ---- 8. Feature blocks (alternating image / copy) ---- */
.feature-blocks{padding:clamp(40px,6vw,64px) 0 0}
.feature-block{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;margin-bottom:clamp(30px,5vw,52px)}
@media(min-width:820px){
.feature-block{grid-template-columns:1fr 1fr;gap:48px}
.feature-block.is-flipped .feature-block-pic{order:2}
}
.feature-block-pic{margin:0;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,var(--cream),var(--cream-2));border:1px solid var(--line);aspect-ratio:1/1}
.feature-block-pic img{width:100%;height:100%;object-fit:contain}
.feature-block-copy p{font-size:1.08rem;line-height:1.65;color:var(--ink-soft)}
.feature-para{max-width:760px;font-size:1.05rem;color:var(--ink-soft);margin-bottom:16px}
/* ---- 9. Video / spec images / spec table ---- */
.product-video{padding:clamp(36px,6vw,64px) 0 0}
.product-video-el{width:100%;height:auto;display:block;border-radius:18px;background:#000;box-shadow:var(--shadow-sm)}
.product-specs{padding:clamp(40px,6vw,64px) 0 0}
.product-specs-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:760px){.product-specs-grid.is-multi{grid-template-columns:1fr 1fr}}
.product-spec-figure{margin:0;width:100%}
.product-spec-figure img{display:block;width:100%;height:auto}
#specifications{padding:clamp(48px,7vw,80px) 0 0}
.spec-table{width:100%;border-collapse:collapse;max-width:760px;border-top:1px solid var(--line)}
.spec-table th,.spec-table td{text-align:left;padding:15px 4px;border-bottom:1px solid var(--line);font-size:1rem;vertical-align:top}
.spec-table th{width:34%;font-weight:600;color:var(--ink-soft)}
.spec-table td{color:var(--ink);font-weight:600}
/* ---- 10. Reviews ---- */
#reviews{padding:clamp(48px,7vw,80px) 0 0}
.reviews-inner{max-width:760px}
.reviews-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink-soft);margin:0 0 20px}
.reviews-summary strong{color:var(--ink)}
.review-card{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:24px 26px;margin:0}
.review-card-title{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.review-card-quote{font-style:italic;color:var(--ink);font-size:1.05rem;line-height:1.6;margin-bottom:14px}
.review-card-author{display:flex;align-items:center;gap:11px}
.review-card-avatar{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:600;font-size:.85rem}
.review-card-author cite{font-style:normal;font-weight:600;font-size:.94rem;color:var(--ink)}
/* ---- 11. Risk reversal ---- */
.risk-reversal{padding:clamp(48px,7vw,80px) 0 0}
.risk-inner{background:var(--sky);border:1px solid var(--sky);border-radius:24px;padding:clamp(26px,4vw,40px)}
.risk-inner h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:4px 0 14px}
.risk-inner p{margin-bottom:14px}
.risk-inner a:not(.btn){color:var(--gold-deep);font-weight:600;text-decoration:underline}
.risk-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.risk-actions .btn{text-decoration:none}
/* ---- 12. FAQ ---- */
#faq,#buying-guide,#cta-banner{padding:clamp(48px,7vw,80px) 0}
#faq{background:var(--cream);margin-top:clamp(48px,7vw,80px)}
.faq-wrap{max-width:780px;margin:0 auto;text-align:center}
.faq-wrap h2{margin-bottom:4px}
.faq-item{text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;margin-top:14px;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q h3{font-family:"Hanken Grotesk",sans-serif;font-size:1.06rem;font-weight:600;line-height:1.4}
.faq-icon{flex-shrink:0;color:var(--gold-deep);transition:transform .3s}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
.faq-a{padding:0 24px 22px;color:var(--ink-soft);font-size:1rem}
/* ---- 13. Buying guide ---- */
#buying-guide{background:var(--cream)}
.guide-inner{max-width:820px;margin:0 auto}
.guide-title{margin-bottom:12px}
.guide-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-soft);font-size:.85rem;margin-bottom:30px}
.guide-meta span{display:flex;align-items:center;gap:6px}
.guide-inner :is(h2,h3){clear:both;margin:40px 0 12px;color:var(--ink)}
.guide-inner h2{font-size:clamp(1.6rem,4vw,2.1rem)}
.guide-inner h2::after{content:"";display:block;width:46px;height:3px;margin-top:14px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));border-radius:3px}
.guide-inner h3{font-size:1.3rem}
.guide-inner p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:16px}
.guide-inner ul,.guide-inner ol{margin:0 0 18px 22px}
.guide-inner li{margin-bottom:7px;color:var(--ink-soft)}
.guide-inner strong{color:var(--ink);font-weight:600}
.guide-inner a:not(.btn){color:var(--gold-deep);text-decoration:underline}
.guide-inner a.btn{text-decoration:none}
.guide-inner a.btn-primary,.guide-inner a.btn-dark{color:#fff}
/* ---- 14. CTA banner ---- */
#cta-banner{position:relative;background:var(--ink);color:#fff;text-align:center;overflow:hidden}
#cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0%,rgba(180,226,248,.30) 0%,rgba(180,226,248,0) 60%)}
#cta-banner .container{position:relative;z-index:2;max-width:720px}
#cta-banner h2{color:#fff}
#cta-banner .btn-dark{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
#cta-banner .btn-dark:hover{background:#fff;color:var(--ink);border-color:#fff}
#cta-banner p{color:rgba(255,255,255,.82);margin:14px auto 26px}
/* ---- 15. Sticky mobile buy bar ---- */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--line);padding:10px 0 calc(10px + var(--safe-b));transform:translateY(110%);transition:transform .3s ease;box-shadow:0 -10px 30px -20px rgba(14,26,43,.45)}
.sticky-buy.is-visible{transform:none}
.sticky-buy[hidden]{display:none}
.sticky-buy-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:16px}
.sticky-buy-pic{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--cream-2);flex:none}
.sticky-buy-meta{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.sticky-buy-name{font-family:"Fraunces",serif;font-size:1.02rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy-points{list-style:none;display:none;gap:22px;margin:0}
.sticky-buy-points li{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--ink-soft);white-space:nowrap}
.sticky-buy-points svg{width:15px;height:15px;color:var(--star);flex:none}
.sticky-buy-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;line-height:1.1}
.sticky-buy-now{font-family:"Fraunces",serif;font-size:1.25rem;font-weight:600;color:var(--ink)}
.sticky-buy-price s{color:var(--ink-soft);font-size:.85rem}
.sticky-buy-save{background:var(--gold-soft);color:var(--ink);font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px}
.sticky-buy-btn{min-height:48px;height:48px;padding:0 26px;flex:none}
/* Desktop: room for the benefit ticks, as on the reference bar. */
@media(min-width:900px){
.sticky-buy-points{display:flex}
.sticky-buy-price{flex-direction:row;align-items:baseline;gap:9px}
}
/* Narrow phones: drop the thumbnail and struck price so the button keeps its width. */
@media(max-width:480px){
.sticky-buy-inner{gap:12px;padding:0 16px}
.sticky-buy-pic,.sticky-buy-price s{display:none}
.sticky-buy-name{font-size:.92rem}
.sticky-buy-btn{padding:0 18px}
}
/* Cart upsell / cross-sell card */
.cart-upsell{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--gold-soft);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm)}
.cart-upsell[hidden]{display:none}
.cart-upsell-pic{flex-shrink:0;width:88px;height:88px;border-radius:12px;overflow:hidden;background:var(--cream)}
.cart-upsell-pic img{width:100%;height:100%;object-fit:cover}
.cart-upsell-body{flex:1;min-width:0}
.cart-upsell-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
.cart-upsell-body h3{font-family:"Fraunces",serif;font-size:1.15rem;margin-bottom:4px}
.cart-upsell-body h3 a{color:var(--ink)}
.cart-upsell-desc{color:var(--ink-soft);font-size:.9rem;line-height:1.5;margin:0}
.cart-upsell-action{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.cart-upsell-price{font-family:"Fraunces",serif;font-size:1.25rem;font-weight:600;color:var(--ink)}
.cart-upsell-price s{color:var(--ink-soft);font-size:.9rem;font-weight:400;margin-left:6px}
.cart-upsell-btn{height:44px;font-size:.92rem;white-space:nowrap}
@media(max-width:560px){
.cart-upsell{flex-direction:column;align-items:stretch;text-align:left}
.cart-upsell-pic{width:100%;height:160px}
.cart-upsell-action{flex-direction:row;align-items:center;justify-content:space-between}
}
/* =========================================================
SHOP LISTING / PRODUCT CARDS
========================================================= */
.shop-page{padding:48px 0 70px}
.shop-page-head{max-width:680px;margin:0 0 36px}
.shop-page-head h1{margin-bottom:12px}
.shop-category + .shop-category{margin-top:54px}
.shop-cat-title{font-family:"Fraunces",serif;font-size:clamp(1.5rem,3vw,1.9rem);font-weight:600;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.shop-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:620px){.shop-grid{grid-template-columns:1fr 1fr}}
@media(min-width:920px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
.scard{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:.3s}
.scard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold-soft)}
.scard-pic{position:relative;display:block;aspect-ratio:1/1;background:linear-gradient(160deg,var(--cream),var(--cream-2))}
.scard-pic img{width:100%;height:100%;object-fit:cover}
.scard-badge{position:absolute;top:14px;left:14px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.scard-meta{padding:24px;display:flex;flex-direction:column;flex:1}
.scard-meta .stars{display:flex;gap:2px;margin-bottom:12px}
.scard-meta .stars svg{width:16px;height:16px;color:var(--gold)}
.scard-meta h3{font-family:"Fraunces",serif;font-size:1.32rem;font-weight:600;margin-bottom:8px}
.scard-meta>p{color:var(--ink-soft);font-size:.98rem;margin-bottom:18px;flex:1}
.scard-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.scard-price .now{font-family:"Fraunces",serif;font-size:1.7rem;font-weight:600;color:var(--ink);line-height:1}
.scard-price .was{color:var(--ink-soft);text-decoration:line-through;font-size:1.05rem}
.scard-price .ship{width:100%;font-size:.85rem;font-weight:600;color:var(--gold-deep)}
.scard .btn{width:100%}
/* =========================================================
CART
========================================================= */
#cart-page{padding:40px 0 80px}
.cart-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.cart-continue{color:var(--gold-deep);font-weight:600;font-size:.92rem}
.cart-welcome{color:var(--ink-soft);margin-bottom:30px}
.cart-empty{text-align:center;padding:70px 20px;color:var(--ink-soft)}
.cart-empty svg{color:var(--line);margin:0 auto 16px}
.cart-empty p{margin-bottom:20px}
.cart-layout{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
@media(min-width:880px){.cart-layout{grid-template-columns:2fr 3fr;gap:40px}}
.cart-trust{margin-top:48px;border-top:1px solid var(--line);padding-top:40px}
.cart-trust-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:760px){.cart-trust-grid{grid-template-columns:repeat(3,1fr);gap:30px}}
.cart-trust-item{display:flex;flex-direction:column;gap:12px}
.cart-trust-icon{width:52px;height:52px;border-radius:14px;background:var(--cream);border:1px solid var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center}
.cart-trust-body h3{font-family:"Fraunces",serif;font-size:1.15rem;margin-bottom:6px}
.cart-trust-body p{font-size:.92rem;color:var(--ink-soft);line-height:1.6;margin:0}
.cart-items{display:flex;flex-direction:column;gap:16px}
.cart-item{display:grid;grid-template-columns:96px 1fr auto;gap:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;align-items:center}
.cart-item-img{width:96px;height:96px;border-radius:12px;overflow:hidden;background:var(--cream)}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-body{min-width:0}
.cart-item-body h3{font-family:"Fraunces",serif;font-size:1.12rem;margin-bottom:6px;overflow-wrap:break-word;word-break:break-word}
.cart-item-meta{list-style:none;font-size:.85rem;color:var(--ink-soft)}
.cart-item-controls{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cart-item-price{font-weight:600;font-size:1.1rem;font-family:"Fraunces",serif}
.cart-remove{background:none;border:none;color:var(--ink-soft);cursor:pointer;padding:4px}
.cart-remove:hover{color:var(--gold-deep)}
.cart-sidebar{display:flex;flex-direction:column;gap:16px}
@media(min-width:880px){.cart-sidebar{position:sticky;top:90px}}
.cart-summary,.cart-customer{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:24px}
.cart-summary h2,.cart-customer h2{font-size:1.3rem;margin-bottom:16px}
.cart-summary-row{display:flex;justify-content:space-between;padding:7px 0;font-size:.96rem}
.cart-summary-free{color:var(--gold-deep);font-weight:600}
.cart-delivery-hint{font-size:.78rem;color:var(--gold-deep);font-weight:600;margin:2px 0 0;text-align:right}
.cart-summary-total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-weight:700;font-size:1.15rem}
.cart-section-label{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:4px 0 12px}
.cart-section-divider{height:1px;background:var(--line);margin:18px 0}
.cart-field{margin-bottom:13px}
.cart-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.cart-field .req{color:var(--gold-deep)}
.cart-optional{color:var(--ink-soft);font-weight:400}
.cart-field input,.cart-field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-family:"Hanken Grotesk",sans-serif;font-size:.95rem;background:#fff;color:var(--ink)}
.cart-field input:focus,.cart-field textarea:focus{outline:none;border-color:var(--gold)}
.cart-field-error{display:none;font-size:.78rem;color:var(--gold-deep);margin-top:5px}
.cart-field.is-invalid input,.cart-field.is-invalid textarea{border-color:#c0512b}
.cart-field.is-invalid .cart-field-error{display:block}
.cart-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cart-divider{text-align:center;position:relative;color:var(--ink-soft);font-size:.82rem;margin:4px 0}
.cart-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.cart-divider span{background:var(--white);padding:0 12px;position:relative}
.cart-secure{display:flex;align-items:center;justify-content:center;gap:7px;font-size:.82rem;color:var(--ink-soft)}
.cart-secure svg{color:var(--gold-deep)}
/* =========================================================
ORDER RESULT
========================================================= */
#order-success-page,#order-cancel-page{padding:90px 0}
.order-result{max-width:560px;margin:0 auto;text-align:center}
.order-result-icon{width:84px;height:84px;border-radius:50%;background:var(--cream);border:1px solid var(--gold-soft);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.order-result-icon--error{background:#fbe9e0;border-color:#eccdbd;color:#c0512b}
.order-result-icon--spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.order-result h1{margin-bottom:14px}
.order-result p{color:var(--ink-soft);margin-bottom:14px}
.order-result .btn{margin-top:12px}
.order-ref{display:inline-block;margin:4px auto 18px;padding:9px 18px;border:1px solid var(--gold-soft);border-radius:999px;background:var(--cream);font-size:.92rem;font-weight:600;color:var(--ink)}
/* =========================================================
PROSE / CONTACT
========================================================= */
.prose-page{padding:50px 0 80px}
.prose-page .container{max-width:var(--maxw)}
.prose-page h1{margin-bottom:8px}
.prose-updated{color:var(--ink-soft);font-size:.88rem;margin-bottom:32px}
.prose-page h2{font-size:1.5rem;margin:34px 0 12px}
.prose-page h3{font-size:1.18rem;margin:22px 0 8px}
.prose-page p{margin-bottom:15px;color:var(--ink-soft)}
.prose-page ul{margin:0 0 18px 22px}
.prose-page li{margin-bottom:7px;color:var(--ink-soft)}
.prose-page a{color:var(--gold-deep);text-decoration:underline}
.prose-page .btn{text-decoration:none}
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:880px){.contact-grid{grid-template-columns:1fr 1fr;gap:48px}}
.contact-form{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:28px}
.contact-form .cart-field{margin-bottom:16px}
.form-status{margin-top:14px;font-size:.9rem}
.form-status.ok{color:var(--gold-deep)}
.form-status.err{color:#c0512b}
/* contact details (shared layout, matches the home page contact section) */
.contact-intro p{color:var(--ink-soft);font-size:1.06rem;margin-bottom:24px;max-width:460px}
.contact-methods{display:grid;gap:14px}
.cmethod{display:flex;align-items:center;gap:16px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:18px 20px;transition:.25s;text-decoration:none}
.cmethod:hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.cmethod .ic{width:46px;height:46px;flex:none;border-radius:12px;background:#fff;border:1px solid var(--gold-soft);display:grid;place-items:center}
.cmethod .ic svg{width:22px;height:22px;color:var(--gold-deep)}
.cmethod small{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cmethod b{font-size:1.05rem;font-weight:600;color:var(--ink);word-break:break-word}
.company-card{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:30px;margin-top:24px}
.company-card h3{margin-bottom:6px}
.company-card .sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:20px}
.detail-list{list-style:none;display:grid;gap:0;margin:0}
.detail-list li{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-top:1px solid var(--line)}
.detail-list li:first-child{border-top:none;padding-top:0}
.detail-list .k{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.detail-list .v{font-size:1rem;color:var(--ink);line-height:1.5}
.detail-list .v a{color:var(--gold-deep);font-weight:600}
/* =========================================================
ABOUT PAGE (fleet-standard shape, structure only — see
magneticscreens.co.za/screen-company for the canonical layout)
========================================================= */
.about-page{padding:50px 0 80px}
.about-hero{max-width:760px;margin-bottom:42px}
.about-hero h1{margin-bottom:8px}
.about-lede{color:var(--ink-soft);font-size:1.15rem;line-height:1.55;margin-bottom:18px}
.about-chips{display:flex;flex-wrap:wrap;gap:8px}
.about-chip{display:inline-block;background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:600;color:var(--ink)}
.about-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;margin-bottom:48px}
@media(min-width:880px){.about-grid{grid-template-columns:1.4fr 1fr;gap:52px}}
.about-story h2{font-size:1.5rem;margin:0 0 12px}
.about-story h2 + p{margin-top:0}
.about-story p{margin-bottom:15px;color:var(--ink-soft);line-height:1.65}
.about-story p + h2{margin-top:34px}
.about-story a{color:var(--gold-deep);text-decoration:underline}
.about-company-card{background:var(--cream-2);border:1px solid var(--line);border-radius:20px;padding:26px 26px 20px;position:sticky;top:90px}
.about-company-card h2{font-size:1.12rem;margin-bottom:16px}
.about-range-heading{font-size:1.5rem;margin-bottom:18px}
.about-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:44px}
@media(min-width:640px){.about-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.about-cards{grid-template-columns:repeat(4,1fr)}}
.about-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.about-card h3{font-size:1.02rem;margin-bottom:8px}
.about-card p{font-size:.92rem;color:var(--ink-soft);line-height:1.6}
.about-policies{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-bottom:36px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.about-policies p{color:var(--ink-soft);margin:0}
.about-policy-links{display:flex;flex-wrap:wrap;gap:8px}
.about-policy-links a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none;transition:.2s}
.about-policy-links a:hover{border-color:var(--gold);color:var(--gold-deep)}
.about-cta{display:flex;flex-wrap:wrap;gap:12px}
/* ---- Lightbox ---- */
.lightbox-overlay{position:fixed;inset:0;background:rgba(31,27,22,.9);display:none;align-items:center;justify-content:center;z-index:300;padding:30px;cursor:zoom-out}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:92vw;max-height:90vh;border-radius:12px}
/* ---- Responsive ---- */
@media(min-width:880px){
.burger{display:none}
.nav-links{display:flex}
.nav-cta{display:inline-flex}
}
@media(max-width:560px){
.atc-trust-grid{grid-template-columns:1fr}
.cart-field-row{grid-template-columns:1fr}
/* Cart row: image + title on top, controls full-width below */
.cart-item{grid-template-columns:72px 1fr;gap:14px;align-items:start}
.cart-item-img{width:72px;height:72px}
.cart-item-controls{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Cart discount code */
/* Delivery speed (rule 17 express). Rendered only when site.delivery.express.enabled,
so these rules are inert on a standard-only store. Each option is a full-width row
rather than inline text: the first build shipped the markup with no styles at all and
the two choices ran together into one unreadable sentence. */
.cart-shipping{border:0;margin:12px 0 4px;padding:0}
.cart-shipping legend{padding:0;margin-bottom:8px}
.cart-shipping-opt{
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-areas:"radio name fee" "radio time fee";
gap:2px 10px;align-items:center;
padding:10px 12px;margin-bottom:8px;
border:1.5px solid var(--line);border-radius:12px;
cursor:pointer;transition:border-color .2s,background .2s;
}
.cart-shipping-opt:last-child{margin-bottom:0}
.cart-shipping-opt:hover{border-color:var(--gold)}
.cart-shipping-opt:has(input:checked){border-color:var(--gold);background:rgba(255,115,0,.05)}
.cart-shipping-opt:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.cart-shipping-opt input{grid-area:radio;margin:0;accent-color:var(--gold);width:17px;height:17px}
.cart-shipping-name{grid-area:name;font-weight:600;font-size:.95rem;line-height:1.2}
.cart-shipping-time{grid-area:time;font-size:.82rem;color:var(--ink-soft);line-height:1.3}
.cart-shipping-fee{grid-area:fee;font-weight:700;font-size:.95rem;white-space:nowrap}
.cart-discount-entry{margin-top:14px}
.cart-discount-entry label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.cart-discount-input{display:flex;gap:8px}
.cart-discount-input input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:.95rem;font-family:inherit;background:#fff;color:var(--ink)}
.cart-discount-input .btn{padding:10px 16px}
.cart-discount-msg{font-size:.9rem;margin:8px 0 0}
.cart-discount-msg.err{color:#c0392b}
.cart-discount-msg.ok{color:#1e6b3a}
.cart-discount-remove{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}
.cart-summary-row[hidden],.cart-discount-entry label[hidden],.cart-discount-input[hidden]{display:none}
a.btn-review-red,.prose-page a.btn-review-red{background:#e8192c;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-radius:6px}
a.btn-review-red:hover,.prose-page a.btn-review-red:hover{background:#c31423;color:#fff}
/* Per-unit pricing label (e.g. 'per metre'). Sits beside the charged price so a
saving on a per-unit product cannot read as money off the whole order. */
.price-unit{font-size:.62em;font-weight:500;color:var(--ink-soft);margin-left:2px;letter-spacing:0}
.scard-price .unit{font-size:.8rem;font-weight:500;color:var(--ink-soft);margin-left:-4px}
/* ---- Rule 16a Trustpilot import (ported from the reference build) ---- */
/* Unboxed countdown line immediately beneath the compact Trustpilot score. */
.tp-inline-rating + .sale-timer{margin:0 0 12px;padding:0;border:0;background:transparent;color:inherit;text-align:left;font-family:inherit}
.tp-inline-rating + .sale-timer:empty{margin:0}
/* ── Complete company-wide Trustpilot review snapshot ───────────────────── */
.tp-inline-rating{display:flex;align-items:center;gap:7px;width:max-content;max-width:100%;margin:6px 0 12px;color:var(--ink);font-size:.9rem;line-height:1.2;text-decoration:none}
.tp-inline-rating:hover em{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tp-inline-rating strong{white-space:nowrap}
.tp-inline-stars{display:inline-flex;gap:2px;flex:none}
.tp-reviews{padding:72px 0;background:#f5f5f2;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tp-reviews-head{text-align:center;max-width:760px;margin:0 auto 22px}
.tp-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;color:var(--ink);text-decoration:none;margin:0 auto 34px;font-size:.9rem}
.tp-stars,.tp-card-stars{display:inline-flex;gap:2px}
.tp-carousel-shell{position:relative}
.tp-review-card{display:flex;flex-direction:column;scroll-snap-align:start;background:#fff;border:1px solid #e7e7e4;border-radius:14px;padding:25px 24px;min-height:280px;box-shadow:0 3px 16px rgba(15,20,25,.035)}
.tp-review-text{white-space:pre-line;color:var(--ink-soft);line-height:1.55;margin:0 0 24px}
.tp-carousel-arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font:400 30px/1 system-ui;cursor:pointer;box-shadow:0 4px 14px rgba(15,20,25,.1)}
.tp-review-provenance{text-align:center;color:var(--ink-soft);font-size:.82rem;margin:18px 0 0}
/* Wholesale/FAQ consistency (2026-09-02): full-width FAQ modifier + keep button text white on prose pages */
.faq-wrap--wide{max-width:none}
.prose-page a.btn-primary,.prose-page a.btn-dark{color:#fff}
/* --- port additions (budgetscreens.net.au, 2026-09-03) -----------------
Two class names the markup renders and the stylesheet never styled.
.tp-star the INDIVIDUAL star inside .tp-stars. Only the plural had a rule,
so five characters shipped at body size in the body colour, which
is the mysilkpillowcase.co.uk `.bcard.ic` shape: one character
between the class that is styled and the class that is used.
.wholesale-form no rule at all; the form sat flush against the paragraph
above it.
Found by check-unstyled-classes, which reads the stylesheets each page
actually links rather than assuming one global sheet. */
.tp-stars .tp-star{font-size:18px;line-height:1;color:#d7d3cb;letter-spacing:1px}
.tp-stars .tp-star.is-filled{color:#00b67a}
.wholesale-form{margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08)}
/* Three more rule-16a classes the MARKUP renders and this whole lineage never
styled: the individual inline star, the carousel track, and the previous
arrow. Without them the star row is grey text, the carousel is a vertical
list instead of a scroller, and the back arrow sits on top of the first card.
The clone base ships the same 15 rules and the same three gaps; it does not
ship check-unstyled-classes, which is the only reason nobody had seen it.
Taken verbatim from a sibling port that carries the complete set rather than
re-derived, including the two responsive breakpoints, because a carousel
styled only at desktop width is the same defect one media query along. */
.tp-inline-star{display:grid;place-items:center;width:19px;height:19px;background:#d9dce1;color:#fff;font-size:13px;line-height:1}
.tp-inline-star.is-filled{background:#00b67a}
.tp-review-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,calc((100% - 44px)/3));gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;list-style:none;margin:0;padding:2px 1px 12px;scrollbar-width:none}
.tp-review-track::-webkit-scrollbar{display:none}
.tp-carousel-arrow:hover{border-color:#00b67a}
.tp-carousel-arrow--prev{left:-21px}
.tp-carousel-arrow--next{right:-21px}
@media(max-width:900px){.tp-review-track{grid-auto-columns:minmax(290px,calc((100% - 22px)/2))}.tp-carousel-arrow--prev{left:-10px}.tp-carousel-arrow--next{right:-10px}}
@media(max-width:620px){.tp-review-track{grid-auto-columns:88%}}
/* And four more, from the same audit. `.tp-card-star` is the review-card star
and appears 220 times on four pages; `.prose-body` and `.order-next` are the
blog and order-success layouts; `.scard-name` is the shop-card product name,
which had no rule at all on eight cards across three grids. Every one of them
is a gap this whole lineage carries, invisible until check-unstyled-classes
was imported. The first three are taken verbatim from a sibling port that
carries them; .scard-name exists in no sibling, so it is written here to sit
with the card styles around it rather than left bare. */
.tp-card-star{display:grid;place-items:center;width:21px;height:21px;background:#d9dce1;color:#fff;font-size:15px;line-height:1}
.tp-card-star.is-filled{background:#00b67a}
.prose-body{max-width:none}
.prose-body p{margin:0 0 1.05em}
.order-next{margin:1.6em 0 0;padding:0;list-style:none}
.order-next li{margin:0 0 .45em}
.scard-name{display:block;margin:0 0 6px;font-weight:600;line-height:1.35;color:var(--ink)}
/* `.divider` and `.cart-field--narrow` exist in sibling ports and not in this
lineage's stylesheet, so nine horizontal rules on the privacy and terms pages
rendered as nothing and the cart's postcode field ran the full width.
`.narrow` is used by every prose page in this repo as `container narrow` and
is styled NOWHERE in the lineage, so "narrow" has been a no-op class on the
legal set for as long as the lineage has existed. */
.divider{height:1px;background:rgba(0,0,0,.12);border:0;margin:2em 0}
.cart-field--narrow{max-width:220px}
.container.narrow{max-width:820px}
.callout{margin:1.6em 0;padding:16px 18px;border-left:3px solid var(--gold);background:rgba(0,0,0,.03);border-radius:0 8px 8px 0}
.callout p:last-child{margin-bottom:0}
/* END port additions */
/* ══════════════════════════════════════════════════════════════════════════
ADDED BY THIS PORT, 2026-09-03. Every rule below exists because
check-unstyled-classes named the class and the page that renders it: it reads
the stylesheets each page actually LINKS, not the ones that exist.
══════════════════════════════════════════════════════════════════════════ */
/* 1. The article layout, forward-ported from the newest sibling in this lineage
because the clone base ships no posts machinery at all. 223 pages carried
these two classes with no rule behind them. */
.prose-breadcrumb {
margin: 0 0 1rem;
font-size: .8125rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-soft);
}
.prose-breadcrumb a { color: var(--gold); text-decoration: none; }
.prose-breadcrumb a:hover { text-decoration: underline; }
.post-cta {
margin: 2.5rem 0 0;
padding: 1.25rem 1.5rem;
background: var(--cream);
border-left: 3px solid var(--gold);
border-radius: 6px;
font-size: .9375rem;
line-height: 1.7;
color: var(--ink);
}
.post-cta a { color: var(--gold); font-weight: 600; }
/* 2. The per-axis variant dropdowns (CEO 2026-09-03, generalised to N axes for
this store's three-axis velcro screen). A control a shopper has to use,
on nine pages that take money. */
.option-axis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin: 0 0 12px;
}
.option-axis { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.option-axis-label {
font-size: .8125rem;
font-weight: 600;
letter-spacing: .02em;
color: var(--ink-soft);
}
.option-axis .option-select-wrap { margin: 0; }
.option-axis .option-select { width: 100%; }
/* 3. This store's own custom-quote block, on /quote/custom-window-screen and
/quote/custom-magnetic-door-screen. The markup is the store's (rule 13
keeps it); its stylesheet lived in the Divi theme and did not survive the
conversion, so the pages rendered as a stack of unstyled divs. */
.bsq-quote-wrap { max-width: 900px; margin: 32px auto; padding: 0 16px; }
.bsq-heading { text-align: center; }
.bsq-heading h2 { margin: 0 0 8px; font-size: clamp(1.35rem, 3vw, 1.9rem); }
.bsq-heading p { margin: 0; color: var(--ink-soft); }
.bsq-divider {
height: 1px;
background: var(--line);
margin: 24px 0;
}
.bsq-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.bsq-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 22px 18px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--shadow-sm);
text-align: center;
cursor: pointer;
}
.bsq-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bsq-badge {
display: inline-block;
padding: 5px 12px;
border-radius: 999px;
background: var(--gold);
color: var(--white);
font-size: .75rem;
font-weight: 700;
letter-spacing: .03em;
}
.bsq-rep-photo-wrap {
width: 108px;
height: 108px;
border-radius: 50%;
overflow: hidden;
background: var(--cream);
}
.bsq-rep-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsq-icon-wrap {
display: grid;
place-items: center;
width: 108px;
height: 108px;
border-radius: 50%;
background: var(--cream-2);
}
.bsq-icon-wrap svg, .bsq-icon-wrap img { width: 46px; height: 46px; }
.bsq-btn {
display: inline-block;
margin-top: 4px;
padding: 10px 20px;
border-radius: 8px;
background: var(--ink);
color: var(--white);
font-weight: 600;
font-size: .9375rem;
}
.bsq-form-panel {
margin: 20px 0 0;
padding: 20px;
background: var(--cream);
border-radius: 12px;
}
.bsq-form-inner { max-width: 560px; margin: 0 auto; }
.bsq-form-sub { margin: 0 0 14px; color: var(--ink-soft); font-size: .9375rem; }
@media (max-width: 640px) {
.bsq-quote-wrap { margin: 22px auto; }
}