/*
Theme Name: COMFILL
Theme URI: https://comfill.pl
Author: COMFILL.PL
Description: Motyw sklepu COMFILL.PL — ortopedyczna poduszka zelowa TPE. Klasyczny motyw WordPress z pelnym wsparciem WooCommerce i landing page produktu na stronie glownej.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: comfill
Tags: e-commerce, woocommerce, one-column, custom-colors, dark-mode, translation-ready
WC requires at least: 8.0
WC tested up to: 9.5
*/

/* ============================================================
   COMFILL.PL — design system
   Kierunek: "nocne laboratorium snu"
   Głęboki bakłażan + żelowy fiolet + ciepła kość słoniowa
   ============================================================ */

:root{
  --ink:      #0A0611;
  --ink-2:    #100A1C;
  --ink-3:    #170F27;
  --ink-4:    #1F1533;
  --line:     rgba(214,180,255,.14);
  --line-2:   rgba(214,180,255,.28);

  --ivory:    #F3EDE6;
  --muted:    #A294B8;
  --muted-2:  #7C6E92;

  --gel:      #B15CE8;
  --gel-hi:   #D9A6FF;
  --gel-lo:   #7325B0;
  --amber:    #F0B65C;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --r: 18px;
  --r-s: 10px;
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.75,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:86px;
  /* clip zamiast hidden: przycina dekoracje wychodzące poza ekran,
     ale nie tworzy kontenera przewijania, więc position:sticky dalej działa */
  overflow-x:clip;
}

body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 82% -8%, rgba(140,50,205,.30), transparent 62%),
    radial-gradient(900px 620px at 4% 34%, rgba(70,25,120,.28), transparent 60%),
    var(--ink);
  color:var(--ivory);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
}

