/* ============================================================
   Bungala.lv — prezentreklāma. Design system.
   Tokens mirror the prototype exactly.
   ============================================================ */
:root{
  --bg:#ffffff; --text:#2b2b2b; --muted:#5a5a57; --muted-2:#595956;
  --border:#e3e3e1; --border-2:#6b6b67; --border-3:#ececea; --panel:#f6f6f5;
  --accent:#a6c302; --accent-hover:#9ab500; --success:#a6c302; --olive:#a6c302;
  --dark:#1e1e1e; --heading:#2b2b2b;
  --radius:6px; --radius-lg:8px; --radius-xl:10px; --maxw:1120px; --pad:32px;
  --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:var(--font-display);
  --fs-micro:12px;  --lh-micro:18px;
  --fs-small:13px;  --lh-small:20px;
  --fs-body:14px;   --lh-body:22px;
  --fs-lead:16px;   --lh-lead:26px;
  --fs-h4:19px;     --lh-h4:26px;
  --fs-h3:24px;     --lh-h3:32px;
  --fs-h2:32px;     --lh-h2:40px;
  --fs-h1:40px;     --lh-h1:48px;
  --ink:#2b2b2b; --muted:#5a5a57; --placeholder:#6b6b67;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased;}
a{color:var(--text);text-decoration:none;}
a:hover{color:var(--dark);}
img{max-width:100%;display:block;}
h1,h2,h3,h4,p{margin:0;}
input,select,textarea,button{font-family:inherit;}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1;}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.visually-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@keyframes menuFade{from{opacity:0}to{opacity:1}}

.btn{display:inline-block;background:var(--accent);border:1px solid var(--accent);color:#1e1e1e;
  font-size:16px;line-height:26px;font-weight:400;padding:12px 24px;border-radius:var(--radius);
  cursor:pointer;transition:background 150ms,border-color 150ms;text-align:center;}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#1e1e1e;}
.btn-outline{background:#fff;border:1px solid var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--border-2);color:var(--text);background:#fff;}
.btn-sm{font-size:14px;line-height:22px;padding:8px 16px;}
.link-underline{font-size:14px;line-height:22px;font-weight:400;color:var(--text);
  border-bottom:1px solid var(--border);padding-bottom:2px;transition:border-color 150ms;}
.link-underline:hover{border-color:var(--border-2);}
.eyebrow{font-size:13px;line-height:20px;font-weight:500;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--olive);margin:0;}

.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border);}
.header-top{display:flex;align-items:center;gap:16px;min-height:68px;}
.brand{display:flex;align-items:center;flex-shrink:0;}
.brand img{height:32px;width:auto;border-radius:0;}
.header-spacer{flex:1;}
.header-links{display:flex;gap:2px;align-items:center;}
.header-links a{padding:8px 9px;font-size:13px;line-height:20px;font-weight:400;color:var(--text);
  border-radius:4px;white-space:nowrap;transition:background 150ms;}
.header-links a:hover{background:var(--panel);color:var(--dark);}
.header-links a.active{color:var(--dark);}
.header-search{display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;width:230px;}
.header-search input{background:none;border:none;color:var(--text);font-size:14px;line-height:22px;
  outline:none;flex:1;padding:0;}
.nav-bar{border-top:1px solid var(--border);}
.nav-row{display:flex;gap:0;justify-content:flex-start;min-height:40px;align-items:center;
  flex-wrap:wrap;position:relative;}
.nav-item{height:40px;display:flex;align-items:center;}
.nav-item>a{display:flex;align-items:center;gap:4px;padding:8px 7px;font-size:13px;line-height:20px;
  font-weight:400;color:var(--text);border-radius:4px;white-space:nowrap;transition:background 150ms;}
.nav-item>a:hover{background:var(--panel);color:var(--dark);}
.nav-item .chev{transition:transform 150ms;}
.nav-item.open .chev{transform:rotate(180deg);}
.mega{position:absolute;z-index:50;top:40px;left:0;display:none;background:#fff;border:1px solid var(--border);
  border-top:2px solid var(--accent);border-radius:0 0 4px 4px;box-shadow:0 8px 24px rgba(18,18,18,0.08);
  animation:menuFade 160ms ease-out;}
.mega-narrow{min-width:232px;padding:8px;flex-direction:column;}
.mega-wide{width:760px;max-width:calc(100vw - 64px);padding:16px;
  column-count:3;column-gap:24px;}
.nav-item.open .mega-narrow{display:flex;}
.nav-item.open .mega-wide{display:block;}
.mega a{display:block;break-inside:avoid;padding:8px 12px;font-size:13px;line-height:20px;
  font-weight:400;color:var(--muted);border-radius:4px;transition:background 150ms;}
.mega a:hover{background:var(--panel);color:var(--text);}
.menu-overlay{position:fixed;inset:0;background:rgba(18,18,18,0.16);z-index:90;
  pointer-events:none;animation:menuFade 180ms ease-out;display:none;}
.menu-overlay.show{display:block;}
.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 10px;font-size:19px;cursor:pointer;color:var(--text);line-height:1;}

.section{border-bottom:1px solid var(--border);}
.section-head{display:flex;flex-direction:column;gap:8px;}
.section-head.center{align-items:center;text-align:center;}
.section-head .title-lg{font-size:24px;line-height:32px;font-weight:400;color:var(--text);max-width:560px;text-wrap:pretty;}
.section-split{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;}

