/* moved from HTML inline styles (fallback) */
:root{color-scheme:light dark;}
    html,body{margin:0;padding:0;}
    body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; overflow-x:hidden;}
    /* Fallback layout so the site stays usable even if the external CSS doesn't load */
    .tool{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
    @media (max-width:980px){.tool{grid-template-columns:1fr;}}
    .viewer-frame{position:relative;height:520px;min-height:320px;border:1px solid rgba(17,24,39,.16);border-radius:18px;overflow:hidden;}
    .viewer-frame canvas{width:100%;height:100%;display:block;}
    .viewerOverlay{position:absolute;inset:0;display:grid;place-items:center;padding:18px;text-align:center;pointer-events:none;}
    .viewerOverlay .box{max-width:52ch;border:1px solid rgba(17,24,39,.16);border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.75);}
    [data-theme="dark"] .viewerOverlay .box{background:rgba(10,10,12,.72);border-color:rgba(255,255,255,.14);}
    .drawer{position:fixed;top:0;right:0;width:min(440px,96vw);max-width:100vw;height:100vh;transform:translateX(110%);z-index:220;overflow:hidden;}
    .drawer.open{transform:translateX(0);}
    .drawer-body{overflow:auto;max-height:calc(100vh - 120px);}

:root{color-scheme: light dark;}

:root{
  --bg:#ffffff;
  --bg2:#f6f7fb;
  --panel:#ffffff;
  --panel2:#fbfcff;
  --text:#0f172a;
  --muted: rgba(15,23,42,.70);
  --line: rgba(15,23,42,.12);
  --shadow: 0 18px 60px rgba(2,6,23,.10);
  --shadow2: 0 10px 30px rgba(2,6,23,.08);
  --radius: 22px;
  --radius2: 16px;
  --accent:#b9922e;      /* premium brass */
  --accent2:#f0d48c;
  --focus: rgba(185,146,46,.35);
  --good:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;
  --viewer-bg: radial-gradient(700px 340px at 50% 18%, rgba(185,146,46,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.28));
}

html[data-theme="dark"]{
  --bg:#05060a;
  --bg2:#0b0d14;
  --panel:#0d0f17;
  --panel2:#0f121c;
  --text:#e5e7eb;
  --muted: rgba(229,231,235,.74);
  --line: rgba(229,231,235,.14);
  --shadow: 0 24px 80px rgba(0,0,0,.60);
  --shadow2: 0 14px 44px rgba(0,0,0,.50);
  --focus: rgba(240,212,140,.35);
  --viewer-bg: radial-gradient(700px 340px at 50% 18%, rgba(185,146,46,.22), transparent 60%),
    linear-gradient(180deg, rgba(12,14,22,.92), rgba(12,14,22,.58));
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 650px at 18% 0%, rgba(185,146,46,.10), transparent 58%),
    radial-gradient(900px 650px at 85% 10%, rgba(15,23,42,.06), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  line-height: 1.55;
  overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:14px}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.tiny{font-size:12px}
.muted{color:var(--muted)}

kbd{
  font: inherit;
  font-weight: 900;
  padding: 2px 6px;
  border:1px solid var(--line);
  border-radius: 8px;
  background: var(--panel2);
}

.topbar{
  position:sticky; top:0; z-index:100;
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
html[data-theme="dark"] .topbar{
  background: rgba(13,15,23,.72);
}
.topbar-inner{
  padding:10px 0;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}

.chip{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(185,146,46,.38);
  background: rgba(185,146,46,.10);
  box-shadow: var(--shadow2);
}
.chip{ cursor:pointer; }
button.chip{ appearance:none; -webkit-appearance:none; border:1px solid rgba(185,146,46,.38); background: rgba(185,146,46,.10); color: inherit; font: inherit; line-height: 1.1; }
.chip:focus-visible{ outline: 2px solid rgba(185,146,46,.65); outline-offset: 2px; }

/* Shop mode switch */
.section-head .shopHeader{ flex: 1 1 100%; }
.shopHeader{ margin-top: 6px; }
.shopModes{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
.shopModes .chip{ user-select:none; }
.shopModes .chip[aria-selected="true"]{ background: rgba(185,146,46,.20); border-color: rgba(185,146,46,.65); }
html[data-theme="dark"] .shopModes .chip[aria-selected="true"]{ background: rgba(185,146,46,.14); }

/* Shop entry tiles (quote vs ready projects) */
.shopEntryGrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width: 860px){ .shopEntryGrid{ grid-template-columns:1fr; } }
.shopEntryCard{ width:100%; text-align:left; padding:16px; border:1px solid var(--line); background:rgba(255,255,255,.72); box-shadow:var(--shadow2); border-radius:18px; cursor:pointer; }
html[data-theme="dark"] .shopEntryCard{ background:rgba(13,15,23,.55); }
.shopEntryCard:hover{ transform: translateY(-1px); }
.shopEntryTop{ display:flex; gap:12px; align-items:flex-start; }
.shopEntryIcon{ width:44px; height:44px; display:grid; place-items:center; border-radius:14px; border:1px solid var(--line); background:rgba(185,146,46,.10); font-size:20px; flex: 0 0 auto; }
html[data-theme="dark"] .shopEntryIcon{ background:rgba(185,146,46,.08); }
.shopEntryCard h3{ margin:0 0 4px; font-size:16px; line-height:1.2; }
.shopEntryCard p{ margin:0; }
.shopEntryCTA{ margin-top:12px; display:flex; justify-content:flex-end; }
.pulse{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px rgba(185,146,46,.20);}
.topbar-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

.header{
  position:sticky; top:0; z-index:100;
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
html[data-theme="dark"] .header{
  background: rgba(13,15,23,.68);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0;
}

.brand{display:flex; align-items:center; text-decoration:none; gap:12px}
.brand-logo{height:56px; width:auto}
.brand-logo.dark{display:none}
html[data-theme="dark"] .brand-logo.light{display:none}
html[data-theme="dark"] .brand-logo.dark{display:block}

.nav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.nav a{
  text-decoration:none;
  color: var(--muted);
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 850;
  font-size: 13px;
  letter-spacing: .01em;
  display:inline-flex;
  align-items:center;
  line-height: 1;
}

/* Header dropdown groups (Cennik i sklep / Generatory 3D / Więcej) */
.navDD{ position:relative; display:inline-flex; align-items:center; }
.navDDBtn{
  appearance:none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding:8px 10px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 13px;
  letter-spacing: .01em;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  line-height: 1;
}
.navDDBtn:hover{ color:var(--text); border-color:var(--line); background: rgba(15,23,42,.04); }
html[data-theme="dark"] .navDDBtn:hover{ background: rgba(229,231,235,.06); }
.navDD.open .navDDBtn{ color:var(--text); border-color:var(--line); background: rgba(15,23,42,.04); }
html[data-theme="dark"] .navDD.open .navDDBtn{ background: rgba(229,231,235,.06); }
/* Chevrons as CSS (prevents weird fallback glyphs like "<" on some devices) */
.navDDBtn .chev{
  width: 12px;
  height: 12px;
  display:inline-block;
  font-size: 0; /* hide text glyph */
  opacity: .8;
}
.navDDBtn .chev::before{
  content:"";
  display:block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(1px) rotate(45deg);
  transition: transform .15s ease;
}
.navDD.open .navDDBtn .chev::before{ transform: translateY(1px) rotate(-135deg); }

/* Ensure dropdown button label typography matches other header buttons */
.navDDBtn > span{ font: inherit; letter-spacing: inherit; }

.ddMenu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  max-width: 340px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow2);
  padding: 8px;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .12s ease, transform .12s ease;
}
html[data-theme="dark"] .ddMenu{ background: rgba(13,15,23,.88); }
.navDD.open .ddMenu{ opacity:1; pointer-events:auto; transform: translateY(0); }
.ddMenu a{
  display:block;
  text-decoration:none;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 850;
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}
.ddMenu a:hover{ background: rgba(15,23,42,.06); }
html[data-theme="dark"] .ddMenu a:hover{ background: rgba(229,231,235,.08); }

/* ===== Settings dropdown (Header) ===== */
.settingsDD{ position:relative; }
.settingsDD .ddMenu{ left:auto; right:0; min-width: 280px; }
.settingsDD .navDDBtn{ padding:8px 12px; }
.settingsDD .gear{ font-size: 13px; opacity:.85; }
.settingsDD .settingsLabel{ font-weight: 900; }

/* Mobile: keep settings dropdown fully on-screen (settings button is on the left) */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .settingsDD .ddMenu{
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: calc(var(--bp-header-h, 64px) + 10px) !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: calc(100dvh - (var(--bp-header-h, 64px) + 28px));
    overflow: auto;
  }
}

/* Dropdown buttons in settings menu must wrap on long translations */
.settingsMenu .btn.small{ white-space: normal; line-height: 1.15; }

.ddMenu .ddSection{ padding: 6px 6px 2px; }
.ddMenu .ddLabel{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 6px 6px;
}
.ddMenu .ddDivider{
  height:1px;
  background: var(--line);
  opacity:.7;
  margin: 6px 8px;
}

/* Language chips inside dropdown */
.settingsMenu .lang{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 4px 8px;
}
.settingsMenu .lang a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 44px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
  text-decoration:none;
}
html[data-theme="dark"] .settingsMenu .lang a{ background: rgba(13,15,23,.40); }
.settingsMenu .lang a[aria-current="true"]{
  border-color: rgba(185,146,46,.55);
  background: linear-gradient(180deg, rgba(185,146,46,.22), rgba(185,146,46,.10));
}

/* Buttons inside dropdown */
.settingsMenu .btn.small{ width:100%; justify-content:center; }
.settingsMenu .themebtn{ justify-content:flex-start; width:100%; }

.settingsMenu .modeSwitch{
  display:flex;
  gap: 10px;
  padding: 2px 4px 10px;
}
.settingsMenu .modeSwitch .btn.small{ width:auto; flex:1; }
.modeSwitch .btn.small[disabled]{
  opacity: .75;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
}
.modeSwitch .btn.small.active{
  border-color: rgba(185,146,46,.55);
  background: linear-gradient(180deg, rgba(185,146,46,.22), rgba(185,146,46,.10));
}
.nav a:hover{
  color:var(--text);
  border-color:var(--line);
  background: rgba(15,23,42,.04);
}
html[data-theme="dark"] .nav a:hover{ background: rgba(229,231,235,.06); }

@media (max-width: 980px), (hover: none) and (pointer: coarse){ .nav{display:none} }

.btn{
  appearance:none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform .10s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
html[data-theme="dark"] .btn{ background: rgba(13,15,23,.40); }

.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.btn:focus{outline:3px solid var(--focus); outline-offset:2px}
.btn.primary{
  border-color: rgba(185,146,46,.55);
  background: linear-gradient(180deg, rgba(185,146,46,.22), rgba(185,146,46,.10));
}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px; border-radius:12px; font-weight:900; font-size:13px}

.iconbtn{
  width:42px;height:42px;border-radius:14px;border:1px solid var(--line);
  background: rgba(255,255,255,.55);
  display:grid;place-items:center;cursor:pointer;
  transition: transform .10s ease, box-shadow .15s ease;
}
html[data-theme="dark"] .iconbtn{ background: rgba(13,15,23,.40); }
.iconbtn:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.iconbtn:focus{outline:3px solid var(--focus); outline-offset:2px}
.sun{display:none}
html[data-theme="dark"] .sun{display:inline}
html[data-theme="dark"] .moon{display:none}

.badge{
  min-width:22px;height:22px;display:inline-grid;place-items:center;padding:0 8px;border-radius:999px;
  background: rgba(185,146,46,.14);
  border: 1px solid rgba(185,146,46,.40);
  font-size: 12px;font-weight: 900;
}

.lang{
  display:inline-flex; gap:6px; align-items:center;
  border:1px solid var(--line);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 6px 8px;
}
html[data-theme="dark"] .lang{ background: rgba(13,15,23,.40); }
.lang a{
  text-decoration:none;
  font-weight:900;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 12px;
  border:1px solid transparent;
}
.lang a[aria-current="page"]{
  color:var(--text);
  border-color: rgba(185,146,46,.45);
  background: rgba(185,146,46,.12);
}
.lang a:hover{color:var(--text); border-color:var(--line);}

.hero{padding:34px 0 18px}
.hero-grid{display:grid;grid-template-columns: 1.05fr .95fr;gap:16px;align-items:stretch;}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .hero-grid{grid-template-columns:1fr} }

.hero-copy{
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.76);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .hero-copy{ background: rgba(13,15,23,.55); }

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  color: var(--muted);font-weight:900;font-size: 12px;letter-spacing: .08em;text-transform: uppercase;
}
.hero-copy h1{margin: 12px 0 10px;font-size: clamp(32px, 4.4vw, 54px);line-height: 1.05;letter-spacing:-0.02em;}
.lead{margin:0 0 16px;color:var(--muted);font-size: clamp(15px, 2vw, 18px);}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom: 14px}

