/* ========================================================= Tritan Glassware Company - storefront design system ========================================================= */ /* --------------------------------------------------------------- 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%} /* MyLawn catalogue surfaces */ .store-trust{background:#163820;color:#fff;padding:12px 0;font-size:.88rem} .store-trust__row{display:flex;justify-content:center;gap:28px;flex-wrap:wrap} .store-trust__row span{color:#fff} .catalog-product,.catalog-section{padding:72px 0} .catalog-section--soft{background:#f1f5ec} .narrow{max-width:850px} .breadcrumb{display:flex;gap:10px;align-items:center;color:var(--ink-soft);font-size:.9rem;margin-bottom:28px;flex-wrap:wrap} .catalog-product__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:60px;align-items:start} .catalog-product__hero{width:100%;aspect-ratio:1/1;object-fit:contain;background:#f4f7f0;border:1px solid var(--line);border-radius:24px} .catalog-product__thumbs{display:flex;gap:10px;margin-top:14px;overflow:auto;padding-bottom:5px} .catalog-product__thumbs button{width:72px;height:72px;flex:none;border:2px solid transparent;border-radius:12px;background:#fff;padding:3px;cursor:pointer} .catalog-product__thumbs button.is-active{border-color:#387047} .catalog-product__thumbs img{width:100%;height:100%;object-fit:cover;border-radius:8px} .catalog-product__name{font-size:1.15rem;margin:14px 0} .catalog-product__price{font-size:2.1rem;font-weight:700;color:#163820;margin:16px 0} .catalog-product__highlights{display:grid;gap:8px;margin:22px 0;list-style:none} .catalog-product__highlights li:before{content:'✓';color:#387047;font-weight:700;margin-right:10px} .catalog-product__buy{display:flex;align-items:center;gap:12px;margin:28px 0 14px;flex-wrap:wrap} .catalog-product__variants{margin:20px 0 24px}.catalog-product__variants p{margin:0 0 10px}.variant-links{display:flex;flex-wrap:wrap;gap:9px}.variant-links a{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink);text-decoration:none}.variant-links a:hover,.variant-links a.is-current{border-color:var(--green);box-shadow:0 0 0 2px rgba(22,56,32,.12)}.variant-links a.is-current{background:#eef5ef;font-weight:700}.variant-links span{color:var(--green);font-weight:700}.catalog-product__price small{font-size:.95rem;font-weight:600;color:var(--muted)} .catalog-product__buy label{font-weight:700} .catalog-product__buy input{width:78px;height:52px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font:inherit} .catalog-product__delivery{font-size:.95rem} .catalog-section video{width:100%;border-radius:20px;background:#111} .ported-guide{margin-top:24px} .ported-guide h2,.ported-guide h3{margin:28px 0 12px} .ported-guide p,.ported-guide ul{margin:12px 0} .ported-guide ul{padding-left:22px;color:var(--ink-soft)} .faq-list{margin-top:25px;border-top:1px solid #ced9c9} .faq-list details{border-bottom:1px solid #ced9c9;padding:18px 0} .faq-list summary{font-weight:700;cursor:pointer;list-style-position:outside;margin-left:20px} .faq-list p{margin:12px 0 0 20px} .section-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:30px} .home-values{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px} .home-values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .home-values__grid article{background:#fff;padding:24px;border-radius:18px;border:1px solid #dce5d7} .home-values__grid p{font-size:.95rem;margin-top:9px} @media(max-width:850px){.catalog-product__grid,.home-values{grid-template-columns:1fr}.home-values__grid{grid-template-columns:1fr}.catalog-product,.catalog-section{padding:48px 0}.catalog-product__info{order:-1}} /* --------------------------------------------------------------- Six classes the templates use that this stylesheet never defined. Reported by David 2026-09-01 as "formatting is not correct" on the home, about and contact pages, and that is exactly the blast radius: .page-hero / .page-hero--compact about, contact-adjacent pages, blog, and the 3 ported keyword pages (6 templates) .home-intro the WHOLE imported home-page body .category-grid / .category-card the home "Shop by category" block .contact-cards the contact details block The .home-intro gap is the loud one. Global h2 is clamp(1.8rem,4vw,2.6rem), so 37 h2s and 99 h3s of imported WordPress body copy rendered at display size in an 850px column with no paragraph rhythm. Every other ported page wraps its imported body in .prose-page, which IS styled; the home page alone used .home-intro, which was styled nowhere. Inherited, not introduced: the clone base's own clone base defines none of these six either, so the same pages are wrong on the deployed stores in that lineage. Filed on TODO.md. Deliberately worded without naming a domain, because a sweep on the NEXT clone would rewrite the name and turn this record of a defect into a denial of it. No gate could see this. The markup is valid, the pages are 200, the words are right, and a missing CSS rule is not a missing file. tools/check-unstyled-classes.js now fails the build on a class that appears in the built HTML and in no stylesheet. --------------------------------------------------------------- */ /* Page header band, above a .prose-page. Mirrors the vertical rhythm of .catalog-section so a hero and a section stack without a seam. */ .page-hero{padding:64px 0 0} .page-hero--compact{padding:48px 0 0} .page-hero h1{margin-bottom:10px} .page-hero .prose-updated{margin-bottom:0} @media(max-width:850px){.page-hero{padding:44px 0 0}.page-hero--compact{padding:34px 0 0}} /* The imported home-page body. Same treatment as .prose-page, because it is the same kind of content: this store's own WordPress copy. Sized DOWN from the display scale rather than left at it. */ .home-intro h2{font-size:1.5rem;margin:34px 0 12px} .home-intro h3{font-size:1.18rem;margin:22px 0 8px} .home-intro h4{font-size:1.02rem;margin:20px 0 6px} .home-intro p{margin-bottom:15px;color:var(--ink-soft)} .home-intro ul,.home-intro ol{margin:0 0 18px 22px} .home-intro li{margin-bottom:7px;color:var(--ink-soft)} .home-intro a{color:var(--gold-deep);text-decoration:underline} .home-intro strong{color:var(--ink)} .home-intro mark{background:var(--gold-soft);color:var(--ink);padding:0 .18em;border-radius:3px} /* Imported images arrive as bare with the original upload's dimensions. Constrain them to the column and give them the same radius the rest of the system uses. */ .home-intro img{width:100%;height:auto;border-radius:18px;margin:26px 0} .home-intro video{width:100%;border-radius:20px;background:#111;margin:26px 0} .home-intro>*:first-child{margin-top:0} /* Home "Shop by category" cards. Two columns, collapsing on narrow. */ .category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .category-card{display:block;background:#fff;padding:26px;border-radius:18px;border:1px solid #dce5d7;transition:.28s ease} .category-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .category-card h3{margin-bottom:8px} .category-card p{font-size:.95rem;margin:0} @media(max-width:720px){.category-grid{grid-template-columns:1fr}} /* Blog index: a list of posts, not a bulleted list. */ .blog-index{list-style:none;margin:0;padding:0;display:grid;gap:18px} .blog-index li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 26px} .blog-index h3{margin-bottom:6px} .blog-index h3 a{text-decoration:none} .blog-index h3 a:hover{color:var(--gold)} .blog-index p{font-size:.95rem;margin:0} /* Half-width cart field (postcode beside city). The base class is styled; this modifier was not, so the field ran full width. */ .cart-field--narrow{max-width:220px} /* Contact details block: four short blocks, two up. */ .contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:26px 0 34px} .contact-cards p{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:0;font-size:.95rem;line-height:1.55} .contact-cards strong{display:block;color:var(--ink);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px} @media(max-width:720px){.contact-cards{grid-template-columns:1fr}} /* ---- 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} /* ========================================================= 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-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-tax{font-size:.86rem;color:var(--ink-soft)} .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} /* 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)} .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 .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} /* ---- 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 */ .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} /* ── Shop: search, category chips and per-category blocks ───────────────── Added 2026-08-24. The shop page groups the catalogue by category and filters the rendered cards in place; these are the styles for that layer. Tokens only, so a reskin of :root carries them. */ .shop-search{margin:0 0 26px;max-width:560px} .shop-search__label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px} .shop-search__row{display:flex;gap:10px;align-items:stretch} .shop-search__row input{flex:1;min-width:0;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:13px 20px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none} .shop-search__row input::placeholder{color:var(--ink-soft)} .shop-search__row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,115,0,.16)} .shop-search__row input::-webkit-search-cancel-button{display:none} .shop-search__clear{font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:0 20px;cursor:pointer;white-space:nowrap;transition:.2s} .shop-search__clear:hover{border-color:var(--gold-soft);background:#fff} .shop-search__count{margin:10px 2px 0;font-size:.9rem;color:var(--ink-soft);min-height:1.2em} .cat-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px} .cat-chip{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;text-decoration:none;transition:.2s} .cat-chip:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-1px)} .cat-chip.is-current{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff} .cat-chip__n{font-size:.78rem;font-weight:700;color:var(--ink-soft);background:var(--cream);border-radius:999px;padding:1px 8px} .cat-chip:hover .cat-chip__n{background:var(--cream-2)} .cat-chip.is-current .cat-chip__n{background:rgba(255,255,255,.18);color:#fff} .shop-cat-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:6px} .shop-cat-head .shop-cat-title{margin-bottom:0;padding-bottom:0;border-bottom:0} .shop-cat-all{font-size:.92rem;font-weight:600;color:var(--gold);text-decoration:none;white-space:nowrap} .shop-cat-all:hover{text-decoration:underline} .shop-cat-blurb{max-width:70ch;color:var(--ink-soft);margin:0 0 22px} .shop-category{scroll-margin-top:96px} .shop-empty{margin:40px 0 0;font-size:1.05rem;color:var(--ink-soft)} .linkish{font:inherit;font-size:inherit;color:var(--gold);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline} /* Eleven chips wrapping put 424px of category links above the first product on a 375px screen. Below the two-column breakpoint they become a single scroll strip instead, with the scrollbar left visible so it reads as scrollable. */ @media(max-width:619px){ .cat-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;margin-bottom:32px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .cat-chip{flex:0 0 auto;scroll-snap-align:start} .cat-chips::-webkit-scrollbar{height:4px} .cat-chips::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px} .cat-chips::-webkit-scrollbar-track{background:transparent} .shop-cat-head{gap:6px} .shop-cat-all{font-size:.88rem} } /* ── PDP sale and unit-price rules, copied verbatim from the canonical stylesheet (WEB-nfthydroponicsnet-port) with the rule-16 PDP swap on 2026-08-24. tritanglasses.co.uk is MC-track with saleDisplay and saleTimer both OFF, so none of these render today; they ship so the layout does not depend on a flag staying false. */ .atc-price-was{font-size:1rem;font-weight:600;color:var(--ink-soft);text-decoration:line-through} .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} .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-unit{font-size:.62em;font-weight:500;color:var(--ink-soft);margin-left:2px;letter-spacing:0} .price-was{color:var(--ink-soft);text-decoration:line-through;font-size:1.15rem} .sale-timer{margin:14px 0 0} .sale-timer:empty{margin:0} /* Unit-priced lines (edging by the metre, stone edging by the piece) showed a bare figure on the shop and category cards, so "£3" read as the price of the whole thing. The unit now rides with the price everywhere it appears. */ .scard-unit{font-size:.72rem;font-weight:600;color:var(--ink-soft);letter-spacing:.01em;white-space:nowrap} /* ── Homepage hero (fleet spec) ─────────────────────────────────────────── Ported 2026-08-24 from the canonical lineage, replacing a bespoke `home-hero` block that existed only on this store. `.reveal` is load-bearing: site.js observes it and adds `.in`, so these rules must ship with the markup or the hero never becomes visible. No hero-bg photo on this site (no suitable asset), so the panel carries a soft gradient instead of an image scrim. */ .hero{position:relative;display:flex;align-items:center;isolation:isolate; min-height:clamp(520px,74vh,760px);background:var(--cream);border-bottom:1px solid var(--line)} .hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% center} /* Scrim: near-opaque over the copy, clearing to the photo on the right. Same shape as the canonical, retinted to this site's palette. */ .hero-bg::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg, rgba(244,244,241,.98) 0%, rgba(244,244,241,.95) 34%, rgba(244,244,241,.74) 54%, rgba(244,244,241,.20) 74%, rgba(244,244,241,0) 90%), linear-gradient(180deg, rgba(14,26,43,.22) 0%, rgba(14,26,43,0) 32%), radial-gradient(120% 90% at 12% 40%, rgba(255,115,0,.14) 0%, rgba(255,115,0,0) 55%)} @media(max-width:899px){ /* One column on a phone, so the copy sits OVER the photo rather than beside it. Measured: at the original .55 tail the trust line fell to 1.59:1 against the grass. The scrim now stays high the whole way down the copy and only clears in the last tenth, below the text. */ .hero-bg::after{background: linear-gradient(180deg, rgba(244,244,241,.97) 0%, rgba(244,244,241,.96) 62%, rgba(244,244,241,.94) 90%, rgba(244,244,241,.86) 100%)} } .hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center} .hero-content{padding-top:72px;padding-bottom:72px;max-width:600px} .hero h2{font-family:"Fraunces",serif;font-size:clamp(2.1rem,6vw,3.6rem);font-weight:600;line-height:1.08;color:var(--ink);margin-bottom:20px} .hero h2 em{font-style:italic;color:var(--gold-deep)} .hero p{font-size:1.14rem;color:#454f5b;max-width:480px;margin-bottom:14px} .hero .eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:#454f5b; text-transform:none;margin:0 0 4px;max-width:520px;line-height:1.5} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} .hero-cta .btn{display:inline-flex;align-items:center;gap:9px} .hero-trust{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap} .hero-trust span{font-size:.95rem;font-weight:600;color:#454f5b} .hero-col-right{display:none} border-radius:999px;padding:9px 16px;font-size:.9rem;font-weight:600;color:var(--ink); text-align:center;backdrop-filter:blur(4px)} @media(min-width:900px){ .hero-grid{grid-template-columns:1.25fr .75fr;gap:56px} .hero-col-right{display:block} .hero-content{padding-top:104px;padding-bottom:104px} } .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} } /* Cart delivery options (rule 17). New in this port: the clone base is standard-only, so no existing rule covers this group. */ .cart-delivery-options{border:1px solid var(--line,#e5e2dc);border-radius:10px; padding:12px 14px;margin:14px 0} .cart-delivery-options legend{font-size:.82rem;font-weight:600;padding:0 6px; color:var(--ink-soft,#6b6b6b);text-transform:uppercase;letter-spacing:.04em} .cart-delivery-option{display:grid;grid-template-columns:auto 1fr; column-gap:10px;row-gap:2px;align-items:start;padding:8px 0;cursor:pointer} .cart-delivery-option + .cart-delivery-option{border-top:1px solid var(--line,#e5e2dc)} .cart-delivery-option input{margin-top:3px} .cart-delivery-option__label{font-weight:600} .cart-delivery-option__note{grid-column:2;font-size:.86rem; color:var(--ink-soft,#6b6b6b);line-height:1.35} /* Carried customer reviews (rule 13): the store's own published reviews, shown in full under the aggregate line rather than cherry-picked. */ .review-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px} .review-list-item{background:#fff;border:1px solid var(--line);border-radius:16px; padding:18px 20px} .review-list-stars{color:var(--gold-deep);font-size:1rem;letter-spacing:.06em;margin:0 0 8px} .review-list-quote{color:var(--ink);line-height:1.6;margin:0 0 10px} .review-list-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline; font-size:.85rem;color:var(--ink-soft,#6b6b6b);margin:0} .review-list-meta cite{font-style:normal;font-weight:600;color:var(--ink)} .review-list-note{margin-top:14px;font-size:.85rem;color:var(--ink-soft,#6b6b6b)} @media (min-width:760px){.review-list{grid-template-columns:1fr 1fr}} /* --------------------------------------------------------------- 17TRACK parcel-tracking widget (/track-your-parcel) The extract strips every