img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; }
::selection{ background:var(--gel); color:#fff; }

/* ziarno */
.grain{
  position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.wrap{ width:min(var(--wrap), 100% - var(--pad)*2); margin-inline:auto; }

/* ---------- typografia ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.03; letter-spacing:-.022em; margin:0; }

h1{
  font-size:clamp(2.9rem, 6.2vw, 5.1rem);
  font-variation-settings:"SOFT" 30, "WONK" 1, "opsz" 120;
  font-weight:500;
}
h1 em{
  font-style:italic;
  color:var(--gel-hi);
  font-variation-settings:"SOFT" 60, "WONK" 1;
}

.h2{
  font-size:clamp(2rem, 4.1vw, 3.3rem);
  margin-bottom:.5em;
  font-weight:500;
  font-variation-settings:"SOFT" 24, "opsz" 90;
}

.kicker{
  font-family:var(--body);
  font-size:.72rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gel-hi); opacity:.8;
  margin:0 0 1rem;
}

.section-lede{
  color:var(--muted);
  font-size:clamp(1.02rem, 1.5vw, 1.16rem);
  max-width:60ch;
  margin:0 0 2.4rem;
}

/* ---------- przyciski ---------- */
.btn{
  font-family:var(--body); font-size:.96rem; font-weight:600;
  border-radius:100px; border:1px solid transparent;
  padding:.82rem 1.5rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  text-decoration:none; letter-spacing:-.01em;
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.btn--lg{ padding:1.05rem 2rem; font-size:1.02rem; }
.btn--block{ width:100%; }

.btn--solid{
  background:linear-gradient(135deg, var(--gel-hi), var(--gel) 45%, var(--gel-lo));
  color:#14071F;
  box-shadow:0 10px 30px -10px rgba(177,92,232,.75), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(177,92,232,.9), inset 0 1px 0 rgba(255,255,255,.6); }
.btn__old{ opacity:.5; font-weight:500; }

.btn--line{ border-color:var(--line-2); color:var(--ivory); background:rgba(255,255,255,.02); }
.btn--line:hover{ background:rgba(214,180,255,.1); transform:translateY(-2px); }

.btn--ghost{ border-color:var(--line-2); background:transparent; color:var(--ivory); padding:.6rem 1.1rem; font-size:.88rem; }
.btn--ghost:hover{ background:var(--gel); color:#14071F; border-color:transparent; }
.hdr__price{ opacity:.65; font-weight:500; }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:1rem var(--pad);
  backdrop-filter:blur(18px);
  background:rgba(10,6,17,.55);
  border-bottom:1px solid transparent;
  transition:border-color .4s, background .4s, padding .4s;
}
.hdr.is-stuck{ border-bottom-color:var(--line); background:rgba(10,6,17,.85); padding-block:.7rem; }

.brand{ display:flex; align-items:center; gap:.62rem; text-decoration:none; color:var(--ivory); margin-right:auto; }

.nav{ display:flex; gap:1.9rem; font-size:.9rem; }
.nav a{ text-decoration:none; color:var(--muted); position:relative; transition:color .3s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--gel-hi); transition:width .35s var(--ease); }
.nav a:hover{ color:var(--ivory); }
.nav a:hover::after{ width:100%; }

.burger{ display:none; width:40px; height:36px; background:none; border:1px solid var(--line); border-radius:9px; cursor:pointer; padding:0; position:relative; }
.burger span{ position:absolute; left:11px; width:18px; height:1.5px; background:var(--ivory); transition:.3s var(--ease); }
.burger span:nth-child(1){ top:14px; } .burger span:nth-child(2){ top:20px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:17px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ top:17px; transform:rotate(-45deg); }

.mobilenav[hidden]{ display:none; }
.mobilenav{ position:sticky; top:64px; z-index:99; background:rgba(10,6,17,.96); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); padding:1rem var(--pad) 1.6rem; display:flex; flex-direction:column; gap:.2rem; }
.mobilenav a{ text-decoration:none; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
/* Wyższa specyficzność niż `.mobilenav a`, inaczej padding i obramowanie
   z reguły powyżej nadpisałyby wygląd przycisku. */
.mobilenav .mobilenav__cta{
  display:flex; align-items:center; justify-content:center;
  margin-top:1rem; padding:.95rem 1.4rem;
  border:none; border-radius:100px;
  background:linear-gradient(135deg, var(--gel-hi), var(--gel) 45%, var(--gel-lo));
  color:#14071F; font-weight:600; font-size:1rem; letter-spacing:-.01em;
  box-shadow:0 10px 30px -12px rgba(177,92,232,.75), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mobilenav .mobilenav__cta:active{ transform:translateY(1px); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  display:grid; grid-template-columns:1.02fr .98fr; align-items:center;
  gap:clamp(2rem,5vw,4rem);
  width:min(var(--wrap), 100% - var(--pad)*2); margin-inline:auto;
  padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,8vw,7rem);
}
.hero__glow{
  position:absolute; right:-18%; top:-10%; width:80vw; height:80vw; max-width:1000px; max-height:1000px;
  background:radial-gradient(circle, rgba(177,92,232,.34), transparent 62%);
  filter:blur(30px); pointer-events:none;
}
.hero__comb{
  position:absolute; inset:-10% -30% auto; height:120%; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23B15CE8' stroke-width='1.2'/%3E%3Cpath d='M28 64v33' stroke='%23B15CE8' stroke-width='1.2'/%3E%3C/svg%3E");
  mask-image:radial-gradient(60% 55% at 60% 40%, #000, transparent 75%);
}
.hero__copy{ position:relative; z-index:2; }
.lede{ color:var(--muted); font-size:clamp(1.05rem,1.6vw,1.2rem); max-width:52ch; margin:1.6rem 0 2.4rem; }
.hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; }

.hero__stats{
  list-style:none; padding:0; margin:3rem 0 0;
  display:flex; gap:clamp(1.4rem,4vw,3rem); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:1.7rem;
}
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats b{ font-family:var(--display); font-size:2.1rem; font-weight:500; color:var(--gel-hi); line-height:1; font-variation-settings:"SOFT" 20; }
.hero__stats span{ font-size:.8rem; color:var(--muted-2); letter-spacing:.06em; margin-top:.45rem; text-transform:uppercase; }

.hero__figure{ position:relative; margin:0; z-index:2; }
.hero__halo{
  position:absolute; inset:8% 2% 12%;
  background:radial-gradient(circle at 50% 55%, rgba(177,92,232,.5), transparent 66%);
  filter:blur(46px);
}
.hero__photo, .pillow{
  position:relative; width:100%; height:auto;
  filter:drop-shadow(0 40px 60px rgba(60,10,110,.6));
  animation:float 8s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-14px) rotate(-.5deg) } }

