/* IBRAN storefront stylesheet.
*
* Everything below the fold. The critical subset (design tokens, reset, base
* typography, header and mobile drawer) stays inline in index.php so the first
* paint does not wait on a second request.
*
* Cache-busted by filemtime in the tag, so edits here appear immediately
* and returning visitors never re-download an unchanged file.
*/
/* ---------- Hero ---------- */
.hero{padding:38px 0 26px;}
.hero h1{font-size:30px; line-height:1.12; margin:0 0 12px;}
.hero p{font-size:16px; color:var(--soft); margin:0;}
/* ---------- Systems grid ---------- */
.grid{display:grid; grid-template-columns:1fr; gap:16px; padding:18px 0 52px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
transition:transform .12s, box-shadow .12s;}
.card:active{transform:scale(.995);}
.card .ph{aspect-ratio:16/10; background:linear-gradient(135deg,#e8efe9,#d8e6dd); display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:13px;}
.card .ph img{width:100%; height:100%; object-fit:cover;}
.card .body{padding:15px 17px;}
.card h3{margin:0 0 4px; font-size:17px;}
.card .sub{color:var(--soft); font-size:13.5px; min-height:20px;}
.card .price{margin-top:10px; font-weight:700; font-size:15px; color:var(--green);}
.badge{display:inline-block; font-size:11px; font-weight:800; color:var(--green); background:#e3f1ea; padding:3px 9px; border-radius:100px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em;}
/* ---------- Product ---------- */
.product{display:grid; grid-template-columns:1fr; gap:24px; padding:24px 0 36px;}
.gallery .main{aspect-ratio:1; background:linear-gradient(135deg,#e8efe9,#d8e6dd); border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--faint);}
.gallery .main img{width:100%; height:100%; object-fit:cover;}
.thumbs{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.thumbs img{width:58px; height:58px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:pointer;}
.pinfo h1{font-size:26px; margin:0 0 8px;}
.pinfo .short{color:var(--soft); font-size:15.5px; margin-bottom:16px;}
.rating-row{display:inline-flex; align-items:center; gap:8px; text-decoration:none; margin:0 0 14px;}
.rating-stars{color:var(--yellow); font-size:18px; letter-spacing:1px; line-height:1;}
.rating-stars .empty{color:var(--line);}
.rating-stars .half{position:relative; color:var(--line);}
.rating-stars .half::before{content:'★'; position:absolute; left:0; width:50%; overflow:hidden; color:var(--yellow);}
.rating-count{color:var(--soft); font-size:14px; font-weight:600;}
.rating-row:hover .rating-count{color:var(--green);}
.detail-line{display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 14px;}
.detail-item{display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--ink); font-weight:600;}
.detail-ico{font-size:16px; line-height:1;}
.price-lg{font-size:27px; font-weight:800; margin:6px 0 4px; color:var(--green-dd);}
.price-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.tax-note{font-size:12.5px; color:var(--faint);}
.vat-toggle{font-size:12.5px; color:var(--green); font-weight:600; cursor:pointer; border:1px solid var(--line); border-radius:100px; padding:3px 11px; user-select:none;}
.vat-toggle:hover{border-color:var(--green); background:#e3f1ea;}
.variant-pick{margin:18px 0;}
.variant-pick label, .field-label{display:block; font-size:12px; font-weight:700; color:var(--soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
select.variant{width:100%; padding:13px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:16px;}
.qty-row{display:flex; gap:10px; align-items:stretch; margin:16px 0;}
.qty-row input{width:72px; padding:13px; border:1px solid var(--line); border-radius:10px; text-align:center; font-size:16px;}
/* area / dimensions buy box */
.buy-area{margin:16px 0 4px;}
.area-input-row{display:flex; align-items:center; gap:8px;}
.area-input-row input{flex:1; padding:13px; border:1px solid var(--line); border-radius:10px; text-align:center; font-size:16px;}
.area-unit{font-size:15px; color:var(--soft); font-weight:600;}
.step-btn{width:44px; height:44px; border:1px solid var(--line); background:var(--surface); border-radius:10px; font-size:20px; cursor:pointer; color:var(--green); line-height:1;}
.step-btn:active{background:#e3f1ea;}
.dim-row{display:flex; align-items:center; gap:8px; max-width:100%; flex-wrap:nowrap;}
.dim-row input{flex:1 1 0; min-width:0; width:0; padding:13px 8px; border:1px solid var(--line); border-radius:10px; text-align:center; font-size:16px;}
.dim-x{flex:0 0 auto; color:var(--soft);}
.dim-unit{flex:0 0 auto; width:64px; min-width:0; padding:13px 6px; border:1px solid var(--line); border-radius:10px; font-size:16px; background:var(--surface);}
.area-readout{margin-top:10px; font-size:14.5px; color:var(--green-dd); font-weight:600; min-height:20px;}
/* Mobile sticky add-to-cart bar */
.sticky-buy{ display:none; }
.bb-sheet, .bb-sheet-overlay{ display:none; }
.search-page-form{ display:flex; gap:8px; max-width:560px; margin-top:14px; }
.search-page-form input{ flex:1; min-width:0; padding:13px 14px; border:1px solid var(--line); border-radius:10px; font-size:16px; }
.search-page-form .btn-add{ flex:0 0 auto; }
.search-empty, .search-count{ color:var(--soft); margin:18px 0; }
.search-count{ font-weight:600; color:var(--ink); }
.article-card .body{ padding:14px 16px; }
.article-excerpt{ color:var(--soft); font-size:14px; margin:6px 0 8px; }
.article-date{ color:var(--faint); font-size:12.5px; font-weight:600; }
.article-detail{ max-width:760px; margin:0 auto; padding:8px 0 40px; }
.article-hero img{ width:100%; border-radius:16px; margin-bottom:20px; }
.article-detail h1{ font-size:32px; line-height:1.15; margin:0 0 10px; }
.article-meta{ display:flex; gap:14px; color:var(--soft); font-size:13.5px; margin-bottom:20px; }
.article-body{ font-size:16.5px; line-height:1.7; }
.article-body img{ border-radius:10px; margin:16px 0; max-width:100%; }
.guide-cta{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:28px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.guide-link{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:10px 14px; border:1px solid var(--green); color:var(--green); border-radius:10px; text-decoration:none; font-weight:600; font-size:14px; }
.guide-link:hover{ background:var(--green); color:#fff; }
.guide-link-ico{ font-size:16px; }
@media (max-width: 760px){
.sticky-buy{
display:flex; align-items:center; gap:12px;
position:fixed; left:0; right:0; bottom:0; z-index:80;
background:var(--surface); border-top:1px solid var(--line);
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
box-shadow:0 -4px 16px rgba(0,0,0,.10);
transform:translateY(110%); transition:transform .22s ease;
}
.sticky-buy.show{ transform:translateY(0); }
.sticky-buy-info{ display:flex; flex-direction:column; line-height:1.15; flex:0 0 auto; }
.sticky-buy-price{ font-size:19px; font-weight:800; color:var(--green-dd); }
.sticky-buy-sub{ font-size:11px; color:var(--soft); }
.sticky-buy-btn{ flex:1; padding:14px; font-size:16px; }
/* room so the bar never hides the footer/last content */
body.has-sticky-buy{ padding-bottom:76px; }
/* Mobile options bottom sheet */
.bb-sheet-overlay{ position:fixed; inset:0; background:rgba(10,40,24,.45); display:none; z-index:96; }
.bb-sheet-overlay.open{ display:block; }
.bb-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:97; background:var(--surface);
border-radius:16px 16px 0 0; transform:translateY(110%); transition:transform .24s ease;
max-height:85vh; display:flex; flex-direction:column; box-shadow:0 -8px 28px rgba(0,0,0,.2); }
.bb-sheet.open{ transform:translateY(0); }
.bb-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--green); border-radius:16px 16px 0 0; }
.bb-sheet-title{ color:#fff; font-weight:700; font-size:16px; }
.bb-sheet-body{ padding:18px; overflow-y:auto; }
.bb-sheet-foot{ display:flex; gap:12px; align-items:center; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
}
.area-readout .muted{color:var(--soft); font-weight:400;}
.btn-add{background:var(--green); color:#fff; border:none; padding:15px 26px; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; flex:1;}
.btn-add:active{background:var(--green-d);}
.trust-row{display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 4px;}
.trust-row .ti{font-size:12.5px; color:var(--soft); display:flex; align-items:center; gap:5px;}
.trust-row .ti b{color:var(--green);}
.links-row{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0;}
.chip{font-size:13px; border:1px solid var(--line); border-radius:100px; padding:7px 14px; background:var(--surface);}
.chip:active{border-color:var(--green);}
/* ---------- Product tabs ---------- */
.tabs{border-top:1px solid var(--line); margin-top:10px;}
.tab-nav{display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 0; position:sticky; top:60px; background:var(--bg); z-index:20;}
.tab-nav::-webkit-scrollbar{display:none;}
.tab-nav button{flex:0 0 auto; background:none; border:none; padding:14px 16px; font-size:15px; font-weight:600; color:var(--soft);
cursor:pointer; border-bottom:2.5px solid transparent; white-space:nowrap;}
.tab-nav button.active{color:var(--green); border-bottom-color:var(--green);}
.tab-panel{display:none; padding:22px 0 8px; font-size:15.5px; max-width:75ch;}
.tab-panel.active{display:block;}
.tab-panel h2,.tab-panel h3{letter-spacing:-.01em;}
.tab-panel :is(h2,h3):first-child{margin-top:0;}
.tab-panel img{border-radius:10px; margin:14px 0;}
.tab-panel ul{padding-left:20px;}
.tab-panel li{margin:5px 0;}
/* specs table */
.spec-table{width:100%; border-collapse:collapse; font-size:14.5px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:11px 8px; vertical-align:top;}
.spec-table td:first-child{font-weight:650; width:45%; color:var(--green-dd);}
/* faqs */
.faq{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:16px 0; font-size:15.5px; font-weight:650; cursor:pointer;
display:flex; justify-content:space-between; gap:12px; color:var(--ink);}
.faq-q .fc{color:var(--green); transition:transform .15s; flex:0 0 auto;}
.faq-q.open .fc{transform:rotate(45deg);}
.faq-a{display:none; padding:0 0 16px; color:var(--soft); font-size:15px;}
.faq-a.open{display:block;}
/* content sections */
.csec{padding:26px 0; border-bottom:1px solid var(--line);}
.csec:last-child{border-bottom:none;}
.csec h3{font-size:20px; margin:0 0 12px;}
.csec.left, .csec.right{display:grid; grid-template-columns:1fr; gap:18px; align-items:center;}
.csec .csec-img img{border-radius:12px;}
/* reviews */
.review{padding:16px 0; border-bottom:1px solid var(--line);}
.stars{color:var(--yellow-d); letter-spacing:1px;}
.rv-verified{font-size:11px; color:var(--green); font-weight:800; margin-left:8px;}
.rv-agg{display:flex; align-items:center; gap:14px; padding:8px 0 14px;}
.rv-agg .big{font-size:34px; font-weight:800; color:var(--green-dd);}
/* ---------- Cart drawer ---------- */
.cart-overlay{position:fixed; inset:0; background:rgba(10,40,24,.45); display:none; z-index:100;}
.cart-overlay.open{display:block;}
.cart{position:fixed; top:0; right:0; height:100dvh; width:420px; max-width:92vw; background:var(--bg);
z-index:101; transform:translateX(100%); transition:transform .2s; display:flex; flex-direction:column;}
.cart.open{transform:translateX(0);}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); background:var(--surface);}
.cart-items{flex:1; overflow-y:auto; padding:12px 20px;}
.cart-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.cart-item .ci-info{flex:1;}
.cart-item .ci-title{font-size:14px; font-weight:600;}
.cart-item .ci-sub{font-size:12.5px; color:var(--soft);}
.cart-item .ci-rm{background:none; border:none; color:var(--faint); cursor:pointer; font-size:18px;}
.cart-foot{padding:18px 20px; border-top:1px solid var(--line); background:var(--surface);}
.cart-total{display:flex; justify-content:space-between; font-size:17px; font-weight:800; margin-bottom:14px;}
.btn-checkout{width:100%; background:var(--green); color:#fff; border:none; padding:15px; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer;}
.btn-checkout:active{background:var(--green-d);}
.cart-empty{color:var(--faint); text-align:center; padding:40px 0;}
.cart-overlay.open{display:block;}
/* checkout */
.checkout-panel{position:fixed; inset:0; background:var(--bg); z-index:110; transform:translateY(100%); transition:transform .25s ease; overflow-y:auto; display:flex; flex-direction:column;}
.checkout-panel.open{transform:translateY(0);}
.co-head{position:sticky; top:0; background:var(--bg); display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); z-index:2;}
.co-head strong{flex:1; font-size:17px;}
.co-back{background:var(--bg); color:var(--ink);}
.co-body{max-width:1040px; width:100%; margin:0 auto; padding:22px 18px 60px;}
.co-cols{display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:start;}
@media(max-width:820px){ .co-cols{grid-template-columns:1fr;} }
.co-h3{font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); margin:22px 0 10px; font-weight:700;}
.co-h3:first-child{margin-top:0;}
.co-field{margin-bottom:12px; display:flex; flex-direction:column;}
.co-field label{font-size:13px; margin-bottom:5px; color:var(--ink);}
.co-field input, .co-field select{padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; font-size:15px; width:100%;}
.co-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.co-hint{font-size:11.5px; color:var(--faint); margin-top:4px;}
.co-muted{color:var(--faint); font-size:14px; padding:8px 0;}
.co-deliv{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; margin-bottom:9px; cursor:pointer;}
.co-deliv.sel{border-color:var(--green); background:rgba(0,127,78,.04);}
.co-deliv input{margin:0;}
.co-deliv-main{flex:1; display:flex; flex-direction:column;}
.co-deliv-label{font-weight:600; font-size:14.5px;}
.co-deliv-sub{font-size:12px; color:var(--faint);}
.co-deliv-dir{font-size:12px; font-weight:700; color:var(--green); margin-top:3px; align-self:flex-start; text-decoration:underline;}
.co-deliv-price{font-weight:700;}
.co-summary{background:var(--mist,#f3f6f4); border:1px solid var(--line); border-radius:14px; padding:18px; position:sticky; top:78px;}
.co-item{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:5px 0; color:var(--ink);}
.co-totals{border-top:1px solid var(--line); margin-top:12px; padding-top:12px;}
.co-trow{display:flex; justify-content:space-between; font-size:14px; padding:4px 0;}
.co-grand{font-size:18px; font-weight:800; border-top:1px solid var(--line); margin-top:8px; padding-top:10px;}
.co-incvat{font-size:11.5px; color:var(--faint); margin:6px 0 0;}
.co-summary .btn-checkout{margin-top:14px;}
.co-summary .btn-checkout:disabled{opacity:.5; cursor:not-allowed;}
.co-secure{font-size:11.5px; color:var(--faint); text-align:center; margin:10px 0 0;}
.co-help{font-size:12.5px; text-align:center; margin:8px 0 0;}
.co-help a{color:var(--green); font-weight:600;}
footer{border-top:1px solid var(--line); padding:0; color:var(--faint); font-size:13px; background:var(--green-dd); color:rgba(255,255,255,.75);}
.crumbs{font-size:13px; color:var(--soft); padding:16px 0 0;}
.crumbs a{color:var(--soft);}
.crumbs a:hover{color:var(--green);}
.crumbs .sep{margin:0 7px; color:var(--faint);}
.crumbs .here{color:var(--ink); font-weight:600;}
.page-content{max-width:70ch; margin:0 auto; padding:30px 0 50px;}
.page-content h1{font-size:30px; margin:0 0 20px;}
.page-body{font-size:15.5px; line-height:1.7;}
.page-body h2{font-size:21px; margin:28px 0 10px;}
.page-body h3{font-size:17px; margin:22px 0 8px;}
.page-body p{margin:0 0 14px;}
.page-body ul,.page-body ol{padding-left:22px;}
.page-body li{margin:5px 0;}
.page-body a{color:var(--green); text-decoration:underline;}
/* ---------- Page sections (homepage builder) ---------- */
/* Break out of the max-width main.wrap to allow full-width section backgrounds */
.fullbleed{width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;}
.sec-eyebrow{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--yellow); margin-bottom:12px;}
.sec-eyebrow.dark{color:var(--green);}
.sec-h2{font-size:26px; margin:0 0 14px; color:var(--green-dd);}
.sec-btn{display:inline-block; margin-top:20px; background:var(--green); color:#fff; padding:14px 28px; border-radius:10px; font-weight:700; font-size:16px;}
.sec-btn:hover{background:var(--green-d);}
.sec-btn.small{padding:11px 22px; font-size:15px; margin-top:14px;}
/* hero */
.sec-hero{background:var(--green-dd); background-size:cover; background-position:center; color:#fff; padding:80px 0;}
.sec-hero.align-center{text-align:center;}
.sec-hero h1{font-size:38px; line-height:1.1; margin:0 0 14px; max-width:18ch;}
.sec-hero.align-center h1{margin-left:auto; margin-right:auto;}
.sec-hero .sec-sub{font-size:18px; color:rgba(255,255,255,.9); max-width:56ch; margin:0;}
.sec-hero.align-center .sec-sub{margin-left:auto; margin-right:auto;}
/* trust icons */
.sec-trust{padding:48px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center;}
.sec-cards{padding:48px 0;}
.sec-cards .sec-h2{font-size:26px; margin:0 0 6px; color:var(--green-dd); text-align:center;}
.sec-cards .sec-sub.dark{color:var(--text-soft,#5c6b63); margin:0 auto 18px; text-align:center; max-width:60ch;}
/* Count-adaptive, centred card grid. Default rows of 3 (1/3 each);
exactly 4 -> one row of quarters; remainder-of-2 rows -> two halves
(5 = 3+2, 8 = 3+3+2). Without a count class: legacy auto-fill. */
/* ===== applications ===== */
.apps-hero{padding:56px 0 26px; text-align:center;}
.apps-hero h1{font-size:34px; margin:0 0 10px;}
.app-finder{display:flex; gap:10px; max-width:640px; margin:22px auto 8px;}
.app-finder input{flex:1; padding:13px 16px; border:1px solid var(--line); border-radius:10px; font-size:16px;}
.app-finder .btn-primary{white-space:nowrap;}
#af-result{max-width:900px; margin:14px auto 0;}
.af-cards{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:10px;}
.af-thinking{color:var(--text-soft);}
.apps-cta{font-size:16px; color:var(--text-soft,#5c6b63); margin:0 0 6px;}
.apps-cta-link{font-weight:700; margin-left:8px; text-decoration:underline; color:inherit;}
.app-chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px;}
.app-chip{display:inline-block; padding:9px 16px; border:1px solid var(--line); border-radius:100px;
background:var(--surface,#fff); text-decoration:none; color:inherit; font-size:14px; font-weight:600;
transition:box-shadow .15s, transform .15s;}
.app-chip:hover{box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-1px);}
.app-card-img{width:100%; height:120px; object-fit:cover; border-radius:8px;}
.app-hero{padding:64px 0; background:var(--green-dark,#153a26); color:#fff; background-size:cover; background-position:center;}
.app-hero h1{font-size:36px; margin:0 0 10px;}
.app-buy{padding:34px 0 6px;}
.app-buy-card{max-width:560px; margin:0 auto; background:var(--surface,#fff); border:1px solid var(--line);
border-radius:16px; padding:22px; box-shadow:0 8px 28px rgba(20,60,35,.08);}
.app-chat{padding:20px 0 46px;}
.app-chat-card{max-width:680px; margin:0 auto; border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--surface,#fff);}
.ac-log{max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; margin:12px 0;}
.ac-msg{padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.5; max-width:85%;}
.ac-user{align-self:flex-end; background:var(--green-dark,#153a26); color:#fff;}
.ac-bot{align-self:flex-start; background:var(--bg,#f4f6f4); border:1px solid var(--line);}
.ac-think{color:var(--text-soft); font-style:italic;}
.ac-row{display:flex; gap:8px;}
.ac-row input{flex:1; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:16px;}
.app-prods{padding:44px 0;}
.app-prod{display:flex; gap:18px; padding:18px; border:1px solid var(--line); border-radius:14px; margin-bottom:14px; align-items:flex-start;}
.app-prod img{width:140px; height:110px; object-fit:cover; border-radius:8px;}
.app-prod-primary{border-color:var(--green,#1c6b3c); box-shadow:0 4px 18px rgba(20,80,45,.10);}
.pill-primary{display:inline-block; background:var(--yellow,#f2c230); color:#1c1c1a; font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; margin-bottom:6px;}
.app-prod-t{font-weight:700; font-size:17px; display:block; margin-bottom:6px; text-decoration:none; color:inherit;}
.app-prod-note{font-size:14px; color:var(--text-soft,#5c6b63); margin:0 0 10px;}
@media(max-width:700px){ .app-prod{flex-direction:column;} .app-prod img{width:100%; height:160px;} .app-finder{flex-direction:column;} }
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px;}
.card-grid[class*="cg-n"]{display:flex; flex-wrap:wrap; justify-content:center;}
.card-grid[class*="cg-n"]>.feat-card{flex:0 0 calc(33.333% - 12px); min-width:190px;}
.card-grid.cg-n4>.feat-card{flex-basis:calc(25% - 14px);}
.card-grid.cg-n2>.feat-card,
.card-grid.cg-n5>.feat-card:nth-child(n+4),
.card-grid.cg-n8>.feat-card:nth-child(n+7){flex-basis:calc(50% - 9px);}
@media(max-width:700px){ .card-grid[class*="cg-n"]>.feat-card{flex-basis:100%;} }
.feat-card{display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; color:inherit; transition:box-shadow .15s,transform .15s;}
.feat-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08); transform:translateY(-2px);}
.feat-card-t{font-weight:700; font-size:16px;} .feat-card-s{font-size:13px; color:var(--text-soft,#5c6b63);}
.feat-card.prod .feat-card-img img{width:100%; border-radius:10px; aspect-ratio:1/1; object-fit:cover;}
.sec-html{padding:36px 0;}
.trust-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:28px 32px; margin-top:8px;}
.trust-cell{padding:0 8px; display:flex; flex-direction:column; align-items:center; text-align:center; flex:0 1 240px;}
.trust-ic{font-size:30px; margin-bottom:10px;}
.trust-t{font-weight:700; font-size:16px; color:var(--green-dd); margin-bottom:4px;}
.trust-x{font-size:13.5px; color:var(--soft); line-height:1.5;}
/* image + text */
.sec-imgtext{padding:56px 0;}
.sec-imgtext-grid{display:grid; grid-template-columns:1fr; gap:28px; align-items:center;}
.sec-it-img img{border-radius:14px; width:100%;}
.sec-it-text{font-size:15.5px; line-height:1.7; color:var(--ink);}
.sec-it-text p{margin:0 0 14px;}
/* themes */
.sec-imgtext.theme-green{background:var(--green); }
.sec-imgtext.theme-green .sec-h2,
.sec-imgtext.theme-green .sec-it-text,
.sec-imgtext.theme-green .sec-it-text p{color:#fff;}
.sec-imgtext.theme-green .sec-eyebrow.dark{color:var(--yellow);}
.sec-imgtext.theme-green .sec-btn.small{background:#fff; color:var(--green-dd);}
.sec-imgtext.theme-dark{background:var(--green-dd);}
.sec-imgtext.theme-dark .sec-h2,
.sec-imgtext.theme-dark .sec-it-text,
.sec-imgtext.theme-dark .sec-it-text p{color:#fff;}
.sec-imgtext.theme-light{background:var(--bg);}
.sec-imgtext.theme-soft{background:var(--surface);}
/* centred / text-only band */
.sec-imgtext.no-img .sec-imgtext-grid{grid-template-columns:1fr;}
.sec-imgtext.align-center .sec-it-body{text-align:center; max-width:760px; margin:0 auto;}
.sec-imgtext.align-center .sec-h2{font-size:34px;}
@media(min-width:820px){
.sec-hero{padding:110px 0;}
.sec-hero h1{font-size:52px;}
.sec-imgtext-grid{grid-template-columns:1fr 1fr; gap:48px;}
.sec-imgtext.side-right .sec-it-img{order:2;}
}
.foot-grid{display:grid; grid-template-columns:1fr; gap:26px; padding:40px 0 30px;}
.foot-grid h4{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin:0 0 12px;}
.foot-grid a{display:block; color:rgba(255,255,255,.75); padding:5px 0; font-size:14px;}
.foot-grid a:hover{color:var(--yellow);}
.foot-brand .logo{color:#fff; font-size:22px;} .foot-brand .logo .dot{color:var(--yellow);}
.foot-brand p{max-width:34ch; line-height:1.6; margin:12px 0 0;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12); padding:18px 0; font-size:12.5px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;}
/* ---------- Tablet / desktop ---------- */
@media(min-width:720px){
.wrap{padding:0 24px;}
.hero{padding:60px 0 36px;}
.hero h1{font-size:42px; max-width:15ch;}
.hero p{font-size:18px; max-width:54ch;}
.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding:24px 0 70px;}
.product{grid-template-columns:1.05fr 1fr; gap:44px; padding:40px 0 40px;}
.pinfo h1{font-size:32px;}
.csec.left{grid-template-columns:1fr 1.2fr;}
.csec.right{grid-template-columns:1.2fr 1fr;}
.csec.right .csec-img{order:2;}
}
@media(min-width:900px){
/* show desktop nav, hide hamburger */
.nav-links{display:flex; gap:20px; list-style:none; margin:0; padding:0; align-items:center;}
.nav-links li{position:relative;}
.nav-links>li>a, .nav-links>li>.nav-parent{font-size:14.5px; color:rgba(255,255,255,.92); font-weight:600; cursor:pointer; display:inline-block; padding:20px 0;}
.nav-links>li>a:hover, .nav-links>li:hover>a, .nav-links>li:hover>.nav-parent{color:#fff;}
.nav-links .has-children>a::after, .nav-links .has-children>.nav-parent::after{content:'▾'; font-size:10px; margin-left:5px; opacity:.7;}
.submenu{display:none; position:absolute; top:100%; left:0; min-width:210px; background:var(--surface); color:var(--ink);
border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(10,40,24,.14);
padding:6px; list-style:none; margin:0; z-index:60;}
.nav-links li.has-children:hover>.submenu{display:block;}
.submenu li{display:block;}
.submenu a, .submenu .nav-parent{display:block; padding:9px 12px; border-radius:7px; white-space:nowrap; font-size:14px; color:var(--ink);}
.submenu a:hover{background:var(--bg); color:var(--green);}
.submenu .submenu{top:0; left:100%; margin-left:4px;}
.hamburger{display:none;}
header .nav > .logo{display:flex;}
.hdr-search-toggle{display:none;}
.hdr-search input{display:block;}
.tab-nav{top:0;}
.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding:50px 0 36px;}
}
/* ===== hero_slides (slider-or-static) ===== */
.sec-hero-slides{position:relative; overflow:hidden;}
.sec-hero-slides .hs-track{display:flex; transition:transform .5s ease;}
.sec-hero-slides .hs-slide{flex:0 0 100%; min-width:100%; background:var(--green-dd); background-size:cover; background-position:center; color:#fff; padding:80px 0; display:flex;}
.sec-hero-slides .hs-slide.align-center{align-items:center; text-align:center;}
.sec-hero-slides .hs-slide.align-top{align-items:flex-start;}
.sec-hero-slides .hs-slide.align-bottom{align-items:flex-end;}
.sec-hero-slides .hs-slide h1{font-size:38px; line-height:1.1; margin:0 0 14px; max-width:20ch;}
.sec-hero-slides .hs-slide.align-center h1{margin-left:auto; margin-right:auto;}
.sec-hero-slides .hs-slide .sec-sub{font-size:18px; color:rgba(255,255,255,.92); max-width:58ch; margin:0;}
.sec-hero-slides .hs-slide.align-center .sec-sub{margin-left:auto; margin-right:auto;}
.hs-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px;}
.sec-hero-slides .hs-slide.align-center .hs-btns{justify-content:center;}
.sec-btn.white{background:#fff; color:var(--green-dd);}
.sec-btn.white:hover{background:var(--bg);}
.hs-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85); color:var(--green-dd); border:0; width:42px; height:42px; border-radius:50%; font-size:24px; line-height:1; cursor:pointer; z-index:3; display:flex; align-items:center; justify-content:center;}
.hs-nav:hover{background:#fff;} .hs-prev{left:14px;} .hs-next{right:14px;}
@media(max-width:720px){
/* On phones the centre buttons sit over the copy, so drop them to the
bottom corners, clear of the heading and text. */
.hs-nav{top:auto; bottom:14px; transform:none; width:36px; height:36px; font-size:20px; background:rgba(255,255,255,.9);}
.hs-prev{left:12px;} .hs-next{right:12px;}
.hs-dots{bottom:20px;}
}
.hs-dots{position:absolute; bottom:16px; left:0; right:0; display:flex; gap:8px; justify-content:center; z-index:3;}
.hs-dot{width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; padding:0;}
.hs-dot.on{background:#fff;}
/* ===== logo_bar ===== */
.sec-logobar{padding:44px 0; text-align:center; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.logo-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 18px; align-items:center; margin-top:14px;}
.logo-cell img{max-width:100%; max-height:64px; width:auto; margin:0 auto; object-fit:contain; filter:grayscale(1); opacity:.75; transition:filter .2s,opacity .2s;}
.logo-cell:hover img{filter:none; opacity:1;}
/* ===== product_tabs ===== */
.sec-prodtabs{padding:48px 0; background:var(--bg);}
.pt-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;}
.pt-tab{border:1px solid var(--line); background:var(--surface); color:var(--text-soft,#5c6b63); padding:10px 18px; border-radius:999px; font-weight:700; font-size:14.5px; cursor:pointer;}
.pt-tab.on{background:var(--green); color:#fff; border-color:var(--green);}
.pt-panel{display:none;} .pt-panel.on{display:block;}
/* ===== faq ===== */
.sec-faq{padding:48px 0;}
.faq-item{border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:var(--surface); overflow:hidden;}
.faq-item summary{list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; color:var(--green-dd); font-size:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; float:right; font-size:20px; line-height:1; color:var(--green);}
.faq-item[open] summary::after{content:'\2212';}
.faq-a{padding:0 18px 16px; font-size:15px; line-height:1.7; color:var(--ink);}
.faq-item .faq-a{display:block;} /* override legacy .faq-a{display:none}; native controls visibility */
.faq-a p{margin:0 0 10px;}
/* ===== featured_reviews ===== */
.sec-reviews{padding:52px 0; background:var(--surface); border-top:1px solid var(--line);}
.rev-grid{display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch;}
.rev-card{margin:0; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--bg); display:flex; flex-direction:column; height:100%;}
.rev-stars{color:var(--yellow); font-size:16px; letter-spacing:2px; margin-bottom:8px;}
.rev-title{font-weight:800; color:var(--green-dd); margin-bottom:6px;}
.rev-body{margin:0 0 12px; font-size:15px; line-height:1.65; color:var(--ink); flex:1 0 auto;}
.rev-author{font-size:13.5px; font-weight:700; color:var(--text-soft,#5c6b63); margin-top:auto;}
/* ===== featured_articles ===== */
.sec-articles{padding:52px 0;}
.art-card{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;}
.art-card-img img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px;}
.art-card-t{font-weight:700; font-size:15.5px; color:var(--green-dd); line-height:1.35;}
.sec-more{margin-top:24px; text-align:center;}
@media(min-width:820px){
.sec-hero-slides .hs-slide{padding:120px 0;}
.sec-hero-slides .hs-slide h1{font-size:52px;}
.logo-strip{grid-template-columns:repeat(4,1fr); gap:36px;}
.rev-grid{grid-template-columns:repeat(3,1fr);}
}
/* ===== rating_badge ===== */
.sec-ratingbadge{padding:18px 0; background:var(--bg); border-bottom:1px solid var(--line);}
.rb-inner{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;}
.rb-inner a{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none;}
.rb-score{font-weight:800; font-size:22px; color:var(--green-dd);}
.rb-stars{color:var(--yellow); font-size:20px; letter-spacing:1px;}
.rb-text{font-size:14px; color:var(--text-soft,#5c6b63); text-decoration:underline;}
/* ===== find-a-stockist ===== */
.stk-filter{margin:18px 0 18px;}
.stk-filter input{width:100%; max-width:420px; padding:12px 16px; border:1px solid var(--line); border-radius:10px; font-size:15px; background:var(--surface); color:var(--text);}
.stk-layout{display:grid; grid-template-columns:1fr; gap:22px; margin-bottom:40px;}
.stk-map{height:340px; border-radius:14px; border:1px solid var(--line); overflow:hidden; z-index:0;}
.stk-map-col{position:relative;}
.stk-list-col{min-width:0;}
@media(max-width:600px){
.stk-layout{gap:18px;}
.stk-map{height:300px;}
}
.stk-grid{display:grid; grid-template-columns:1fr; gap:16px; max-height:none;}
.stk-card{padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); display:flex; flex-direction:column; gap:6px; scroll-margin-top:90px;}
.stk-card.stk-active{border-color:var(--green); box-shadow:0 0 0 2px var(--green) inset;}
.stk-logo{height:46px; margin-bottom:4px;}
.stk-logo img{max-height:46px; width:auto; object-fit:contain;}
.stk-name{margin:0; font-size:17px; color:var(--green-dd);}
.stk-loc{font-size:14px; color:var(--text-soft,#5c6b63);}
.stk-open{font-size:13.5px; color:var(--soft);}
.stk-tags{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0;}
.stk-tag{font-size:12px; font-weight:700; background:var(--surface-soft,#eef3ef); color:var(--green); padding:3px 10px; border-radius:999px;}
.stk-contact{display:flex; gap:16px; margin-top:4px; font-size:14px; font-weight:700;}
.stk-contact a{color:var(--green);}
.stk-none{margin-top:18px; color:var(--text-soft,#5c6b63);}
.stk-dist{font-size:13px; font-weight:700; color:var(--green); margin:2px 0;}
.stk-you-pin span{display:block; width:18px; height:18px; border-radius:50%; background:#1f7a4d; border:3px solid #fff; box-shadow:0 0 0 2px rgba(31,122,77,.5);}
.leaflet-popup-content{font-size:13.5px; line-height:1.5;}
.leaflet-popup-content strong{color:var(--green-dd);}
@media(min-width:900px){
.stk-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; gap:28px;}
.stk-map{height:560px; position:sticky; top:80px;}
.stk-list-col{max-height:none;}
.stk-grid{grid-template-columns:1fr;}
.stk-map-col{order:2;}
.stk-list-col{order:1;}
}