/* ===== style.css ===== */
/* ============================================================
   GABIBIS — design tokens (from BRIEF-GABIBIS.md)
   ============================================================ */
:root{
  --bg:            #FBFAF8;
  --bg-alt:        #F4F1EB;
  --bg-card:       #FFFFFF;
  --bg-photo:      #F2EEE7;
  --text:          #23282C;
  --text-muted:    #6C757C;
  --text-muted-2:  #4B5257;
  --text-faint:    #8A8378;
  --line:          #E4E0D8;
  --line-strong:   #DFDACE;
  --accent:        #3F5F7D;
  --accent-tint:   #7E9CB8;
  --promo:         #B4552F;
  --dark:          #23282C;
  --dark-2:        #2B3135;
  --dark-line:     #3A4045;
  --dark-text:     #F4F1EB;
  --dark-text-2:   #C3CBD0;
  --dark-text-3:   #9BA6AD;

  --font-display: 'Newsreader', serif;
  --font-body:    'DM Sans', Helvetica, Arial, sans-serif;
  --font-mono:    'DM Mono', 'SFMono-Regular', Consolas, monospace;

  --container: 1320px;
  --gap: clamp(20px, 4vw, 56px);
}

*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{
  scroll-behavior:smooth;
  background:var(--bg-alt);
}
body{
  margin:0 auto;
  max-width:1440px;
  background:var(--bg);
  box-shadow:0 0 60px rgba(35,40,44,.05);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ font-family:var(--font-display); font-weight:300; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
input, textarea, select{ font-family:inherit; font-size:14px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 56px);
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* focus visibility, kept even though components are flat/borderless by default */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--text);
  background:transparent;
  color:var(--text);
  padding:14px 26px;
  font-size:15px;
  line-height:1;
  transition:background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn:hover{ background:var(--text); color:var(--bg); }
.btn-primary{ background:var(--text); color:var(--bg); border-color:var(--text); }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); }
.btn-accent{ background:var(--accent); color:var(--dark-text); border-color:var(--accent); }
.btn-accent:hover{ background:#33506B; border-color:#33506B; }
.btn-ghost{ border-color:var(--dark-text-3); color:var(--dark-text); }
.btn-ghost:hover{ background:rgba(244,241,235,.1); }
.btn-link{
  border:0; background:none; padding:0; border-bottom:1px solid var(--text);
  padding-bottom:2px; font-size:15px; border-radius:0;
}
.btn-link:hover{ color:var(--accent); border-color:var(--accent); background:none; }
.btn-sm{ padding:9px 14px; font-size:13px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn:disabled:hover{ background:inherit; color:inherit; }

/* chip / segmented control (category, fabric group, status, filters) */
.chip{
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text-muted-2);
  padding:9px 14px;
  font-size:13px;
  white-space:nowrap;
}
.chip[aria-pressed="true"], .chip.is-active{
  border-color:var(--text);
  background:var(--text);
  color:var(--bg);
}

/* ============================================================
   Header / nav
   ============================================================ */
.topbar{
  background:var(--dark);
  color:var(--dark-text-2);
  font-size:13px;
  font-family:var(--font-mono);
  text-align:center;
  padding:11px 20px;
  letter-spacing:.02em;
}
.topbar a{ color:inherit; border-bottom:1px solid rgba(244,241,235,.4); }

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px clamp(20px,4vw,56px);
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:relative;
}
.logo{
  height:34px;
  width:auto;
  display:block;
}
.mobile-nav .logo{ height:26px; }
.main-nav{
  display:flex;
  gap:28px;
  font-size:15px;
  color:var(--text-muted-2);
}
.main-nav a{ padding-bottom:4px; border-bottom:2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"]{
  color:var(--text);
  border-bottom-color:var(--text);
}
.header-actions{ display:flex; align-items:center; gap:18px; font-size:14px; color:var(--text-muted); }
.header-actions .btn{ padding:10px 18px; }
.nav-toggle{
  display:none;
  border:1px solid var(--text);
  background:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:1px; background:var(--text); position:relative;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--dark);
  color:var(--dark-text-3);
  font-size:14px;
  line-height:1.9;
}
.site-footer .wrap{
  padding-top:56px; padding-bottom:56px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
}
.site-footer .logo{ height:52px; margin-bottom:16px; }
.site-footer h4{ color:var(--dark-text); font-family:var(--font-body); font-weight:500; font-size:14px; margin-bottom:8px; }
.footer-bottom{
  border-top:1px solid var(--dark-line);
  font-size:13px;
  padding:20px clamp(20px,4vw,56px);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-bottom ul{ display:flex; gap:20px; flex-wrap:wrap; }

/* ============================================================
   Sections / layout helpers
   ============================================================ */
.section{ padding:80px clamp(20px,4vw,56px); }
.section-alt{ background:var(--bg-alt); }
.section-dark{ background:var(--dark); color:var(--dark-text); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:32px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(28px,3.4vw,38px); }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ============================================================
   Photo tiles
   ============================================================ */
.photo{
  background-color:var(--bg-photo);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}
.photo-tint{
  position:absolute; inset:0;
  mix-blend-mode:multiply;
  transition:background 240ms ease;
  pointer-events:none;
}
.photo-label{
  position:absolute; left:14px; bottom:14px;
  font-family:var(--font-mono); font-size:11px; color:#3B3B36;
  background:rgba(251,250,248,.9); padding:6px 10px;
}
.badge{
  position:absolute; top:12px; left:12px;
  background:var(--accent); color:var(--dark-text);
  font-family:var(--font-mono); font-size:11px; padding:5px 9px;
}
.badge-promo{ background:var(--promo); color:#FBF7F2; }

/* ============================================================
   Hero (home, editorial)
   ============================================================ */
.hero{ display:grid; grid-template-columns:1.05fr 1fr; min-height:600px; }
.hero-copy{ padding:clamp(40px,6vw,88px) clamp(20px,4vw,56px) 56px; display:flex; flex-direction:column; justify-content:center; gap:26px; }
.hero-copy h1{ font-size:clamp(38px,5.2vw,64px); line-height:1.05; letter-spacing:-.01em; text-wrap:pretty; }
.hero-copy p{ font-size:18px; line-height:1.6; color:var(--text-muted-2); max-width:480px; }
.hero-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding-top:4px; }
.hero-stats{ display:flex; gap:36px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line); margin-top:10px; }
.hero-stats .num{ font-family:var(--font-display); font-size:28px; }
.hero-stats .lbl{ font-size:13px; color:var(--text-muted); }
.hero-photo{ min-height:340px; }

/* ============================================================
   Cards: category / product
   ============================================================ */
.cat-card{ display:flex; flex-direction:column; gap:14px; }

.cat-card .name{ font-family:var(--font-display); font-size:22px; }
.cat-card .row{ display:flex; justify-content:space-between; align-items:baseline; }
.cat-card .count{ font-size:13px; color:var(--text-muted); }
.cat-card .desc{ font-size:14px; color:var(--text-muted-2); line-height:1.5; }
.cat-card a{ display:contents; }

.product-card{
  background:var(--bg-card);
  border:1px solid #E9E5DD;
  display:flex; flex-direction:column;
}

.product-card .body{ padding:16px; display:flex; flex-direction:column; gap:9px; }
.product-card .name{ font-family:var(--font-display); font-size:21px; }
.product-card .type{ font-size:12px; color:var(--text-muted); }
.product-card .spec{ font-size:13px; color:var(--text-muted); line-height:1.5; }
.product-card .dots{ display:flex; gap:6px; padding:2px 0; }
.dot{ display:inline-block; width:14px; height:14px; border-radius:50%; outline:1px solid rgba(35,40,44,.12); }
.product-card .price-row{ display:flex; justify-content:space-between; align-items:flex-end; }
.product-card .price{ font-size:19px; }
.product-card .old-price{ font-size:13px; color:var(--text-faint); text-decoration:line-through; }
.product-card .rata{ font-size:12px; color:var(--text-muted); }
.product-card .details-link{ font-size:13px; border-bottom:1px solid var(--text); padding-bottom:2px; align-self:flex-end; }
.product-card:hover .photo img{ transform:scale(1.03); }
.product-card .photo img{ transition:transform 400ms ease; }

/* ============================================================
   Fabric configurator
   ============================================================ */
.fabric-groups{ display:flex; gap:10px; flex-wrap:wrap; }
.fabric-swatches{ display:flex; flex-wrap:wrap; gap:12px; }
.swatch{
  display:flex; flex-direction:column; gap:7px; cursor:pointer;
  width:84px; border:0; background:none; padding:0; text-align:left;
}
.swatch .chip-color{ height:56px; outline:1px solid rgba(35,40,44,.12); outline-offset:0; transition:outline-offset 120ms ease; }
.swatch[aria-pressed="true"] .chip-color{ outline-offset:3px; }
.swatch .chip-label{ font-size:12px; color:var(--text-muted-2); }

/* ============================================================
   Materials strip (dark)
   ============================================================ */
