/* RATUJESZ24 storefront UI kit - component styles (uses tokens from colors_and_type.css) */
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--sand-100);font-family:var(--font-body);color:var(--fg);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);
  font-weight:700;font-size:var(--fs-button);letter-spacing:var(--ls-button);text-transform:uppercase;
  padding:13px 26px;border-radius:var(--radius-pill);border:1.5px solid transparent;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--champagne-soft);}
.btn:active{transform:translateY(1px) scale(.98);}
.btn-primary{background:var(--brand-500);color:#fff;box-shadow:var(--glow-sm);}
/* color jawnie na hover - inaczej globalne a:hover przejmuje kolor i tekst znika */
.btn-primary:hover,.btn-primary:focus-visible{background:var(--brand-600);color:#fff;box-shadow:var(--glow-md);}
.btn-secondary{background:transparent;color:var(--brand-600);border-color:var(--brand-300);}
.btn-secondary:hover,.btn-secondary:focus-visible{background:var(--brand-500);border-color:var(--brand-500);color:#fff;box-shadow:var(--glow-sm);}
.btn-ghost{background:transparent;color:var(--head-500);}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--sand-200);color:var(--head-500);}
.btn-lg{padding:16px 30px;font-size:1rem;}
.btn-block{width:100%;}
.btn svg{width:18px;height:18px;stroke-width:1.75;}
.btn[disabled]{opacity:.45;pointer-events:none;}

/* ---------- eyebrow ---------- */
.eyebrow{font-family:var(--font-body);font-weight:700;font-size:var(--fs-caption);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--brand-600);}

/* ---------- pill / badge ---------- */
.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;padding:5px 12px;border-radius:var(--radius-pill);}
.pill-solid{background:var(--head-500);color:var(--sand-50);}
.pill-new{background:var(--brand-500);color:#fff;}
.pill-sale{background:var(--success);color:#fff;}
.pill-premium{background:var(--head-500);color:#fff;}
.pill-soft{background:var(--brand-100);color:var(--brand-700);}

/* ---------- card ---------- */
.card{background:var(--sand-50);border:1px solid var(--sand-300);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--sand-100) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--sand-300);
  /* własna warstwa kompozytora - bez niej Chrome rasteryzuje blur od nowa
     w trakcie scrolla i cały pasek mruga */
  transform:translateZ(0);will-change:transform;}
.hdr-top{font-size:12px;color:var(--text-500);background:var(--head-500);}
.hdr-top .container{display:flex;justify-content:center;gap:26px;padding-top:8px;padding-bottom:8px;color:var(--sand-200);letter-spacing:.04em;}
.hdr-top span{display:inline-flex;align-items:center;gap:7px;}
.hdr-top svg{width:14px;height:14px;color:var(--champagne);stroke-width:1.75;}
.hdr-main{display:flex;align-items:center;justify-content:space-between;height:84px;}
.hdr-logo,.custom-logo-link{border:0;text-decoration:none;display:inline-flex;align-items:center;}
.hdr-logo img,.custom-logo-link img{height:61px;width:auto;}
.nav{display:flex;align-items:center;gap:30px;min-width:0;}
.nav-item{position:relative;}
.nav-link{display:inline-flex;align-items:center;gap:5px;font-size:16px;font-weight:400;color:#4a4036;
  letter-spacing:normal;padding:30px 0;border:0;background:none;white-space:nowrap;transition:color var(--dur-fast) var(--ease-out);}
.nav-link:hover,.nav-item.open .nav-link{color:var(--brand-600);}
.nav-link svg{width:15px;height:15px;stroke-width:2;transition:transform var(--dur-fast);}
.nav-item.open .nav-link svg{transform:rotate(180deg);}
.hdr-actions{display:flex;align-items:center;gap:16px;}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:none;color:var(--head-500);transition:background var(--dur-fast);}
.icon-btn:hover{background:var(--sand-200);}
.icon-btn svg{width:21px;height:21px;stroke-width:1.6;}
/* mniejszy wariant ikon w górnym pasku */
.icon-btn-sm{width:34px;height:34px;}
.icon-btn-sm:hover{background:var(--sand-300);}
.icon-btn-sm svg{width:18px;height:18px;}

