/* Public shop. The approved design mockup (design/css/site.css, Lemora-like v2) unchanged, then the few
   additions the real shop needs at the end. The mockup stays as the reference. */
/* Schibsted Grotesk: /static/fonts/schibsted.css, linked from shop/base.html beside this file (an @import here made
   the fonts wait for this whole file) */
:root{
  --bg:#FFFFFF; --bg-2:#F4F5F3; --bg-3:#E9ECE8;
  --page:#f6f2eb;   /* brandbook "Sand": the page ground; cards and panels stay white (--bg) on it */
  --ink:#1B2420; --ink-2:#3C4740; --muted:#636D67;   /* 4,8:1 on the page sand, 5,4:1 on white (WCAG AA; was #6F7A73, 4,0 / 4,5) */
  --moss:#2E6B3F; --moss-2:#245532; --leaf:#4fb848; --leaf-bg:#E4F2E3;
  --sand-2:#EDE6DA; --sand-3:#DDD3C2;   /* the page sand one and two steps darker: boxes on the sand, their outlines */
  --sand-4:#CBBEA8; --sand-5:#B7A78C; --sand-6:#A08F73;   /* deeper sand steps: the slideshow's layer under the white panel */
  --clay:#A9774A; --clay-bg:#F3E9DE;
  --sale:#f95623; --sale-bg:#FDE9E2;      /* brandbook orange — promotion prices (attention) */
  --line:#DCE0DB; --line-2:#C3C9C2;
  --danger:#B23A3A;
  --brand:#4fb848;  --attn:#f95623;   /* brandbook: the main green (fills, lines — never small text) and the orange for extra attention */
  --radius:3px; --radius-lg:6px;
  --max:1280px; --gutter:20px;
  --font:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(24px,2.6vw,32px)}
h2{font-size:clamp(20px,2.2vw,26px)}
h3{font-size:17px}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
svg{flex:none}

