/*!
 * The Floors — main stylesheet
 * Visual language ported 1:1 from thefloors_mockup.html (<style> block, verbatim).
 * WooCommerce/WordPress integration layer appended below.
 */
:root{
  /* --- paleta z logo --- */
  --bg:#FBF7F1; --surface:#FFFFFF; --cream:#F4EBDD; --cream-2:#EADDC8; --sand:#DCC6A6;
  --ink:#2A1B0F; --ink-soft:#6B5544; --line:#E7D8C2;
  --espresso:#3A2415; --chestnut:#6E3D1B; --wood:#8A5A2B; --wood-dark:#5A3416;
  --gold:#D8901A; --gold-bright:#EBA42B; --gold-deep:#B5760F; --gold-soft:rgba(216,144,26,.12);
  --grad-wood:linear-gradient(135deg,#3A2415,#6E3D1B 55%,#8A5A2B);
  --grad-gold:linear-gradient(120deg,#D8901A,#C9820F 50%,#B5760F);
  --grad-hero:linear-gradient(105deg,rgba(34,20,10,.88),rgba(58,36,21,.55) 45%,rgba(216,144,26,.18));
  --shadow:0 8px 28px rgba(58,36,21,.12); --shadow-lg:0 28px 64px rgba(58,36,21,.20); --shadow-gold:0 10px 30px rgba(216,144,26,.28);
  --radius:14px;
  --radius-sm:9px;
  --maxw:1240px;
  /* font display — premium grotesk (osie opsz/wght) */
  --font-display:'Bricolage Grotesque',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* kształt deski (równoległobok, cięcie 45° jak w jodełce) */
  --plank-clip:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  /* legacy aliases (zachowane referencje) */
  --paper:var(--surface); --graphite:var(--espresso); --graphite-2:var(--espresso); --green:#5b6e4f;
  /* --- tokeny animacji --- */
  --ease-wood:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-snap:cubic-bezier(.34,1.56,.64,1);
  --t-fast:140ms; --t-base:260ms; --t-slow:520ms; --t-hero:760ms;
  /* wood-grain dla ciemnych sekcji */
  --wood-grain:
    repeating-linear-gradient(92deg,rgba(216,144,26,.05) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(88deg,rgba(0,0,0,.10) 0 1px,transparent 1px 9px),
    radial-gradient(120% 90% at 18% 0%,rgba(216,144,26,.10),transparent 55%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-optical-sizing:auto;font-weight:700;line-height:1.1;color:var(--ink);margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.025em;font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.02em;font-weight:700}
h3{font-size:1.25rem;letter-spacing:-.012em;font-weight:700}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.eyebrow{font-family:var(--font-display);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:.7em;display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:8px;flex:none;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M0 6 4 2 8 6 12 2 16 6 20 2 24 6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M0 6 4 2 8 6 12 2 16 6 20 2 24 6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.eyebrow.on-dark{color:var(--gold-bright)}
.eyebrow.on-dark::before{background:var(--gold-bright)}

/* Buttons — kształt deski (parallelogram, cięcie pod 45° jak w jodełce). Bez owali. */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5em;border:none;cursor:pointer;font-family:inherit;overflow:hidden;
  font-weight:600;font-size:.95rem;padding:.85em calc(1.5em + 14px);border-radius:2px;
  clip-path:var(--plank-clip);
  transition:transform var(--t-fast) var(--ease-wood),box-shadow var(--t-base),background var(--t-base),color var(--t-base),border-color var(--t-base);text-align:center;justify-content:center}
.btn>*{position:relative;z-index:1}
/* złoty "sweep" na hover (działa pod clip-path — overflow:hidden) */
.btn::before{content:"";position:absolute;inset:0;z-index:0;transform:translateX(-101%);transition:transform var(--t-slow) var(--ease-out);
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.32),transparent)}
.btn:hover::before{transform:translateX(101%)}
/* akcent krawędzi "click-lock" — lewy brzeg deski jak nacięcie/fuga panelu.
   domyślnie złoty (jasne/ghost); na złotym tle = espresso (czyta się jak fuga). */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;z-index:2;background:var(--gold);opacity:.95;
  box-shadow:1px 0 0 rgba(255,255,255,.18) inset;
  transition:background var(--t-base),opacity var(--t-base),width var(--t-base),box-shadow var(--t-base)}
.btn-primary{background:var(--grad-gold);color:#2A1B0F;box-shadow:0 4px 14px rgba(216,144,26,.22)}
.btn-primary::after{background:#2A1B0F;opacity:.9;box-shadow:1px 0 1px rgba(0,0,0,.45) inset}
.btn-primary:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.btn-wood{background:var(--grad-gold);color:#2A1B0F;box-shadow:0 4px 14px rgba(216,144,26,.22)}
.btn-wood::after{background:#2A1B0F;opacity:.9;box-shadow:1px 0 1px rgba(0,0,0,.45) inset}
.btn-wood:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--espresso);color:#fff;transform:translateY(-2px)}
.btn-light{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn-light:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-sm{padding:.6em calc(1.1em + 12px);font-size:.85rem;clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%)}
.btn-block{width:100%}
/* docisk "kliknięcia panelu w zatrzask" */
.btn:active{transform:translateY(0) scale(.97)}
.btn-primary:active,.btn-wood:active{background:var(--gold-deep)}
.btn:active::after{opacity:1;width:4px}

/* chevron divider (jodełka) */
.chevron-divider{height:26px;border:0;margin:0;
  background:
    repeating-linear-gradient(135deg,var(--gold) 0 2px,transparent 2px 13px),
    repeating-linear-gradient(45deg,var(--gold) 0 2px,transparent 2px 13px);
  opacity:.22;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);}

/* prototype bar */
.proto-bar{background:var(--espresso);background-image:var(--wood-grain);
  color:#f2e7d4;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:6px 10px;font-weight:600}

/* scroll progress */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--gold-bright),var(--chestnut));box-shadow:0 0 10px rgba(216,144,26,.7);transition:width .08s linear}

/* Header */
header{position:sticky;top:0;z-index:60;background:var(--espresso);background-image:var(--wood-grain);color:#f4ece0;box-shadow:0 2px 16px rgba(0,0,0,.18);transition:box-shadow var(--t-base)}
header.shrink{box-shadow:0 8px 26px rgba(20,12,6,.4)}
.topbar{font-size:.8rem;background:#21130A;color:#cdbfa9}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;gap:14px}
.topbar a{color:#cdbfa9}
.topbar .tb-right{display:flex;gap:18px;align-items:center}
.nav{display:flex;align-items:center;gap:18px;height:72px;transition:height var(--t-base) var(--ease-wood)}
header.shrink .nav{height:58px}
.logo img{height:34px;width:auto;transition:height var(--t-base) var(--ease-wood)}
header.shrink .logo img{height:28px}
.nav-links{display:flex;gap:4px;margin-left:8px;flex:1;flex-wrap:wrap}
.nav-links a{padding:.5em .7em;border-radius:8px;font-size:.9rem;font-weight:500;color:#e8ddcc;transition:.15s;cursor:pointer;white-space:nowrap;position:relative}
.nav-links a::after{content:"";position:absolute;left:.7em;right:.7em;bottom:.28em;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)}
.nav-links a:hover{background:rgba(255,255,255,.08)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active{background:var(--grad-gold);color:#3A2415}
.nav-links a.active::after{display:none}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{background:rgba(255,255,255,.08);border:none;color:#f4ece0;width:42px;height:42px;border-radius:10px;cursor:pointer;display:grid;place-items:center;position:relative;transition:.15s}
.icon-btn:hover{background:rgba(255,255,255,.18)}
.icon-btn:active{transform:scale(.94)}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--grad-gold);color:#3A2415;font-size:.68rem;font-weight:700;min-width:19px;height:19px;border-radius:50px;display:grid;place-items:center;padding:0 4px;font-family:'Inter'}
.cart-count.bump{animation:cartBump .45s var(--ease-snap)}
@keyframes cartBump{0%{transform:scale(1)}35%{transform:scale(1.5)}65%{transform:scale(.9)}100%{transform:scale(1)}}
.burger{display:none;background:none;border:none;color:#f4ece0;width:42px;height:42px;cursor:pointer;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:#f4ece0;border-radius:2px;transition:transform var(--t-base) var(--ease-out),opacity var(--t-fast)}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile nav scrim */
.nav-scrim{position:fixed;inset:0;background:rgba(20,12,6,.5);z-index:55;opacity:0;visibility:hidden;transition:opacity var(--t-base);backdrop-filter:blur(2px)}
.nav-scrim.open{opacity:1;visibility:visible}

/* views */
.view{display:none}
.view.active{display:block;animation:viewIn var(--t-base) var(--ease-out)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
section{padding:64px 0}
.section-tight{padding:42px 0}

/* reveal engine */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);will-change:transform,opacity}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:0ms}
.stagger.in>*:nth-child(2){transition-delay:70ms}
.stagger.in>*:nth-child(3){transition-delay:140ms}
.stagger.in>*:nth-child(4){transition-delay:210ms}
.stagger.in>*:nth-child(n+5){transition-delay:280ms}

/* HERO */
.hero{position:relative;min-height:82svh;display:flex;align-items:center;color:#fff;overflow:hidden;
  background:var(--espresso)}
.hero-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;
  background-image:var(--grad-hero),url('https://thefloors.pl/wp-content/uploads/2025/07/floor-scaled.jpg');
  animation:kenBurns 22s ease-in-out infinite alternate;will-change:transform}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-weave{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px),
    repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 14px);
  -webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.hero .wrap{position:relative;z-index:2;padding-top:40px;padding-bottom:40px}
.hero h1{color:#fff;max-width:14ch;font-size:clamp(2.6rem,6.2vw,5rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-optical-sizing:auto}
.hero h1 .accent{color:var(--gold-bright)}
.hero p.lead{font-size:1.2rem;max-width:46ch;color:#f0e7d8}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-badges{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap}
.hb{display:flex;flex-direction:column}
.hb b{font-family:var(--font-display);font-weight:700;font-size:1.7rem;line-height:1;color:#fff}
.hb span{font-size:.82rem;color:#e2d6c2;letter-spacing:.03em}
/* hero plank-in */
.plank{opacity:0;transform:translateX(-28px);clip-path:inset(0 100% 0 0)}
.hero.lit .plank{opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity var(--t-hero) var(--ease-wood),transform var(--t-hero) var(--ease-wood),clip-path var(--t-hero) var(--ease-wood)}
.hero.lit .plank:nth-child(1){transition-delay:80ms}
.hero.lit .plank:nth-child(2){transition-delay:200ms}
.hero.lit .plank:nth-child(3){transition-delay:340ms}
.hero.lit .plank:nth-child(4){transition-delay:500ms}

/* trust strip */
.trust{background:var(--espresso);background-image:var(--wood-grain);color:#efe6d8}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:32px 22px}
.trust .t{text-align:center}
.trust .t b{font-family:var(--font-display);font-weight:700;font-size:1.9rem;display:block;color:#fff}
.trust .t span{font-size:.82rem;color:#cdbb9d;letter-spacing:.04em}

/* category blocks */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;
  color:#fff;cursor:pointer;box-shadow:var(--shadow);transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base)}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.cat-card:hover img{transform:scale(1.08)}
.cat-card .ov{position:relative;z-index:2;padding:26px;background:linear-gradient(transparent,rgba(34,18,8,.88));width:100%}
.cat-card h3{color:#fff;margin-bottom:.2em}
.cat-card span{font-size:.85rem;color:#ecddc6}
.cat-card:active{transform:scale(.99)}

/* split feature */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;height:100%;object-fit:cover;max-height:460px}
.ul-check{list-style:none;padding:0;margin:1em 0}
.ul-check li{padding:.45em 0 .45em 2em;position:relative}
.ul-check li:before{content:"✓";position:absolute;left:0;color:var(--gold-deep);font-weight:700;background:var(--gold-soft);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.8rem}

/* product grid */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prod-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
  transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base),border-color var(--t-base)}
.prod-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--sand)}
.prod-card:active{transform:scale(.99)}
.prod-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.prod-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.prod-card:hover .prod-thumb img{transform:scale(1.08)}
.badge{position:absolute;top:12px;left:12px;background:var(--espresso);color:#fff;font-size:.68rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:.35em .7em;border-radius:6px;z-index:2}
.badge.b-water{background:var(--green)}
.badge.b-best{background:var(--grad-gold);color:#3A2415}
.badge.b-stock{background:var(--gold-deep)}
.badge.tr{left:auto;right:12px;background:rgba(255,255,255,.94);color:var(--ink)}
.prod-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-deep);font-weight:700}
.prod-name{font-family:var(--font-display);font-size:1.08rem;font-weight:700;line-height:1.18;letter-spacing:-.01em}
.stars{color:var(--gold);font-size:.85rem;letter-spacing:1px}
.stars span{color:var(--ink-soft);font-size:.78rem;margin-left:4px}
.prod-price{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prod-price b{font-size:1.25rem;font-family:var(--font-display);font-weight:700}
.prod-price small{color:var(--ink-soft);font-size:.78rem}
.prod-pack{font-size:.76rem;color:var(--ink-soft)}
.prod-card .btn{margin-top:10px;transform:translateY(8px);opacity:.85;transition:transform var(--t-base) var(--ease-out),opacity var(--t-base)}
.prod-card:hover .btn{transform:translateY(0);opacity:1}

/* sample bar */
.sample-bar{background:var(--grad-wood);color:#fff;border-radius:var(--radius);padding:36px;display:flex;position:relative;overflow:hidden;
  justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;box-shadow:var(--shadow)}
.sample-bar::after{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  background:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 16px),repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 16px)}
.sample-bar>*{position:relative;z-index:1}
.sample-bar h3{color:#fff;font-size:1.5rem;margin:0}

/* about owner */
.owner{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
.owner img{border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.sig{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:1.3rem;color:var(--wood-dark)}

/* reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev-card{background:var(--surface);border-radius:var(--radius);padding:26px;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base)}
.rev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rev-card .stars{margin-bottom:10px}
.rev-author{display:flex;align-items:center;gap:12px;margin-top:14px}
.rev-author .av{width:42px;height:42px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;font-weight:700;color:#3A2415;font-family:var(--font-display)}

/* newsletter */
.news{background:var(--espresso);background-image:var(--wood-grain);color:#f3ead9;border-radius:var(--radius);padding:48px;text-align:center;position:relative;overflow:hidden}
.news h2{color:#fff}
.news-form{display:flex;gap:10px;max-width:480px;margin:18px auto 0;flex-wrap:wrap}
.news-form input{flex:1;min-width:200px;padding:.9em 1.1em;border-radius:8px;border:none;font-family:inherit;font-size:.95rem}

/* footer */
footer{background:var(--espresso);background-image:var(--wood-grain);color:#cdbfa9;padding:60px 0 28px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer h4{color:#fff;font-family:'Inter';font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1em}
footer a{display:block;color:#bdae97;padding:.28em 0;transition:.15s}
footer a:hover{color:#fff}
footer .logo img{height:30px;margin-bottom:14px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#9c8f7c}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#e8ddcc;transition:.15s}
.socials a:hover{background:var(--grad-gold);color:#3A2415}

/* SHOP layout */
.shop-layout{display:grid;grid-template-columns:268px 1fr;gap:34px;align-items:start}
.filters{position:sticky;top:120px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.filter-group{padding:14px 0;border-bottom:1px solid var(--line)}
.filter-group:last-child{border:none}
.filter-group h4{font-family:'Inter';font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:.7em}
.chk{display:flex;align-items:center;gap:9px;padding:.28em 0;font-size:.9rem;cursor:pointer;color:var(--ink-soft);min-height:36px}
.chk input{accent-color:var(--gold);width:16px;height:16px}
.chk:hover{color:var(--ink)}
.pill-row{display:flex;flex-wrap:wrap;gap:7px}
/* pille filtrów — lekko ścięty jeden róg (deska) zamiast owalu, dla spójności z guzikami */
.pill{border:1.5px solid var(--line);background:var(--surface);border-radius:3px;
  clip-path:polygon(8px 0, 100% 0, 100% 100%, 0 100%);
  padding:.4em .9em .4em .95em;font-size:.8rem;cursor:pointer;transition:.15s;color:var(--ink-soft);min-height:40px;display:inline-flex;align-items:center}
.pill:hover{border-color:var(--gold);color:var(--gold-deep)}
.pill.on{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.pill:active{transform:scale(.96)}
.shop-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.shop-top select{padding:.6em 1em;border-radius:8px;border:1.5px solid var(--line);font-family:inherit;background:var(--surface)}
.swatch{width:18px;height:18px;border-radius:5px;border:1px solid rgba(0,0,0,.1)}

/* mobile filter drawer toggle bar (hidden on desktop) */
.shop-mobile-bar{display:none;gap:10px;margin-bottom:18px}
.shop-mobile-bar button{flex:1;min-height:46px}
.filters-scrim{position:fixed;inset:0;background:rgba(20,12,6,.5);z-index:90;opacity:0;visibility:hidden;transition:opacity var(--t-base)}
.filters-scrim.open{opacity:1;visibility:visible}

/* product detail */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:46px;align-items:start}
.gallery .main{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow)}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .thumbs{display:flex;gap:10px;margin-top:12px}
.gallery .thumbs img{width:84px;height:64px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:border-color var(--t-fast),transform var(--t-fast)}
.gallery .thumbs img.on,.gallery .thumbs img:hover{border-color:var(--gold);transform:translateY(-2px)}
.pdp-badge{position:absolute;bottom:14px;left:14px;background:rgba(255,255,255,.95);padding:.5em .9em;border-radius:6px;font-size:.8rem;font-weight:600;box-shadow:var(--shadow);display:flex;gap:6px;align-items:center}
.price-block{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:10px 0}
.price-block .big{font-family:var(--font-display);font-weight:700;font-size:2.2rem;letter-spacing:-.02em}
.price-block .pack{color:var(--ink-soft)}
.calc{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:20px 0}
.calc label{font-size:.82rem;font-weight:600;display:block;margin-bottom:6px}
.calc-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.calc input,.calc-input{padding:.7em 1em;border-radius:8px;border:1.5px solid var(--sand);font-family:inherit;font-size:1rem;width:130px;background:var(--surface)}
.calc-out{background:var(--surface);border:1px dashed var(--gold);border-radius:10px;padding:14px;margin-top:14px;display:grid;gap:6px;font-size:.92rem}
.calc-out .tot{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--wood-dark)}
.pdp-cta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.spec-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem}
.spec-table td{padding:.7em .4em;border-bottom:1px solid var(--line)}
.spec-table td:first-child{color:var(--ink-soft);width:48%}
.spec-table td:last-child{font-weight:600}
.install-box{background:var(--cream-2);border-radius:var(--radius);padding:22px;display:flex;gap:16px;align-items:center;margin:20px 0}
.install-box .ic{font-size:2rem}
.cross-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cross-card{border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;font-size:.85rem;cursor:pointer;background:var(--surface);transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base)}
.cross-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cross-card img{aspect-ratio:1;object-fit:cover;border-radius:8px;margin-bottom:8px}

/* cart */
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:start}
.cart-item{display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);animation:viewIn var(--t-base) var(--ease-out)}
.cart-item img{border-radius:10px;aspect-ratio:1;object-fit:cover}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;width:fit-content}
.qty button{border:none;background:var(--cream);width:44px;height:44px;cursor:pointer;font-size:1.2rem;transition:background var(--t-fast)}
.qty button:hover{background:var(--cream-2)}
.qty button:active{transform:scale(.92)}
.qty span{padding:0 14px;min-width:46px;text-align:center}
.summary{background:var(--cream);border-radius:var(--radius);padding:26px;border:1px solid var(--line);position:sticky;top:120px}
.sum-row{display:flex;justify-content:space-between;padding:.5em 0;font-size:.95rem}
.sum-row.tot{border-top:2px solid var(--espresso);margin-top:10px;padding-top:14px;font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.track-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.track-opt{border:2px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;text-align:center;transition:.15s;background:var(--surface)}
.track-opt.on{border-color:var(--gold);background:var(--surface);box-shadow:var(--shadow-gold)}
.track-opt .ic{font-size:1.6rem}
.track-opt small{color:var(--ink-soft);display:block;font-size:.78rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{background:var(--surface);border-radius:var(--radius);padding:26px;border:1px solid var(--line);position:relative;box-shadow:var(--shadow);transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.step .num{width:46px;height:46px;display:grid;place-items:center;margin-bottom:14px;color:#3A2415;
  font-family:var(--font-display);font-size:1.2rem;font-weight:700;background:var(--grad-gold);
  clip-path:polygon(50% 0,100% 28%,100% 100%,0 100%,0 28%);box-shadow:0 4px 12px rgba(216,144,26,.3)}
.step h3{font-size:1.1rem}

/* form */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{font-size:.85rem;font-weight:600;display:block;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:.8em 1em;border-radius:9px;border:1.5px solid var(--line);font-family:inherit;font-size:.95rem;background:var(--surface)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.price-list{width:100%;border-collapse:collapse}
.price-list th,.price-list td{padding:.8em;text-align:left;border-bottom:1px solid var(--line)}
.price-list th{font-family:'Inter';font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.price-list td:last-child{font-weight:700;text-align:right;font-family:var(--font-display)}

/* portfolio */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pf-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;aspect-ratio:4/3;box-shadow:var(--shadow);transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base)}
.pf-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.pf-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.pf-card:hover img{transform:scale(1.08)}
.pf-card .ov{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(34,18,8,.88));display:flex;
  align-items:flex-end;padding:20px;color:#fff;opacity:0;transition:opacity var(--t-base)}
.pf-card:hover .ov{opacity:1}
.pf-card .ov h4{color:#fff;font-family:var(--font-display);margin:0}
.pf-card .ov span{font-size:.8rem;color:#ecddc6}

/* (split-tile usunięty — cięcie po przekątnej przeniesione na Montaż jako .split-step;
   .split-grid zachowany jako bezpieczny alias siatki, gdyby był referencjonowany) */
.split-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.split-grid.cols-2{grid-template-columns:repeat(2,1fr)}

/* ============ MONTAŻ — kroki cięte po przekątnej (zdjęcie | tekst) ============ */
/* Każdy krok = poziomy baner przecięty po skosie na dwie połówki, które
   ruszają się NIEZALEŻNIE (różne data-speed) i wjeżdżają z przeciwnych stron. */
.mont-steps{display:flex;flex-direction:column;gap:24px;margin-top:8px}
.split-step{position:relative;height:228px;border-radius:var(--radius);overflow:hidden;
  filter:drop-shadow(0 16px 38px rgba(58,36,21,.18))}
.split-step .half{position:absolute;top:0;bottom:0;will-change:transform;backface-visibility:hidden}
/* połówka ZDJĘCIE — lewa, prawa krawędź ścięta pod skosem */
.split-step .half-photo{left:0;right:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%);
  -webkit-clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%);z-index:1}
.split-step .half-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(20,12,6,.05),rgba(20,12,6,.32))}
/* połówka TEKST — prawa, lewa krawędź ścięta (dopełnienie) */
.split-step .half-text{left:0;right:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:26px 30px 26px 64px;color:#fff;
  background-color:var(--espresso);background-image:var(--wood-grain);
  clip-path:polygon(46px 0,100% 0,100% 100%,0 100%);
  -webkit-clip-path:polygon(46px 0,100% 0,100% 100%,0 100%)}
.split-step .half-text .st-num{font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:1;
  color:var(--gold-bright);letter-spacing:-.02em;margin-bottom:.12em}
.split-step .half-text h3{color:#fff;margin:0 0 .35em;font-size:1.3rem}
.split-step .half-text p{margin:0;color:#f0e2cf;font-size:.92rem;line-height:1.5;max-width:46ch}
/* układ: zdjęcie po lewej / tekst po prawej (połówki zajmują ~55% z zakładką w strefie cięcia) */
.split-step .half-photo{width:55%}
.split-step .half-text{left:auto;width:55%;right:0}
/* (złoty seam usunięty — przy filter+overflow:hidden wychodził poza kafel; skos + odstęp same w sobie czytają cięcie) */
/* rytm naprzemienny — krok parzysty: zdjęcie po prawej, tekst po lewej */
.split-step.flip .half-photo{left:auto;right:0;
  clip-path:polygon(46px 0,100% 0,100% 100%,0 100%);
  -webkit-clip-path:polygon(46px 0,100% 0,100% 100%,0 100%)}
.split-step.flip .half-text{left:0;right:auto;padding:26px 64px 26px 30px;text-align:right;align-items:flex-end;
  clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%);
  -webkit-clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%)}
.split-step.flip .half-text p{text-align:right}
/* (flip seam też usunięty) */
/* delikatny odstęp między połówkami (rozsunięcie wzdłuż normalnej do cięcia) */
.split-step .half-photo{transform:translateX(-6px)}
.split-step .half-text{transform:translateX(6px)}
/* animacja wejścia (reveal): połówki wjeżdżają z przeciwnych stron */
.split-step:not(.shown) .half-photo{opacity:0;transform:translateX(-60px)}
.split-step:not(.shown) .half-text{opacity:0;transform:translateX(60px)}
.split-step.shown .half-photo{opacity:1;transform:translateX(-6px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-wood)}
.split-step.shown .half-text{opacity:1;transform:translateX(6px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-wood)}

/* ============ GALERIA REALIZACJI (czyste karty, bez cięcia) ============ */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gal-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--surface);
  box-shadow:var(--shadow);transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base)}
.gal-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.gal-card .gal-img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.gal-card:hover .gal-img{transform:scale(1.06)}
/* prostokątny pasek z rodzajem panela — ostre rogi, u góry karty */
.gal-card .gal-panel{position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.03em;
  background:var(--espresso);color:#fff;padding:.42em .8em;border-radius:0;
  box-shadow:0 4px 12px rgba(20,12,6,.32)}
.gal-card .gal-panel::before{content:"";display:inline-block;width:7px;height:7px;margin-right:.5em;
  background:var(--gold-bright);vertical-align:middle}
.gal-card .gal-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 16px 14px;color:#fff;
  background:linear-gradient(transparent,rgba(20,12,6,.86))}
.gal-card .gal-body h4{color:#fff;margin:0 0 .12em;font-size:1.05rem}
.gal-card .gal-body span{font-size:.8rem;color:#ecddc6}

/* visualizer */
.viz-upload{border:2.5px dashed var(--sand);border-radius:var(--radius);padding:50px;text-align:center;background:var(--cream);cursor:pointer;transition:.2s}
.viz-upload:hover{border-color:var(--gold);background:var(--cream-2)}
.viz-scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.viz-scenes .sc{border-radius:10px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:1;transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base)}
.viz-scenes .sc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.viz-scenes img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.viz-scenes .sc:hover img{transform:scale(1.08)}

/* visualizer — interactive tool */
.viz-app{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
.viz-stage-wrap{min-width:0}
.viz-stage{position:relative;width:100%;max-width:900px;aspect-ratio:16/10;margin:0 auto;
  background:#ece3d6;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(58,36,21,.08),inset 0 0 60px rgba(58,36,21,.12);
  touch-action:none;user-select:none;-webkit-user-select:none}
#vizPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
#vizFloor{position:absolute;top:0;left:0;width:600px;height:400px;transform-origin:0 0;
  background-repeat:repeat;background-size:120px;mix-blend-mode:multiply;pointer-events:none;
  will-change:transform;image-rendering:auto}
.viz-stage.no-realism #vizFloor{mix-blend-mode:normal}
.viz-guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.viz-guides polygon{fill:none;stroke:rgba(216,144,26,.65);stroke-width:1.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.viz-handle{position:absolute;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold-deep));
  border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 0 1px rgba(58,36,21,.3);
  transform:translate(-50%,-50%);cursor:grab;z-index:5;touch-action:none}
.viz-handle::after{content:"";position:absolute;inset:-12px}/* easier grab target */
.viz-handle:active,.viz-handle.drag{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15)}
.viz-privacy{font-size:.84rem;color:var(--wood-dark);text-align:center;margin:12px 0 0;font-weight:600}
.viz-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);position:sticky;top:120px}
.viz-group{margin-bottom:22px}
.viz-group:last-child{margin-bottom:0}
.viz-label{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--espresso);display:block;margin-bottom:10px}
.viz-btn-row{display:flex;flex-direction:column;gap:10px}
.viz-file-btn{cursor:pointer;text-align:center}
.viz-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.viz-sw{aspect-ratio:1;border-radius:9px;cursor:pointer;border:2px solid transparent;overflow:hidden;
  position:relative;box-shadow:var(--shadow);transition:transform .15s var(--ease-wood),border-color .15s}
.viz-sw img{width:100%;height:100%;object-fit:cover;display:block}
.viz-sw:hover{transform:translateY(-2px)}
.viz-sw.active{border-color:var(--gold)}
.viz-sw .viz-sw-name{position:absolute;left:0;right:0;bottom:0;font-size:.6rem;font-weight:700;color:#fff;
  background:linear-gradient(transparent,rgba(58,36,21,.85));padding:9px 3px 3px;text-align:center;line-height:1.1}
.viz-hint{font-size:.84rem;margin:0 0 12px}
.viz-controls{display:flex;flex-direction:column;gap:14px}
.viz-ctrl{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--espresso)}
.viz-ctrl span{flex:0 0 56px}
.viz-ctrl input[type=range]{flex:1;accent-color:var(--gold-deep)}
.viz-toggle{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;line-height:1.35;color:var(--wood-dark);cursor:pointer}
.viz-toggle input{margin-top:2px;accent-color:var(--gold-deep);flex:0 0 auto}
.viz-soon{font-size:.8rem;margin:14px 0 0;color:var(--gold-deep);font-weight:600}
@media(max-width:860px){
  .viz-app{grid-template-columns:1fr}
  .viz-panel{position:static;top:auto}
  .viz-handle{width:34px;height:34px}
}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;background:var(--surface);
  transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base)}
.blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.blog-card img{aspect-ratio:16/10;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.blog-card:hover img{transform:scale(1.05)}
.blog-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-deep);font-weight:700}
.blog-card h3{font-size:1.1rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.info-line{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.info-line .ic{font-size:1.3rem;width:30px}
.map-mock{aspect-ratio:16/11;border-radius:var(--radius);background:
  radial-gradient(circle at 60% 40%,rgba(216,144,26,.28),transparent 42%),
  repeating-linear-gradient(45deg,#eadfca,#eadfca 18px,#e2d3ba 18px,#e2d3ba 20px);
  display:grid;place-items:center;color:var(--ink-soft);border:1px solid var(--line);position:relative}
.map-mock .pin{position:absolute;top:42%;left:58%;font-size:2rem}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(34,18,8,.62);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.modal-bg.open{display:flex;animation:viewIn .22s var(--ease-out)}
.modal{background:var(--surface);border-radius:var(--radius);max-width:560px;width:100%;padding:30px;position:relative;box-shadow:var(--shadow-lg);max-height:90vh;overflow:auto;animation:modalPop .3s var(--ease-snap)}
@keyframes modalPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink-soft)}
.modal-img{aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin-bottom:16px}

/* sticky mobile CTA */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;background:var(--espresso);background-image:var(--wood-grain);color:#fff;z-index:80;display:none;
  padding:10px 16px;gap:10px;box-shadow:0 -4px 20px rgba(20,12,6,.3)}