.hero{border-bottom:1px solid var(--border);}
.hero-inner{padding:32px var(--pad) 48px;}
.hero-box{height:440px;position:relative;background:var(--panel);overflow:hidden;}
.hero-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:16px;padding:48px 56px;background:linear-gradient(90deg,rgba(255,255,255,0.92) 0%,rgba(255,255,255,0.75) 45%,rgba(255,255,255,0.15) 100%);}
.hero-overlay .over{font-size:19px;line-height:26px;color:var(--muted);}
.hero-overlay h1{font-size:40px;line-height:48px;font-weight:500;letter-spacing:-0.02em;
  color:var(--text);max-width:560px;text-wrap:pretty;}
.hero-overlay .btn{align-self:flex-start;margin-top:16px;}

.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;}
.step{border-top:1px solid var(--border);padding-top:24px;display:flex;flex-direction:column;gap:8px;}
.step .num{font-size:13px;line-height:20px;font-weight:500;color:var(--olive);}
.step h3{font-size:19px;line-height:26px;font-weight:400;color:var(--text);}
.step p{font-size:14px;line-height:22px;color:var(--muted);text-wrap:pretty;}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;}
.cat-tile{display:block;position:relative;aspect-ratio:3/4;
  overflow:hidden;color:var(--text);background:var(--panel);}
.cat-tile img{width:100%;height:100%;object-fit:cover;}
.cat-tile .lbl{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;background:#fff;
  border:1px solid var(--border);border-radius:4px;padding:8px 12px;font-size:14px;line-height:22px;
  font-weight:400;color:var(--text);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;
  text-overflow:ellipsis;}

.values{display:grid;grid-template-columns:repeat(4,1fr) 1.4fr;gap:32px;align-items:center;}
.value{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.value svg{color:var(--accent);}
.value .lbl{font-size:14px;line-height:22px;font-weight:400;color:var(--text);text-wrap:pretty;
  max-width:180px;min-height:40px;display:flex;align-items:flex-start;justify-content:center;}
.values-note{display:flex;flex-direction:column;gap:16px;border-left:1px solid var(--border);
  padding-left:32px;align-self:stretch;justify-content:center;}
.values-note p{font-size:16px;line-height:26px;color:var(--muted);text-wrap:pretty;}

.prod-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;}
.prod-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.pcard{display:flex;flex-direction:column;color:var(--text);border:none;
  overflow:hidden;}
.pcard-flat{border:none;border-radius:0;}
.pcard-img{aspect-ratio:1/1;position:relative;background:#fff;overflow:hidden;border-bottom:1px solid var(--border);}
.pcard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px;}
.pcard-body{padding:16px 16px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pcard-flat .pcard-body{padding:20px 0 0;}
.pcard .ptype{margin:0 0 4px;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--muted);}
.pcard .pname{font-size:12px;line-height:18px;color:var(--text);text-wrap:pretty;}
.pcard .swatches{display:flex;gap:8px;padding:8px 0;align-items:center;}
.swatch{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid var(--border);}
.pcard .colornote{font-size:13px;line-height:20px;color:var(--muted);margin-left:4px;}
.pcard .prow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.pcard .price{font-size:13px;line-height:20px;font-weight:500;color:var(--text);}
.pcard .code{font-size:12px;line-height:18px;color:var(--muted);}
.pcard .ask{margin-top:auto;display:block;text-align:center;background:var(--accent);
  border:1px solid var(--accent);color:#1e1e1e;font-size:13px;line-height:20px;font-weight:400;
  padding:8px 12px;border-radius:var(--radius);transition:background 150ms;}
.pcard .ask:hover{background:var(--accent-hover);color:#1e1e1e;}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--panel);color:var(--border-2);font-size:13px;line-height:20px;font-weight:400;
  text-align:center;padding:16px;text-transform:uppercase;letter-spacing:0.04em;}

.crumb{display:flex;gap:8px;font-size:13px;line-height:20px;color:var(--muted);flex-wrap:wrap;}
.crumb a{color:var(--muted);}
.crumb a:hover{color:var(--muted-2);}
.crumb .cur{color:var(--text);}

.color-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:8px;}
.color-filter .lbl{font-size:13px;line-height:20px;font-weight:400;color:var(--text);}
.swatch-btns{display:flex;gap:8px;align-items:center;}
.cbtn{width:24px;height:24px;border-radius:50%;cursor:pointer;border:1px solid var(--border);
  outline:none;outline-offset:2px;padding:0;}
.cbtn.active{border-color:var(--dark);outline:2px solid var(--accent);}

/* Product photos are inset so there is always white between the product and the frame.
   The catalogue card has had this since the CALI report (.pcard-img, 12px); without it
   a supplier file trimmed flush to its bounding box - 2,037 of 6,950 first photos are -
   renders edge to edge and reads as cropped, which is exactly what the client reported. */
.pd-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start;}
.pd-main{aspect-ratio:1/1;position:relative;background:#fff;border:1px solid var(--border);
  overflow:hidden;cursor:zoom-in;}
.pd-main img{width:100%;height:100%;object-fit:contain;padding:12px;}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px;}
.pd-thumb{aspect-ratio:1/1;position:relative;background:#fff;border:1px solid var(--border);cursor:pointer;
  overflow:hidden;}
