/* ========================================================= Lawn Care Company Europe - 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} /* A highlight, not a highlighter. The WordPress editor's `` survived the port into 78 pages — 77 of them PRODUCT pages, inside the guide copy — and with no rule of its own it rendered as the browser default, `rgb(255,255,0)`, a solid yellow block in the middle of the description on nearly every page this store sells from. Scoped to `.prose-page` first (2026-08-27), which missed all 77; a base rule is correct, because there is no context on this site where highlighter yellow is the intended answer. The wash is sized in `em` and anchored near the baseline rather than set as a percentage of the line box: a percentage stop looks right on body text and strikes through the glyphs of a display-size heading. */ mark{background:linear-gradient(var(--gold-soft),var(--gold-soft)) no-repeat 0 92%; background-size:100% .34em;color:inherit;padding:0 .06em} 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%} /* LawnCare-family 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}} /* ---- 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 by category" on the homepage. Added 2026-08-28: the markup has been live since the port and NOTHING HAS EVER STYLED IT — `.category-grid` and `.category-card` matched zero rules in this stylesheet, so seven category links rendered as `display:inline` anchors with no background, no border and no padding, in a grid whose `display` computed to `block`. A run-on list of bare links where the family shows cards, which is most of what "not formatted like the other sites" meant. No repo in the fleet had a definition to copy: the class appears in three templates (here, concretemould.eu.com's homepage and the sibling Irish LawnCare store's /lawn-care-equipment) and in no stylesheet. So it is built out of the house card language instead: `.scard`'s border, radius, hover lift and Fraunces heading, on `.shop-grid`'s breakpoints, so a category card and a product card are recognisably the same object. */ .category-grid{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:620px){.category-grid{grid-template-columns:1fr 1fr}} @media(min-width:920px){.category-grid{grid-template-columns:repeat(3,1fr)}} .category-card{display:flex;flex-direction:column;gap:8px;background:#fff; border:1px solid var(--line);border-radius:22px;padding:26px 26px 28px; text-decoration:none;color:var(--ink);transition:.3s} .category-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold-soft)} .category-card h3{font-family:"Fraunces",serif;font-size:1.32rem;font-weight:600;margin:0} .category-card p{color:var(--ink-soft);font-size:.98rem;margin:0} .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} /* A modifier that did nothing until 2026-08-28: the postcode field sat the same width as Town / City beside it, which is what the modifier exists to prevent. */ .cart-field--narrow{max-width:260px} .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 ========================================================= */ /* Page header for the non-shop pages: about, wholesale, the equipment guide. Added 2026-08-28 — the templates have carried these classes since the port and NOTHING STYLED THEM, so those three pages began with an unpadded, unbounded block and ran straight into their body copy while every other page opens on a treated header. Cream and a hairline, which is how this site already separates a soft section from the page. */ .page-hero{background:var(--cream);border-bottom:1px solid var(--line);padding:62px 0 52px} .page-hero--compact{padding:46px 0 40px} .page-hero h1{margin-bottom:10px} .page-hero .section-label{margin-bottom:10px} .page-hero .prose-updated{margin-bottom:0} .page-hero + .prose-page{padding-top:44px} .prose-page{padding:50px 0 80px} /* `:not(.narrow)` is load-bearing (2026-08-27). Nine of this site's fourteen prose templates ask for `container narrow`, which is 850px, and this rule was beating every one of them on specificity: the about page rendered its paragraphs 1132px wide, roughly 190 characters a line, and so did all nine legal pages. The five templates that ask for a plain `.container` (the contact grid among them) do want the full width, so the rule stays for those and steps aside where a template has said otherwise. */ .prose-page .container:not(.narrow){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} /* The contact page's details block. Added 2026-08-28: it had carried this class since the port with no rule behind it, so email, phone and the two addresses rendered as four plain paragraphs in a column, on the page whose whole job is to present them. Built from the same cream-panel language as .contact-form directly below, so the details and the form read as a pair. `br{display:none}` because the markup is `Label
value` and the label is promoted to a block; without it the break adds a blank line. */ .contact-cards{display:grid;grid-template-columns:1fr;gap:16px;margin:26px 0 34px} @media(min-width:620px){.contact-cards{grid-template-columns:1fr 1fr}} .contact-cards p{margin:0;padding:20px 22px;background:var(--cream); border:1px solid var(--line);border-radius:18px;color:var(--ink-soft); font-size:.97rem;line-height:1.6} .contact-cards br{display:none} .contact-cards strong{display:block;margin-bottom:6px;color:var(--ink); font-family:"Fraunces",serif;font-size:1.06rem;font-weight:600} .contact-cards a{color:var(--gold-deep);word-break:break-word} .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. mygarden.in.th 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} /* ========================================================= PORTED WORDPRESS BODIES (.prose-page) ========================================================= Everything a WooCommerce export drops into a page and the design system had no opinion about. HISTORY, because it explains the shape of what is left. On 2026-08-27 this block also carried a `.home-intro` half, styling an imported article that sat on the homepage between the hero and the products. On 2026-08-28 David's answer was that the homepage, the about page and the contact page must simply match the rest of the family, and no sibling publishes an imported article on any of the three. So those bodies were removed from those templates and the `.home-intro` rules went with them. **Styling imported content well is not a substitute for asking whether it belongs on the page at all**, and that was the more useful question. What remains is for the pages where a long imported body IS the point: the wholesale page, order tracking, and the legal set. There the export still arrives with ``, bare `
`, unwrapped images and loose text nodes that no `

` surrounds, and this is what keeps those from rendering at browser defaults. The rule of thumb: style the CONTAINER, not just its known children, so that whatever the export happens to contain inherits something sensible. ---------------------------------------------------------------------------*/ /* Loose text nodes inherit this, which is the whole point. */ .prose-page .container{line-height:1.75} .prose-page strong{color:var(--ink)} /* Imported rules become section rhythm rather than a row of grey bars. */ .prose-page hr{border:0;height:1px;background:var(--line);margin:38px 0} /* Imported pictures. Capped rather than merely fluid: several of these are portrait promotional graphics 1000px tall, and `max-width:100%` alone leaves them taller than the viewport. inline-block with one shared height because a WordPress export writes adjacent images as bare siblings with no wrapper: stacked as blocks they become a column of full-column slabs, and as inline-blocks they settle into a row that wraps, the way a gallery should. A lone image aligns to the left edge of the text column, which is where an article's images belong anyway. */ .prose-page img{max-width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-sm); display:inline-block;vertical-align:middle;margin:10px 10px 10px 0;max-height:190px;width:auto} @media(min-width:720px){.prose-page img{max-height:260px}} /* An imported body can carry a table; give it a floor rather than leaving it to browser defaults the first time one appears. */ .prose-page table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.95rem} .prose-page th,.prose-page td{border:1px solid var(--line);padding:9px 12px;text-align:left} .prose-page th{background:var(--cream);color:var(--ink);font-weight:600}