.sticky-cta .btn{flex:1}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--espresso);color:#fff;
  padding:.9em 1.5em;border-radius:8px;z-index:300;opacity:0;transition:transform var(--t-base) var(--ease-snap),opacity var(--t-base);font-weight:600;font-size:.9rem;box-shadow:var(--shadow-lg)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

.page-head{background:var(--cream);padding:48px 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;right:-40px;top:-30px;width:240px;height:240px;opacity:.1;pointer-events:none;
  background:repeating-linear-gradient(135deg,var(--gold) 0 2px,transparent 2px 15px),repeating-linear-gradient(45deg,var(--gold) 0 2px,transparent 2px 15px);
  -webkit-mask:radial-gradient(circle,#000,transparent 70%);mask:radial-gradient(circle,#000,transparent 70%)}
.page-head h1{margin-bottom:.2em}
.page-head .wrap{position:relative;z-index:1}
.breadcrumb{font-size:.82rem;color:var(--ink-soft);margin-bottom:.6em}
.breadcrumb a{color:var(--gold-deep);cursor:pointer}

.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}

/* focus-visible — obejmuje kształt deski */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

@media(max-width:1000px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(82vw,330px);
    background:var(--espresso);background-image:var(--wood-grain);flex-direction:column;padding:88px 18px 24px;gap:4px;z-index:58;
    transform:translateX(100%);transition:transform var(--t-base) var(--ease-out);box-shadow:-14px 0 40px rgba(0,0,0,.4);overflow-y:auto}
  .nav-links.open.show{transform:translateX(0)}
  .nav-links.open a{width:100%;padding:.85em .9em;font-size:1.02rem}
  .prod-grid,.cat-grid,.rev-grid,.pf-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .split-grid,.split-grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .shop-layout,.pdp,.cart-layout,.split,.owner,.contact-grid{grid-template-columns:1fr}
  .filters{position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);z-index:95;border-radius:0;overflow-y:auto;
    transform:translateX(100%);transition:transform var(--t-base) var(--ease-out)}
  .filters.show{transform:translateX(0)}
  .shop-mobile-bar{display:flex}
  .steps{grid-template-columns:repeat(2,1fr)}
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .cross-grid,.viz-scenes{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .summary{position:static}
  .sticky-cta{display:flex}
  body{padding-bottom:64px}
  .toast{bottom:80px}
}
@media(max-width:560px){
  .prod-grid,.cat-grid,.rev-grid,.pf-grid,.blog-grid,.viz-scenes,.cross-grid{grid-template-columns:1fr}
  .split-grid,.split-grid.cols-2,.gallery-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  section{padding:44px 0}
  .news,.sample-bar{padding:28px}
  .hero-cta .btn{width:100%}
  .hero-badges{gap:16px 22px}
}
@media(max-width:640px){
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  /* montaż-kroki: złóż do pionu (zdjęcie nad tekstem), bez cięcia/odstępu — czytelność > efekt */
  .split-step{height:auto;display:flex;flex-direction:column}
  .split-step .half{position:relative;left:auto!important;right:auto!important;width:100%!important;
    transform:none!important;opacity:1!important;clip-path:none!important;-webkit-clip-path:none!important}
  .split-step .half-photo{height:160px}
  .split-step .half-text,.split-step.flip .half-text{padding:22px 22px;text-align:left;align-items:flex-start}
  .split-step.flip .half-text p{text-align:left}
  .split-step::after{display:none}
}
/* mobile: 16px inputs (no iOS zoom) + show card CTA permanently on touch */
@media(max-width:1000px){
  input,select,textarea,.calc input,.calc-input,.news-form input{font-size:16px}
}
@media(hover:none){
  .prod-card .btn{transform:none;opacity:1}
  .pf-card .ov{opacity:1;background:linear-gradient(transparent 55%,rgba(34,18,8,.8))}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.stagger>*,.plank{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero-bg{animation:none!important}
  /* parallax OFF — trójkąty statyczne (clip-path zostaje przez !important wyżej, więc przywracamy go inline w JS-free fallbacku) */
  .split-tile .tri{transform:none!important}
  /* montaż-kroki: statycznie, bez parallaxu, bez odstępu-drift, bez reveal-offsetu (czytelnie) */
  .split-step .half-photo,.split-step .half-text,
  .split-step.shown .half-photo,.split-step.shown .half-text,
  .split-step:not(.shown) .half-photo,.split-step:not(.shown) .half-text{transform:none!important;opacity:1!important}
}

/* ============================================================
   WordPress / WooCommerce integration layer for The Floors
   Maps mockup component styles onto WP & Woo markup.
   ============================================================ */

/* --- WP root padding / alignment (works with theme.json useRootPaddingAwareAlignments) --- */
.wp-site-blocks{overflow-x:clip}

/* --- WordPress buttons -> plank buttons (mirror .btn / .btn-primary) --- */
.wp-block-button__link,
.wc-block-components-button:not(.is-link),
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce .button{
  position:relative;display:inline-flex;align-items:center;gap:.5em;border:none;cursor:pointer;
  font-family:inherit;overflow:hidden;font-weight:600;font-size:.95rem;
  padding:.85em calc(1.5em + 14px);border-radius:2px;line-height:1.2;
  clip-path:var(--plank-clip);
  background:var(--grad-gold);color:#2A1B0F;box-shadow:0 4px 14px rgba(216,144,26,.22);
  transition:transform var(--t-fast) var(--ease-wood),box-shadow var(--t-base),background var(--t-base),color var(--t-base);
  text-align:center;justify-content:center;text-decoration:none}
.wp-block-button__link::after,
.woocommerce a.button::after,.woocommerce button.button::after,.woocommerce .button::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:3px;z-index:2;background:#2A1B0F;opacity:.9;
  box-shadow:1px 0 1px rgba(0,0,0,.45) inset}