.pd-thumb img{width:100%;height:100%;object-fit:contain;padding:6px;}
.pd-info{display:flex;flex-direction:column;gap:12px;}
.pd-info h1{font-size:16px;line-height:22px;font-weight:500;text-transform:uppercase;color:var(--text);text-wrap:pretty;}
.pd-art{font-size:12px;line-height:18px;color:var(--muted);}
.pd-desc{font-size:12px;line-height:18px;color:var(--muted);text-wrap:pretty;}
.pd-specs{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:12px 0;}
.pd-spec{display:flex;gap:8px;font-size:12px;line-height:18px;}
.pd-spec .k{color:var(--muted);width:140px;flex-shrink:0;}
.pd-spec .v{color:var(--text);font-weight:400;}
.pd-note{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:12px;display:flex;flex-direction:column;gap:4px;}
.pd-note .t{font-size:12px;line-height:18px;font-weight:500;color:var(--text);}
.pd-note p{font-size:12px;line-height:18px;color:var(--muted);text-wrap:pretty;}
.pd-cta{display:flex;gap:10px;flex-wrap:wrap;}
.pd-cta .btn{font-size:14px;line-height:22px;padding:10px 18px;}
.pd-colors{display:flex;flex-direction:column;gap:8px;}
.pd-colors-lbl{font-size:12px;line-height:18px;color:var(--muted);}
.pd-colors-lbl [data-color-name]{color:var(--text);font-weight:500;}
.pd-colors-row{display:flex;gap:8px;flex-wrap:wrap;}
.pd-cswatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:1px solid var(--border);
  outline:none;outline-offset:2px;padding:0;transition:outline-color 150ms;}
.pd-cswatch.active{outline:2px solid var(--dark);}

.form-section{border-bottom:1px solid var(--border);}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;align-items:start;}
.form-intro{display:flex;flex-direction:column;gap:16px;}
.form-intro .lead{font-size:24px;line-height:32px;font-weight:400;color:var(--text);text-wrap:pretty;}
.form-intro p{font-size:14px;line-height:22px;color:var(--muted);text-wrap:pretty;}
.q-form{display:flex;flex-direction:column;gap:16px;}
.q-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.q-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:20px;
  font-weight:400;color:var(--text);}
.q-form input,.q-form select,.q-form textarea{border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 12px;font-size:16px;line-height:26px;color:var(--text);outline-color:var(--accent);background:#fff;}
.q-form textarea{resize:vertical;}
.q-form .full{grid-column:1 / -1;}
.q-form .filedrop{border:1px dashed var(--muted);border-radius:var(--radius);padding:16px;font-weight:400;
  font-size:14px;line-height:22px;color:var(--muted);cursor:pointer;text-align:center;transition:border-color 150ms;}
.q-form .filedrop:hover{border-color:var(--border-2);}
.q-form .filedrop input[type=file]{display:none;}
.form-ok{border:1px solid var(--accent);border-radius:var(--radius);padding:16px;font-size:16px;
  line-height:26px;color:var(--success);background:#fff;}
.on-panel{background:var(--panel);}

.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;}
.faq-item{border-top:1px solid var(--border);}
.faq-item:last-of-type{border-bottom:1px solid var(--border);}
.faq-q{width:100%;background:none;border:none;padding:20px 0;display:flex;justify-content:space-between;
  align-items:center;gap:16px;cursor:pointer;text-align:left;}
.faq-q span{font-size:16px;line-height:26px;font-weight:500;color:var(--text);}
.faq-q svg{flex-shrink:0;transition:transform 150ms;color:var(--accent);}
.faq-item.open .faq-q svg{transform:rotate(180deg);}
.faq-a{padding:0 0 20px;font-size:14px;line-height:22px;color:var(--muted);text-wrap:pretty;
  max-width:640px;display:none;}
.faq-item.open .faq-a{display:block;}

.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;}
.contact-card{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);padding-top:24px;}
.contact-card .k{font-size:13px;line-height:20px;font-weight:500;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--muted);}
.contact-card .big{font-size:19px;line-height:26px;font-weight:400;color:var(--text);}
.contact-card a.big:hover{color:var(--success);}
.contact-card .sub{font-size:14px;line-height:22px;color:var(--muted);}
.contact-card .links{display:flex;flex-direction:column;gap:4px;}
.contact-card .links a{font-size:16px;line-height:26px;font-weight:400;color:var(--text);}
.contact-card .links a:hover{color:var(--success);}

.cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px;}
.cover{display:flex;flex-direction:column;color:var(--text);}
.cover-img{aspect-ratio:3/4;position:relative;background:var(--panel);border:1px solid var(--border);
  overflow:hidden;}
.cover-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cover-body{padding:20px 0 0;display:flex;flex-direction:column;gap:8px;}
.cover-body h2{font-size:16px;line-height:26px;font-weight:500;color:var(--text);}
.cover-body .note{font-size:14px;line-height:22px;color:var(--muted);}
.cover-body .go{margin-top:4px;font-size:14px;line-height:22px;font-weight:400;color:var(--success);}
.note-band{background:var(--panel);border-bottom:1px solid var(--border);}
.note-band .inner{display:flex;flex-direction:column;gap:8px;}
.note-band p{font-size:16px;line-height:26px;color:var(--text);max-width:640px;text-wrap:pretty;}

