/*
Theme Name: Sunny Lamps & Minerals
Theme URI: https://blyskotka.com/
Author: DosGatos.RED
Author URI: https://dosgatos.red
Description: Ciemny/jasny (ecru) motyw marki bransoletek. Lekki hero SVG/CSS. Wszystkie zasoby self-hosted (bez zewnetrznych CDN — pelna zgodnosc RODO). Bransoletki, kamienie i znaki zodiaku jako edytowalne wpisy (natywne CPT, bez WooCommerce). Kolory i tresci w pelni edytowalne w Personalizacji.
Version: 3.5.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: sunny-minerals
*/

/* ==== BAZA / TOKENY (ecru domyslny, dark override) / NAV / STOPKA / SEKCJE ==== */
*,*::before,*::after{box-sizing:border-box}
:root{
  /* ===== MOTYW JASNY (ecru) — DOMYŚLNY ===== */
  --obsidian:#EFE7D6; --night:#F1E9DA; --panel:#F8F2E6; --panel-2:#EFE7D6; --sink:#E7DCC6;
  --moon:#2C2213; --haze:#6E6350; --faint:#9A9080;
  --line:rgba(44,34,19,.15); --line-2:rgba(44,34,19,.26);
  --gold:#B0813F; --gold-deep:#8C6528;
  --amethyst:#6C4BE0; --aqua:#1C9E8C; --citrine:#C0851B;
  --glow-1:rgba(108,75,224,.10); --glow-2:rgba(28,158,140,.08); --glow-3:rgba(192,133,27,.10);
  --glow-hero-a:rgba(108,75,224,.22); --glow-hero-b:rgba(28,158,140,.12);
  --grain:rgba(44,34,19,.05);
  --nav-bg:rgba(241,233,218,.78); --nav-solid:rgba(245,239,227,.98);
  --overlay:rgba(40,32,16,.62); --chip-bg:rgba(248,242,230,.78);
  --hover:rgba(44,34,19,.06);
  --shadow-card:rgba(90,70,30,.14); --shadow-lg:rgba(90,70,30,.20);
  --radius:18px; --maxw:1180px;
  --ff-d:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-b:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-m:'Space Mono',ui-monospace,SFMono-Regular,monospace;
}
html[data-theme="dark"]{
  /* ===== MOTYW CIEMNY (obsydian) ===== */
  --obsidian:#0C0B14; --night:#131120; --panel:#191627; --panel-2:#211d31; --sink:#0d0b16;
  --moon:#F3F0F8; --haze:#ABA1C2; --faint:#6E6688;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
  --gold:#D8B678; --gold-deep:#B8945A;
  --amethyst:#8B6BFF; --aqua:#3FD6C6; --citrine:#F2B24C;
  --glow-1:rgba(139,107,255,.16); --glow-2:rgba(63,214,198,.10); --glow-3:rgba(242,178,76,.10);
  --glow-hero-a:rgba(139,107,255,.42); --glow-hero-b:rgba(63,214,198,.16);
  --grain:rgba(255,255,255,.035);
  --nav-bg:rgba(10,9,18,.72); --nav-solid:rgba(11,10,20,.98);
  --overlay:rgba(7,6,12,.9); --chip-bg:rgba(12,11,20,.6);
  --hover:rgba(255,255,255,.05);
  --shadow-card:rgba(0,0,0,.5); --shadow-lg:rgba(0,0,0,.8);
}
html{scroll-behavior:smooth; color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--obsidian); color:var(--moon);
  font-family:var(--ff-b); font-weight:400; line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background .45s ease, color .45s ease;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% -8%, var(--glow-1), transparent 55%),
    radial-gradient(90% 70% at 8% 12%, var(--glow-2), transparent 50%),
    radial-gradient(110% 80% at 50% 108%, var(--glow-3), transparent 55%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--grain) 1px, transparent 1px);
  background-size:3px 3px;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--ff-d); font-weight:400; line-height:1.08; margin:0; letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-999px; top:0; background:var(--gold); color:#1a1206; padding:10px 16px; border-radius:0 0 10px 0; z-index:200; font-weight:700}