.trust{display:grid;grid-template-columns: repeat(3,1fr);gap:10px;margin-top: 6px;}
@media (max-width: 640px){ .trust{grid-template-columns:1fr} }
.trust-item{
  padding:12px;border-radius:16px;border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.30));
}
html[data-theme="dark"] .trust-item{
  background: linear-gradient(180deg, rgba(13,15,23,.50), rgba(13,15,23,.34));
}
.trust-item b{display:block;font-size: 15px}
.trust-item span{display:block;color:var(--muted);font-size: 12px;margin-top:2px}

.hero-art{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 10px;
}
html[data-theme="dark"] .hero-art{ background: rgba(13,15,23,.55); }

.section{padding: 36px 0}
.section.alt{background: rgba(15,23,42,.02);}
html[data-theme="dark"] .section.alt{ background: rgba(229,231,235,.03); }

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom: 14px;}
.section-head h2{margin:0;font-size: 28px;letter-spacing:-0.01em}
.section-head p{margin:0;color:var(--muted);max-width: 72ch}

.panel{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.76);
  box-shadow: var(--shadow);
  padding: 16px;
}
html[data-theme="dark"] .panel{ background: rgba(13,15,23,.55); }

.cards{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .cards{grid-template-columns:1fr} }

.card{
  padding: 18px;border-radius: var(--radius);border: 1px solid var(--line);
  background: rgba(255,255,255,.74);
  box-shadow: var(--shadow2);
  transition: transform .12s ease, box-shadow .15s ease;
}
html[data-theme="dark"] .card{ background: rgba(13,15,23,.50); }
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.icon{
  width:46px;height:46px;border-radius: 16px;display:grid; place-items:center;
  border: 1px solid rgba(185,146,46,.40);
  background: rgba(185,146,46,.12);
  color: var(--text);
}
.icon img{width:28px;height:28px}
html[data-theme="dark"] .icon img{filter: invert(1); opacity:.92}
.card h3{margin: 10px 0 8px}
.card p{margin:0;color: var(--muted)}

.shop{display:grid;grid-template-columns: 320px 1fr;gap:14px;align-items:start;}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .shop{grid-template-columns: 1fr} }
.filters{position: sticky; top: 130px}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .filters{position: static} }

.field{display:grid; gap:6px; margin-bottom: 12px}
label{font-weight: 900;font-size: 13px;color: var(--muted)}
input, select, textarea{
  font: inherit;border-radius: 14px;padding: 10px 12px;border: 1px solid var(--line);
  background: transparent;color: var(--text);
}
textarea{resize: vertical}

.hint{
  margin-top:10px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(185,146,46,.35);
  background: rgba(185,146,46,.10);
}
.hint p{margin:6px 0 10px;color:var(--muted)}

.products{display:grid;grid-template-columns: repeat(3, 1fr);gap:14px;}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .products{grid-template-columns:1fr} }

.product{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.74);
  box-shadow: var(--shadow2);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
html[data-theme="dark"] .product{ background: rgba(13,15,23,.50); }

.tag{
  width: fit-content;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  color: var(--muted);
}
html[data-theme="dark"] .tag{
  border-color: rgba(229,231,235,.14);
  background: rgba(229,231,235,.06);
}
.price{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.price b{font-size: 18px}

/* ===== Tools / Upload ===== */
.tool{
  display:grid;
  grid-template-columns: 520px 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .tool{grid-template-columns:1fr} }

.dropzone{
  position:relative;
  border-radius: var(--radius);
  border: 1.5px dashed rgba(185,146,46,.55);
  background: rgba(185,146,46,.09);
  padding: 18px;
  min-height: 150px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
.dropzone::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: var(--radius);
  pointer-events:none;
  background: radial-gradient(600px 220px at 50% 0%, rgba(240,212,140,.20), transparent 60%);
  opacity:.55;
}
.dropzone-inner{position:relative; z-index:1; display:grid; gap:8px; justify-items:center}
.dropzone-title{font-weight: 950; font-size: 16px}
.dropzone-sub{color: var(--muted); font-weight: 800}
.dropzone input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.filemeta{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  color: var(--muted);
}
.filemeta b{color: var(--text)}

/* Advanced settings */
details.advanced{
  margin-top: 12px;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 10px 12px;
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] details.advanced{ background: rgba(13,15,23,.40); }
details.advanced > summary{
  cursor:pointer;
  font-weight: 900;
  color: var(--text);
  list-style:none;
}
details.advanced > summary::-webkit-details-marker{display:none}
details.advanced .controls{margin-top: 12px; display:grid; gap:10px}

/* Viewer */
.viewer-frame{
  width:100%;
  height: 520px;
  min-height: 360px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  overflow:hidden;
  position: relative;
  background: var(--viewer-bg);
}
html[data-theme="dark"] .viewer-frame{
  background: var(--viewer-bg);
}
.viewer-frame canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.viewerOverlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  text-align:center;
  color: var(--muted);
  pointer-events:none;
}
.viewerOverlay .box{
  max-width: 52ch;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.60);
  box-shadow: var(--shadow2);
}
html[data-theme="dark"] .viewerOverlay .box{ background: rgba(13,15,23,.55); }

.viewerBadge{
  position:absolute;
  top: 12px;
  left: 12px;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(185,146,46,.45);
  background: rgba(185,146,46,.12);
  color: var(--text);
}

.statusRow{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.status{
  font-weight: 800;
  color: var(--muted);
}
.status.good{color: var(--good)}
.status.warn{color: var(--warn)}
.status.bad{color: var(--bad)}

.two-cols{grid-template-columns: 1fr 1fr}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .two-cols{grid-template-columns:1fr} }

.links{margin:10px 0 0;padding-left: 18px}
.links a{text-decoration:none;border-bottom:1px dashed rgba(185,146,46,.55)}
.links a:hover{border-bottom-style:solid}

.pills{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--muted);
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] .pill{ background: rgba(13,15,23,.40); }
.pill:hover{color:var(--text); border-color: rgba(185,146,46,.40)}

.footer{border-top: 1px solid var(--line);padding: 26px 0 34px;}
.footer-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom: 14px}
.funding img{width:100%;border-radius:16px;border:1px solid var(--line);margin-top:12px}
.footer-links{display:flex; gap:10px; flex-wrap:wrap}
.footer-links a{color:var(--muted); text-decoration:none; border-bottom:1px dashed rgba(185,146,46,.55)}
.footer-links a:hover{color:var(--text); border-bottom-style:solid}

.backdrop{position:fixed; inset:0;background: rgba(0,0,0,.42);z-index:200;}
.drawer{
  position:fixed;top:0;right:0;left:auto;width:min(420px, 92vw);max-width:92vw;height:100vh;background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index:220;
  transform: translateX(105%);
  transition: transform .18s ease;
  display:flex;flex-direction:column;max-width:100vw;overflow-x:hidden;padding-right: env(safe-area-inset-right);
}
.drawer.open{transform: translateX(0)}
.drawer-head{padding:14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.drawer-body{padding:14px;overflow:auto;display:flex;flex-direction:column;max-width:100vw;overflow-x:hidden;padding-right: env(safe-area-inset-right);gap:12px}
.cart-items{display:grid;gap:10px}
.cart-item{
  border: 1px solid var(--line);
  border-radius:16px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  background: var(--panel2);
}
html[data-theme="dark"] .cart-item{ background: rgba(13,15,23,.44); }
.qty{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.qty button{
  width:30px;height:30px;border-radius:12px;border:1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor:pointer;
}
.cart-summary{border-top:1px solid var(--line);padding-top:10px;margin-top:auto;}
.cart-summary .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

/* Cookie banner */
.cookie{ position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; display:none; }
.cookie-inner{
  max-width: 1200px; margin: 0 auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
html[data-theme="dark"] .cookie-inner{ background: rgba(13,15,23,.78); }
.cookie-inner p{margin:0; color: var(--muted); max-width: 80ch;}
.cookie-actions{display:flex; gap:10px; align-items:center}


/* ======= v3 resilience + layout fixes ======= */
/* Make sure preview areas are always visible even if some styles fail to load */
.viewer-frame{ height: 520px; min-height: 320px; }
.viewer-frame canvas{ width:100%; height:100%; display:block; }

/* Cart drawer: never overflow off-screen */
.drawer{ max-width: 100vw; right:0; }
.drawer.open{ transform: translateX(0) !important; }

/* Prevent horizontal scrolling caused by long content */
body{ overflow-x:hidden; }
.wrap{ max-width: 1200px; }

/* Tool layout: keep 2 columns on desktop, 1 on mobile */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .tool{ grid-template-columns: 1fr !important; }
  .viewer-frame{ height: 420px; }
}

/* Slightly stronger borders in light mode for premium feel */
[data-theme="light"] .viewer-frame{ border-color: rgba(17,24,39,.12); }

/* Lithophane preview: ensure it has a visible background */
#viewerLitho.viewer-frame{ background: var(--viewer-bg); }
.themebtn .sun, .themebtn .moon{
  font-size: 16px;
  line-height: 1;
}
.themebtn #themeLabel{
  font-weight: 950;
  letter-spacing: .01em;
}

.filemeta{gap:10px}
.filemeta > div{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.50);
  border-radius: 14px;
  padding: 8px 10px;
}
html[data-theme="dark"] .filemeta > div{ background: rgba(13,15,23,.38); }

@media (max-width: 520px){
  .statusRow{flex-direction:column; align-items:stretch}
  .statusRow .btn{justify-content:center}
}


/* v5 tweaks */
.themebtn{gap:10px; padding-inline:12px}
#themeLabel{min-width: 120px; text-align:left}

/* ===== BienPrints v6 — contrast & premium controls ===== */
:root{
  --btn-bg: rgba(255,255,255,.92);
  --btn-bg-hover: #ffffff;
  --btn-border: rgba(15,23,42,.18);
  --btn-border-hover: rgba(15,23,42,.26);
  --btn-text: var(--text);
  --btn-disabled: rgba(15,23,42,.38);
  --input-bg: rgba(255,255,255,.92);
  --viewer-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,247,251,.92));
}
html[data-theme="dark"]{
  --btn-bg: rgba(255,255,255,.08);
  --btn-bg-hover: rgba(255,255,255,.12);
  --btn-border: rgba(229,231,235,.18);
  --btn-border-hover: rgba(240,212,140,.35);
  --btn-text: var(--text);
  --btn-disabled: rgba(229,231,235,.42);
  --input-bg: rgba(255,255,255,.06);
  --viewer-bg: linear-gradient(180deg, rgba(13,15,23,.78), rgba(11,13,20,.70));
}

/* Buttons — always visible in both themes */
.btn{
  background: var(--btn-bg) !important;
  border-color: var(--btn-border) !important;
  color: var(--btn-text) !important;
}
.btn:hover{
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-border-hover) !important;
}
.btn:active{ transform: translateY(0) !important; }
.btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}
.btn.primary{
  background: linear-gradient(180deg, rgba(185,146,46,.30), rgba(185,146,46,.14)) !important;
  border-color: rgba(185,146,46,.62) !important;
}
.btn.primary:hover{
  background: linear-gradient(180deg, rgba(185,146,46,.36), rgba(185,146,46,.18)) !important;
  border-color: rgba(240,212,140,.60) !important;
}
.btn.ghost{
  background: transparent !important;
}

/* Icon button */
.iconbtn{
  background: var(--btn-bg) !important;
  border-color: var(--btn-border) !important;
  color: var(--btn-text) !important;
}
.iconbtn:hover{ background: var(--btn-bg-hover) !important; border-color: var(--btn-border-hover) !important; }

/* Inputs */
input, select, textarea{
  background: var(--input-bg) !important;
  border-color: var(--btn-border) !important;
}
input:focus, select:focus, textarea:focus{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* File meta looks like chips (less "table") */
.filemeta{
  gap: 10px !important;
}
.filemeta > div{
  display:inline-flex;
  align-items:baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.60);
}
html[data-theme="dark"] .filemeta > div{
  background: rgba(13,15,23,.44);
}

/* Viewer background stronger contrast */
.viewer-frame{
  background: var(--viewer-bg) !important;
}
.viewerOverlay .box{
  border-color: rgba(185,146,46,.45) !important;
  background: rgba(255,255,255,.72) !important;
}
html[data-theme="dark"] .viewerOverlay .box{
  background: rgba(13,15,23,.70) !important;
}

/* Drawer: ensure everything stays inside */
.drawer{ width: min(420px, 92vw) !important; }
.drawer-body{ overflow: auto !important; }

/* ===== BienPrints v7 — cart / drawer polish ===== */
.backdrop{
  backdrop-filter: blur(8px);
}

.drawer{
  width: min(460px, 94vw) !important;
  background: var(--panel) !important;
}

.drawer-head{
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  z-index: 2;
}
html[data-theme="dark"] .drawer-head{
  background: linear-gradient(180deg, rgba(13,15,23,.92), rgba(13,15,23,.72));
}