.materials-row{ display:grid; grid-template-columns:34px 200px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--dark-line); align-items:baseline; }
.materials-row .no{ font-family:var(--font-mono); font-size:12px; color:var(--accent-tint); }
.materials-row .name{ font-family:var(--font-display); font-size:21px; }
.materials-row .desc{ font-size:15px; line-height:1.55; color:var(--dark-text-2); }
.factory-photo{
  height:220px;
  background:repeating-linear-gradient(135deg,#33393E 0 9px,#2B3135 9px 18px);
  display:flex; align-items:flex-end; padding:14px; margin-top:8px;
}
.factory-photo span{ font-family:var(--font-mono); font-size:11px; color:var(--dark-text-3); background:var(--dark); padding:5px 9px; }

/* ============================================================
   Reviews / guarantees
   ============================================================ */
.review-card{ border:1px solid var(--line); padding:28px; display:flex; flex-direction:column; gap:16px; background:var(--bg-card); }
.review-card .stars{ font-family:var(--font-mono); font-size:12px; color:var(--accent-tint); }
.review-card blockquote{ font-family:var(--font-display); font-size:19px; line-height:1.5; margin:0; color:#2C3237; }
.review-card cite{ font-style:normal; font-size:13px; color:var(--text-muted); margin-top:auto; }

.guarantees{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.guarantee{ padding:28px 24px 0; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.guarantee .head{ font-family:var(--font-display); font-size:28px; }
.guarantee .desc{ font-size:14px; line-height:1.55; color:var(--text-muted-2); }

/* ============================================================
   Forms (real, functional)
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:8px; }
.field .field-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="password"],
.field input[type="datetime-local"],
.field textarea,
.field select{
  background:var(--bg-card);
  border:1px solid var(--line-strong);
  padding:13px 15px;
  font-size:14px;
  color:var(--text);
  width:100%;
}
.field select{ appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 15px) center;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-faint); }
.field textarea{ resize:vertical; min-height:90px; font-family:inherit; }
.form-row{ display:grid; gap:14px; }
.form-row-2{ grid-template-columns:1fr 1fr; }
.form-row-3{ grid-template-columns:1fr 1fr 1fr; }
.form-note{ font-size:13px; color:var(--text-muted); }
.form-success{
  border:1px solid var(--accent);
  background:rgba(63,95,125,.07);
  color:var(--text);
  padding:16px 18px;
  font-size:14px;
  display:none;
}
.form-success.is-visible{ display:block; }
.form-success strong{ display:block; margin-bottom:4px; }

/* FAQ */
.faq-item{ border-top:1px solid var(--line); padding:18px 0; cursor:pointer; }
.faq-item .q{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; background:none; border:0; width:100%; text-align:left; padding:0; color:inherit; font-size:16px; }
.faq-item .q .sign{ font-family:var(--font-mono); color:var(--accent-tint); font-size:16px; }
.faq-item .a{ font-size:14px; line-height:1.6; color:var(--text-muted-2); margin-top:10px; max-width:560px; display:none; }
.faq-item[data-open="true"] .a{ display:block; }

/* Salons */
.salon-row{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.salon-row .city{ font-size:16px; }
.salon-row .addr{ font-size:13px; color:var(--text-muted); }
.salon-row .hours{ text-align:right; font-size:13px; color:var(--text-muted); }

/* Breadcrumb */
.breadcrumb{ padding:24px clamp(20px,4vw,56px) 0; font-size:13px; color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb .current{ color:var(--text); }

/* ============================================================
   Category page: filters + grid
   ============================================================ */
.category-layout{ display:grid; grid-template-columns:260px 1fr; gap:32px; padding:0 clamp(20px,4vw,56px) 64px; }
.filters aside{ display:flex; flex-direction:column; gap:26px; font-size:14px; }
.filter-group{ border-top:1px solid var(--line); padding-top:20px; }
.filter-group:first-child{ border-top:0; padding-top:0; }
.filter-group .filter-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }

/* podwójny suwak zakresu (np. szerokość, cena) */
.range-slider{ position:relative; height:20px; margin-top:4px; }
.range-slider .range-track{ position:absolute; top:8px; left:0; right:0; height:4px; background:var(--line-strong); }
.range-slider .range-fill{ position:absolute; top:8px; height:4px; background:var(--text); }
.range-slider input[type="range"]{
  position:absolute; top:0; left:0; width:100%; height:20px;
  margin:0; background:none; pointer-events:none;
  -webkit-appearance:none; appearance:none;
}
.range-slider input[type="range"]::-webkit-slider-runnable-track{ background:transparent; height:20px; }
.range-slider input[type="range"]::-moz-range-track{ background:transparent; height:20px; border:0; }
.range-slider input[type="range"]::-webkit-slider-thumb{
  pointer-events:auto; -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--text); border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--text); cursor:pointer; margin-top:2px; position:relative; z-index:2;
}
.range-slider input[type="range"]::-moz-range-thumb{
  pointer-events:auto; width:16px; height:16px; border-radius:50%;
  background:var(--text); border:2px solid var(--bg); box-shadow:0 0 0 1px var(--text); cursor:pointer;
}
.range-slider input[type="range"]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--accent); outline-offset:2px; }
.range-values{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-muted-2); margin-top:10px; }

/* wybór konkretnych wariantów kolorystycznych (tkanina + opcjonalne zdjęcie) w formularzu produktu */
.variant-group-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
.variant-row{ display:flex; align-items:center; gap:10px; }
.variant-toggle{ flex:1; display:flex; align-items:center; gap:8px; justify-content:flex-start; }
.variant-photo-slot{
  width:36px; height:36px; flex:none; border:1px dashed var(--line-strong);
  background-color:var(--bg-photo); background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:15px; cursor:pointer;
  position:relative; padding:0;
}
.variant-photo-slot.has-photo{ border-style:solid; }
.variant-photo-slot:disabled{ opacity:.35; cursor:not-allowed; }
.variant-photo-remove{
  position:absolute; top:-6px; right:-6px; width:16px; height:16px; background:rgba(35,40,44,.75); color:#fff;
  border:0; font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.filter-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.results-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; font-size:14px; color:var(--text-muted); flex-wrap:wrap; gap:8px; }
.pagination{ display:flex; justify-content:center; gap:10px; padding:36px 0 0; font-size:14px; }
.pagination button{ border:1px solid var(--line-strong); background:none; padding:9px 14px; color:var(--text-muted-2); }
.pagination button[aria-current="true"]{ border-color:var(--text); color:var(--text); }
.pagination button:disabled{ opacity:.35; cursor:not-allowed; }
.empty-state{ padding:64px 24px; text-align:center; color:var(--text-muted); border:1px dashed var(--line-strong); }

/* ============================================================
   Product page
   ============================================================ */