/* mega menu */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:560px;
  background:var(--sand-50);border:1px solid var(--sand-300);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:26px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;
  opacity:0;visibility:hidden;translate:0 8px;transition:.22s var(--ease-out);}
.nav-item.open .mega{opacity:1;visibility:visible;translate:0 0;}
.mega h5{font-family:var(--font-body);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--brand-600);margin:0 0 12px;font-weight:700;}
.mega ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.mega a{font-size:13.5px;color:var(--text-600);border:0;cursor:pointer;transition:color var(--dur-fast);}
.mega a:hover{color:var(--brand-700);}

/* ---------- product grid ---------- */
.grid-products{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.pcard{overflow:hidden;display:flex;flex-direction:column;cursor:pointer;}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.pcard-img{position:relative;aspect-ratio:4/3.4;overflow:hidden;background:var(--head-500);}
.pcard-imglink img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.pcard:hover .pcard-imglink img{transform:scale(1.04);}
.pcard-badge{position:absolute;top:12px;left:12px;}
.pcard-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;}
.pcard-name{font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--fg-strong);letter-spacing:0;margin:0 0 4px;}
.pcard-meta{font-size:12px;color:var(--fg-muted);margin-bottom:14px;}
.pcard-price{font-size:13px;color:var(--text-600);margin-top:auto;}
.pcard-price b{font-family:var(--font-display);font-size:20px;color:var(--head-500);font-weight:700;}
.pcard .btn{margin-top:14px;}

/* ---------- benefit bar ---------- */
.benefits{background:var(--sand-50);border-top:1px solid var(--sand-300);border-bottom:1px solid var(--sand-300);}
.benefits .container{display:grid;grid-template-columns:repeat(4,1fr);}
.benefit{display:flex;align-items:center;justify-content:center;gap:16px;padding:28px 22px;border-right:1px solid var(--sand-200);}
.benefit:last-child{border-right:0;}
.benefit svg{width:30px;height:30px;color:var(--brand-500);stroke-width:1.5;flex:none;}
.benefit b{display:block;font-size:16px;color:var(--head-500);font-weight:700;}
.benefit span{font-size:13px;color:var(--fg-muted);}

/* ---------- temperature selector ---------- */
.temp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.temp-opt{border:1.5px solid var(--sand-300);border-radius:var(--radius-lg);padding:18px 10px 13px;background:var(--sand-50);
  display:flex;flex-direction:column;align-items:center;gap:9px;transition:.22s var(--ease-standard);}