.drawer-body{
  padding: 14px;
  gap: 12px;
}

.cart-item{
  grid-template-columns: 1fr auto;
  align-items: start;
  background: rgba(255,255,255,.72) !important;
}
html[data-theme="dark"] .cart-item{
  background: rgba(255,255,255,.06) !important;
}

.cart-item b{
  display:block;
  margin-bottom: 4px;
}
.cart-item .tiny{
  line-height: 1.35;
}

.qty{
  align-items:center;
  gap: 8px;
}
.qty button{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--btn-bg);
}
.qty button:hover{
  border-color: var(--btn-border-hover);
}

.cart-summary{
  background: rgba(255,255,255,.60);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
}
html[data-theme="dark"] .cart-summary{
  background: rgba(255,255,255,.06);
}

.cart-summary .row{
  margin-bottom: 8px;
}
.cart-summary .btn{
  width: 100%;
  justify-content: center;
}

/* ===== v11: cart drawer (robust + premium) ===== */
.drawer{
  width: min(480px, 96vw) !important;
  max-width: 96vw !important;
}
.drawer-head{
  padding: 16px 16px !important;
}
.drawer-body{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.cart-items{ gap: 12px !important; }
.cart-item{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap: 12px !important;
}
.cart-item > div:first-child{ min-width:0; }
.cart-item b{ word-break: break-word; }
.qty{
  flex: 0 0 auto;
}
.qty b{ min-width: 24px; text-align:center; display:inline-block; }

/* ===== v12: drawer/backdrop hardening (fixes "no background" + positioning) ===== */
.backdrop{
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(2,6,23,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="dark"] .backdrop{
  background: rgba(0,0,0,.55);
}
.backdrop[hidden]{ display:none !important; }

.drawer{
  z-index: 220;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .drawer{
  background: var(--panel);
}

html.drawer-open, html.drawer-open body{
  overflow: hidden;
}

/* Keep hint overlay non-blocking */
.viewerOverlay{
  pointer-events:none;
  background: radial-gradient(600px 260px at 50% 25%, rgba(185,146,46,.12), rgba(0,0,0,0) 70%);
}
html[data-theme="dark"] .viewerOverlay{
  background: radial-gradient(600px 260px at 50% 25%, rgba(240,212,140,.10), rgba(0,0,0,0) 70%);
}

/* ===== v15: cart hardening + fallbacks ===== */
.backdrop{
  background: rgba(0,0,0,.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.drawer{
  background: var(--panel, #ffffff);
}
html[data-theme="dark"] .drawer{
  background: var(--panel, #0b0d14);
}
#cartDrawer.open{ transform: translateX(0); }
#backdrop[hidden]{ display: none !important; }
#backdrop{ display:block; }

/* Prevent accidental positioning bugs */
#cartDrawer{
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
}

/* ===== v21: 12-color palette for 3D model ===== */
.colorPalette{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.colorPalette .swatch{
  width:26px;
  height:26px;
  border-radius:10px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  cursor:pointer;
  padding:0;
}
.colorPalette .swatch:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.colorPalette .swatch[aria-pressed="true"]{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ===== v27 layout tweaks ===== */
@media (max-width: 520px){ .brand-logo{height:46px} }
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .header-inner{flex-wrap:wrap}
  .nav{width:100%; justify-content:center}
  .header-actions{width:100%; justify-content:space-between}
}
.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 520px){ .two{grid-template-columns:1fr} }
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-status{
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(185,146,46,.10);
  color: var(--text);
}
.form-status.ok{border-color: rgba(22,163,74,.45); background: rgba(22,163,74,.12);}
.form-status.error{border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10);}


/* ===== v29: premium polish requested ===== */
html, body{ background: var(--bg); }
body::before{
  content:"";
  position:fixed;
  inset:-20vh -20vw;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(600px 420px at 12% 10%, rgba(185,146,46,.18), rgba(185,146,46,0) 60%),
    radial-gradient(520px 380px at 88% 22%, rgba(59,130,246,.12), rgba(59,130,246,0) 62%),
    radial-gradient(520px 420px at 78% 92%, rgba(34,197,94,.10), rgba(34,197,94,0) 65%),
    radial-gradient(640px 520px at 18% 88%, rgba(168,85,247,.10), rgba(168,85,247,0) 60%),
    repeating-linear-gradient(45deg, rgba(15,23,42,.03) 0, rgba(15,23,42,.03) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 12px);
  opacity: .95;
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(640px 460px at 12% 10%, rgba(185,146,46,.22), rgba(185,146,46,0) 60%),
    radial-gradient(520px 380px at 88% 22%, rgba(56,189,248,.10), rgba(56,189,248,0) 62%),
    radial-gradient(520px 420px at 78% 92%, rgba(34,197,94,.08), rgba(34,197,94,0) 65%),
    radial-gradient(640px 520px at 18% 88%, rgba(168,85,247,.08), rgba(168,85,247,0) 60%),
    repeating-linear-gradient(45deg, rgba(229,231,235,.05) 0, rgba(229,231,235,.05) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 12px);
  opacity: .78;
}

/* Section heads: aligned */
.section-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-bottom: 18px;
}
.section-head p{ max-width: 78ch; }

/* Brand: fixed sizing so wordmark never clips */
.brand{ gap:12px; padding:6px 10px; border-radius:16px; flex:0 0 auto;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.brand:hover{ background: rgba(185,146,46,.08); box-shadow: 0 14px 32px rgba(0,0,0,.08); transform: translateY(-1px); }
html[data-theme="dark"] .brand:hover{ background: rgba(185,146,46,.10); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.brand-mark{ width:46px; height:46px; flex:0 0 auto; }
.brand-text{ display:flex; flex-direction:column; min-width: 140px; }
.brand-name{ font-weight:800; letter-spacing:-0.02em; font-size:18px; }
.brand-tagline{ font-size:12px; color: var(--muted); letter-spacing:.02em; }

/* Hero: nicer container */
.hero-art{
  position: relative;
  padding: 18px;
  border: 1px solid rgba(185,146,46,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
}
html[data-theme="dark"] .hero-art{
  border-color: rgba(185,146,46,.24);
  background: linear-gradient(180deg, rgba(13,15,23,.62), rgba(13,15,23,.46));
}
.hero-art-bg{
  position:absolute;
  inset:-20%;
  background: radial-gradient(420px 320px at 40% 28%, rgba(185,146,46,.25), rgba(185,146,46,0) 60%),
              radial-gradient(420px 320px at 70% 70%, rgba(59,130,246,.18), rgba(59,130,246,0) 60%);
  filter: blur(18px);
  opacity:.85;
  pointer-events:none;
}
.hero-art img{ position:relative; z-index:1; }
.hero-art-caption{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:2;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
}
html[data-theme="dark"] .hero-art-caption{ background: rgba(0,0,0,.25); }

/* Buttons + interactive feel */
.btn{ transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; will-change: transform; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 38px rgba(0,0,0,.12); }
.btn:active{ transform: translateY(0px) scale(.99); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.btn.primary{
  background: linear-gradient(180deg, rgba(185,146,46,1), rgba(155,120,26,1));
  border-color: rgba(185,146,46,.55);
}
.btn.primary:hover{ box-shadow: 0 18px 44px rgba(185,146,46,.24); }
html[data-theme="dark"] .btn:hover{ box-shadow: 0 18px 44px rgba(0,0,0,.42); }
.iconbtn{ transition: transform .12s ease, background .12s ease, border-color .12s ease; }
.iconbtn:hover{ transform: scale(1.03); }

/* Resources: styled lists */
.links{ list-style:none; padding:0; margin: 12px 0 0; display:flex; flex-direction:column; gap:10px; }
.links li{ margin:0; }
.links a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
  text-decoration:none;
  color: var(--text);
}
html[data-theme="dark"] .links a{ background: rgba(13,15,23,.42); }
.links a:hover{ border-color: rgba(185,146,46,.35); box-shadow: 0 18px 44px rgba(0,0,0,.10); transform: translateY(-1px); }
.links .link-arrow{ opacity:.65; }

/* Contact: stack to satisfy requested order */
#kontakt .contact-stack{ display:flex; flex-direction:column; gap:14px; }
#kontakt .contact-stack > .panel{ width:100%; }

/* Align upload texts */
.dropzone-inner{ align-items:flex-start; text-align:left; }
.dropzone-title, .dropzone-sub{ text-align:left; }

/* Panel/card subtle lift */
.panel, .card{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.panel:hover, .card:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px rgba(0,0,0,.12); border-color: rgba(185,146,46,.25); }
html[data-theme="dark"] .panel:hover, html[data-theme="dark"] .card:hover{ box-shadow: 0 26px 70px rgba(0,0,0,.50); }


/* ===== v30: hero gallery + contact cards + header fixes ===== */

/* Header: prevent brand clipping */
.header-inner{ align-items:flex-start; }
.brand{ max-width:none; min-width: 260px; }
.brand-text{ max-width: 280px; }
.brand-tagline{ white-space: normal; line-height: 1.15; }

@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .brand{ min-width: auto; }
  .brand-text{ max-width: none; }
}

/* Hero gallery */
.hero-gallery{
  border: 1px solid rgba(185,146,46,.28);
  border-radius: var(--radius2);
  padding: 16px;
  background: rgba(255,255,255,.70);
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .hero-gallery{
  background: rgba(13,15,23,.52);
  border-color: rgba(185,146,46,.20);
}
.hero-gallery::before{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(520px 420px at 30% 20%, rgba(185,146,46,.22), rgba(185,146,46,0) 60%),
              radial-gradient(520px 420px at 70% 80%, rgba(59,130,246,.16), rgba(59,130,246,0) 60%);
  filter: blur(18px);
  opacity:.85;
  pointer-events:none;
}
.hero-gallery-head{ position:relative; z-index:1; margin-bottom: 12px; }
.hg-title{ font-weight: 900; letter-spacing: -0.02em; }
.hg-sub{ color: var(--muted); font-size: 12px; margin-top: 4px; }
.hg-cta{ position:relative; z-index:1; display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap; }

.masonry{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 94px;
  gap: 10px;
}
.shot{ grid-column: span 2; grid-row: span 2; border-radius: 18px; overflow:hidden; border:1px solid var(--line); background: rgba(255,255,255,.55); }
html[data-theme="dark"] .shot{ background: rgba(0,0,0,.22); }
.shot.big{ grid-column: span 4; grid-row: span 4; }
.shot.wide{ grid-column: span 4; grid-row: span 2; }
.shot img{ width:100%; height:100%; object-fit: cover; display:block; transform: scale(1.02); transition: transform .22s ease, filter .22s ease; }
.shot:hover img{ transform: scale(1.06); filter: saturate(1.05) contrast(1.03); }
.shot:hover{ border-color: rgba(185,146,46,.35); box-shadow: 0 22px 60px rgba(0,0,0,.12); transform: translateY(-1px); }

@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .masonry{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 86px; }
  .shot{ grid-column: span 2; grid-row: span 2; }
  .shot.big{ grid-column: span 4; grid-row: span 4; }
  .shot.wide{ grid-column: span 4; grid-row: span 2; }
}
@media (max-width: 520px){
  .masonry{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 92px; }
  .shot{ grid-column: span 2; }
  .shot.big{ grid-row: span 3; }
  .shot.wide{ grid-row: span 2; }
}

/* Contact cards */
.contactCards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .contactCards{ grid-template-columns: 1fr; } }
.contactCard{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
  text-decoration:none;
  color: var(--text);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
html[data-theme="dark"] .contactCard{ background: rgba(13,15,23,.40); }
.contactCard:hover{
  transform: translateY(-2px);
  border-color: rgba(185,146,46,.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
}
.cc-ico{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(185,146,46,.14);
  border: 1px solid rgba(185,146,46,.22);
  font-weight: 900;
}
.cc-title{ font-size: 12px; color: var(--muted); }
.cc-value{ font-weight: 850; margin-top: 3px; line-height: 1.15; }
.cc-link{ font-size: 12px; color: var(--muted); margin-top: 6px; }


/* ===== v32: small fixes ===== */
[hidden]{ display:none !important; }

/* Cart summary: ensure spacing even if flex fails */
#t_total{ padding-right: 10px; }


/* ===== v33: contact textarea full width + richer background ===== */

/* Contact form: textarea full width, button below */
#contactForm textarea{
  width: 100%;
  display: block;
  min-height: 150px;
}
#contactForm .btn.primary{
  display: inline-flex;
  margin-top: 10px;
}

/* Background: subtle dot grid so page isn't "flat" */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(rgba(15,23,42,.07) 1px, rgba(0,0,0,0) 1px);
  background-size: 22px 22px;
  opacity: .32;
  transform: translateZ(0);
}
html[data-theme="dark"] body::after{
  background-image: radial-gradient(rgba(229,231,235,.08) 1px, rgba(0,0,0,0) 1px);
  opacity: .16;
}

/* Cart total spacing (avoid 'Suma:0,00') */
.cart-summary .row{ gap: 12px; }
.cart-summary .row span{ white-space: nowrap; }


/* ===== v34: centered submit + generated background that always shows ===== */

/* Make the background live on <html> to avoid stacking/z-index issues */
html{
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.22), rgba(185,146,46,0) 62%),
    radial-gradient(760px 520px at 86% 18%, rgba(59,130,246,.14), rgba(59,130,246,0) 62%),
    radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.10), rgba(34,197,94,0) 65%),
    url("assets/bg-pattern-light.svg");
  background-attachment: fixed;
  background-size: auto, auto, auto, 800px 800px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
html[data-theme="dark"]{
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.26), rgba(185,146,46,0) 62%),
    radial-gradient(760px 520px at 86% 18%, rgba(56,189,248,.12), rgba(56,189,248,0) 62%),
    radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.08), rgba(34,197,94,0) 65%),
    url("assets/bg-pattern-dark.svg");
  background-attachment: fixed;
  background-size: auto, auto, auto, 800px 800px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