.product-layout{ display:grid; grid-template-columns:1fr 460px; gap:40px; padding:24px clamp(20px,4vw,56px) 56px; }
.product-gallery-main{ height:500px; position:relative; touch-action:pan-y; }
.product-gallery-arrow{
  position:absolute; top:50%; z-index:5; transform:translateY(-50%);
  width:48px; height:48px; border:1px solid rgba(255,255,255,.72); border-radius:50%;
  background:rgba(25,25,22,.22); color:#fff; backdrop-filter:blur(7px);
  display:grid; place-items:center; font-size:22px; line-height:1; cursor:pointer;
  transition:background .2s ease, transform .2s ease, opacity .2s ease;
}
.product-gallery-arrow:hover{ background:rgba(25,25,22,.48); transform:translateY(-50%) scale(1.04); }
.product-gallery-arrow[hidden]{ display:none!important; }
.product-gallery-prev{ left:18px; }
.product-gallery-next{ right:18px; }
.product-gallery-counter{
  position:absolute; z-index:5; right:18px; bottom:16px; padding:6px 9px;
  background:rgba(251,250,248,.88); color:var(--text); font-family:var(--font-mono);
  font-size:10px; letter-spacing:.08em; border:1px solid rgba(35,40,44,.12);
}
.product-gallery-counter[hidden]{ display:none!important; }
.product-thumbs-wrap{ display:flex; align-items:center; justify-content:flex-start; gap:12px; margin-top:14px; width:100%; }
.product-thumbs-viewport{ flex:0 1 auto; min-width:0; width:100%; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.product-thumbs{ display:flex; gap:12px; min-width:max-content; }
.product-thumb{ width:clamp(126px,10vw,188px); min-width:clamp(126px,10vw,188px); height:96px; flex:0 0 auto; border:0; padding:0; background:none; }
.product-thumb .photo{ height:100%; }
.product-thumb[aria-pressed="true"] .photo{ outline:2px solid var(--text); outline-offset:-2px; }
.product-thumbs-arrow{ width:40px; height:40px; flex:none; border:1px solid var(--line-strong); border-radius:999px; background:rgba(255,255,255,.94); color:var(--text); font-size:18px; display:grid; place-items:center; cursor:pointer; transition:transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease; }
.product-thumbs-arrow:hover{ transform:translateY(-1px); background:#fff; border-color:var(--text); }
.product-thumbs-arrow:disabled{ opacity:.35; cursor:not-allowed; transform:none; }
.product-thumbs-arrow[hidden]{ display:none!important; }
.variant-group, .fabric-group-block{ display:flex; flex-direction:column; gap:10px; }
.spec-mini{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--text-muted-2); }
.spec-mini .row{ display:flex; justify-content:space-between; }
.spec-mini .row span:last-child{ color:var(--text); }
.price-block{ display:flex; align-items:flex-end; justify-content:space-between; }
.price-block .price-main{ font-family:var(--font-display); font-size:38px; line-height:1; }
.price-block .price-sub{ font-size:13px; color:var(--text-muted); }
.price-block .price-old{ font-size:13px; color:var(--text-faint); text-decoration:line-through; }
.actions-stack{ display:flex; flex-direction:column; gap:10px; }
.actions-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.tabs{ display:flex; gap:28px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tab-btn{ padding:14px 0; font-size:16px; color:var(--text-muted); border:0; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.tab-btn[aria-selected="true"]{ color:var(--text); border-bottom-color:var(--text); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }
.spec-table{ display:flex; flex-direction:column; }
.spec-table .r{ display:grid; grid-template-columns:230px 1fr; gap:24px; padding:16px 0; border-top:1px solid var(--line); }
.spec-table .r span:first-child{ font-size:14px; color:var(--text-muted); }
.spec-table .r span:last-child{ font-size:15px; line-height:1.55; }
.product-support{ background:var(--bg-alt); padding:28px; display:flex; flex-direction:column; gap:14px; height:fit-content; }

/* ============================================================
   Admin panel
   ============================================================ */
.admin-shell{ background:var(--bg); }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; padding:9px clamp(20px,4vw,56px); background:var(--bg-alt); color:var(--text-muted); font-size:13px; border-bottom:1px solid var(--line); }
.admin-topbar .who{ display:flex; gap:22px; }
.admin-header{ display:flex; align-items:center; justify-content:space-between; padding:20px clamp(20px,4vw,56px); border-bottom:1px solid var(--line); }
.admin-header .left{ display:flex; align-items:center; gap:40px; }
.admin-avatar{ width:32px; height:32px; background:var(--accent); color:var(--dark-text); display:flex; align-items:center; justify-content:center; font-size:12px; font-family:var(--font-mono); flex:none; }
.admin-page-head{ display:flex; justify-content:space-between; align-items:flex-end; padding:32px clamp(20px,4vw,56px) 20px; gap:16px; flex-wrap:wrap; }
.admin-toolbar{ display:flex; justify-content:space-between; align-items:center; padding:0 clamp(20px,4vw,56px) 20px; gap:16px; flex-wrap:wrap; }
.admin-search{ border:1px solid var(--line-strong); background:var(--bg-card); padding:10px 16px; font-size:14px; width:260px; }
.admin-table-wrap{ padding:0 clamp(20px,4vw,56px) 48px; overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; min-width:760px; }
.admin-table thead th{
  text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid var(--text); padding:0 12px 12px;
}
.admin-table tbody td{ padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:14px; }
.admin-table tbody tr:hover{ background:var(--bg-alt); }
.admin-thumb{ width:60px; height:46px; }
.admin-table .p-name{ font-family:var(--font-display); font-size:18px; }
.status-pill{ display:inline-flex; align-items:center; gap:8px; font-size:13px; }
.status-pill .dot{ width:7px; height:7px; }
.row-actions button{ border:0; background:none; font-size:13px; border-bottom:1px solid var(--text); padding-bottom:2px; color:inherit; }
.row-actions{ display:flex; gap:14px; }

.admin-form-head{ padding:44px clamp(20px,4vw,56px) 0; border-top:1px solid var(--line); }
.admin-form-head p{ font-size:14px; color:var(--text-muted); margin-top:6px; }
.admin-form-layout{ padding:32px clamp(20px,4vw,56px) 80px; display:grid; grid-template-columns:380px 1fr; gap:48px; }
.dropzone{
  height:240px; border:1px dashed #C7C0B2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--text-faint); font-size:14px; text-align:center; cursor:pointer; background:none; width:100%;
}
.dropzone:hover{ border-color:var(--accent); color:var(--accent); }
.dropzone:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.dropzone.is-dragover{ border-color:var(--accent); border-style:solid; background:rgba(63,95,125,.06); color:var(--accent); }
.dropzone.is-dragover .plus{ color:var(--accent); }
.dropzone .plus{ font-size:26px; color:#B9BCB8; }
.dropzone:hover .plus{ color:var(--accent); }
.upload-thumbs{ display:flex; flex-wrap:wrap; gap:10px; }
.upload-thumb{ width:76px; height:60px; position:relative; }
.upload-thumb button{
  position:absolute; top:3px; right:3px; background:rgba(35,40,44,.7); color:#FBFAF8;
  width:16px; height:16px; border:0; display:flex; align-items:center; justify-content:center; font-size:11px; padding:0;
}
.upload-add{ width:76px; height:60px; border:1px dashed #C7C0B2; display:flex; align-items:center; justify-content:center; color:#B9BCB8; font-size:18px; background:none; }
.status-toggle-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.status-preview{ font-size:13px; }
.admin-footer{ border-top:1px solid var(--line); padding:24px clamp(20px,4vw,56px); font-size:13px; color:var(--text-muted); }
.admin-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:var(--dark); color:var(--dark-text); padding:14px 22px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity 200ms ease, transform 200ms ease; z-index:50;
}
.admin-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* modal (np. formularz dodawania/edycji kategorii) */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(35,40,44,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:48px 20px; overflow-y:auto; z-index:100;
}
.modal-panel{
  background:var(--bg); width:100%; max-width:900px;
  position:relative; margin:auto 0;
  box-shadow:0 30px 80px rgba(35,40,44,.28);
}
.modal-close{
  position:absolute; top:16px; right:16px; z-index:1;
  width:36px; height:36px; border:1px solid var(--line-strong); background:var(--bg-card);
  font-size:18px; line-height:1; cursor:pointer; color:var(--text-muted-2);
}
.modal-close:hover{ border-color:var(--text); color:var(--text); }
.modal-panel .admin-form-head{ padding:36px 60px 0 32px; border-top:0; }
.modal-panel .admin-form-layout{ padding:24px 32px 32px; grid-template-columns:320px 1fr; }
@media (max-width: 720px){
  .modal-panel .admin-form-layout{ grid-template-columns:1fr; }
  .modal-panel .admin-form-head{ padding:32px 48px 0 20px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; }
  .hero-photo{ min-height:280px; order:-1; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .guarantees{ grid-template-columns:repeat(2,1fr); }
  .guarantee:nth-child(2n){ border-right:0; }
  .site-footer .wrap{ grid-template-columns:1fr 1fr; }
  .category-layout{ grid-template-columns:1fr; }
  .filters aside{ flex-direction:row; flex-wrap:wrap; gap:16px; }
  .filter-group{ border-top:0; padding-top:0; }
  .product-layout{ grid-template-columns:1fr; }
  .admin-form-layout{ grid-template-columns:1fr; }
  .materials-row{ grid-template-columns:28px 1fr; }
  .materials-row .name{ grid-column:2; }
}
@media (max-width: 720px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
  .guarantees{ grid-template-columns:1fr; }
  .guarantee{ border-right:0; border-top:1px solid var(--line); padding-top:20px; }
  .guarantee:first-child{ border-top:0; }
  .site-footer .wrap{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .hero-stats{ gap:24px; }
  .form-row-2, .form-row-3{ grid-template-columns:1fr; }
  .admin-table{ min-width:640px; }
}

/* Mobile nav panel */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(320px,86vw); background:var(--bg);
  transform:translateX(100%); transition:transform 220ms ease; z-index:60;
  box-shadow:-24px 0 60px rgba(35,40,44,.15); padding:24px; overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav-scrim{
  position:fixed; inset:0; background:rgba(35,40,44,.4); opacity:0; pointer-events:none;
  transition:opacity 220ms ease; z-index:55;
}
.mobile-nav-scrim.is-visible{ opacity:1; pointer-events:auto; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:4px; margin-top:32px; }
.mobile-nav a{ display:block; padding:14px 4px; font-size:17px; border-bottom:1px solid var(--line); }
.mobile-nav-close{ border:1px solid var(--text); background:none; width:38px; height:38px; }

/* ============================================================
   Preview gate ("strona w budowie")
   ============================================================ */
.gate-overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--dark); color:var(--dark-text);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.gate-box{ width:100%; max-width:400px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.gate-logo{ height:30px; width:auto; margin:0 auto; }
.gate-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--dark-text-3); }
.gate-box h1{ font-size:clamp(24px,4vw,32px); line-height:1.15; color:var(--dark-text); margin:0; }
.gate-box p{ font-size:14px; line-height:1.6; color:var(--dark-text-2); }
#gate-form{ display:flex; flex-direction:column; gap:10px; margin-top:8px; width:100%; }
#gate-form input{
  background:transparent; border:1px solid var(--dark-line); color:var(--dark-text);
  padding:13px 15px; font-size:14px; text-align:center; width:100%;
}
#gate-form input::placeholder{ color:var(--dark-text-3); }
.gate-error{ color:#D98866; font-size:13px; margin:0; }
.gate-note{ font-size:12px; color:var(--dark-text-3); margin:4px 0 0; }

/* Admin: ustawienia komunikatu górnego */
.announcement-settings-card{max-width:920px;margin:0 clamp(20px,4vw,56px) 56px;padding:28px;border:1px solid var(--line);background:var(--bg-card);}
.announcement-preview{margin-top:10px;background:#bb4b31;color:#fff;padding:11px 20px;text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;}
.announcement-preview.is-off{background:var(--bg-soft);color:var(--text-muted);border:1px dashed var(--line-strong);text-transform:none;}
.settings-status{font-size:13px;color:var(--text-muted);line-height:1.5;}

/* ============================================================
   Admin — Settings / announcement, refined layout
   ============================================================ */
.settings-page{
  padding:32px clamp(20px,4vw,56px) 72px;
  width:100%;
  max-width:none;
  margin:0;
}
.settings-page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:24px;
}
.settings-page-head .eyebrow{margin-bottom:10px}
.settings-page-head h1{font-size:clamp(38px,5vw,58px);line-height:.98;margin-bottom:14px}
.settings-page-head p{max-width:650px;color:var(--text-muted);font-size:15px;line-height:1.65}
.settings-head-badge{
  flex:0 0 auto;border:1px solid var(--line-strong);padding:10px 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
}
.announcement-settings{display:flex;flex-direction:column;gap:14px}
.settings-panel{
  background:#fff;border:1px solid var(--line);padding:28px 30px;
  box-shadow:0 1px 0 rgba(35,40,44,.02);
}
.settings-section-head{display:flex;align-items:center;justify-content:space-between;gap:28px}
.settings-section-head.compact{align-items:flex-start;margin-bottom:20px}
.settings-section-head h2{font-family:var(--font-body);font-size:18px;font-weight:500;line-height:1.2;margin:3px 0 7px}
.settings-section-head p{font-size:13px;line-height:1.55;color:var(--text-muted)}
.settings-step{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--accent)}
.switch-control{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.switch-control input{position:absolute;opacity:0;pointer-events:none}
.switch-track{width:48px;height:26px;border-radius:99px;background:#D6D6D2;padding:3px;transition:background .18s ease;flex:0 0 auto}
.switch-track span{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .18s ease}
.switch-control input:checked + .switch-track{background:var(--accent)}
.switch-control input:checked + .switch-track span{transform:translateX(22px)}
.switch-control input:focus-visible + .switch-track{outline:2px solid var(--accent);outline-offset:3px}
.switch-copy{display:flex;flex-direction:column;gap:2px;min-width:146px}
.switch-copy strong{font-size:14px;font-weight:500}.switch-copy small{font-size:12px;color:var(--text-muted)}
.settings-message-field textarea{
  width:100%;resize:vertical;min-height:102px;padding:16px 17px;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;transition:border-color .15s ease,box-shadow .15s ease;
}
.settings-message-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,95,125,.08);outline:0}
.settings-field-meta{display:flex;justify-content:space-between;gap:24px;margin-top:9px;color:var(--text-muted);font-size:12px}
.schedule-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.schedule-card{position:relative;display:block;border:1px solid var(--line);background:var(--bg);padding:18px 18px 16px;cursor:pointer}
.schedule-card:hover{border-color:#C8C2B8}
.schedule-card .schedule-icon{position:absolute;right:16px;top:14px;font-size:18px;color:var(--text-faint)}
.schedule-card .field-label{display:block;margin-bottom:11px;padding-right:30px}
.schedule-card input{width:100%;border:0;border-bottom:1px solid var(--line-strong);background:transparent;padding:8px 0 10px;color:var(--text);font-size:14px;outline:0}
.schedule-card input:focus{border-bottom-color:var(--accent)}
.schedule-card small{display:block;margin-top:10px;font-size:11px;line-height:1.45;color:var(--text-muted)}
.settings-text-button{border:0;background:none;padding:0;margin-top:13px;color:var(--text-muted);font-size:12px;border-bottom:1px solid currentColor}
.settings-text-button:hover{color:var(--text)}
.preview-panel{overflow:hidden}
.preview-panel .settings-section-head{margin-bottom:18px}
.settings-status{font-family:var(--font-mono);font-size:10px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:right;max-width:300px}
.browser-preview{border:1px solid var(--line-strong);background:#fff;box-shadow:0 14px 40px rgba(35,40,44,.07)}
.browser-preview-bar{height:34px;background:#F3F1ED;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
.browser-preview-bar i{width:7px;height:7px;border-radius:50%;background:#C7C3BC}.browser-preview-bar span{margin-left:8px;font-size:10px;color:#8C8881}
.announcement-preview{margin:0;background:#BB4B31;color:#fff;padding:10px 20px;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.055em;text-transform:uppercase;border:0;min-height:34px;display:flex;align-items:center;justify-content:center}
.announcement-preview.is-off{background:#EDEAE4;color:#8B8780;border:0;text-transform:none}
.browser-preview-nav{height:66px;display:flex;align-items:center;gap:26px;padding:0 24px;font-size:10px;letter-spacing:.08em;color:#6C6963;border-top:1px solid rgba(0,0,0,.025)}
.preview-brand{font-family:var(--font-display);font-size:19px;letter-spacing:.02em;color:var(--text);margin-right:auto}
.settings-actions{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(251,250,248,.94);backdrop-filter:blur(10px);border:1px solid var(--line);padding:16px 18px;margin-top:2px}
.settings-actions>div{display:flex;flex-direction:column;gap:2px}.settings-actions strong{font-size:13px;font-weight:500}.settings-actions span{font-size:11px;color:var(--text-muted)}
.settings-actions .btn{min-width:170px}
@media (max-width:760px){
  .settings-page{padding:30px 20px 48px}.settings-page-head{align-items:flex-start}.settings-head-badge{display:none}
  .settings-panel{padding:22px 18px}.settings-section-head{align-items:flex-start;flex-direction:column}
  .switch-control{width:100%;justify-content:flex-start}.schedule-grid{grid-template-columns:1fr}
  .settings-field-meta{flex-direction:column;gap:5px}.browser-preview-nav span:not(.preview-brand){display:none}
  .settings-actions{position:static;align-items:stretch;flex-direction:column}.settings-actions .btn{width:100%}
}


/* Admin — home hero slider */
.home-slider-admin{width:100%;max-width:none;margin:0 0 34px;padding:28px;border:1px solid var(--line);background:var(--bg-card)}
.settings-section-head h2{font-size:28px;margin:0 0 8px}.settings-section-head p{max-width:720px;color:var(--text-muted-2);font-size:14px;line-height:1.55}
.slider-admin-toolbar{display:grid;grid-template-columns:auto auto minmax(190px,260px);gap:22px;align-items:end;padding:22px 0;border-bottom:1px solid var(--line)}
.settings-toggle-row{display:flex;gap:10px;align-items:center;font-size:14px}.settings-toggle-row.small{font-size:12px}.settings-toggle-row input{width:17px;height:17px;accent-color:var(--text)}
.compact-field select{min-height:42px}
.slider-admin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.slider-admin-card{border:1px solid var(--line);background:#fff;cursor:grab;transition:opacity .15s ease,transform .15s ease}.slider-admin-card.is-dragging{opacity:.45;transform:scale(.98)}
.slider-admin-photo{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--bg-photo)}
.slider-admin-card-body{padding:12px;display:flex;flex-direction:column;gap:10px}.slider-admin-card-body input[type="text"]{width:100%;border:0;border-bottom:1px solid var(--line);padding:8px 0;background:transparent;font-size:12px}
.slider-admin-add{margin-top:14px;min-height:100px;border:1px dashed var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--text-muted);transition:border-color .2s ease,background .2s ease}.slider-admin-add:hover,.slider-admin-add.is-dragover{border-color:var(--text);background:var(--bg)}.slider-admin-add .plus{font-size:25px;color:var(--text)}.slider-admin-add strong{font-size:13px;color:var(--text)}.slider-admin-add span:last-child{font-size:11px}
.slider-admin-empty{grid-column:1/-1;padding:24px;border:1px dashed var(--line);color:var(--text-muted);font-size:13px}.settings-text-button.danger{color:#A33B2A;text-align:left}
@media(max-width:980px){.slider-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.slider-admin-toolbar{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.slider-admin-grid,.slider-admin-toolbar{grid-template-columns:1fr}.home-slider-admin{padding:20px}}


/* Home fabric configurator editor */
.home-config-editor-grid{display:grid;grid-template-columns:minmax(380px,.78fr) minmax(540px,1.22fr);gap:32px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.home-config-copy-fields{display:flex;flex-direction:column;gap:16px}.home-config-copy-fields textarea{min-height:110px;resize:vertical}
.home-config-images{display:grid;grid-template-columns:1fr 1fr;gap:14px}.home-config-image-card{display:flex;flex-direction:column;gap:10px}.home-config-image-preview{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--bg-photo);border:1px solid var(--line)}
.home-config-image-card .btn{align-self:flex-start}
@media(max-width:900px){.home-config-editor-grid{grid-template-columns:1fr}.home-config-images{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.home-config-images{grid-template-columns:1fr}}

/* Home configurator admin — selection of groups/fabrics + dedicated images */
.home-config-catalog-wrap{min-width:0;border:1px solid var(--line);background:var(--bg);padding:18px}
.home-config-catalog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.home-config-catalog-head .form-note{margin-top:5px;max-width:520px}
.home-config-selection-count{font-size:12px;white-space:nowrap;padding:7px 10px;border:1px solid var(--line);background:var(--bg-2);color:var(--text-muted)}
.home-config-catalog{display:flex;flex-direction:column;gap:12px;max-height:620px;overflow:auto;padding-right:4px}
.home-config-group-card{border:1px solid var(--line);background:var(--bg-2);opacity:.7;transition:opacity .18s ease,border-color .18s ease}
.home-config-group-card.is-selected{opacity:1;border-color:var(--text)}
.home-config-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line)}
.home-config-check-main,.home-config-fabric-check{display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0}
.home-config-check-main input,.home-config-fabric-check input{width:16px;height:16px;accent-color:var(--text);flex:0 0 auto}
.home-config-check-main span{display:flex;flex-direction:column;gap:2px}
.home-config-check-main strong{font-size:14px;font-weight:500}.home-config-check-main small{font-size:11px;color:var(--text-muted)}
.home-config-fabric-list{display:flex;flex-direction:column}
.home-config-fabric-row{display:grid;grid-template-columns:minmax(210px,1fr) minmax(250px,auto);gap:18px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg);opacity:.62}
.home-config-fabric-row:first-child{border-top:0}.home-config-fabric-row.is-selected{opacity:1}
.home-config-color{width:34px;height:34px;border:1px solid rgba(0,0,0,.12);flex:0 0 34px}
.home-config-fabric-name{display:flex;flex-direction:column;min-width:0}.home-config-fabric-name strong{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-config-fabric-name small{font-size:10px;color:var(--text-muted);margin-top:2px}
.home-config-fabric-media{display:grid;grid-template-columns:86px minmax(112px,auto) 30px;align-items:center;justify-content:end;gap:9px;min-width:0}
.home-config-fabric-thumb{width:86px;height:56px;border:1px dashed var(--line-strong);display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;line-height:1.2;color:var(--text-muted);background:var(--bg-2);background-size:cover;background-position:center;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.home-config-fabric-thumb:hover{border-color:var(--text);background-color:#fff}.home-config-fabric-thumb.has-image{border-style:solid;color:transparent}
.home-config-remove-image{width:30px;height:30px;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:var(--text-muted)}.home-config-remove-image:hover{color:var(--promo)}
.btn.btn-small{padding:8px 10px;font-size:11px;min-height:32px}
.home-config-empty{padding:20px;color:var(--text-muted);font-size:13px;text-align:center}
.home-config-fallback-note{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--bg-2);border:1px solid var(--line);font-size:12px;color:var(--text-muted)}.home-config-fallback-note strong{font-size:12px;color:var(--text);font-weight:500}
.home-config-fallback-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.home-config-fallback-grid .home-config-image-preview{aspect-ratio:16/9}
@media(max-width:1180px){.home-config-editor-grid{grid-template-columns:1fr}.home-config-catalog{max-height:none}}
@media(max-width:720px){.home-config-fabric-row{grid-template-columns:1fr}.home-config-fabric-media{grid-template-columns:86px minmax(112px,auto) 30px;justify-content:start;padding-left:26px}.home-config-fallback-grid{grid-template-columns:1fr}.home-config-group-head{align-items:flex-start;flex-direction:column}}


/* Grafika techniczna produktu */
.technical-upload-admin{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}
.technical-dropzone{min-height:126px;padding:18px}
.technical-image-status{padding:14px 0;font-size:12px;color:var(--text-muted)}
.technical-image-admin-preview{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.technical-image-admin-preview img{display:block;width:100%;max-height:280px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.technical-image-admin-preview .btn{align-self:flex-start}

.technical-image-section{padding:0 clamp(20px,4vw,56px) 72px}
.technical-image-inner{max-width:1440px;margin:0 auto;border-top:1px solid var(--line);padding-top:42px}
.technical-image-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.technical-image-heading h2{font-size:clamp(28px,3vw,40px)}
.technical-image-frame{width:100%;min-height:280px;padding:clamp(18px,3vw,38px);display:grid;place-items:center;background:#f4f2ed}
.technical-image-frame img{display:block;width:100%;height:auto;max-width:1180px;max-height:760px;object-fit:contain}

@media(max-width:680px){
  .technical-image-section{padding:0 18px 54px}
  .technical-image-inner{padding-top:30px}
  .technical-image-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:18px}
  .technical-image-frame{min-height:180px;padding:12px}
}

/* Grafika techniczna w galerii produktu */
.product-gallery-main.is-technical,
.product-thumb .photo.is-technical{
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:#fff!important;
}
.product-gallery-main.is-technical{
  border:1px solid var(--line);
}
.product-gallery-main.is-technical .product-gallery-arrow{
  border-color:rgba(35,40,44,.24);
  background:rgba(255,255,255,.9);
  color:var(--text);
}
.product-gallery-main.is-technical .product-gallery-arrow:hover{ background:#fff; }
.product-thumb-technical .photo{
  position:relative;
}
.technical-thumb-label{
  position:absolute;
  left:8px;
  bottom:7px;
  padding:4px 7px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  font-family:var(--font-body);
  font-size:9px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
}

/* ============================================================
   Fabric features — global library + group assignments
   ============================================================ */
.fabric-feature-picker{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.fabric-feature-check{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:9px 11px;
  border:1px solid var(--line-strong);
  background:var(--bg-card);
  cursor:pointer;
  font-size:13px;
}
.fabric-feature-check:has(input:checked){
  border-color:var(--text);
  background:var(--bg-alt);
}
.fabric-feature-check input{margin:0;accent-color:var(--text)}
.admin-feature-badges{display:flex;flex-wrap:wrap;gap:5px;max-width:430px}
.admin-feature-badge{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 8px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:11px;
  line-height:1.2;
  color:var(--text-muted-2);
  background:var(--bg-card);
}

/* Cechy aktywnej grupy widoczne dla klienta na stronie produktu. */
.fabric-feature-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding-top:2px;
}
.fabric-feature-list[hidden]{display:none!important}
.fabric-feature-pill{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg-alt);
  color:var(--text-muted-2);
  font-size:11px;
  line-height:1.2;
}

@media(max-width:620px){
  .fabric-feature-picker{grid-template-columns:1fr}
}

/* Cechy wybranej grupy tkanin w zakładce „Tkaniny i pielęgnacja”. */
.fabric-feature-tab-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}
.spec-table .r .fabric-feature-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg-alt);
  color:var(--text-muted-2);
  font-size:12px;
  line-height:1.2;
}
.spec-table .r .fabric-feature-empty{
  color:var(--text-muted);
  font-size:14px;
}

/* ============================================================
   Fabric attribute fields — global names + per-group values
   ============================================================ */
.fabric-feature-value-editor{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fabric-feature-value-row{
  display:grid;
  grid-template-columns:minmax(130px,180px) minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);
  background:var(--bg-card);
}
.fabric-feature-value-row > span{
  font-size:13px;
  font-weight:500;
  color:var(--text);
}
.fabric-feature-value-row input{
  width:100%;
  min-width:0;
}
.admin-feature-values{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:520px;
}
.admin-feature-value{
  display:grid;
  grid-template-columns:minmax(110px,150px) minmax(0,1fr);
  gap:8px;
  align-items:start;
  font-size:12px;
  line-height:1.35;
}
.admin-feature-value strong{
  font-weight:500;
  color:var(--text);
}
.admin-feature-value span{
  color:var(--text-muted-2);
  overflow-wrap:anywhere;
}

@media(max-width:620px){
  .fabric-feature-value-row,
  .admin-feature-value{
    grid-template-columns:1fr;
    gap:5px;
  }
}


/* Slider miniatur w galerii produktu */
@media(max-width:980px){
  .product-thumbs-wrap{ gap:10px; }
  .product-thumb{ width:148px; min-width:148px; }
  .product-thumbs-arrow{ width:36px; height:36px; font-size:16px; }
}
@media(max-width:680px){
  .product-thumbs-wrap{ gap:8px; }
  .product-thumbs-viewport{ padding-bottom:2px; }
  .product-thumb{ width:112px; min-width:112px; }
  .product-thumbs-arrow{ width:32px; height:32px; font-size:15px; }
}

/* Główna galeria produktu — sterowanie sliderem */
@media(max-width:680px){
  .product-gallery-arrow{ width:40px; height:40px; font-size:19px; }
  .product-gallery-prev{ left:10px; }
  .product-gallery-next{ right:10px; }
  .product-gallery-counter{ right:10px; bottom:10px; }
}

/* Kolekcje — naturalne proporcje zdjęć, bez sztywnej wysokości i bez kadrowania */
.cat-card .cat-card-photo{
  height:auto!important;
  background:none!important;
  background-color:transparent!important;
  overflow:visible;
}
.cat-card .cat-card-photo img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}


/* Najczęściej wybierane / karty produktów — naturalne proporcje zdjęć */
.product-card .product-card-photo{
  height:auto!important;
  background:none!important;
  background-color:transparent!important;
  overflow:visible;
}
.product-card .product-card-photo img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}


/* ===== v2.css ===== */
/* GABIBIS — storefront refresh 2026
   Kierunek: spokojny, architektoniczny e-commerce; duże fotografie,
   typografia sans + editorial serif, neutralna paleta z ceglastym akcentem. */
:root{
  --bg:#F7F5F0;
  --bg-alt:#EEEAE2;
  --bg-card:#FBFAF7;
  --bg-photo:#E8E4DC;
  --text:#181A19;
  --text-muted:#797A75;
  --text-muted-2:#51534F;
  --text-faint:#99988F;
  --line:#DCD8CF;
  --line-strong:#C9C4B9;
  --accent:#B84E36;
  --accent-tint:#DDA291;
  --promo:#B84E36;
  --dark:#1D211F;
  --dark-2:#272C29;
  --dark-line:#424742;
  --dark-text:#F4F1E9;
  --dark-text-2:#CBCBC2;
  --dark-text-3:#969A91;
  --container:1440px;
}
html{background:#E9E6DF}
body{max-width:none;box-shadow:none;color:var(--text);font-family:var(--font-body);letter-spacing:-.01em}
.wrap{max-width:var(--container)}

/* Navigation */
.topbar{background:#B84E36;color:#fff;padding:9px 20px;font-family:var(--font-body);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.site-header{padding:18px clamp(22px,4vw,64px);background:rgba(247,245,240,.96);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}
.site-header .logo{height:30px}
.main-nav{gap:34px;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.main-nav a{border:0;padding:8px 0}
.main-nav a:hover,.main-nav a[aria-current="page"]{border:0;color:var(--accent)}
.header-actions{font-size:13px}
.header-actions .btn{border-radius:999px;padding:10px 18px}

/* Typography */
.eyebrow{font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--accent)}
h1,h2,h3{letter-spacing:-.035em}
.section-head h2{font-size:clamp(34px,4vw,54px)}

/* Buttons */
.btn{border-radius:999px;padding:13px 24px;border-color:var(--text);font-size:14px}
.btn-primary{background:var(--text);color:#fff}
.btn-primary:hover{background:var(--accent);border-color:var(--accent)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:white}
.btn-link{font-size:13px;text-transform:uppercase;letter-spacing:.08em;border-bottom-color:currentColor}
.chip{border-radius:999px;padding:9px 14px;background:rgba(255,255,255,.35)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--text);border-color:var(--text)}

/* Home hero */
.hero{grid-template-columns:minmax(360px,.82fr) 1.38fr;min-height:720px;background:#EDE9E0}
.hero-copy{padding:72px clamp(28px,5vw,78px);gap:28px;position:relative}
.hero-copy:after{content:"MADE IN POLAND";position:absolute;left:clamp(28px,5vw,78px);bottom:30px;font-size:10px;letter-spacing:.2em;color:var(--text-faint)}
.hero-copy h1{font-size:clamp(48px,6vw,82px);line-height:.98;max-width:670px}
.hero-copy p{max-width:560px;font-size:17px;line-height:1.7}
.hero-photo{min-height:720px;background-position:center 58%}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.12))}
.hero-stats{border-top:1px solid var(--line-strong);padding-top:24px;gap:18px}
.hero-stats .num{font-family:var(--font-body);font-size:20px;font-weight:500}
.hero-stats .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em}

/* Sections */
.section{padding:110px clamp(22px,4.5vw,72px)}
.section-alt{background:#EDE9E1}
.section-dark{background:#1D211F}
.section-head{margin-bottom:46px}
.grid{gap:24px}

/* Cards — more image, less chrome */
.category-card,.product-card,.review-card{border:0;background:transparent}
.category-card .photo{height:340px}
.category-card .body{padding:16px 2px}
.product-card{transition:transform .25s ease}
.product-card:hover{transform:translateY(-3px)}
.product-card .photo{height:360px!important;background-color:#E8E5DD;transition:filter .25s ease,transform .35s ease}
.product-card:hover .photo{filter:brightness(.97)}
.product-card .body{padding:16px 2px 8px;gap:8px}
.product-card .name{font-family:var(--font-body);font-size:17px;font-weight:500;letter-spacing:-.02em}
.product-card .type{font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.product-card .spec{font-size:12px}
.product-card .price{font-size:15px;font-weight:500}
.product-card .details-link{font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.badge{top:14px;left:14px;border-radius:999px;background:rgba(247,245,240,.94);color:var(--text);padding:7px 11px;font-family:var(--font-body);font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.badge-promo{background:var(--accent);color:#fff}

/* Configurator */
#konfigurator{background:#F7F5F0}
#konfigurator .photo{min-height:620px}
.fabric-groups{gap:8px}
.swatch{border-radius:999px!important}

/* Materials */
.factory-photo{min-height:420px;border:0!important;background:#353A36!important}
.materials-row{grid-template-columns:42px 190px 1fr;padding:28px 0}
.materials-row .name{font-family:var(--font-body);font-size:18px;font-weight:500}

/* Reviews & guarantees */
.review-card{padding:28px 0;border-top:1px solid var(--line)}
.review-card blockquote{font-size:22px;line-height:1.45}
.guarantees{border-top:1px solid var(--line);gap:0}
.guarantee{padding:28px 28px 28px 0!important}

/* Catalogue */
.breadcrumb{padding-top:26px;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.category-layout{grid-template-columns:230px 1fr;gap:56px;padding-bottom:90px}
.filters aside{position:sticky;top:100px;gap:30px}
.filter-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.results-head{margin-bottom:22px}
#product-grid.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 24px}
#product-grid .product-card .photo{height:520px!important}
.field select,.field input,.field textarea{border-radius:0;background:transparent}

/* Product detail */
.product-layout{grid-template-columns:minmax(0,1.35fr) minmax(380px,.65fr);gap:64px;padding:28px clamp(22px,4.5vw,72px) 80px;align-items:start}
.product-gallery-main{height:min(72vh,760px);background-color:#E8E5DD}
.product-thumbs{grid-template-columns:repeat(6,1fr);gap:8px}
.product-thumb{height:110px}
.price-main{font-size:30px!important}
.spec-mini{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec-mini .row{padding:13px 0}
.product-support{background:#EDE9E1;border-radius:0;padding:34px}
.tabs{border-bottom:1px solid var(--line)}

/* Footer */
.site-footer{background:#1D211F}
.site-footer .wrap{padding-top:76px;padding-bottom:76px}
.footer-bottom{padding-top:24px;padding-bottom:24px}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-photo{min-height:62vw;order:-1}
  .hero-copy{padding-top:54px;padding-bottom:90px}
  .hero-copy:after{bottom:28px}
  .product-layout{grid-template-columns:1fr;gap:38px}
  .product-gallery-main{height:70vw;max-height:680px}
  .category-layout{grid-template-columns:1fr;gap:28px}
  .filters aside{position:static}
  #product-grid.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:680px){
  .site-header{padding:15px 18px}
  .topbar{font-size:10px}
  .hero-photo{min-height:78vw}
  .hero-copy{padding:44px 20px 78px}
  .hero-copy h1{font-size:45px}
  .hero-copy p{font-size:15px}
  .hero-copy:after{left:20px}
  .hero-stats{grid-template-columns:1fr 1fr!important}
  .section{padding:74px 20px}
  .grid-3,.grid-4,#product-grid.grid-3{grid-template-columns:1fr}
  .product-card .photo,#product-grid .product-card .photo{height:112vw!important;max-height:560px}
  .category-card .photo{height:100vw;max-height:520px}
  .product-layout{padding-left:20px;padding-right:20px}
  .product-gallery-main{height:110vw;max-height:600px}
  .product-thumbs{grid-template-columns:repeat(4,1fr)}
  .guarantees{grid-template-columns:1fr 1fr}
}


/* Home hero slider */
.hero-slider{position:relative;min-height:720px;overflow:hidden;background:var(--bg-photo);isolation:isolate}
.hero-slider-track{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center 58%;opacity:0;transform:scale(1.012);transition:opacity .75s ease,transform 6.5s ease;pointer-events:none}
.hero-slide.is-active{opacity:1;transform:scale(1);z-index:1}
.hero-slider:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.03),transparent 55%,rgba(0,0,0,.18))}
.hero-slider-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:46px;height:46px;border:1px solid rgba(255,255,255,.58);border-radius:50%;background:rgba(24,26,25,.14);backdrop-filter:blur(8px);color:white;font-size:20px;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,transform .2s ease}
.hero-slider-arrow:hover{background:rgba(24,26,25,.42);transform:translateY(-50%) scale(1.04)}
.hero-slider-prev{left:24px}.hero-slider-next{right:24px}
.hero-slider-dots{position:absolute;left:24px;bottom:25px;z-index:4;display:flex;gap:7px}
.hero-slider-dots button{width:26px;height:2px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .25s ease,background .25s ease}
.hero-slider-dots button[aria-current="true"]{width:46px;background:#fff}
.hero-slider-counter{position:absolute;right:24px;bottom:20px;z-index:4;color:#fff;font-family:var(--font-body);font-size:11px;letter-spacing:.13em}
.hero-slider.is-single .hero-slider-arrow,.hero-slider.is-single .hero-slider-dots,.hero-slider.is-single .hero-slider-counter{display:none}
@media(max-width:1000px){.hero-slider{min-height:62vw;order:-1}.hero-slider-arrow{width:42px;height:42px}}
@media(max-width:680px){.hero-slider{min-height:78vw}.hero-slider-arrow{width:38px;height:38px}.hero-slider-prev{left:14px}.hero-slider-next{right:14px}.hero-slider-dots{left:14px;bottom:16px}.hero-slider-counter{right:14px;bottom:12px}}


/* ===== mobile.css ===== */
/* GABIBIS — mobile usability pass
   Loaded last so it can normalize the older storefront, redesign and admin rules. */

html, body{max-width:100%;}
html, body{overflow-x:hidden;}
@supports (overflow:clip){html, body{overflow-x:clip;}}
body.nav-open{overflow:hidden;touch-action:none;}

/* Prevent long content from forcing a horizontal viewport. */
main, section, header, footer, nav, .grid, .wrap,
.product-layout, .category-layout, .hero, .hero-copy,
.product-card, .cat-card, .review-card, .field,
.product-support, .admin-form-layout, .settings-panel{min-width:0;}

img, video, iframe{max-width:100%;height:auto;}
input, select, textarea, button{max-width:100%;}

/* Tablet navigation: switch to the drawer before the desktop header gets cramped. */
@media (max-width:900px){
  .site-header .main-nav,
  .site-header .header-actions{display:none!important;}
  .site-header .nav-toggle{display:flex!important;flex:0 0 44px;width:44px;height:44px;}
  .site-header{gap:16px;}
  .site-header .logo{max-width:min(190px,54vw);height:auto;max-height:30px;}

  .mobile-nav{width:min(360px,92vw);padding:22px max(20px,env(safe-area-inset-right)) 28px 22px;}
  .mobile-nav-close{width:44px;height:44px;font-size:24px;line-height:1;}
  .mobile-nav a{min-height:48px;display:flex;align-items:center;}

  /* Keep admin navigation available instead of hiding it with the storefront rule. */
  .admin-header{align-items:flex-start;gap:14px;}
  .admin-header .left{min-width:0;gap:18px;flex:1;flex-direction:column;align-items:flex-start;}
  .admin-header .main-nav{display:flex!important;width:100%;max-width:calc(100vw - 84px);overflow-x:auto;gap:18px;padding-bottom:6px;scrollbar-width:thin;overscroll-behavior-x:contain;}
  .admin-header .main-nav a{white-space:nowrap;flex:0 0 auto;}
}

@media (max-width:720px){
  /* Comfortable touch targets. */
  .btn, .chip, .pagination button, .nav-toggle, .mobile-nav-close,
  .tab-btn, .filter-chips button{min-height:44px;}
  .field input[type="text"], .field input[type="email"], .field input[type="tel"],
  .field input[type="number"], .field input[type="password"],
  .field input[type="datetime-local"], .field select{min-height:46px;}

  .topbar{padding:8px 16px;line-height:1.45;}
  .site-header{padding:12px 16px!important;min-height:68px;}
  .site-header .logo{max-width:170px;max-height:28px;}

  .section{padding:58px 18px;}
  .section-head{align-items:flex-start;gap:14px;margin-bottom:26px;}
  .section-head .btn{width:100%;}
  .section-head > span{width:100%;}

  .hero-copy{padding-left:18px!important;padding-right:18px!important;}
  .hero-copy h1{overflow-wrap:anywhere;}
  .hero-cta{align-items:stretch;}
  .hero-cta .btn{min-height:48px;}
  .hero-stats{gap:18px;}

  /* The inline two-column materials layout on the home page must stack. */
  .section-dark > .grid{grid-template-columns:1fr!important;gap:34px!important;}
  .materials-row{grid-template-columns:28px minmax(0,1fr)!important;gap:10px 14px!important;}
  .materials-row .name{grid-column:2;}
  .materials-row .desc{grid-column:2;}

  .salon-row{grid-template-columns:1fr;gap:5px;}
  .salon-row .hours{text-align:left;}

  /* Catalog: keep each filter full-width; row-wrapped filters made sliders too narrow. */
  .category-layout{padding-left:18px!important;padding-right:18px!important;gap:30px!important;}
  .filters aside{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:22px!important;}
  .filter-group{width:100%;border-top:1px solid var(--line)!important;padding-top:18px!important;}
  .filter-group:first-child{border-top:0!important;padding-top:0!important;}
  .range-slider{height:28px;margin-top:8px;}
  .range-slider .range-track,.range-slider .range-fill{top:12px;}
  .range-slider input[type="range"]{height:28px;}
  .range-slider input[type="range"]::-webkit-slider-runnable-track{height:28px;}
  .range-slider input[type="range"]::-webkit-slider-thumb{width:20px;height:20px;margin-top:4px;}
  .range-slider input[type="range"]::-moz-range-thumb{width:20px;height:20px;}
  .catalog-sort{width:100%!important;}

  .product-card .body{min-width:0;}
  .product-card .body > div:first-child{gap:10px;flex-wrap:wrap;}
  .product-card .type{text-align:right;overflow-wrap:anywhere;}
  .product-card .price-row{gap:12px;flex-wrap:wrap;}

  /* Product page. */
  .product-layout{padding-left:18px!important;padding-right:18px!important;gap:28px!important;}
  .product-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;}
  .product-thumb{height:auto!important;aspect-ratio:1/1;}
  .fabric-group-block > div:first-child{gap:14px;align-items:flex-start!important;flex-wrap:wrap;}
  .spec-mini .row{gap:18px;align-items:flex-start;}
  .spec-mini .row span:first-child{min-width:0;}
  .spec-mini .row span:last-child{text-align:right;min-width:0;overflow-wrap:anywhere;}
  .price-block{gap:14px;align-items:flex-start;flex-wrap:wrap;}
  .actions-2{grid-template-columns:1fr!important;}
  #tab-panels-wrap{grid-template-columns:1fr!important;gap:28px!important;}
  .tabs{gap:22px;scrollbar-width:thin;overscroll-behavior-x:contain;}
  .spec-table .r{grid-template-columns:1fr!important;gap:6px!important;}
  .product-support{padding:22px!important;}

  .footer-bottom{align-items:flex-start;}
  .footer-bottom ul{gap:10px 16px;}

  /* Admin: make controls usable without forcing the whole page wider than the phone. */
  .admin-topbar{gap:10px;align-items:flex-start;flex-direction:column;padding:10px 16px;}
  .admin-topbar .who{width:100%;justify-content:space-between;gap:14px;}
  .admin-header{padding:16px;}
  .admin-header .main-nav{max-width:calc(100vw - 64px);}
  .admin-page-head{padding:26px 16px 18px;align-items:stretch;}
  .admin-page-head .btn{width:100%;}
  .admin-toolbar{padding-left:16px;padding-right:16px;align-items:stretch;}
  .admin-toolbar > div{width:100%;min-width:0;flex-wrap:wrap!important;}
  .admin-search{width:100%!important;min-width:0!important;}
  .admin-form-head{padding-left:16px!important;padding-right:16px!important;}
  .admin-form-layout{padding-left:16px!important;padding-right:16px!important;gap:28px!important;}
  .admin-table-wrap{padding-left:16px;padding-right:16px;-webkit-overflow-scrolling:touch;}
  .admin-table{min-width:620px;}
  .modal-backdrop{padding:16px 10px;}
  .modal-panel .admin-form-layout{padding:20px 16px 24px;}
  .home-config-catalog-wrap{padding:14px;}
  .home-config-catalog-head{flex-direction:column;}
  .home-config-selection-count{white-space:normal;}
  .home-config-fabric-media{grid-template-columns:72px minmax(100px,1fr) 30px!important;padding-left:0!important;width:100%;}
  .home-config-fabric-thumb{width:72px;}

  .login-shell{padding:16px!important;align-items:flex-start!important;}
  .login-box{padding:30px 20px!important;margin-top:max(4vh,18px);}
  .login-logo{height:58px!important;}
}

@media (max-width:520px){
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
  .hero-cta .btn-link{align-self:flex-start;padding:10px 0;}

  .hero-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .hero-stats > div:last-child{grid-column:1/-1;}

  .fabric-swatches{gap:14px 10px;}
  .swatch{width:calc((100% - 20px)/3);min-width:72px;}
  .swatch .chip-color{width:100%;}

  .product-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .photo-label{left:10px;right:10px;bottom:10px;width:max-content;max-width:calc(100% - 20px);overflow-wrap:anywhere;}

  .breadcrumb{padding-left:18px!important;padding-right:18px!important;line-height:1.6;}
  .pagination{gap:6px;flex-wrap:wrap;}
  .pagination button{padding:8px 12px;}

  .gate-overlay{padding:16px;}
  .gate-box{max-width:360px;}
}

@media (max-width:380px){
  .hero-copy h1{font-size:40px!important;}
  .section-head h2{font-size:32px;}
  .swatch{width:calc((100% - 10px)/2);}
  .product-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}


/* Hero scaling — desktop/laptop
   Keeps the text column wide enough and scales the slider with the viewport.
   This file is loaded last, so these rules override the older fixed hero sizing. */
.hero{
  min-width:0;
}
.hero-copy,
.hero-slider{
  min-width:0;
}

@media (max-width:1280px) and (min-width:901px){
  .hero{
    grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr)!important;
    min-height:auto!important;
  }

  .hero-copy{
    padding:clamp(44px,5vw,68px) clamp(28px,3.5vw,44px)!important;
  }

  .hero-copy h1{
    font-size:clamp(46px,5vw,62px)!important;
    line-height:.98!important;
    max-width:100%!important;
  }

  .hero-copy > p{
    font-size:clamp(15px,1.35vw,17px)!important;
    max-width:100%!important;
  }

  .hero-slider{
    min-height:clamp(540px,62vw,700px)!important;
    height:auto!important;
  }
}

/* Switch the hero to a stacked layout a little earlier than before.
   This avoids the cramped intermediate laptop/tablet range. */
@media (max-width:1024px){
  .hero{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }

  .hero-slider{
    order:-1;
    min-height:clamp(360px,62vw,635px)!important;
    aspect-ratio:16/10;
  }

  .hero-copy{
    padding:42px 24px 54px!important;
  }

  .hero-copy h1{
    font-size:clamp(42px,8vw,64px)!important;
    line-height:1!important;
    max-width:760px!important;
  }

  .hero-copy > p{
    max-width:680px!important;
  }
}

@media (max-width:680px){
  .hero-slider{
    min-height:0!important;
    aspect-ratio:4/3;
  }

  .hero-copy{
    padding:34px 18px 46px!important;
  }

  .hero-copy h1{
    font-size:clamp(38px,11vw,52px)!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:auto;
  }
}


/* Kolekcje — pokazuj całe zdjęcie bez kadrowania */
.cat-card .photo,
.category-card .photo{
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}


/* Kolekcje — bez szarego tła po bokach zdjęcia */
.cat-card .photo,
.category-card .photo{
  background-color:#fff!important;
}


/* Najczęściej wybierane — zdjęcie wyznacza wysokość karty.
   Nadpisuje stałe wysokości z v2.css / starszych stylów. */
.product-card{
  height:auto!important;
  min-height:0!important;
  justify-content:flex-start!important;
}

.product-card .product-card-photo{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  background:none!important;
  background-color:transparent!important;
  overflow:visible!important;
}

.product-card .product-card-photo img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  margin:0!important;
}

.product-card .body{
  margin-top:0!important;
  padding-top:12px!important;
}


/* Strona główna / Najczęściej wybierane
   Naturalne proporcje zdjęcia + zawsze widoczne szczegóły produktu. */
#bestsellers-grid{
  align-items:start!important;
}

#bestsellers-grid .product-card{
  width:100%!important;
  max-width:560px;
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
  justify-content:flex-start!important;
}

#bestsellers-grid .product-card-photo{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  background:transparent!important;
  overflow:visible!important;
}

#bestsellers-grid .product-card-photo img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  margin:0!important;
}

#bestsellers-grid .product-card .body{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:12px 2px 8px!important;
  flex-direction:column!important;
  gap:8px!important;
}

/* Na bardzo szerokich ekranach karta nie rośnie bez końca,
   dzięki czemu dane produktu pozostają blisko zdjęcia. */
@media (min-width:1600px){
  #bestsellers-grid{
    grid-template-columns:repeat(3,minmax(0,560px))!important;
    justify-content:space-between;
  }
}

@media (max-width:900px){
  #bestsellers-grid .product-card{
    max-width:none;
  }
}


/* ============================================================
   Sticky storefront header
   ============================================================ */

/* Sticky wrapper zamiast samego .site-header.
   Dzięki temu nagłówek nie przestaje być sticky po opuszczeniu
   swojego krótkiego rodzica #site-header. */
#site-header{
  position:sticky!important;
  top:0;
  z-index:3000;
  background:var(--bg);
  isolation:isolate;
}

/* JS od animacji ustawia sticky na samym headerze; wrapper robi to
   poprawnie, więc wewnętrzny header zostaje zwykłym elementem. */
#site-header .site-header{
  position:relative!important;
  top:auto!important;
  z-index:auto!important;
}

#site-header .site-header.is-scrolled{
  box-shadow:0 10px 30px rgba(25,24,20,.055);
}

html{
  scroll-padding-top:96px;
}


/* ============================================================
   Product page — tablet / mobile UX
   ============================================================ */

@media (max-width:900px){
  .product-layout{
    grid-template-columns:minmax(0,1fr)!important;
    gap:30px!important;
    padding:18px 20px 48px!important;
  }

  .product-layout > div{
    min-width:0;
  }

  /* Galeria nie kadruje produktu na tabletach. */
  .product-gallery-main{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:16/10;
    background-size:contain!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    background-color:#fff!important;
    border:1px solid var(--line);
  }

  .product-gallery-arrow{
    width:44px!important;
    height:44px!important;
    font-size:20px!important;
    background:rgba(25,25,22,.30)!important;
    border-color:rgba(255,255,255,.82)!important;
  }

  .product-gallery-prev{left:12px!important;}
  .product-gallery-next{right:12px!important;}

  .product-gallery-counter{
    right:12px!important;
    bottom:12px!important;
    padding:6px 8px!important;
  }

  /* Miniatury: prawdziwy poziomy slider zamiast łamania w siatkę. */
  .product-thumbs-wrap{
    width:100%!important;
    gap:8px!important;
    margin-top:10px!important;
  }

  .product-thumbs-viewport{
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }

  .product-thumbs-viewport::-webkit-scrollbar{
    display:none;
  }

  .product-thumbs{
    display:flex!important;
    grid-template-columns:none!important;
    gap:8px!important;
    min-width:max-content!important;
    margin:0!important;
  }

  .product-thumb{
    flex:0 0 116px!important;
    width:116px!important;
    min-width:116px!important;
    height:auto!important;
    aspect-ratio:4/3;
    scroll-snap-align:start;
  }

  .product-thumbs-arrow{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex:0 0 38px!important;
  }

  /* Informacje o produkcie bliżej galerii i bez dużych pustych odstępów. */
  .product-layout > div:nth-child(2){
    gap:18px!important;
  }

  #product-name{
    font-size:clamp(34px,6vw,46px)!important;
    line-height:1!important;
    margin-bottom:8px!important;
  }

  #product-desc{
    font-size:15px!important;
    line-height:1.6!important;
  }

  .fabric-group-block{
    gap:10px!important;
  }

  /* Grupy tkanin można przesuwać palcem. */
  .fabric-groups{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:8px!important;
    padding:2px 0 5px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .fabric-groups::-webkit-scrollbar{display:none;}

  .fabric-groups .chip{
    flex:0 0 auto;
    min-height:44px;
    scroll-snap-align:start;
    white-space:nowrap;
  }

  /* Próbki tkanin także w poziomym, dotykowym pasku. */
  .fabric-swatches{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:10px!important;
    padding:4px 1px 8px!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  .fabric-swatches::-webkit-scrollbar{display:none;}

  .fabric-swatches .swatch{
    flex:0 0 88px!important;
    width:88px!important;
    min-width:88px!important;
    scroll-snap-align:start;
  }

  .fabric-swatches .chip-color{
    width:100%!important;
  }

  .spec-mini{
    padding:14px 0!important;
    gap:0!important;
  }

  .spec-mini .row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px!important;
    padding:8px 0;
    align-items:start!important;
  }

  .spec-mini .row span:last-child{
    max-width:56vw;
    text-align:right!important;
  }

  .price-block{
    align-items:flex-start!important;
    gap:10px!important;
  }

  .price-block .price-main{
    font-size:34px!important;
  }

  .actions-stack{
    gap:8px!important;
  }

  .actions-stack .btn,
  .actions-stack button{
    min-height:48px;
  }

  .actions-2{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  /* Zakładki: przesuwane poziomo, bez ściskania tekstu. */
  .tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:22px!important;
    overflow-x:auto!important;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none!important;
  }

  .tabs::-webkit-scrollbar{display:none;}

  .tab-btn{
    flex:0 0 auto;
    min-height:48px;
    scroll-snap-align:start;
  }

  #tab-panels-wrap{
    grid-template-columns:minmax(0,1fr)!important;
    gap:28px!important;
    padding-top:24px!important;
  }

  .spec-table .r{
    grid-template-columns:minmax(140px,.65fr) minmax(0,1.35fr)!important;
    gap:18px!important;
  }

  .product-support{
    padding:22px!important;
  }

  #related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}


@media (max-width:600px){
  html{
    scroll-padding-top:76px;
  }

  .product-layout{
    padding:12px 14px 38px!important;
    gap:22px!important;
  }

  .breadcrumb{
    padding-left:14px!important;
    padding-right:14px!important;
    font-size:11px;
  }

  .product-gallery-main{
    aspect-ratio:4/3;
  }

  .product-gallery-arrow{
    width:42px!important;
    height:42px!important;
    font-size:19px!important;
  }

  .product-gallery-prev{left:8px!important;}
  .product-gallery-next{right:8px!important;}

  .product-gallery-counter{
    right:8px!important;
    bottom:8px!important;
  }

  .product-thumb{
    flex-basis:92px!important;
    width:92px!important;
    min-width:92px!important;
  }

  .product-thumbs-arrow{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    flex-basis:34px!important;
  }

  #product-name{
    font-size:clamp(32px,10vw,42px)!important;
  }

  .fabric-group-block > div:first-child{
    align-items:flex-start!important;
  }

  .fabric-swatches .swatch{
    flex-basis:82px!important;
    width:82px!important;
    min-width:82px!important;
  }

  .spec-mini .row{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
  }

  .spec-mini .row span:last-child{
    max-width:none;
  }

  .price-block{
    flex-direction:column;
  }

  .actions-2{
    grid-template-columns:1fr!important;
  }

  /* Na małym ekranie parametr → wartość jest czytelniejszy w dwóch liniach. */
  .spec-table .r{
    grid-template-columns:1fr!important;
    gap:5px!important;
    padding:13px 0!important;
  }

  .spec-table .r span:first-child{
    font-size:12px!important;
  }

  .product-support{
    padding:18px!important;
  }

  #related-grid{
    grid-template-columns:1fr!important;
  }
}