.wp-block-button__link:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce .button:hover{
  background:var(--gold-bright);color:#2A1B0F;transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.wp-block-button__link:active,
.woocommerce a.button:active,.woocommerce button.button:active{transform:translateY(0) scale(.97);background:var(--gold-deep)}
/* outline button variant -> ghost */
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
.wp-block-button.is-style-outline .wp-block-button__link::after{display:none}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--espresso);color:#fff}

/* --- WooCommerce product loop card -> .prod-card --- */
.woocommerce ul.products,.woocommerce-page ul.products,
ul.wc-block-grid__products,.wc-block-grid__products,
.wp-block-woocommerce-all-products .wc-block-grid__products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;list-style:none}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.wc-block-grid__products li.wc-block-grid__product,
.wc-block-grid__product{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;width:auto!important;margin:0!important;padding:0!important;float:none!important;
  transition:transform var(--t-base) var(--ease-wood),box-shadow var(--t-base),border-color var(--t-base)}
.woocommerce ul.products li.product:hover,
ul.wc-block-grid__products li.wc-block-grid__product:hover,
.wc-block-grid__product:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--sand)}
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
.wc-block-grid__product img{aspect-ratio:4/3;object-fit:cover;background:var(--cream);margin:0;border-radius:0;
  transition:transform var(--t-slow) var(--ease-out)}