.skip:focus{left:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,44px)}
.eyebrow{font-family:var(--ff-m); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:0 0 18px}
.dia{width:100%; height:100%; display:block}

/* ---------- NAV ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .4s,border-color .4s,backdrop-filter .4s; border-bottom:1px solid transparent}
.nav.scrolled{background:var(--nav-bg); backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:var(--line)}
.nav__in{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px; color:var(--moon)}
.brand__mark{width:30px; height:28px; color:var(--gold); flex:none}
.brand__txt{font-family:var(--ff-d); font-size:19px; letter-spacing:.01em; white-space:nowrap}
.brand__txt b{font-weight:600}
.nav__links{display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0}
.nav__links a{font-size:14.5px; font-weight:500; color:var(--haze); transition:color .25s; position:relative}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold); transition:width .3s}
.nav__links a:hover{color:var(--moon)}
.nav__links a:hover::after{width:100%}
.nav__cta{font-family:var(--ff-b); font-weight:600; font-size:14px; color:var(--moon)!important; border:1px solid var(--line-2); padding:10px 18px; border-radius:999px; transition:border-color .25s,background .25s}
.nav__cta:hover{border-color:var(--gold); background:rgba(216,182,120,.08)}
.nav__cta::after{display:none}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:12px; background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center}
.burger span{display:block; width:18px; height:1.5px; background:var(--moon); position:relative; transition:transform .3s,opacity .3s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--moon); transition:transform .3s,opacity .3s}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.theme-toggle{width:44px; height:44px; border:1px solid var(--line-2); border-radius:12px; background:transparent; color:var(--moon); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; margin-left:8px; transition:border-color .25s,background .25s,color .25s}
.theme-toggle:hover{border-color:var(--gold); background:var(--hover)}
.theme-toggle svg{width:20px; height:20px}
.theme-toggle .ic-sun{display:none}
html[data-theme="dark"] .theme-toggle .ic-sun{display:block}
html[data-theme="dark"] .theme-toggle .ic-moon{display:none}
/* przycisk rozmiaru tekstu */
.fs-toggle{width:44px; height:44px; border:1px solid var(--line-2); border-radius:12px; background:transparent; color:var(--moon); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; margin-left:8px; transition:border-color .25s,background .25s,color .25s}
.fs-toggle:hover{border-color:var(--gold); background:var(--hover)}
.fs-ico{display:inline-flex; align-items:baseline; gap:1px; font-family:var(--ff-d); line-height:1}
.fs-ico .fs-a1{font-size:12px} .fs-ico .fs-a2{font-size:19px}
html[data-fs="1"] .fs-toggle,html[data-fs="2"] .fs-toggle{border-color:var(--gold); color:var(--gold)}
/* skalowanie tekstu (jak powiększenie przeglądarki, działa z jednostkami px) */
html[data-fs="1"]{zoom:1.12}
html[data-fs="2"]{zoom:1.25}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding-top:72px; overflow:hidden}
.hero__stage{position:absolute; inset:0; z-index:0}
.hero__glow{position:absolute; top:50%; left:66%; width:min(80vh,760px); aspect-ratio:1; transform:translate(-50%,-50%); z-index:0;
  background:radial-gradient(circle at 50% 45%, var(--glow-hero-a), var(--glow-hero-b) 42%, transparent 68%); filter:blur(10px); pointer-events:none}