.hero__cap{
  display:flex; align-items:center; gap:.6rem;
  font-size:.8rem; color:var(--muted-2); letter-spacing:.05em;
  margin-top:1rem; justify-content:center;
}
.hero__capdot{ width:5px; height:5px; background:var(--gel); border-radius:50%; flex:none; }

/* ---------- sekcje ---------- */
section{ position:relative; }
.problem, .tech, .anat, .pos, .cmp, .spec, .rev, .offer, .faq, .final{
  padding-block:clamp(4.5rem, 9vw, 8.5rem);
}

/* problem */
.prob-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(255px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.6rem; }
.prob{ background:var(--ink-2); padding:2.2rem 1.8rem 2.4rem; transition:background .4s var(--ease); }
.prob:hover{ background:var(--ink-3); }
.prob__no{ font-family:var(--display); font-size:.9rem; color:var(--gel); letter-spacing:.1em; }
.prob h3{ font-size:1.3rem; margin:.9rem 0 .7rem; font-weight:500; }
.prob p{ color:var(--muted); font-size:.95rem; margin:0; }

/* technologia */
.tech{ background:linear-gradient(180deg, transparent, rgba(23,15,39,.6) 20%, rgba(23,15,39,.6) 80%, transparent); }
.tech-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.4rem; }
.tcard{
  border:1px solid var(--line); border-radius:var(--r);
  padding:2rem 1.7rem 2.2rem;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.tcard:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 24px 50px -26px rgba(177,92,232,.7); }
.tcard__ico{ width:52px; height:52px; color:var(--gel-hi); margin-bottom:1.3rem; }
.tcard__ico svg{ width:100%; height:100%; }
.tcard h3{ font-size:1.24rem; font-weight:500; margin-bottom:.6rem; }
.tcard p{ color:var(--muted); font-size:.94rem; margin:0; }

/* anatomia */
.anat__wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.anat__panels{ margin-top:1rem; min-height:180px; position:relative; }
.anat__panel{
  position:absolute; inset:0; opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  border-left:2px solid var(--gel); padding-left:1.4rem;
}
.anat__panel.is-on{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.anat__panel h3{ font-size:1.5rem; font-weight:500; margin-bottom:.6rem; }
.anat__panel p{ color:var(--muted); margin:0; }

.anat__stage{ position:relative; }
.anat__stage svg, .anat__photo{ width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(60,10,110,.55)); }
.hot{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(15,8,25,.6); backdrop-filter:blur(6px);
  color:var(--ivory); font-family:var(--body); font-size:.82rem; font-weight:600;
  display:grid; place-items:center;
  transition:.35s var(--ease);
}
.hot::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--gel-hi); opacity:0; transition:.4s var(--ease);
}
.hot:hover{ transform:translate(-50%,-50%) scale(1.12); }
.hot.is-on{ background:var(--gel); border-color:transparent; color:#12061C; box-shadow:0 0 26px rgba(177,92,232,.85); }
.hot.is-on::before{ opacity:1; inset:-9px; animation:ring 2.2s var(--ease) infinite; }
@keyframes ring{ 0%{ inset:-4px; opacity:.9 } 100%{ inset:-16px; opacity:0 } }

/* pozycje snu */
.tabs{ display:inline-flex; gap:.35rem; padding:.35rem; border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.025); margin-bottom:2.4rem; flex-wrap:wrap; }
.tab{
  border:none; background:none; cursor:pointer; color:var(--muted);
  font-family:var(--body); font-size:.94rem; font-weight:600;
  padding:.7rem 1.5rem; border-radius:100px; transition:.35s var(--ease);
}
.tab:hover{ color:var(--ivory); }
.tab.is-on{ background:var(--gel); color:#12061C; box-shadow:0 6px 20px -8px rgba(177,92,232,.9); }

.panes{ position:relative; }
.pane{
  display:none; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.8rem,3.5vw,3rem);
  background:linear-gradient(150deg, rgba(177,92,232,.09), rgba(255,255,255,.01));
}
.pane.is-on{ display:grid; animation:fade .5s var(--ease) both; }
@keyframes fade{ from{ opacity:0; transform:translateY(12px) } }
.pane__num{
  font-family:var(--display); font-size:clamp(3rem,7vw,5rem); font-weight:400;
  color:var(--gel-hi); line-height:1; font-variation-settings:"SOFT" 40,"WONK" 1;
  border-right:1px solid var(--line); padding-right:clamp(1.5rem,4vw,3rem);
}
.pane__body h3{ font-size:1.6rem; font-weight:500; margin-bottom:.7rem; }
.pane__body p{ color:var(--muted); margin:0 0 1.4rem; max-width:56ch; }