.woocommerce ul.products li.product:hover a img{transform:scale(1.06)}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title{
  font-family:var(--font-display);font-size:1.08rem;font-weight:700;line-height:1.18;letter-spacing:-.01em;
  color:var(--ink);padding:14px 16px 4px;margin:0}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price{color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.2rem;
  padding:0 16px;margin:0}
.woocommerce ul.products li.product .price del{color:var(--ink-soft);font-weight:400;font-size:.85rem}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .button,
.wc-block-grid__product .wp-block-button__link{margin:12px 16px 16px}
/* category eyebrow label inside loop (rendered via woocommerce_shop_loop hooks) */
.woocommerce ul.products li.product .tf-loop-cat{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-deep);font-weight:700;
  padding:14px 16px 0;display:block}
.woocommerce ul.products li.product .star-rating{color:var(--gold);margin:6px 16px;font-size:.85rem}

/* --- Sale flash / onsale badge -> .badge --- */
.woocommerce span.onsale,.wc-block-grid__product-onsale{
  background:var(--grad-gold);color:#3A2415;font-size:.68rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:.35em .7em;border-radius:6px;min-height:0;min-width:0;line-height:1.3;
  top:12px;left:12px;right:auto;margin:0;position:absolute}

/* --- Single product (PDP) --- */
.woocommerce div.product .product_title{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--wood-dark);font-family:var(--font-display);font-weight:700;font-size:2rem}
.woocommerce div.product p.price del{font-size:1.1rem;color:var(--ink-soft)}
.woocommerce .woocommerce-product-gallery{border-radius:var(--radius);overflow:hidden}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--gold)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--ink)}
.woocommerce .quantity input.qty{padding:.7em .6em;border:1.5px solid var(--sand);border-radius:8px;
  font-family:inherit;background:var(--surface)}