.hero__crystal{position:absolute; top:50%; left:66%; width:min(52vh,460px); transform:translate(-50%,-50%); z-index:1; filter:drop-shadow(0 24px 60px rgba(139,107,255,.45)); will-change:transform}
.crystal{width:100%; height:auto; display:block; transform-origin:50% 50%; animation:crystalFloat 8s ease-in-out infinite}
.crystal__facets polygon{opacity:.92}
.crystal__shine{opacity:0; mix-blend-mode:screen; animation:crystalShine 8s ease-in-out infinite}
@keyframes crystalFloat{0%,100%{transform:translateY(-2%) rotate(-2.2deg)}50%{transform:translateY(2%) rotate(2.2deg)}}
@keyframes crystalShine{0%,100%{opacity:0}45%{opacity:0}60%{opacity:.55}75%{opacity:0}}
.hero__in{position:relative; z-index:3; width:100%}
.hero__copy{max-width:600px}
.hero__copy > *{animation:heroIn .9s cubic-bezier(.2,.7,.3,1) both}
.hero__copy > *:nth-child(2){animation-delay:.08s}
.hero__copy > *:nth-child(3){animation-delay:.16s}
.hero__copy > *:nth-child(4){animation-delay:.24s}
@keyframes heroIn{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
.hero h1{font-size:clamp(44px,7.2vw,88px); font-weight:300; letter-spacing:-.025em}
.hero h1 em{font-style:italic; font-weight:400; background:linear-gradient(100deg,var(--amethyst),var(--aqua) 55%,var(--citrine)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__lead{margin-top:26px; font-size:clamp(17px,2.1vw,20px); color:var(--haze); max-width:44ch}
.hero__actions{margin-top:38px; display:flex; flex-wrap:wrap; gap:14px}
.btn{font-family:var(--ff-b); font-weight:600; font-size:15px; padding:15px 26px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:transform .2s,box-shadow .3s,background .3s,border-color .3s; display:inline-flex; align-items:center; gap:10px}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:linear-gradient(180deg,#e6c78c,var(--gold)); color:#231703; box-shadow:0 10px 30px rgba(216,182,120,.28)}
.btn--gold:hover{box-shadow:0 14px 38px rgba(216,182,120,.4)}
.btn--ghost{border-color:var(--line-2); color:var(--moon)}
.btn--ghost:hover{border-color:var(--gold); background:var(--hover)}
.hero__scroll{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; font-family:var(--ff-m); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); display:flex; flex-direction:column; align-items:center; gap:10px}
.hero__scroll::after{content:""; width:1px; height:40px; background:linear-gradient(var(--gold),transparent); animation:drop 2.4s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- SECTION SHELL ---------- */
.section{position:relative; padding:clamp(80px,12vh,150px) 0}
.section__head{max-width:660px; margin-bottom:clamp(46px,7vw,72px)}
.section__head h2{font-size:clamp(32px,5vw,56px); font-weight:300}
.section__head p{margin-top:20px; color:var(--haze); font-size:18px}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* ---------- CRAFT / O NAS ---------- */
.craft{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); align-items:center}
.craft__facts{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.fact{background:var(--night); padding:28px 26px}
.fact b{font-family:var(--ff-d); font-size:34px; font-weight:400; color:var(--gold); display:block; line-height:1}
.fact span{display:block; margin-top:10px; font-size:13.5px; color:var(--haze)}
.craft__lead p+p{margin-top:20px}
.craft__lead .lede{font-family:var(--ff-d); font-size:clamp(22px,3vw,30px); font-weight:300; line-height:1.35; color:var(--moon)}
.craft__lead .body{color:var(--haze)}
.tag-note{margin-top:26px; display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border:1px solid var(--line-2); border-radius:14px; font-size:14px; color:var(--moon); background:rgba(216,182,120,.05)}
.tag-note svg{width:18px; height:18px; color:var(--gold); flex:none}

/* ---------- TOOLBAR / FILTER ---------- */
.toolbar{position:sticky; top:72px; z-index:40; padding:18px 0; margin-bottom:34px; background:linear-gradient(var(--obsidian) 68%,transparent)}
.toolbar__row{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.search{position:relative; flex:1; min-width:200px; max-width:320px}
.search input{width:100%; background:var(--night); border:1px solid var(--line); color:var(--moon); font-family:var(--ff-b); font-size:15px; padding:12px 16px 12px 42px; border-radius:12px}
.search input::placeholder{color:var(--faint)}
.search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--faint)}
.count{font-family:var(--ff-m); font-size:12px; color:var(--faint); letter-spacing:.04em; margin-left:auto}
.chips{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px}
.chip{font-family:var(--ff-b); font-size:13px; font-weight:500; padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:var(--haze); background:transparent; cursor:default; transition:all .2s; white-space:nowrap}
.chip--filter{cursor:pointer}
.chip--filter:hover{border-color:var(--line-2); color:var(--moon)}
.chip--filter[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#231703; font-weight:600}
.chip--sign{pointer-events:none; font-size:11.5px; padding:5px 11px; color:var(--haze); border-color:var(--line)}

/* ---------- STONE GRID ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:20px}
.stone{position:relative; background:linear-gradient(180deg,var(--night),var(--sink)); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px 24px; cursor:pointer; overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,box-shadow .35s; display:flex; flex-direction:column}
.stone:hover,.stone:focus-visible{transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 20px 46px var(--shadow-card)}
.stone__facet{position:absolute; top:-26px; right:-26px; width:118px; height:118px; color:var(--gold); opacity:.14; transition:opacity .4s,transform .5s; pointer-events:none}
.stone:hover .stone__facet{opacity:.32; transform:rotate(8deg) scale(1.06)}
.stone__origin{font-family:var(--ff-m); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:8px; margin-bottom:14px}
.stone__origin .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold)}
.stone__name{font-size:25px; font-weight:400; margin-bottom:12px}
.stone__action{color:var(--haze); font-size:14.5px; line-height:1.6; flex:1}
.js .stone__action{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.stone__signs{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.stone__more{margin-top:18px; font-size:13px; font-weight:600; color:var(--gold); letter-spacing:.02em}
/* rozciągnięty przycisk-wyzwalacz (dostępny; karta zachowuje semantykę) */
.stone__open,.prod__open{position:absolute; inset:0; width:100%; height:100%; z-index:3; margin:0; padding:0; border:0; background:transparent; color:transparent; font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none}
.stone__open:focus-visible,.prod__open:focus-visible{outline:2px solid var(--gold); outline-offset:-4px; border-radius:inherit}
.empty{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--haze); font-family:var(--ff-d); font-size:22px; font-style:italic}

/* ---------- ZODIAC ---------- */
.zgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.zodiac{text-align:left; font-family:var(--ff-b); background:var(--night); border:1px solid var(--line); border-left:3px solid var(--z); border-radius:14px; padding:22px 24px; cursor:pointer; color:var(--moon); transition:transform .3s,border-color .3s,background .3s; display:block; width:100%}
.zodiac:hover{transform:translateX(4px); background:var(--panel)}
.zodiac__glyph{font-size:30px; line-height:1; color:var(--z); display:inline-block; vertical-align:middle}
.zodiac__meta{display:inline-flex; flex-direction:column; vertical-align:middle; margin-left:14px}
.zodiac__name{font-family:var(--ff-d); font-size:23px}
.zodiac__dates{font-family:var(--ff-m); font-size:11.5px; letter-spacing:.05em; color:var(--faint); margin-top:3px}
.zodiac__stones{display:block; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--haze); line-height:1.6}

/* ---------- CONTACT ---------- */
.contact{background:linear-gradient(180deg,var(--night),var(--sink)); border:1px solid var(--line); border-radius:24px; padding:clamp(36px,6vw,64px); display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; position:relative; overflow:hidden}
.contact::before{content:""; position:absolute; top:-40%; right:-10%; width:60%; aspect-ratio:1; background:radial-gradient(circle,var(--glow-1),transparent 65%); pointer-events:none}
.contact h2{font-size:clamp(30px,4.4vw,48px); font-weight:300}
.contact__lead{color:var(--haze); margin-top:18px}
.contact__list{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:2px}
.contact__list li{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line)}
.contact__list svg{width:19px; height:19px; color:var(--gold); flex:none; margin-top:3px}
.contact__list b{display:block; font-family:var(--ff-b); font-weight:600; font-size:15px}
.contact__list span{color:var(--haze); font-size:14px}
.contact__list a{color:var(--gold)}
.contact__card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:30px; position:relative; z-index:1}
.contact__card .eyebrow{margin-bottom:14px}
.contact__card p{color:var(--haze); font-size:14.5px}
.contact__card .cbtn{margin-top:22px; width:100%; justify-content:center}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line); padding:60px 0 40px; margin-top:20px}
.footer__in{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap}
.footer__logo img{width:230px; opacity:.8}
.footer__nav{display:flex; gap:26px; flex-wrap:wrap}
.footer__nav a{font-size:14px; color:var(--haze); transition:color .2s}
.footer__nav a:hover{color:var(--moon)}
.footer__legal{margin-top:36px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; color:var(--haze); font-family:var(--ff-m); letter-spacing:.03em}
.footer__legal a{color:var(--haze)}
.disclaimer{margin-top:14px; font-size:12px; color:var(--haze); max-width:70ch; line-height:1.6}
.footer__credit{margin-top:18px; font-size:12px; color:var(--haze); font-family:var(--ff-m); letter-spacing:.04em}
.footer__credit a{color:var(--haze); text-decoration:underline; text-underline-offset:2px; transition:opacity .2s}
.footer__credit a:hover{opacity:.7}