/* Keep body transparent so html background is visible */
body{ background: transparent; }

/* Center the submit button in the contact form */
#contactForm .btn.primary{
  display: flex;
  margin: 12px auto 0;
  justify-content: center;
}

/* Give sections a touch more separation so it feels less flat */
.section{
  position: relative;
}
.section::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,0));
  opacity: .9;
}
html[data-theme="dark"] .section::before{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
  opacity: .6;
}


/* ===== v35: premium background + clean section transitions ===== */

/* Kill full-width overlays/transitions */
.section::before{ display:none !important; }
body::before, body::after{ display:none !important; }

/* Global background: subtle mesh + noise (generated SVG) */
html{
  background-color: var(--bg);
  background-image:
    url("assets/bg-mesh-light.svg");
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: 1600px 1600px;
}
html[data-theme="dark"]{
  background-color: var(--bg);
  background-image:
    url("assets/bg-mesh-dark.svg");
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: 1600px 1600px;
}
body{ background: transparent !important; }

/* Section separation: divider inside content width */
.section + .section .wrap::before{
  content:"";
  display:block;
  height:1px;
  margin: 8px 0 22px;
  background: linear-gradient(90deg, rgba(185,146,46,0), rgba(185,146,46,.28), rgba(185,146,46,0));
  opacity:.9;
}
html[data-theme="dark"] .section + .section .wrap::before{
  background: linear-gradient(90deg, rgba(185,146,46,0), rgba(185,146,46,.18), rgba(185,146,46,0));
  opacity:.8;
}

/* New sections */
.statsbar{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .statsbar{ grid-template-columns: 1fr; } }
.stat{
  display:flex; gap:12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.60);
}
html[data-theme="dark"] .stat{ background: rgba(13,15,23,.44); }
.stat-ico{
  width: 36px; height: 36px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(185,146,46,.14);
  border: 1px solid rgba(185,146,46,.22);
  font-weight: 900;
}
.stat-body b{ display:block; }
.stat-body span{ display:block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.cases{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .cases{ grid-template-columns: 1fr; } }
.case{ overflow:hidden; }
.case-media{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.50);
}
html[data-theme="dark"] .case-media{ background: rgba(0,0,0,.18); }
.case-media img{ width:100%; height: 180px; object-fit: cover; display:block; }
.case-body{ padding-top: 10px; }
.case-meta{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.case-result{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(185,146,46,.10);
}
html[data-theme="dark"] .case-result{ background: rgba(185,146,46,.08); }

.testimonials{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .testimonials{ grid-template-columns: 1fr; } }
.tcard{
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
}
html[data-theme="dark"] .tcard{ background: rgba(13,15,23,.44); }
.stars{ letter-spacing: 2px; color: rgba(185,146,46,.95); font-weight: 900; }
.ttext{ margin-top: 10px; }
.tauthor{ margin-top: 12px; color: var(--muted); font-size: 12px; }


/* Review buttons under testimonials */
.review-cta{ grid-column: 1 / -1; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-top: 2px; }
.review-cta .btn{ width:100%; justify-content:center; }
.review-cta .review-ico{ display:inline-flex; }
.review-cta .review-ico svg{ width:18px; height:18px; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .review-cta{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .review-cta{ grid-template-columns: 1fr; } }

/* Make hero gallery feel less placeholder-y */
.hero-gallery{ background: rgba(255,255,255,.62) !important; }
html[data-theme="dark"] .hero-gallery{ background: rgba(13,15,23,.52) !important; }

/* Lightbox (gallery zoom) */
.lightbox{ position:fixed; inset:0; z-index: 999; display:grid; place-items:center; }
.lightbox[hidden]{ display:none !important; }
.lb-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.58); backdrop-filter: blur(6px); }
.lb-figure{ position:relative; max-width:min(1100px, 94vw); max-height: 86vh; margin:0; border-radius: 22px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background: rgba(10,10,12,.70); box-shadow: 0 40px 120px rgba(0,0,0,.35); }
html[data-theme="light"] .lb-figure{ background: rgba(255,255,255,.92); border-color: rgba(17,24,39,.14); }
.lb-figure img{ width:100%; height:auto; max-height: 78vh; display:block; object-fit:contain; background: transparent; }
.lb-cap{ padding: 10px 14px; font-size: 12px; color: rgba(255,255,255,.82); border-top:1px solid rgba(255,255,255,.10); }
html[data-theme="light"] .lb-cap{ color: rgba(15,23,42,.78); border-top-color: rgba(17,24,39,.10); }
.lb-close{ position:absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,10,12,.55); color:#fff; font-size: 22px; line-height: 1; cursor:pointer; z-index: 2; }
html[data-theme="light"] .lb-close{ border-color: rgba(17,24,39,.14); background: rgba(255,255,255,.82); color: rgba(15,23,42,.90); }
.lb-close:hover{ transform: translateY(-1px); box-shadow: 0 18px 50px rgba(0,0,0,.20); }


/* ===== v36: cohesive premium UI + mobile-first fixes ===== */

/* Palette: neutral + blue accent (more "tech" than gold) */
:root{
  --accent: #2563eb;
  --accent2:#93c5fd;
  --focus: rgba(37,99,235,.28);
}

/* Global background (subtle, neutral) */
.section.alt{ background: transparent !important; }
.section::before{ display:none !important; }
body::before, body::after{ display:none !important; }

html{
  background-color: var(--bg);
  background-image: url("assets/bg-premium-light.svg");
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: 1600px 1600px;
}
html[data-theme="dark"]{
  background-color: var(--bg);
  background-image: url("assets/bg-premium-dark.svg");
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: 1600px 1600px;
}
body{ background: transparent !important; }

/* Rhythm */
.section{ padding: 64px 0 !important; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .section{ padding: 44px 0 !important; }
}

/* Header: sticky premium bar */
.header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .header{
  background: rgba(5,6,10,.62);
}
.header-inner{ align-items:center; }

/* Brand: keep tidy on small screens */
.brand-tagline{ opacity:.78; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .brand-tagline{ display:none; }
  .brand-name{ font-size: 16px; }
  .brand-mark{ width: 42px; height: 42px; }
}

/* Buttons: consistent */
.btn{ border-radius: 14px; }
.btn.primary{
  background: linear-gradient(180deg, rgba(37,99,235,.96), rgba(37,99,235,.84));
  border-color: rgba(37,99,235,.35);
  color:#fff;
}
.btn.primary:hover{ box-shadow: 0 18px 50px rgba(37,99,235,.22); }
html[data-theme="dark"] .btn.primary:hover{ box-shadow: 0 20px 60px rgba(37,99,235,.18); }
.badge{ background: rgba(37,99,235,.14) !important; border-color: rgba(37,99,235,.28) !important; color: var(--text) !important; }
html[data-theme="dark"] .badge{ color: #e5e7eb !important; }

/* Surfaces: unify cards and panels */
.panel, .card, .hero-copy, .hero-gallery, .drawer, .prod, .case, .tcard, .stat{
  backdrop-filter: blur(10px);
}
.panel, .card{
  background: rgba(255,255,255,.78) !important;
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card{
  background: rgba(13,15,23,.58) !important;
}

/* Hero: cleaner */
.hero{ padding-top: 32px !important; }
.hero-copy h1{ letter-spacing: -0.02em; }
.hero-gallery .masonry{ gap: 10px !important; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-gallery .masonry{ grid-template-columns: 1fr 1fr !important; }
  .hero-gallery .shot img{ height: 140px !important; }
}

/* Mobile menu */
.menubtn{ display:none; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .nav{ display:none !important; }
  .menubtn{ display:inline-flex !important; }
  .header-actions > .lang, .header-actions > .themebtn{ display:none !important; }
  .header-actions{ gap: 10px; }
  #openCart{ padding: 10px 12px; }
}
.menuDrawer{ position: fixed; inset: 0; z-index: 120; display:grid; grid-template-columns: 1fr; }
.menuDrawer[hidden]{ display:none !important; }
.menuBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.48); backdrop-filter: blur(6px); }
.menuPanel{
  position: absolute;
  top: 14px; right: 14px; left: 14px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
html[data-theme="dark"] .menuPanel{ background: rgba(13,15,23,.74); }
.menuTop{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.menuTitle{ font-weight: 900; letter-spacing: .02em; }
.menuLinks{ display:grid; padding: 10px; gap: 6px; }
.menuLinks a{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  color: var(--text);
  text-decoration:none;
  font-weight: 800;
}
html[data-theme="dark"] .menuLinks a{ background: rgba(255,255,255,.06); }
.menuLinks a:active{ transform: translateY(1px); }
.menuExtras{ display:grid; gap: 10px; padding: 12px 12px 14px; border-top: 1px solid var(--line); }

/* Mobile: settings accordion inside menu drawer */
.menuSettingsBtn{
  justify-content:space-between;
  width:100%;
  min-width: 0;
  gap: 10px;
  text-align: left;
}
.menuSettingsBtn .gear,
.menuSettingsBtn .chev{ flex: 0 0 auto; }
.menuSettingsBtn .settingsLabelMobile{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.menuSettingsBtn .chev{ font-size: 12px; opacity:.8; transition: transform .15s ease; }
.menuSettingsBtn[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.menuSettingsBody{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.35);
}
html[data-theme="dark"] .menuSettingsBody{ background: rgba(13,15,23,.30); }

.menuSettingsSection{ display:grid; gap: 8px; padding: 6px 4px; }
.menuSettingsSection + .menuSettingsSection{ border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.menuSettingsBody .lang{ display:flex; gap: 8px; flex-wrap:wrap; }
.menuSettingsBody .lang a{ flex: 1 1 44px; text-align:center; }
.menuSettingsBody .modeSwitch{ display:flex; gap: 10px; }
.menuSettingsBody .modeSwitch .btn.small{ flex:1; justify-content:center; }

/* Tools: mobile-first */
.tool{ grid-template-columns: 1fr !important; }
.viewer-frame{ min-height: 340px !important; height: 380px !important; }
@media (min-width: 981px){
  .tool{ grid-template-columns: 520px 1fr !important; }
  .viewer-frame{ min-height: 420px !important; height: 520px !important; }
}

/* 3D touch: prevent page scroll while rotating */
.viewer-frame, .viewer-frame canvas{
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}

/* Contact form button alignment stays centered */
#contactForm .btn.primary{ margin-left:auto; margin-right:auto; }

/* Remove separators that feel "template" */
.section + .section .wrap::before{ display:none !important; }

/* Small spacing fixes */
.cart-summary .row{ gap: 12px !important; }


/* ===== v37 WORLD-CLASS UI OVERRIDES (mobile-first, cohesive) ===== */

:root{
  --accent:#2563eb;
  --accent2:#60a5fa;
  --focus: rgba(37,99,235,.35);
  --viewer-bg: radial-gradient(900px 420px at 50% 16%, rgba(37,99,235,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.38));
}

/* Global background */
html{
  background-color: var(--bg);
  background-image: url("assets/bg-world-light.svg");
  background-attachment: fixed;
  background-size: 1200px 1200px;
  background-repeat: repeat;
}
html[data-theme="dark"]{
  background-color: var(--bg);
  background-image: url("assets/bg-world-dark.svg");
  background-attachment: fixed;
  background-size: 1200px 1200px;
  background-repeat: repeat;
}
body{ background: transparent !important; }

/* Section transitions: clean */
.section{ padding: 84px 0; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .section{ padding: 64px 0; } }
.section + .section .wrap::before{
  content:"";
  display:block;
  height:1px;
  margin: 0 0 26px;
  background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,.26), rgba(37,99,235,0));
  opacity:.9;
}
html[data-theme="dark"] .section + .section .wrap::before{
  background: linear-gradient(90deg, rgba(96,165,250,0), rgba(96,165,250,.18), rgba(96,165,250,0));
  opacity:.85;
}

/* Sticky premium header */
.header{
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(15,23,42,.10);
}
html[data-theme="dark"] .header{
  background: rgba(7,10,18,.70);
  border-bottom: 1px solid rgba(229,231,235,.12);
}
.header-inner{ padding: 12px 0; }

/* Brand scale */
.brand-mark{ width: 34px; height: 34px; }
.brand-name{ font-size: 16px; letter-spacing: .2px; }
.brand-tagline{ font-size: 12px; opacity: .78; }

/* Nav underline */
.nav a{ position:relative; }
.nav a::after{
  content:"";
  position:absolute;
  left: 12px; right: 12px;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,.9), rgba(37,99,235,0));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.nav a:hover::after{ opacity: .9; transform: translateY(0); }

/* Buttons */
.btn{
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }
.btn:active{ transform: translateY(0); }
.btn.primary{
  background: linear-gradient(180deg, rgba(37,99,235,1), rgba(29,78,216,1));
  border-color: rgba(37,99,235,.45);
}
html[data-theme="dark"] .btn.primary{
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.95));
  border-color: rgba(96,165,250,.35);
}
.badge{
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.22);
}
html[data-theme="dark"] .badge{
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.20);
}