.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.ticks li{ position:relative; padding-left:1.9rem; color:var(--muted); font-size:.95rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:11px; height:11px; background:var(--gel);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.ticks--lg li{ color:var(--ivory); font-size:1.02rem; }

/* porównanie */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
.cmp__table{ width:100%; border-collapse:collapse; min-width:660px; font-size:.94rem; }
.cmp__table th, .cmp__table td{ padding:1.05rem 1.3rem; text-align:left; border-bottom:1px solid var(--line); }
.cmp__table thead th{ font-family:var(--body); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:600; background:rgba(255,255,255,.025); }
.cmp__table tbody th{ font-weight:500; color:var(--ivory); font-family:var(--body); }
.cmp__table td{ color:var(--muted); }
.cmp__table .is-us{ background:rgba(177,92,232,.11); color:var(--ivory); border-left:1px solid var(--line-2); border-right:1px solid var(--line-2); }
.cmp__table thead .is-us{ background:rgba(177,92,232,.2); color:var(--gel-hi); }
.cmp__table tbody tr:last-child th, .cmp__table tbody tr:last-child td{ border-bottom:none; }

/* specyfikacja */
.spec{ background:rgba(23,15,39,.5); border-block:1px solid var(--line); }
.spec__wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.spec__list{ margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 2.5rem; }
.spec__list > div{ display:flex; justify-content:space-between; gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line); }
.spec__list dt{ color:var(--muted-2); font-size:.88rem; letter-spacing:.04em; }
.spec__list dd{ margin:0; text-align:right; font-size:.94rem; }

/* opinie */
.rev__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.stars{ color:var(--amber); font-size:1.5rem; letter-spacing:.15em; }
.rev__grid{ columns:2; column-gap:1.4rem; }
.rev__card{
  break-inside:avoid; margin:0 0 1.4rem;
  border:1px solid var(--line); border-radius:var(--r);
  padding:1.8rem 1.7rem; background:rgba(255,255,255,.03);
  transition:border-color .4s, transform .4s var(--ease);
}
.rev__card:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.rev__stars{ color:var(--amber); letter-spacing:.12em; font-size:.95rem; margin-bottom:.9rem; }
.rev__card blockquote{ margin:0 0 1.2rem; font-family:var(--display); font-size:1.12rem; line-height:1.5; font-weight:400; font-variation-settings:"SOFT" 30,"opsz" 40; }
.rev__card figcaption{ font-size:.86rem; font-weight:600; display:flex; flex-direction:column; gap:.15rem; }
.rev__card figcaption span{ font-weight:400; color:var(--muted-2); font-size:.8rem; }

/* oferta */
.offer{ overflow:hidden; }
.offer__glow{ position:absolute; left:-10%; bottom:-30%; width:70vw; height:70vw; max-width:900px; background:radial-gradient(circle, rgba(177,92,232,.26), transparent 62%); filter:blur(30px); pointer-events:none; }
.offer__wrap{ display:grid; grid-template-columns:1fr .82fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; position:relative; z-index:2; }
.offer__box{
  border:1px solid var(--line-2); border-radius:22px;
  background:linear-gradient(165deg, rgba(31,21,51,.95), rgba(16,10,28,.95));
  padding:2rem 1.8rem 1.9rem; position:relative;
  box-shadow:0 40px 90px -40px rgba(120,30,190,.9);
}
.offer__badge{
  position:absolute; top:-13px; left:1.8rem;
  background:var(--gel); color:#12061C; font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:.35rem .9rem; border-radius:100px;
}
.variants{ display:grid; gap:.7rem; margin:.6rem 0 1.6rem; }
.variant{
  display:flex; align-items:center; gap:1rem; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-s);
  padding:1rem 1.1rem; transition:.32s var(--ease);
  background:rgba(255,255,255,.02);
}
.variant:hover{ border-color:var(--line-2); }
.variant.is-on{ border-color:var(--gel); background:rgba(177,92,232,.14); box-shadow:inset 0 0 0 1px rgba(177,92,232,.4); }
.variant input{ accent-color:var(--gel); width:17px; height:17px; }
.variant__main{ display:flex; flex-direction:column; margin-right:auto; }
.variant__main b{ font-weight:600; font-size:1rem; }
.variant__main small{ color:var(--muted-2); font-size:.82rem; }
.variant__price{ font-family:var(--display); font-size:1.22rem; font-weight:500; }