/* ---------- MODAL ---------- */
.modal{position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center; padding:20px}
.modal.open{display:flex}
.modal__bg{position:absolute; inset:0; background:var(--overlay); backdrop-filter:blur(8px); opacity:0; transition:opacity .3s}
.modal.open .modal__bg{opacity:1}
.modal__panel{position:relative; z-index:1; width:min(560px,100%); max-height:88vh; overflow:auto; background:linear-gradient(180deg,var(--panel),var(--night)); border:1px solid var(--line-2); border-radius:22px; padding:38px clamp(26px,4vw,44px); transform:translateY(24px) scale(.97); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.3,1),opacity .3s}
.modal.open .modal__panel{transform:none; opacity:1}
.modal__facet{position:absolute; top:-30px; right:-20px; width:150px; height:150px; color:var(--gold); opacity:.16; pointer-events:none}
.modal__close{position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--moon); cursor:pointer; font-size:20px; line-height:1; transition:background .2s,border-color .2s}
.modal__close:hover{background:var(--hover); border-color:var(--gold)}
.modal__origin{font-family:var(--ff-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:14px}
.modal__name{font-size:clamp(30px,5vw,42px); font-weight:400; margin-bottom:18px}
.modal__action{color:var(--moon); font-size:16.5px; line-height:1.7}
.modal__label{font-family:var(--ff-m); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:26px 0 12px}
.modal__signs{display:flex; flex-wrap:wrap; gap:8px}

/* ==== POPUP BRANSOLETKI (foto + nr + nazwa + opis) ==== */
.bmodal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px}
.bmodal.open{display:flex}
.bmodal__bg{position:absolute; inset:0; background:var(--overlay); backdrop-filter:blur(8px); opacity:0; transition:opacity .3s}
.bmodal.open .bmodal__bg{opacity:1}
.bmodal__panel{position:relative; z-index:1; width:min(880px,100%); max-height:90vh; overflow:auto; display:grid; grid-template-columns:1.05fr .95fr; background:linear-gradient(180deg,var(--panel),var(--night)); border:1px solid var(--line-2); border-radius:22px; transform:translateY(24px) scale(.97); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.3,1),opacity .3s}
.bmodal.open .bmodal__panel{transform:none; opacity:1}
.bmodal__close{position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.06); color:var(--moon); cursor:pointer; font-size:20px; line-height:1; transition:background .2s,border-color .2s}
.bmodal__close:hover{background:var(--hover); border-color:var(--gold)}
.bmodal__media{position:relative; background:var(--night) center/cover no-repeat; min-height:340px; display:grid; place-items:center; border-radius:22px 0 0 22px}
.bmodal__media.has-photo .bmodal__ph{display:none}
.bmodal__ph{width:76px; height:76px; color:var(--gold); opacity:.4}
.bmodal__info{padding:44px clamp(26px,3.5vw,44px); display:flex; flex-direction:column; align-items:flex-start}
.bmodal__badge{font-family:var(--ff-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid var(--line-2); border-radius:999px; padding:5px 12px; margin-bottom:16px}
.bmodal__name{font-size:clamp(26px,4vw,38px); font-weight:400; margin-bottom:16px; line-height:1.1}
.bmodal__desc{color:var(--moon); font-size:16px; line-height:1.7}
.bmodal__desc p{margin:0 0 12px}
.bmodal__cta{margin-top:auto; align-self:flex-start}
.bmodal__info > .bmodal__cta{margin-top:28px}
@media(max-width:640px){
  .bmodal__panel{grid-template-columns:1fr; max-height:92vh}
  .bmodal__media{min-height:230px; border-radius:22px 22px 0 0}
}

/* ---------- REVEAL ---------- */
.js .reveal{opacity:0; transform:translateY(28px)}
.reveal.in{opacity:1; transform:none; transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important; transform:none!important}
  .hero__scroll::after{animation:none}
  .crystal,.crystal__shine{animation:none}
  .hero__copy > *{animation:none}
}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .craft{grid-template-columns:1fr; gap:44px}
  .contact{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav__links{position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0; background:var(--nav-solid); backdrop-filter:blur(20px); padding:12px 26px 30px; border-bottom:1px solid var(--line); transform:translateY(-120%); transition:transform .4s cubic-bezier(.3,.8,.3,1); height:auto}
  body.menu-open .nav__links{transform:none}
  .nav__links li{width:100%}
  .nav__links a{display:block; padding:16px 0; font-size:17px; border-bottom:1px solid var(--line); width:100%}
  .nav__links a::after{display:none}
  .nav__cta{display:inline-block; margin-top:14px}
  .burger{display:inline-flex}
  .hero{min-height:auto; padding:120px 0 70px}
  .hero__glow{left:50%; top:38%; width:88vw; opacity:.8}
  .hero__crystal{left:50%; top:58%; width:min(60vw,320px); opacity:.9}
  .hero__copy{max-width:none; text-align:left}
  .hero__scroll{display:none}
  .toolbar{top:64px}
  .craft__facts{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .zgrid{grid-template-columns:1fr}
  .footer__in{flex-direction:column; gap:28px}
}
@media (max-width:400px){ .craft__facts{grid-template-columns:1fr} }

/* ---------- NO-JS ---------- */

/* ==== SEKCJA BRANSOLETKI (home) ==== */
#bransoletki .gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(14px,1.6vw,22px)}
    .prod{position:relative; margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel); transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .5s}
    .js .prod{cursor:pointer}
    .prod:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 22px 50px -28px var(--shadow-lg)}
    .prod__media{position:relative; aspect-ratio:4/5; display:grid; place-items:center;
      background:
        radial-gradient(120% 90% at 30% 12%, var(--glow-1), transparent 55%),
        radial-gradient(120% 90% at 80% 85%, var(--glow-2), transparent 55%),
        linear-gradient(150deg,var(--panel-2),var(--night));
      background-size:cover; background-position:center}
    .prod.has-photo .prod__media{background:var(--night)}
    .prod.has-photo .prod__glyph{display:none}
    .prod__glyph{width:56px; height:56px; color:var(--gold); opacity:.5}
    .prod__badge{position:absolute; top:12px; left:12px; font:600 10px/1 var(--ff-m); letter-spacing:.12em; text-transform:uppercase; color:var(--haze); background:var(--chip-bg); border:1px solid var(--line-2); padding:6px 9px; border-radius:999px}
    .prod__cap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px}
    .prod__cap h3{font:400 20px/1.1 var(--ff-d); color:var(--moon)}
    .prod__stone{font:600 11px/1 var(--ff-m); letter-spacing:.06em; text-transform:uppercase; color:var(--gold); text-decoration:none; border:1px solid var(--line-2); padding:6px 10px; border-radius:999px; white-space:nowrap; transition:background .3s,color .3s}
    .prod__stone:hover{background:var(--gold); color:var(--obsidian)}
    .gal__cta{margin-top:clamp(30px,4vw,46px)}
    /* Lightbox */
    #lightbox{position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:5vmin;
      background:var(--overlay); backdrop-filter:blur(6px)}
    #lightbox.open{display:grid}
    #lightbox img{max-width:100%; max-height:88vh; border-radius:14px; box-shadow:0 40px 120px -40px var(--shadow-lg)}
    #lightbox .lb__cap{position:absolute; bottom:5vmin; left:0; right:0; text-align:center; color:var(--moon); font:400 18px/1.3 var(--ff-d)}
    #lightbox .lb__x{position:absolute; top:22px; right:24px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:var(--moon); font-size:22px; cursor:pointer; display:grid; place-items:center}
    #lightbox .lb__x:hover{background:rgba(255,255,255,.12)}