/* Mobile header: keep menu + cart visible */
.menubtn{ display:none; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .nav{ display:none !important; }
  .menubtn{ display:inline-flex !important; }
  .header-actions > .lang{ display:none !important; }
  .header-actions > .themebtn{ display:none !important; }
  #openCart{ padding: 10px 12px; }
}

/* Menu drawer */
.menuPanel{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 120px rgba(0,0,0,.28);
}
html[data-theme="light"] .menuPanel{ border-color: rgba(15,23,42,.12); }
.menuLinks a{ border-radius: 14px; }
.menuLinks a:hover{ background: rgba(37,99,235,.10); }

/* Hero and layout on mobile */
.hero{ padding: 72px 0 40px; }
.hero-grid{ gap: 18px; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero{ padding: 46px 0 24px; }
  .hero h1{ font-size: 34px; }
}

/* Consistent surfaces */
.panel, .card, .drawer, .menuPanel, .hero-gallery, .viewer-frame{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .menuPanel,
html[data-theme="dark"] .hero-gallery,
html[data-theme="dark"] .viewer-frame{
  background: rgba(13,16,27,.60);
  border: 1px solid rgba(229,231,235,.12);
}

/* Responsive grids */
.grid.cards, .grid.prods{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px), (hover: none) and (pointer: coarse){ .grid.cards, .grid.prods{ grid-template-columns: 1fr; } }

/* Tools grid (Generatory i narzędzia online) */
.toolsGrid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; }
@media (max-width: 1100px){ .toolsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .toolsGrid{ grid-template-columns: 1fr; } }

a.card.toolCard{ text-decoration:none; color:inherit; }
.toolThumb{ height: 110px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(15,23,42,.10); background: rgba(15,23,42,.03); }
html[data-theme="dark"] .toolThumb{ border-color: rgba(229,231,235,.12); background: rgba(229,231,235,.05); }
.toolThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.toolCard h3{ margin: 12px 0 6px; }
.toolCard .muted{ margin: 0 0 12px; }
.toolCard .toolCTA{ margin-top:auto; display:flex; justify-content:flex-start; }

/* Simple price calculator */
.calcBox{ padding: 16px; }
.calcGrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items:end; }
@media (max-width: 980px){ .calcGrid{ grid-template-columns: 1fr; } }
.calcResult{ display:flex; align-items:center; justify-content:space-between; gap: 14px; margin-top: 14px; flex-wrap:wrap; }

/* New print calculator layout (range + mid + actions) */
.calcPanel .calcResult{ flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.calcPanel .calcResult .pills{ width: 100%; }
.calcPanel .calcResult .pill{ display:flex; flex-direction:column; gap:4px; }
.calcActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; justify-content: flex-end; }
@media (max-width: 980px){ .calcActions{ justify-content: flex-start; } }
.calcPrice{ font-size: 22px; font-weight: 950; letter-spacing: .01em; }

/* Hero gallery: snap on mobile */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-gallery{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch; }
  .hero-gallery .shots{ display:flex !important; gap:12px !important; width:max-content; }
  .hero-gallery .shot{ flex: 0 0 240px; scroll-snap-align:start; }
}

/* Viewer touch */
.viewer-frame, .viewer-frame canvas{ touch-action: none !important; overscroll-behavior: contain !important; }

/* Cart drawer safety */
.drawer{ max-width: min(420px, 92vw); }
.cart-items{ max-height: 48vh; overflow:auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}



/* ===== v38 polish: mobile layout, alignment, premium rhythm ===== */

html, body{ width:100%; overflow-x:hidden; }
img, canvas{ max-width:100%; height:auto; }

/* Bigger logo / brand */
.brand-mark{ width: 44px !important; height: 44px !important; }
.brand-name{ font-size: 18px !important; letter-spacing: .2px; }
.brand-tagline{ font-size: 12px !important; }

/* Header/nav alignment */
.header-inner{ display:flex; align-items:center; gap: 16px; }
.nav{ align-items:center; }
.nav a{ display:flex; align-items:center; height: 40px; padding: 8px 12px; }
.navDDBtn{ height: 40px; padding: 8px 12px; }

/* Theme buttons more compact */
.themebtn{ padding: 10px 12px; }
.themebtn #themeLabel,
.themebtn #themeLabelMobile{ font-weight: 800; letter-spacing: .2px; }

/* Section headings centered (premium) */
.section-head{ text-align:center; }
.section-head p{ margin-left:auto; margin-right:auto; max-width: 76ch; }

/* Ensure background is truly full width (no panel background bleeding) */
.wrap{ width:100%; }

/* Rhythm between blocks inside sections */
.mt28{ margin-top: 40px !important; }

/* Realizacje/case studies: consistent spacing */
.cases{ margin-top: 18px; }
.testimonials{ margin-top: 14px; }

/* Hero gallery: desktop keeps as-is; mobile becomes clean grid (no sideways scroll) */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-gallery{ overflow:hidden !important; }
  .hero-gallery .shots{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    width: 100% !important;
  }
  .hero-gallery .shot{
    flex: unset !important;
    width: auto !important;
  }
  .hero-gallery .shot img{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}
@media (max-width: 420px){
  .hero-gallery .shots{ grid-template-columns: 1fr; }
}

/* Mobile header: nicer balance + extra quick actions row */
.mobileChips{ display:none; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .header-inner{
    display:grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 10px;
    padding: 10px 0;
  }
  .menubtn{ grid-column:1; justify-self:start; }
  .brand{ grid-column:2; justify-self:center; }
  #openCart{ grid-column:3; justify-self:end; }
  /* tighter cart button */
  #openCart #t_cart{ display:none; }
  .badge{ margin-left: 0; }
  .brand-text{ display:none; } /* show only mark + name in compact form */
  .brand-name{ display:block; }
  .brand{ gap: 10px; }
  .brand-mark{ width: 40px !important; height: 40px !important; }
  .brand-name{ font-size: 16px !important; }

  .mobileChips{ display:block; padding: 10px 0 8px; border-top: 1px solid rgba(15,23,42,.08); }
  html[data-theme="dark"] .mobileChips{ border-top-color: rgba(229,231,235,.10); }
  .chips{ display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; }
  .chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.70);
    font-weight: 800;
    font-size: 12px;
    text-decoration:none;
  }
  html[data-theme="dark"] .chip{
    border-color: rgba(229,231,235,.12);
    background: rgba(13,16,27,.60);
  }
  .chip:active{ transform: translateY(0); }
}

/* Viewer file meta alignment */
.filemeta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.60);
}
html[data-theme="dark"] .filemeta{ background: rgba(13,16,27,.44); }
.filemeta > div{ display:flex; gap:8px; align-items:baseline; min-width:0; }
.filemeta b{ width: 78px; flex: 0 0 auto; opacity:.9; }
.filemeta span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .filemeta{ grid-template-columns: 1fr; }
  .filemeta b{ width: 92px; }
}

/* Lithophane controls alignment */
.controls .field.two{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.controls .field.two > div{ min-width:0; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .controls .field.two{ grid-template-columns: 1fr; }
}

/* Contact form: no overlap + email not alone */
#contactForm input, #contactForm select, #contactForm textarea{
  width:100%;
}
#contactForm .two{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  #contactForm .two{ grid-template-columns: 1fr; }
}
#contactForm button.btn.primary{ margin: 14px auto 0; }

/* Contact cards: social links */
.contactCards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .contactCards{ grid-template-columns: 1fr; }
}

/* Footer centered */
.footer-row{
  justify-content:center !important;
  gap: 14px;
  text-align:center;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 12px 14px;
}
.footer .funding{ text-align:center; }
.footer .funding img{ margin: 10px auto 0; max-width: 760px; width: 100%; }


/* v39: fix mobile brand text + contact cards density */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .brand-text{ display:flex !important; }
  .brand-tagline{ display:none !important; }
}
@media (min-width: 980px){
  .contactCards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* v40: contact cards layout */
@media (min-width: 980px){
  .contactCards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 680px) and (max-width: 980px){
  .contactCards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* ===== v41 WORLD polish: mobile centering, non-tiling bg, masonry responsive, litho alignment ===== */

/* Background: no visible tiling */
html{
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
}
html[data-theme="dark"]{
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
}

/* Stronger protection against sideways scroll */
html, body{ overflow-x:hidden; }
.wrap{ padding-left: 20px; padding-right: 20px; }
@media (max-width: 640px){ .wrap{ padding-left: 16px; padding-right: 16px; } }
@media (max-width: 420px){ .wrap{ padding-left: 14px; padding-right: 14px; } }
@media (max-width: 360px){ .wrap{ padding-left: 12px; padding-right: 12px; } }

/* Mobile header: true centered brand, no right shift */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .header-inner{
    position: relative;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 10px 0;
  }
  .menubtn{ order:1; }
  #openCart{ order:3; }
  .brand{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    justify-content:center;
  }
  /* Keep center even when mobile browser applies :hover after tap */
  .brand:hover{ transform: translateX(-50%) translateY(-1px); }
  .brand:active{ transform: translateX(-50%) translateY(0); }
  .brand-text{ display:flex !important; align-items:center; }
  .brand-tagline{ display:none !important; }
  .brand-name{ text-align:center; font-size: 16px !important; }
  .brand-mark{ width: 40px !important; height: 40px !important; }
  /* compact theme label already short */
}

/* Make theme toggle less wide everywhere */
.themebtn{ padding: 10px 10px; }
.themebtn #themeLabel, .themebtn #themeLabelMobile{ min-width: 0; }

/* Nav alignment (desktop) */
@media (min-width: 980px){
  .nav{ display:flex; align-items:center; gap: 10px; }
  .nav a{ height: 42px; padding: 10px 12px; }
}

/* Realizacje gallery masonry: keep desktop style, scale to small widths cleanly */
.masonry{ width: 100%; }
.hero-gallery{ margin: 0 auto; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .masonry{
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 78px;
    gap: 10px;
  }
  .shot{ grid-column: span 2; grid-row: span 2; }
  .shot.big{ grid-column: span 4; grid-row: span 4; }
  .shot.wide{ grid-column: span 4; grid-row: span 2; }
}
@media (max-width: 520px){
  .masonry{ grid-auto-rows: 68px; gap: 10px; }
}
@media (max-width: 420px){
  .masonry{ grid-auto-rows: 60px; gap: 10px; }
}
@media (max-width: 360px){
  .masonry{ grid-auto-rows: 54px; gap: 10px; }
}

/* Shop filters sticky: keep following scroll reliably */
:root{ --headerH: 72px; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){ :root{ --headerH: 60px; } }
.filters{ top: calc(var(--headerH) + 16px) !important; }

/* Lithophane: align upload + dimensions */
.drop{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.drop > div{ flex: 1 1 320px; min-width: 0; }
.filepick{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items:center;
  width: 100%;
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
}
html[data-theme="dark"] .filepick{ background: rgba(13,16,27,.44); }
.filepick input[type="file"]{
  position:absolute;
  width: 1px; height: 1px;
  overflow:hidden; clip: rect(0 0 0 0);
  white-space:nowrap;
  opacity:0;
}
.fp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.30);
  background: rgba(37,99,235,.10);
  font-weight: 900;
  cursor:pointer;
  user-select:none;
}
html[data-theme="dark"] .fp-btn{
  border-color: rgba(96,165,250,.25);
  background: rgba(96,165,250,.14);
}
.fp-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:.9;
}

/* controls grid alignment */
.controls .field.two{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  align-items: end;
}
.controls label{ display:block; margin-bottom: 6px; }
@media (max-width: 640px){
  .controls .field.two{ grid-template-columns: 1fr; }
}

/* Funding banner: full width of section */
.footer .funding img{
  width: 100% !important;
  max-width: none !important;
}