/* header */
.topbar{border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.topbar .wrap{display:flex;gap:24px;justify-content:space-between;align-items:center;min-height:34px}
.topbar .left,.topbar .right{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.topbar .left b{color:var(--moss);font-weight:600}
.topbar a:hover{color:var(--moss)}
header.site{background:var(--page)}
.hdr{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;padding-block:18px}   /* block only: .wrap keeps the side gutter */
.logo{padding-left:10px}
.logo img{height:48px;width:auto}
.search{display:flex;border:1px solid var(--moss);border-radius:var(--radius);overflow:hidden;max-width:760px;background:var(--bg);justify-self:center;width:100%}
.search input{flex:1;border:0;padding:10px 14px;background:transparent;min-width:0}
.search input::placeholder{color:var(--muted)}
.search button{border:0;background:var(--moss);color:#fff;padding:0 18px;cursor:pointer;display:flex;align-items:center;gap:8px}
.search button:hover{background:var(--moss-2)}
.hdr-actions{display:flex;gap:4px;align-items:center}
.hdr-actions a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius)}
.hdr-actions a:hover{background:var(--bg-2)}
.hdr-actions .cart{position:relative}
.hdr-me{display:none!important}
@media (max-width:720px){ .hdr-me{display:flex!important} }
.hdr-actions .cart .n{position:absolute;left:24px;top:0;background:var(--attn);color:#fff;font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.hdr-actions .cart div{line-height:1.15;font-size:13px}
.hdr-actions .cart div b{display:block;font-weight:400;font-size:14px}
.hdr-actions .cart div span{color:var(--ink-2)}
/* dark bar: catalog button + service links */
.bar{background:var(--ink);color:#fff}
.bar .wrap{display:grid;grid-template-columns:300px 1fr;gap:0}
.bar .catbtn{display:flex;align-items:center;gap:14px;padding:0 20px;height:50px;background:var(--moss);font-weight:600;font-size:15px}
.bar ul{list-style:none;margin:0;padding:0;display:flex;height:50px;align-items:stretch}
.bar ul li{display:flex;align-items:stretch}
.bar ul li a{display:flex;align-items:center;gap:10px;padding:0 24px;font-weight:500;font-size:14px;border-left:1px solid #2E3A33}
.bar ul li a:hover{background:#26312B;color:#fff}
/* home: sidebar catalog + banner */
.home-top{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;padding:0 0 12px}
.sidecat{border:1px solid var(--line);border-top:0;background:var(--bg)}
.sidecat a{display:flex;align-items:center;gap:12px;padding:0 16px;height:45px;border-bottom:1px solid var(--line);font-size:14.5px}
.sidecat a:last-child{border-bottom:0}
.sidecat a svg{color:var(--muted)}
.sidecat a span{flex:1}
.sidecat a:hover{background:var(--bg-2);color:var(--moss)}
.sidecat a:hover svg{color:var(--moss)}
.sidecat a.sale{color:var(--clay)}
.banner{margin-top:16px;position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:440px;background:var(--ink) url('/static/img/shop/hero.jpg') center/cover;display:flex;align-items:flex-end}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,36,32,.86) 0%,rgba(27,36,32,.55) 55%,rgba(27,36,32,.15) 100%)}
.banner .txt{position:relative;padding:36px 40px;color:#fff;max-width:600px}
.banner h1{font-size:clamp(28px,3.4vw,44px);margin:0 0 10px;color:#fff;line-height:1.05}
.banner p{font-size:17px;margin:0 0 18px;color:#E3E8E3;max-width:46ch}
.banner .btn{background:var(--leaf);border-color:var(--leaf)}
.banner .btn:hover{background:#3f9440;border-color:#3f9440}
.banner .addr{display:inline-flex;gap:8px;align-items:center;margin-left:14px;font-size:14px;color:#fff}
.usps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:8px 0 4px}
.usp{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border:1px solid var(--line-2);border-radius:var(--radius-lg);color:var(--ink-2)}   /* same as .ob-txt */
.usp svg{color:var(--moss);flex-shrink:0;margin-top:1px}
.usp b{display:block;font-weight:600;font-size:16px;color:var(--ink)}
.usp span{color:var(--ink-2);font-size:13.5px}

/* sections */
.section{padding:32px 0 4px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:16px}
.section-head h2{margin:0;font-size:24px}
.section-head a{color:var(--moss);font-weight:500;font-size:14px}
.section-head.center{justify-content:center;position:relative}
.section-head.center::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.section-head.center h2{background:var(--page);padding:0 20px;position:relative}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.more{display:flex;justify-content:center;padding:22px 0 0}

/* product card (Lemora-like: centred, big price, delivery + stock lines) */
.card{background:var(--bg);border:0;border-radius:var(--radius-lg);display:flex;flex-direction:column;text-align:center;position:relative;transition:box-shadow .15s}
.card:hover{box-shadow:0 4px 18px rgba(27,36,32,.10)}   /* white on the sand ground: no border needed */
.card .img{aspect-ratio:1/1;padding:18px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:contain}
.card .body{padding:0 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1;align-items:center}
.card .brand{display:inline-block;font-size:12px;color:var(--muted);font-weight:400;letter-spacing:.02em;
  border:1px solid var(--sand-3);border-radius:999px;padding:1px 10px}
.card h3{font-size:14.5px;font-weight:500;margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card h3 a:hover{color:var(--moss)}
.card .opts{font-size:12.5px;color:var(--muted)}
.card .price{margin-top:auto;padding:10px 0 12px;width:100%;border-bottom:1px solid var(--line);font-size:24px;font-weight:600;color:var(--moss);letter-spacing:-.01em}
.card .price small{font-weight:400;font-size:13px;color:var(--muted);margin-left:4px}
.card .price .was{display:block;font-size:13px;font-weight:400;color:var(--muted);text-decoration:line-through;line-height:1}
.card .price.ask{font-size:15px;color:var(--ink-2);font-weight:500}
.card .meta{padding-top:12px;display:grid;gap:6px;font-size:13px;color:var(--ink-2);width:100%;text-align:left}
.card .meta div{display:flex;gap:8px;align-items:center;justify-content:center}
.card .meta svg{color:var(--muted)}
.card .meta .ok svg{color:var(--leaf)}
.card .meta .order svg{color:var(--clay)}
.badge{position:absolute;top:0;left:0;background:var(--moss);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--radius-lg) 0 var(--radius) 0;z-index:1}
.badge.sale{background:var(--clay)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:var(--radius);border:1.5px solid var(--moss);background:var(--moss);color:#fff;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--moss-2);border-color:var(--moss-2);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.wide{width:100%}

/* home category blocks */
.catblocks{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.catblock{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:1fr 200px;background:var(--bg)}
.catblock .head{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 18px;height:52px;background:var(--bg-2);border-bottom:1px solid var(--line);font-weight:600;font-size:16px}
.catblock .head svg{color:var(--moss)}
.catblock .head a:hover{color:var(--moss)}
.catblock ul{list-style:none;margin:0;padding:8px 18px 14px;display:grid;gap:0;align-content:start}
.catblock li a{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.catblock li:last-child a{border-bottom:0}
.catblock li a span{color:var(--muted);font-size:12px}
.catblock li a:hover{color:var(--moss)}
.catblock .pic{background:var(--bg-2);overflow:hidden}
.catblock .pic img{width:100%;height:100%;object-fit:cover}

/* shop block / brands / footer */
.shopblock{display:grid;grid-template-columns:360px 1fr;gap:0;margin-top:8px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.shopblock .info{padding:24px 26px;background:var(--bg)}
.shopblock .info h3{margin-bottom:14px}
.shopblock dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:14px}
.shopblock dt{color:var(--muted)}.shopblock dd{margin:0}
.shopblock .map{background:var(--bg-2) url('/static/img/shop/categories/kedro-medienos-gaminiai.jpg') center/cover;min-height:300px;position:relative}
.shopblock .map span{position:absolute;left:14px;bottom:12px;background:var(--bg);padding:6px 10px;border-radius:3px;font-size:13px}
.brands{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 36px;padding:26px 0 8px;color:var(--muted);font-weight:600;font-size:16px}
footer.site{margin-top:104px;background:var(--ink);color:#B9C2BC;font-size:14px}
footer.site .wrap{padding-inline:clamp(28px,6vw,48px)}   /* a dark full-width band: text needs more air from the screen edge than page content */
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-block:40px 28px}
@media (max-width:900px){ footer.site .cols{grid-template-columns:1fr;gap:28px} }   /* one column earlier: two squeezed columns read worse */
footer.site h2{color:#fff;font-weight:400;margin-bottom:12px;font-size:16px}   /* size, not weight, makes the titles */
footer.site h2.sub{margin:32px 0 10px}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
footer.site a:hover{color:#fff}
/* footer contact block: icon column, address with the warehouse line under it, then phone and e-mail */
footer.site .contact{margin-top:14px;gap:9px}
footer.site .contact li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
footer.site .contact svg{flex:none;margin-top:3px;color:#7F8B84}
footer.site .legal-links{display:flex;gap:16px}
footer.site .legal-links a{color:inherit}
footer.site .bottom{border-top:1px solid #2E3A33;padding-block:14px;flex-wrap:wrap;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#8A958E}

/* breadcrumbs + category page */
.crumbs{font-size:13px;color:var(--muted);padding:14px 0 4px}
.crumbs ol{display:flex;gap:8px;padding:0;margin:0;flex-wrap:wrap;list-style:none}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--line-2)}
.crumbs a:hover{color:var(--moss)}
.cat-head{padding:4px 0 18px}
.cat-head p{max-width:70ch;color:var(--ink-2);margin:0}
.subtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.subtile{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg);text-align:center;padding:14px 12px 12px}
.subtile:hover{border-color:var(--moss)}
.subtile img{height:110px;width:100%;object-fit:contain;margin-bottom:10px}
.subtile b{font-weight:500;font-size:14px;display:block;padding-top:10px;border-top:1px solid var(--line)}
.filterbar{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--radius-lg);padding:8px 14px;margin-bottom:10px;font-size:14px;background:var(--bg)}
.filterbar .lbl{display:flex;gap:10px;align-items:center;font-weight:600;margin-right:10px}
.filterbar .dd{display:flex;gap:6px;align-items:center;padding:6px 12px;border-radius:var(--radius);cursor:pointer}
.filterbar .dd:hover{background:var(--bg-2)}
.filterbar .dd.on{background:var(--leaf-bg);color:var(--moss)}
.filterbar .sp{flex:1}
.filterbar select{border:0;background:transparent;font-weight:500;padding:6px 4px}
.filterbar .cnt{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;font-size:13px;align-items:center;color:var(--muted)}
.chips a{border:1px solid var(--line-2);border-radius:20px;padding:4px 12px;color:var(--ink)}
.chips a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager{display:flex;gap:6px;justify-content:center;padding:28px 0 0}
.pager a{padding:8px 12px;border:1px solid var(--line);border-radius:3px;background:var(--bg);min-width:38px;text-align:center}
.pager a.cur{background:var(--moss);color:#fff;border-color:var(--moss)}

/* product page */
.pdp{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,5fr);gap:40px;padding:8px 0 0;align-items:start}
.gallery .main{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery .main img{width:100%;height:100%;object-fit:contain}
.gallery .thumbs{display:flex;gap:8px;margin-top:8px}
.gallery .thumbs a{width:76px;height:76px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.gallery .thumbs a.cur{border-color:var(--moss)}
.gallery .thumbs img{width:100%;height:100%;object-fit:cover}
.buy{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;position:sticky;top:12px}
.buy .brand{color:var(--muted);font-size:13px;font-weight:600;margin-bottom:4px}
.buy h1{font-size:24px;margin-bottom:6px}
.buy .sku{font-size:12px;color:var(--muted);margin-bottom:16px}
.opt{margin-bottom:16px}
.opt .lab{font-size:13px;color:var(--muted);margin-bottom:6px;display:flex;justify-content:space-between}
.opt .lab b{color:var(--ink);font-weight:500}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills a{padding:7px 12px;border:1px solid var(--line-2);border-radius:3px;font-size:14px;background:var(--bg);min-width:44px;text-align:center}
.pills a.cur{border-color:var(--moss);background:var(--moss);color:#fff}
.pills a.dim{color:var(--muted);border-style:dashed}
.pills a.dim::after{content:" \2022 užsak.";font-size:11px}
.pills a.held::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--leaf);margin-right:6px;vertical-align:1px}
.pills a.cur.held::before{background:#fff}
.pillkey{margin-top:6px;font-size:12.5px;color:var(--muted)}
.pillkey .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--leaf);margin-right:6px;vertical-align:1px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.seg a{padding:7px 14px;font-size:14px}
.seg a.cur{background:var(--moss);color:#fff}
.buy .priceline{display:flex;align-items:baseline;gap:12px;margin:18px 0 4px}
.buy .priceline .price{font-size:34px;font-weight:600;color:var(--moss);letter-spacing:-.01em}
.buy .priceline .per{color:var(--muted);font-size:13px}
.buy .vat{font-size:12px;color:var(--muted);margin-bottom:16px}
.qtyrow{display:flex;gap:10px;align-items:stretch;margin:14px 0}
.qty{display:flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.qty button{border:0;background:var(--bg);width:38px;cursor:pointer}
.qty button:hover{background:var(--bg-2)}
.qty input{width:56px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center}
.buy .stockline{display:grid;gap:10px;font-size:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.buy .stockline>div{display:flex;gap:10px;align-items:flex-start}
.buy .stockline svg{margin-top:2px;color:var(--muted)}
.buy .stockline .ok svg{color:var(--leaf)}
.buy .stockline small{display:block;color:var(--muted)}
.buy .ask{margin-top:14px;font-size:13px;color:var(--muted)}
.buy .ask a{color:var(--moss);font-weight:500}
.calc{background:var(--bg-2);border-radius:var(--radius);padding:10px 12px;font-size:13px;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px;margin-top:4px}
.calc input{width:64px;border:1px solid var(--line-2);border-radius:3px;padding:3px 6px;text-align:right;background:#fff}
.pdp-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,5fr);gap:40px;padding:36px 0 0}
.prose{max-width:70ch;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.prose h2{color:var(--ink);font-size:20px;margin-top:0}
.specs{width:100%;border-collapse:collapse;font-size:14px}
.specs th,.specs td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{color:var(--muted);font-weight:400;width:42%;padding-right:12px}

/* cart */
.cartpage{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;padding-top:8px}
.lines{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg)}
.line{display:grid;grid-template-columns:88px 1fr auto;gap:18px;padding:18px;border-bottom:1px solid var(--line);align-items:start}
.line:last-child{border-bottom:0}
.line .img{width:84px;height:64px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff}
.line .img img{width:100%;height:100%;object-fit:contain}
.line .name{font-weight:500}
.line .var{font-size:13px;color:var(--muted)}
.line .rm{font-size:12px;color:var(--muted);margin-top:4px;display:inline-block}
.line .rm:hover{color:var(--danger)}
.line .sum{text-align:right;min-width:96px;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.line .sum b{color:var(--moss);font-size:18px;font-weight:600}
.line .sum.sale b{color:var(--sale)}
.line .sum .was{font-size:12.5px;color:var(--muted);text-decoration:line-through}
.line .sum small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.summary{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;position:sticky;top:12px}
.summary h3{margin-bottom:12px}
.summary .row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.summary .row span:last-child,.cksum .row span:last-child{white-space:nowrap}      /* amounts: short, never broken */
.summary .row.total{border-top:1px solid var(--line-2);margin-top:8px;padding-top:12px;font-size:20px;font-weight:500}
.summary .row.total span:last-child{color:var(--moss)}
.summary .row.total small{font-weight:400;font-size:12px;color:var(--muted)}
.summary .coupon{display:flex;gap:6px;margin:10px 0 6px}
.summary .coupon input{flex:1;border:1px solid var(--line-2);border-radius:3px;padding:8px 10px;min-width:0;background:#fff}
.summary .coupon button{border:1px solid var(--ink);background:#fff;border-radius:3px;padding:0 12px;cursor:pointer}
.summary .note{font-size:12.5px;color:var(--muted);margin-top:10px}
.summary .note a{color:var(--moss)}
.summary .btn{margin-top:12px}

/* checkout */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;padding-top:8px}
.steps{display:grid;gap:14px}
.step{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px}
.step h2{font-size:18px;margin-bottom:14px}
.who{display:inline-flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;margin-bottom:16px}
.who a{padding:8px 16px;font-size:14px}
.who a.cur{background:var(--moss);color:#fff}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields .full{grid-column:1/-1}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-2);border-radius:3px;padding:9px 11px;background:#fff}
.field input:focus{border-color:var(--moss);outline:none}
.choices{display:grid;gap:8px}
.choice{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer}
.choice.cur{border-color:var(--moss);background:#F7FBF7}
.choice input{margin-top:3px;accent-color:var(--moss)}
.choice b{font-weight:500;display:block}
.choice small{color:var(--muted);display:block}
.choice .fee{font-weight:600;white-space:nowrap}
.paylogos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.paylogos span{border:1px solid var(--line);border-radius:3px;padding:3px 8px;font-size:12px;color:var(--muted);background:#fff}
.agree{font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;margin:14px 0}
.agree a{color:var(--moss)}
.mini{font-size:14px;display:grid;gap:10px;margin-bottom:12px}
.mini div{display:flex;justify-content:space-between;gap:12px}
.mini span{color:var(--muted)}

/* confirmation */
.done{max-width:640px;padding:48px 0}
.done h1{margin-bottom:8px}
.done .num{font-size:14px;color:var(--muted);margin-bottom:24px}
.done .box{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:12px}
.done .box h3{font-size:15px;margin-bottom:10px}
.done dl{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;font-size:14px;margin:0}
.done dt{color:var(--muted)}.done dd{margin:0}
.done .pay{font-size:24px;font-weight:600;color:var(--moss)}

/* responsive */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .bar .wrap,.home-top{grid-template-columns:1fr}
  .bar ul{display:none}
  .sidecat{display:none}
  .banner{margin-top:0;min-height:320px}
  .usps{grid-template-columns:1fr}
  .catblocks{grid-template-columns:1fr}
  .subtiles{grid-template-columns:repeat(3,1fr)}
  .pdp,.pdp-body,.cartpage,.checkout{grid-template-columns:1fr}
  .buy,.summary{position:static}
  .hdr{grid-template-columns:auto 1fr auto;gap:16px}
  .shopblock{grid-template-columns:1fr}
}
@media (max-width:720px){
  :root{--gutter:16px}
  body{font-size:14px}
  .topbar{display:none}   /* phones: phone and address live in the footer; the account link moves next to the cart */
  .hdr{grid-template-columns:auto 1fr;padding-block:12px}
  .search{grid-column:1/-1;order:3}
  .hdr-actions{justify-self:end}
  .hdr-actions .cart div{display:none}
  .logo{padding-left:0}
  .logo img{height:36px}
  .bar .catbtn{height:44px}
  .banner .txt{padding:22px 20px}
  .banner .addr{display:block;margin:10px 0 0}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card .body{padding:0 10px 12px}
  .card .price{font-size:20px}
  .card .meta{font-size:12px}
  .subtiles{grid-template-columns:repeat(2,1fr)}
  .catblock{grid-template-columns:1fr}
  .catblock .pic{display:none}
  .line{grid-template-columns:64px 1fr;row-gap:8px}
  .line .img{width:64px;height:48px}
  .line .sum{grid-column:2;text-align:left;align-items:flex-start}
  .fields{grid-template-columns:1fr}
  .buy{padding:16px}
  .buy .priceline .price{font-size:28px}
  .filterbar{flex-wrap:wrap}
}

/* ===== additions for the real shop ===== */
.hdr-actions .cart{display:flex;align-items:center;gap:10px;padding:8px 12px}
.topbar a{display:inline-flex;align-items:center;gap:6px}
.topbar .left a b{color:var(--moss);font-weight:600}

/* "Prekių katalogas": the home page's category list, as a drop-down on every other page */
.bar .catbtn{cursor:default}
.catdrop{position:relative}
.catdrop summary{list-style:none;user-select:none}
.catdrop summary::-webkit-details-marker{display:none}
.catdrop .catbtn{cursor:pointer}
.catdrop summary svg:last-child{margin-left:auto}
.catdrop .sidecat{position:absolute;left:0;top:100%;width:300px;z-index:30;box-shadow:0 18px 40px rgba(27,36,32,.16)}
.sidecat a svg:first-child{color:var(--muted)}
.sidecat a:hover svg:first-child{color:var(--moss)}

/* filter bar drop-downs: "Filtrai" · Kategorija ▾ · Gamintojas ▾ · Storis ▾ · Paskirtis ▾ */
.filterbar{flex-wrap:wrap}
details.dd{position:relative}
details.dd summary{list-style:none;display:flex;gap:6px;align-items:center;padding:6px 12px;border-radius:var(--radius);cursor:pointer;user-select:none}
details.dd summary::-webkit-details-marker{display:none}
details.dd summary:hover{background:var(--bg-2)}
details.dd.on summary{background:var(--leaf-bg);color:var(--moss)}
.ddlist{position:absolute;left:0;top:calc(100% + 4px);z-index:25;min-width:220px;max-height:360px;overflow:auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 12px 30px rgba(27,36,32,.14);padding:6px}
.ddlist a{display:flex;justify-content:space-between;gap:14px;padding:7px 10px;border-radius:3px;font-size:14px;white-space:nowrap}
.ddlist a span{color:var(--muted);font-size:12.5px}
.ddlist a:hover{background:var(--bg-2);color:var(--moss)}
.ddlist a.sel{color:var(--moss);font-weight:600}
.filterbar .sp + details.dd .ddlist{left:auto;right:0}
.chips a.clear{border-color:transparent;color:var(--muted);display:inline-flex;gap:4px;align-items:center}
.chips a.clear:hover{color:var(--danger)}

/* home: compact category tree map (no pictures) — columns of main categories with their subcategories */
/* 6 groups in a 3-column grid: 2 even rows, headings level across each row */
.treemap{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 64px;padding:4px 0}
.tm{min-width:0}
.tmhead{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;padding:0 0 12px;border-bottom:2px solid var(--brand);margin-bottom:12px}
.tmhead svg{color:var(--moss)}
.tmhead span{flex:1}
.tm em,.tmhead em{font-style:normal;font-weight:400;font-size:12px;color:var(--muted)}
.tmhead:hover span{color:var(--moss)}
.tm ul{list-style:none;margin:0;padding:0 0 0 30px}
.tm li a{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:14px;color:var(--ink-2)}
.tm li a:hover{color:var(--moss)}
@media (max-width:900px){ .treemap{grid-template-columns:repeat(2,1fr);column-gap:18px} }
@media (max-width:520px){ .treemap{grid-template-columns:1fr} }

/* distributor status: top line and the home page band */
.topbar .official{color:var(--moss);font-weight:600}
.official-band{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin:26px 0 0;align-items:stretch}
.ob-txt{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border:1px solid var(--line-2);border-radius:var(--radius-lg);color:var(--ink-2)}
.ob-txt svg{color:var(--moss);flex:none;margin-top:1px}
.ob-txt b{display:block;color:var(--ink);font-size:16px}
.ob-txt span{font-size:13.5px}
.ob-brand{display:flex;flex-direction:column;justify-content:flex-start;padding:16px 22px;border:1px solid var(--line);border-radius:var(--radius-lg)}
/* every brand logo sits in the same 64px box, so the tiles line up; the logo keeps its own size inside */
.logobox{height:64px;display:flex;align-items:center;align-self:flex-start;margin-bottom:6px}
.logobox img{height:34px;width:auto;display:block}
.ob-brand span{color:var(--muted);font-size:13.5px}
.ob-brand:hover{border-color:var(--moss)}
/* the two represented brands in their own colours: the fermacell orange (its logo's box melts into the tile),
   STEICO's grey with the white logo. Text stays readable: dark on orange, white on grey. */
.ob-fermacell{background:#F2781F;border-color:#F2781F}
.ob-fermacell span{color:#211F1F}
.ob-fermacell .logobox img{height:30px}   /* the lettering alone (no orange box), level with the text's left edge */
.ob-fermacell:hover{background:#E06A14;border-color:#E06A14}
.ob-steico{background:#6A6864;border-color:#6A6864}
.ob-steico span{color:#fff}
.ob-steico:hover{background:#5A5854;border-color:#5A5854}


/* dark bar: services drop-down and the request button on the right */
.bar ul{flex:1;justify-content:flex-end}
.bar ul li.cta{margin-left:auto}
.bar ul li.cta a{background:var(--leaf);color:#fff;border-left:0}
.bar ul li.cta a:hover{background:#3f9440}
.svcdrop{position:relative;display:flex}
.svcdrop summary{list-style:none;display:flex;align-items:center;gap:10px;padding:0 24px;font-weight:500;font-size:14px;border-left:1px solid #2E3A33;cursor:pointer}
.svcdrop summary::-webkit-details-marker{display:none}
.svcdrop summary:hover,.svcdrop[open] summary{background:#26312B}
.svclist{position:absolute;right:0;top:100%;z-index:30;width:340px;background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(27,36,32,.16);padding:6px}
.svclist a,.reqside a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:var(--radius)}
.svclist a svg,.reqside a svg{color:var(--moss);margin-top:2px;flex:none}
.svclist a span,.reqside a span{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.svclist a b,.reqside a b{font-weight:600;font-size:14.5px;color:var(--ink)}
.svclist a:hover,.reqside a:hover{background:var(--page)}

/* request form and service pages */
.contactbox{margin-top:26px;padding:20px 22px;background:var(--sand-2);border-radius:var(--radius-lg)}
.cb-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
/* inside the box every part is spaced the same, whatever the order (title, text, buttons) */
.contactbox>*{margin:0}
.contactbox>*+*{margin-top:14px}
.contactbox p{color:var(--ink-2)}
.formfold{margin-top:16px}
.formfold summary{list-style:none;cursor:pointer;display:inline-flex;gap:6px;align-items:center;color:var(--moss);font-weight:500}
.formfold summary::-webkit-details-marker{display:none}
.reqpage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding:8px 0 20px}
.reqpage .lead{font-size:16.5px;color:var(--ink-2);max-width:64ch}
.reqform{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;margin-top:14px}
.reqform textarea{min-height:120px}
.reqform small{display:block;color:var(--muted);font-size:12.5px;margin-top:4px}
.reqform .btn{margin-top:4px}
.reqnote{font-size:13px;color:var(--muted);margin:10px 0 0}
.formerr{background:#FBEBE9;border:1px solid #F0CFCB;color:#9A2E22;border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;font-size:14px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.reqside{display:grid;gap:4px;position:sticky;top:12px;background:var(--bg);border-radius:var(--radius-lg);padding:16px}   /* white card on the sand, like product cards */
.reqside h2{margin:0 0 6px 12px}
.reqside a.cur{background:var(--page)}   /* the page you are on: the page's own sand, no border */
.reqcall{display:flex;gap:10px;padding:12px;margin-top:6px;border-top:1px solid var(--line);font-size:14px}
.reqcall svg{color:var(--moss);margin-top:2px}
.reqcall a{font-weight:600;color:var(--moss)}
.reqcall small{display:block;color:var(--muted)}
.svcsteps{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.svcsteps li{background:var(--bg);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.svcsteps b{width:28px;height:28px;border-radius:50%;background:var(--moss);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.svcwhy{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:15px}
.svcwhy li{display:flex;gap:10px;align-items:flex-start}
.svcwhy svg{color:var(--leaf);margin-top:3px}
@media (max-width:1024px){ .reqpage{grid-template-columns:1fr} .reqside{position:static} .official-band{grid-template-columns:1fr 1fr}
  .ob-txt{grid-column:1/-1} .svcsteps{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .official-band{grid-template-columns:1fr} }

/* cards, tiles, empty states */
.subtile{display:block}
.subtile .noimg{height:110px;display:flex;align-items:center;justify-content:center;color:var(--moss)}
.card .noimg,.gallery .noimg{color:var(--line-2);display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.card .price small.from{margin:0 4px 0 0;font-size:13px}
.card .price .per{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:2px}
.emptybox{text-align:center;padding:40px 16px;border:1px dashed var(--line-2);border-radius:var(--radius-lg);color:var(--ink-2)}
.emptybox svg{color:var(--muted);margin:0 auto 8px}
.emptybox p{margin:0 auto 14px;max-width:52ch}
.brands a:hover{color:var(--moss)}
/* manufacturers: logo + status tag on top, what they make, a short description, the count at the foot.
   The two represented brands lead and take two columns each. */
.brandgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.brandtile{background:var(--bg);border:0;border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:6px;color:var(--ink);transition:box-shadow .15s}
.brandtile:hover{box-shadow:0 4px 18px rgba(27,36,32,.10)}   /* like .card: white on the sand ground, no border */
.brandtile.lead{grid-column:span 2}
.brandtile b{font-size:20px;font-weight:500}
.brandtile .bt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
.brandtile .logobox{height:48px;margin:0}
.brandtile .logobox img{height:32px}
.brandtile img[src*="/fermacell.svg"]{height:48px}
.brandtile img[src*="/kedras-text.svg"],.brandtile img[src*="/thermo-natur.svg"]{height:38px}   /* compact marks read small at 32: +20 % (owner) */
.brandtile .what{font-size:15px;font-weight:500}
.brandtile .desc{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.brandtile .count{margin-top:auto;padding-top:10px;color:var(--muted);font-size:13px}
.tag{display:inline-block;font-size:12px;line-height:1;padding:5px 10px;border-radius:20px;background:var(--leaf-bg);color:var(--moss);white-space:nowrap}
.cat-head .brand-status{margin:0 0 8px}

/* product page */
.buy .brand a:hover{color:var(--moss)}
.buy .price.ask{font-size:20px}
.wasline{font-size:13px;color:var(--clay);margin-bottom:4px}
.pills a.dim::after{content:""}
.pills a.dim{color:var(--muted);border-style:dashed}
.pills a.cur.dim{color:#fff;border-style:solid}
.calc{align-items:center;flex-wrap:wrap}
.calc label{flex:1}
.calc input{width:80px}
.qtyrow .btn[disabled]{opacity:.5;cursor:not-allowed}
.prose .lead{font-size:16.5px;color:var(--ink)}
.h3{font-size:18px}
.sibs{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}
.sibs a{color:var(--moss)}
.sibs a:hover{text-decoration:underline}

/* home, wide screens: the list is already open beneath the button, so the button does not drop it again */
@media (min-width:1025px){ .home .catdrop .sidecat{display:none} .home .catdrop summary{cursor:default}
  .home .catdrop summary svg:last-child{display:none} }
@media (max-width:1024px){ .brandgrid{grid-template-columns:repeat(2,1fr)} .catdrop[open] .sidecat{display:block} }
@media (max-width:560px){ .brandgrid{grid-template-columns:1fr} .brandtile.lead{grid-column:auto} }
@media (max-width:720px){ .catdrop .sidecat{width:calc(100vw - 32px)} .ddlist{min-width:180px} }

/* The wordmark sits 6.6 % of the logo's height below the image's middle (logo option B, the owner's choice),
   so the image moves up by the same amount: the text then lines up with the middle of the search box. */
.logo img{transform:translateY(-6.6%)}

/* official brand logos */
.brandhead{height:48px;width:auto;margin:0 0 10px}
/* the fermacell wordmark reads small beside STEICO's: owner's size (colour logo only; the bar keeps its own) */
.brandhead[src*="/fermacell.svg"]{height:64px}

/* home top: the banner grows so the service tiles end level with the side menu's last row */
.home-top{align-items:stretch}
.home-main{display:flex;flex-direction:column}
.home-main .banner{flex:1}
.home-main .usps{padding-bottom:0}

/* cart page: the mockup's lines, with real forms */
.line .qty{display:flex}
.line form.rmf{display:inline}
.line .rm{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px}
.line .info{display:flex;flex-direction:column;gap:6px;min-width:0}
.line .st{font-size:12.5px;color:var(--ink-2);display:inline-flex;gap:6px;align-items:center;background:none;padding:0;border-radius:0}
.line .controls{display:flex;align-items:center;gap:18px;margin-top:6px;flex-wrap:wrap}
.line .rm{display:inline-flex;align-items:center;gap:5px}
.line .rm svg{width:14px;height:14px}
.line .st svg{color:var(--leaf)}
.line .st.order svg{color:var(--clay)}
.line .was{color:var(--muted);font-size:12px}
.cartempty{background:var(--bg);border-radius:var(--radius-lg);padding:28px;max-width:640px}
.cartempty p{color:var(--ink-2)}
.added{font-size:13.5px;color:var(--ink-2);margin-top:10px;display:flex;gap:8px;align-items:center}
.added svg{color:var(--leaf)}
.added a{color:var(--moss);text-decoration:underline}

/* home band: logos at the top of their tiles, level with the text tile's heading */
.ob-brand .logobox{height:40px;align-items:flex-start;margin-bottom:16px}
.ob-fermacell .logobox img{margin-top:8px}   /* level with STEICO's lettering (its leaf rises above it) */

/* home: room under the centred section titles; Kategorijos on a white card; a second line on the brand tiles */
.section-head.center{margin:24px 0 36px}   /* Populiarios prekės, Medžiagos jūsų namui, Gamintojai: air above and below */
.treemap{background:var(--bg);border-radius:var(--radius-lg);padding:40px 44px}
.ob-brand .sub{margin-top:4px;opacity:.85}

/* home "Gamintojai": every logo gets the same 150×48 box and scales to fit — wide ones by width, compact ones by height */
/* home "Gamintojai": one white tile per logo in a 5 / 3 / 2 column grid (as on customsclear.net); each logo
   is sized to the same visible area (logo_box), so wide word marks and square marks weigh the same */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:0}
.brands .brandcell{display:flex;align-items:center;justify-content:center;height:104px;background:var(--bg);border-radius:var(--radius-lg);transition:box-shadow .15s}
.brands .brandcell:hover{box-shadow:0 4px 18px rgba(27,36,32,.10)}
.brands .brandcell img{display:block;max-width:80%;height:auto;transition:transform .15s}
.brands .brandcell:hover img{transform:scale(1.05)}
.brands .brandcell span{color:var(--ink-2);font-weight:500}
@media (max-width:900px){ .brands{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .brands{grid-template-columns:repeat(2,1fr);gap:10px} .brands .brandcell{height:88px} }

/* status tag on the two brand tiles: fermacell "Oficialus platintojas", STEICO "Įgaliotas atstovas" */
.ob-brand .obtag{align-self:flex-start;margin-top:14px;font-size:12px;line-height:1;padding:5px 10px;border-radius:20px;white-space:nowrap}
.ob-fermacell .obtag{background:rgba(33,31,31,.12);color:#fff}
.ob-steico .obtag{background:rgba(255,255,255,.16);color:#fff}

/* fermacell certification marks under the band text (owner reviewing) */
.ob-txt .certs{display:flex;align-items:center;gap:18px;margin-top:14px}
.ob-txt .certs img{height:40px;width:auto;display:block}
.ob-txt .certs img[src$="ce.svg"]{height:28px}
.ob-txt .certs img[src$="cradle-to-cradle.png"]{height:42px}   /* nearly square: a little taller to match the wide eco mark */
.ob-txt .certs img[src$="eco-institut.svg"]{height:31px}

/* top line: one row at every width — the address goes first, then the page links; phone, Kontaktai and
   Prisijungti stay until the phone layout (≤720) */
.topbar .wrap,.topbar .left,.topbar .right{flex-wrap:nowrap;white-space:nowrap}
@media (max-width:1180px){ .topbar .left span{display:none} }
@media (max-width:900px){ .topbar .right a.tl-more{display:none} }
/* narrow: the catalog button is the whole bar, so the bar is green edge to edge */
@media (max-width:1024px){ .bar{background:var(--moss)} .logo img{height:40px} }
/* the catalog drop-down lives inside the dark bar (white text) — give it the page's ink back */
.catdrop .sidecat{color:var(--ink)}

/* /skaiciuokles: two cards per row; inside a card everything stacks — title, intro, inputs, result, note —
   and long select labels (Konstrukcija, Panaudojimas) get a whole row */
.calcs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
.calccard{background:var(--bg);border-radius:var(--radius-lg);padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.calccard h2{display:flex;align-items:center;gap:8px;margin:0}
.calccard h2 svg{color:var(--moss)}
.calccard>p{margin:0;color:var(--ink-2);font-size:13.5px}
.cfields{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:4px}
.cfields.three{grid-template-columns:repeat(3,1fr)}
.cfields label.full{grid-column:1/-1}
.cfields label span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.cfields input,.cfields select{width:100%;border:1px solid var(--line-2);border-radius:var(--radius);padding:8px 10px;background:#fff;font:inherit}
.cresult{background:var(--bg-2);border-radius:var(--radius);padding:14px 16px;display:grid;gap:6px;margin-top:4px}
.cresult div{display:flex;align-items:baseline;gap:6px;font-size:18px}
.cresult div span{font-size:13px;color:var(--ink-2);margin-right:auto}   /* label left, figure and unit together on the right */
.cresult div[hidden]{display:none}   /* the hidden attribute loses to display:flex without this */
.cresult output{font:inherit}   /* <output> does not inherit the font by default: it rendered in monospace */
.calccard>p.cnote{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.cnote a{color:var(--moss)}
.cresult.joist .jbest{font-size:20px}
.jlist{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px;font-size:14px}
.jlist li{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;padding:5px 8px;border-radius:var(--radius)}
.jlist li em{font-style:normal;color:var(--ink-2);font-size:13px}   /* the shop price, or "užsakoma" */
.jlist li.best{background:var(--leaf-bg);color:var(--moss)}
.jlist li span{color:var(--ink-2)}
.jlist a{color:var(--moss)}   /* in the shop: a link; sizes we only order carry "užsakoma" instead */
.jlist a:hover{text-decoration:underline}
.calcask{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border:1px solid var(--line-2);border-radius:var(--radius-lg);color:var(--ink-2);max-width:70ch}
.calcask svg{flex:none;color:var(--moss);margin-top:2px}
.calcask a{color:var(--moss);text-decoration:underline;margin-left:4px}
@media (max-width:900px){ .calcs{grid-template-columns:1fr} }
@media (max-width:560px){ .cfields,.cfields.three{grid-template-columns:1fr} }
/* footer menus (Katalogas, Gamintojai, Paslaugos): quiet underlines that brighten on hover */
footer.site ul:not(.contact) a{text-decoration:underline;text-decoration-color:rgba(185,194,188,.35);text-underline-offset:3px;text-decoration-thickness:1px}
footer.site ul:not(.contact) a:hover{text-decoration-color:#fff}
/* Paslaugos drop-down: it sits inside the dark bar, so `.bar ul li a` (divider line, centring, dark hover)
   reached its items. These rules outrank that: top-aligned icon and text, room to breathe, light hover. */
.bar .svclist{display:grid;gap:4px;padding:8px;width:360px}
.bar .svclist a{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-left:0;height:auto;
  font-weight:400;font-size:14px;color:var(--ink);border-radius:var(--radius)}
.bar .svclist a:hover{background:var(--page);color:var(--ink)}
.bar .svclist a svg{margin-top:2px}
.bar .svclist a span{gap:4px;line-height:1.4}
.bar .svclist a b{font-weight:500}

/* "Patogiau paskambinti?" in the service card: the phone is a plain line under the question, not a menu item */
.reqside .reqcall a{display:block;padding:0;margin:2px 0;border-radius:0;font-weight:500}
.reqside .reqcall a:hover{background:none;text-decoration:underline}

/* ===== home hero slideshow =====
   one photo per slide with text over it (owner, 2026-09-25: no overlays, cut-outs or price boxes); the active slide
   fades in and its text rises. */
.hero{position:relative;margin-top:16px;border-radius:var(--radius-lg);overflow:hidden;min-height:440px;background:var(--ink);isolation:isolate;display:grid}   /* slides share one grid cell, so the hero grows to the tallest text instead of clipping it */
.home-main .hero{flex:1}
.hs{grid-area:1/1;position:relative;display:flex;align-items:stretch;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.hs.is-on{opacity:1;visibility:visible;transition:opacity .8s ease}
.hs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 7s ease-out}
.hs.is-on .hs-bg{transform:scale(1)}
.hs-txt{position:relative;z-index:3;padding:36px 40px;color:#fff;max-width:600px;opacity:0;transform:translateY(14px);transition:opacity .7s ease .3s,transform .7s ease .3s}
.hs.is-on .hs-txt{opacity:1;transform:none}
.hs-txt h1,.hs-txt .hs-title{font-size:clamp(28px,3.4vw,44px);margin:0 0 10px;color:#fff;line-height:1.2}
.hs-txt p{font-size:17px;margin:0 0 18px;color:rgba(255,255,255,.9);max-width:46ch}
.hs-txt{display:flex;flex-direction:column}   /* heading and text at the top, the button row at the bottom */
.hs-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:auto;padding-top:20px}
.hs-act .btn{background:var(--leaf);border-color:var(--leaf)}
.hs-act .btn:hover{background:#3f9440;border-color:#3f9440}
/* the slide's link: white text with an arrow, no button */
.hs-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:17px;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.hs-link svg{transition:transform .2s}
.hs-link:hover{border-bottom-color:#fff}
.hs-link:hover svg{transform:translateX(4px)}
.hs-txt > .addr{align-self:flex-start;margin-top:auto;display:inline-flex;gap:8px;align-items:center;font-size:14px;color:#fff;   /* information, not a button: at the bottom of the slide */
  background:rgba(27,36,32,.6);padding:7px 12px;border-radius:999px;backdrop-filter:blur(4px)}
/* the slide's title and text on a dark see-through box, so they read on any photo without darkening the whole photo */
.hs-box{align-self:flex-start;margin-bottom:12px;background:rgba(27,36,32,.6);backdrop-filter:blur(4px);border-radius:12px;padding:20px 24px 30px}   /* 30 below: the title's line height already adds ~11 px of air above its letters */
.hs-box .hs-act{margin-top:0;padding-top:4px}   /* the button row inside the box, under the text */
.hs-dots{position:absolute;z-index:4;right:18px;bottom:16px;display:flex;gap:8px}
/* products inside a slide: the photo fills the whole slide as on any other, and a white panel slides in over its right
   part showing one product at a time (owner, 2026-11-03) */
.hero{--panel:clamp(300px,36%,340px);--strip:18px}
@media (min-width:901px){ .hero:has(.hs-prods){min-height:530px} }   /* the product square (≤340) + name, prices and dots fit even when the text is short */   /* the coloured strip shows this much left of the white panel */   /* the product square plus its name and price fit the hero's height */
.hs.has-prod .hs-txt{max-width:calc(100% - var(--panel) - var(--strip))}   /* the text box keeps 40 px from the strip, as from the left edge */
.hs-prods{position:absolute;z-index:3;top:0;right:0;bottom:0;width:var(--panel);display:grid;grid-template-rows:1fr auto;
  background:#fff;padding:0 0 56px;transform:translateX(100%);transition:transform .75s cubic-bezier(.22,.8,.24,1)}
.hs-prods.is-on{transform:none;transition-delay:.2s}   /* the white panel slides in from the right when its slide comes up, and back out */
/* a dark layer under the white one, a little wider (owner, 2026-11-03): in first, the white follows; out after the white */
.hs-shade{position:absolute;z-index:2;top:0;right:0;bottom:0;width:calc(var(--panel) + var(--strip));background:var(--tone,#1B2420);
  transform:translateX(100%);transition:transform .75s cubic-bezier(.22,.8,.24,1) .18s;pointer-events:none}
.hs-shade.is-on{transform:none;transition-delay:0s}
/* product slide to product slide: each slide has its own strip; the new one follows the old one out without a pause */
.hero.swap .hs-shade.is-on{transition-delay:.2s}   /* the new strip starts as the old one starts leaving, and passes over it */
.hero.swap .hs-prods.is-on{transition-delay:.4s}
.hero.swap .hs-prods.is-on .hs-prod.is-on .hp-img img{transition-delay:.75s}
.hero.swap .hs-prods.is-on.ran .hs-prod.is-on .hp-img img{transition-delay:.25s}
.hs-prod{grid-area:1/1;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;min-height:0;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}   /* out first, then the next one in: */
.hs-prod.is-on{opacity:1;visibility:visible;transition:opacity .35s ease .25s,visibility 0s .25s}   /* never two texts on top of each other */
/* the same square as on the product page, the full width of the panel from its very top, no margins, no background or
   border; the original photo is centred inside it exactly as on the product page */
.hp-img{position:relative;flex:none;margin:0 0 4px;aspect-ratio:1;overflow:hidden;display:grid;place-items:center;color:var(--muted)}
.hp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;   /* the product page's square, photo centred as there */   /* the frame, not the picture, sets the size */
  opacity:0;transform:translateY(-48px);transition:transform .6s cubic-bezier(.22,.8,.24,1),opacity .4s ease}
.hs-prods.is-on .hs-prod.is-on .hp-img img{opacity:1;transform:none;transition-delay:.55s}   /* the photo drops in from the top once the panel is there */
.hs-prods.is-on.ran .hs-prod.is-on .hp-img img{transition-delay:.25s}   /* the next product in the rotation: right after the old one fades */
.hp-pct{position:absolute;top:16px;left:22px;background:var(--sale);color:#fff;font-size:15px;font-weight:500;padding:4px 10px;border-radius:999px}
.hp-txt{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 22px}
.hp-name{font-size:16px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-prod:hover .hp-name{text-decoration:underline}
.hp-price{font-size:14px;color:var(--muted)}
.hp-price b{font-size:22px;font-weight:500;color:var(--ink)}
.hp-was{font-size:14px;color:var(--muted);margin-bottom:-2px}   /* on a promotion: the old price on its own line, above the new one */
.hp-price.sale b{background:var(--sale);color:#fff;padding:1px 8px;border-radius:7px}   /* a promotion: orange, as on the product cards */
.hp-dots{position:absolute;left:22px;bottom:30px;display:flex;align-items:center;gap:8px}   /* on the same line as the slide dots */
.hp-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--line-2);cursor:pointer}
.hp-dots button[aria-current]{background:var(--accent-tone,var(--moss));width:22px;border-radius:5px}   /* [aria-current], not ="true": the script sets it empty */
/* the slideshow's own dots: bottom left, under the text, kept quiet */
.hs-ctrl{position:absolute;z-index:4;left:40px;bottom:30px;display:flex;align-items:center;gap:8px}
.hs-ctrl .hs-dots{position:static}   /* quiet: no pill, no arrow — just the dots */
.hero .hs-txt{padding-bottom:64px}   /* room for the controls under the text */
/* tablets and phones: just the photo and the message — no product panel (owner, 2026-11-03) */
@media (max-width:900px){
  .hs.has-prod .hs-txt{max-width:none}
  .hs-prods,.hs-shade{display:none}
}
.hs-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer}
.hs-dots button[aria-current]{background:#fff;width:22px;border-radius:5px}   /* the slide shown: a white line */
/* wide screens: the slogan gets room for two lines instead of three, broken evenly */
.hs-txt h1,.hs-txt .hs-title{text-wrap:balance}
@media (min-width:1200px){ .hs-txt{max-width:880px} .hs-txt p{max-width:60ch} }
@media (max-width:720px){ .hero{min-height:420px} .hs-txt{max-width:none;padding:22px 20px 40px} .hs-ctrl{left:20px} }   /* dots under the text box's left edge */
@media (max-width:420px){ .hs-txt h1,.hs-txt .hs-title{font-size:26px} .hs-txt p{font-size:15px} }
@media (prefers-reduced-motion:reduce){ .hs,.hs-bg,.hs-txt,.hs-prods,.hs-shade,.hp-img img{transition:none!important} .hs-bg,.hs-prods,.hs-shade,.hp-img img{transform:none!important} .hs-prods:not(.is-on),.hs-shade:not(.is-on){visibility:hidden} }

/* shop accounts: sign-in card, account pages (docs/CUSTOMER_ACCOUNTS.md) */
.authpage{display:flex;justify-content:center;padding:18px 0 40px}
.authcard{width:min(460px,100%);background:var(--bg);border-radius:var(--radius-lg);padding:28px 30px}
.authcard h1{margin-bottom:8px}
.authcard .lead{color:var(--ink-2);margin:0 0 18px}
.authform{display:grid;gap:14px}
.authwhy{list-style:none;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.authwhy li{display:flex;gap:10px;align-items:center}
.authwhy svg{color:var(--moss);flex:none}
.authnote{font-size:13px;color:var(--muted);margin:16px 0 0}
.authnote a,.acctnote a,.acctempty a{color:var(--moss);text-decoration:underline}
.devlink{display:flex;gap:8px;align-items:flex-start;margin-top:16px;padding:10px 12px;border:1px dashed #C9A227;background:#FFF8E1;border-radius:var(--radius);font-size:13px}
.devlink a{color:var(--moss);text-decoration:underline}
.okmsg{display:flex;gap:8px;align-items:center;background:var(--leaf-bg);color:var(--moss);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;font-size:14px}
.acctpage{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start;padding:8px 0 30px}
.acctnav{display:grid;gap:2px;background:var(--bg);border-radius:var(--radius-lg);padding:12px;position:sticky;top:12px}
.acctnav .acctwho{display:flex;gap:10px;align-items:center;padding:6px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acctnav .acctwho svg{color:var(--moss);flex:none}
.acctnav .acctwho b{display:block;font-weight:500;font-size:14px}
.acctnav .acctwho small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.acctnav a,.acctnav .navbtn{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:var(--radius);font-size:14px;color:var(--ink-2);background:none;border:0;width:100%;text-align:left;cursor:pointer;font:inherit}
.acctnav a:hover,.acctnav .navbtn:hover{background:var(--page);color:var(--ink)}
.acctnav a.cur{background:var(--page);color:var(--ink)}
.acctnav form{margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.acctmain{background:var(--bg);border-radius:var(--radius-lg);padding:24px 26px;min-width:0}
.acctmain h2{margin:26px 0 10px}
.acctperk{display:flex;gap:10px;align-items:flex-start;background:var(--leaf-bg);color:var(--moss);border-radius:var(--radius);padding:12px 14px;margin-bottom:18px;font-size:14px}
.acctperk svg{flex:none}
.acctstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 4px}
.acctstats a{background:var(--page);border-radius:var(--radius);padding:14px 16px;display:grid;gap:2px}
.acctstats b{font-size:24px;font-weight:400}
.acctstats span{font-size:13px;color:var(--ink-2)}
.acctstats a:hover{outline:1px solid var(--line-2)}
.accttbl{width:100%;border-collapse:collapse;font-size:14px}
.accttbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line)}
.accttbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.accttbl td small{display:block;color:var(--muted);font-size:12.5px}
.accttbl a{color:var(--moss)}
.st{display:inline-block;font-size:12.5px;padding:3px 9px;border-radius:20px;background:var(--page);color:var(--ink-2);white-space:nowrap}
.st-new,.st-confirmed,.st-picked{background:#FFF4DC;color:#7A5A00}
.st-shipped{background:#E6F0FB;color:#1F4E86}
.st-done{background:var(--leaf-bg);color:var(--moss)}
.st-cancelled{background:#F4E3E1;color:#8E2F24}
.ok{color:var(--moss)} .due{color:#9A5B00}
.ordhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--ink-2);font-size:14px;margin:-2px 0 16px}
.ordsum{display:grid;gap:6px;max-width:360px;margin:14px 0 0 auto;font-size:14px}
.ordsum div{display:flex;justify-content:space-between;gap:12px}
.ordsum .total{font-size:17px;border-top:1px solid var(--line);padding-top:8px}
.orddeliv{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.orddeliv p{color:var(--ink-2);font-size:14px;margin:0}
.acctdocs{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}
.acctdocs li{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.acctdocs a{display:inline-flex;gap:6px;align-items:center;color:var(--moss)}
.acctempty{color:var(--ink-2)}
.acctform .fields{margin-bottom:14px}
.acctnote{font-size:13.5px;color:var(--ink-2)}
.acctinline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.acctinline .field{flex:1;min-width:220px}
.acctactions{display:flex;gap:10px;flex-wrap:wrap}
.btn.danger{color:#9A2E22;border-color:#E3B8B2}
.btn.danger:hover{background:#9A2E22;border-color:#9A2E22;color:#fff}
@media (max-width:860px){ .acctpage{grid-template-columns:1fr} .acctnav{position:static;grid-template-columns:1fr 1fr} .acctnav .acctwho,.acctnav form{grid-column:1/-1} }
@media (max-width:640px){
  .acctmain{padding:18px 16px} .acctstats{grid-template-columns:1fr} .orddeliv{grid-template-columns:1fr} .fields{grid-template-columns:1fr}
  .accttbl thead{display:none} .accttbl tr{display:grid;grid-template-columns:1fr 1fr;padding:8px 0;border-bottom:1px solid var(--line)}
  .accttbl td{border:0;padding:4px 0} .accttbl td::before{content:attr(data-label);display:block;font-size:11.5px;color:var(--muted)}
}
.card .yours{display:flex;gap:5px;align-items:center;font-size:12.5px;color:var(--moss);margin-top:2px}
.wasline.yours{color:var(--moss);display:flex;gap:5px;align-items:center;flex-wrap:wrap}
/* checkout */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start;padding-bottom:30px}
.ckmain{display:grid;gap:14px}
.ckstep{background:var(--bg);border-radius:var(--radius-lg);padding:20px 22px}
.ckstep h2{display:flex;gap:10px;align-items:center;margin:0 0 14px}
.ckhint{margin:10px 0 0;font-size:13px;color:var(--muted)}
.ckstep .n{width:26px;height:26px;border-radius:50%;background:var(--leaf-bg);color:var(--moss);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}
.ckstep .field small{display:block;color:var(--muted);font-size:12.5px;margin-top:4px}
.ckstep .field small a,.cklogin a{color:var(--moss);text-decoration:underline}
.ckstep .field input[readonly]{background:var(--page);color:var(--ink-2)}
.ckstep .field[hidden],.ckstep .agree[hidden]{display:none}
.ckstep .field select[size]{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:4px;font:inherit;background:var(--bg);margin-top:6px}
.ckstep .dlnote:empty{display:none}
.ckstep .field small svg{vertical-align:-3px;margin-right:4px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.seg label{display:flex;gap:6px;align-items:center;padding:8px 14px;cursor:pointer;font-size:14px}
.seg label:has(input:checked){background:var(--leaf-bg);color:var(--moss)}
.seg input{accent-color:var(--moss)}
.ckstep .opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;cursor:pointer}
.ckstep .opt:has(input:checked){border-color:var(--moss);background:var(--page)}
.ckstep .opt input{margin-top:3px;accent-color:var(--moss)}
.ckstep .opt span{display:grid;gap:2px;font-size:14px;color:var(--ink-2)}
.ckstep .opt b{font-weight:500;color:var(--ink)}
.ckstep .opt small{color:var(--muted);font-size:12.5px}
.ckstep .addr{margin-top:4px}
.cklogin{display:flex;gap:10px;align-items:center;background:var(--bg);border-radius:var(--radius-lg);padding:14px 18px;font-size:14px}
.cklogin svg{color:var(--moss);flex:none}
.cksum{background:var(--bg);border-radius:var(--radius-lg);padding:20px 22px;position:sticky;top:12px;display:grid;gap:10px}
.cksum h2{margin:0}
.cklines{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-height:320px;overflow:auto}
.cklines li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.cklines small{display:block;color:var(--muted);font-size:12.5px}
.cklines b{font-weight:400;white-space:nowrap}
.ckcoupon{border-top:1px solid var(--line);padding-top:10px}
.ckcoupon label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.ckcoupon div{display:flex;gap:8px}
.ckcoupon input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:3px;padding:8px 10px;text-transform:uppercase}
.ckcoupon .btn{padding:8px 14px}
.ckcoupon .bad{color:#9A2E22} .ckcoupon .good{color:var(--moss)}
.cksum .row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.cksum .row.total{font-size:18px;border-top:1px solid var(--line);padding-top:10px}
.cksum .note{font-size:12.5px;color:var(--muted)}
.thanks{text-align:left}
.thanksico{width:52px;height:52px;border-radius:50%;background:var(--leaf-bg);color:var(--moss);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.thanks .next{padding-left:20px;color:var(--ink-2);display:grid;gap:6px;margin:0 0 20px}
@media (max-width:900px){ .checkout{grid-template-columns:1fr} .cksum{position:static} }
@media (max-width:640px){ .ckstep{padding:16px} .seg{display:flex} .seg label{flex:1;justify-content:center} }
/* phones: after the hero come the popular goods, then the service tiles and the distribution band (owner) */
@media (max-width:720px){
  .home{display:flex;flex-direction:column}
  .home .home-top,.home .home-main{display:contents}
  .home .hero{order:1}
  .home .popular{order:2}
  .home .usps{order:3;margin-top:28px!important}
  .home .official-band{order:4}
  .home > section:not(.popular):not(.official-band){order:5}
}

/* company pages: About, Delivery, For businesses, Contacts (templates/shop/_info.html) — white cards on the sand */
.infopage .info-main{min-width:0}
.info-sec{margin-top:34px}
.info-sec>h2{margin-bottom:14px}
.info-sec p{color:var(--ink-2);max-width:70ch}
.info-sec.legal{margin-top:26px}
.info-sec.legal>h2{font-size:18px;margin-bottom:8px}
.info-sec.legal p+p{margin-top:8px}
.legal-list{padding-left:18px;max-width:70ch;color:var(--ink-2)}
.legal-list li{margin-bottom:6px}
.legal-list b{font-weight:500;color:var(--ink)}
.legal-date{margin-top:26px;font-size:13px;color:var(--muted)}
.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.info-facts{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.info-facts li{display:flex;flex-direction:column;gap:8px;background:var(--bg);border-radius:var(--radius-lg);padding:14px;font-size:14px}
.info-facts svg,.value svg,.feat svg,.way-head svg,.ccard-head svg,.info-list svg{color:var(--moss)}
.rep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rep{background:var(--bg);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-2);transition:box-shadow .15s}
.rep:hover{box-shadow:0 4px 18px rgba(27,36,32,.10)}
.rep-top{height:48px;display:flex;align-items:center}
.rep-top img{width:auto;max-width:170px;object-fit:contain}
.rep-top b{font-size:20px;font-weight:500;color:var(--ink)}
.rep .tag{align-self:flex-start;white-space:normal;line-height:1.3}
.rep-more{margin:22px 0 10px;font-size:13px;color:var(--muted)}
.value-grid,.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.value,.feat{background:var(--bg);border-radius:var(--radius-lg);padding:20px}
.value h3,.feat h3{margin:12px 0 6px;font-weight:500}
.value p,.feat p{margin:0;font-size:14px;color:var(--ink-2)}
.sec-lead{margin:0 0 16px;color:var(--ink-2);max-width:70ch}
.team-grid{display:flex;flex-direction:column;gap:12px}
.member{background:var(--bg);border-radius:var(--radius-lg);padding:20px;display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.member svg{color:var(--moss)}
.member .photo{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px}
.member h3{margin:0 0 2px;font-weight:500}
.member .role{margin:0 0 10px;font-size:13px;color:var(--muted)}
.member p{margin:0 0 10px;font-size:14px;color:var(--ink-2)}
.member .ask span{color:var(--ink)}
.member .m-contact{background:var(--page);border-radius:10px;padding:12px 16px;margin-top:4px}
.member .m-contact p{margin:0 0 6px}
.member .reach{margin:0;line-height:1.6}
.member .reach a{color:var(--ink);text-decoration:none}
.member .reach a:hover{text-decoration:underline}
@container (max-width:560px){ .member{grid-template-columns:1fr} .member .photo{max-width:240px} }
@media (max-width:600px){ .member{grid-template-columns:1fr} .member .photo{max-width:240px} }
.info-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.info-svc a{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border-radius:var(--radius-lg);padding:16px;transition:box-shadow .15s}
.info-svc a:hover{box-shadow:0 4px 18px rgba(27,36,32,.10)}
.info-svc svg{color:var(--moss);margin-top:2px}
.info-svc span{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.info-svc b{font-weight:500;font-size:14.5px;color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:6px;color:var(--moss);font-weight:500}
.more:hover{text-decoration:underline}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.way{background:var(--bg);border-radius:var(--radius-lg);padding:20px}
.way-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.way-head h2{margin:0;flex:1}
.free{font-size:13px;padding:4px 10px;border-radius:20px;background:var(--leaf-bg);color:var(--moss)}
.way ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--ink-2)}
.way li{display:flex;gap:10px;align-items:flex-start}
.way li svg{color:var(--muted);margin-top:3px}
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.info-list li{display:flex;gap:14px;align-items:flex-start;background:var(--bg);border-radius:var(--radius-lg);padding:14px 16px}
.info-list span{display:flex;flex-direction:column;font-size:14px;color:var(--ink-2)}
.info-list b{font-weight:500;font-size:15px;color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.ccard{background:var(--bg);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ccard.wide{grid-column:1/-1}
.ccard-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ccard-head h2{margin:0}
.ccard>a{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:15px;overflow-wrap:anywhere}
.ccard>a svg{color:var(--muted)}
.ccard>a:hover{color:var(--moss)}
.ccard-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.ccard .addr{font-size:16px;margin:0 0 8px;color:var(--ink)}
.ccard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.ccard dt{color:var(--muted)}
.ccard dd{margin:0;overflow-wrap:anywhere}
.ccard dd small{display:block;color:var(--muted);font-size:13px}
@media (max-width:1024px){ .info-facts{grid-template-columns:1fr 1fr} .rep-grid,.value-grid,.feat-grid,.info-svc{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .info-cols,.ways,.contact-grid,.ccard-cols,.rep-grid,.value-grid,.feat-grid,.info-svc{grid-template-columns:1fr} }
.info-main .brands{grid-template-columns:repeat(3,1fr);gap:12px}   /* Apie mus: three per row, like the cards above it */
@media (max-width:520px){ .info-main .brands{grid-template-columns:repeat(2,1fr)} }

/* manufacturer page header: one white card, the logo as the heading, then status, text and facts */
.brandcard{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;background:var(--bg);border-radius:var(--radius-lg);overflow:hidden;margin:6px 0 22px}
.bc-logo{display:flex;align-items:center;justify-content:center;padding:28px;border-right:1px solid var(--line)}
.bc-logo h1{margin:0;line-height:0}
.bc-logo img{max-width:190px;max-height:84px;width:auto;height:auto;display:block}
.bc-body{padding:24px 28px;display:flex;flex-direction:column;gap:10px}
.bc-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bc-what{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bc-top .brand-status{margin:0}
.bc-body p{margin:0;color:var(--ink-2);max-width:72ch}
.bc-facts{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--ink-2);margin-top:2px}
.bc-facts span{display:inline-flex;align-items:center;gap:6px}
.bc-facts svg{color:var(--muted)}
.bc-facts .ok svg{color:var(--leaf)}
/* fermacell, the brand we distribute: its orange as a band on the logo side */
.brandcard.is-fermacell .bc-logo{background:#F2781F;border-right:0}
@media (max-width:720px){
  .brandcard{grid-template-columns:1fr}
  .bc-logo{border-right:0;border-bottom:1px solid var(--line);padding:22px}
  .bc-body{padding:18px 20px}
}
.bc-logo img{width:190px;max-width:100%;height:auto;max-height:84px;object-fit:contain}

/* filters as rows of visible chips, on the page ground (preview) */
.facetrows{display:grid;gap:10px;margin:0 0 18px}
.frow{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;align-items:start}
.flab{font-size:13px;color:var(--muted);padding-top:6px}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchips a{border:1px solid var(--line-2);border-radius:20px;padding:5px 12px;font-size:13px;color:var(--ink);background:transparent;line-height:1.3}
.fchips a small{color:var(--muted);font-size:12px;margin-left:2px}
.fchips a:hover{border-color:var(--ink)}
.fchips a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.fchips a.on small{color:rgba(255,255,255,.7)}
.fchips a.clear{border-color:transparent;color:var(--muted);display:inline-flex;gap:4px;align-items:center}
.fchips a.clear:hover{color:var(--danger)}
.listbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;margin-bottom:14px;border-top:1px solid var(--line)}
.listbar .cnt{font-size:14px;color:var(--muted)}
@media (max-width:720px){ .frow{grid-template-columns:1fr;gap:6px} .flab{padding-top:0} }
.fchips.folded a.extra{display:none}
.fchips .fmore{display:none;border:1px dashed var(--line-2);border-radius:20px;padding:5px 12px;font:inherit;font-size:13px;color:var(--ink-2);background:transparent;cursor:pointer}
.fchips.folded .fmore{display:inline-block}
.fchips .fmore:hover{border-color:var(--ink);color:var(--ink)}

/* "Filtrai" toggle with the chosen filters beside it; the chip rows open under it */
.listbar{border-top:0;padding:0;margin:0 0 14px;flex-wrap:wrap}
.ftoggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--radius);background:transparent;padding:8px 14px;font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.ftoggle:hover,.ftoggle.on{border-color:var(--ink)}
.ftoggle.on{background:var(--ink);color:#fff}
.ftoggle .n{min-width:20px;height:20px;border-radius:10px;background:var(--moss);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.factive{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.factive a{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 10px 5px 12px;font-size:13px;background:var(--ink);color:#fff}
.factive a:hover{background:var(--danger)}
.factive a.clear{background:transparent;color:var(--muted);padding:5px 6px}
.factive a.clear:hover{color:var(--danger);background:transparent}
.listbar .sp{flex:1}
.facetrows{margin:0 0 18px;padding:16px 0 4px;border-top:1px solid var(--line)}
.facetrows[hidden]{display:none}
.fchips .fhint{flex-basis:100%;font-size:12.5px;color:var(--muted)}
/* one shape for everything on the filter line: rounded like the chips */
.ftoggle{border-radius:20px;padding:6px 14px}
.listbar{justify-content:flex-start}   /* the chosen filters sit right beside "Filtrai" */
/* sorting: its own pill on the right, its options in a row that opens under the line, right-aligned */
.listbar .sp{flex:1}
.stoggle{font-weight:400}
.sortrow{margin:0 0 18px;padding:14px 0 4px;border-top:1px solid var(--line)}
.sortrow[hidden]{display:none}
.sortrow .fchips{justify-content:flex-end}
/* manufacturer card: the H1 is text ("Thermo Natur – kanapių ir džiuto izoliacija"), the logo only a picture */
.bc-h1{font-size:clamp(20px,2.2vw,26px);margin:0;line-height:1.2}
.bc-top{align-items:center}
.bc-name{font-size:28px;font-weight:600;color:var(--ink)}
.bc-top{flex-direction:column;align-items:flex-start;gap:8px}   /* status tag under the H1 */

/* load on scroll: the "next" link is a quiet loading line once script runs */
.loadmore{display:flex;justify-content:center;align-items:center;min-height:64px;margin:18px 0}
.loadmore a{border:1px solid var(--line-2);border-radius:20px;padding:8px 18px;font-size:14px;color:var(--ink)}
.loadmore .spin{display:none;width:22px;height:22px;border:2px solid var(--line-2);border-top-color:var(--moss);border-radius:50%;animation:lm-spin .8s linear infinite}
.loadmore.auto a{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.loadmore.auto .spin{display:block}
@keyframes lm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .loadmore .spin{animation-duration:2s} }
/* product page: the photos are square — a square gallery in a narrower column, more room for the details */
.pdp{grid-template-columns:minmax(0,5fr) minmax(360px,6fr)}
.gallery .main{aspect-ratio:1/1}
@media (max-width:1024px){ .pdp{grid-template-columns:1fr} }
.added[hidden]{display:none}   /* "Įdėta į krepšelį" only after adding (display:flex had overridden hidden) */

/* ===== product page (2026-09-26): buy box above the fold, then one column of sections with a jump menu ===== */
.buy{border:0}
.buy-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.buy-brand{display:inline-flex;align-items:center;min-height:30px;font-weight:500;color:var(--ink-2)}
.buy-brand img{height:30px;width:auto;max-width:150px;object-fit:contain;display:block}
.buy-brand img[src*="fermacell"]{height:24px}
.buy-head .sku{margin:0;font-size:12px;color:var(--muted)}
.buy h1{margin:0 0 12px}
.keyfacts{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.keyfacts li{font-size:13px;background:var(--page);border-radius:20px;padding:4px 12px;color:var(--ink)}
.keyfacts li span{color:var(--muted);margin-right:4px}
.buy .priceline{margin-top:20px}
.buy .vat{margin-bottom:6px}
.tocalc{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--moss);margin-top:4px}
.tocalc:hover{text-decoration:underline}
.buy .stockline svg{color:var(--muted)}
.pdp-nav{position:sticky;top:0;z-index:20;display:flex;gap:6px;overflow-x:auto;margin:28px 0 14px;padding:10px 0;background:var(--page);border-bottom:1px solid var(--line)}
.pdp-nav a{flex:none;padding:6px 14px;border-radius:20px;font-size:14px;color:var(--ink-2)}
.pdp-nav a:hover{background:var(--bg);color:var(--ink)}
.pdp-sections{display:grid;gap:16px;margin-bottom:10px}
.pdp-sec{background:var(--bg);border-radius:var(--radius-lg);padding:26px 30px;scroll-margin-top:70px}
.pdp-sec h2{font-size:20px;margin:0 0 14px}
.pdp-sec.prose p{max-width:75ch}
.pdp-sec .specs{width:100%;max-width:760px}
.pdp-sec h3{font-size:16px;font-weight:500;color:var(--ink);margin:20px 0 8px}
.feats{max-width:75ch;margin:0;padding-left:20px;display:grid;gap:6px}
.certs,.docs{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px;max-width:760px;font-size:15px}
.certs li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.certs svg,.docs svg{flex:none;color:var(--moss);margin-top:2px}
.docs a{display:flex;gap:10px;align-items:flex-start;color:var(--moss);padding:4px 0;min-height:32px}
.docs a:hover span{text-decoration:underline}
.calc2{display:grid;grid-template-columns:minmax(160px,220px) minmax(160px,200px) 1fr auto;gap:16px 22px;align-items:end}
.c-in{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.c-field{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:15px}
.c-field input,.c-field select{width:100%;border:1px solid var(--line-2);border-radius:var(--radius);padding:9px 10px;font:inherit;background:#fff}
.c-out{display:flex;flex-wrap:wrap;gap:8px 26px}
.c-out div{display:grid;gap:2px}
.c-out span{font-size:12.5px;color:var(--muted)}
.c-out b{font-size:20px;font-weight:500}
.calc2 .btn[disabled]{opacity:.45;cursor:default}
.c-note{font-size:13px;color:var(--muted);margin:14px 0 0}
@media (max-width:1024px){ .calc2{grid-template-columns:1fr 1fr} .c-out,.calc2 .btn{grid-column:1/-1} }
@media (max-width:720px){ .pdp-sec{padding:20px 18px} .calc2{grid-template-columns:1fr} }
.pdp-sec.prose{max-width:none}   /* same width as the other sections; the lines themselves stay ~75ch */
@media (max-width:1024px){ .pdp{grid-template-columns:minmax(0,1fr)} }
.gallery{min-width:0}
.gallery .thumbs{overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.gallery .thumbs a{flex:none}
/* buy box: key facts as key: value rows under the options; roomier H1; the calculator folds out in place */
.buy h1{line-height:1.3}
dl.keyfacts{display:grid;gap:6px;margin:4px 0 6px;padding:0}
dl.keyfacts div{display:flex;gap:10px;font-size:14px}
dl.keyfacts dt{color:var(--muted);min-width:130px}
dl.keyfacts dd{margin:0;color:var(--ink)}
.calcbox{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.calcbox summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--moss)}
.calcbox summary::-webkit-details-marker{display:none}
.calcbox summary svg:last-child{margin-left:auto;transition:transform .2s}
.calcbox[open] summary svg:last-child{transform:rotate(180deg)}
.calcbox .calc2{grid-template-columns:1fr 1fr;margin-top:14px;gap:12px 14px}
.calcbox .c-out,.calcbox .calc2 .btn{grid-column:1/-1}
.calcbox .c-out{background:var(--page);border-radius:var(--radius);padding:10px 12px;gap:6px 22px}
.calcbox .c-out b{font-size:17px}
.calcbox .c-note{margin-top:10px}
/* key facts as small tiles: the value first, the label under it */
.facttiles{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facttiles li{display:grid;gap:1px;background:var(--page);border-radius:var(--radius-lg);padding:10px 14px;min-width:110px}
.facttiles b{font-size:17px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.facttiles span{font-size:12.5px;color:var(--muted)}
.buy .tocalc{display:flex;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* quantity fields: only our − / + buttons, no browser spinner arrows */
.qty input[type=number]{-moz-appearance:textfield;appearance:textfield}
.qty input[type=number]::-webkit-inner-spin-button,.qty input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pdp-sections{margin-top:28px}   /* no jump menu: the sections follow the buy box directly */
/* number fields everywhere: no browser spinner arrows (owner) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* product gallery on phones: a swipe strip with dots instead of the big photo + thumbnails */
.gswipe,.gdots{display:none}
@media (max-width:720px){
  .gallery:has(.gswipe) .main,.gallery .thumbs{display:none}
  .gswipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius-lg);background:var(--bg)}
  .gswipe::-webkit-scrollbar{display:none}
  .gswipe img{flex:0 0 100%;width:100%;aspect-ratio:1/1;object-fit:contain;scroll-snap-align:center}
  .gdots{display:flex;justify-content:center;gap:7px;margin:12px 0 4px}
  .gdots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background .2s,transform .2s}
  .gdots i.on{background:var(--ink);transform:scale(1.2)}
}
@media (max-width:720px){
  .gdots{gap:5px}
  .gdots i{width:8px;height:8px;flex:none;transition:transform .2s,background .2s}
  .gdots i.on{background:var(--ink)}
}
/* product top as ONE white card (owner, try-out): photo and details inside it, no frame around the photo */
.pdp{background:var(--bg);border-radius:var(--radius-lg);padding:24px;gap:36px;margin-top:4px}
.buy{background:transparent;border:0;border-radius:0;padding:4px 0 0}
.gallery .main{border:0;border-radius:var(--radius)}
.gallery .thumbs a{border-color:var(--line)}
@media (max-width:1024px){ .pdp{gap:22px} .buy{position:static} }
@media (max-width:720px){ .pdp{padding:14px} .gswipe{border-radius:var(--radius)} }
/* product top: a faint line round the photo, more room between photo and details, graduated thumbnails */
.gallery .main{border:1px solid #EFEBE3}
.pdp{gap:56px}
.gallery .thumbs{justify-content:center;align-items:center;gap:8px;overflow:visible;margin-top:12px;min-height:66px}
.gallery .thumbs a{flex:none;border-radius:var(--radius);transition:width .2s,height .2s,opacity .2s;opacity:.85}
.gallery .thumbs a.cur{opacity:1}
.gallery .thumbs a:hover{opacity:1}
@media (max-width:1024px){ .pdp{gap:24px} }
.gallery .thumbs{overflow-x:auto;justify-content:flex-start;scrollbar-width:thin}
.gallery .thumbs a{opacity:1}
.qty input{width:68px}
/* calculator: the figures and its button appear once an area is entered */
.calc2 .c-out,.calc2 [data-calcadd]{display:none}
.calc2.has .c-out{display:flex}
.calc2.has [data-calcadd]{display:inline-flex}
@media (max-width:720px){ .gswipe{cursor:pointer;-webkit-tap-highlight-color:transparent} }
.gallery .thumbs{justify-content:safe center}   /* centred; "safe" keeps the first one reachable when the row is too long */
.gallery .main.clickable{cursor:pointer;user-select:none}
/* under the quantity (from 2 up): what that many gives, in readable rows */
.qtysum{display:grid;gap:4px;margin:0 0 6px;padding:10px 14px;background:var(--page);border-radius:var(--radius)}
.qtysum[hidden]{display:none}
.qtysum div{display:flex;justify-content:space-between;gap:16px;font-size:15px}
.qtysum span{color:var(--ink-2)}
.qtysum b{font-weight:500;color:var(--ink)}
/* beam calculator */
.beamcalc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px;align-items:end}
.beamcalc .bc-verdict{grid-column:1/-1;margin:0;padding:10px 14px;border-radius:var(--radius);font-size:14.5px}
.beamcalc .bc-verdict.ok{background:#E8F3E6;color:#245532}
.beamcalc .bc-verdict.warn{background:#FBEEE4;color:#8A4A1C}
.beamcalc .c-out,.beamcalc [data-beamadd]{display:none}
.beamcalc.has .c-out{display:flex;grid-column:1/3}
.beamcalc.has [data-beamadd]{display:inline-flex;grid-column:3/5;justify-self:end}
@media (max-width:1024px){ .beamcalc{grid-template-columns:1fr 1fr} .beamcalc.has .c-out,.beamcalc.has [data-beamadd]{grid-column:1/-1;justify-self:start} }
@media (max-width:720px){ .beamcalc{grid-template-columns:1fr} }

/* cookie consent (app/services/tracking.py): a card bottom-left, above the page, clear of the chat bubble */
.consent{position:fixed;left:24px;bottom:24px;z-index:70;max-width:440px;background:var(--bg);border-radius:var(--radius-lg);
  padding:18px 20px;box-shadow:0 12px 36px rgba(27,36,32,.22);font-size:14px;color:var(--ink-2)}
.consent p{margin:0 0 14px}
.consent-btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:720px){ .consent{left:12px;right:12px;bottom:12px;max-width:none} }
/* phones: the hero is as tall as its text (the active slide sits in the flow); less air above section titles */
@media (max-width:720px){
  .hero{min-height:0}
  .hs.is-on{position:relative}
  .hs-txt{height:auto;padding:26px 20px 24px}
  .hs-txt p{margin-bottom:16px}
  .hs-act{padding-top:0;margin-top:0}
  .hs-act .addr{margin-top:2px}
  .section{padding-top:20px}
  .section-head.center{margin:8px 0 22px}
}

/* Promotion price in the brandbook orange, so a sale price stands out (owner, 2026-10-16). */
.badge.sale{background:var(--sale)}
.sidecat a.sale{color:var(--sale)}
.card .price.sale .now{background:var(--sale);color:#fff;padding:1px 8px;border-radius:7px}
.card .price.sale .was{color:var(--muted)}
.buy .priceline .price.sale{background:var(--sale);color:#fff;padding:2px 14px;border-radius:10px}
.buy .pricetag{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--sale);border:1px solid var(--sale);
  font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;letter-spacing:.01em}
.buy .pricetag svg{width:13px;height:13px}
.buy .salerow{display:flex;align-items:center;gap:10px;margin-top:22px;margin-bottom:0}
.buy .salerow + .priceline{margin-top:10px}     /* promo row above the price, roughly matching the VAT line gap below */
.buy .salerow .was{font-size:15px;color:var(--muted);font-weight:400;text-decoration:line-through}

/* phones: quantity steppers big enough to tap (44 px), and room at the page end so the Remis button never sits on
   the last button or line */
@media (max-width:640px){
  .qty button{width:44px;min-height:44px}
  main{padding-bottom:88px}
}

/* own pages (Content → Own pages) */
.prose .ownpic{width:100%;height:auto;border-radius:var(--radius-lg);margin:0 0 18px}
.prose h2{margin:26px 0 10px}
.prose ul{padding-left:22px}
.prose p{max-width:70ch}

/* paying an order online (Klix): the button with a short note under it */
.payonline{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:14px 0}

/* LT / EN switch: footer only (owner 2026-11-03); Lithuanian is the default */
.lang-sw{display:inline-flex;gap:2px}
.lang-sw a,.lang-sw span{padding:1px 5px;border-radius:5px}
footer.site .lang-sw [aria-current]{color:#fff;background:#2E3A33;box-shadow:none}