/* Sticky header nie jest animacją, więc pozostaje aktywny również
   przy preferencji reduced motion. */
@media (prefers-reduced-motion:reduce){
  #site-header{
    position:sticky!important;
    top:0!important;
  }
  #site-header .site-header{
    position:relative!important;
    top:auto!important;
  }
}


/* ============================================================
   MOBILE HEADER — zawsze widoczny podczas scrollowania
   ============================================================ */
@media (max-width:900px){
  #site-header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:6000!important;
    background:rgba(248,247,243,.97)!important;
    border-bottom:1px solid rgba(23,23,19,.09);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  #site-header .site-header{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    min-height:68px!important;
    margin:0!important;
    background:transparent!important;
  }

  /* Miejsce po wyjętym z flow nagłówku. */
  #site-header + main{
    margin-top:68px!important;
  }

  /* Jeśli aktywny jest pasek komunikatu, zostaw na niego dodatkowe miejsce. */
  #site-header:has(#site-announcement:not([hidden])) + main{
    margin-top:106px!important;
  }

  /* Drawer i przyciemnienie zawsze ponad treścią. */
  #site-header .mobile-nav-scrim{
    position:fixed!important;
    inset:0!important;
    z-index:6100!important;
  }

  #site-header .mobile-nav{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    z-index:6200!important;
    max-height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

