/* 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. */
@import url('/static/fonts/schibsted.css');
: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:#6F7A73;
  --moss:#2E6B3F; --moss-2:#245532; --leaf:#4fb848; --leaf-bg:#E4F2E3;
  --clay:#A9774A; --clay-bg:#F3E9DE;
  --line:#DCE0DB; --line-2:#C3C9C2;
  --danger:#B23A3A;
  --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-actions .cart .n{position:absolute;left:24px;top:0;background:#E5484D;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{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.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:48px;background:var(--ink);color:#B9C2BC;font-size:14px}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-block:40px 28px}
footer.site h4{color:#fff;font-weight:600;margin-bottom:12px;font-size:14px}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
footer.site a:hover{color:#fff}
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:#7F8B84}

/* 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}
.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}
.docs{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14px}
.docs a{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
.docs a:hover{border-color:var(--moss)}

/* 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:84px 1fr auto auto;gap:16px;padding:16px;border-bottom:1px solid var(--line);align-items:center}
.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:90px}
.line .sum b{color:var(--moss);font-size:17px;font-weight:500}
.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;padding:7px 0;font-size:14px}
.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 .left span:nth-child(2),.topbar .right{display:none}
  .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}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .line{grid-template-columns:64px 1fr;row-gap:8px}
  .line .img{width:64px;height:48px}
  .line .qty,.line .sum{grid-column:2}
  .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(--moss);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(--bg-2)}

/* request form and service pages */
.contactbox{margin-top:26px;padding:20px 22px;background:var(--leaf-bg);border-radius:var(--radius-lg)}
.contactbox h2{margin:0 0 12px}
.cb-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.contactbox p{margin:0;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;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px}
.reqside h2{margin:0 0 6px 12px}
.reqside a.cur{background:var(--leaf-bg)}
.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-2);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.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 .st{font-size:12.5px;color:var(--ink-2);display:flex;gap:6px;align-items:center;margin-top:4px}
.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 */
.brands{gap:28px 44px;align-items:center}
.brands a{display:flex;align-items:center;justify-content:center;width:150px;height:48px}
.brands img{max-width:100%;max-height:100%;width:auto;height:auto}
.brands a:hover img{opacity:.75}

/* 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)}