.site-footer{background:var(--dark);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:96px var(--pad) 48px;}
.footer-col{display:flex;flex-direction:column;gap:12px;}
.footer-brand{gap:16px;}
/* The footer logo is its own white-wordmark asset. It must NOT be filtered: brightness(0)
   crushes every colour to black before invert(1) lifts it to white, which killed the three
   brand dots along with the ink. Colour can't be selectively inverted in CSS — it needs a
   second asset. */
.footer-brand img{width:180px;height:auto;}
.footer-brand p{font-size:14px;line-height:22px;color:rgba(255,255,255,0.72);max-width:280px;text-wrap:pretty;}
.footer-col h2{font-size:13px;line-height:20px;font-weight:500;letter-spacing:0.08em;
  text-transform:uppercase;color:rgba(255,255,255,0.72);}
.footer-col a{font-size:14px;line-height:22px;color:#fff;}
.footer-col a:hover{color:rgba(255,255,255,0.85);}
.footer-social{display:flex;gap:16px;}
.footer-bar{border-top:1px solid rgba(255,255,255,0.14);}
.footer-bar .inner{padding:24px var(--pad);font-size:13px;line-height:20px;color:rgba(255,255,255,0.72);}

.chat{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;
  align-items:flex-end;gap:12px;}
.chat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;
  width:260px;display:none;flex-direction:column;gap:8px;}
.chat.open .chat-card{display:flex;}
.chat-card .t{font-size:14px;line-height:22px;font-weight:500;color:var(--text);}
.chat-card p{font-size:14px;line-height:22px;color:var(--muted);}
.chat-card a{font-size:14px;line-height:22px;font-weight:400;color:var(--success);}
.chat-row{display:flex;align-items:center;gap:12px;}
.chat-tag{position:relative;background:#fff;border:1px solid var(--border);border-radius:12px 12px 2px 12px;
  padding:8px 14px;font-size:14px;line-height:22px;font-weight:400;color:var(--text);cursor:pointer;
  transition:border-color 150ms;}
.chat-tag:hover{border-color:#cfcfcc;}
.chat-tag:after{content:'';position:absolute;right:-6px;top:50%;width:9px;height:9px;background:#fff;
  border-right:1px solid var(--border);border-top:1px solid var(--border);transform:translateY(-50%) rotate(45deg);}
.chat-btn{width:56px;height:56px;border-radius:50%;background:var(--accent);border:1px solid var(--accent);
  color:#1e1e1e;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 150ms;}
.chat-btn:hover{background:var(--accent-hover);}

.err{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:96px 32px;}
.err-inner{display:flex;flex-direction:column;gap:16px;align-items:center;max-width:480px;}
.err-inner .code{font-size:64px;line-height:1;font-weight:500;color:var(--olive);}
.err-inner h1{font-size:24px;line-height:32px;font-weight:500;color:var(--text);}
.err-inner p{font-size:16px;line-height:26px;color:var(--muted);}

.py-64{padding-top:64px;padding-bottom:64px;}
.py-96{padding-top:96px;padding-bottom:96px;}
.py-72{padding-top:64px;padding-bottom:64px;}
.pt-64{padding-top:64px;}
.stack-48{display:flex;flex-direction:column;gap:48px;}
.stack-16{display:flex;flex-direction:column;gap:16px;}

@media (max-width:1000px){
  .header-search{width:180px;}
  .values{grid-template-columns:repeat(2,1fr);}
  .values-note{grid-column:1 / -1;border-left:none;border-top:1px solid var(--border);
    padding-left:0;padding-top:24px;}
  .prod-grid-4{grid-template-columns:repeat(2,1fr);}
  .pd-grid,.form-grid{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:820px){
  :root{--pad:20px;}
  .header-links,.header-search{display:none;}
  .nav-toggle{display:inline-flex;align-items:center;}
  .nav-bar{display:none;}
  .nav-bar.open{display:block;}
  .nav-row{flex-direction:column;align-items:stretch;padding-top:8px;padding-bottom:8px;}
  .nav-item{height:auto;flex-direction:column;align-items:stretch;}
  .nav-item>a{justify-content:space-between;}
  .mega{position:static;box-shadow:none;border:none;border-top:none;width:auto;
    padding:0 0 8px 12px;grid-template-columns:1fr;animation:none;}
  .nav-item.open .mega-narrow,.nav-item.open .mega-wide{display:block;}
  .mega-wide{width:auto;}
  .hero-overlay{padding:24px;background:linear-gradient(180deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.92) 100%);}
  .hero-overlay h1{font-size:32px;line-height:40px;}
  .hero-box{height:auto;min-height:360px;}
}
@media (max-width:560px){
  .prod-grid-4{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .values{grid-template-columns:1fr;}
  .q-form .fields{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}

input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);}

.usp-bar{background:var(--dark);}
.usp-bar .usp-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:16px;
  justify-content:center;flex-wrap:nowrap;align-items:center;min-height:34px;}
.usp{display:flex;align-items:center;gap:8px;font-size:12px;line-height:18px;font-weight:400;
  color:rgba(255,255,255,0.82);padding:8px 0;white-space:nowrap;}
.usp .usp-icon{display:flex;flex-shrink:0;}
.usp .usp-icon svg{display:block;}

.prod-grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}