.offer__sum{ display:flex; justify-content:space-between; align-items:baseline; padding-top:1.2rem; border-top:1px solid var(--line); }
.offer__sum-label{ color:var(--muted); font-size:.9rem; }
.offer__sum strong{ font-family:var(--display); font-size:2.2rem; font-weight:500; }
.offer__note{ color:var(--gel-hi); font-size:.84rem; margin:.2rem 0 1.4rem; }

.pay{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:1.2rem; }
.pay span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--line); border-radius:6px; padding:.32rem .6rem; }

/* faq */
.faq{ background:rgba(23,15,39,.45); border-block:1px solid var(--line); }
.faq__wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.faq__aside{ position:sticky; top:110px; }
.faq__aside a{ color:var(--gel-hi); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__item summary{
  cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-size:1.08rem; font-weight:500; transition:color .3s;
}
.acc__item summary::-webkit-details-marker{ display:none; }
.acc__item summary::after{
  content:""; position:absolute; right:.4rem; top:1.7rem;
  width:11px; height:11px; border-right:1.5px solid var(--gel-hi); border-bottom:1.5px solid var(--gel-hi);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.acc__item[open] summary::after{ transform:rotate(-135deg); }
.acc__item summary:hover{ color:var(--gel-hi); }
.acc__body{ padding-bottom:1.4rem; animation:fade .4s var(--ease) both; }
.acc__body p{ color:var(--muted); margin:0; max-width:64ch; }

/* final */
.final{ text-align:center; }
.final__wrap{ display:flex; flex-direction:column; align-items:center; gap:2.4rem; }
.final__h{ font-family:var(--display); font-size:clamp(2.2rem,5.6vw,4.4rem); font-weight:400; font-style:italic; line-height:1.08; font-variation-settings:"SOFT" 60,"WONK" 1; }

/* stopka */
.ftr{ border-top:1px solid var(--line); padding-top:clamp(3rem,6vw,5rem); background:rgba(10,6,17,.6); }
.ftr__wrap{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.4rem; padding-bottom:3rem; }
.ftr__brand p{ color:var(--muted-2); font-size:.9rem; max-width:34ch; margin:.9rem 0 0; }
.ftr__col{ display:flex; flex-direction:column; gap:.55rem; }
.ftr__col h4{ font-family:var(--body); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:.4rem; }
.ftr__col a{ text-decoration:none; color:var(--muted); font-size:.92rem; transition:color .3s; }
.ftr__col a:hover{ color:var(--gel-hi); }
.ftr__hours{ color:var(--muted-2); font-size:.82rem; margin:.3rem 0 0; }
.ftr__bar{ border-top:1px solid var(--line); padding:1.3rem var(--pad); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--muted-2); }

/* sticky bar */
.stickybar{
  position:fixed; left:0; bottom:0; z-index:90;
  width:100%; max-width:100%;
  display:none; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.75rem clamp(14px,4vw,26px);
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom, 0px));
  background:rgba(10,6,17,.94); backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.stickybar.is-on{ transform:none; }
.stickybar > div{ min-width:0; overflow:hidden; }
.stickybar b{
  font-family:var(--display); font-size:1.3rem; font-weight:500;
  white-space:nowrap; display:block;
}
.stickybar s{ color:var(--muted-2); font-size:.85rem; margin-left:.5rem; }
.stickybar .btn{ flex:0 0 auto; white-space:nowrap; padding:.75rem 1.25rem; font-size:.92rem; }