.temp-opt:hover{border-color:var(--brand-300);}
.temp-orb{width:46px;height:46px;border-radius:50%;}
.temp-opt b{font-size:15px;color:var(--fg-strong);font-weight:700;}
.temp-opt span{font-size:11px;color:var(--fg-muted);}
.temp-opt.sel{border-color:var(--brand-500);background:#fff;box-shadow:var(--shadow-sm);}
.temp-opt.sel b{color:var(--brand-700);}

/* ---------- chips (shape/size/option) ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radius-pill);
  border:1.5px solid var(--sand-300);background:var(--sand-50);font-size:13px;font-weight:700;color:var(--text-600);
  transition:.18s var(--ease-standard);}
.chip svg{width:16px;height:16px;stroke-width:1.6;}
.chip:hover{border-color:var(--brand-300);}
.chip.sel{border-color:var(--brand-500);background:var(--brand-50);color:var(--brand-700);}

/* ---------- addon row ---------- */
.addon{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1.5px solid var(--sand-300);border-radius:var(--radius-md);
  background:var(--sand-50);margin-bottom:10px;transition:.18s;}
.addon:hover{border-color:var(--brand-300);}
.addon.on{border-color:var(--brand-500);background:var(--brand-50);}
.addon svg{width:22px;height:22px;color:var(--brand-600);stroke-width:1.5;flex:none;}
.addon .a-label{flex:1;font-size:14px;font-weight:700;color:var(--head-500);}
.addon .a-price{font-size:13px;color:var(--text-500);font-weight:700;}
.addon .a-box{width:20px;height:20px;border-radius:var(--radius-sm);border:1.5px solid var(--brand-400);display:grid;place-items:center;flex:none;}
.addon.on .a-box{background:var(--brand-600);border-color:var(--brand-600);color:#fff;}
.addon .a-box svg{width:13px;height:13px;color:#fff;stroke-width:3;}

/* ---------- accordion ---------- */
.acc-item{border-bottom:1px solid var(--sand-300);}
.acc-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;cursor:pointer;}
.acc-hd b{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--head-500);}
.acc-hd svg{width:20px;height:20px;color:var(--brand-600);stroke-width:1.75;transition:transform var(--dur-base);flex:none;}
.acc-item.open .acc-hd svg{transform:rotate(180deg);}
.acc-bd{max-height:0;overflow:hidden;transition:max-height var(--dur-base) var(--ease-standard);}
.acc-item.open .acc-bd{max-height:200px;}
.acc-bd p{padding:0 4px 20px;margin:0;font-size:14.5px;color:var(--text-500);}

/* ---------- footer ---------- */
.footer{background:var(--head-600);color:var(--sand-200);margin-top:0;}
.newsletter{background:var(--head-500);border-bottom:1px solid rgba(255,255,255,.08);}
.newsletter .container{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:34px;padding-bottom:34px;flex-wrap:wrap;}
.newsletter h3{color:var(--sand-50);margin:0 0 6px;font-size:26px;}
.newsletter p{color:var(--sand-300);margin:0;font-size:14px;}
.nl-form{display:flex;gap:10px;flex:none;}
.nl-form input{border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;
  padding:13px 18px;border-radius:var(--radius-md);font-size:14px;min-width:260px;font-family:inherit;}
.nl-form input::placeholder{color:var(--sand-400);}
.nl-form input:focus{outline:none;border-color:var(--champagne);}
.footer-main{padding:52px 0 30px;}
.footer-main .container{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;}
.footer img.flogo{height:42px;width:auto;margin-bottom:16px;}
.footer h6{color:#fff;font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.14em;margin:0 0 16px;font-weight:700;}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer a{color:var(--sand-300);font-size:13.5px;border:0;cursor:pointer;}
.footer a:hover{color:#fff;}
.footer .tag{font-size:13px;line-height:1.7;color:var(--sand-300);max-width:280px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;font-size:12px;color:var(--sand-400);}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-500);padding:22px 0;}
.crumbs a{color:var(--link);border:0;cursor:pointer;}
.crumbs .sep{color:var(--sand-500);}
.crumbs .cur{color:var(--head-500);font-weight:700;}

/* ---------- section helpers ---------- */
.section{padding:84px 0;}
.section-head{text-align:center;max-width:720px;margin:0 auto 52px;}
.section-head .eyebrow{display:block;margin-bottom:14px;}
.section-head h2{margin:0 0 14px;}
.section-head p{color:var(--text-500);font-size:var(--fs-body-lg);margin:0;}

/* ============================================================
   SLIDER YOUTUBE SHORTS (template-parts/shorts.php)
   Facade 9:16 + scroll-snap + drag; GSAP tylko ulepsza wejście.
   ============================================================ */
.shorts-section{background:var(--bg-sunken);overflow:hidden;}
.shorts-slider{position:relative;}

/* Tor: poziomy scroll, ukryty pasek przewijania. Snap delikatny (proximity),
   żeby karty łagodnie się dopasowywały, ale bez twardych przeskoków. */
.shorts-track{
	list-style:none;margin:0;padding:6px 4px 18px;
	display:flex;gap:18px;
	overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
	scrollbar-width:none;cursor:grab;
}
.shorts-track::-webkit-scrollbar{display:none;}
/* W trakcie przeciągania i animacji strzałką snap wyłączony - nic nie
   "doczepia" kart, więc ruch jest płynny, bez szarpania. */
.shorts-track.is-dragging,
.shorts-track.is-animating{scroll-snap-type:none;}
.shorts-track.is-dragging{cursor:grabbing;}
.shorts-track.is-dragging .shorts-facade{pointer-events:none;}

.shorts-card{flex:0 0 auto;width:clamp(200px,42vw,264px);scroll-snap-align:start;}

/* Karta-facade: miniatura + przycisk play, klik doładowuje iframe. */
.shorts-facade{
	position:relative;display:block;width:100%;aspect-ratio:9/16;
	padding:0;border:0;border-radius:var(--radius-lg);overflow:hidden;
	background:var(--head-800);cursor:pointer;
	box-shadow:var(--shadow-md);
	transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.shorts-facade:focus-visible{outline:none;box-shadow:0 0 0 3px var(--champagne-soft),var(--shadow-md);}
.shorts-thumb{
	position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;display:block;
	transition:transform var(--dur-slow) var(--ease-out);
}
.shorts-overlay{
	position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(23,18,17,0) 40%,rgba(23,18,17,.55) 100%);
}
.shorts-play{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	display:grid;place-items:center;width:60px;height:60px;border-radius:var(--radius-circle);
	background:rgba(248,245,241,.92);color:var(--brand-700);
	box-shadow:var(--shadow-md);
	transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.shorts-play svg{margin-left:3px;fill:currentColor;stroke:none;}
.shorts-badge{
	position:absolute;left:10px;top:10px;
	display:inline-flex;align-items:center;gap:5px;
	padding:4px 9px;border-radius:var(--radius-pill);
	background:rgba(23,18,17,.6);color:#fff;
	font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.02em;
}
.shorts-badge svg{color:#ff3b30;}

@media (hover:hover) and (pointer:fine){
	.shorts-facade:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
	.shorts-facade:hover .shorts-thumb{transform:scale(1.06);}
	.shorts-facade:hover .shorts-play{transform:translate(-50%,-50%) scale(1.08);background:#fff;}
}

/* Odtwarzacz po kliknięciu. */
.shorts-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius-lg);z-index:2;}
.shorts-facade.is-playing .shorts-overlay,
.shorts-facade.is-playing .shorts-play,
.shorts-facade.is-playing .shorts-badge{opacity:0;pointer-events:none;}

/* Karta "zobacz wszystkie" - link na kanał. */
.shorts-card--more .shorts-more{
	position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
	width:100%;aspect-ratio:9/16;text-align:center;padding:22px;
	border-radius:var(--radius-lg);text-decoration:none;
	background:linear-gradient(160deg,var(--brand-600),var(--brand-800));color:#fff;
	box-shadow:var(--shadow-md);
	transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.shorts-more-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius-circle);background:rgba(255,255,255,.14);}
.shorts-more-icon svg{color:#fff;}
.shorts-more-title{font-family:var(--font-display);font-size:1.15rem;line-height:1.25;}
.shorts-more-cta{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;opacity:.92;}
@media (hover:hover) and (pointer:fine){
	.shorts-card--more .shorts-more:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
}

/* Strzałki nawigacji. */
.shorts-nav{
	position:absolute;top:42%;z-index:5;
	display:grid;place-items:center;width:46px;height:46px;
	border:1px solid var(--sand-300);border-radius:var(--radius-circle);
	background:var(--sand-50);color:var(--head-500);cursor:pointer;
	box-shadow:var(--shadow-md);
	transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-out);
}
.shorts-nav[hidden]{display:none;}
.shorts-nav--prev{left:-6px;}
.shorts-nav--next{right:-6px;}
.shorts-nav:hover{background:var(--brand-700);color:#fff;border-color:var(--brand-700);}
.shorts-nav:active{transform:scale(.94);}
.shorts-nav:focus-visible{outline:none;box-shadow:0 0 0 3px var(--champagne-soft);}

@media (max-width:640px){
	.shorts-nav{display:none;}
	.shorts-track{gap:14px;}
}

/* Brak ruchu: bez animacji wejścia (JS i tak pomija GSAP). */
@media (prefers-reduced-motion:reduce){
	.shorts-facade,.shorts-thumb,.shorts-play,.shorts-card--more .shorts-more{transition:none;}
	.shorts-track{scroll-behavior:auto;}
}