/* Section headings + footer centered on small screens */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .section-head{ text-align:center; }
  .footer-links{ justify-content:center; }
  .footer-row{ justify-content:center !important; }
}

/* Extra tiny breakpoints for “many small screens” */
@media (max-width: 390px){
  .btn{ padding: 11px 12px; }
  .chip{ padding: 9px 11px; }
}
@media (max-width: 320px){
  .brand-name{ font-size: 15px !important; }
  .brand-mark{ width: 36px !important; height: 36px !important; }
}


/* ===== BienPrints Hotfix: sticky header + pinned shop filters + lithophane layout + gallery mobile overflow ===== */

/* Fix nav underline: pseudo-element must be anchored to the link */
.nav a{ position: relative; }

/* Make header reliably follow scroll (pinned) */
.header{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
}
body{ padding-top: var(--headerH, 76px); }

/* Shop filters: JS will pin within #sklep on desktop. Ensure layout can absolutely position. */
#sklep .shop{ position: relative; }
#sklep .panel.filters{ will-change: transform; }

/* Lithophane: keep two inputs per row on phones and stretch inputs to full column width */
.controls input, .controls select{ width:100%; display:block; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .controls .field.two{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 360px){
  .controls .field.two{ gap: 8px !important; }
}

/* Hero gallery: prevent implicit columns (mobile left-shift) and widen small tiles on laptops */
@media (max-width: 1260px){
  .hero-gallery .masonry{ grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-gallery .masonry{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows: 110px !important;
  }
  .hero-gallery .shot{ grid-column: span 1 !important; grid-row: span 1 !important; }
  .hero-gallery .shot.big{ grid-column: span 2 !important; grid-row: span 2 !important; }
  .hero-gallery .shot.wide{ grid-column: span 2 !important; grid-row: span 1 !important; }
}
@media (max-width: 520px){
  .hero-gallery .masonry{ grid-auto-rows: 96px !important; }
}

/* Hard stop any horizontal overflow on mobile */
html, body{ overflow-x: hidden; }
.masonry, .hero-gallery, .wrap{ min-width: 0; }
.hero-gallery img{ width:100%; height:100%; object-fit: cover; display:block; }

/* Hero gallery pager */
.hg-pager{
  margin-top: 10px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}
@media (max-width: 520px){
  .hg-pager{ justify-content: center; }
}

/* Anchor offset for fixed header */
section[id]{ scroll-margin-top: calc(var(--headerH, 76px) + 16px); }

/* Filters wrapper (keeps grid cell stable) */
#sklep .filters-wrap{ min-width:0; }


@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-gallery{
    margin: 0 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: hidden !important;
  }
  .hero-gallery *{
    transform: none !important;
  }
  .hero-gallery .masonry{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    left: 0 !important;
    right: 0 !important;
  }
  .hero-gallery .shot{
    min-width: 0 !important;
  }
}
@media (max-width: 520px){
  .hero-gallery{ padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 390px){
  .hero-gallery{ padding-left: 12px !important; padding-right: 12px !important; }
}


@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-gallery{
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: hidden !important;
  }

  /* Stop any layout drifting caused by transforms/translate on children */
  .hero-gallery-head,
  .hero-gallery .masonry,
  .hero-gallery .hg-pager,
  .hero-gallery .galleryPager{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    translate: none !important;
  }

  /* Ensure grid doesn't get wider than viewport */
  .hero-gallery .masonry{
    padding: 0 !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    place-content: start stretch !important;
  }

  /* Pager alignment */
  .hero-gallery .hg-pager,
  .hero-gallery .galleryPager{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* If any element uses 100vw somewhere, clamp it */
  .hero-gallery-head,
  .hero-gallery .masonry,
  .hero-gallery .hg-pager,
  .hero-gallery .galleryPager{
    max-width: calc(100% - 0px) !important;
  }
}

@media (max-width: 520px){
  .hero-gallery{ padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 390px){
  .hero-gallery{ padding-left: 12px !important; padding-right: 12px !important; }
}


   Fixes left-shift + clipping by:
   - removing default <figure> margins
   - using a simple 2-col mosaic on small screens
   - forcing 100% widths + symmetric padding

@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-gallery{
    padding: 16px !important;
    margin: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .hero-gallery-head,
  .hero-gallery .masonry,
  .hero-gallery .hg-pager,
  .hero-gallery .hg-cta,
  .hero-gallery .galleryPager{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  /* remove UA <figure> margins which can push grid off-screen */
  .hero-gallery figure,
  .hero-gallery .shot{
    margin: 0 !important;
  }

  .hero-gallery .masonry{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows: 150px !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }

  .hero-gallery .shot{ grid-column: span 1 !important; grid-row: span 1 !important; min-width:0 !important; }
  .hero-gallery .shot.big{ grid-column: span 2 !important; grid-row: span 2 !important; }
  .hero-gallery .shot.wide{ grid-column: span 2 !important; grid-row: span 1 !important; }
}

@media (max-width: 520px){
  .hero-gallery{ padding: 14px !important; }
  .hero-gallery .masonry{ grid-auto-rows: 140px !important; }
}

@media (max-width: 390px){
  .hero-gallery{ padding: 12px !important; }
  .hero-gallery .masonry{ grid-auto-rows: 132px !important; }
}



/* 1) Small laptops/desktops: make "shot" tiles wider (avoid thin strips) */
@media (max-width: 1200px) and (min-width: 981px){
  .hero-gallery .masonry{
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 118px !important;
    gap: 10px !important;
  }
  .hero-gallery .shot{ grid-column: span 2 !important; grid-row: span 2 !important; }
  .hero-gallery .shot.big{ grid-column: span 4 !important; grid-row: span 4 !important; }
  .hero-gallery .shot.wide{ grid-column: span 4 !important; grid-row: span 2 !important; }
}

/* 2) Mobile: do NOT visually "merge" hero-copy + hero-gallery (separate cards clearly) */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .wrap.hero-grid{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero-grid{
    gap: 18px !important;
  }
  /* Make cards more opaque so the gap reads as a separation */
  .hero-copy{
    background: rgba(255,255,255,.90) !important;
  }
  html[data-theme="dark"] .hero-copy{
    background: rgba(13,15,23,.78) !important;
  }
  .hero-gallery{
    background: rgba(255,255,255,.86) !important;
  }
  html[data-theme="dark"] .hero-gallery{
    background: rgba(13,15,23,.70) !important;
  }

  /* Keep hero-gallery perfectly centered & unclipped */
  .hero-gallery{
    padding: 16px !important;
    margin: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .hero-gallery-head,
  .hero-gallery .masonry,
  .hero-gallery .hg-pager,
  .hero-gallery .hg-cta,
  .hero-gallery .galleryPager{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .hero-gallery figure,
  .hero-gallery .shot{
    margin: 0 !important; /* remove UA figure margins */
    min-width: 0 !important;
  }

  .hero-gallery .masonry{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows: 150px !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }
  .hero-gallery .shot{ grid-column: span 1 !important; grid-row: span 1 !important; }
  .hero-gallery .shot.big{ grid-column: span 2 !important; grid-row: span 2 !important; }
  .hero-gallery .shot.wide{ grid-column: span 2 !important; grid-row: span 1 !important; }
}

@media (max-width: 520px){
  .wrap.hero-grid{ padding-left: 14px !important; padding-right: 14px !important; }
  .hero-gallery{ padding: 14px !important; }
  .hero-gallery .masonry{ grid-auto-rows: 140px !important; }
}
@media (max-width: 390px){
  .wrap.hero-grid{ padding-left: 12px !important; padding-right: 12px !important; }
  .hero-gallery{ padding: 12px !important; }
  .hero-gallery .masonry{ grid-auto-rows: 132px !important; }
}



/* A) Small laptops: make gallery tiles wider by using 2 columns inside masonry (prevents thin vertical strips) */
@media (max-width: 1280px) and (min-width: 981px){
  .hero-gallery .masonry{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows: 170px !important;
    gap: 12px !important;
  }
  .hero-gallery .shot{ grid-column: span 1 !important; grid-row: span 1 !important; }
  .hero-gallery .shot.big{ grid-column: span 2 !important; grid-row: span 2 !important; }
  .hero-gallery .shot.wide{ grid-column: span 2 !important; grid-row: span 1 !important; }
}

/* B) Mobile: hero-copy and hero-gallery should NOT look like a single merged card */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  /* remove any shared background from the grid wrapper */
  .hero-grid{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Make the two cards visually distinct */
  .hero-copy,
  .hero-gallery{
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow2) !important;
    background-clip: padding-box !important;
  }

  /* ensure the gap reads as separation */
  .hero-grid{ gap: 18px !important; }
}

/* C) Mobile: background pattern seam fix (stop tiled SVG repeat + fixed attachment on phones) */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  html{
    background-attachment: scroll !important;
    background-image:
      radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.22), rgba(185,146,46,0) 62%),
      radial-gradient(760px 520px at 86% 18%, rgba(59,130,246,.14), rgba(59,130,246,0) 62%),
      radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.10), rgba(34,197,94,0) 65%) !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
  }
  html[data-theme="dark"]{
    background-attachment: scroll !important;
    background-image:
      radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.26), rgba(185,146,46,0) 62%),
      radial-gradient(760px 520px at 86% 18%, rgba(56,189,248,.12), rgba(56,189,248,0) 62%),
      radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.08), rgba(34,197,94,0) 65%) !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
  }
}


   Goals:
   - Small laptops: no thin vertical strips (wider tiles).
   - Phones: hero-copy and hero-gallery look like TWO separate cards (not merged).
   - Phones: hero-gallery-head / masonry / pager perfectly centered (no left shift / clipping).
   - Phones: background seam removed (no tiled SVG / fixed-attachment).


/* 0) Keep hero wrap aligned with other sections */
.wrap.hero-grid{ max-width:1200px; margin:0 auto; padding:0 20px; }
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .wrap.hero-grid{ padding:0 20px !important; }
}
@media (max-width: 520px){
  .wrap.hero-grid{ padding:0 16px !important; }
}
@media (max-width: 390px){
  .wrap.hero-grid{ padding:0 14px !important; }
}

/* 1) Small laptops/desktops: make tiles wider and readable */
@media (max-width: 1280px) and (min-width: 981px){
  .hero-gallery .masonry{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    grid-auto-rows: 120px !important;
    gap: 12px !important;
  }
  .hero-gallery .shot{ grid-column: span 2 !important; grid-row: span 2 !important; min-width:0 !important; }
  .hero-gallery .shot.big{ grid-column: span 4 !important; grid-row: span 4 !important; }
  .hero-gallery .shot.wide{ grid-column: span 4 !important; grid-row: span 2 !important; }
}

/* 2) Phones/tablets: prevent the "merged card" look */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-grid{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 18px !important;
  }
  /* Solid(ish) card fills so they read as separate blocks */
  .hero-copy{
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow2) !important;
  }
  html[data-theme="dark"] .hero-copy{
    background: rgba(13,15,23,.82) !important;
    border-color: rgba(229,231,235,.14) !important;
  }

  .hero-gallery{
    background: var(--panel2) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow2) !important;
    border-radius: var(--radius) !important;
  }
  html[data-theme="dark"] .hero-gallery{
    background: rgba(13,15,23,.74) !important;
    border-color: rgba(229,231,235,.14) !important;
  }

  /* 3) Phones/tablets: center everything inside hero-gallery */
  .hero-gallery{
    padding: 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* remove UA <figure> margins and any layout offsets */
  .hero-gallery figure,
  .hero-gallery .shot{ margin: 0 !important; min-width:0 !important; }

  .hero-gallery-head,
  .hero-gallery .masonry,
  .hero-gallery .hg-pager,
  .hero-gallery .hg-cta,
  .hero-gallery .galleryPager,
  .hero-gallery .hg-pager{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .hero-gallery .masonry{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows: 150px !important;
    gap: 10px !important;
  }
  .hero-gallery .shot{ grid-column: span 1 !important; grid-row: span 1 !important; }
  .hero-gallery .shot.big{ grid-column: span 2 !important; grid-row: span 2 !important; }
  .hero-gallery .shot.wide{ grid-column: span 2 !important; grid-row: span 1 !important; }

  .hg-pager{ justify-content: center !important; }
}

/* 4) Mobile background seam fix: remove tiled SVG + fixed attachment (both themes) */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  html, html[data-theme="dark"]{
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
  }
  html{
    background-image:
      radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.22), rgba(185,146,46,0) 62%),
      radial-gradient(760px 520px at 86% 18%, rgba(59,130,246,.14), rgba(59,130,246,0) 62%),
      radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.10), rgba(34,197,94,0) 65%) !important;
  }
  html[data-theme="dark"]{
    background-image:
      radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.26), rgba(185,146,46,0) 62%),
      radial-gradient(760px 520px at 86% 18%, rgba(56,189,248,.12), rgba(56,189,248,0) 62%),
      radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.08), rgba(34,197,94,0) 65%) !important;
  }
}