@keyframes clientsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{display:flex;gap:24px;width:max-content;animation:clientsMarquee 45s linear infinite;}
.marquee-mask:hover .marquee-track{animation-play-state:paused;}

.lb{position:fixed;inset:0;z-index:300;background:rgba(18,18,18,0.92);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:32px;}
.lb.open{display:flex;}
.lb-close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.35);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;}
.lb-stage{display:flex;align-items:center;gap:16px;width:100%;max-width:820px;}
.lb-nav{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.35);color:#fff;font-size:24px;line-height:1;cursor:pointer;}
.lb-frame{flex:1;position:relative;aspect-ratio:1/1;max-height:64vh;background:#fff;overflow:hidden;}
.lb-frame img{width:100%;height:100%;object-fit:contain;padding:12px;}
.lb-strip{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.lb-strip button{width:64px;height:64px;overflow:hidden;background:#fff;
  border:2px solid transparent;cursor:pointer;padding:0;}
.lb-strip button.active{border-color:var(--accent);}
.lb-strip img{width:100%;height:100%;object-fit:contain;padding:4px;}

@media (max-width:1000px){
  .prod-grid-5{grid-template-columns:repeat(3,1fr);}
  .r-2col{grid-template-columns:1fr!important;gap:40px!important;}
  .r-cats{grid-template-columns:repeat(3,1fr)!important;}
  .r-tech{grid-template-columns:repeat(2,1fr)!important;}
  .r-prod4{grid-template-columns:repeat(2,1fr)!important;}
  .r-banners{grid-template-rows:auto!important;}
}
@media (max-width:640px){
  .prod-grid-5{grid-template-columns:repeat(2,1fr);}
  .r-cats{grid-template-columns:repeat(2,1fr)!important;}
  .r-tech{grid-template-columns:1fr!important;}
  .r-prod4{grid-template-columns:repeat(2,1fr)!important;}
  .r-banners{grid-template-columns:1fr!important;}
}

/* 5 per row, same column width + gutter as the catalogue's .prod-grid-5 */
.sim-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
.simcard{border:1px solid var(--border);overflow:hidden;
  display:flex;flex-direction:column;color:var(--text);}
.simcard .simcard-img{aspect-ratio:1/1;position:relative;overflow:hidden;background:#fff;}
/* contain, not cover: catalogue photos are tall portraits and cover crops them (matches .pcard-img) */
.simcard .simcard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px;}
.simcard .simcard-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.simcard h3{margin:0;font-size:14px;line-height:22px;font-weight:400;text-transform:uppercase;
  color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:40px;}
.simcard .code{font-size:13px;line-height:20px;color:var(--muted);}
.simcard .go{margin-top:auto;display:block;text-align:center;border:1px solid var(--border);
  color:var(--text);font-size:14px;line-height:22px;font-weight:400;padding:8px 16px;
  border-radius:var(--radius);transition:border-color 150ms;}
.simcard:hover .go{border-color:var(--border-2);}
@media (max-width:1000px){.sim-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.sim-grid{grid-template-columns:repeat(2,1fr);}}

.mega a:has(strong){display:none;}

.root-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.root-cat{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--border);
  border-radius:var(--radius-lg);background:#fff;color:var(--text);transition:border-color 150ms;}
.root-cat:hover{border-color:var(--border-2);}
.root-cat .name{font-size:16px;line-height:26px;font-weight:500;color:var(--text);}
.root-cat .sub{font-size:13px;line-height:20px;color:var(--muted);text-wrap:pretty;}
.root-cat .go{margin-top:auto;padding-top:4px;font-size:14px;line-height:22px;font-weight:400;color:var(--olive);}

@media (max-width:640px){
  .feat-row .feat-ov{width:100%!important;padding:0 20px!important;
    background:linear-gradient(90deg,rgba(255,255,255,0.96) 55%,rgba(255,255,255,0.72) 100%)!important;}
  .feat-row h3{font-size:19px!important;line-height:24px!important;}
}

.nav-extra{display:none;}
@media (max-width:820px){
  .nav-extra{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border);
    margin-top:8px;padding-top:8px;}
  .nav-extra a{padding:8px 12px;font-size:13px;line-height:20px;font-weight:400;
    color:var(--text);border-radius:4px;}
  .nav-extra a:hover,.nav-extra a.active{background:var(--panel);color:var(--dark);}
  .nav-extra-search{display:flex;align-items:center;gap:8px;background:var(--panel);
    border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;margin-bottom:6px;}
  .nav-extra-search input{background:none;border:none;color:var(--text);font-size:14px;
    line-height:20px;outline:none;flex:1;padding:0;width:100%;}
}

.eyebrow--muted,.form-intro .eyebrow{color:var(--muted);letter-spacing:0.08em;}
.form-intro .eyebrow.on-home{color:var(--olive);letter-spacing:0.06em;}

.hero2-box{position:relative;background:var(--panel);overflow:hidden;min-height:420px;
  display:flex;align-items:center;justify-content:flex-end;}
.hero2-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero2-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--border-2);font-size:13px;text-transform:uppercase;letter-spacing:0.06em;}
.hero2-card{position:relative;width:min(660px,calc(100% - 96px));background:#f7f7f5;
  padding:40px 44px;display:flex;flex-direction:column;gap:20px;margin-right:48px;}
