:root { --ink:#153831; --muted:#52695f; --border:#d9e3db; --paper:#fff; --green:#143e36; --accent:#ddf28e; --nav-height:72px }
body { color:var(--ink); padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom)); background:#f2f6f1 }
header { height:66px; min-height:0; position:sticky; top:0; padding:0 max(16px,calc((100% - 1080px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--green); color:white; box-shadow:none }
header .brand { color:white; font-size:18px; gap:8px }
header .brand small { font-size:8px; letter-spacing:.11em }
header .logo { color:var(--green); background:var(--accent); width:35px; height:35px; font-size:16px }
header .languageControl { margin:0 }
header .languageControl label { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden }
header .languageControl select { min-width:0; width:auto; background:#24554b; color:white; border-color:#487169 }
main, #basket { max-width:1080px; margin:auto; padding:0 16px }
#catalog { padding:18px 0 24px; scroll-margin-top:80px }
.sectionTitle { margin:0 0 8px }
.sectionTitle h2 { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin:0 }
#total { font-size:12px; color:var(--muted); margin:0; background:none; padding:0 }
.catalogOverview { display:block; margin:0; padding:0; background:none; border:0 }
#coverage { display:none }
.viewSwitch { display:flex; gap:4px; margin:0 0 8px }
.viewSwitch button, .displayModes button { min-height:38px; border:1px solid var(--border); background:white; color:var(--ink); font-weight:600; padding:5px 12px; border-radius:8px }
.viewSwitch button.active, .displayModes button[aria-pressed=true] { background:var(--green); color:white; border-color:var(--green) }
.tools { display:flex; flex-direction:column; align-items:stretch; gap:7px; position:sticky; top:66px; z-index:3; padding:8px 0; margin:0 0 8px; background:#f2f6f1 }
.searchRow { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px, 28%); gap:8px }
.tools #search, #categorySelect { width:100%; height:45px; min-width:0; padding:0 10px; border:1px solid #b9cbc0; color:var(--ink); border-radius:9px; background:white; font-size:16px }
#categorySelect { font-size:14px; text-overflow:ellipsis }
.displayModes { display:flex; gap:4px }
.displayModes button { min-height:33px; font-size:12px }
#grid.skuGrid.compactList { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
#grid.skuGrid.compactList .skuCard { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:start; gap:10px; padding:9px; border-radius:10px; box-shadow:none }
#grid.skuGrid.compactList .skuCard .thumb { min-height:0; height:auto !important; width:100%; padding:0; border:1px solid var(--border); border-radius:7px }
#grid.skuGrid.compactList .skuCard .cardBody { padding:0 }
#grid.skuGrid.compactList .skuCard h3 { margin:0 0 2px; font-size:14px; line-height:1.35; min-height:0 }
#grid.skuGrid.compactList .skuSize { margin:0; min-height:0; font-size:12px }
#grid.skuGrid.compactList .skuMeta { margin:4px 0 5px }
.skuCard .skuStepper { max-width:170px; margin:0; height:40px }
.skuCard .skuStepper button { min-width:42px; width:42px; font-size:21px; color:var(--ink); background:#e5efe7 }
.skuCard .skuStepper button:disabled { opacity:.45; cursor:default }
.skuCard .skuStepper input { font-size:16px; color:var(--ink); font-weight:700; padding:0 }
.skuCard.selectedSku { border-color:#86a997; background:#fbfff6 }
.skuCard .skuMeta strong { overflow-wrap:anywhere }
.appNav { position:fixed; bottom:0; left:0; right:0; z-index:8; display:flex; justify-content:center; gap:8px; padding:9px 16px calc(9px + env(safe-area-inset-bottom)); background:var(--green); color:white }
.appNav button { width:min(48%, 240px); min-height:47px; border:1px solid #47756a; border-radius:9px; color:white; background:transparent; font-weight:700; font-size:15px }
.appNav button[aria-current=page] { color:var(--ink); background:var(--accent); border-color:var(--accent) }
.appNav b { margin-left:7px; display:inline-block; min-width:23px; padding:2px 5px; border-radius:12px; color:var(--ink); background:white }
#basket { width:100%; padding-top:16px; padding-bottom:20px }
#basket .modalHead { padding:0 0 10px; background:none; border:0 }
#basket .modalHead .dialogLanguage { display:none }
#basket .basketBody { padding:0 }
#basket .cartSummary { position:sticky; top:66px; z-index:2; padding:12px; border-radius:8px; background:#e0ebdf; margin:0 0 8px }
#basket .cartItem { padding:9px; border:1px solid var(--border); background:white; border-radius:10px; margin-bottom:8px }
#basket .cartItem h4 { margin:0; font-size:14px }
#basket .cartItem p { margin:4px 0; font-size:12px }
#basket .cartItem label { margin:7px 0 0 }
#basket .cartItem input { display:inline-block; margin:0 4px; width:76px; font-size:16px }
#checkoutButton { width:100%; justify-content:center; margin:6px 0 }
#customerForm { scroll-margin-top:122px; padding:12px; border-radius:10px; background:white }
#customerForm input, #customerForm textarea { font-size:16px }
#toast { bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 8px) }
footer { max-width:1080px; margin:auto }
@media(max-width:700px) {
  #grid.skuGrid.compactList { grid-template-columns:minmax(0,1fr) }
  header { padding:0 12px }
  main, #basket { padding-inline:12px }
  .viewSwitch button { padding-inline:7px; flex:1; white-space:normal }
  .sectionTitle h2 > span[data-i18n] { font-size:24px }
  #grid.skuGrid:not(.compactList) .skuStepper button { min-width:34px; width:34px }
  #grid.skuGrid:not(.compactList) .skuStepper { max-width:none }
}