@media (max-width:600px){
  #site-header .site-header{
    min-height:64px!important;
  }

  #site-header + main{
    margin-top:64px!important;
  }

  #site-header:has(#site-announcement:not([hidden])) + main{
    margin-top:102px!important;
  }
}


/* ============================================================
   Katalog produktów — kompaktowe karty na desktopie
   ============================================================ */

/* Nadpisanie starego #product-grid .photo { height:520px!important } */
#product-grid.grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:38px 18px!important;
  align-items:start!important;
}

#product-grid .product-card{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
  background:transparent!important;
  border:0!important;
}

#product-grid .product-card .product-card-photo,
#product-grid .product-card .photo{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  background:#fff!important;
}

#product-grid .product-card .product-card-photo img,
#product-grid .product-card .photo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
}

#product-grid .product-card .body{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:14px 2px 0!important;
  gap:8px!important;
}

#product-grid .product-card .body > div:first-child{
  align-items:flex-start!important;
  gap:12px!important;
}

#product-grid .product-card .name{
  font-size:22px!important;
  line-height:1.1!important;
}

#product-grid .product-card .type{
  flex:0 0 auto;
  max-width:45%;
  font-size:10px!important;
  line-height:1.35!important;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:right;
}

#product-grid .product-card .spec{
  min-height:0!important;
  font-size:13px!important;
}