.hero2-h1{margin:0;font-size:24px;line-height:32px;font-weight:500;color:#2b2b2b;text-wrap:pretty;}
.hero2-h2{margin:0;font-size:24px;line-height:32px;font-weight:500;color:#2b2b2b;text-wrap:pretty;}
.hero2-lead{margin:0;font-size:16px;line-height:26px;color:#6e6e6b;text-wrap:pretty;}

.news2-grid,.info2-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.news2-panel,.info2-panel{position:relative;overflow:hidden;background:var(--panel);color:var(--text);
  display:flex;min-height:180px;}
.news2-img,.info2-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.info2-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--border-2);font-size:13px;text-transform:uppercase;letter-spacing:0.06em;}
.news2-body{position:relative;flex:1;padding:28px 32px;display:flex;flex-direction:column;gap:12px;
  justify-content:center;}
.news2-img ~ .news2-body::before{content:'';position:absolute;
  inset:0;background:linear-gradient(90deg,rgba(255,255,255,0.94) 0%,rgba(255,255,255,0.80) 55%,
  rgba(255,255,255,0.40) 100%);}
.news2-body>*{position:relative;}
.news2-title{margin:0;font-size:24px;line-height:32px;font-weight:500;color:#2b2b2b;text-wrap:pretty;}
.news2-text{margin:0;font-size:16px;line-height:26px;color:#2b2b2b;text-wrap:pretty;}
a.news2-panel:hover{color:var(--text);}
a.news2-panel:hover .news2-title{color:#000;}

.info2-panel--text{background:#fff;border:1px solid var(--border);}
.info2-text{position:relative;padding:28px 32px;font-size:16px;line-height:26px;color:#2b2b2b;
  display:flex;flex-direction:column;gap:16px;text-wrap:pretty;}
.info2-text p{margin:0;}

@media (max-width:1000px){
  .news2-grid,.info2-grid{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .hero2-box{display:flex;flex-direction:column;min-height:0;}
  .hero2-img{position:relative;inset:auto;height:220px;}
  .hero2-ph{position:relative;inset:auto;height:180px;}
  .hero2-card{width:100%;padding:24px 20px;margin-right:0;}
  .hero2-h1,.hero2-h2{font-size:24px;line-height:32px;}
  .news2-body,.info2-text{padding:20px;}
  .news2-title{font-size:24px;line-height:32px;}
}

.kontakti-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:start;}
/* 16/10 is the source photo's own ratio (665x426): nothing is cropped, and it leaves far
   less dead space beside the intro text than a 4/3 box did. */
.kontakti-img{position:relative;aspect-ratio:16/10;background:var(--panel);overflow:hidden;}
.kontakti-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media (max-width:820px){.kontakti-head{grid-template-columns:1fr;gap:24px;}}

.about-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px;align-items:start;}
.about-img{position:relative;aspect-ratio:4/3;background:#ececea;overflow:hidden;}
.about-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media (max-width:820px){.about-head{grid-template-columns:1fr;gap:24px;}}

h1,h2,h3,h4,.eyebrow,.btn,.link-underline,.nav-item>a,.header-links a,.nav-extra a,
.mega a,.usp,.pcard .ptype,.pcard .price,.pcard .code,.pcard .ask,.crumb,.footer-col h2,
.footer-col a,.contact-card .k,.contact-card .big,.pd-spec .k,.pd-spec .v,.pd-art,
.cover-body h2,.cover-body .go,.simcard h3,.simcard .code,.simcard .go,.root-cat .name,
.root-cat .go,.step .num,.chat-tag,.chat-card .t,.q-form label,.faq-q span,.colornote,
.hero2-h1,.hero2-h2,.news2-title,
.err-inner .code,.err-inner h1{font-family:var(--font-display);}

.hero2-lead,.news2-text,.info2-text,.pd-desc,.form-intro p,.faq-a,.note-band p,
.values-note p,.step p,.contact-card .sub,.cover-body .note,.root-cat .sub,
.pd-note p,.chat-card p,.footer-brand p,blockquote p,.prose,.prose p,
.section-head .title-lg{font-family:var(--font-body);}

.hero2-lead,.info2-text,.form-intro p,.faq-a{font-size:16px;line-height:26px;}

.ph{color:var(--placeholder);}

.usp-bar .usp-inner{flex-wrap:wrap;row-gap:0;}
/* clip, NOT hidden. overflow-x:hidden makes html/body a SCROLL CONTAINER, and a
   position:sticky descendant then sticks to that container instead of the viewport — which
   silently disabled the sticky .site-header at every breakpoint. overflow:clip contains the
   same overflow (the -9999px form honeypot) without creating a scroll container, so sticky
   keeps working. Never swap this back to hidden. */
html,body{overflow-x:clip;}

/* ── USP strip on phones (client request, 2026-08-18) ────────────────────────────────────────
   Seven messages cannot fit a 390px row, and the global `.usp-inner{flex-wrap:wrap}` above would
   stack them into ~7 lines — about 200px of a STICKY header, i.e. it would swallow the viewport.
   A manually swipeable row was tried first and rejected: a 32px strip is far too small a target
   for anyone to discover a sideways swipe.
   So below 768px the strip becomes a ROTATING SLIDER — one message at a time, centred, in a fixed
   32px band. This is one of the two patterns production stores actually use for a thin multi-message
   bar (the other is a marquee); 220.lv runs a marquee, Gymshark / National Pen / Vistaprint simply
   show one short static message. Rotating keeps all seven of her messages AND costs one row.
   No DOM or JS change: the seven items are absolutely stacked in the same 32px band and their
   opacity is cycled with staggered animation-delays. Desktop is untouched — every rule is scoped
   inside the media query.
   MAINTENANCE: the timing assumes SEVEN items (7 × 3.5s = 24.5s). If a usp block is added or
   removed in templates/_header, update --usp-cycle and the nth-child delays below to match, or the
   new item will sit on top of the first one. ── */
@media (max-width:767px){
  .usp-bar .usp-inner{
    position:relative;
    display:block;
    flex-wrap:nowrap;
    padding:0 16px;
    min-height:32px;
    overflow:hidden;
  }
  .usp-bar .usp-inner > .usp{
    position:absolute;
    inset:0;
    justify-content:center;
    padding:0;
    font-size:12px;
    opacity:0;
    animation:uspCycle 24.5s linear infinite;
  }
  .usp-bar .usp-inner > .usp:nth-child(1){animation-delay:0s;}
  .usp-bar .usp-inner > .usp:nth-child(2){animation-delay:3.5s;}
  .usp-bar .usp-inner > .usp:nth-child(3){animation-delay:7s;}
  .usp-bar .usp-inner > .usp:nth-child(4){animation-delay:10.5s;}
  .usp-bar .usp-inner > .usp:nth-child(5){animation-delay:14s;}
  .usp-bar .usp-inner > .usp:nth-child(6){animation-delay:17.5s;}
  .usp-bar .usp-inner > .usp:nth-child(7){animation-delay:21s;}
}
/* 24.5s cycle: fade in by 0.4s, hold to 3.1s, out by 3.5s, then wait out the other six. */
@keyframes uspCycle{
  0%     {opacity:0;transform:translateY(3px);}
  1.6%   {opacity:1;transform:translateY(0);}
  12.7%  {opacity:1;transform:translateY(0);}
  14.29% {opacity:0;transform:translateY(-3px);}
  100%   {opacity:0;transform:translateY(-3px);}
}
/* No motion requested: stop cycling and show them all as a static wrapped list. Costs extra
   height, which is the right trade for someone who has asked the OS for no animation. */
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .usp-bar .usp-inner{display:flex;flex-wrap:wrap;justify-content:center;row-gap:0;column-gap:16px;overflow:visible;}
  .usp-bar .usp-inner > .usp{position:static;inset:auto;animation:none;opacity:1;padding:6px 0;}
}

/* ============================================================
   2026 banner refresh (client artwork, 2026-08-27)
   ------------------------------------------------------------
   The client's new banners carry their own headline in the
   artwork, so the sections that used to draw a text card over
   the image now run in text_mode="image": the copy stays in the
   DOM for SEO/screen readers (.visually-hidden) and the panel
   is sized to the artwork's own aspect ratio so nothing is
   cropped. Narrow viewports crop from the LEFT, because every
   one of these banners sets its text on the left.
   ============================================================ */

/* --- hero: artwork carries the headline --- */
.hero2--image .hero2-box{min-height:0;aspect-ratio:5/2;}
.hero2--image .hero2-img{position:absolute;inset:0;height:100%;}
@media (max-width:820px){
  .hero2--image .hero2-box{aspect-ratio:16/9;}
  .hero2--image .hero2-img{position:absolute;inset:0;height:100%;object-position:left center;}
}

/* --- news panels: artwork carries the text --- */
.news2--image .news2-panel{min-height:0;aspect-ratio:8/3;}
@media (max-width:1000px){
  .news2--image .news2-panel{aspect-ratio:5/2;}
  .news2--image .news2-img{object-position:left center;}
}
@media (max-width:640px){
  .news2--image .news2-panel{aspect-ratio:16/9;}
}

/* --- info panel: keep the left-set headline in frame --- */
.info2-panel--img .info2-img{object-position:left center;}

/* ============================================================
   home: collage banner rows (replaces the .feat-row overlay)
   ------------------------------------------------------------
   The old rows laid a white gradient over the left 60% of the
   image. The 2026 banners are edge-to-edge collages with no
   empty space to write on, so the heading moved out of the
   picture. .featb--stacked puts it above a full-width banner;
   .featb--beside puts it in a column to its left.
   ============================================================ */
.featb-list{display:flex;flex-direction:column;gap:48px;}
.featb-row{display:block;color:var(--text);}
.featb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:16px;}
.featb-row h3{margin:0;font-size:24px;line-height:32px;font-weight:500;color:var(--text);
  text-wrap:pretty;}
.featb-sub{display:block;margin-top:4px;font-size:14px;line-height:22px;color:var(--muted);
  text-wrap:pretty;}
.featb-cta{flex-shrink:0;font-size:14px;line-height:22px;color:var(--olive);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color 150ms;}
.featb-row:hover .featb-cta{border-bottom-color:var(--olive);}
.featb-media{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:16/3;}
.featb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.featb--beside .featb-row{display:grid;grid-template-columns:minmax(200px,1fr) 2.6fr;
  gap:32px;align-items:center;}
.featb--beside .featb-head{display:block;margin:0;}
.featb--beside .featb-cta{display:block;margin-top:12px;}

@media (max-width:1000px){
  .featb-list{gap:40px;}
  .featb-media{aspect-ratio:3/1;}
  .featb--beside .featb-row{grid-template-columns:1fr;gap:16px;}
  .featb--beside .featb-cta{margin-top:8px;}
}
@media (max-width:640px){
  .featb-row h3{font-size:19px;line-height:26px;}
  .featb-media{aspect-ratio:2/1;}
}

/* external nav item (MOB katalogs) — a peer of the category items, so it takes
   .nav-item>a wholesale; only the trailing glyph differs from their chevron. */
.nav-item--ext>a{color:var(--text);}
.nav-item--ext .ext{flex:none;}

/* ------------------------------------------------------------
   .featb--overlay — the heading moves INTO the banner, over a
   left-to-right white fade. Needs the artwork's left third to be
   calm. Under 760px the banner is only ~120px tall, so the text
   drops back out above it (.featb-head is first in the DOM, so
   that needs no markup change).
   ============================================================ */
.featb-scrim{display:none;}
@media (min-width:760px){
  .featb--overlay .featb-row{position:relative;}
  .featb--overlay .featb-scrim{display:block;position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0.94) 26%,rgba(255,255,255,0) 60%);}
  .featb--overlay .featb-head{position:absolute;inset:0;z-index:2;margin:0;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    gap:0;flex-wrap:nowrap;padding:0 clamp(24px,4vw,48px);max-width:56%;}
  .featb--overlay .featb-row h3{font-size:clamp(22px,2.4vw,30px);line-height:1.25;}
  .featb--overlay .featb-sub{margin-top:6px;}
  .featb--overlay .featb-cta{margin-top:14px;border-bottom-color:var(--olive);}
}

/* ── Catalogue category: the client's curated in-page product groups ──────────────────────
   The old catalogue split every big category into named runs ("POPULĀRĀKĀS TERMOKRŪZES",
   "LIELĀS TERMOPUDELES 600-1500 ML"), best-sellers first, and losing them was the single
   thing she pushed back on hardest. Uppercase because the source labels are inconsistently
   cased ("SAlokāmie LIETUSSARGI") and the legacy page rendered them all caps. */
.grp-head { display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--border);
  padding-bottom:12px;margin-bottom:24px; }