/* koszyk */
.scrim{ position:fixed; inset:0; background:rgba(5,2,10,.7); backdrop-filter:blur(4px); z-index:110; animation:fade .3s both; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:120;
  width:min(420px, 100%); background:var(--ink-2); border-left:1px solid var(--line);
  padding:1.6rem 1.5rem 2rem; display:flex; flex-direction:column; gap:1.2rem;
  transform:translateX(105%); transition:transform .5s var(--ease);
  overflow-y:auto;
}
.cart-drawer.is-open{ transform:none; }
.cart__head{ display:flex; justify-content:space-between; align-items:center; }
.cart__head h3{ font-size:1.35rem; font-weight:500; }
.cart__x{ background:none; border:1px solid var(--line); color:var(--ivory); width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:.9rem; transition:.3s; }
.cart__x:hover{ background:var(--gel); color:#12061C; border-color:transparent; }

.cart__item{ display:flex; gap:1rem; padding:1.1rem 0; border-block:1px solid var(--line); }
.cart__thumb{ width:82px; height:70px; border-radius:var(--r-s); background:rgba(177,92,232,.13); display:grid; place-items:center; overflow:hidden; flex:none; }
.cart__thumb svg, .cart__thumb img{ width:110%; height:auto; }
.cart__info{ display:flex; flex-direction:column; gap:.2rem; margin-right:auto; }
.cart__info b{ font-size:.95rem; font-weight:600; }
.cart__info small{ color:var(--muted-2); font-size:.78rem; }
.cart__price{ font-family:var(--display); font-size:1.1rem; white-space:nowrap; }
.qty{ display:inline-flex; align-items:center; gap:.2rem; border:1px solid var(--line); border-radius:100px; margin-top:.5rem; width:max-content; }
.qty button{ width:30px; height:28px; background:none; border:none; color:var(--ivory); cursor:pointer; font-size:1rem; }
.qty button:hover{ color:var(--gel-hi); }
.qty span{ min-width:22px; text-align:center; font-size:.9rem; }

.cart__rows{ display:grid; gap:.7rem; font-size:.92rem; }
.cart__rows > div{ display:flex; justify-content:space-between; color:var(--muted); }
.cart__total{ border-top:1px solid var(--line); padding-top:.8rem; color:var(--ivory) !important; font-size:1.05rem; }
.cart__total b{ font-family:var(--display); font-size:1.5rem; font-weight:500; }
.cart__msg{ background:rgba(240,182,92,.12); border:1px solid rgba(240,182,92,.3); color:var(--amber); font-size:.84rem; padding:.7rem .9rem; border-radius:var(--r-s); margin:0; }
.cart__fine{ text-align:center; font-size:.78rem; color:var(--muted-2); margin:0; }

/* reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease) var(--d,0s), transform .8s var(--ease) var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- responsywność ---------- */
@media (max-width:1024px){
  .hero{ grid-template-columns:1fr; text-align:left; }
  .hero__figure{ order:-1; max-width:520px; }
  .anat__wrap, .offer__wrap, .faq__wrap, .spec__wrap{ grid-template-columns:1fr; }
  .faq__aside{ position:static; }
  .ftr__wrap{ grid-template-columns:1fr 1fr; }
  .rev__grid{ columns:1; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  /* dekoracje hero nie mogą wychodzić poza szerokość ekranu */
  .hero__glow{ right:-6%; left:auto; width:112%; max-width:none; height:60vh; max-height:none; }
  .hero__comb{ inset:-6% 0 auto; }
  .hero__figure{ max-width:none; }
  .hero__cap{ justify-content:flex-start; }
  .nav, .hdr__cta{ display:none; }
  .burger{ display:block; }
  .stickybar{ display:flex; }
  .ftr{ padding-bottom:70px; }
  .pane{ grid-template-columns:1fr; }
  .pane__num{ border-right:none; border-bottom:1px solid var(--line); padding:0 0 1rem; }
  .anat__panels{ min-height:210px; }
  .spec__list dd{ text-align:left; }
  .spec__list > div{ flex-direction:column; gap:.15rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}