/* ==== KATALOG BRANSOLETEK (WooCommerce) ==== */
/* --- KATALOG BRANSOLETEK --- */
  .cat-head{padding:120px 0 40px}
  .cat-head h1{font-family:var(--ff-d); font-weight:300; font-size:clamp(34px,6vw,64px); line-height:1.02; color:var(--moon); margin:14px 0 18px}
  .cat-head p{max-width:640px; color:var(--haze); font-size:18px}
  .cat-bar{position:sticky; top:72px; z-index:40; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
    padding:16px 0; margin-bottom:30px; background:linear-gradient(var(--obsidian) 70%,transparent)}
  .cat-search{position:relative; flex:1; min-width:220px; max-width:340px}
  .cat-search input{width:100%; font:500 15px/1 var(--ff-b); color:var(--moon); background:var(--panel); border:1px solid var(--line-2);
    border-radius:999px; padding:14px 18px 14px 44px; outline:none; transition:border-color .3s}
  .cat-search input:focus{border-color:var(--gold)}
  .cat-search svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--faint)}
  .cat-count{font:600 12px/1 var(--ff-m); letter-spacing:.1em; text-transform:uppercase; color:var(--haze)}
  .cat-count b{color:var(--gold)}
  .gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(10px,1.3vw,18px)}
  .prod{position:relative; margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .45s}
  .js .prod{cursor:pointer}
  .prod:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 20px 44px -26px rgba(0,0,0,.8)}
  .prod.hidden{display:none}
  .prod__media{position:relative; aspect-ratio:4/5; display:grid; place-items:center; background:
    radial-gradient(120% 90% at 30% 12%, rgba(139,107,255,.15), transparent 55%),
    radial-gradient(120% 90% at 80% 85%, rgba(63,214,198,.12), transparent 55%),
    linear-gradient(150deg,var(--panel-2),var(--night)); background-size:cover; background-position:center}
  .prod.has-photo .prod__media{background:var(--night)}
  .prod.has-photo .prod__glyph{display:none}
  .prod__glyph{width:42px; height:42px; color:var(--gold); opacity:.45}
  .prod__badge{position:absolute; top:9px; left:9px; font:700 10px/1 var(--ff-m); letter-spacing:.08em; text-transform:uppercase;
    color:var(--moon); background:rgba(12,11,20,.62); border:1px solid var(--line-2); padding:5px 8px; border-radius:999px}
  .prod__cap{padding:10px 12px}
  .prod__cap h2{font:400 15px/1 var(--ff-d); color:var(--haze)}
  .cat-empty{padding:50px 0; text-align:center; color:var(--haze); display:none}
  .cat-cta{margin:46px 0 10px; display:flex; gap:14px; flex-wrap:wrap}
  /* Lightbox z nawigacją */
  #lightbox{position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:5vmin; background:rgba(7,6,12,.92); backdrop-filter:blur(6px)}
  #lightbox.open{display:grid}
  #lightbox img{max-width:100%; max-height:86vh; border-radius:14px; box-shadow:0 40px 120px -40px #000}
  #lightbox .lb__cap{position:absolute; bottom:5vmin; left:0; right:0; text-align:center; color:var(--moon); font:400 18px/1.3 var(--ff-d)}
  #lightbox .lb__x{position:absolute; top:22px; right:24px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2);
    background:rgba(255,255,255,.05); color:var(--moon); font-size:22px; cursor:pointer; display:grid; place-items:center}
  #lightbox .lb__nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
    border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:var(--moon); font-size:24px; cursor:pointer; display:grid; place-items:center}
  #lightbox .lb__prev{left:20px} #lightbox .lb__next{right:20px}
  #lightbox .lb__x:hover,#lightbox .lb__nav:hover{background:rgba(255,255,255,.12)}
  @media(max-width:600px){ .gal{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))} .cat-bar{top:64px} }