.grp-head h2 { margin:0;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.02em;
  text-transform:uppercase;color:var(--dark);text-wrap:pretty; }
.grp-count { font-size:13px;line-height:20px;color:var(--muted);flex-shrink:0; }
@media (max-width:640px) { .grp-head h2{ font-size:14px;line-height:21px; } }

/* ── Catalogue colour filter ──────────────────────────────────────────────────────────────
   Real filter, rendered from a per-category colour index (see site.js). The swatch needs a
   visible ring when active AND a border of its own, or the white/silver dots vanish against
   the page. */
.color-filter { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px; }
.color-filter .lbl { font-size:13px;line-height:20px;color:var(--muted);flex-shrink:0; }
.color-filter .swatch-btns { display:flex;gap:8px;flex-wrap:wrap; }
.color-filter .cbtn { width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,0.18);
  padding:0;cursor:pointer;outline-offset:2px;transition:transform 120ms,box-shadow 120ms; }
.color-filter .cbtn:hover { transform:scale(1.12); }
.color-filter .cbtn.active { box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent,#a6c302); }
.color-filter [data-clear-filter] { background:none;border:none;font-size:13px;line-height:20px;
  color:var(--muted);cursor:pointer;text-decoration:underline;padding:0; }
@media (max-width:640px){ .color-filter .cbtn{ width:28px;height:28px; } }

/* ── Kontakti: rekvizīti ──────────────────────────────────────────────────────────────────
   Invoice detail, not a call to action. A tinted strip with small type, so it reads as a
   footnote to the contact block above rather than repeating it as a second card row. */
.rekviziti { padding:0 0 8px; }
.rekviziti .container { max-width:1120px;margin:0 auto;padding:0 32px 40px; }
.rekviziti-box { background:var(--panel);border:1px solid var(--border);border-radius:var(--radius,4px);
  padding:20px 24px;display:flex;flex-direction:column;gap:12px; }
.rekviziti-box h2 { margin:0;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--muted); }
.rekviziti-box dl { margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px 28px; }
.rekviziti-box dl > div { display:flex;flex-direction:column;gap:1px;min-width:0; }
.rekviziti-box dt { font-size:12px;line-height:18px;color:var(--muted); }
.rekviziti-box dd { margin:0;font-size:14px;line-height:21px;color:var(--text);overflow-wrap:anywhere; }
@media (max-width:640px){ .rekviziti .container{ padding:0 20px 32px; } }

/* The contact bubble links straight to WhatsApp, so it wears WhatsApp's colour rather than the
   brand accent — the destination should be readable before you tap it. */
a.chat-btn { background:#25D366;border-color:#25D366;color:#fff;text-decoration:none; }
a.chat-btn:hover { background:#1EBE5A;border-color:#1EBE5A; }
a.chat-tag { text-decoration:none;color:var(--text);display:inline-block; }