/* 5) Cross-browser: never allow hero mosaic to create horizontal scroll */
html, body{ overflow-x: hidden !important; }


   - Make .wrap.hero-grid identical to .wrap across all breakpoints (no left shift vs other sections).
   - Ensure hero-gallery stretches and aligns in grid.
   - Restore hero-gallery-head spacing on mobile (keep typography feeling "styled").
   - Mobile background: remove tiled SVG layer and fixed attachment to avoid visible seams/repeats.


.wrap.hero-grid{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* grid items should always stretch to the wrap edges */
.hero-grid > .hero-copy,
.hero-grid > .hero-gallery{
  width: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* Keep gallery padding closer to hero-copy (premium feel + consistent inset) */
@media (min-width: 981px){
  .hero-gallery{ padding: 22px !important; }
  .hero-gallery-head{ margin-bottom: 14px !important; }
}

/* Mobile/tablet: keep same horizontal rhythm as other sections, and keep head spacing */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .wrap.hero-grid{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* avoid accidental "reset" of head spacing */
  .hero-gallery-head{
    margin-bottom: 12px !important;
    padding: 0 !important;
  }
  .hg-sub{ margin-top: 4px !important; }

  /* Make sure internal blocks don't introduce asymmetric padding */
  .hero-gallery-head,
  .hero-gallery .masonry,
  .hero-gallery .hg-pager,
  .hero-gallery .hg-cta,
  .hero-gallery .galleryPager{
    box-sizing: border-box !important;
  }

  /* Background seam fix: force gradients only on mobile (no tiled SVG pattern) */
  html{
    background-attachment: scroll !important;
    background-image:
      radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.22), rgba(185,146,46,0) 62%),
      radial-gradient(760px 520px at 86% 18%, rgba(59,130,246,.14), rgba(59,130,246,0) 62%),
      radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.10), rgba(34,197,94,0) 65%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
  html[data-theme="dark"]{
    background-attachment: scroll !important;
    background-image:
      radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.26), rgba(185,146,46,0) 62%),
      radial-gradient(760px 520px at 86% 18%, rgba(56,189,248,.12), rgba(56,189,248,0) 62%),
      radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.08), rgba(34,197,94,0) 65%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
}

/* Smaller phones: keep same padding (don’t shrink hero only) */
@media (max-width: 520px){
  .wrap.hero-grid{ padding-left: 20px !important; padding-right: 20px !important; }
}

/* ===== v41-fix-v11: hero-grid + hero-gallery mobile centering & consistent wrap padding (ONLY) =====
   Fixes:
   - Mobile: hero-gallery-head / masonry / pager no longer appear shifted left (symmetrical inset).
   - Mobile: removes default <figure> margins that can push the grid off-canvas (Chrome/Firefox differences).
   - Wrap consistency: .wrap.hero-grid uses the same paddings as .wrap across breakpoints (no "left shift" vs other sections).
   - Small laptops: prevent "thin vertical strip" tiles by enforcing a predictable masonry layout.
*/

/* 1) Make wrap.hero-grid match .wrap exactly across breakpoints */
.wrap.hero-grid{ max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
@media (max-width: 640px){ .wrap.hero-grid{ padding-left:16px; padding-right:16px; } }
@media (max-width: 420px){ .wrap.hero-grid{ padding-left:14px; padding-right:14px; } }
@media (max-width: 360px){ .wrap.hero-grid{ padding-left:12px; padding-right:12px; } }

/* 2) Cross-browser: kill default <figure> margins inside the hero gallery (critical for mobile alignment) */
.hero-gallery figure,
.hero-gallery .shot{ margin: 0 !important; }

/* 3) Keep hero-copy and hero-gallery as separate cards on mobile */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-grid{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 18px !important;
  }
  .hero-copy, .hero-gallery{
    border: 1px solid var(--line) !important;
    border-radius: var(--radius2) !important;
    box-shadow: var(--shadow2) !important;
    overflow: hidden !important;
  }
}