#product-grid .product-card .price-row{
  margin-top:2px;
  align-items:flex-end!important;
  gap:12px!important;
}

#product-grid .product-card .details-link{
  white-space:nowrap;
}

/* Duży desktop: 3 kolumny. */
@media (min-width:1281px){
  #product-grid.grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Laptop / tablet poziomy: 2 kolumny. */
@media (max-width:1280px) and (min-width:701px){
  #product-grid.grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:32px 16px!important;
  }

  #product-grid .product-card .product-card-photo,
  #product-grid .product-card .photo{
    aspect-ratio:4/3!important;
  }
}

/* Telefon: jedna karta, proporcjonalne zdjęcie i pełne dane. */
@media (max-width:700px){
  #product-grid.grid-3{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }

  #product-grid .product-card .product-card-photo,
  #product-grid .product-card .photo{
    aspect-ratio:4/3!important;
    max-height:none!important;
  }

  #product-grid .product-card .body{
    padding-top:12px!important;
  }

  #product-grid .product-card .name{
    font-size:21px!important;
  }
}


/* Odznaki produktu — bez białej pastylki zasłaniającej zdjęcie */
.product-card .badge:not(.badge-promo){
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  color:var(--text)!important;
  font-size:9px!important;
  font-weight:500!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 8px rgba(255,255,255,.8)!important;
}