.woocommerce table.shop_attributes th{color:var(--ink-soft)}
.woocommerce table.shop_attributes td{font-weight:600}

/* --- Cart & checkout --- */
.woocommerce-cart table.cart,.woocommerce table.shop_table{
  border:1px solid var(--line);border-radius:var(--radius);border-collapse:separate;overflow:hidden}
.woocommerce table.shop_table th{font-family:'Inter';text-transform:uppercase;letter-spacing:.06em;
  font-size:.8rem;color:var(--ink-soft)}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce .cart_totals{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:8px 22px 22px}
.woocommerce .cart_totals h2,.woocommerce-checkout #order_review_heading{font-family:var(--font-display)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce-checkout select,.select2-container .select2-selection{
  border:1.5px solid var(--line)!important;border-radius:9px!important;background:var(--surface);
  font-family:inherit;padding:.7em 1em;min-height:auto}
.woocommerce form .form-row input.input-text:focus{outline:none;border-color:var(--gold)!important;
  box-shadow:0 0 0 3px var(--gold-soft)}

/* --- Woo notices --- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{
  border-radius:10px;border-top-color:var(--gold)!important}
.woocommerce-message{border-left:4px solid var(--gold)}

/* --- Block group helpers reused by templates/patterns --- */
.tf-section{padding:64px 0}
.tf-section.is-cream{background:var(--cream)}
.tf-dark{background:var(--espresso);background-image:var(--wood-grain);color:#efe6d8}
.tf-dark h1,.tf-dark h2,.tf-dark h3{color:#fff}

/* --- Page header band for interior pages --- */
.tf-page-head{background:var(--cream);padding:48px 0;border-bottom:1px solid var(--line)}

/* --- Editor-only: make group backgrounds visible in Site Editor --- */
.editor-styles-wrapper .tf-dark{color:#efe6d8}

/* --- Responsive Woo grids mirror mockup breakpoints --- */
@media(max-width:1000px){
  .woocommerce ul.products,.woocommerce-page ul.products,
  ul.wc-block-grid__products,.wc-block-grid__products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .woocommerce ul.products,.woocommerce-page ul.products,
  ul.wc-block-grid__products,.wc-block-grid__products{grid-template-columns:1fr}
}


/* ELSII hero+fullbleed 2026-07-27 */
.hero{min-height:100svh}
.hero-bg{background-image:var(--grad-hero),url('https://thefloors.elsii.pl/wp-content/uploads/2026/06/floor-scaled-1.jpg')!important}


/* ELSII meblofun-hero 2026-07-27b */
.home header.wp-block-template-part{position:absolute!important;top:0;left:0;right:0;background:transparent!important;box-shadow:none!important}
.home header.wp-block-template-part.shrink{position:fixed!important;background:var(--espresso)!important;box-shadow:0 8px 26px rgba(20,12,6,.4)!important}
.home .topbar{background:transparent!important}
.home .hero-weave{opacity:.05!important}
.home .hero .wrap{text-align:left!important}
.home .hero .wrap>*{margin-left:0!important;margin-right:auto!important}
.home .hero h1{margin-left:0!important}
.home .hero-cta,.home .hero-badges{justify-content:flex-start!important}


/* ELSII meblofun-hero fix 2026-07-27c */
.home .tf-header{background:transparent!important}
.home header.shrink .tf-header{background:var(--espresso)!important}


/* ELSII hamburger 2026-07-27d */
.wp-block-navigation__responsive-container-open{color:#fff!important;opacity:1!important}
.wp-block-navigation__responsive-container-open svg{fill:#fff!important;width:32px;height:32px}
.wp-block-navigation__responsive-container.is-menu-open{background:rgba(26,15,8,.97)!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{color:#fff!important;font-size:1.4rem}
.wp-block-navigation__responsive-container-close{color:#fff!important}


/* ELSII hamburger-force 2026-07-27e */
.tf-nav-links.is-responsive .wp-block-navigation__responsive-container-open{display:flex!important;align-items:center}
.tf-nav-links.is-responsive .wp-block-navigation__responsive-container:not(.is-menu-open):not(.is-menu-open){display:none!important}
.tf-nav-links.is-responsive .wp-block-navigation__responsive-container.is-menu-open{display:flex!important}


/* ELSII menu-label 2026-07-27f */
.tf-nav-links{margin-left:auto!important}
.tf-nav-links.is-responsive .wp-block-navigation__responsive-container-open{gap:8px}
.wp-block-navigation__responsive-container-open::after{content:'Menu';color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.home header.shrink .wp-block-navigation__responsive-container-open::after{color:#fff}


/* ELSII menu-left 2026-07-27g */
.tf-header .wrap{justify-content:flex-start!important}
.tf-nav-links{margin-left:14px!important;margin-right:auto!important}


/* ELSII trust-band 2026-07-27h */
.trust{background:#E8A24C!important;background-image:none!important}
.trust .wrap{color:#2A1B0F}
.trust *{color:#2A1B0F!important}


/* ELSII shop-grid 2026-07-27i */
@media(min-width:1000px){.tf-section .products.columns-4{grid-template-columns:repeat(4,1fr)!important}}
@media(min-width:640px) and (max-width:999px){.tf-section .products.columns-4{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:639px){.tf-section .products.columns-4{grid-template-columns:1fr!important}}


/* ELSII white-sections 2026-07-27j */
body{background:#fff!important}
section[style*="--cream"],[style*="background:var(--cream)"],[style*="background: var(--cream)"]{background:#fff!important}
.has-bg-background-color,.has-cream-background-color,.has-cream-2-background-color{background-color:#fff!important}
:root{--bg:#ffffff}


/* ELSII tighten 2026-07-27l */
section:not(.hero){padding-top:42px!important;padding-bottom:42px!important;margin-top:0!important}
.tf-section{padding-top:42px!important;padding-bottom:42px!important;margin-top:0!important}


/* === EL 2026-07-27: wyrownanie guzika Do koszyka do dolu karty === */
ul.products li.product{justify-content:flex-start}
ul.products li.product > p:last-of-type{margin-top:auto;margin-bottom:0}