/* 4) Mobile: symmetrical inset inside hero-gallery so nothing is "shifted left" */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hero-gallery{
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-gallery-head,
  .hero-gallery .masonry,
  .hero-gallery .hg-cta,
  .hero-gallery .hg-pager,
  .hero-gallery .galleryPager,
  .hero-gallery .hg-pager{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .hero-gallery .masonry{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 150px !important;
    gap: 10px !important;
    justify-content: stretch !important;
    align-content: start !important;
  }

  .hero-gallery .shot{ grid-column: span 1 !important; grid-row: span 1 !important; min-width:0 !important; }
  .hero-gallery .shot.big{ grid-column: span 2 !important; grid-row: span 2 !important; }
  .hero-gallery .shot.wide{ grid-column: span 2 !important; grid-row: span 1 !important; }

  .hg-pager{ justify-content: center !important; }
}

/* 5) Small laptops: make tiles wider and readable (no thin strips) */
@media (max-width: 1280px) and (min-width: 981px){
  /* Small laptops: avoid "thin vertical strips" — use 3 columns + larger rows */
  .hero-gallery .masonry{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    grid-auto-rows: 150px !important;
    gap: 12px !important;
    grid-auto-flow: dense !important;
  }
  .hero-gallery .shot{ grid-column: span 1 !important; grid-row: span 1 !important; min-width:0 !important; }
  .hero-gallery .shot.big{ grid-column: span 2 !important; grid-row: span 2 !important; }
  .hero-gallery .shot.wide{ grid-column: span 2 !important; grid-row: span 1 !important; }
}

/* 6) Mobile background seam fix: disable tiled SVG pattern on phones (prevents "cut & repeated" look) */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  html{
    background-attachment: scroll !important;
    background-image:
      radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.22), rgba(185,146,46,0) 62%),
      radial-gradient(760px 520px at 86% 18%, rgba(59,130,246,.14), rgba(59,130,246,0) 62%),
      radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.10), rgba(34,197,94,0) 65%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
  html[data-theme="dark"]{
    background-attachment: scroll !important;
    background-image:
      radial-gradient(900px 600px at 12% 10%, rgba(185,146,46,.26), rgba(185,146,46,0) 62%),
      radial-gradient(760px 520px at 86% 18%, rgba(56,189,248,.12), rgba(56,189,248,0) 62%),
      radial-gradient(780px 560px at 74% 92%, rgba(34,197,94,.08), rgba(34,197,94,0) 65%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
}

/* 7) Safety: never allow hero mosaic to create horizontal scroll */
html, body{ overflow-x: hidden !important; }



@media (hover: none) and (pointer: coarse), (max-width: 520px){
  .wrap.hero-grid{ padding-left: 16px !important; padding-right: 16px !important; }
}
@media (hover: none) and (pointer: coarse), (max-width: 390px){
  .wrap.hero-grid{ padding-left: 14px !important; padding-right: 14px !important; }
}

/* ===== v41-gallery-fix-v24: mobile masonry spans (fix right-gap/left-glue) =====
   Problem: on phones, masonry switches to fewer columns but .shot.big/.shot.wide still span 4,
   which creates implicit columns → big empty right space and "glued to left" look.
   Fix: force 2-column grid AND correct spans on touch/small screens.
*/
@media (hover: none) and (pointer: coarse), (max-width: 980px){
  .hero-gallery{
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-gallery .masonry{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 150px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-gallery .shot{
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-width: 0 !important;
  }

  .hero-gallery .shot.big{
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }

  .hero-gallery .shot.wide{
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }

  .hero-gallery-head,
  .hero-gallery .hg-cta,
  .hero-gallery .hg-pager,
  .hero-gallery .galleryPager{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-gallery .hg-pager{ justify-content: center !important; }
}
@media (hover: none) and (pointer: coarse), (max-width: 520px){
  .hero-gallery .masonry{ grid-auto-rows: 132px !important; }
}
@media (hover: none) and (pointer: coarse), (max-width: 390px){
  .hero-gallery .masonry{ grid-auto-rows: 118px !important; }
}

/* moved from HTML inline styles: critical-cart-viewer */
/* critical-cart-viewer */
#viewer3d, #viewerLitho{ position: relative; min-height: 380px; }
#viewer3d canvas, #viewerLitho canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#backdrop{ position:fixed; inset:0; z-index:200; background: rgba(0,0,0,.46); }
#cartDrawer{ position:fixed; top:0; right:0; height:100vh; z-index:220; background:#fff; }
html[data-theme="dark"] #cartDrawer{ background:#0b0d14; }

/* moved from HTML inline styles: Inline override (independent from styles.css parsing) */
/* Inline override (independent from styles.css parsing). */
@media (hover: none) and (pointer: coarse), (max-width: 980px){
  .wrap.hero-grid{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
  .wrap.hero-grid .hero-gallery{padding:16px!important;box-sizing:border-box!important;overflow:hidden!important}
  .wrap.hero-grid .hero-gallery-head,
  .wrap.hero-grid .hero-gallery .masonry,
  .wrap.hero-grid .hero-gallery .hg-pager,
  .wrap.hero-grid .hero-gallery .galleryPager{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;left:auto!important;right:auto!important;transform:none!important;box-sizing:border-box!important}
  .wrap.hero-grid .hero-gallery figure,
  .wrap.hero-grid .hero-gallery .shot{margin:0!important;min-width:0!important}
}
@media (hover: none) and (pointer: coarse), (max-width: 520px){
  .wrap.hero-grid{padding-left:16px!important;padding-right:16px!important}
}
@media (hover: none) and (pointer: coarse), (max-width: 390px){
  .wrap.hero-grid{padding-left:14px!important;padding-right:14px!important}
}

/* ===== utilities moved from inline styles ===== */
.mt0{margin-top:0}
.max86ch{max-width:86ch}
.is-hidden{display:none !important}

/* swatch backgrounds (moved from inline styles) */
.swatch[data-color="#0F172A"]{background:#0F172A;}
.swatch[data-color="#111827"]{background:#111827;}
.swatch[data-color="#14B8A6"]{background:#14B8A6;}
.swatch[data-color="#22C55E"]{background:#22C55E;}
.swatch[data-color="#334155"]{background:#334155;}
.swatch[data-color="#3B82F6"]{background:#3B82F6;}
.swatch[data-color="#A855F7"]{background:#A855F7;}
.swatch[data-color="#E5E7EB"]{background:#E5E7EB;}
.swatch[data-color="#EF4444"]{background:#EF4444;}
.swatch[data-color="#F59E0B"]{background:#F59E0B;}
.swatch[data-color="#F97316"]{background:#F97316;}
.swatch[data-color="#FACC15"]{background:#FACC15;}


/* =========================================================
   Rebuilt hero gallery (hero-showcase) — responsive & stable
   ========================================================= */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hero-showcase{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(185,146,46,.30);
  border-radius: calc(var(--radius2) + 6px);
  padding: 22px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .hero-showcase{ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
html[data-theme="dark"] .hero-showcase{
  background: rgba(10,12,18,.58);
  border-color: rgba(185,146,46,.22);
  box-shadow: 0 26px 90px rgba(0,0,0,.46);
}
.hero-showcase *{ box-sizing: border-box; }
.hero-showcase::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(580px 480px at 22% 18%, rgba(185,146,46,.26), rgba(185,146,46,0) 62%),
    radial-gradient(560px 520px at 78% 82%, rgba(59,130,246,.16), rgba(59,130,246,0) 60%);
  filter: blur(18px);
  opacity:.85;
  pointer-events:none;
}

.hs-head{ position:relative; z-index:1; margin-bottom: 14px; }
.hs-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
  line-height: 1.15;
}
.hs-sub{ color: var(--muted); font-size: 12px; margin-top: 6px; max-width: 62ch; }

.hs-grid{
  position: relative;
  z-index: 1;

  /* Masonry-like layout without gaps */
  column-count: 4;
  column-gap: 12px;
  width: 100%;
  max-width: 100%;

  flex: 1 1 auto;
}


.hs-item{
  position: relative;
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.60);
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
  cursor: zoom-in;
  transform: translateZ(0);
}
html[data-theme="dark"] .hs-item{
  background: rgba(0,0,0,.26);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 16px 44px rgba(0,0,0,.40);
}

.hs-item img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s ease, filter .25s ease;
}

.hs-item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 62%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.hs-item::after{
  content: attr(data-caption);
  position:absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  bottom: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}

.hs-item:hover{
  transform: translateY(-2px);
  border-color: rgba(185,146,46,.55);
  box-shadow: 0 20px 70px rgba(0,0,0,.16);
}
.hs-item:hover img{ transform: scale(1.045); filter: saturate(1.06) contrast(1.04); }
.hs-item:hover::before{ opacity: 1; }
.hs-item:hover::after{ opacity: 1; transform: translateY(0); }

.hs-footer{
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(185,146,46,.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hs-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
}

.hs-pager{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
}
.hs-pager-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hs-pages{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.hs-page-label{
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
html[data-theme="dark"] .hs-page-label{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.hs-pager-right{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Premium pager buttons (scoped only to the gallery) */
.hero-showcase .hs-pagebtn.btn.small{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
html[data-theme="dark"] .hero-showcase .hs-pagebtn.btn.small{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 38px rgba(0,0,0,.42);
}
.hero-showcase .hs-pagebtn.btn.small:hover{
  transform: translateY(-1px);
  border-color: rgba(185,146,46,.45);
  box-shadow: 0 16px 50px rgba(0,0,0,.14);
}
.hero-showcase .hs-pagebtn.btn.small:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.hero-showcase .hs-pagebtn.is-active{
  border-color: rgba(185,146,46,.62);
  background: rgba(185,146,46,.14);
  box-shadow: 0 14px 44px rgba(185,146,46,.16);
}
.hero-showcase .hs-pager-right .hs-pagebtn.btn.small{
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
}

@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .hs-grid{ column-count: 3; column-gap: 12px; }
}

@media (max-width: 520px){
  .hero-showcase{ padding: 18px; }
  .hs-grid{ column-count: 2; column-gap: 10px; }
  .hs-item{ margin-bottom: 10px; border-radius: 16px; }
  .hs-pager{ gap: 10px; }
}



/* =====================
   Gallery tags (under photo + also in footer)
   ===================== */

/* Under-photo tags removed — tags are shown only in the footer and update on hover */
.hero-showcase .hs-meta{ display:none !important; }
.hero-showcase .hs-tags{ display:none !important; }
.hero-showcase .hs-tag{ display:none !important; }

/* Footer tags (mirrors tags of hovered/active item) */
.hero-showcase .hs-foot-tags{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hero-showcase .hs-foot-hint{
  flex: 0 0 auto;
}
.hero-showcase .hs-foot-tagswrap{
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px;
  min-width: 0;
}
.hero-showcase .hs-foot-tag{
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .01em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: var(--text);
}
html[data-theme="dark"] .hero-showcase .hs-foot-tag{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}


/* =====================
   Simple 3D designer
   ===================== */
.d3d{
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .d3d{ grid-template-columns: 1fr; }
}
.d3d-panel{ padding: 18px; }
.d3d-view{ padding: 18px; }
.d3d-view .viewer-frame{ min-height: 420px; }
@media (max-width: 560px){
  .d3d-view .viewer-frame{ min-height: 360px; }
}
#d3dStatus{ margin-top: 10px; }

/* =====================
   Use cases section
   ===================== */
.uses-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.use-card{
  position: relative;
  overflow: hidden;
}
.use-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border: 1px solid rgba(185,146,46,.25);
  background: rgba(185,146,46,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  font-size: 20px;
}
html[data-theme="dark"] .use-ico{
  border-color: rgba(185,146,46,.18);
  background: rgba(185,146,46,.12);
  box-shadow: 0 20px 58px rgba(0,0,0,.42);
}
@media (max-width: 980px){
  .uses-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .uses-grid{ grid-template-columns: 1fr; }
}

/* =====================
   Contact form validation
   ===================== */
.contact-stack form .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-stack form label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
.contact-stack form .field-error{
  font-size: 12px;
  line-height: 1.25;
  color: #b91c1c;
  min-height: 15px;
}
html[data-theme="dark"] .contact-stack form .field-error{
  color: #fca5a5;
}
.contact-stack form .field.has-error input,
.contact-stack form .field.has-error select,
.contact-stack form .field.has-error textarea{
  border-color: rgba(239,68,68,.70);
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}

/* =====================
   Scroll spy (active section highlight)
   ===================== */
.nav a.is-active{
  border-color: rgba(185,146,46,.55);
  background: rgba(185,146,46,.10);
}
.menuLinks a.is-active{
  border-color: rgba(185,146,46,.55);
  background: rgba(185,146,46,.10);
}

/* =====================
   Simple configurators
   ===================== */
.config-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.config-card{
  padding: 18px;
}
.config-card h3{
  margin: 0 0 6px;
  letter-spacing: .01em;
}
.config-card .two{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.config-card .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.config-card label{
  font-size: 12px;
  font-weight: 800;
}
.config-card input{
  width: 100%;
}
.cfg-actions{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.cfg-actions .btn{
  flex: 1 1 180px;
}

 (max-width: 520px){
  .cfg-actions .btn{
    flex: 1 1 100%;
  }
}
@media (max-width: 980px){
  .config-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .config-card .two{ grid-template-columns: 1fr; }
}

/* ==========================================================
   Hero showcase gallery (Galeria realizacji) — large screens
   - 4 columns on desktop
   - images fill available width (no wasted right space)
   - data-driven items (built by gallery.js)
   ========================================================== */
.hero-showcase .hs-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
  align-content: start;

  /* override legacy masonry */
  column-count: unset !important;
  column-gap: unset !important;
}
.hero-showcase .hs-item{
  display: block;
  width: 100%;
  margin: 0 !important;

  /* override legacy masonry */
  break-inside: auto !important;
  -webkit-column-break-inside: auto !important;
}
.hero-showcase .hs-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

/* 3 columns on medium screens */
@media (max-width: 980px){
  .hero-showcase .hs-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 2 columns on small screens */
@media (max-width: 520px){
  .hero-showcase .hs-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-showcase .hs-item img{ aspect-ratio: 1 / 1; }
}

/* ===== Cart checkout: collapsed until "Zamów" (button remains visible) ===== */
.cart-details{
  margin: 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] .cart-details{
  background: rgba(13,15,23,.44);
}
.cart-details > summary{
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-details > summary::-webkit-details-marker{ display:none; }
.cart-details > summary:after{
  content: "▾";
  opacity: .7;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
.cart-details[open] > summary:after{ transform: rotate(-180deg); }
.cart-details-body{ padding: 12px 14px 14px; }


/* BienPrints — cart toast position (Product added) */
#bpCartToast{
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}


/* ===== SHOP UI LIFT (filters head, reset, results row, active tiles) ===== */
#sklep .filtersHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#sklep .filtersHead b{ font-weight: 950; }
.linkbtn{
  appearance:none;
  -webkit-appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  line-height: 1;
}
.linkbtn:hover{
  color: var(--text);
  border-color: var(--line);
  background: rgba(15,23,42,.04);
}
html[data-theme="dark"] .linkbtn:hover{
  background: rgba(229,231,235,.06);
}

#sklep .shopMetaRow{
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
#sklep .shopMetaRow b{ font-weight: 950; }

#sklep .shopModes .chip.isActive{
  border-color: rgba(185,146,46,.75);
  background: rgba(185,146,46,.14);
}
#sklep .shopModes .chip.isActive::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(185,146,46,.18);
}

#sklep:not(.bp-shopmode-ready) .shopEntryCard[data-shop-entry="quote"],
#sklep.bp-shopmode-ready .shopEntryCard[data-shop-entry="ready"]{
  border-color: rgba(185,146,46,.65);
  background: rgba(185,146,46,.08);
}
html[data-theme="dark"] #sklep:not(.bp-shopmode-ready) .shopEntryCard[data-shop-entry="quote"],
html[data-theme="dark"] #sklep.bp-shopmode-ready .shopEntryCard[data-shop-entry="ready"]{
  background: rgba(185,146,46,.06);
}
#sklep.bp-shopmode-ready .shopEntryCard[data-shop-entry="quote"],
#sklep:not(.bp-shopmode-ready) .shopEntryCard[data-shop-entry="ready"]{
  opacity: .82;
}

@media (max-width: 520px){
  #sklep .shopModes{ gap: 8px; }
  #sklep .shopModes .chip{ padding: 9px 11px; }
  #sklep .shopEntryCard{ padding: 14px; }
  #sklep .filtersHead{ margin-bottom: 8px; }
}

#sklep .filtersHead .linkbtn{ margin-left: auto; }


/* =============================================================
   Header nav overflow safety (desktop, long translations: DE/FR)
   Keeps header one-line and moves less important links into "Więcej"
============================================================= */
@media (min-width: 981px){
  /* IMPORTANT: do not hide overflow here – it would clip dropdown menus */
  .header .nav{ flex-wrap: nowrap !important; overflow: visible; min-width: 0; }
  .header .nav a,
  .header .nav .navDDBtn{ white-space: nowrap; }
  .header .header-inner{ gap: 12px; }
}

/* Duplicated primary links inside Więcej (shown only when needed) */
.ddMenu .morePrimary,
.ddMenu .morePrimaryDiv{ display:none; }
.header.nav-overflow .ddMenu .morePrimary,
.header.nav-overflow .ddMenu .morePrimaryDiv{ display:block; }

/* Compact mode when nav overflows */
.header.nav-overflow .header-inner{ padding: 10px 0; }
.header.nav-overflow .nav a,
.header.nav-overflow .nav .navDDBtn{ padding: 7px 9px; font-size: 12px; }

/* Hide less important top links when space is tight (still available in Więcej) */
.header.nav-overflow .nav a[data-bp-label="nav_work"],
.header.nav-overflow .nav a[data-bp-label="nav_contact"]{ display:none !important; }

/* If still tight, hide Offer too */
.header.nav-overflow2 .nav a[data-bp-label="nav_offer"]{ display:none !important; }


/* =============================================================
   v20260220_24 — CHECKPOINT
   1) Mobile header: fix overlap (Ustawienia / logo / koszyk / menu)
   2) Funding banner: smaller + centered
============================================================= */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  /* Use a simple grid so elements never overlap */
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto;
    align-items: center !important;
    justify-content: initial !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }
  /* Move header-actions children onto the grid */
  .header-actions{ display: contents !important; }

  /* Center brand cleanly */
  .brand{
    position: static !important;
    left: auto !important;
    transform: none !important;
    grid-column: 2 !important;
    justify-self: center !important;
    justify-content: center !important;
    min-width: 0;
  }
  .brand-text{ min-width: 0; }
  .brand-name{ white-space: nowrap; }

  /* Place actions */
  .settingsDD{ grid-column: 1 !important; justify-self: start !important; }
  #openCart{ grid-column: 3 !important; justify-self: end !important; }
  #menuToggle{ grid-column: 4 !important; justify-self: end !important; }

  /* If the screen is ultra narrow, hide "Menu" label (icon stays) */
  @media (max-width: 360px){
    #menuToggle .menuLabel{ display:none !important; }
  }
}

/* Funding banner: keep it premium but not huge */
.footer .funding{ text-align:center; }
.footer .funding img{
  display:block;
  width: 100% !important;
  max-width: 760px !important;
  margin: 10px auto 0 !important;
  border-radius: 16px;
  border: 1px solid var(--line);
}


/* =============================================================
   v20260221_01 — header + tools fixes
   - Mobile header: keep Settings/Logo/Cart/Menu on ONE row
============================================================= */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    align-items: center !important;
    justify-content: initial !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    flex-wrap: nowrap !important;
  }
  .header-actions{ display: contents !important; }

  .settingsDD{ grid-column: 1 !important; justify-self: start !important; }
  .brand{
    grid-column: 2 !important;
    justify-self: center !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    justify-content: center !important;
  }
  #openCart{ grid-column: 3 !important; justify-self: end !important; }
  #menuToggle{ grid-column: 4 !important; justify-self: end !important; }

  /* keep it compact so it never wraps */
  #openCart #t_cart{ display:none !important; }
  #menuToggle .menuLabel{ display:none !important; }
  .settingsbtn .settingsLabel{ display:none !important; }
}

/* =============================================================
   v20260221_02 — FIXES
   - Mobile header: cart button stays NEXT TO menu (no wrap)
   - Print 3D calculator grid: better on tablets
============================================================= */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  /* Force a single row for actions */
  .header-inner{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    gap: 10px !important;
  }
  /* Center brand without pushing buttons down */
  .brand{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 190px) !important;
    justify-content: center !important;
  }
  .header-actions{
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
  }
  /* Keep settings on the left, cart+menu on the right */
  #openCart{ margin-left: auto !important; }

  /* Compact labels so everything fits */
  #openCart #t_cart{ display:none !important; }
  #menuToggle .menuLabel{ display:none !important; }
  .settingsbtn .settingsLabel{ display:none !important; }

  .header-actions .btn.small{ padding: 8px 10px !important; }
}

@media (max-width: 380px){
  .brand-mark{ width: 36px !important; height: 36px !important; }
  .brand-name{ font-size: 16px !important; }
}

/* Print 3D calculator: 2 columns on tablets, 1 on small phones */
@media (max-width: 980px){
  .calcPanel .calcGrid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 560px){
  .calcPanel .calcGrid{ grid-template-columns: 1fr !important; }
}


/* Mobile: keep language/theme visible inside the SETTINGS dropdown (only hide direct header-action buttons) */
@media (max-width: 980px), (hover: none) and (pointer: coarse){
  .settingsMenu .lang{ display:flex !important; }
  .settingsMenu .themebtn{ display:flex !important; }
}