#product-grid .product-card .badge:not(.badge-promo){
  top:14px!important;
  left:14px!important;
}


/* Katalog — bez białej ramy/tła wokół zdjęcia */
#product-grid .product-card .product-card-photo,
#product-grid .product-card .photo{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  background:transparent!important;
  background-color:transparent!important;
  overflow:visible!important;
}

#product-grid .product-card .product-card-photo img,
#product-grid .product-card .photo img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  margin:0!important;
}


/* Badge produktu — zawsze widoczny nad zdjęciem, bez białej pastylki */
.product-card .photo,
.product-card .product-card-photo{
  position:relative!important;
}

.product-card .badge{
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  z-index:8!important;
  pointer-events:none;
}

.product-card .badge:not(.badge-promo){
  display:inline-flex!important;
  align-items:center;
  min-height:24px;
  padding:5px 8px!important;
  background:rgba(24,24,21,.72)!important;
  color:#fff!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
  font-size:9px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* Promocja pozostaje mocniej wyróżniona. */
.product-card .badge-promo{
  z-index:8!important;
}


/* ============================================================
   Galeria produktu — miniatury wykorzystują pełną szerokość
   ============================================================ */

/* Desktop: bez niepotrzebnego scrolla i pustej przestrzeni. */
@media (min-width:901px){
  .product-thumbs-wrap{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
  }

  .product-thumbs-viewport{
    flex:1 1 auto!important;
    min-width:0!important;
    width:100%!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
  }

  .product-thumbs{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    gap:8px!important;
  }

  .product-thumb{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    aspect-ratio:4/3!important;
  }

  .product-thumb .photo{
    width:100%!important;
    height:100%!important;
    background-size:contain!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
  }

  /* Strzałki pod miniaturami są zbędne na desktopie,
     gdy zdjęcia mieszczą się w dostępnym rzędzie. */
  .product-thumbs-arrow{
    display:none!important;
  }
}

/* Tablet: nadal wykorzystuj całą szerokość przy typowej liczbie zdjęć. */
@media (min-width:701px) and (max-width:900px){
  .product-thumbs{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    gap:8px!important;
  }

  .product-thumb{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    aspect-ratio:4/3!important;
  }

  .product-thumbs-arrow{
    display:none!important;
  }

  .product-thumbs-viewport{
    overflow-x:hidden!important;
  }
}

/* Telefon: zostaw przewijanie dotykowe, bo miniatury byłyby zbyt małe. */
@media (max-width:700px){
  .product-thumbs-viewport{
    overflow-x:auto!important;
  }

  .product-thumbs{
    width:max-content!important;
    min-width:max-content!important;
  }

  .product-thumb{
    flex:0 0 92px!important;
    width:92px!important;
    min-width:92px!important;
  }

  .product-thumbs-arrow{
    display:grid!important;
  }
}


/* ============================================================
   MOBILE DRAWER — stabilny panel po kliknięciu hamburgera
   ============================================================ */
@media (max-width:900px){
  body > .mobile-nav-scrim{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    background:rgba(25,24,21,.42)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:9000!important;
    transition:opacity .22s ease, visibility .22s ease!important;
  }

  body > .mobile-nav-scrim.is-visible{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  body > .mobile-nav{
    display:block!important;
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(390px,92vw)!important;
    height:100dvh!important;
    max-width:92vw!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:22px 22px max(30px,env(safe-area-inset-bottom))!important;
    background:var(--bg,#f8f7f3)!important;
    color:var(--text,#222)!important;
    box-shadow:-24px 0 60px rgba(25,24,21,.18)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
    transform:translate3d(105%,0,0)!important;
    opacity:1!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:9100!important;
    transition:transform .24s cubic-bezier(.2,.75,.25,1), visibility .24s ease!important;
  }

  body > .mobile-nav.is-open{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  body > .mobile-nav > div:first-child{
    position:sticky;
    top:-22px;
    z-index:3;
    margin:-22px -22px 0;
    padding:18px 22px;
    background:var(--bg,#f8f7f3);
    border-bottom:1px solid var(--line,#dedbd4);
  }

  body > .mobile-nav .logo{
    width:auto!important;
    height:28px!important;
    max-width:150px!important;
  }

  body > .mobile-nav .mobile-nav-close{
    display:grid!important;
    place-items:center;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid var(--text,#222)!important;
    background:transparent!important;
    font-size:25px!important;
    line-height:1!important;
    cursor:pointer;
  }

  body > .mobile-nav .mobile-menu-tree{
    width:100%!important;
    margin:18px 0 0!important;
    padding:0!important;
  }

  body > .mobile-nav .mobile-menu-node{
    width:100%!important;
  }

  body > .mobile-nav .mobile-nav-row{
    width:100%!important;
  }

  body > .mobile-nav a{
    max-width:none!important;
  }

  body.nav-open{
    overflow:hidden!important;
    touch-action:none!important;
  }
}

@media (max-width:520px){
  body > .mobile-nav{
    width:100vw!important;
    max-width:100vw!important;
  }
}


/* ===== Etap 3: Core Web Vitals / adaptacja do słabszych urządzeń ===== */
@supports (content-visibility:auto){
  body[data-nav="index.html"] main > section:not(.hero){
    content-visibility:auto;
    contain-intrinsic-size:auto 760px;
  }
  #site-footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 520px;
  }
}

/* Tryb oszczędny jest włączany tylko przy Save-Data albo na naprawdę słabym urządzeniu. */
html.perf-lite .site-header,
html.perf-lite .mobile-nav,
html.perf-lite .mobile-catalog-tools{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.perf-lite .product-card,
html.perf-lite .cat-card,
html.perf-lite .journal-card-image img,
html.perf-lite .fabric-crossfade-layer{
  transition:none!important;
  animation:none!important;
}
html.perf-lite [data-reveal]{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

/* Przeglądarka może pominąć renderowanie obrazów spoza ekranu do momentu zbliżenia. */
.product-card img,
.cat-card img,
.journal-card img{
  content-visibility:auto;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}