/* =========================================================
MOØN — kompletny design system + komponenty (z makiet).
Źródło: kit.css (Warm Atelier) + stopka 1:1 + mobile.
Fonty: ładowane osobno (theme.json / Google Fonts).
========================================================= */
/* ====== DESIGN SYSTEM + KOMPONENTY (kit.css) ====== */
/* =========================================================
MOØN — Czysty Księżyc + gold akcent
Sztywne tokeny z briefu — nie wymyślaj nowych.
========================================================= */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
:root {
/* Warm Atelier — Champagne · Espresso · Brass (WCAG AA) */
--bg: #FBF8F1; /* Champagne (był Pearl) */
--bg2: #F0E7D3; /* Sand v2 */
--bg3: #E5D9BE; /* Linen */
--bg-hover: #F5EFE0;
--bg-pressed:#EBE0C8;
--t1: #1A1815; /* Espresso (był Obsidian) */
--t2: #5F564A; /* Stone */
--t3: #6E6250; /* Walnut muted — WCAG AA (5.62 champ, 4.84 sand, 5.96 white) */
--b1: #C4B89F;
--b2: #DDD2B8;
--b3: #F0E7D3;
--b-field: #74634D; /* Form field border — WCAG 1.4.11 (4.70 sand, 5.45 champ, 5.78 white) */
--star-empty:#948060; /* Empty star — WCAG 1.4.11 (3.10 sand, 3.59 champ, 3.81 white) */
--border-hover: #A89C82;
--success: #2D7A4F;
--warning: #B07A1A;
--error: #B94A3B;
--info: #3B5A7A;
/* Alert system — Warm Atelier palette */
--alert-error-bg: #F5ECE9;
--alert-error-border: #D9B6A8;
--alert-error-accent: #B5654A;
--alert-error-text: #886050;
--alert-error-strong: #7A3E2C;
--alert-success-bg: #EEF0E6;
--alert-success-border: #C2CBA8;
--alert-success-accent: #7E8B5A;
--alert-success-text: #5F6A41;
--alert-success-strong: #4F592F;
--alert-info-bg: #F3EEE4;
--alert-info-border: #D8C9AC;
--alert-info-accent: var(--gold);
--alert-info-text: #71603F;
--alert-info-strong: #5E4A2E;
--alert-warn-bg: #FBF3E0;
--alert-warn-border: #E5CFA0;
--alert-warn-accent: #C9953A;
--alert-warn-text: #7A5C1E;
--alert-warn-strong: #5E4614;
--overlay: rgba(26,24,21,0.6);
--overlay-light: rgba(26,24,21,0.3);
/* AKCENT BRASS — kontrast 4.71 = WCAG AA pass · max 1 CTA / ekran */
--gold: #8B6F47; /* Brass — naglowki >=18pt (prog 3.0, ratio 4.44 PASS) */
--gold-dark: #6F5836; /* Brass deep — maly tekst linki/akcenty (ratio 6.34 PASS AA) */
--gold-soft: #E8D9BE; /* Brass soft (bez zmian) */
--gold-text: #6F5836; /* Brass na maly tekst — WCAG AA 4.5:1 (=gold-dark) */
/* Type pairing: Fraunces display + Inter body */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--container: 1280px;
--sidebar-w: 220px;
}
/* Rich text highlight — kolor marki */
.moon-hl { color: var(--gold); }
/* === Wspólny komunikat błędu przy polu formularza === */
.moon-field-err{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:12px;line-height:1.4;color:var(--alert-error-accent)}
.moon-field-err svg{flex-shrink:0;margin-top:1px;color:var(--alert-error-accent);fill:currentColor}
/* === STICKY FOOTER — stopka zawsze na dole viewportu === */
.wp-site-blocks{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.wp-site-blocks>footer.wp-block-template-part:last-child{margin-top:auto!important}
/* Wrapper wp_footer (tabbar+drawer) — fixed children, zero flow height */
.moon-ui--fixed{font-size:0;line-height:0;height:0;overflow:hidden}
/* mobile-only line break (hidden on desktop, shown ≤768px) */
.mb{display:none}
@media(max-width:768px){.mb{display:block}}
/* === SCOPED RESET — tylko wewnątrz naszych komponentów .moon-ui === */
/* (NIE ruszamy globalnego body/html/a/button, żeby nie kolidować z WordPress/theme.json) */
.moon-ui *, .moon-footer *, .moon-bar *, .tabbar *, .m-drawer *, .sheet * { box-sizing: border-box; }
/* zerujemy domyślne marginesy WP TYLKO wewnątrz naszych komponentów (jak w makiecie) */
.moon-ui :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,hr,dl,dd) { margin: 0; padding: 0; }
.moon-ui ul, .moon-ui ol { list-style: none; }
.moon-ui :where(h1,h2,h3,h4,h5,h6,p) { margin-block: 0; }
.moon-ui { font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* iOS Safari auto-zoom fix: inputs <16px trigger zoom on focus.
Global rule — covers all present and future forms. */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="number"],input[type="search"],input[type="url"],
select,textarea{font-family:var(--font-sans);font-size:16px !important}
/* === Integracja z WordPress: .moon-ui pełna szerokość, bez górnego odstępu === */
.moon-ui { margin: 0; }
.moon-ui > section:first-child,
.moon-ui > *:first-child { margin-top: 0; }
/* sekcje full-bleed wewnątrz wp:html (WP czasem dodaje padding/zwężenie) */
.entry-content > .moon-ui,
.wp-block-post-content > .moon-ui,
.wp-site-blocks > .moon-ui { max-width: none; }
/* Koszyk/Checkout: WP/Woo auto-wstrzykuje post title i store-notices — chowamy */
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title { display: none; }
body.woocommerce-cart .wc-block-store-notices,
body.woocommerce-checkout .wc-block-store-notices { display: none; }
/* Koszyk: szablon Site Editor dodaje alignwide → nadmiarowy 24px margin-top na post-content. Zerujemy. */
body.woocommerce-cart .wp-block-post-content { margin-top: 0; }
/* =========================================================
TYPE PAIRING (scoped do .moon-ui)
Fraunces → H1 / H2 / cytaty; Inter → logo, H3, body, ceny, CTA, meta
========================================================= */
.moon-ui h1, .moon-ui h2 {
font-family: var(--font-display);
font-weight: 500;
font-variation-settings: 'opsz' 96, 'SOFT' 0;
line-height: 1.1;
color: var(--t1);
}
.moon-ui h2 { font-variation-settings: 'opsz' 48, 'SOFT' 0; letter-spacing: -0.01em; }
.moon-ui h3 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.005em; }
.magdalena-quote {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: 'opsz' 144, 'SOFT' 0;
}
.moon-ui button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
.moon-ui button.btn { font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 500 !important; font-feature-settings: "cv11", "ss01", "ss03" !important; text-align: center; }
.moon-ui a { color: inherit; text-decoration: none; }
.moon-ui img, .moon-ui svg { display: block; }
.moon-ui input, .moon-ui textarea, .moon-ui select { font: inherit; color: inherit; }
/* Logo + ceny + meta NIGDY nie ucinaj Inter */
.logo-svg, .footer-brand > div:first-child {
font-family: var(--font-sans);
}
.price { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
/* =========================================================
APP SHELL — sidebar + main
========================================================= */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
}
.sidebar {
position: sticky; top: 0; align-self: start;
height: 100vh; overflow-y: auto;
background: #14110B; color: #C7BFAE;
border-right: 1px solid #000;
padding: 20px 0 40px;
font-size: 12.5px;
z-index: 100;
}
.sidebar-brand {
padding: 8px 20px 22px;
border-bottom: 1px solid #251F15;
margin-bottom: 14px;
}
.sidebar-brand .sb-logo { color: #FBF8F1; font-weight: 600; letter-spacing: 6px; font-size: 16px; }
.sidebar-brand .sb-tag { color: #847A66; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-top: 6px; }
.sb-group { padding: 14px 20px 4px; color: #756B57; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.sb-link {
display: block; padding: 7px 20px 7px 28px;
color: #B6AB95; cursor: pointer;
border-left: 2px solid transparent;
transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
overflow-wrap: break-word;
}
.sb-link:hover { background: #1C1810; color: #FBF8F1; }
.sb-link.active { background: #211C13; color: #FBF8F1; border-left-color: var(--gold); }
.sb-link .sb-num { display: inline-block; width: 22px; color: #5F5747; font-variant-numeric: tabular-nums; }
.sb-link.active .sb-num { color: var(--gold); }
.main { min-width: 0; }
/* =========================================================
PAGE shell — SCOPED (WP dodaje .page na stron — nie ukrywaj!)
========================================================= */
/* .page { display: none; } ← USUNIĘTO: kolidowało z WP class="page" na body */
/* .page.active { display: block; } */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
/* Gdy WP daje has-global-padding (constrained layout), nasz .container nie dubluje paddingu */
.has-global-padding .container { padding-inline: 0; }
/* =========================================================
TOPBAR + HEADER
========================================================= */
.topbar {
background: var(--t1); color: #A89C82;
font-size: 11px; letter-spacing: 0.05em;
padding: 8px 0;
}
.topbar-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
display: flex; justify-content: space-between; align-items: center;
gap: 24px;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-right { color: #A89C82; font-size: 11px; letter-spacing: 0.08em; }
.tsep { display: inline-block; width: 1px; height: 10px; background: rgba(255,255,255,0.22); }
/* Sticky header (desktop): wrapper template-part klei się z top ujemnym = wysokość topbara,
dzięki czemu topbar chowa się nad viewport a menu pozostaje u góry. */
@media (min-width:769px){
header.wp-block-template-part{position:sticky;top:-34px;z-index:50}
}
.header {
z-index: 50;
background: rgba(251,248,241,0.92);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--b1);
}
.header-inner {
max-width: var(--container); margin: 0 auto;
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center; gap: 24px;
padding: 18px 24px;
}
.logo-svg { color: var(--t1); }
.nav {
display: flex; gap: 28px;
font-size: 13px; font-weight: 500; color: var(--t2);
}
.nav a { padding: 6px 0; position: relative; transition: color 120ms var(--ease); }
.nav a:hover { color: var(--t1); }
.nav .nl-ext { display: inline-flex; align-items: baseline; gap: 4px; }
.nav .nl-arr { color: var(--t3); font-size: 13px; line-height: 1; transition: color 120ms var(--ease); font-family: var(--font-sans); -webkit-font-feature-settings: normal; font-variant-emoji: text; }
.nav .nl-ext:hover .nl-arr { color: var(--t1); }
.icons { display: flex; gap: 4px; justify-self: end; align-items: center; }
.icon-btn {
position: relative;
display: inline-flex; align-items: center; gap: 4px;
padding: 8px 10px;
border-radius: 999px;
color: var(--t1);
transition: background 120ms var(--ease);
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn .count {
font-size: 11px; font-weight: 500;
color: #5F564A;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* =========================================================
BUTTONS
========================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 44px; padding: 0 26px;
border-radius: 6px;
font-family: var(--font-sans); font-size: 13px; font-weight: 500;
font-feature-settings: "cv11", "ss01", "ss03";
letter-spacing: 0.02em; text-align: center;
text-decoration: none;
transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
white-space: nowrap;
}
.btn .arr { width: 14px; height: 14px; }
.btn-gold, a.btn-gold, .moon-ui .btn-gold, .moon-ui button.btn-gold { background: var(--gold) !important; color: #fff !important; border:0; }
.btn-gold:hover, a.btn-gold:hover, .moon-ui .btn-gold:hover { background: var(--gold-dark) !important; color:#fff !important; }
.btn-dark, a.btn-dark, .moon-ui .btn-dark, .moon-ui button.btn-dark { background: var(--t1) !important; color: var(--bg) !important; border:0; }
.btn-dark:hover, a.btn-dark:hover, .moon-ui .btn-dark:hover { background: #2A2520 !important; color: var(--bg) !important; }
.btn-secondary, a.btn-secondary, .moon-ui .btn-secondary, .moon-ui button.btn-secondary { background: transparent !important; border: 1px solid var(--t1) !important; color: var(--t1) !important; }
.btn-secondary:hover, a.btn-secondary:hover, .moon-ui .btn-secondary:hover { background: var(--bg-hover) !important; color: var(--t1) !important; }
.btn-outline, a.btn-outline, .moon-ui .btn-outline { background: transparent !important; border: 1px solid var(--b-field) !important; color: var(--t2) !important; }
.btn-outline:hover, a.btn-outline:hover, .moon-ui .btn-outline:hover { border-color: var(--border-hover) !important; color: var(--t1) !important; background: var(--bg-hover) !important; }
.btn-outline-light, a.btn-outline-light, .moon-ui .btn-outline-light { background: transparent !important; border: 1px solid rgba(251,248,241,.4) !important; color: var(--bg) !important; }
.btn-outline-light:hover, a.btn-outline-light:hover, .moon-ui .btn-outline-light:hover { border-color: rgba(251,248,241,.7) !important; background: rgba(251,248,241,.08) !important; }
.btn .arr, a.btn svg, .moon-ui .btn svg { color: inherit; }
.btn-ghost {
background: transparent; border: 0; color: var(--t2);
text-decoration: underline; text-underline-offset: 4px;
padding: 0; height: auto;
}
.btn-ghost:hover { color: var(--t1); }
.btn-full { width: 100%; }
.btn-lg, .moon-ui button.btn-lg { height: 48px; padding: 0 28px; font-size: 14px !important; }
/* =========================================================
LABEL UPPERCASE (.lbl)
========================================================= */
.lbl {
font-size: 12px; font-weight: 500;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gold);
}
/* h2.lbl override — see .sec-header h2.lbl below */
/* =========================================================
PILLS / BADGES
========================================================= */
.pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 999px;
font-size: 11px; font-weight: 500;
}
.pill-line { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.pill-gold { background: var(--gold-soft); color: #5A4322; }
.pill-success { background: #E5F0EA; color: var(--success); }
.pill-success svg { width: 12px; height: 12px; }
.pill-warning { background: #F3E8D2; color: var(--warning); }
.pill-error { background: #F2DAD5; color: var(--error); }
.pill-light { background: var(--bg2); color: var(--t2); }
.pill-dark { background: var(--t1); color: var(--bg); }
/* =========================================================
STARS
========================================================= */
.stars { display: inline-flex; gap: 1px; color: var(--gold); }
.stars .star-empty { opacity: 0.25; }
.stars.muted { color: var(--star-empty); }
/* =========================================================
IMG PLACEHOLDER
========================================================= */
.img-ph {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #EDE2C8 0%, #E2D4B0 50%, #EDE2C8 100%);
display: flex; align-items: center; justify-content: center;
color: #8B7E68;
border-radius: 8px;
}
.img-ph::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%),
linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%);
background-size: 18px 18px;
background-position: 0 0, 9px 9px;
}
.img-ph .img-label {
position: relative; z-index: 2;
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
font-weight: 500; color: #6F6149;
text-align: center; padding: 12px 16px;
max-width: 80%;
}
.img-ph.dark { background: linear-gradient(135deg, #2A2520 0%, #1A1815 100%); color: #7A6E54; }
.img-ph.dark .img-label { color: #8B7E68; }
/* =========================================================
PRODUCT CARD
========================================================= */
.card-product {
background: #fff;
border: 1px solid var(--b2);
border-radius: 8px;
padding: 0;
display: flex; flex-direction: column;
transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
overflow: hidden;
}
.card-product:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(26,24,21,0.06);
border-color: var(--border-hover);
}
.card-product .pimg { aspect-ratio: 1/1; position: relative; display: block; overflow: hidden; }
.card-product a.pimg { text-decoration: none; color: inherit; }
.card-product .pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-product .pimg .img-ph { position: absolute; inset: 0; border-radius: 0; }
.card-product .pimg .topbadges {
position: absolute; top: 12px; left: 12px; z-index: 2;
display: flex; flex-direction: column; gap: 6px;
}
.card-product .pimg .moon-ui .wishbtn, .wishbtn {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 34px; height: 34px; border-radius: 999px;
background: #fff; color: var(--t1);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(26,24,21,0.08);
transition: color 120ms var(--ease);
}
.moon-ui .wishbtn{background:#fff !important;}
.card-product .pimg .wishbtn:hover { color: var(--error); }
.card-product .pbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-product .pcat { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.4em; line-height: 1.4; }
.card-product .ptitle { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--t1); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; max-height: 2.8em; line-height: 1.3; }
.card-product a.ptitle:hover { color: var(--gold-dark); }
.card-product .pmeta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--t3); }
.card-product .pmeta .sep { color: var(--b1); }
.card-product .pmeta strong { color: var(--t2); font-weight: 500; }
.card-product .prow { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; gap: 12px; min-height: 44px; }
.card-product .pprice { font-size: 17px; font-weight: 600; color: var(--t1); }
.card-product .pper { font-size: 10.5px; color: var(--t3); }
.card-product .pcta { margin-top: auto; padding-top: 6px; }
/* =========================================================
SECTION SCAFFOLD
========================================================= */
.sec { padding: 80px 0; }
.sec-sand { background: var(--bg2); }
.sec-pearl { background: var(--bg); }
.sec-deep { background: var(--bg3); }
.sec-dark { background: var(--t1); color: var(--bg); }
.sec-tight { padding: 56px 0; }
.sec-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; gap: 24px; }
.sec-header .left { max-width: 720px; }
.sec-header h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--t1); margin-top: 6px; font-variation-settings: 'opsz' 48, 'SOFT' 0; }
.sec-header h2.lbl{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:0.16em;color:var(--gold);font-variation-settings:normal;line-height:1.4;margin-top:0}
/* =========================================================
HERO (homepage)
========================================================= */
.hero { padding: 72px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero h1 {
font-family: var(--font-display);
font-weight: 500;
font-variation-settings: 'opsz' 144, 'SOFT' 0;
font-size: 56px; line-height: 1.04;
letter-spacing: -0.02em; color: var(--t1);
margin: 18px 0 22px;
}
.hero h1 em{font-style:italic;color:var(--gold);font-weight:400}
.hero p.lead { font-size: 15.5px; color: var(--t2); max-width: 480px; line-height: 1.65; }
.hero-meta, .hero-stats {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 28px;
margin: 30px 0 32px;
padding: 14px 0;
border-top: 1px solid var(--b1);
border-bottom: 1px solid var(--b1);
}
.hero-meta .item, .hero-stats .item { position: relative; }
.hero-meta .item + .item::before, .hero-stats .item + .item::before {
content: ''; position: absolute;
left: -14px; top: 50%; transform: translateY(-50%);
width: 1px; height: 16px; background: #C4B89F;
}
.hero-meta .item .v, .hero-stats .item .v {
font-family: var(--font-display); font-weight: 500;
font-variation-settings: 'opsz' 24, 'SOFT' 0;
font-size: 18px; line-height: 1.2;
color: var(--t1); letter-spacing: -0.005em;
}
.hero-meta .item .k, .hero-stats .item .k {
font-family: var(--font-sans); font-size: 9px; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
color: #8B7E68; margin-top: 4px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 0; }
.hero-image { aspect-ratio: 4/5; max-height: 560px; }
.hero-image .img-ph { width: 100%; height: 100%; border-radius: 12px; }
/* Subscription line on product cards (gold-soft pill under price) */
.card-product .sub-line {
background: var(--gold-soft); color: #6F5836;
font-size: 9px; font-weight: 500; letter-spacing: 0.01em;
padding: 3px 6px; border-radius: 4px;
margin-top: auto; /* pushuje pill + przycisk na dol karty (wyrownanie) */
line-height: 1.4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* pill 1 linia zawsze */
text-align: center; /* jak button */
}
.card-product .sub-line + .pcta,
.card-product .sub-line ~ .pcta { margin-top: 6px; } /* przycisk blisko pilla, nie auto */
.card-product .sub-line-empty { height: 0; margin-top: auto; } /* pusty slot zachowuje wyrownanie */
.card-product .pprice .strike {
font-size: 12px; color: var(--t3); font-weight: 400;
text-decoration: line-through; margin-left: 8px;
}
.card-product .pper-saving {
font-size: 11px; color: var(--success); font-weight: 500;
letter-spacing: 0.01em; margin-top: 2px;
}
/* =========================================================
TRUST BAR (4-col)
========================================================= */
.trust { padding: 38px 0; background: var(--bg2); border-block: 1px solid var(--b3); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-ico { color: var(--t1); flex-shrink: 0; margin-top: 1px; }
.trust-item .ttl { font-size: 13px; font-weight: 600; color: var(--t1); }
.trust-item .sub { font-size: 12px; color: var(--t3); margin-top: 2px; line-height: 1.5; }
/* =========================================================
GRID utilities
========================================================= */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.grid-6-3x2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* =========================================================
PROBLEM / ROZWIĄZANIE
========================================================= */
.ps-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ps-imgs .img-ph { aspect-ratio: 3/4; }
.ps-imgs .cell { position: relative; }
.ps-imgs .cell .lab {
position: absolute; bottom: 12px; left: 12px;
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
background: rgba(26,24,21,0.85); color: var(--bg);
padding: 6px 10px; border-radius: 999px; font-weight: 500;
}
/* =========================================================
HISTORIA
========================================================= */
.history-portrait { aspect-ratio: 4/5; }
.history-portrait .img-ph { width: 100%; height: 100%; border-radius: 12px; }
.brand-logos { display: flex; gap: 28px; align-items: center; margin: 24px 0 8px; }
.brand-logos .bl {
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--t3); padding: 8px 14px; border: 1px solid var(--b2);
border-radius: 4px; font-weight: 500;
}
/* =========================================================
REVIEWS
========================================================= */
/* =========================================================
REVIEWS — editorial card
========================================================= */
/* Label with leading horizontal bar, used in section header */
.lbl-bar { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.16em; font-size: 12px; }
.lbl-bar::before { content: ''; display: block; width: 18px; height: 1px; background: var(--gold); }
.page-head .lbl-bar { margin-bottom: 20px; }
/* H2 wariant editorial — większy, weight 400, opsz 72 */
.sec-header h2.h2-opinie {
font-size: 34px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1;
font-variation-settings: 'opsz' 72, 'SOFT' 0;
}
/* "Zobacz wszystkie →" — uppercase, underline tylko na hover */
.see-all {
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--t1);
text-decoration: none;
transition: color 120ms var(--ease);
}
.see-all:hover { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
/* H2 wariant „Linia Apollo” — punchy short headline */
.sec-header h2.h2-bestsellers {
font-size: 30px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.1;
font-variation-settings: 'opsz' 72, 'SOFT' 0;
margin-top: 0;
}
.review-card {
background: var(--bg);
border: 0;
border-radius: 10px;
padding: 32px 28px;
display: flex; flex-direction: column;
min-height: 280px;
transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.review-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(26,24,21,0.06);
}
.rc-quote-mark {
font-family: var(--font-display); font-weight: 400; font-size: 56px;
font-variation-settings: 'opsz' 144, 'SOFT' 0;
line-height: 0.5; color: var(--gold);
display: block; height: 14px; margin-bottom: 18px;
user-select: none;
}
.rc-stars { color: var(--gold); display: flex; gap: 1px; margin-bottom: 18px; }
.rc-quote {
font-family: var(--font-display); font-weight: 400; font-size: 17px;
font-variation-settings: 'opsz' 48, 'SOFT' 30;
line-height: 1.5; color: var(--t1);
margin: 0 0 auto 0; padding-bottom: 24px;
}
.rc-sep { border: 0; border-top: 1px solid var(--b3); margin: 0 0 16px; }
.rc-name { font-size: 12px; font-weight: 500; color: var(--t1); margin-bottom: 2px; }
.rc-meta { font-size: 10px; color: #8B7E68; letter-spacing: 0.04em; }
.rc-verified {
display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
font-size: 9px; font-weight: 500; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--success);
}
/* =========================================================
INSTAGRAM GRID
========================================================= */
.ig-cell { aspect-ratio: 1/1; position: relative; cursor: pointer; overflow: hidden; border-radius: 6px; }
.ig-cell .img-ph { position: absolute; inset: 0; border-radius: 6px; }
.ig-cell .ov {
position: absolute; inset: 0; background: rgba(26,24,21,0.0);
display: flex; align-items: center; justify-content: center;
color: #fff; gap: 14px; opacity: 0; transition: opacity 160ms var(--ease), background 160ms var(--ease);
z-index: 3;
}
.ig-cell:hover .ov { opacity: 1; background: rgba(26,24,21,0.45); }
/* =========================================================
NEWSLETTER
========================================================= */
.news-wrap { max-width: 720px; margin: 0 auto; text-align: center; }
.news-form {
display: grid; grid-template-columns: 1fr auto; gap: 8px;
margin-top: 24px;
}
.news-form input {
height: 48px; padding: 0 16px;
border: 1px solid var(--b-field); border-radius: 6px;
background: var(--bg);
font-size: 14px;
transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.news-form input:focus { outline: none; border: 1.5px solid var(--gold); box-shadow: 0 0 0 3px rgba(139,111,71,0.18); }
.news-consent {
display: flex; gap: 8px; align-items: flex-start;
font-size: 11.5px; color: var(--t3); text-align: left;
margin-top: 14px; max-width: 540px; margin-inline: auto;
}
.news-consent a { color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
.news-consent input[type=checkbox] { margin-top: 3px; accent-color: var(--gold); }
.moon-news-msg{margin-top:16px;font-size:13px;line-height:1.5;padding:14px 18px;border-radius:3px 8px 8px 3px;border:1px solid var(--alert-info-border);border-left:3px solid var(--alert-info-accent);text-align:left}
.moon-news-msg-error{background:var(--alert-error-bg);border-color:var(--alert-error-border);border-left-color:var(--alert-error-accent);color:var(--alert-error-text)}
.moon-news-msg-success{background:var(--alert-success-bg);border-color:var(--alert-success-border);border-left-color:var(--alert-success-accent);color:var(--alert-success-text)}
/* =========================================================
FOOTER
========================================================= */
.footer { background: var(--t1); color: rgba(251,248,241,0.66); padding: 72px 0 36px; }
.footer .container { color: rgba(251,248,241,0.66); }
.footer h4 {
font-size: 11px; font-weight: 600; color: var(--bg);
letter-spacing: 0.14em; text-transform: uppercase;
margin-bottom: 16px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }
.footer ul a { color: rgba(251,248,241,0.66); transition: color 120ms var(--ease); }
.footer ul a:hover { color: var(--bg); }
.footer-brand .desc { font-size: 12.5px; line-height: 1.65; max-width: 280px; margin: 14px 0 22px; overflow-wrap: break-word; }
.socials { display: flex; gap: 8px; }
.soc-btn {
width: 34px; height: 34px; border-radius: 999px;
background: rgba(251,248,241,0.06); color: rgba(251,248,241,0.8);
display: inline-flex; align-items: center; justify-content: center;
transition: background 120ms var(--ease), color 120ms var(--ease);
}
.soc-btn:hover { background: rgba(251,248,241,0.14); color: var(--bg); }
.footer-payments {
margin-top: 56px; padding-top: 28px;
border-top: 1px solid rgba(251,248,241,0.08);
display: flex; align-items: center; justify-content: space-between; gap: 24px;
flex-wrap: wrap;
}
.pay-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pay-chip {
font-size: 10.5px; letter-spacing: 0.06em;
padding: 6px 10px; border-radius: 4px;
background: rgba(251,248,241,0.06);
color: rgba(251,248,241,0.78);
font-weight: 500;
}
.legal-row {
margin-top: 22px; padding-top: 20px;
border-top: 1px solid rgba(251,248,241,0.08);
display: flex; align-items: center; justify-content: space-between; gap: 16px;
font-size: 11.5px; color: rgba(251,248,241,0.48);
flex-wrap: wrap;
}
.legal-row .sec-meta { display: flex; gap: 14px; }
.legal-row .sec-meta span { display: inline-flex; align-items: center; gap: 6px; }
/* =========================================================
STUB / placeholder for unbuilt screens
========================================================= */
.stub {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 80px 24px;
background: var(--bg);
}
.stub-card {
max-width: 560px; text-align: center;
padding: 56px 40px;
background: #fff;
border: 1px solid var(--b2);
border-radius: 12px;
}
.stub .lbl { color: var(--gold); }
.stub h1 {
font-family: var(--font-display);
font-size: 28px; font-weight: 500;
letter-spacing: -0.015em;
font-variation-settings: 'opsz' 72, 'SOFT' 0;
color: var(--t1); margin: 12px 0 14px;
}
.stub p { color: var(--t2); font-size: 14px; line-height: 1.65; }
.stub .meta {
margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--b3);
display: flex; gap: 24px; justify-content: center; font-size: 12px; color: var(--t3);
}
.stub .meta b { color: var(--t1); font-weight: 600; }
/* =========================================================
DODATKOWE KOMPONENTY (Sklep / Karta produktu / Koszyk)
— w systemie Warm Atelier, spójne z homepage 1:1
========================================================= */
/* --- Breadcrumb --- */
.crumbs{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--t3);padding:18px 0}
.crumbs a{color:var(--t3);transition:color 120ms var(--ease)}
.crumbs a:hover{color:var(--t1)}
.crumbs .sepc{color:var(--b1)}
/* --- Page intro header (PLP / generic) --- */
.page-head{padding:48px 0 22px}
.page-head h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 96,'SOFT' 0;font-size:40px;line-height:1.05;letter-spacing:-0.02em;color:var(--t1)}
.page-head h2{font-family:var(--font-display);font-weight:400;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:32px;line-height:1.15;letter-spacing:-0.01em;color:var(--t1);margin-top:14px}
.page-head h2 em{font-style:italic;color:var(--gold);font-weight:400}
.page-head p{color:var(--t2);font-size:14.5px;margin-top:10px;line-height:1.6}
/* --- Shop: layout sidebar + grid --- */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
#moonShopGrid{padding-bottom:80px}
.filters{position:sticky;top:84px;display:flex;flex-direction:column;gap:26px}
.filter-group{border-bottom:1px solid var(--b3);padding-bottom:22px}
.filter-group:last-child{border-bottom:0}
.filter-group h4{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--t1);margin-bottom:14px}
.filter-opt{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2);padding:5px 0;cursor:pointer;transition:color 120ms var(--ease);overflow-wrap:break-word;min-width:0}
.filter-opt:hover{color:var(--t1)}
.filter-opt input{accent-color:var(--gold);width:15px;height:15px}
.filter-opt .cnt{margin-left:auto;font-size:11px;color:var(--t3)}
.price-slider{position:relative;height:20px;margin:18px 4px 8px}
.price-slider .fillp{position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);background:var(--gold);border-radius:999px;pointer-events:none;z-index:1}
.price-slider .price-track{position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);background:var(--b2);border-radius:999px}
.price-slider input[type="range"]{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none;z-index:2}
.price-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:999px;background:#fff;border:2px solid var(--gold);box-shadow:0 1px 3px rgba(26,24,21,.2);cursor:pointer;pointer-events:all}
.price-slider input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:999px;background:#fff;border:2px solid var(--gold);box-shadow:0 1px 3px rgba(26,24,21,.2);cursor:pointer;pointer-events:all}
.price-slider input[type="range"]::-webkit-slider-runnable-track{background:transparent}
.price-slider input[type="range"]::-moz-range-track{background:transparent}
.price-vals{display:flex;justify-content:space-between;font-size:11px;color:var(--t3)}
.shop-no-results{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--t3);font-size:14px}
.shop-no-results p{margin:0}
/* filter-opt radio (rating) */
.filter-opt input[type="radio"]{accent-color:var(--gold);width:15px;height:15px}
/* sheet-filters: reuse filter-group styles inside mobile sheet */
.sheet-filters .filter-group{border-bottom:1px solid var(--b3);padding-bottom:18px;margin-bottom:18px}
.sheet-filters .filter-group:last-child{border-bottom:0;margin-bottom:0}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--b3);margin-bottom:24px}
.shop-count{font-size:13px;color:var(--t2)}
.shop-count b{color:var(--t1);font-weight:600}
.toolbar-right{display:flex;align-items:center;gap:14px}
.select-sort{height:38px;padding:0 14px;border:1px solid var(--b-field);border-radius:6px;background:var(--bg);font-size:13px;color:var(--t1);cursor:pointer}
.view-toggle{display:flex;border:1px solid var(--b1);border-radius:6px;overflow:hidden}
.view-toggle button{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:var(--t3)}
.view-toggle button.active{background:var(--t1);color:var(--bg)}
.active-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.fpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 10px;border-radius:999px;background:var(--bg2);color:var(--t2);border:1px solid var(--b2);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpill .x{cursor:pointer;color:var(--t3)}
.fpill.clear{background:transparent;border:0;color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* pagination */
.pager{display:flex;justify-content:center;gap:6px;margin-top:48px}
.pager a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--b2);border-radius:6px;font-size:13px;color:var(--t2);transition:all 120ms var(--ease)}
.pager a:hover{border-color:var(--border-hover);color:var(--t1)}
.pager a.active{background:var(--t1);color:var(--bg);border-color:var(--t1)}
/* --- Product detail --- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:14px 0 64px;align-items:start}
.gallery{position:sticky;top:84px}
.gal-main{aspect-ratio:4/5;border-radius:12px;overflow:hidden;position:relative;margin-bottom:12px}
.gal-main .img-ph{position:absolute;inset:0;border-radius:12px}
.gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.gal-thumb{aspect-ratio:1/1;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;position:relative}
.gal-thumb .img-ph{position:absolute;inset:0;border-radius:6px}
.gal-thumb.active{border-color:var(--gold)}
.pdp-info .lbl{margin-bottom:10px}
.pdp-info h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 144,'SOFT' 0;font-size:38px;line-height:1.08;letter-spacing:-0.02em;color:var(--t1);margin-bottom:14px}
.pdp-rating{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2);margin-bottom:20px}
.pdp-price{display:flex;align-items:baseline;gap:12px;margin:20px 0}
.pdp-price .now{font-family:var(--font-sans);font-size:28px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.pdp-price .per{font-size:12px;color:var(--t3)}
.pdp-price .was{font-size:18px;color:var(--t3);font-variant-numeric:tabular-nums}
.pdp-price .was s{text-decoration:line-through}
.pdp-omnibus{width:100%;font-size:12px;color:var(--t3);margin-top:-4px}
.pdp-desc{color:var(--t2);font-size:14.5px;line-height:1.7;margin-bottom:26px}
.variant-row{display:flex;gap:10px;margin:14px 0 8px}
.variant{flex:1;border:1.5px solid var(--b1);border-radius:8px;padding:12px 14px;cursor:pointer;transition:all 140ms var(--ease);text-align:left}
.variant:hover{border-color:var(--border-hover)}
.variant.active{border-color:var(--gold);background:var(--gold-soft)}
.variant .vt{font-size:13px;font-weight:600;color:var(--t1)}
.variant .vp{font-size:12px;color:var(--t3);margin-top:2px}
.buy-row{display:flex;gap:12px;margin:24px 0}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--b1);border-radius:8px;height:48px}
.qty-stepper button{width:46px;height:100%;font-size:18px;color:var(--t2)}
.qty-stepper span{width:40px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.trust-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;padding-top:24px;border-top:1px solid var(--b3)}
.trust-mini .ti{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--t2)}
.trust-mini .ti svg{color:var(--gold);flex-shrink:0;margin-top:1px}
.crosssell{margin-top:22px;background:var(--bg2);border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center}
.crosssell .img-ph{width:64px;height:64px;border-radius:8px;flex-shrink:0}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--b2);margin:8px 0 28px}
.tab{padding:14px 20px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 120ms var(--ease)}
.tab.active{color:var(--t1);border-bottom-color:var(--gold)}
/* --- Cart --- */
.steps{display:flex;justify-content:center;gap:8px;padding:26px 0 8px}
.step{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3)}
.step .num{width:24px;height:24px;border-radius:999px;border:1.5px solid var(--b1);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.step.active{color:var(--t1)}
.step.active .num{background:var(--gold);border-color:var(--gold);color:#fff}
.step .line{width:40px;height:1px;background:var(--b2)}
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;padding:24px 0 80px}
.cart-layout-full{grid-template-columns:1fr}
.cart-item{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:22px 0;border-bottom:1px solid var(--b3)}
.cart-item .img-ph{width:96px;height:120px;border-radius:8px}
.ci-title{font-size:15px;font-weight:600;color:var(--t1)}
.ci-cat{font-size:12px;color:var(--t3);margin-top:2px}
.ci-remove{font-size:12px;color:var(--t3);text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:10px;display:inline-block}
.ci-remove:hover{color:var(--error)}
.ci-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ci-price{font-size:16px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.ci-right-col{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.moon-ui .ci-review-link{display:block;margin-top:6px;font-size:12px;color:var(--gold);text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:3px;text-decoration-color:rgba(139,111,71,.4)}
.moon-ui .ci-review-link:hover{color:var(--gold-dark);text-decoration-color:var(--gold)}
.ci-review-done{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;color:var(--t3)}
.cart-item .qty-stepper{justify-content:center;width:220px}
.summary{position:sticky;top:84px;background:#fff;border:1px solid var(--b2);border-radius:12px;padding:24px}
.summary h2,.summary h3{font-size:15px;font-weight:600;margin-bottom:18px}
.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--t2);margin-bottom:10px}
.sum-row>span:last-child{white-space:nowrap;flex-shrink:0;text-align:right}
.sum-total{display:flex;justify-content:space-between;gap:12px;font-size:17px;font-weight:600;color:var(--t1);padding-top:14px;border-top:1px solid var(--b2);margin-top:6px;font-variant-numeric:tabular-nums}
.sum-total>span:last-child{white-space:nowrap;flex-shrink:0;text-align:right}
.ship-bar{background:var(--bg2);border-radius:8px;padding:12px 14px;margin:16px 0;font-size:12px;color:var(--success);font-weight:500;display:flex;align-items:center;gap:8px}
.coupon{display:grid;grid-template-columns:1fr auto;gap:8px;margin:16px 0}
.coupon .btn{min-width:0;white-space:nowrap}
@media(max-width:400px){.coupon .btn{padding-left:14px;padding-right:14px}}
.coupon input{height:44px;padding:0 14px;border:1px solid var(--b-field);border-radius:6px;font-size:13px;background:var(--bg);min-width:0}
.coupon input:focus{outline:none;border:1.5px solid var(--gold);box-shadow:0 0 0 3px rgba(139,111,71,.18)}
.moon-coupon-msg{display:none;margin-top:10px;padding:14px 18px;border:1px solid var(--alert-error-border);border-left:3px solid var(--alert-error-accent);background:var(--alert-error-bg);color:var(--alert-error-text);font-size:13px;line-height:1.5;border-radius:3px 8px 8px 3px;align-items:flex-start;gap:6px}
.moon-coupon-msg[style*="display: block"],.moon-coupon-msg[style*="display:block"]{display:flex!important}
.moon-coupon-msg::before{content:'';flex-shrink:0;width:14px;height:14px;margin-top:2px;background:var(--alert-error-accent);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z'/%3E%3C/svg%3E")}
/* =========================================================
MOBILE (≤640px) — single column, sticky bars, bottom sheet
========================================================= */
@media (max-width:640px){
.container{padding:0 16px}
.header-inner{grid-template-columns:auto 1fr auto;gap:12px;padding:14px 16px}
.nav{display:none}
.topbar-inner{justify-content:center}.topbar-right{display:none}
.page-head h1{font-size:30px}
.page-head h2{font-size:26px}
.pdp,.cart-layout,.shop-layout,.grid-2,.hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
.grid-4,.grid-3{grid-template-columns:1fr 1fr;gap:12px}
.gallery,.filters,.summary,.gallery.gallery{position:static}
.filters{display:none}
.trust-grid{grid-template-columns:1fr 1fr;gap:16px}
.footer-grid{grid-template-columns:1fr 1fr;gap:24px}
.hero h1{font-size:38px}
.pdp-info h1{font-size:30px}
.cart-item{grid-template-columns:72px 1fr;gap:12px}
.cart-item .ci-right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--b2);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;z-index:200;box-shadow:0 -4px 16px rgba(26,24,21,.06)}
.mobile-filter-btn{display:flex}
body{padding-bottom:76px}
}
@media (min-width:641px){
.mobile-bar{display:none}
.mobile-filter-btn{display:none}
}
/* =========================================================
BATCH 2: Checkout / Confirm / Empty / Auth / Dashboard / Search
========================================================= */
/* ---- unified form fields — ONE standard for ALL forms ---- */
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);margin-bottom:6px}
/* unified input standard — white bg, b2 border, 8px radius, used by ALL forms */
.field input,.field select,.field textarea{width:100%;height:46px;padding:0 14px;border:1px solid var(--b-field);border-radius:8px;background:#fff;font-size:14px;color:var(--t1);font-family:var(--font-sans);transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease);box-sizing:border-box}
.field textarea{height:auto;padding:12px 14px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border:1.5px solid var(--gold);box-shadow:0 0 0 3px rgba(139,111,71,.18)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consent,.field label.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--t2);margin:10px 0}
.consent input{margin-top:2px;accent-color:var(--gold);width:16px;height:16px;flex-shrink:0}
.consent a{color:var(--t2);text-decoration:underline;text-underline-offset:3px}
/* checkout accordion */
.co-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;padding:20px 0 80px}
.co-section{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:24px;margin-bottom:16px}
.co-section .co-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.co-section .co-num{width:28px;height:28px;border-radius:999px;background:var(--gold);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.co-section .co-num.done{background:var(--success)}
.co-section h3{font-size:16px;font-weight:600}
.radio-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--b1);border-radius:8px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all 140ms var(--ease)}
.radio-card:hover{border-color:var(--border-hover)}
.radio-card.active{border-color:var(--gold);background:var(--gold-soft)}
.radio-card .rc-l{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:500}
.radio-card .dot{width:18px;height:18px;border-radius:999px;border:2px solid var(--b1);flex-shrink:0}
.radio-card.active .dot{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px #fff}
.radio-card .rc-price{font-size:13px;font-weight:600;color:var(--t1)}
/* confirm */
.confirm-hero{background:var(--t1);color:var(--bg);text-align:center;padding:72px 24px 64px}
.confirm-check{width:72px;height:72px;border-radius:999px;background:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.confirm-check svg{width:36px;height:36px;color:#fff}
.confirm-hero h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 96,'SOFT' 0;font-size:38px;color:var(--bg);margin-bottom:14px}
.confirm-hero p{color:rgba(251,248,241,.7);font-size:15px;max-width:480px;margin:0 auto}
.order-pill{display:inline-block;background:var(--gold-soft);color:#5A4322;font-weight:600;font-size:13px;padding:7px 16px;border-radius:999px;margin-top:20px;letter-spacing:0.04em}
.confirm-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;padding:48px 0 80px;align-items:start}
.info-card{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:24px;margin-bottom:16px}
.info-card h2,.info-card h3{font-size:14px;font-weight:600;margin-bottom:14px}
.timeline{display:flex;flex-direction:column;gap:0}
.tl-step{display:flex;gap:14px;padding-bottom:20px;position:relative}
.tl-step:not(:last-child)::before{content:'';position:absolute;left:9px;top:22px;bottom:0;width:1px;background:var(--b2)}
.tl-dot{width:18px;height:18px;border-radius:999px;border:2px solid var(--star-empty);flex-shrink:0;background:var(--bg);z-index:1}
.tl-step.done .tl-dot{background:var(--gold);border-color:var(--gold)}
.tl-step.active .tl-dot{border-color:var(--gold);box-shadow:inset 0 0 0 3px var(--gold)}
.tl-txt{font-size:13px}.tl-txt .tl-t{font-weight:600;color:var(--t1)}.tl-txt .tl-s{color:var(--t3);margin-top:2px}
/* --- ATC toast --- */
.moon-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:9999;background:#fff;border:1px solid var(--b2);border-radius:12px;padding:16px 20px;box-shadow:0 8px 32px rgba(26,24,21,.12);display:flex;align-items:center;gap:14px;font-family:var(--font-sans);font-size:13px;color:var(--t1);max-width:420px;width:calc(100% - 32px);opacity:0;translate:0 -12px;transition:opacity 260ms var(--ease),translate 260ms var(--ease);pointer-events:none}
.moon-toast.show{opacity:1;translate:0 0;pointer-events:auto}
.moon-toast .mt-check{width:36px;height:36px;border-radius:999px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.moon-toast .mt-msg{font-weight:600}
.moon-toast .mt-links{display:flex;gap:12px;margin-top:6px;font-size:12px;font-weight:500}
.moon-toast .mt-links a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.moon-toast .mt-links a:hover{color:var(--gold-dark)}
@media (max-width:640px){
.moon-toast{top:auto;bottom:120px}
}
/* --- moonMsg banner (global alert replacement) --- */
.moon-msg{position:fixed;top:96px;right:24px;left:auto;transform:none;z-index:10001;
font-family:var(--font-sans);font-size:13px;line-height:1.5;
max-width:380px;width:calc(100% - 48px);
padding:14px 40px 14px 18px;
border-radius:3px 8px 8px 3px;border:1px solid #D8C9AC;border-left-width:3px;
box-shadow:0 4px 20px rgba(26,24,21,.12);
opacity:0;translate:0 -12px;transition:opacity 260ms var(--ease),translate 260ms var(--ease);pointer-events:none}
.moon-msg.show{opacity:1;translate:0 0;pointer-events:auto}
.moon-msg-text{display:block}
.moon-msg-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:18px;line-height:1;cursor:pointer;color:inherit;opacity:.6;padding:0}
.moon-msg-close:hover{opacity:1}
.moon-msg-error{background:var(--alert-error-bg);border-color:var(--alert-error-border);border-left-color:var(--alert-error-accent);color:var(--alert-error-text)}
.moon-msg-success{background:var(--alert-success-bg);border-color:var(--alert-success-border);border-left-color:var(--alert-success-accent);color:var(--alert-success-text)}
.moon-msg-info{background:var(--alert-info-bg);border-color:var(--alert-info-border);border-left-color:var(--alert-info-accent);color:var(--alert-info-text)}
.moon-msg-warn{background:var(--alert-warn-bg);border-color:var(--alert-warn-border);border-left-color:var(--alert-warn-accent);color:var(--alert-warn-text)}
@media(max-width:640px){
.moon-msg{top:auto;bottom:120px;right:16px;left:16px;width:auto;max-width:none;font-size:12px;padding:12px 36px 12px 14px}
}
/* --- moonMsg confirm dialog --- */
.moon-confirm{border:none;border-radius:14px;padding:0;max-width:380px;width:calc(100% - 32px);
box-shadow:0 12px 48px rgba(26,24,21,.18);background:#fff;font-family:var(--font-sans)}
.moon-confirm::backdrop{background:rgba(26,24,21,.45)}
.moon-confirm-body{padding:28px 24px}
.moon-confirm-text{font-size:15px;line-height:1.55;color:var(--t1);margin:0 0 24px;text-align:center}
.moon-confirm-actions{display:flex;gap:12px;justify-content:center}
.moon-confirm-actions .btn{min-width:100px;justify-content:center;font-size:13px;padding:10px 20px}
/* Cancel order dialog */
.moon-cancel-dialog{border:none;border-radius:14px;padding:0;max-width:400px;width:calc(100% - 32px);background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.moon-cancel-dialog::backdrop{background:rgba(26,24,21,.45)}
.mcd-body{padding:28px 24px}
.mcd-title{font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--t1);margin:0 0 8px}
.mcd-text{font-size:14px;color:var(--t2);line-height:1.55;margin:0 0 16px}
.mcd-hint{background:var(--bg);border:1px solid var(--b2);border-radius:8px;padding:14px 16px;margin:0 0 20px}
.mcd-hint p{font-size:13px;color:var(--t2);line-height:1.55;margin:0}
.mcd-actions{display:flex;gap:12px;justify-content:flex-end}
.mcd-actions .btn{font-size:13px;padding:10px 18px;justify-content:center}
.mcd-btn-danger{display:inline-flex;align-items:center;border:1px solid #C0392B;color:#C0392B;background:none;border-radius:6px;font-size:13px;font-weight:500;padding:10px 18px;text-decoration:none;cursor:pointer}
.mcd-btn-danger:hover{background:rgba(192,57,43,.06)}
@media(max-width:480px){.mcd-actions{flex-direction:column}.mcd-actions .btn,.mcd-btn-danger{width:100%;text-align:center;justify-content:center}}
/* --- ATC modal (desktop) / bottom sheet (mobile) --- */
.acm-overlay{position:fixed;inset:0;z-index:9999;background:rgba(26,24,21,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 250ms var(--ease);pointer-events:none}
.acm-overlay.open{opacity:1;pointer-events:auto}
.acm-dialog{background:#fff;border-radius:16px;padding:28px 24px;max-width:440px;width:calc(100% - 32px);box-shadow:0 12px 48px rgba(26,24,21,.18);position:relative;transform:scale(.95);transition:transform 250ms var(--ease)}
.acm-overlay.open .acm-dialog{transform:scale(1)}
.acm-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:999px;border:none;background:var(--bg2);color:var(--t2);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 120ms var(--ease)}
.acm-close:hover{background:var(--b2)}
.acm-header{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--t1);margin-bottom:20px}
.acm-product{display:flex;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--b3);border-bottom:1px solid var(--b3)}
.acm-summary{padding:14px 0;display:flex;flex-direction:column;gap:10px}
.acm-actions{display:flex;gap:10px;padding-top:6px}
.acm-actions .btn{flex:1;justify-content:center;height:48px;font-size:13px;text-decoration:none;display:inline-flex;align-items:center;box-sizing:border-box}
@media (max-width:640px){
.acm-overlay{align-items:flex-end}
.acm-dialog{max-width:none;width:100%;border-radius:16px 16px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform 280ms var(--ease)}
.acm-overlay.open .acm-dialog{transform:translateY(0)}
.acm-actions{flex-direction:column}
.acm-actions .btn{flex:none;width:100%;height:48px}
}
/* empty state */
.empty{text-align:center;padding:64px 24px 40px;max-width:560px;margin:0 auto}
.empty-ico{width:88px;height:88px;border-radius:999px;background:var(--bg2);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--t3)}
.empty h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72,'SOFT' 0;font-size:30px;margin-bottom:12px}
.empty p{color:var(--t2);font-size:14.5px;line-height:1.65;margin-bottom:28px}
.path-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}
.path-card{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:24px 18px;text-align:center;transition:all 200ms var(--ease);cursor:pointer}
.path-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(26,24,21,.06);border-color:var(--border-hover)}
.path-card.feat{border-color:var(--gold);background:var(--gold-soft)}
.path-card .pc-ico{width:44px;height:44px;border-radius:999px;background:var(--bg2);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--gold)}
.path-card.feat .pc-ico{background:#fff}
.path-card .pc-t{font-size:14px;font-weight:600;margin-bottom:4px}
.path-card .pc-s{font-size:12px;color:var(--t3)}
/* auth — split login/register (true 50/50 full-bleed) */
.auth-split{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:calc(100vh - 120px);width:100vw;margin-left:calc(50% - 50vw)}
.auth-pane{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.auth-pane>*{width:100%;max-width:380px}
.auth-pane.dark{background:var(--t1);color:var(--bg);padding:56px 48px}
.auth-pane h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72,'SOFT' 0;font-size:28px;margin-bottom:8px}
.auth-pane.dark h2{color:var(--bg)}
.auth-pane .sub{font-size:13.5px;color:var(--t2);margin-bottom:24px}
.auth-pane.dark .sub{color:rgba(251,248,241,.7)}
/* auth dark: labels champagne on espresso bg */
.auth-pane.dark .field label{color:rgba(251,248,241,.7)}
/* auth dark: inputs WHITE (same as light pane — unified standard) */
.auth-pane.dark .field input.input-text{background:#fff;border-color:var(--b2);color:var(--t1)}
.auth-pane.dark .field input.input-text::placeholder{color:var(--t3)}
/* remove Woo form card borders inside auth panes */
.auth-pane form{border:none!important;padding:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
/* password wrapper + eye toggle */
.field-pw-wrap{position:relative}
.field-pw-wrap input{padding-right:44px!important}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none!important;border:none;cursor:pointer;color:var(--t3);padding:6px;display:flex;align-items:center;justify-content:center}
.pw-toggle:hover{color:var(--t1)}
/* remember + lost password row */
.auth-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 18px;font-size:12.5px}
.auth-remember{display:flex;align-items:center;gap:8px;color:var(--t2);cursor:pointer}
.auth-remember input{accent-color:var(--gold);width:16px;height:16px}
.auth-lost{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
.auth-lost:hover{color:var(--gold)}
/* benefits */
.benefits{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0 0 28px;padding:0}
.benefits li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(251,248,241,.88)}
.benefits li svg{color:var(--gold);flex-shrink:0;margin-top:2px}
/* password strength meter */
.pw-meter{height:4px;border-radius:999px;background:rgba(255,255,255,.2);margin:8px 0 4px;overflow:hidden}
.pw-meter .pw-fill{height:100%;width:0;background:var(--gold);border-radius:999px;transition:width 200ms var(--ease),background 200ms var(--ease)}
.pw-label{font-size:11px;color:rgba(251,248,241,.6)}
/* guest link */
.moon-guest-link{display:block;margin-top:18px;text-align:center;font-size:13px;font-weight:500;color:var(--t2);text-decoration:none;transition:color 160ms var(--ease)}
.moon-guest-link:hover{color:var(--t1)}
/* consent checkboxes (register) */
.moon-consent{margin:10px 0}
.moon-consent label{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:rgba(251,248,241,.7);cursor:pointer}
.moon-consent input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;flex-shrink:0;margin-top:1px}
.moon-consent a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.moon-consent abbr{text-decoration:none;color:var(--gold)}
/* hide Woo default privacy text */
.auth-pane .woocommerce-privacy-policy-text{display:none}
/* btn fix inside auth-pane (pitfall #1) — scoped to .btn-gold only */
.auth-pane button.btn-gold{font-size:14px!important;font-weight:500!important;background:var(--gold)!important;color:#fff!important}
.auth-pane button.btn-gold:hover{background:var(--gold-dark)!important}
/* hide Woo native password strength meter (we have our own .pw-meter) */
.auth-pane .woocommerce-password-strength,
.auth-pane .woocommerce-password-hint,
.auth-pane .wc-password-strength-meter{display:none!important}
/* ── Reset hasła (wyśrodkowany na champagne, bez karty) ── */
/* Typografia i pola identyczne z .auth-pane (strona logowania) */
.mr-page{display:flex;flex-direction:column;align-items:center;max-width:520px;margin:0 auto;padding:56px 24px;text-align:center;min-height:calc(100vh - 260px);justify-content:center}
.mr-ico{width:56px;height:56px;border-radius:50%;background:var(--bg2,#efe9dc);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--gold)}
/* h2 — identyczny z .auth-pane h2 */
.mr-page h1.mr-h{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72,'SOFT' 0;font-size:28px;color:var(--t1);margin:0 0 8px}
/* sub — identyczny z .auth-pane .sub */
.mr-desc{font-size:13.5px;line-height:1.65;color:var(--t2);margin:0 0 24px}
.mr-page form{width:100%;border:none!important;padding:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.mr-page form.lost_reset_password::before{display:none!important}
/* .field — dziedziczy globalne style (linia 933-937): #fff bg, --b2 border, 8px radius, 46px height */
.mr-page .field{text-align:left;margin-bottom:16px}
.mr-req{color:var(--alert-error-accent,#c04040)}
.mr-page .btn-gold{width:100%}
.mr-sep{display:flex;align-items:center;gap:14px;width:100%;margin:22px 0 16px;color:var(--t3);font-size:13px}
.mr-sep::before,.mr-sep::after{content:'';flex:1;border-top:1px solid var(--b2)}
.mr-page .mr-back{display:inline-block;color:var(--gold);font-size:14px;font-weight:500;text-decoration:none;margin-bottom:24px}
.mr-page .mr-back:hover{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
.mr-help{display:flex;align-items:center;gap:8px;justify-content:center;width:100%;font-size:13px;color:var(--t3);border-top:1px solid var(--b2);padding-top:20px}
.mr-help svg{flex-shrink:0;color:var(--t3)}
.mr-help a{color:var(--gold);font-weight:500;text-decoration:none}
.mr-help a:hover{text-decoration:underline;text-underline-offset:3px}
.mr-ico-success{background:#E5F0EA!important;color:var(--success)!important}
.mr-details{font-size:13px;line-height:1.65;color:var(--t3);margin:0 0 28px}
body.woocommerce-account .woocommerce:has(.mr-page){max-width:none!important;margin:0!important;padding:0!important}
body.woocommerce-account .woocommerce:has(.mr-page) .woocommerce-message{display:none!important}
@media(max-width:640px){
.mr-page{padding:32px 20px;min-height:auto}
.mr-page h1.mr-h{font-size:24px}
}
/* dashboard */
.dash-layout{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start;padding:24px 0 80px}
.dash-nav{position:sticky;top:84px;background:#fff;border:1px solid var(--b2);border-radius:12px;padding:8px;overflow:hidden}
.dash-userhead{padding:18px 16px;border-bottom:1px solid var(--b3);margin-bottom:8px}
.dash-uh-row{display:flex;align-items:center;gap:12px}
.dash-avatar{width:44px;height:44px;border-radius:50%;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;color:var(--gold-dark);flex-shrink:0;letter-spacing:0}
.dash-userhead .nm{font-size:14px;font-weight:600}
.dash-userhead .insider{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;font-weight:600;color:var(--gold-dark);background:var(--gold-soft);padding:3px 8px;border-radius:999px;white-space:nowrap}
.dash-link{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:13.5px;color:var(--t2);cursor:pointer;transition:all 120ms var(--ease)}
.dash-link:hover{background:var(--bg-hover);color:var(--t1)}
.dash-link.active{background:var(--gold-soft);color:#5A4322;font-weight:600}
.dash-link-soon{opacity:.5;cursor:default}
.dash-link-soon:hover{background:transparent;color:var(--t3)}
.soon-pip{font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);margin-left:auto;opacity:.8}
.insider-soon{opacity:.55}
.dash-link svg{width:16px;height:16px;flex-shrink:0}
/* last order card on dashboard */
.dash-last-order{display:flex;justify-content:space-between;align-items:center;font-size:13px;gap:12px}
.dash-lo-info{min-width:0}
.dash-lo-num{font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-lo-id{white-space:nowrap}
.dash-lo-meta{color:var(--t3);margin-top:2px}
/* product links in order views */
.ci-prod-link{color:var(--t1);text-decoration:none;transition:color 120ms var(--ease)}
.ci-prod-link:hover{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
.ci-img-link{display:block;flex-shrink:0;line-height:0}
.ci-img-link:hover{opacity:.85}
/* mobile accordion trigger — hidden on desktop */
.dash-nav-trigger{display:none}
.dash-hero{background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 100%);border-radius:12px;padding:32px;margin-bottom:24px}
.dash-hero h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 96,'SOFT' 0;font-size:30px;margin-bottom:8px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:22px}
.stat-card .sv{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 32,'SOFT' 0;font-size:28px;color:var(--t1)}
.stat-card .sk{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t3);margin-top:4px}
/* search */
.search-hero{background:var(--bg2);padding:48px 0 40px}
.searchbar{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto;background:#fff;border:1.5px solid var(--gold);border-radius:999px;padding:0 8px 0 20px;height:56px;box-shadow:0 0 0 3px rgba(139,111,71,.12)}
.searchbar input{flex:1;border:0;background:none;font-size:15px;height:100%}
.searchbar input:focus{outline:none;box-shadow:0 0 0 3px rgba(139,111,71,.18)}
.searchbar .sb-go{height:42px;padding:0 22px;border-radius:999px;background:var(--gold);color:#fff;font-size:13px;font-weight:500}
.result-group{margin-bottom:36px}
.result-group .rg-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--b3)}
.result-group .rg-head h3{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:20px}
.result-group .rg-head .cnt{font-size:12px;color:var(--t3)}
.res-list{display:flex;flex-direction:column;gap:2px}
.res-item{display:flex;gap:14px;align-items:center;padding:14px;border-radius:8px;transition:background 120ms var(--ease);cursor:pointer}
.res-item:hover{background:var(--bg-hover)}
.res-item .img-ph{width:56px;height:56px;border-radius:8px;flex-shrink:0}
.res-item .ri-t{font-size:14px;font-weight:600;color:var(--t1)}
.res-item .ri-s{font-size:12px;color:var(--t3);margin-top:2px}
.res-item .ri-price{margin-left:auto;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:640px){
.co-layout,.confirm-grid,.dash-layout,.auth-split{grid-template-columns:1fr;gap:24px}
.auth-pane.dark{padding:40px 24px}
.auth-pane{padding:32px 24px}
.path-cards,.stat-row{grid-template-columns:1fr;gap:12px}
.dash-nav{position:static}
.field-row{grid-template-columns:1fr}
.searchbar{height:50px}
.grid-6-3x2{grid-template-columns:1fr 1fr;gap:10px}
.trust-mini{grid-template-columns:1fr;gap:12px}
.gal-thumbs{grid-template-columns:repeat(5,1fr)}
.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
.steps{flex-wrap:wrap}
.variant-row,.buy-row{flex-direction:column}
.buy-row .qty-stepper{width:100%;justify-content:center}
.res-item .ri-price{margin-left:0}
}
/* =========================================================
BATCH 3: Konto / Zamówienia / Zwroty / Subskrypcja / Reset / Aktywacja
========================================================= */
/* chip filters (orders) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{padding:8px 16px;border-radius:999px;border:1px solid var(--b1);font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;transition:all 140ms var(--ease)}
.chip:hover{border-color:var(--border-hover);color:var(--t1)}
.chip.active{background:var(--t1);color:var(--bg);border-color:var(--t1)}
/* order list card */
.order-card{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:20px 24px;margin-bottom:14px}
.oc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.oc-meta{font-size:12px;color:var(--t3)}
.oc-no{font-size:15px;font-weight:600;color:var(--t1)}
.oc-body{display:flex;gap:16px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--b3)}
.oc-thumbs{display:flex;align-items:center}
.oc-thumbs a,.oc-thumbs .img-ph{flex-shrink:0;margin-left:-10px;position:relative}
.oc-thumbs a:first-child,.oc-thumbs .img-ph:first-child{margin-left:0}
.oc-thumbs .img-ph{width:44px;height:44px;border-radius:8px;border:2px solid #fff}
.oc-thumbs img{width:44px;height:44px;border-radius:8px;border:2px solid #fff;object-fit:cover;display:block}
.oc-thumb-more{width:44px;height:44px;border-radius:8px;border:2px solid #fff;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--t2);flex-shrink:0;margin-left:-10px;position:relative}
.oc-no a{color:var(--t1);text-decoration:none}.oc-no a:hover{color:var(--gold)}
.btn-sm{height:44px;padding:0 14px;font-size:12px}
.oc-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.oc-reviewed{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--t3);white-space:nowrap}
/* status badge — 6 statusów MOØN */
.sbadge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 12px;border-radius:999px;letter-spacing:0.02em;white-space:nowrap}
.sbadge.pending{background:#F3E8D2;color:#8B6F47}
.sbadge.paid{background:#E9EFE0;color:#5A6B3A}
.sbadge.proc{background:#F3E8D2;color:#8B6F47}
.sbadge.ship{background:#F3E8D2;color:#8B6F47}
.sbadge.done{background:#E9EFE0;color:#5A6B3A}
.sbadge.cancel{background:#F2DAD5;color:#B5654A}
.sbadge.failed{background:var(--alert-error-bg);color:var(--error)}
.sbadge.hold{background:#E0E7F0;color:#3A5A7A}
.sbadge.refund{background:#F2DAD5;color:#B5654A}
.sbadge.unknown{background:var(--bg2);color:var(--t3)}
.sbadge-warn{background:#F3E8D2;color:#8B6F47}
.sbadge-info{background:#E0E7F0;color:#3A5A7A}
.sbadge-success{background:#E9EFE0;color:#5A6B3A}
/* payment / status alerts */
.moon-alert{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:3px 10px 10px 3px;font-size:13px;line-height:1.5;flex-wrap:wrap;border-left:3px solid var(--alert-info-accent)}
.moon-alert.alert-warn{background:var(--alert-error-bg);border:1px solid var(--alert-error-border);border-left:3px solid var(--alert-error-accent);color:var(--alert-error-text)}
.moon-alert.alert-info{background:var(--alert-info-bg);border:1px solid var(--alert-info-border);border-left:3px solid var(--alert-info-accent);color:var(--alert-info-text)}
.moon-alert .ma-content{flex:1;min-width:200px}
/* 4-step progress (order detail) */
.progress4{display:flex;align-items:center;margin:8px 0 28px}
.p4-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative}
.p4-dot{width:32px;height:32px;border-radius:999px;border:2px solid var(--b1);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--t3);z-index:2}
.p4-step.done .p4-dot{background:var(--gold);border-color:var(--gold);color:#fff}
.p4-step.active .p4-dot{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.p4-line{flex:1;height:2px;background:var(--b2);margin:0 -4px;align-self:center;position:relative;top:-8px}
.p4-line.done{background:var(--gold)}
.p4-lbl,.p4-label{font-size:11px;font-weight:500;color:var(--t2);text-align:center}
/* tracking box */
.track-box{background:var(--bg2);border-radius:8px;padding:16px;display:flex;gap:14px;align-items:center;margin-top:8px}
.track-box .tb-ico{width:40px;height:40px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
/* wishlist actions bar */
.wish-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--b3)}
.wishbtn.filled{color:var(--error)}
.wishbtn.filled svg{fill:var(--error)}
.wishbtn{cursor:pointer;border:0;padding:0}
/* wishlist empty state */
.moon-wish-empty{text-align:center;padding:64px 24px 80px;max-width:420px;margin:0 auto}
.wish-empty-ico{width:80px;height:80px;border-radius:999px;background:var(--bg2);color:var(--t3);display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.moon-wish-empty h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:24px;line-height:1.2;color:var(--t1);margin-bottom:12px}
.moon-wish-empty p{color:var(--t2);font-size:14px;line-height:1.6;margin-bottom:8px}
/* wish-bar responsive */
@media (max-width:640px){
.moon-wish-grid.grid-3{grid-template-columns:1fr 1fr}
.wish-bar{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:400px){
.moon-wish-grid.grid-3{grid-template-columns:1fr}
}
/* returns steps */
/* Return stepper (3 kroki, kółka + linie + tekst pod) */
.ret-stepper{display:flex;justify-content:center;margin:24px 0 32px;position:relative}
.rst-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}
.rst-dot{width:40px;height:40px;border-radius:999px;border:2px solid var(--b1);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--t3);transition:all 200ms var(--ease)}
.rst-title{font-size:12px;font-weight:600;color:var(--t3);margin-top:10px;transition:color 200ms var(--ease)}
.rst-desc{font-size:11px;color:var(--t3);opacity:.5;margin-top:2px;line-height:1.4}
/* Linia łącząca — pseudo-element, od krawędzi kółka do następnego */
.rst-step:not(:last-child)::after{content:'';position:absolute;top:20px;left:calc(50% + 24px);right:calc(-50% + 24px);height:2px;background:var(--b2);z-index:0;transition:background 200ms var(--ease)}
/* Aktywny krok */
.rst-step.rst-active .rst-dot{width:44px;height:44px;background:var(--t1);border-color:var(--t1);color:#fff;box-shadow:0 0 0 4px var(--gold-soft);font-size:15px}
.rst-step.rst-active .rst-title{color:var(--t1)}
.rst-step.rst-active .rst-desc{color:var(--gold-dark);opacity:1;font-weight:500}
/* Ukończony krok */
.rst-step.rst-done .rst-dot{background:var(--gold);border-color:var(--gold);color:#fff}
.rst-step.rst-done .rst-title{color:var(--t2)}
.rst-step.rst-done .rst-desc{opacity:.7}
.rst-step.rst-done::after{background:var(--gold)}
/* Mobile label */
.rst-mobile{display:none;text-align:center;font-size:13px;font-weight:600;color:var(--t1);margin:16px 0 24px;padding:10px 16px;background:#fff;border:1px solid var(--b2);border-radius:8px}
/* Return code inline */
.ret-code-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12px}
.ret-code-lbl{color:var(--t3)}
.ret-code-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:500;color:var(--t1);letter-spacing:.03em}
.ret-copy-code{background:none;border:0;font:inherit;font-size:12px;color:var(--gold);cursor:pointer;padding:0}
.ret-copy-code:hover{color:var(--gold-dark)}
.ret-code-exp{color:var(--t3)}
/* Return item rows */
.ret-item-body{flex:1;min-width:0}
.ret-item-name{font-size:14px;font-weight:600}
.ret-item-meta{font-size:12px;color:var(--t3)}
.ret-item-returned{opacity:.45;pointer-events:none}
.ret-item-pill{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.ret-empty-msg{color:var(--t3);font-size:14px}
/* Return confirmation */
.ret-confirm{text-align:center;max-width:640px;margin:0 auto;padding:40px 24px}
.ret-confirm .nowrap{white-space:nowrap}
.ret-confirm .confirm-check{margin:0 auto 20px}
.ret-confirm-h{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:26px;color:var(--t1);margin-bottom:12px}
.ret-confirm-p{font-size:14px;color:var(--t2);line-height:1.65;margin-bottom:24px}
.ret-confirm-code{margin-bottom:24px}
.ret-confirm-code-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--t3);margin-bottom:8px}
.ret-confirm-code .ai-my-reward-code-row{justify-content:center}
.ret-confirm-cta{min-width:260px}
/* Return button pairs (50/50) */
.ret-btn-pair{display:flex;gap:10px;margin-top:16px}
.ret-btn-pair .btn{flex:1;text-align:center}
@media(max-width:640px){.ret-stepper{display:none}.rst-mobile{display:block}.ret-btn-pair{flex-direction:column-reverse}.ret-btn-pair .btn{width:100%}}
.check-row{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--b3)}
.check-row input{margin-top:3px;accent-color:var(--gold);width:18px;height:18px}
/* address cards */
.addr-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px}
.addr-card{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:20px;position:relative}
.addr-card.default{border-color:var(--gold)}
.addr-card .ac-badge{position:absolute;top:16px;right:16px;font-size:10px;font-weight:600;color:var(--gold-dark);background:var(--gold-soft);padding:3px 8px;border-radius:999px}
.addr-card .ac-name{font-size:14px;font-weight:600;margin-bottom:8px}
.addr-card .ac-lines{font-size:13px;color:var(--t2);line-height:1.6}
.addr-card .ac-actions{display:flex;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--b3);font-size:12px}
.addr-card .ac-actions a{color:var(--t2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.addr-card .ac-actions a:hover{color:var(--t1)}
.moon-ui button.addr-add{border:1.5px dashed var(--b1);background:transparent;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:160px;height:100%;cursor:pointer;color:var(--t3);transition:all 160ms var(--ease)}
.moon-ui button.addr-add:hover{border-color:var(--gold);color:var(--gold)}
.addr-card.company .ac-badge-biz{position:absolute;top:16px;right:16px;font-size:10px;font-weight:600;color:var(--t2);background:var(--bg2);padding:3px 8px;border-radius:999px}
.addr-card.default.company .ac-badge-biz{display:none}
/* address modal */
.addr-overlay{position:fixed;inset:0;background:var(--overlay);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease)}
.addr-overlay.open{opacity:1;pointer-events:auto}
.addr-modal{background:#fff;border-radius:16px;width:92%;max-width:520px;max-height:90vh;overflow-y:auto;padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,.18);transform:translateY(16px);transition:transform 200ms var(--ease)}
.addr-overlay.open .addr-modal{transform:translateY(0)}
.addr-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.addr-modal-head h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:24px;margin:0}
.addr-modal-close{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:background 120ms}
.addr-modal-close:hover{background:var(--bg2)}
.addr-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.addr-company-toggle{margin-bottom:16px;font-size:13px}
.addr-company-toggle label{display:flex;align-items:center;gap:8px;cursor:pointer}
.addr-company-toggle input{accent-color:var(--gold);width:18px;height:18px}
.addr-form-error{background:var(--alert-error-bg);border:1px solid var(--alert-error-border);border-left:3px solid var(--alert-error-accent);color:var(--alert-error-text);font-size:13px;padding:14px 18px;border-radius:3px 8px 8px 3px;margin-bottom:16px;line-height:1.5}
.addr-form-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.addr-form-actions .btn-full{width:100%}
@media (max-width:480px){
.addr-row2{grid-template-columns:1fr}
.addr-modal{padding:24px 20px}
}
/* centered auth-like card (reset / activate) */
.center-wrap{max-width:440px;margin:0 auto;padding:48px 0 64px}
.center-card{background:#fff;border:1px solid var(--b2);border-radius:16px;padding:40px 36px;text-align:center}
.center-card .cc-ico{width:72px;height:72px;border-radius:999px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.center-card h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72,'SOFT' 0;font-size:28px;margin-bottom:12px}
.center-card p{color:var(--t2);font-size:14px;line-height:1.65;margin-bottom:24px}
.center-card .field{text-align:left}
@media (max-width:640px){
.ret-steps{grid-template-columns:1fr 1fr}
.addr-grid{grid-template-columns:1fr;grid-auto-rows:auto}
.oc-body{flex-wrap:wrap}
.oc-thumbs{width:100%;margin-bottom:4px}
.oc-actions{width:100%;display:flex;flex-wrap:wrap;gap:8px}
.oc-actions .oc-review-btn,.oc-actions [href*="order_again"]{flex:1 1 calc(50% - 4px);text-align:center}
.oc-actions .btn-secondary:not([href*="order_again"]){flex:0 0 auto;width:auto;border:none;background:none;padding:4px 0;font-size:12px;color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b2);min-height:0;height:auto;letter-spacing:0}
.progress4 .p4-lbl{font-size:10px}
.center-card{padding:32px 24px}
}
/* =========================================================
ORDER-PAY — ponowienie płatności (MOØN)
Scoped: body.woocommerce-order-pay .moon-op
========================================================= */
body.woocommerce-order-pay .wp-block-post-title{display:none}
body.woocommerce-order-pay .woocommerce{max-width:var(--container);margin:0 auto;padding:0 24px 80px}
body.woocommerce-order-pay .woocommerce-notices-wrapper{margin-bottom:0}
body.woocommerce-order-pay .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-order-pay .woocommerce-notices-wrapper .woocommerce-message{
max-width:1100px;margin:16px auto!important;border-radius:10px!important;border:1px solid var(--b2)!important;border-left-width:1px!important;background:var(--bg)!important;
font-family:var(--font-sans);font-size:13px!important;color:var(--t2)!important;padding:12px 20px!important;box-shadow:none!important}
body.woocommerce-order-pay .woocommerce-notices-wrapper .woocommerce-info::before,
body.woocommerce-order-pay .woocommerce-notices-wrapper .woocommerce-message::before{color:var(--gold)}
/* hero */
.moon-op .op-hero{text-align:center;max-width:640px;margin:0 auto;padding:48px 0 40px}
.moon-op .op-hero .lbl{margin-bottom:12px}
.moon-op .op-hero-title{font-family:var(--font-display);font-size:32px;font-weight:500;font-variation-settings:'opsz' 32;color:var(--t1);margin:0 0 12px;line-height:1.2}
.moon-op .op-hero-lead{font-size:14.5px;color:var(--t2);line-height:1.65;margin:0}
/* grid */
.moon-op .op-grid{display:grid;grid-template-columns:1fr 400px;gap:48px;max-width:1100px;margin:0 auto}
/* payment */
.moon-op .op-left .lbl-bar{margin-bottom:20px}
.moon-op #payment{background:none;border:none;padding:0;margin:0}
.moon-op .wc_payment_methods{list-style:none;margin:0 0 24px;padding:0}
.moon-op .wc_payment_method{border:1px solid var(--b2);border-radius:10px;padding:18px 20px;margin-bottom:12px;cursor:pointer;transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)}
.moon-op .wc_payment_method:last-child{margin-bottom:0}
.moon-op .wc_payment_method.op-method-active{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold)}
.moon-op .wc_payment_method label{font-size:14px;font-weight:600;color:var(--t1);cursor:pointer;display:flex;align-items:center;gap:12px;margin:0}
.moon-op .wc_payment_method .input-radio{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--b2);border-radius:50%;flex-shrink:0;display:inline-block !important;position:relative;cursor:pointer;background:#fff;transition:border-color 160ms var(--ease)}
.moon-op .wc_payment_method .input-radio:checked{border-color:var(--gold)}
.moon-op .wc_payment_method .input-radio:checked::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--gold)}
.moon-op .payment_box{background:none !important;border:none !important;border-radius:0;padding:6px 0 0 32px;margin-top:0;font-size:13px;color:var(--t3);line-height:1.5;box-shadow:none !important}
.moon-op .payment_box::before,.moon-op .payment_box::after{display:none !important}
.moon-op .payment_box p{margin:0}
.moon-op .wc_payment_method label img{height:22px;width:auto;flex-shrink:0}
/* submit */
.moon-op .op-submit-row{margin-top:24px}
.moon-op .op-submit-row .form-row{margin:0;padding:0}
.moon-op .op-submit{width:100%;height:54px;border:none;border-radius:8px;background:var(--gold) !important;color:#fff !important;font-size:15px;font-weight:600;cursor:pointer;transition:background 160ms var(--ease);display:flex;align-items:center;justify-content:center}
.moon-op .op-submit:hover{background:var(--gold-dark) !important}
.moon-op .op-secure-note{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3);margin-top:16px;justify-content:center}
.moon-op .op-secure-note svg{color:var(--t3);flex-shrink:0}
/* terms */
.moon-op .woocommerce-privacy-policy-text{font-size:12px;color:var(--t3);line-height:1.6;margin-bottom:16px}
.moon-op .woocommerce-privacy-policy-text a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
/* summary */
.moon-op .op-summary-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.moon-op .op-edit-link{font-size:12px;color:var(--t2);border:1px solid var(--b2);border-radius:6px;padding:5px 14px;text-decoration:none;transition:border-color 160ms var(--ease)}
.moon-op .op-edit-link:hover{border-color:var(--gold);color:var(--t1)}
.moon-op .op-items{border-top:0.5px solid var(--b2);padding-top:20px}
.moon-op .op-item{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:0.5px solid var(--b2)}
.moon-op .op-item:last-child{border-bottom:none}
.moon-op .op-item-img{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--bg2);flex-shrink:0}
.moon-op .op-item-img--placeholder{display:block}
.moon-op .op-item-info{flex:1;min-width:0}
.moon-op .op-item-name{display:block;font-size:13.5px;font-weight:600;color:var(--t1);line-height:1.4}
.moon-op .op-item-meta{display:block;font-size:12px;color:var(--t3);margin-top:3px}
.moon-op .op-item-meta dl{display:flex;gap:4px;margin:0}.moon-op .op-item-meta dt{font-weight:400}.moon-op .op-item-meta dd{margin:0;font-weight:500}
.moon-op .op-item-qty{display:block;font-size:12px;color:var(--t3);margin-top:3px}
.moon-op .op-item-price{font-size:14px;font-weight:600;color:var(--t1);white-space:nowrap;flex-shrink:0;margin-left:auto;padding-top:2px}
.moon-op .op-totals{border-top:0.5px solid var(--b2);margin-top:16px;padding-top:16px}
.moon-op .op-total-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:13.5px;color:var(--t2)}
.moon-op .op-total-row span:last-child{font-weight:600;color:var(--t1)}
.moon-op .op-total-row--grand{border-top:0.5px solid var(--b2);margin-top:10px;padding-top:16px}
.moon-op .op-total-row--grand span:first-child{font-size:15px;font-weight:700;color:var(--t1)}
.moon-op .op-total-row--grand span:last-child{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--t1)}
.moon-op .op-total-vat{text-align:right;font-size:12px;color:var(--t3);margin-top:4px}
/* Ukryj gwiazdkę wymagalności (jeden checkbox, oczywisty) */
.moon-op .woocommerce-terms-and-conditions-checkbox-text + abbr.required{display:none}
/* Ukryj akapit "Twoje dane osobowe..." (fallback gdyby remove_action nie zadziałał) */
.moon-op .woocommerce-privacy-policy-text{display:none}
/* footer */
.moon-op .op-footer{text-align:center;max-width:640px;margin:40px auto 0;padding-top:32px;border-top:0.5px solid var(--b2)}
.moon-op .op-footer p{font-size:13px;color:var(--t2);line-height:1.6;margin:0 0 12px}
.moon-op .op-footer-contact{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;flex-wrap:wrap}
.moon-op .op-footer-contact a{color:var(--t1);text-decoration:none;font-weight:500}
.moon-op .op-footer-contact a:hover{color:var(--gold)}
.moon-op .op-footer-sep{color:var(--t3)}
/* mobile bar */
.op-mobile-bar{display:none}
.moon-op .op-no-methods{padding:24px;text-align:center;color:var(--t2);font-size:14px;background:var(--bg2);border-radius:12px}
@media(max-width:768px){
.moon-op .op-grid{grid-template-columns:1fr;gap:32px;max-width:640px;margin:0 auto}
.moon-op .op-right{order:-1}
body.woocommerce-order-pay .woocommerce{padding:0 16px 120px}
}
@media(max-width:640px){
.moon-op .op-hero{padding:32px 0 24px}
.moon-op .op-hero-title{font-size:26px}
.moon-op .op-grid{max-width:none}
.moon-op .wc_payment_method{padding:16px 18px}
.moon-op .payment_box{padding:4px 0 0 32px}
.op-mobile-bar{display:block !important;position:fixed;bottom:0;left:0;right:0;z-index:900;background:#fff;border-top:1px solid var(--b2);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.op-mobile-submit{width:100%;height:52px;font-size:15px;display:flex;align-items:center;justify-content:center;border-radius:10px}
.op-mobile-submit svg{stroke:#fff;flex-shrink:0}
.moon-op .op-submit-row{display:none}
.moon-op .op-footer{margin-top:24px}
}
/* =========================================================
BATCH 4: Marka / Treść (About / Quiz / Subscription / Howto / Lookbook / Insider / Apollo / B2B / Contact)
========================================================= */
/* dark hero (about/apollo/insider) */
.hero-dark{background:var(--t1);color:var(--bg);padding:72px 0}
.hero-dark .lbl{color:var(--gold)}
.hero-dark h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 144,'SOFT' 0;font-size:46px;line-height:1.05;color:var(--bg);margin:14px 0 18px;letter-spacing:-0.02em}
.hero-dark p{color:rgba(251,248,241,.72);font-size:15.5px;line-height:1.65;max-width:520px}
.hero-dark .magdalena-quote{color:var(--bg);font-size:24px;line-height:1.5;border-left:2px solid var(--gold);padding-left:20px}
.hero-dark-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
/* Apollo Insider public page */
.ai-hero-center{text-align:center;max-width:680px;margin:0 auto}
.ai-hero-center p{margin:0 auto}
.ai-page-hero-cta{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:14px}
.ai-page-hero-cta .btn{width:100%;max-width:320px;text-align:center}
.ai-page-free-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgba(251,248,241,.6)}
.ai-page-free-note svg{color:var(--gold)}
.ai-page-soon{margin-top:24px;display:inline-block;background:rgba(251,248,241,.08);border:1px solid rgba(251,248,241,.15);border-radius:12px;padding:16px 24px}
.ai-page-soon p{color:rgba(251,248,241,.6);font-size:14px;margin:0}
/* --- Notify form (strony "wkrótce") --- */
.mn-wrap{margin-top:32px;max-width:480px;width:100%;margin-left:auto;margin-right:auto}
.mn-fields{display:flex;gap:10px}
.mn-fields input[type="email"]{flex:1;min-width:0;height:48px;padding:0 16px;border:1px solid rgba(251,248,241,.2);border-radius:6px;background:rgba(251,248,241,.06);color:var(--bg);font-size:14px;font-family:var(--font-sans)}
.mn-fields input[type="email"]::placeholder{color:rgba(251,248,241,.4)}
.mn-fields input[type="email"]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(139,111,71,.25)}
.mn-fields button{flex-shrink:0;height:48px;padding:0 24px;border:none;border-radius:6px;background:var(--gold);color:#fff;font-size:13px;font-weight:600;font-family:var(--font-sans);cursor:pointer;white-space:nowrap}
.mn-fields button:hover{background:var(--gold-dark)}
.mn-consent{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;margin-top:14px;font-size:12px;color:rgba(251,248,241,.55);line-height:1.5;text-align:left}
.mn-consent input[type="checkbox"]{width:16px;height:16px;margin:2px 0 0;accent-color:var(--gold);cursor:pointer}
.mn-consent label{cursor:pointer}
.mn-msg{margin-top:12px;font-size:13px;padding:10px 14px;border-radius:6px}
.mn-msg-success{background:rgba(76,175,80,.12);color:#4caf50;border:1px solid rgba(76,175,80,.25)}
.mn-msg-error{background:rgba(244,67,54,.1);color:#f44336;border:1px solid rgba(244,67,54,.2)}
/* Kafelki poziomów (Insider "wkrótce") */
.ai-tier-card{text-align:center;padding:32px 20px;border-radius:12px;border:1px solid var(--b2)}
.ai-tier-card:nth-child(1){background:var(--bg)}
.ai-tier-card:nth-child(2){background:#f5f0e6}
.ai-tier-card:nth-child(3){background:#ede5d5}
.ai-tier-value{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 32;font-size:36px;color:var(--gold);line-height:1.1}
.ai-tier-unit{font-size:14px;color:var(--t1);margin-top:4px}
.ai-tier-threshold{font-size:12px;color:var(--t2);margin-top:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
/* Stopka sekcji "wkrótce" */
.soon-cta-block{text-align:center;max-width:520px;margin:0 auto;padding-top:40px;border-top:0.5px solid var(--b2)}
.soon-cta-block .lbl{margin-bottom:12px}
.soon-cta-block h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 32;font-size:28px;margin-bottom:24px}
@media(max-width:480px){
.mn-fields{flex-direction:column}
.mn-fields button{width:100%}
}
.ai-tiers-overlap{margin-top:-40px;position:relative;z-index:2}
.ai-plan-range{font-size:13px;color:var(--gold-dark);font-weight:600;margin-bottom:4px}
.ai-sec-header-center{justify-content:center;text-align:center}
.ai-faq-sec{padding:56px 0}
.ai-faq-narrow{max-width:720px}
.ai-faq-narrow .lbl-bar{margin-bottom:16px}
.ai-earn-ico{width:48px;height:48px;border-radius:12px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ai-perk-center{text-align:center}
.ai-perk-ico{width:52px;height:52px;border-radius:999px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.stat-dark{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;padding-top:28px;border-top:1px solid rgba(251,248,241,.14)}
.stat-dark .v{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 32;font-size:30px;color:var(--bg)}
.stat-dark .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,248,241,.6);margin-top:4px}
/* process steps (3-etap) */
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proc-grid-4{grid-template-columns:repeat(4,1fr)}
.proc-card{background:#fff;border:1px solid rgba(139,111,71,.12);border-radius:12px;padding:28px 24px;box-shadow:0 2px 12px rgba(26,24,21,.04)}
.proc-card .pn{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:32px;color:var(--gold);margin-bottom:12px}
.proc-card h3{font-size:15px;font-weight:600;margin-bottom:8px}
.proc-card-flat{background:none;border:none;border-radius:0;box-shadow:none;padding:0}
.proc-card p{font-size:13px;color:var(--t2);line-height:1.6}
/* howto page */
.howto-page .page-head{padding:56px 0 32px}
/* step cards with photo */
.proc-card-img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.proc-card-img .proc-body{padding:28px 24px}
.proc-photo{aspect-ratio:4/3;overflow:hidden;border-radius:12px 12px 0 0;background:#EFE9DE}
.proc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.proc-photo-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
/* crosssell */
.howto-crosssell{margin-top:32px;background:var(--bg2);border-radius:12px;padding:24px;display:flex;gap:16px;align-items:center}
.howto-crosssell img{width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0}
.howto-crosssell .img-ph{border-radius:8px;background:var(--b3);flex-shrink:0}
.howto-cs-text{flex:1}
.howto-cs-title{font-size:15px;font-weight:600;color:var(--t1)}
.howto-cs-sub{font-size:13px;color:var(--t3);margin-top:4px}
.howto-cs-prices{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.howto-cs-now{font-size:18px;font-weight:700;color:var(--t1)}
.howto-cs-compare{font-size:12px;color:var(--t3)}
.howto-cs-compare s{color:var(--t3)}
.howto-cs-save{font-size:11px;font-weight:600;color:var(--gold)}
/* education */
.howto-edu-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;padding:48px 0 32px}
.howto-edu h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:24px;line-height:1.15;color:var(--t1);margin-bottom:16px;letter-spacing:-0.01em}
.howto-edu p{font-size:14.5px;color:var(--t2);line-height:1.75;margin-bottom:14px}
.howto-edu p:last-child{margin-bottom:0}
@media(max-width:768px){
.howto-crosssell{flex-direction:column;text-align:center;gap:12px}
.howto-crosssell .btn{width:100%}
.howto-cs-prices{flex-direction:row;align-items:baseline;gap:8px}
.howto-edu-grid{grid-template-columns:1fr;gap:28px;padding:32px 0 24px}
}
/* pillars (3 filary) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{text-align:center;padding:24px}
.pillar .pi-ico{width:56px;height:56px;border-radius:999px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.pillar h3{font-size:15px;font-weight:600;margin-bottom:8px}
.pillar p{font-size:13px;color:var(--t2);line-height:1.6}
/* =========================================================
ABOUT PAGE — O marce (v3)
========================================================= */
/* hero-about: jasne tło, 2-kolumnowy grid */
.hero-about{padding:72px 0 80px}
.hero-about .lbl{margin-bottom:12px}
.hero-about h1{font-family:var(--font-display);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 0;font-size:44px;line-height:1.08;color:var(--t1);margin-bottom:24px;letter-spacing:-0.02em}
.hero-about h1 em{font-style:italic;color:var(--gold);font-weight:400}
.hero-about .hero-lead{font-size:15.5px;color:var(--t2);line-height:1.7;max-width:520px;margin-bottom:28px}
.hero-about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
/* hero icon-facts strip */
.hero-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.hero-facts .hf{display:flex;align-items:center;gap:10px}
.hero-facts .hf-ico{width:40px;height:40px;border-radius:10px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-facts .hf-t{font-size:12px;font-weight:600;color:var(--t1);line-height:1.3}
/* hero CTA row */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
/* hero portrait */
.about-portrait{
aspect-ratio:3/4;border-radius:12px;position:relative;overflow:hidden;
background:linear-gradient(160deg,#1A1815 0%,#2A2520 40%,#1A1815 100%);
}
/* placeholder pseudo-elements hidden when real img present */
.about-portrait:has(img)::before,.about-portrait:has(img)::after{display:none}
.about-portrait::before{
content:'';position:absolute;width:280px;height:280px;border-radius:999px;
bottom:-60px;right:-40px;background:radial-gradient(circle,rgba(139,111,71,.12) 0%,transparent 70%);
}
.about-portrait::after{
content:'MOØN';position:absolute;bottom:32px;left:0;right:0;text-align:center;
font-family:var(--font-sans);font-weight:600;letter-spacing:8px;font-size:14px;color:rgba(139,111,71,.25);
}
.about-portrait .img-label{color:rgba(139,111,71,.5);font-size:10px}
.about-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.about-caption{font-size:12px;color:var(--t3);margin-top:12px;line-height:1.5}
/* problem cards */
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.problem-card{background:#fff;border:1px solid rgba(139,111,71,.12);border-radius:12px;padding:28px 24px;box-shadow:0 2px 12px rgba(26,24,21,.04)}
.problem-card .pc-ico{width:48px;height:48px;border-radius:50%;background:transparent;border:1px solid rgba(139,111,71,.2);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.problem-card h3{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--t1)}
.problem-card p{font-size:13px;color:var(--t2);line-height:1.6}
/* about prose (narracja) */
.about-story-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
@media(min-width:769px){.about-story-img{margin-top:50px}}
.about-story-img{aspect-ratio:3/4;border-radius:12px;overflow:hidden;position:relative;background:var(--bg2)}
.about-story-img img{width:100%;height:100%;object-fit:cover;display:block}
.about-story-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px dashed rgba(139,111,71,.2);border-radius:12px;aspect-ratio:3/4}
.about-prose{max-width:none}
.about-prose h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:26px;line-height:1.15;color:var(--t1);margin-bottom:20px;letter-spacing:-0.01em}
.about-prose p{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:16px}
.about-prose p:last-child{margin-bottom:0}
/* pull quote — 1:1 from mockup .magdalena-quote */
.about-prose .magdalena-quote{
font-family:var(--font-display);font-style:italic;font-weight:400;
font-variation-settings:'opsz' 144,'SOFT' 0;
font-size:20px;line-height:1.5;color:var(--t1);
border-left:2px solid var(--gold);padding:4px 0 4px 20px;margin:28px 0 0;
}
.about-prose .about-sig{margin-top:24px;font-size:13px;color:var(--t3);font-style:italic}
/* facts bar */
.about-facts-section{padding:64px 0}
.about-facts-section .sec-header{margin-bottom:36px}
.about-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center;border-top:1px solid var(--b2);border-bottom:1px solid var(--b2)}
.about-facts .af{padding:32px 20px;position:relative}
.about-facts .af + .af::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--b2)}
.about-facts .af .af-v{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 32;font-size:28px;color:var(--gold);margin-bottom:8px}
.about-facts .af .af-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);line-height:1.5}
/* CTA block at bottom */
.about-cta-block{text-align:center;max-width:600px;margin:0 auto}
.about-cta-block h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:28px;color:var(--t1);margin-bottom:16px}
.about-cta-block p{font-size:15px;color:var(--t2);line-height:1.65;margin-bottom:28px}
/* responsive */
@media (max-width:768px){
.hero-about-grid{grid-template-columns:1fr;gap:32px}
.hero-about h1{font-size:34px}
.hero-facts{grid-template-columns:repeat(2,1fr);gap:14px}
.about-story-grid{grid-template-columns:1fr;gap:28px}
.about-story-img{max-width:360px}
}
@media (max-width:640px){
.problem-grid{grid-template-columns:1fr;gap:16px}
.about-facts{grid-template-columns:repeat(2,1fr)}
.about-facts .af:nth-child(3)::before{display:none}
.about-facts .af:nth-child(3),.about-facts .af:nth-child(4){border-top:1px solid var(--b2)}
.about-prose h2{font-size:22px}
.about-prose .magdalena-quote{font-size:18px}
.about-portrait{min-height:300px}
.about-portrait::before{width:180px;height:180px;bottom:-40px;right:-20px}
.about-cta-block h2{font-size:24px}
.hero-about{padding:48px 0 56px}
}
@media (max-width:640px){
.hero-about h1{font-size:30px}
}
/* quiz */
.quiz-wrap{max-width:680px;margin:0 auto;padding:40px 0 80px}
.quiz-progress{height:4px;background:var(--b2);border-radius:999px;margin-bottom:32px;overflow:hidden}
.quiz-progress .qp-fill{height:100%;background:var(--gold);border-radius:999px;width:33%}
.quiz-q{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72;font-size:28px;text-align:center;margin-bottom:8px}
.quiz-sub{text-align:center;color:var(--t2);font-size:14px;margin-bottom:28px}
.quiz-opts{display:grid;grid-template-columns:1fr;gap:12px}
.quiz-opt{border:1.5px solid var(--b1);border-radius:12px;padding:20px;cursor:pointer;transition:all 140ms var(--ease);display:flex;gap:14px;align-items:center}
.quiz-opt:hover{border-color:var(--border-hover)}
.quiz-opt.active{border-color:var(--gold);background:var(--gold-soft)}
.quiz-opt .qo-ico{width:40px;height:40px;border-radius:999px;background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.quiz-opt{align-items:center}
.quiz-opt > span:last-child{display:flex;flex-direction:column;gap:2px;text-align:left}
.quiz-opt .qo-t{display:block;font-size:14px;font-weight:600;line-height:1.25}
.quiz-opt .qo-s{display:block;font-size:12px;color:var(--t3);line-height:1.4}
.quiz-nav{display:flex;justify-content:space-between;margin-top:28px}
/* pricing plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--b2);border-radius:16px;padding:32px 26px;position:relative;display:flex;flex-direction:column;height:100%}
.plan.featured{border:1.5px solid var(--gold);box-shadow:0 8px 32px rgba(139,111,71,.12)}
.plan .plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px}
.plan .plan-name{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.plan .plan-price{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:38px;color:var(--t1);margin:12px 0 2px}
.plan .plan-price small{font-family:var(--font-sans);font-size:13px;color:var(--t3);font-weight:400}
.plan .plan-feats{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.plan .plan-feats li{display:flex;gap:10px;font-size:13.5px;color:var(--t2)}
.plan .plan-feats svg{color:var(--success);flex-shrink:0;margin-top:2px}
/* lookbook before/after */
.lb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lb-card{background:#fff;border:1px solid var(--b2);border-radius:12px;overflow:hidden}
.lb-ba{position:relative;aspect-ratio:4/5}
.lb-ba .img-ph{position:absolute;inset:0;border-radius:0}
.lb-ba .lb-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--bg);box-shadow:0 0 0 1px rgba(26,24,21,.1)}
.lb-ba .lb-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(26,24,21,.2);color:var(--gold)}
.lb-ba .lb-tag{position:absolute;bottom:12px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:rgba(26,24,21,.85);color:var(--bg);padding:5px 10px;border-radius:999px;font-weight:500}
.lb-ba .lb-tag.before{left:12px}.lb-ba .lb-tag.after{right:12px}
.lb-info{padding:16px}
.lb-info .lb-name{font-size:14px;font-weight:600}
.lb-info .lb-meta{font-size:12px;color:var(--t3);margin-top:3px}
/* contact channels */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:8px 0 72px}
.channel{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--b3)}
.channel .ch-ico{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.channel .ch-t{font-size:13px;font-weight:600}
.channel .ch-v{font-size:14px;color:var(--gold-dark);margin-top:2px}
.channel .ch-s{font-size:12px;color:var(--t3);margin-top:2px}
/* B2B table */
.b2b-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--b2);border-radius:12px;overflow:hidden}
.b2b-table th,.b2b-table td{padding:14px 18px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--b3)}
.b2b-table th{background:var(--bg2);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.b2b-table td{color:var(--t2)}
.b2b-table tr:last-child td{border-bottom:0}
.b2b-table .hl{color:var(--gold-dark);font-weight:600}
/* accordion (howto/faq) */
.acc-item{border-bottom:1px solid var(--b1)}
.acc-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--t1)}
.acc-q .acc-ico{color:var(--gold);flex-shrink:0;transition:transform 160ms var(--ease)}
.acc-a{font-size:13px;color:var(--t2);line-height:1.7;padding:0 0 18px}
@media (max-width:768px){
.hero-dark-grid{grid-template-columns:1fr;gap:32px}
.plans{grid-template-columns:1fr;gap:16px}
.proc-grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.proc-grid,.proc-grid-4,.pillars,.lb-grid,.contact-grid{grid-template-columns:1fr;gap:16px}
.quiz-opts{grid-template-columns:1fr}
.stat-dark{gap:14px}
.hero-dark h1{font-size:34px}
.b2b-table th,.b2b-table td{padding:10px 12px;font-size:12px}
}
/* =========================================================
BATCH 5: Pomoc / Prawne (FAQ / Shipping / Terms / Privacy / 404 / Cookies)
========================================================= */
/* legal layout: sticky TOC + content */
.legal-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;padding:24px 0 80px}
.toc{position:sticky;top:84px;font-size:13px}
.toc h4{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
.toc a{display:block;padding:7px 0 7px 14px;color:var(--t2);border-left:2px solid var(--b2);transition:all 120ms var(--ease)}
.toc a:hover{color:var(--t1);border-left-color:var(--b1)}
.toc a.active{color:var(--gold-dark);border-left-color:var(--gold);font-weight:600}
.legal-body h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:22px;margin:32px 0 12px;scroll-margin-top:90px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{font-size:14px;color:var(--t2);line-height:1.75;margin-bottom:14px}
.legal-body ul{margin:0 0 14px 20px;font-size:14px;color:var(--t2);line-height:1.7}
.legal-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;background:var(--bg2);border-radius:10px;margin-bottom:28px;font-size:13px;color:var(--t2)}
/* FAQ category cards */
.faq-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px}
.faq-cat{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:24px;cursor:pointer;transition:all 200ms var(--ease)}
.faq-cat:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(26,24,21,.06);border-color:var(--border-hover)}
.faq-cat .fc-ico{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.faq-cat h3{font-size:15px;font-weight:600;margin-bottom:4px}
.faq-cat p{font-size:13px;color:var(--t3)}
/* shipping method rows */
.ship-method{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--b2);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.ship-method .sm-ico{width:48px;height:48px;border-radius:12px;background:var(--bg2);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ship-method .sm-t{font-size:14px;font-weight:600}
.ship-method .sm-s{font-size:13px;color:var(--t3);margin-top:2px}
.ship-method .sm-price{margin-left:auto;font-size:15px;font-weight:600;color:var(--success);font-variant-numeric:tabular-nums}
/* 404 */
.err-wrap{text-align:center;padding:80px 24px;max-width:520px;margin:0 auto}
.err-code{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 144;font-size:120px;line-height:1;color:var(--gold);letter-spacing:-0.02em}
.err-wrap h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72;font-size:28px;margin:8px 0 12px}
.err-wrap p{color:var(--t2);font-size:14.5px;line-height:1.65;margin-bottom:28px}
.err-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ── MOØN Consent Banner ── */
.mcb{position:fixed;left:0;right:0;bottom:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity 300ms var(--ease);display:flex;justify-content:center;align-items:flex-end}
.mcb--visible{opacity:1;pointer-events:auto}
/* Baner */
.mcb-bar,.mcb-panel{background:var(--bg);border:1px solid #E5D9BE;border-radius:10px;box-shadow:0 -4px 24px rgba(26,24,21,.08);margin:0 12px 24px;padding:20px 24px;width:100%;max-width:720px;box-sizing:border-box;transform:translateY(8px);transition:transform 300ms var(--ease)}
.mcb--visible .mcb-bar,.mcb--visible .mcb-panel{transform:translateY(0)}
@media(max-width:768px){.mcb-bar,.mcb-panel{margin-bottom:calc(56px + env(safe-area-inset-bottom) + 8px);max-width:none}}
.mcb-inner,.mcb-panel-inner{max-width:600px;margin:0 auto}
.mcb-lbl{font-size:12px;letter-spacing:.08em;color:#8B7E68;margin-bottom:6px}
.mcb-title{font-family:var(--font-display);font-size:17px;font-weight:400;color:var(--t1);margin:0 0 6px}
.mcb-desc{font-size:13px;line-height:1.6;color:var(--t2);margin:0 0 16px}
.mcb-desc a{color:var(--t2);text-decoration:underline}
.mcb-actions{display:flex;gap:10px;margin-bottom:10px}
.mcb-btn{flex:1;padding:12px 20px;font-size:13px;font-weight:500;border-radius:6px;border:2px solid var(--gold);cursor:pointer;transition:background 160ms var(--ease),color 160ms var(--ease);text-align:center;line-height:1.3}
.mcb-btn--reject{background:transparent;color:var(--gold)}
.mcb-btn--reject:hover{background:var(--gold);color:#fff}
.mcb-btn--accept{background:var(--gold);color:#fff;border-color:var(--gold)}
.mcb-btn--accept:hover{background:#7a6340}
.mcb-btn--outline{background:transparent;color:var(--gold);border:2px solid var(--gold);flex:none;padding:10px 20px}
.mcb-btn--outline:hover{background:var(--gold);color:#fff}
.mcb-customize-link{display:block;width:100%;background:none;border:none;font-size:12px;color:var(--t2);text-decoration:underline;cursor:pointer;padding:4px 0;text-align:center}
/* Panel Dostosuj */
.mcb-cat{padding:14px 0;border-top:1px solid var(--b2)}
.mcb-cat:first-of-type{border-top:none}
.mcb-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mcb-cat-label{font-size:13px;font-weight:500;color:var(--t1)}
.mcb-cat-desc{font-size:12px;color:var(--t2);line-height:1.5;margin:6px 0 0}
.mcb-panel .mcb-btn{margin-top:16px;flex:none;width:100%}
.mcb-panel .mcb-customize-link{margin-top:8px}
/* Przełącznik */
.mcb-switch{width:40px;height:22px;padding:0;background:none;border:none;cursor:pointer;flex-shrink:0}
.mcb-switch-track{display:block;width:40px;height:22px;border-radius:999px;background:var(--b2);position:relative;transition:background 160ms var(--ease)}
.mcb-switch-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:transform 160ms var(--ease)}
.mcb-switch--on .mcb-switch-track{background:var(--gold)}
.mcb-switch--on .mcb-switch-thumb{transform:translateX(18px)}
.mcb-switch--locked .mcb-switch-track{background:var(--gold);opacity:.5}
.mcb-switch--locked{cursor:not-allowed}
/* Przycisk na stronie Cookies */
.mcb-reopen-wrap{margin:32px 0;text-align:center}
@media (max-width:640px){
.legal-layout{grid-template-columns:1fr;gap:24px}
.toc{position:static;display:flex;gap:8px;overflow-x:auto;border-bottom:1px solid var(--b3);padding-bottom:12px}
.toc h4{display:none}
.toc a{border-left:0;white-space:nowrap;padding:6px 12px;border:1px solid var(--b2);border-radius:999px}
.faq-cats{grid-template-columns:1fr}
.err-code{font-size:88px}
.mcb-bar,.mcb-panel{margin-left:8px;margin-right:8px;padding:16px 18px}
.mcb-actions{flex-direction:column}
.mcb-title{font-size:15px}
}
/* =========================================================
BATCH 6: Regulamin subskrypcji / Recenzja / Drawer
========================================================= */
/* review form */
.rev-layout{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start;padding:24px 0 80px}
.rev-product{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:20px;position:sticky;top:84px;text-align:center}
.rev-product .img-ph{width:100%;aspect-ratio:4/5;border-radius:8px;margin-bottom:14px}
.rev-product .rp-t{font-size:14px;font-weight:600}
.rev-product .rp-c{font-size:12px;color:var(--t3);margin-top:2px}
.star-pick{display:inline-flex;gap:6px;margin:6px 0}
.star-pick svg{width:32px;height:32px;color:var(--star-empty);cursor:pointer;transition:color 120ms var(--ease)}
.star-pick svg.on{color:var(--gold)}
.upload-box{border:1.5px dashed var(--b1);border-radius:12px;padding:28px;text-align:center;cursor:pointer;transition:all 160ms var(--ease);color:var(--t3)}
.upload-box:hover{border-color:var(--gold);color:var(--gold)}
.upload-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.upload-thumb{width:64px;height:64px;border-radius:8px;position:relative;overflow:hidden}
.upload-thumb .img-ph{position:absolute;inset:0;border-radius:8px}
.upload-thumb .ut-x{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:999px;background:rgba(26,24,21,.7);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer}
.upload-thumb img{width:100%;height:100%;object-fit:cover}
.rev-product img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;margin-bottom:14px}
.star-pick-hint{font-size:12px;color:var(--t3);min-height:18px}
.rev-success-wrap{display:flex;align-items:center;justify-content:center;min-height:40vh;padding:48px 24px 80px}
.rev-success{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:480px;width:100%}
.rev-success-icon{width:72px;height:72px;border-radius:999px;background:var(--gold-soft,#F5EDE0);display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.rev-success-icon svg{width:36px;height:36px;color:var(--gold)}
.rev-success h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72,'SOFT' 0;font-size:28px;line-height:1.15;color:var(--t1);margin-bottom:14px;letter-spacing:-0.01em}
.rev-success p{font-family:var(--font-sans);font-size:14.5px;line-height:1.65;color:var(--t2);max-width:380px;margin:0 auto 28px}
.rev-success-insider{font-size:13px !important;color:var(--gold-dark) !important;background:var(--gold-soft);padding:10px 16px;border-radius:8px;margin:0 auto 28px !important;max-width:360px}
.rev-success .btn-gold{min-width:220px;justify-content:center}
.rev-error{background:var(--alert-error-bg);border:1px solid var(--alert-error-border);border-left:3px solid var(--alert-error-accent);color:var(--alert-error-text);font-size:13px;padding:14px 18px;border-radius:3px 8px 8px 3px;margin-bottom:16px;line-height:1.5}
/* review cards (PDP — scoped under accordion content) */
/* Reviews section — no max-width (cards, not prose) */
/* Reviews section — cards grid + rating summary */
/* Rating distribution summary */
.rev-summary{display:flex;align-items:center;gap:32px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--b3)}
.rev-avg{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;min-width:80px}
.rev-avg-num{font-family:var(--font-display);font-size:36px;font-weight:400;font-variation-settings:'opsz' 72;color:var(--t1);line-height:1}
.rev-avg-stars{display:flex;gap:2px;color:var(--gold)}
.rev-avg-count{font-size:12px;color:var(--t3)}
.rev-bars{flex:1;display:flex;flex-direction:column;gap:6px;max-width:280px}
.rev-bar-row{display:flex;align-items:center;gap:8px}
.rev-bar-label{font-size:12px;color:var(--t2);min-width:32px;display:inline-flex;align-items:center;gap:2px}
.rev-bar-label svg{color:var(--gold)}
.rev-bar-track{flex:1;height:6px;background:var(--b3);border-radius:3px;overflow:hidden}
.rev-bar-fill{display:block;height:100%;background:var(--gold);border-radius:3px}
.rev-bar-count{font-size:12px;color:var(--t3);min-width:16px;text-align:right}
@media(max-width:480px){
.rev-summary{flex-direction:column;align-items:flex-start;gap:16px}
.rev-bars{max-width:none;width:100%}
}
/* Review cards grid */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.acc-content .review-card{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:18px 20px;margin-bottom:0;min-height:0}
.acc-content .review-card .rc-stars{display:inline-flex;gap:2px;color:var(--gold);margin-bottom:8px}
.acc-content .review-card .rc-title{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:6px}
.acc-content .review-card .rc-body{font-size:14px;color:var(--t2);line-height:1.6;margin-bottom:10px}
.acc-content .review-card .rc-photos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.acc-content .review-card .rc-photo{display:block;width:56px;aspect-ratio:1/1;border-radius:8px;overflow:hidden;flex-shrink:0}
.acc-content .review-card .rc-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.acc-content .review-card .rc-author{font-size:13px;font-weight:600}
.acc-content .review-card .rc-hair{font-weight:400;color:var(--t3)}
.acc-content .review-card .rc-meta{font-size:12px;color:var(--t3);margin-top:2px}
/* drawer (mobile nav) */
.drawer-demo{min-height:100vh;background:var(--overlay);display:flex;justify-content:flex-start}
.drawer{width:300px;max-width:86vw;background:var(--bg);height:100vh;display:flex;flex-direction:column;box-shadow:4px 0 32px rgba(26,24,21,.2);animation:drawerIn 260ms var(--ease)}
@keyframes drawerIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--b2)}
.drawer-head .logo-svg{color:var(--t1);font-weight:600;letter-spacing:6px;font-size:16px}
.drawer-close{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--t1)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 0}
.drawer-link{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:15px;font-weight:500;color:var(--t1);border-bottom:1px solid var(--b3)}
.drawer-link .dl-arr{color:var(--t3)}
.drawer-sub{padding:10px 20px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);font-weight:600}
.drawer-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--b2);display:flex;flex-direction:column;gap:10px}
.drawer-actions{display:flex;gap:10px;padding:14px 20px}
.drawer-actions .icon-btn{flex:1;border:1px solid var(--b2);border-radius:8px;justify-content:center;gap:8px;font-size:13px;color:var(--t2)}
@media (max-width:640px){
.rev-layout{grid-template-columns:1fr;gap:24px}
.rev-product{position:static}
}
/* ====== STOPKA 1:1 ====== */
/* ---------- STOPKA 1:1 ---------- */
.moon-footer{background:#15110E;color:var(--bg);padding:64px 24px 40px;border-top:2px solid var(--gold)}
.moon-footer .mf-inner{max-width:var(--container);margin:0 auto}
.moon-footer .mf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}
.moon-footer .mf-brand .mf-logo{font-family:var(--font-sans);font-weight:600;letter-spacing:6px;font-size:18px;color:var(--bg);margin-bottom:16px;text-decoration:none;display:block}
.moon-footer .mf-brand p{font-size:13.5px;line-height:1.7;color:#b3aa98;max-width:280px;overflow-wrap:break-word}
.moon-footer .mf-socials{display:flex;gap:10px;margin-top:18px}
.moon-footer .mf-soc{width:34px;height:34px;border-radius:999px;border:1px solid #3a352e;display:flex;align-items:center;justify-content:center;color:#b3aa98;transition:all 160ms var(--ease)}
.moon-footer .mf-soc:hover{border-color:var(--gold);color:var(--gold-soft)}
.moon-footer h4{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 14px}
.moon-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.moon-footer ul a{color:#cfc6b4;font-size:13.5px;text-decoration:none;transition:color 140ms var(--ease)}
.moon-footer ul a:hover{color:var(--bg)}
.moon-footer .mf-pay{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 18px;padding-top:24px;border-top:1px solid #3a352e}
.moon-footer .mf-chip{font-size:10.5px;font-weight:600;letter-spacing:.03em;color:#cfc6b4;border:1px solid #3a352e;border-radius:5px;padding:5px 9px}
.moon-footer .mf-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:11.5px;color:#8a8273}
.moon-footer .mf-legal a{color:#8a8273}
@media (max-width:900px){
.moon-footer .mf-grid{grid-template-columns:1fr 1fr;gap:28px}
.moon-footer .mf-brand{grid-column:1 / -1}
}
@media (max-width:560px){
.moon-footer .mf-grid{grid-template-columns:1fr 1fr}
.moon-footer{padding:48px 18px 32px}
.moon-footer .mf-legal{flex-direction:column;align-items:center;text-align:center;gap:6px}
}
/* ====== KOMPONENTY MOBILE (tab bar, drawer, sheet, sticky) ====== */
/* =========================================================
MOBILE-FIRST KIT — wzorce poparte badaniami (Baymard 2026)
tab bar · swipe-galeria+miniatury · sticky ATC · bottom sheet · drawer
========================================================= */
/* --- mobilny header: hamburger + logo + koszyk --- */
.m-header{position:sticky;top:0;z-index:100;background:rgba(251,248,241,0.94);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--b1)}
.m-header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;max-width:var(--container);margin:0 auto}
.m-burger{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--t1);margin-left:-10px}
.m-logo{font-weight:600;letter-spacing:6px;font-size:16px;color:var(--t1)}
.m-head-icons{display:flex;gap:2px}
/* --- SWIPE GALERIA (scroll-snap, pure CSS, realny swipe) --- */
.swipe-gal{position:relative}
.swipe-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.swipe-track::-webkit-scrollbar{display:none}
.swipe-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;position:relative}
.swipe-slide .img-ph{position:absolute;inset:0;border-radius:0}
.gal-count{position:absolute;top:14px;right:14px;z-index:3;background:rgba(26,24,21,.7);color:#fff;font-size:12px;font-weight:500;padding:5px 11px;border-radius:999px;font-variant-numeric:tabular-nums}
.gal-zoom-hint{position:absolute;bottom:14px;right:14px;z-index:3;background:rgba(26,24,21,.6);color:#fff;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.gal-wish{position:absolute;top:14px;left:14px;right:auto;z-index:3;width:40px;height:40px;border-radius:999px;background:#fff;color:var(--t1);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(26,24,21,.12)}
.gal-wish-desktop{position:absolute;top:14px;left:14px;right:auto;z-index:3;width:40px;height:40px;border-radius:999px;background:#fff;color:var(--t1);display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(26,24,21,.12);border:0;cursor:pointer;padding:0}
.gal-wish-desktop:hover{color:var(--error)}
@media (min-width:769px){.gal-wish-desktop{display:flex}}
/* pasek miniatur — ostatnia ucięta = sygnał „więcej" (Baymard) */
.thumb-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;scrollbar-width:none}
.thumb-strip::-webkit-scrollbar{display:none}
.thumb-strip .th{flex:0 0 60px;height:60px;border-radius:8px;overflow:hidden;border:2px solid transparent;position:relative;cursor:pointer}
.thumb-strip .th .img-ph{position:absolute;inset:0;border-radius:6px}
.thumb-strip .th.active{border-color:var(--gold)}
/* --- STICKY ADD-TO-CART (dolny, nad tab barem) --- */
.sticky-atc{position:fixed;left:0;right:0;bottom:56px;z-index:190;background:#fff;border-top:1px solid var(--b2);box-shadow:0 -4px 16px rgba(26,24,21,.07);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;transform:translateY(0);transition:transform 220ms var(--ease)}
.sticky-atc .sa-info{flex-shrink:0;min-width:84px}
.sticky-atc .sa-variant{font-size:11px;color:var(--t3)}
.sticky-atc .sa-price{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.sticky-atc .btn{flex:1}
/* --- DOLNY TAB BAR (Sklep/Szukaj/Koszyk/Konto) --- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:rgba(251,248,241,0.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--b1);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;font-size:10px;font-weight:500;letter-spacing:.02em;color:var(--t3);position:relative}
.tabbar a .tb-ico{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.tabbar a.active{color:var(--gold-dark)}
.tabbar a .tb-badge{position:absolute;top:4px;left:calc(50% + 8px);background:var(--gold);color:#fff;font-size:9px;font-weight:600;min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
/* --- BOTTOM SHEET (wariant/filtry) --- */
.sheet-scrim{position:fixed;inset:0;z-index:300;background:var(--overlay);opacity:0;visibility:hidden;transition:opacity 220ms var(--ease),visibility 220ms}
.sheet-scrim.open{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:310;background:var(--bg);border-radius:18px 18px 0 0;padding:8px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform 280ms var(--ease);max-height:86vh;overflow-y:auto}
.sheet.open{transform:translateY(0)}
.sheet-grip{width:40px;height:4px;border-radius:999px;background:var(--b1);margin:8px auto 16px}
.sheet h3{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:20px;margin-bottom:16px}
.sheet-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--b1);border-radius:10px;padding:16px;margin-bottom:10px;cursor:pointer;transition:all 140ms var(--ease)}
.sheet-opt.active{border-color:var(--gold);background:var(--gold-soft)}
.sheet-opt .so-t{font-size:14px;font-weight:600}
.sheet-opt .so-s{font-size:12px;color:var(--t3);margin-top:2px}
.sheet-opt .so-radio{width:22px;height:22px;border-radius:999px;border:2px solid var(--b1);flex-shrink:0}
.sheet-opt.active .so-radio{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 4px #fff}
/* --- DRAWER (hamburger → menu) --- */
.drawer-scrim{position:fixed;inset:0;z-index:300;background:var(--overlay);opacity:0;visibility:hidden;transition:opacity 220ms var(--ease),visibility 220ms}
.drawer-scrim.open{opacity:1;visibility:visible}
.m-drawer{position:fixed;top:0;left:0;bottom:0;z-index:310;width:300px;max-width:86vw;background:var(--bg);transform:translateX(-100%);transition:transform 280ms var(--ease);display:flex;flex-direction:column}
.m-drawer.open{transform:translateX(0)}
/* express pay (góra koszyka — ponad listą) */
.express-pay{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.express-pay .ep-lbl{text-align:center;font-size:11px;color:var(--t3);letter-spacing:.08em;text-transform:uppercase}
.btn-applepay{background:#000;color:#fff;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600}
.btn-gpay{background:#fff;color:#3c4043;border:1px solid var(--b1);height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600}
.express-or{display:flex;align-items:center;gap:12px;color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:6px 0}
.express-or::before,.express-or::after{content:'';flex:1;height:1px;background:var(--b2)}
/* mobilne taby produktu jako akordeon */
.m-acc{border-top:1px solid var(--b1)}
.m-acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:14.5px;font-weight:600;cursor:pointer}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary .chev{transition:transform 200ms var(--ease);color:var(--gold)}
.m-acc[open] summary .chev{transform:rotate(180deg)}
.m-acc .acc-content{padding-bottom:18px;font-size:13px;color:var(--t2);line-height:1.7}
/* konkretna data dostawy */
.moon-ui .delivery-est{display:flex;gap:8px;align-items:center;justify-content:center;background:#E5F0EA;border-radius:8px;padding:12px 14px;font-size:13px;color:var(--success);font-weight:500;margin:16px 0}
.moon-ui .delivery-est .de-date{white-space:nowrap}
.moon-ui .delivery-est .de-ico-m{display:none}
@media (max-width:640px){
.moon-ui .delivery-est{flex-wrap:wrap;justify-content:center;text-align:center;padding:10px 14px;gap:0}
.moon-ui .delivery-est .de-ico{display:none}
.moon-ui .delivery-est .de-ico-m{display:inline;vertical-align:-2px;margin-right:4px}
.moon-ui .delivery-est .de-top{width:100%;font-size:13px;font-weight:500;opacity:.8;line-height:1.2}
.moon-ui .delivery-est .de-date{width:100%;font-size:13px;font-weight:700;color:#1a6e3a;margin-top:3px;line-height:1.2}
}
/* DESKTOP (≥769px): chowamy mobilne, wracamy do 2-kol PDP */
@media (min-width:769px){
.m-header,.tabbar,.sticky-atc,.thumb-strip-mobile{display:none}
.sticky-atc{display:none}
body{padding-bottom:0 !important}
}
@media (max-width:768px){
.header{display:none} /* na mobile używamy m-header */
.topbar{font-size:10px;padding:6px 16px}
.topbar-left{gap:8px;flex-wrap:wrap;justify-content:center}
.tsep{height:8px}
header.wp-block-template-part{position:sticky;top:calc(var(--tb-h,52px) * -1);z-index:100}
body{padding-bottom:56px;scroll-padding-top:70px}
}
/* --- uzgodnienie: istniejący .mobile-bar siada NAD tab barem --- */
@media (max-width:768px){
body{padding-bottom:64px}
.mobile-bar{bottom:56px}
/* Koszyk: mobile-bar (~68px) + tab bar (56px) = 124px potrzeba pod treścią */
body.woocommerce-cart{padding-bottom:132px}
/* mobilny pasek filtrów (sklep) — trigger bottom sheet */
.m-filter-trigger{display:flex}
}
@media (min-width:769px){ .m-filter-trigger{display:none} }
/* === Responsywność 1:1 z makiety homepage (mobile-first overrides) === */
@media (max-width:768px){
.moon-ui .grid-2{grid-template-columns:1fr;gap:32px}
.moon-ui .grid-3{grid-template-columns:1fr 1fr;gap:16px}
.moon-ui .grid-4{grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width:640px){
.moon-ui .grid-2{grid-template-columns:1fr;gap:28px}
.moon-ui .grid-3{grid-template-columns:1fr;gap:16px}
.moon-ui .grid-4{grid-template-columns:1fr 1fr;gap:12px}
.moon-ui .grid-6-3x2{grid-template-columns:1fr 1fr;gap:10px}
.moon-ui .sec-header{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:24px}
.moon-ui .sec-header h2,
.moon-ui .sec-header h2.h2-bestsellers,
.moon-ui .sec-header h2.h2-opinie{font-size:24px}
.moon-ui .sec-header h2.lbl{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:0.16em;color:var(--gold);text-transform:uppercase;font-variation-settings:normal;line-height:1.4;margin-top:0}
.moon-ui .sec{padding:48px 0}
.moon-ui .sec-tight{padding:36px 0}
.moon-ui .ps-imgs{grid-template-columns:1fr 1fr;gap:10px}
.moon-ui .brand-logos{flex-wrap:wrap;gap:12px}
.moon-ui .news-form{grid-template-columns:1fr;gap:10px}
.moon-ui .news-form .btn{width:100%}
.moon-ui .card-product .ptitle{font-size:13.5px}
/* Cena w jednej linii na mobile — clamp skaluje od 11px (320px) do ~14px (390px); nowrap gwarantuje brak łamania */
.moon-ui .card-product .pprice{font-size:clamp(11px, 3.5vw, 17px);white-space:nowrap}
.moon-ui .card-product .pbody{padding-left:10px;padding-right:10px}
}
@media (max-width:400px){
.moon-ui .grid-4{grid-template-columns:1fr}
/* Sklep tez 1 kolumna na ≤400px — spójność z homepage, pill mieści się w 1 linii.
Na 401px+ grid-4 wraca do 2 kolumn (z breakpointu 640px) z kartą ≥193px = pill OK. */
}
/* === Hero: usunięcie nadmiarowego odstępu od góry (WP layout) === */
/* WP dodaje pionowy odstęp wokół bloku wp:html; zerujemy i ustawiamy hero jak w makiecie */
.moon-ui:first-child, .wp-block-post-content > .moon-ui:first-child { margin-top: 0 !important; }
.moon-ui > .hero:first-child { margin-top: 0 !important; }
@media (max-width:768px){
.moon-ui .hero{ padding: 40px 0 56px; } /* mniejszy odstęp na mobile */
}
@media (max-width:640px){
.moon-ui .hero{ padding: 28px 0 48px; }
}
/* === Karty produktów: równa wysokość obrazów (lock aspect-ratio) === */
.moon-ui .card-product .pimg { flex: 0 0 auto; } /* obraz nie rozciąga się */
.moon-ui .card-product .pbody { flex: 1 1 auto; } /* treść wypełnia resztę → karty równe */
.moon-ui .card-product .pcta { margin-top: auto; } /* przycisk zawsze na dole */
/* === Hero CTA: na mobile przyciski JEDEN POD DRUGIM, pełna szerokość === */
@media (max-width:768px){
.moon-ui .hero-ctas{ flex-direction: column; gap: 10px; }
.moon-ui .hero-ctas .btn{ width: 100%; }
}
/* =========================================================
PDP — Strona produktu (single-product)
Źródło: MOON_produkt_1to1.html, scoped .moon-ui
========================================================= */
/* --- PDP grid (2-col desktop → 1-col mobile) --- */
.moon-ui .pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:14px 0 64px;align-items:start}
/* --- Gallery (desktop: sticky, thumbnails grid) --- */
.moon-ui .gallery{position:sticky;top:84px}
.moon-ui .gal-main{aspect-ratio:4/5;border-radius:12px;overflow:hidden;position:relative;margin-bottom:12px;background:linear-gradient(135deg,#EDE2C8 0%,#E2D4B0 50%,#EDE2C8 100%)}
.moon-ui .gal-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.moon-ui .gal-main .img-ph{position:absolute;inset:0;border-radius:12px}
.moon-ui .gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.moon-ui .gal-thumb{aspect-ratio:1/1;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;position:relative}
.moon-ui .gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.moon-ui .gal-thumb .img-ph{position:absolute;inset:0;border-radius:6px}
.moon-ui .gal-thumb.active{border-color:var(--gold)}
/* --- Swipe gallery (mobile: scroll-snap carousel) --- */
.moon-ui .swipe-gal{position:relative}
.moon-ui .swipe-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.moon-ui .swipe-track::-webkit-scrollbar{display:none}
.moon-ui .swipe-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;position:relative}
.moon-ui .swipe-slide img{width:100%;height:100%;object-fit:cover;display:block}
.moon-ui .swipe-slide .img-ph{position:absolute;inset:0;border-radius:0}
.moon-ui .gal-count{position:absolute;top:14px;right:14px;z-index:3;background:rgba(26,24,21,.7);color:#fff;font-size:12px;font-weight:500;padding:5px 11px;border-radius:999px;font-variant-numeric:tabular-nums}
.moon-ui .gal-zoom-hint{position:absolute;bottom:14px;right:14px;z-index:3;background:rgba(26,24,21,.6);color:#fff;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.moon-ui .gal-wish{position:absolute;top:14px;left:14px;right:auto;z-index:3;width:40px;height:40px;border-radius:999px;background:#fff;color:var(--t1);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(26,24,21,.12)}
/* --- Thumb strip (mobile horizontal scroll) --- */
.moon-ui .thumb-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;scrollbar-width:none}
.moon-ui .thumb-strip::-webkit-scrollbar{display:none}
.moon-ui .thumb-strip .th{flex:0 0 60px;height:60px;border-radius:8px;overflow:hidden;border:2px solid transparent;position:relative;cursor:pointer}
.moon-ui .thumb-strip .th img{width:100%;height:100%;object-fit:cover;display:block}
.moon-ui .thumb-strip .th .img-ph{position:absolute;inset:0;border-radius:6px}
.moon-ui .thumb-strip .th.active{border-color:var(--gold)}
/* --- PDP info column --- */
.moon-ui .pdp-info .lbl{margin-bottom:10px}
.moon-ui .pdp-info h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 144,'SOFT' 0;font-size:38px;line-height:1.08;letter-spacing:-0.02em;color:var(--t1);margin-bottom:14px}
.moon-ui .pdp-rating{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2);margin-bottom:20px}
.moon-ui .pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:20px 0}
.moon-ui .pdp-price .now{font-family:var(--font-sans);font-size:28px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.moon-ui .pdp-price .per{font-size:12px;color:var(--t3)}
.moon-ui .pdp-price .was{font-size:18px;color:var(--t3);font-variant-numeric:tabular-nums}
.moon-ui .pdp-price .was s{text-decoration:line-through}
.moon-ui .pdp-omnibus{width:100%;font-size:12px;color:var(--t3);margin-top:-4px}
/* Omnibus na kartach sklepu/homepage */
.moon-ui .card-product .iworks-omnibus,.pprice .iworks-omnibus{font-size:11px;color:var(--t3);margin-top:2px}
/* Zestaw: porównanie osobno vs zestaw (nie przecena) */
.moon-ui .pdp-bundle-compare{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;margin-top:4px}
.moon-ui .pdp-bundle-line{font-size:13px;color:var(--t2)}
.moon-ui .pdp-bundle-line s{color:var(--t3)}
.moon-ui .pdp-bundle-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--gold);border:1.5px solid var(--gold);border-radius:20px;padding:3px 10px;white-space:nowrap}
.moon-ui .pdp-bundle-badge svg{flex-shrink:0}
.moon-ui .pdp-desc{color:var(--t2);font-size:14.5px;line-height:1.7;margin-bottom:26px}
/* --- Delivery estimate (rules above, ~line 2093) --- */
/* --- Variant picker (pill-buttons) --- */
.moon-ui .variant-row{display:flex;gap:10px;margin:14px 0 8px}
.moon-ui .variant{flex:1;border:1.5px solid var(--b1);border-radius:8px;padding:12px 14px;cursor:pointer;transition:all 140ms var(--ease);text-align:left}
.moon-ui .variant:hover{border-color:var(--border-hover)}
.moon-ui .variant.active{border-color:var(--gold);background:var(--gold-soft)}
.moon-ui .variant .vt{font-size:13px;font-weight:600;color:var(--t1)}
.moon-ui .variant .vp{font-size:12px;color:var(--t3);margin-top:2px}
/* variant button specificity fix (reset button{background:none} override) */
.moon-ui button.variant{background:transparent !important;color:var(--t1) !important}
.moon-ui button.variant.active{background:var(--gold-soft) !important}
/* --- Buy row (qty + ATC) --- */
.moon-ui .buy-row{display:flex;gap:12px;margin:24px 0}
.moon-ui .qty-stepper{display:flex;align-items:center;border:1.5px solid var(--b1);border-radius:8px;height:48px}
.moon-ui .qty-stepper button{width:46px;height:100%;font-size:18px;color:var(--t2)}
.moon-ui .qty-stepper span{width:40px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
/* --- Trust mini (4 icons under ATC) --- */
.moon-ui .trust-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;padding-top:24px;border-top:1px solid var(--b3)}
.moon-ui .trust-mini .ti{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--t2)}
.moon-ui .trust-mini .ti svg{color:var(--gold);flex-shrink:0;margin-top:1px}
/* --- Crosssell --- */
.moon-ui .crosssell{margin-top:22px;background:var(--bg2);border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center}
.moon-ui .crosssell .img-ph{width:64px;height:64px;border-radius:8px;flex-shrink:0}
/* --- Tabs (desktop) --- */
.moon-ui .tabs{display:flex;gap:0;border-bottom:1px solid var(--b2);margin:8px 0 28px}
.moon-ui .tab{padding:14px 20px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 120ms var(--ease)}
.moon-ui .tab.active{color:var(--t1);border-bottom-color:var(--gold)}
/* --- Accordion (mobile product tabs) --- */
.moon-ui .m-acc{border-top:1px solid var(--b1)}
.moon-ui .m-acc summary{list-style:none;display:flex;align-items:center;padding:16px 0;font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);cursor:pointer;gap:8px}
.moon-ui .m-acc summary::before{content:'';display:block;width:18px;height:1px;background:var(--gold);flex-shrink:0}
.moon-ui .m-acc summary .chev{margin-left:auto;transition:transform 200ms var(--ease);color:var(--gold)}
.moon-ui .m-acc summary::-webkit-details-marker{display:none}
.moon-ui .m-acc[open] summary .chev{transform:rotate(180deg)}
.moon-ui .m-acc .acc-content{padding-bottom:18px;font-size:13px;color:var(--t2);line-height:1.7;font-family:var(--font-sans);max-width:65ch}
.moon-ui .m-acc .acc-content.acc-reviews{max-width:none}
/* Duo accordion — Składniki + Jak stosować side by side on desktop */
.moon-ui .acc-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 80px;align-items:start}
.moon-ui .acc-duo .m-acc{border-top:1px solid var(--b1)}
.moon-ui .acc-duo .m-acc .acc-content{max-width:65ch}
@media(max-width:768px){
.moon-ui .acc-duo{grid-template-columns:1fr}
}
/* Accordion content: style WP-generated HTML (p, h2, ul, ol, strong, em) */
.moon-ui .acc-content p{margin:0 0 12px}
.moon-ui .acc-content p:last-child{margin-bottom:0}
.moon-ui .acc-content h2,.moon-ui .acc-content h3{font-family:var(--font-sans);font-size:15px;font-weight:400;color:var(--t2);margin:18px 0 8px;line-height:1.4;letter-spacing:-0.005em;font-variation-settings:normal}
.moon-ui .acc-content h2:first-child,.moon-ui .acc-content h3:first-child{margin-top:0}
.moon-ui .acc-content ul,.moon-ui .acc-content ol{margin:0 0 12px 18px;color:var(--t2)}
.moon-ui .acc-content li{margin-bottom:6px}
.moon-ui .acc-content strong{color:var(--t1);font-weight:500}
.moon-ui .acc-content em,.moon-ui .acc-content i{font-style:italic}
.moon-ui .acc-content a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
/* Opis + panel Najwazniejsze — 2 kolumny na desktop, stack na mobile */
/* Opis + Najważniejsze grid (desktop 2-col, mobile 1-col) */
.moon-ui .acc-opis-grid.has-highlights{display:grid;grid-template-columns:1fr 1fr;gap:0 80px;align-items:start}
.moon-ui .m-acc-highlights .acc-content{background:var(--sand);border-radius:12px;padding:18px 22px}
.moon-ui .m-acc-highlights .acc-content{max-width:none}
@media(max-width:768px){
.moon-ui .acc-opis-grid.has-highlights{grid-template-columns:1fr}
}
.hp-list{list-style:none;margin:0;padding:0}
.hp-list li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--t1);line-height:1.5;margin-bottom:10px;font-family:var(--font-sans)}
.hp-list li:last-child{margin-bottom:0}
.hp-list li svg{color:var(--gold);flex-shrink:0;margin-top:2px}
@media(max-width:768px){
.acc-desc-grid.has-panel{grid-template-columns:1fr;gap:20px}
}
/* --- Sticky ATC (mobile, above tab bar) --- */
.moon-ui .sticky-atc{position:fixed;left:0;right:0;bottom:56px;z-index:190;background:#fff;border-top:1px solid var(--b2);box-shadow:0 -4px 16px rgba(26,24,21,.07);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;transform:translateY(130%);transition:transform 220ms var(--ease)}
.moon-ui .sticky-atc .sa-info{flex-shrink:0;min-width:84px}
.moon-ui .sticky-atc .sa-variant{font-size:11px;color:var(--t3)}
.moon-ui .sticky-atc .sa-price{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.moon-ui .sticky-atc .btn{flex:1}
/* --- Bottom sheet (variant picker mobile) --- */
.moon-ui .sheet-scrim{position:fixed;inset:0;z-index:300;background:var(--overlay);opacity:0;visibility:hidden;transition:opacity 220ms var(--ease),visibility 220ms}
.moon-ui .sheet-scrim.open{opacity:1;visibility:visible}
.moon-ui .sheet{position:fixed;left:0;right:0;bottom:0;z-index:310;background:var(--bg);border-radius:18px 18px 0 0;padding:8px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform 280ms var(--ease);max-height:86vh;overflow-y:auto}
.moon-ui .sheet.open{transform:translateY(0)}
.moon-ui .sheet-grip{width:40px;height:4px;border-radius:999px;background:var(--b1);margin:8px auto 16px}
.moon-ui .sheet h3{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:20px;margin-bottom:16px}
.moon-ui .sheet-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--b1);border-radius:10px;padding:16px;margin-bottom:10px;cursor:pointer;transition:all 140ms var(--ease)}
.moon-ui .sheet-opt:hover{border-color:var(--border-hover)}
.moon-ui .sheet-opt.active{border-color:var(--gold);background:var(--gold-soft)}
.moon-ui .sheet-opt .so-t{font-size:14px;font-weight:600}
.moon-ui .sheet-opt .so-s{font-size:12px;color:var(--t3);margin-top:2px}
.moon-ui .sheet-opt .so-radio{width:22px;height:22px;border-radius:999px;border:2px solid var(--b1);flex-shrink:0}
.moon-ui .sheet-opt.active .so-radio{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 4px #fff}
/* --- PDP: DESKTOP (≥769px) hide mobile chrome, show desktop gallery --- */
@media (min-width:769px){
.moon-ui .sticky-atc{display:none !important}
.moon-ui .swipe-gal{display:none !important}
.moon-ui .thumb-strip{display:none !important}
.moon-ui .gal-main{display:block !important}
.moon-ui .gal-thumbs{display:grid !important}
.moon-ui #moonVariantTrigger{display:none !important}
.moon-ui #moonVariantRow{display:flex !important}
.moon-ui .sheet-scrim,
.moon-ui .sheet{display:none !important}
}
/* --- PDP: MOBILE (≤768px) show swipe gallery, hide desktop --- */
@media (max-width:768px){
.moon-ui .pdp{grid-template-columns:1fr;gap:28px}
.moon-ui .gallery{position:static}
.moon-ui .pdp-info h1{font-size:30px}
.moon-ui .gal-main{display:none !important}
.moon-ui .gal-thumbs{display:none !important}
.moon-ui .swipe-gal{display:block !important}
.moon-ui .thumb-strip{display:flex !important}
.moon-ui #moonVariantRow{display:none !important}
.moon-ui #moonVariantTrigger{display:flex !important}
}
@media (max-width:640px){
.moon-ui .variant-row,.moon-ui .buy-row{flex-direction:column}
.moon-ui .buy-row .qty-stepper{width:100%;justify-content:center}
.moon-ui .buy-row .btn-lg{min-height:48px;flex-shrink:0}
.moon-ui .trust-mini{grid-template-columns:1fr;gap:12px}
.moon-ui .gal-thumbs{grid-template-columns:repeat(5,1fr)}
}
/* =========================================================
CHECKOUT GATE — ekran pośredni gość/logowanie
========================================================= */
/* Break out of wp-block-post-content constraint */
.wp-block-post-content > .moon-cg,
.entry-content > .moon-cg{max-width:none}
.moon-cg{padding:40px 0 64px}
.moon-cg-heading{
font-family:var(--font-display);
font-size:28px;
font-weight:600;
text-align:center;
color:var(--t1);
margin:0 0 32px;
}
/* Grid: 2 kolumny + pionowa linia (wzór b2b-final-grid) */
.moon-cg-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
max-width:780px;
margin:0 auto;
align-items:start;
}
.moon-cg-grid > p:empty{display:none}
/* Prawa kolumna — linia pionowa jak b2b-form-col */
.moon-cg-login-col{border-left:1px solid var(--b1);padding-left:56px}
/* Kolumny — brak ramek, brak tła, treść naturalna */
.moon-cg-col .lbl-bar{margin-bottom:16px}
.moon-cg-col h2{
font-family:var(--font-display);
font-size:22px;
font-weight:600;
color:var(--t1);
margin:0 0 8px;
}
.moon-cg-desc{
font-size:14px;
color:var(--t2);
line-height:1.6;
margin:0 0 24px;
}
.moon-cg-register{
text-align:center;
margin:12px 0 0 !important;
font-size:13px;
}
.moon-cg-register a{
color:var(--gold);
text-decoration:underline;
text-underline-offset:2px;
}
.moon-cg-register a:hover{color:var(--t1)}
/* Field labels — uppercase brass (jak b2b-field / formularz salonu) */
.moon-cg-label{
display:block;
text-transform:uppercase;
font-size:11px;
font-weight:600;
letter-spacing:0.1em;
color:var(--t2);
margin-bottom:6px;
}
.moon-cg-field{margin-bottom:14px}
.moon-cg-input{
width:100%;
box-sizing:border-box;
padding:12px 16px;
border:1px solid var(--b2);
border-radius:6px;
background:#fff;
font-size:14px;
color:var(--t1);
font-family:var(--font-sans);
transition:border-color .2s var(--ease);
}
.moon-cg-input:focus{
outline:none;
border-color:var(--gold);
box-shadow:0 0 0 2px rgba(139,111,71,.15);
}
/* Login form — hidden on mobile, visible on desktop */
.moon-cg-login-form{display:none;margin-top:4px}
@media (min-width:641px){
.moon-cg-login-form{display:block}
.moon-cg-login-toggle{display:none !important}
}
.moon-cg-login-form.moon-cg-form-open{display:block}
.moon-cg-forgot{
text-align:center;
margin:10px 0 0 !important;
font-size:13px;
}
.moon-cg-forgot a{
color:var(--t3);
text-decoration:underline;
text-underline-offset:2px;
}
.moon-cg-forgot a:hover{color:var(--gold)}
/* Mobile */
@media (max-width:640px){
.moon-cg{padding:28px 0 48px}
.moon-cg-heading{font-size:22px;margin-bottom:24px}
.moon-cg-grid{grid-template-columns:1fr;gap:0}
.moon-cg-login-col{border-left:none;padding-left:0;border-top:1px solid var(--b2);padding-top:28px;margin-top:28px}
}
/* =========================================================
CHECKOUT — Etap 5.2a: otoczka (steps, page-head, mobile-bar)
Opcja C: natywny blok Woo + Warm Atelier wrapper.
========================================================= */
/* Steps bar (reuse istniejących .steps/.step z koszyka) */
.moon-checkout-wrap .steps{display:flex;justify-content:center;gap:8px;padding:26px 0 8px}
.moon-checkout-wrap .step{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3)}
.moon-checkout-wrap .step .num{width:24px;height:24px;border-radius:999px;border:1.5px solid var(--b1);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.moon-checkout-wrap .step.active{color:var(--t1)}
.moon-checkout-wrap .step.active .num{background:var(--gold);border-color:var(--gold);color:#fff}
.moon-checkout-wrap .step.done .num{background:var(--success);border-color:var(--success);color:#fff}
.moon-checkout-wrap .step .line{width:40px;height:1px;background:var(--b2)}
.moon-checkout-wrap .page-head h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 96,'SOFT' 0;font-size:32px;line-height:1.05;letter-spacing:-0.02em;color:var(--t1)}
/* Wyrównanie tytułu „Zamówienie": symetryczne odstępy nad i pod */
.moon-checkout-wrap .page-head{padding:24px 0 0 !important}
body.woocommerce-checkout .entry-content.is-layout-flow > *{margin-top:0 !important}
/* Ukryj tab bar na checkoucie */
body.woocommerce-checkout .tabbar{display:none !important}
body.woocommerce-checkout{padding-bottom:0 !important}
/* Ukryj domyślny tytuł WP na checkoucie */
body.woocommerce-checkout .wp-block-post-title{display:none}
/* Woo checkout block — full width (jak inne ekrany) */
body.woocommerce-checkout .entry-content>.wp-block-woocommerce-checkout{max-width:none}
/* Mobile-bar checkout (sticky na dole, jak w koszyku) */
.moon-checkout-mobile-bar.mobile-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--b2);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;z-index:200;box-shadow:0 -4px 16px rgba(26,24,21,.06)}
body.woocommerce-checkout .moon-checkout-mobile-bar .btn{font-size:13px !important;font-weight:500 !important;background:var(--gold) !important;color:#fff !important}
/* Mobile: show mobile-bar, add bottom padding */
@media (max-width:768px){
.moon-checkout-mobile-bar.mobile-bar{display:flex !important}
body.woocommerce-checkout{padding-bottom:76px !important}
}
@media (min-width:769px){
.moon-checkout-mobile-bar.mobile-bar{display:none !important}
}
/* Steps wrap on mobile */
@media (max-width:640px){
.moon-checkout-wrap .steps{flex-wrap:wrap}
.moon-checkout-wrap .page-head h1{font-size:26px}
}
/* =========================================================
CHECKOUT — Etap 5.2b: stylowanie bloku Woo (Warm Atelier)
Override na wc-block-* klasy. Scoped pod body.woocommerce-checkout.
========================================================= */
/* --- Layout: 2-kolumnowy grid zbliżony do makiety .co-layout --- */
body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout{
max-width:var(--container) !important;margin:0 auto !important;padding:0 24px 80px !important;
display:grid !important;grid-template-columns:1fr 380px !important;gap:40px !important;align-items:start !important;
}
body.woocommerce-checkout .wc-block-components-main.wc-block-checkout__main{
order:0;max-width:none !important;width:100% !important;
}
body.woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar{
order:1;width:100% !important;min-width:0 !important;
}
/* --- Checkout notices: constrain width, don't span full page --- */
body.woocommerce-checkout .wc-block-components-notice-banner{
max-width:none!important;margin-left:0!important;margin-right:0!important;
}
body.woocommerce-checkout .woocommerce-notices-wrapper{max-width:none;padding-left:0;padding-right:0}
/* --- Sekcje formularza → styl .co-section (białe karty) --- */
body.woocommerce-checkout .wc-block-components-checkout-step{
background:#fff;border:1px solid var(--b2);border-radius:12px;
padding:24px;margin-bottom:16px;
}
/* Nagłówki sekcji → Inter 16px/600 (jak .co-section h3) */
body.woocommerce-checkout .wc-block-components-checkout-step__title{
font-family:var(--font-sans) !important;font-size:16px !important;
font-weight:600 !important;color:var(--t1) !important;
margin:0 !important;letter-spacing:normal !important;
line-height:1.3 !important;
}
/* Remove default fieldset/legend styling */
body.woocommerce-checkout fieldset.wc-block-components-checkout-step{
border:1px solid var(--b2) !important;
}
/* --- Pola tekstowe → styl .field --- */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-blocks-components-select__select{
width:100%;height:46px;padding:14px 14px 0;
border:1px solid var(--b-field) !important;border-radius:6px !important;
background:var(--bg) !important;font-size:16px !important;
color:var(--t1) !important;font-family:var(--font-sans) !important;
transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease);
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus{
outline:none !important;
border:1.5px solid var(--gold) !important;
box-shadow:0 0 0 3px rgba(139,111,71,.18) !important;
}
/* Labels — float label styl Woo: uppercase is NOT matching, keep Woo's approach (cleaner) */
body.woocommerce-checkout .wc-block-components-text-input label{
font-family:var(--font-sans) !important;font-size:14px;
color:var(--t3) !important;
}
body.woocommerce-checkout .wc-block-components-text-input.is-active label{
font-size:11px;color:var(--t2) !important;
}
body.woocommerce-checkout .wc-blocks-components-select__label{
font-family:var(--font-sans) !important;color:var(--t3) !important;
}
/* --- Checkbox → gold accent --- */
body.woocommerce-checkout .wc-block-components-checkbox__input{
accent-color:var(--gold) !important;
}
body.woocommerce-checkout .wc-block-components-checkbox__label{
font-family:var(--font-sans) !important;font-size:12px;color:var(--t2);
}
/* notices checkout — handled by global Warm Atelier rules */
/* --- Sidebar → styl .summary --- */
body.woocommerce-checkout .wc-block-checkout__sidebar{
position:sticky !important;top:84px;
background:#fff;border:1px solid var(--b2);border-radius:12px;
padding:24px;
}
/* Sidebar title */
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title{
padding:0 0 18px;margin:0;border:0;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text{
font-family:var(--font-sans) !important;font-size:15px !important;
font-weight:600 !important;color:var(--t1) !important;
}
/* Totals rows */
body.woocommerce-checkout .wc-block-components-totals-item{
font-family:var(--font-sans) !important;font-size:13px;color:var(--t2);
}
body.woocommerce-checkout .wc-block-components-totals-item__label{
color:var(--t2);
}
body.woocommerce-checkout .wc-block-components-totals-item__value{
color:var(--t1);font-weight:500;
}
/* Footer total → bold, bigger */
body.woocommerce-checkout .wc-block-components-totals-footer-item{
font-size:17px !important;font-weight:600 !important;color:var(--t1) !important;
border-top:1px solid var(--b2);padding-top:14px;margin-top:6px;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
color:var(--t1);font-weight:600;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-formatted-money-amount{
font-variant-numeric:tabular-nums;
}
/* Order summary product items */
body.woocommerce-checkout .wc-block-components-order-summary-item{
font-family:var(--font-sans) !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__header{
font-size:14px;font-weight:600;color:var(--t1);
}
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-price,
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price{
font-variant-numeric:tabular-nums;color:var(--t1);
}
/* Fix 3: hide short_description in order summary */
body.woocommerce-checkout .wc-block-components-product-metadata__description{
display:none;
}
/* Fix 4: hide empty discount/fee wrappers + InPost slot border */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-discount-block:empty,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-fee-block:empty{
display:none;
}
body.woocommerce-checkout .wc-block-components-totals-wrapper.slot-wrapper{
border:0;padding:0;margin:0;
}
/* Coupon panel → collapsed by default (Woo handles this) */
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button{
font-family:var(--font-sans) !important;font-size:13px;color:var(--t2);
}
body.woocommerce-checkout .wc-block-components-totals-coupon input{
height:44px;padding:0 14px;border:1px solid var(--b-field);border-radius:6px;
background:var(--bg);font-size:13px;
}
body.woocommerce-checkout .wc-block-components-totals-coupon input:focus{
outline:none;border:1.5px solid var(--gold);
box-shadow:0 0 0 3px rgba(139,111,71,.18);
}
/* --- Przycisk "Kupuję i płacę" → btn-gold btn-full btn-lg --- */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button{
width:100% !important;height:48px !important;
background:var(--gold) !important;color:#fff !important;
border:0 !important;border-radius:6px !important;
font-family:var(--font-sans) !important;font-size:14px !important;
font-weight:500 !important;letter-spacing:0.02em;
cursor:pointer;
transition:background 160ms var(--ease) !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{
background:var(--gold-dark) !important;
}
/* --- Terms checkbox + text --- */
body.woocommerce-checkout .wc-block-checkout__terms{
font-family:var(--font-sans) !important;font-size:12px;
color:var(--t3);margin-top:8px;
}
body.woocommerce-checkout .wc-block-checkout__terms a{
color:var(--t2);text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox{
margin-top:4px;
}
body.woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox__label{
font-size:12.5px !important;color:var(--t2) !important;line-height:1.5;
}
body.woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox__input{
accent-color:var(--gold) !important;
}
/* Terms error message — uses native .wc-block-components-validation-error class for consistent style */
/* Guest checkout notice */
body.woocommerce-checkout .wc-block-checkout__guest-checkout-notice{
font-size:12px;color:var(--t3);
}
body.woocommerce-checkout .wc-block-checkout__guest-checkout-notice a{
color:var(--gold-dark) !important;text-decoration:underline;text-underline-offset:3px;
font-weight:500;transition:color 160ms var(--ease);
}
body.woocommerce-checkout .wc-block-checkout__guest-checkout-notice a:hover{
color:var(--gold) !important;
}
/* "Masz konto? Zaloguj się" — brass text link with user icon (Wariant A) */
body.woocommerce-checkout a.moon-login-link{
display:inline-flex !important;align-items:center;gap:5px;
color:var(--gold-dark) !important;font-family:var(--font-sans) !important;font-size:12.5px !important;
font-weight:500;text-decoration:underline !important;text-underline-offset:3px;
transition:color 160ms var(--ease);
}
body.woocommerce-checkout a.moon-login-link:hover{
color:var(--gold) !important;
}
body.woocommerce-checkout a.moon-login-link svg{
color:var(--gold-dark);
}
/* Order notes */
body.woocommerce-checkout .wc-block-checkout__add-note{
font-family:var(--font-sans) !important;font-size:13px;color:var(--t2);
}
/* --- Shipping/payment wrapper: usuń ramkę grupy (ramka w ramce) --- */
body.woocommerce-checkout .wc-block-components-shipping-rates-control,
body.woocommerce-checkout .wc-block-components-radio-control,
body.woocommerce-checkout .wc-block-components-payment-method-icons,
body.woocommerce-checkout .wc-block-components-shipping-rates-control__package,
body.woocommerce-checkout .wc-block-components-shipping-rates-control__package--multiple{
border:none !important;background:transparent !important;padding:0 !important;margin:0 !important;box-shadow:none !important;outline:none !important;
}
/* Woo packages-style: ::after pseudo rysuje ramkę wokół grupy radio-cards (highlight-checked). Wyłączamy — content:none eliminuje pseudo-element. */
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after{
content:none !important;
}
/* --- Shipping method radio cards (jeśli dostępne) --- */
body.woocommerce-checkout .wc-block-components-radio-control__option{
border:1.5px solid var(--b1);border-radius:8px;
padding:14px 16px;margin-bottom:10px;
transition:all 140ms var(--ease);
}
body.woocommerce-checkout .wc-block-components-radio-control__option:hover{
border-color:var(--border-hover);
}
body.woocommerce-checkout .wc-block-components-radio-control__option--checked{
border-color:var(--gold) !important;background:var(--gold-soft);
}
body.woocommerce-checkout .wc-block-components-radio-control__input{
accent-color:var(--gold);
}
/* --- Payment method radios --- */
body.woocommerce-checkout .wc-block-components-payment-method-label{
font-family:var(--font-sans) !important;font-size:13.5px;font-weight:500;
}
/* --- Express payment (jeśli dostępny) --- */
body.woocommerce-checkout .wc-block-components-express-payment{
margin-bottom:16px;
}
/* --- Darmowa dostawa bar (shipping totals) --- */
body.woocommerce-checkout .wc-block-components-shipping-rates-control__package__description--free{
color:var(--success);font-weight:600;
}
/* --- Shipping radio: cena/bezpłatnie label --- */
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label{
color:var(--t1) !important;font-weight:500;font-size:13px;
}
/* --- Shipping radio: etykieta metody --- */
body.woocommerce-checkout .wc-block-components-radio-control__label{
font-family:var(--font-sans) !important;font-size:13.5px;font-weight:500;
}
/* --- Shipping radio: podpis pod etykietą (opis metody) --- */
body.woocommerce-checkout .wc-block-components-radio-control__description{
font-size:12px;color:var(--t3);margin-top:2px;
}
/* --- Shipping radio: padding-left na tekst (radio input jest absolute) --- */
body.woocommerce-checkout .wc-block-components-radio-control__option{
padding-left:48px !important;position:relative;
}
/* --- InPost: nadpisz żółty przycisk "Wybierz punkt odbioru" na nasz styl --- */
body.woocommerce-checkout button.easypack_show_geowidget,
body.woocommerce-checkout #easypack_block_type_geowidget{
background:var(--gold) !important;color:#fff !important;
border:0 !important;border-radius:6px !important;
font-family:var(--font-sans) !important;font-size:13px !important;
font-weight:500 !important;padding:10px 24px !important;
cursor:pointer;transition:background 160ms var(--ease);
height:auto !important;min-height:40px;
margin-top:12px;
}
body.woocommerce-checkout button.easypack_show_geowidget:hover,
body.woocommerce-checkout #easypack_block_type_geowidget:hover{
background:var(--gold-dark) !important;
}
/* --- InPost logo w radio: zmniejsz do pasujących proporcji --- */
body.woocommerce-checkout .wc-block-components-radio-control__option img{
max-height:20px;width:auto;margin-top:4px;
}
/* --- Payment radio-cards: te same karty co shipping --- */
body.woocommerce-checkout .wc-block-components-payment-method-icons{
display:none; /* ukryj domyślne ikonki Woo jeśli niepotrzebne */
}
/* --- "Za pobraniem" — ukryj w produkcji (zostaw teraz jako fallback testowy) --- */
/* body.woocommerce-checkout .wc-block-components-radio-control__option[value="cod"]{ display:none; } */
/* =====================================================================
PRZELEWY24 — metody płatności w szacie Warm Atelier
Scope: body.woocommerce-checkout (obejmuje Woo Blocks checkout).
Nadpisujemy TYLKO kolory i zaokrąglenia wtyczki — nie ruszamy struktury React.
===================================================================== */
/* --- P24: ikony metod w label radio-card --- */
body.woocommerce-checkout .wc-block-components-payment-method-label img{
max-height:22px;width:auto;vertical-align:middle;
}
/* --- P24: kontener treści bramki (rozwinięty po wyborze) --- */
body.woocommerce-checkout .p24-payment-container{
font-family:var(--font-sans);font-size:13px;color:var(--t1);
}
/* --- P24 BLIK: pole kodu --- */
body.woocommerce-checkout .p24-blik-code-input .wc-block-components-text-input input{
background:var(--bg);border:1.5px solid var(--b-field);border-radius:6px;
font-family:var(--font-sans);font-size:15px;color:var(--t1);
letter-spacing:2px;
}
body.woocommerce-checkout .p24-blik-code-input .wc-block-components-text-input input:focus{
border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft);outline:none;
}
body.woocommerce-checkout .p24-blik-code-input .wc-block-components-text-input label{
color:var(--t3);font-size:12px;
}
/* --- P24 BLIK: overlay oczekiwania na potwierdzenie --- */
body.woocommerce-checkout .p24-waiting{
background:rgba(251,248,241,.92);border-radius:8px;font-family:var(--font-sans);
}
/* --- P24 Karta: kontener iframe tokenizera --- */
body.woocommerce-checkout #card-tokenizer{
border-radius:8px;overflow:hidden;margin:8px 0;
}
/* --- P24 Online Payments: grid kafelków metod (paywall) --- */
body.woocommerce-checkout .p24-method-item{
border:1.5px solid var(--b1);border-radius:8px;
background:var(--bg);transition:all 140ms var(--ease);
font-family:var(--font-sans);color:var(--t1);
}
body.woocommerce-checkout .p24-method-item:hover{
border-color:var(--border-hover);
}
body.woocommerce-checkout .p24-method-item--active{
outline:2px solid var(--gold);border-color:var(--gold);
background:var(--gold-soft);
}
/* --- P24: checkboxy regulaminu --- */
body.woocommerce-checkout .p24-checkbox .wc-block-components-checkbox__input{
accent-color:var(--gold);
}
body.woocommerce-checkout .p24-checkbox .wc-block-components-checkbox__label{
font-family:var(--font-sans);font-size:12px;color:var(--t2);
}
body.woocommerce-checkout .p24-checkbox a{
color:var(--t2);text-decoration:underline;text-underline-offset:3px;
}
/* --- P24: separator "lub" (one-click) --- */
body.woocommerce-checkout .p24-1clicks__or::before,
body.woocommerce-checkout .p24-1clicks__or::after{
background:var(--b2);
}
body.woocommerce-checkout .p24-1clicks__or{
color:var(--t3);font-family:var(--font-sans);
}
body.woocommerce-checkout .p24-1clicks__label{
color:var(--t3);font-family:var(--font-sans);
}
/* --- P24 Karta: przycisk "nowa karta" — nadpisanie niebieskich kolorów (#3b82f6) --- */
body.woocommerce-checkout .p24-1clicks__new-card{
border-color:var(--b1);background:var(--bg);color:var(--t1);
font-family:var(--font-sans);border-radius:8px;
}
body.woocommerce-checkout .p24-1clicks__new-card:hover{
border-color:var(--border-hover);background:var(--gold-soft);color:var(--t1);
box-shadow:0 2px 8px rgba(139,111,71,.08);
}
body.woocommerce-checkout .p24-1clicks__new-card:focus{
outline:2px solid var(--gold);outline-offset:2px;
}
body.woocommerce-checkout .p24-1clicks__new-card-icon{
color:var(--gold);
}
body.woocommerce-checkout .p24-1clicks__new-card:hover .p24-1clicks__new-card-icon{
color:var(--gold-dark);
}
/* --- P24 Karta: zapisane karty one-click --- */
body.woocommerce-checkout .p24-1click{
background:var(--bg);border-color:var(--b1);border-radius:8px;
}
body.woocommerce-checkout .p24-1click--active{
border-color:var(--gold);outline-color:var(--gold);
}
/* --- P24: 3DS modal — zaokrąglenia i cień w stylu marki --- */
#p24-3ds-modal .modal-content{
border-radius:12px;box-shadow:0 12px 40px rgba(26,24,21,.18);
}
/* --- P24 Apple Pay: kontener radio-card (przycisk Apple narzuca swój styl) --- */
body.woocommerce-checkout .wc-block-components-radio-control__option[value="p24-apple-pay"]
.p24-payment-container{
padding:4px 0;
}
/* --- P24 Google Pay: kontener radio-card (przycisk Google narzuca swój styl) --- */
body.woocommerce-checkout .wc-block-components-radio-control__option[value="p24-google-pay"]
.p24-payment-container{
padding:4px 0;
}
/* --- P24 Apple/Google Pay: checkboxy regulaminu wewnątrz kart --- */
body.woocommerce-checkout .wc-block-components-radio-control__option[value="p24-apple-pay"]
.p24-checkbox .wc-block-components-checkbox__input,
body.woocommerce-checkout .wc-block-components-radio-control__option[value="p24-google-pay"]
.p24-checkbox .wc-block-components-checkbox__input{
accent-color:var(--gold);
}
/* --- P24: wirtualne bramki (PayPo itp.) — radio-card wyróżniona --- */
body.woocommerce-checkout .wc-block-components-radio-control__option[value^="p24-online-payments-"]
.p24-payment-container{
font-family:var(--font-sans);font-size:13px;color:var(--t1);
}
body.woocommerce-checkout .wc-block-components-radio-control__option[value^="p24-online-payments-"]
.p24-checkbox .wc-block-components-checkbox__input{
accent-color:var(--gold);
}
/* --- P24: komunikaty błędów walidacji --- */
body.woocommerce-checkout .p24-payment-container .wc-block-components-validation-input-error{
color:var(--alert-error-accent);font-size:12px;margin-top:4px;
}
/* =====================================================================
/ PRZELEWY24
===================================================================== */
/* --- Responsive: mobile ≤768px --- */
@media (max-width:768px){
/* Cofnij grid na mobile — pozwól Woo is-mobile flexbox zarządzać layoutem
(sidebar przenoszona na górę jako collapsed summary) */
body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout{
display:flex !important;flex-direction:column !important;
max-width:none !important;padding:0 16px 80px !important;gap:0 !important;
}
body.woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar{
position:static !important;order:-1 !important;
border:0 !important;border-radius:0 !important;
background:transparent !important;padding:0 0 16px !important;
}
body.woocommerce-checkout .wc-block-components-main.wc-block-checkout__main{
order:0 !important;
}
/* Wyrównanie tytułu „Zamówienie": 24px nad i pod */
.moon-checkout-wrap .page-head{padding:24px 0 0 19px !important}
}
/* --- Responsive: ≤640px → tighter spacing --- */
@media (max-width:640px){
body.woocommerce-checkout .wc-block-components-checkout-step{
padding:18px 16px;
}
body.woocommerce-checkout .wc-block-checkout__sidebar{
padding:0;
}
}
/* --- Usunięcie domyślnych marginesów Woo które psują layout --- */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-main{
padding:0;margin:0;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block{
padding:0;margin:0;
}
/* --- Woo form → wyzeruj globalne style Woo --- */
body.woocommerce-checkout .wc-block-checkout__form{
font-family:var(--font-sans);
}
/* --- "Dodaj nr mieszkania" link --- */
body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle{
font-size:12px;color:var(--t3);
text-decoration:underline;text-underline-offset:3px;
cursor:pointer;
}
body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle:hover{
color:var(--t1);
}
/* Na mobile: ukryj natywny Woo "Kupuję i płacę" (mamy mobile-bar) */
@media (max-width:768px){
body.woocommerce-checkout .wc-block-checkout__actions{
display:none !important;
}
/* Terms na mobile — przesuń nad mobile-bar */
body.woocommerce-checkout .wc-block-checkout__terms{
margin-bottom:16px;
}
}
/* Woo order summary collapsed (mobile top) — match checkout card style */
@media (max-width:768px){
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title{
background:#fff !important;border:1px solid var(--b2) !important;border-radius:12px !important;
padding:16px 18px !important;margin:0 0 16px !important;min-height:48px;
cursor:pointer;display:flex !important;align-items:center !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title:active{
background:var(--bg2) !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title svg{
color:var(--t1) !important;
}
}
/* SSL info pod przyciskiem (desktop) */
body.woocommerce-checkout .wc-block-checkout__actions_row{
flex-direction:column;gap:14px;
}
/* Spacing fix: sekcja terms/actions poza kartami */
body.woocommerce-checkout .wc-block-checkout__terms,
body.woocommerce-checkout .wc-block-checkout__actions,
body.woocommerce-checkout .wc-block-checkout__order-notes{
font-family:var(--font-sans);
}
/* =========================================================
CHECKOUT — Etap 5.2d-4: Szacowana data dostawy
========================================================= */
body.woocommerce-checkout .moon-delivery-hint{
display:flex;align-items:center;gap:6px;
font-size:12px;font-weight:400;color:var(--t3);
margin-top:6px;
}
body.woocommerce-checkout .moon-delivery-hint svg{
color:var(--t3);flex-shrink:0;
}
/* --- Furgonetka: wybrany punkt odbioru --- */
body.woocommerce-checkout .furgonetka-pickup-point-info,
body.woocommerce-checkout .furgonetka-pickup-point-info *,
body.woocommerce-checkout [class*="furgonetka"] .pickup-point-name,
body.woocommerce-checkout [class*="furgonetka"] .pickup-point-address{
font-family:var(--font-sans) !important;font-size:14px !important;color:var(--t2) !important;line-height:1.5 !important;
}
/* Invoice checkbox — zawsze widoczny za shipping block */
body.woocommerce-checkout .moon-inv-wrap{
margin:0 0 16px;padding:0;
}
body.woocommerce-checkout .moon-inv-wrap em{
font-style:italic;color:var(--t3);font-weight:400;
}
/* Invoice layout — grid 2-kolumnowy w stanie C */
body.woocommerce-checkout .moon-inv-active{
display:grid;grid-template-columns:1fr 1fr;gap:0 12px;
}
body.woocommerce-checkout .moon-inv-header{
grid-column:1 / -1;
font-family:var(--font-sans);font-size:12px;font-weight:500;
letter-spacing:.16em;color:#8B7E68;
text-transform:uppercase;
padding:0 0 4px;margin:0;
}
body.woocommerce-checkout .moon-inv-active .moon-gus-btn{
align-self:end;margin:0;padding:0 18px;
height:50px;
width:100%;box-sizing:border-box;
}
@media(max-width:640px){
body.woocommerce-checkout .moon-inv-active{
grid-template-columns:1fr;
}
}
/* Checkout: wspólny styl przycisku drugorzędnego (obrysowany brass) */
body.woocommerce-checkout .moon-btn-secondary,
body.woocommerce-checkout .moon-gus-btn,
body.woocommerce-checkout .furgonetka-wc-blocks-pickup-point-block-button-container .wc-block-components-button{
display:inline-flex !important;align-items:center;gap:6px;
margin-top:10px;padding:9px 18px !important;
font-family:var(--font-sans) !important;font-size:13px !important;font-weight:500 !important;
color:var(--gold) !important;background:transparent !important;
border:2px solid var(--gold) !important;border-radius:6px !important;
cursor:pointer !important;transition:background 160ms var(--ease),color 160ms var(--ease) !important;
width:auto !important;line-height:1.3 !important;
}
body.woocommerce-checkout .moon-btn-secondary:hover,
body.woocommerce-checkout .moon-gus-btn:hover,
body.woocommerce-checkout .furgonetka-wc-blocks-pickup-point-block-button-container .wc-block-components-button:hover{
background:var(--gold) !important;color:#fff !important;
}
body.woocommerce-checkout .moon-gus-btn{
margin-top:16px;
}
body.woocommerce-checkout .moon-gus-btn:disabled{
opacity:.5;cursor:wait;
}
body.woocommerce-checkout .moon-gus-hint{
display:block;margin-top:8px;
font-family:var(--font-sans);font-size:13px;line-height:1.4;
color:var(--t3);
}
/* Furgonetka: etykieta wybranego punktu */
body.woocommerce-checkout .furgonetka-wc-blocks-pickup-point-block-label{
font-family:var(--font-sans) !important;font-size:13px !important;color:var(--t2) !important;line-height:1.5 !important;margin-top:8px !important;
}
/* =========================================================
THANK-YOU PAGE — Etap 5.2c: confirm hero + grid + timeline
Klasy 1:1 z makietą MOON_potwierdzenie_1to1.html.
Scoped pod .moon-ui.
========================================================= */
/* kill gap between header and confirm-hero (same fix as woocommerce-account auth-split) */
.wp-site-blocks:has(.confirm-hero){gap:0!important}
.wp-site-blocks>.wp-block-template-part+.wp-block-group:has(.confirm-hero){margin-block-start:0!important}
.wp-site-blocks>.wp-block-group:has(.confirm-hero)+.wp-block-template-part{margin-block-start:0!important}
/* Hero — ciemne tło espresso */
.moon-ui .confirm-hero{
background:var(--t1);color:var(--bg);text-align:center;
padding:72px 24px 64px;
}
.moon-ui .confirm-check{
width:72px;height:72px;border-radius:999px;
background:var(--gold);
display:flex;align-items:center;justify-content:center;
margin:0 auto 24px;
}
.moon-ui .confirm-check svg{width:36px;height:36px;color:#fff}
.moon-ui .confirm-check--pending{background:#C9A84C}
.moon-ui .confirm-check--pending svg{width:32px;height:32px;color:#fff}
.moon-ui .confirm-hero h1{
font-family:var(--font-display) !important;font-weight:500;
font-variation-settings:'opsz' 96,'SOFT' 0;
font-size:38px;color:var(--bg) !important;margin-bottom:14px;
line-height:1.1;letter-spacing:-0.02em;
}
.moon-ui .confirm-hero p{
color:rgba(251,248,241,.7);font-size:15px;
max-width:480px;margin:0 auto;line-height:1.65;
}
.moon-ui .order-pill{
display:inline-block;background:var(--gold-soft);color:#5A4322;
font-weight:600;font-size:13px;padding:7px 16px;
border-radius:999px;margin-top:20px;letter-spacing:0.04em;
}
/* Grid 2-kolumnowy — produkty/adres + timeline/CTA */
.moon-ui .confirm-grid{
display:block;padding:48px 0 80px;
}
.vo-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.vo-bottom-grid > .info-card{margin-bottom:0}
.vo-section-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);font-weight:600;margin:0 0 6px;padding-top:12px;border-top:0.5px solid var(--b2)}
.vo-section-label:first-child{border-top:none;padding-top:0}
.vo-grand-total{font-family:var(--font-display);font-size:22px;font-weight:500;font-variation-settings:'opsz' 32}
/* Info cards — białe karty */
.moon-ui .info-card{
background:#fff;border:1px solid var(--b2);border-radius:12px;
padding:24px;margin-bottom:16px;
}
.moon-ui .info-card h2,.moon-ui .info-card h3{
font-family:var(--font-sans);font-size:14px;font-weight:600;
margin-bottom:14px;color:var(--t1);
}
/* Timeline statusu */
.moon-ui .timeline{display:flex;flex-direction:column;gap:0}
.moon-ui .tl-step{display:flex;gap:14px;padding-bottom:20px;position:relative}
.moon-ui .tl-step:not(:last-child)::before{
content:'';position:absolute;left:9px;top:22px;bottom:0;
width:1px;background:var(--b2);
}
.moon-ui .tl-dot{
width:18px;height:18px;border-radius:999px;
border:2px solid var(--star-empty);flex-shrink:0;
background:var(--bg);z-index:1;
}
.moon-ui .tl-step.done .tl-dot{background:var(--gold);border-color:var(--gold)}
.moon-ui .tl-step.active .tl-dot{border-color:var(--gold);box-shadow:inset 0 0 0 3px var(--gold)}
.moon-ui .tl-step.pending .tl-dot{border-color:#C9A84C;background:rgba(201,168,76,.15);animation:tl-pulse 2s infinite}
@keyframes tl-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.moon-ui .tl-txt{font-size:13px}
.moon-ui .tl-txt .tl-t{font-weight:600;color:var(--t1)}
.moon-ui .tl-txt .tl-s{color:var(--t3);margin-top:2px}
/* Cart item w info-card (produkty zamówienia) */
.moon-ui .info-card .cart-item{
display:grid;gap:14px;align-items:center;
}
.moon-ui .info-card .ci-title{font-size:14px;font-weight:600;color:var(--t1)}
.moon-ui .info-card .ci-cat{font-size:12px;color:var(--t3);margin-top:2px}
.moon-ui .info-card .ci-price{font-size:14px;font-weight:600;color:var(--t1);text-align:right;font-variant-numeric:tabular-nums}
/* Sum rows w info-card */
.moon-ui .info-card .sum-row{
display:flex;justify-content:space-between;font-size:13px;
color:var(--t2);margin-bottom:10px;
}
.moon-ui .info-card .sum-total{
display:flex;justify-content:space-between;font-size:17px;
font-weight:600;color:var(--t1);padding-top:14px;
border-top:1px solid var(--b2);margin-top:6px;
font-variant-numeric:tabular-nums;
}
/* Ukryj Woo bloki na thank-you — wszystkie dane w naszym shortcode hero */
.moon-confirm-details{display:none !important}
/* Tab bar WRACA na thank-you — tylko mobile (desktop chowa linia 2171) */
@media(max-width:768px){
body.woocommerce-order-received .tabbar{display:flex !important}
}
/* Responsive — mobile */
@media (max-width:768px){
.moon-ui .confirm-hero{padding:56px 16px 48px}
.moon-ui .confirm-hero h1{font-size:28px}
.moon-ui .confirm-grid{padding:32px 0 60px}
.vo-bottom-grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
.moon-ui .confirm-hero h1{font-size:24px}
.moon-ui .info-card .cart-item{grid-template-columns:56px 1fr auto}
}
/* =========================================================
THANK YOU — sekcja "załóż konto" (gość)
========================================================= */
.moon-ty-account{
margin-top:24px;
border:2px solid var(--gold);
border-radius:12px;
padding:28px 24px;
background:var(--bg);
}
.moon-ty-account.moon-ty-done{
border-color:var(--success,#16a34a);
}
.moon-ty-header{text-align:center;margin-bottom:20px}
.moon-ty-header h3{
font-family:var(--font-display);
font-size:20px;
font-weight:600;
color:var(--t1);
margin:0 0 8px;
}
.moon-ty-header p{
font-size:14px;
color:var(--t2);
margin:0;
line-height:1.6;
}
.moon-ty-points-badge{
display:inline-block;
background:var(--gold);
color:#fff;
font-size:14px;
font-weight:700;
padding:4px 14px;
border-radius:20px;
margin-bottom:12px;
letter-spacing:0.02em;
}
.moon-ty-perks{margin-bottom:20px}
.moon-ty-perks ul{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:8px;
}
.moon-ty-perks li{
display:flex;
align-items:center;
gap:8px;
font-size:13.5px;
color:var(--t2);
}
.moon-ty-perks li svg{
flex-shrink:0;
color:var(--gold);
}
.moon-ty-field{margin-bottom:14px}
.moon-ty-field label{
display:block;
font-size:13px;
font-weight:500;
color:var(--t2);
margin-bottom:4px;
}
.moon-ty-field label small{
font-weight:400;
color:var(--t3);
}
.moon-ty-input{
width:100%;
box-sizing:border-box;
padding:10px 14px;
border:1px solid var(--b1,#d1cdc7);
border-radius:6px;
background:var(--bg);
font-size:14px;
color:var(--t1);
font-family:var(--font-sans);
transition:border-color .2s var(--ease);
}
.moon-ty-input:focus{
outline:none;
border-color:var(--gold);
box-shadow:0 0 0 2px rgba(139,111,71,.15);
}
.moon-ty-input[readonly]{
background:var(--b3,#f0ece5);
color:var(--t3);
cursor:default;
}
.moon-ty-account .moon-consent{
margin:0 0 16px;
font-size:13px;
line-height:1.5;
color:var(--t2);
}
.moon-ty-account .moon-consent label{
display:flex;
align-items:flex-start;
gap:8px;
font-weight:400;
color:var(--t2);
}
.moon-ty-account .moon-consent input[type="checkbox"]{
margin-top:2px;
flex-shrink:0;
accent-color:var(--gold);
}
.moon-ty-account .btn-gold{
margin-top:4px;
}
.moon-ty-login-note{
font-size:14px;
color:var(--t2);
margin:0 0 16px;
text-align:center;
line-height:1.5;
}
.moon-ty-msg{
display:none;
margin-bottom:12px;
font-size:13.5px;
font-weight:500;
text-align:center;
padding:10px 14px;
border-radius:6px;
line-height:1.5;
}
.moon-ty-msg-error{
background:var(--alert-error-bg);
color:var(--alert-error-text);
border:1px solid var(--alert-error-border);
}
.moon-ty-msg-ok{
background:var(--alert-success-bg);
color:var(--alert-success-text);
border:1px solid var(--alert-success-border);
}
.moon-ty-field-error{
display:none;
font-size:13px;
color:var(--alert-error-accent);
background:var(--alert-error-bg);
border:1px solid var(--alert-error-border);
border-radius:6px;
padding:8px 12px;
margin-top:6px;
}
.moon-ty-input-error{border-color:var(--alert-error-accent)!important}
.moon-consent-error input[type=checkbox]{outline:2px solid var(--alert-error-accent);outline-offset:2px}
.moon-ty-success{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
padding:12px 0;
}
.moon-ty-success p{
font-size:15px;
font-weight:500;
color:var(--t1);
text-align:center;
}
@media (max-width:640px){
.moon-ty-account{padding:20px 16px}
.moon-ty-header h3{font-size:18px}
}
/* =========================================================
STRONY INFORMACYJNE — Kontakt, Dostawa, FAQ, Zwroty
========================================================= */
/* --- Contact channels --- */
.moon-ui .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:8px 0 72px}
.moon-ui .channel{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--b3)}
.moon-ui .channel .ch-ico{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.moon-ui .channel .ch-t{font-size:13px;font-weight:600}
.moon-ui .channel .ch-v{font-size:14px;color:var(--gold-dark);margin-top:2px}
.moon-ui .channel .ch-s{font-size:12px;color:var(--t3);margin-top:2px}
/* --- Accordion (FAQ / info pages) --- */
.moon-ui .acc-item{border-bottom:1px solid var(--b1)}
.moon-ui .acc-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--t1)}
.moon-ui .acc-q .acc-ico{color:var(--gold);flex-shrink:0;transition:transform 160ms var(--ease)}
.moon-ui .acc-a{font-size:13px;color:var(--t2);line-height:1.7;padding:0 0 18px;display:none}
.moon-ui .acc-item.open .acc-a{display:block}
.moon-ui .acc-item.open .acc-ico{transform:rotate(180deg)}
/* Native details/summary accordion (Insider, subskrypcja) */
.moon-ui details.acc-item{border-bottom:1px solid var(--b1)}
.moon-ui details.acc-item summary.acc-q{list-style:none}
.moon-ui details.acc-item summary.acc-q::-webkit-details-marker{display:none}
.moon-ui details.acc-item .acc-a{display:block}
.moon-ui details.acc-item:not([open]) .acc-a{display:none}
.moon-ui details.acc-item[open] .acc-ico{transform:rotate(180deg)}
/* --- Search hero (FAQ page) --- */
.moon-ui .search-hero{background:var(--bg2);padding:48px 0 40px}
.moon-ui .searchbar{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto;background:#fff;border:1.5px solid var(--gold);border-radius:999px;padding:0 8px 0 20px;height:56px;box-shadow:0 0 0 3px rgba(139,111,71,.12)}
.moon-ui .searchbar input{flex:1;border:0;background:none;font-size:15px;height:100%}
.moon-ui .searchbar input:focus{outline:none;box-shadow:0 0 0 3px rgba(139,111,71,.18)}
.moon-ui .searchbar .sb-go{height:42px;padding:0 22px;border-radius:999px;background:var(--gold);color:#fff;font-size:13px;font-weight:500;border:0;cursor:pointer}
/* --- FAQ category cards --- */
.moon-ui .faq-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px}
.moon-ui .faq-cat{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:24px;cursor:pointer;transition:all 200ms var(--ease)}
.moon-ui .faq-cat:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(26,24,21,.06);border-color:var(--border-hover)}
.moon-ui .faq-cat .fc-ico{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.moon-ui .faq-cat h3{font-size:15px;font-weight:600;margin-bottom:4px}
.moon-ui .faq-cat p{font-size:13px;color:var(--t3)}
/* --- Shipping / payment method cards --- */
.moon-ui .ship-method{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--b2);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.moon-ui .ship-method .sm-ico{width:48px;height:48px;border-radius:12px;background:var(--bg2);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.moon-ui .ship-method .sm-t{font-size:14px;font-weight:600}
.moon-ui .ship-method .sm-s{font-size:13px;color:var(--t3);margin-top:2px}
.moon-ui .ship-method .sm-price{margin-left:auto;font-size:15px;font-weight:600;color:var(--success);font-variant-numeric:tabular-nums}
/* --- Delivery/shipping grid (2-col) --- */
.moon-ui .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding-bottom:24px}
/* --- Returns info page steps (legacy, used on /zwroty/ info page) --- */
.moon-ui .ret-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 40px}
.moon-ui .ret-step{text-align:center;padding:20px 14px;background:#fff;border:1px solid var(--b2);border-radius:12px}
.moon-ui .ret-step .rs-num{width:36px;height:36px;border-radius:999px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;font-weight:600;margin:0 auto 12px;font-family:var(--font-display)}
.moon-ui .ret-step .rs-t{font-size:15px;font-weight:600;margin-bottom:4px}
.moon-ui .ret-step .rs-s{font-size:13px;color:var(--t3);line-height:1.5}
/* --- Responsive: info pages --- */
@media (max-width:640px){
.moon-ui .contact-grid{grid-template-columns:1fr;gap:16px;padding-bottom:24px}
.moon-ui .info-grid{grid-template-columns:1fr;gap:24px}
.moon-ui .faq-cats{grid-template-columns:1fr 1fr}
.moon-ui .searchbar{height:50px}
.moon-ui .ret-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:400px){
.moon-ui .faq-cats{grid-template-columns:1fr}
}
/* --- Search: Apollo section (desktop only), popular links (mobile only) --- */
.moon-ui .search-mobile-links{display:none}
@media (max-width:768px){
.moon-ui .search-apollo-section{display:none !important}
.moon-ui .search-mobile-links{display:block}
}
/* --- Search results (scoped) --- */
.moon-ui .result-group{margin-bottom:36px}
.moon-ui .result-group .rg-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--b3)}
.moon-ui .result-group .rg-head h3{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:20px}
.moon-ui .result-group .rg-head .cnt{font-size:12px;color:var(--t3)}
.moon-ui .res-list{display:flex;flex-direction:column;gap:2px}
.moon-ui .res-item{display:flex;gap:14px;align-items:center;padding:14px;border-radius:8px;transition:background 120ms var(--ease);cursor:pointer;text-decoration:none;color:inherit}
.moon-ui .res-item:hover{background:var(--bg-hover)}
.moon-ui .res-item .ri-t{font-size:14px;font-weight:600;color:var(--t1)}
.moon-ui .res-item .ri-s{font-size:12px;color:var(--t3);margin-top:2px}
.moon-ui .res-item .ri-price{margin-left:auto;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:640px){
.moon-ui .res-item .ri-price{margin-left:0}
}
/* =========================================================
CONTACT FORM 7 — override do wyglądu 1:1 z makietą
Scoped: .moon-cf7-wrap
========================================================= */
/* Contact form card — transparent like B2B */
.cb-form .info-card{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}
/* CF7 wraps content in
inside .field — collapse those */
/* CF7 labels — unified standard (same as .field label) */
.moon-cf7-wrap label:not(.consent){display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);margin-bottom:6px}
/* Kill CF7
between label and input (causes 22px extra gap) */
.moon-cf7-wrap p br{display:none}
/* Consent labels stay small/normal (override back) */
.moon-cf7-wrap .consent label,
.moon-cf7-wrap .b2b-consent label{font-size:12px;font-weight:400;letter-spacing:normal;text-transform:none;display:flex;margin-bottom:0}
/* CF7 field spacing —
wrappers act as .field in CF7 */
.moon-cf7-wrap .wpcf7-form>p{margin-bottom:16px}
.moon-cf7-wrap .field p{margin:0}
.moon-cf7-wrap .wpcf7-form-control-wrap{display:block}
/* Inputs, select, textarea — reuse .field styles, force onto CF7 elements */
.moon-cf7-wrap .wpcf7-text,
.moon-cf7-wrap .wpcf7-email,
.moon-cf7-wrap .wpcf7-tel,
.moon-cf7-wrap .wpcf7-select,
.moon-cf7-wrap .wpcf7-textarea{
width:100%;height:46px;padding:0 14px;
border:1px solid var(--b-field);border-radius:8px;
background:#fff;font-size:14px;color:var(--t1);
font-family:var(--font-sans);
transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease);
box-sizing:border-box;
}
.moon-cf7-wrap .wpcf7-textarea{height:auto;padding:12px 14px;line-height:1.6;resize:vertical;min-height:100px}
.moon-cf7-wrap .wpcf7-text:focus,
.moon-cf7-wrap .wpcf7-email:focus,
.moon-cf7-wrap .wpcf7-tel:focus,
.moon-cf7-wrap .wpcf7-select:focus,
.moon-cf7-wrap .wpcf7-textarea:focus{
outline:none;border:1.5px solid var(--gold);
box-shadow:0 0 0 3px rgba(139,111,71,.18);
}
/* Select dropdown arrow */
.moon-cf7-wrap .wpcf7-select{
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256' fill='%236F5836'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;
padding-right:40px;cursor:pointer;
}
/* Consent checkbox — grid: kolumna 1 = checkbox, kolumna 2 = tekst */
.moon-cf7-wrap .consent{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:center;font-size:11px;color:var(--t2);margin:10px 0;cursor:pointer}
.moon-cf7-wrap .consent .wpcf7-acceptance input[type="checkbox"]{
accent-color:var(--gold);width:16px;height:16px;flex-shrink:0;cursor:pointer;
}
.moon-cf7-wrap .consent .wpcf7-list-item{margin:0;list-style:none}
.moon-cf7-wrap .consent a{color:var(--t2);text-decoration:underline;text-underline-offset:3px}
/* Consent validation — tip below entire consent row */
.moon-cf7-wrap .consent .wpcf7-not-valid-tip{grid-column:1/-1;margin-top:2px;font-size:12px}
/* Submit button — already has .btn .btn-gold classes, but ensure CF7 defaults don't override */
.moon-cf7-wrap .wpcf7-submit{
display:flex;align-items:center;justify-content:center;
width:100%;height:48px;margin-top:8px;
border:0;border-radius:6px;cursor:pointer;
font-family:var(--font-sans);font-size:14px !important;font-weight:500;
background:var(--gold) !important;color:#fff !important;
transition:background 160ms var(--ease);
}
.moon-cf7-wrap .wpcf7-submit:hover{background:var(--gold-dark) !important}
/* CF7 spinner */
.moon-cf7-wrap .wpcf7-spinner{margin:8px auto;display:block}
/* Validation error messages — styled in brand (terracotta) */
.moon-cf7-wrap .wpcf7-not-valid{border-color:var(--alert-error-accent) !important;box-shadow:0 0 0 3px rgba(181,101,74,.12) !important}
.moon-cf7-wrap .wpcf7-not-valid-tip{font-size:12px;color:var(--alert-error-accent);margin-top:6px;display:flex;align-items:flex-start;gap:5px}
.moon-cf7-wrap .wpcf7-not-valid-tip::before{content:'';flex-shrink:0;width:14px;height:14px;margin-top:1px;background:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z'/%3E%3C/svg%3E")}
/* Response output (success/error messages) — Warm Atelier */
.moon-cf7-wrap .wpcf7-response-output{
margin:16px 0 0 !important;padding:14px 18px !important;
border-radius:3px 8px 8px 3px !important;font-size:13px;line-height:1.6;
border:1px solid var(--alert-info-border) !important;border-left:3px solid var(--alert-info-accent) !important;
}
.moon-cf7-wrap .wpcf7-form.sent .wpcf7-response-output{
background:var(--alert-success-bg);border-color:var(--alert-success-border) !important;border-left-color:var(--alert-success-accent) !important;color:var(--alert-success-text);
}
.moon-cf7-wrap .wpcf7-form.failed .wpcf7-response-output,
.moon-cf7-wrap .wpcf7-form.aborted .wpcf7-response-output{
background:var(--alert-error-bg);border-color:var(--alert-error-border) !important;border-left-color:var(--alert-error-accent) !important;color:var(--alert-error-text);
}
.moon-cf7-wrap .wpcf7-form.invalid .wpcf7-response-output{
background:var(--alert-warn-bg);border-color:var(--alert-warn-border) !important;border-left-color:var(--alert-warn-accent) !important;color:var(--alert-warn-text);
}
/* Hide CF7 screen-reader-only noise from layout */
.moon-cf7-wrap .screen-reader-response{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}
.moon-cf7-wrap fieldset.hidden-fields-container{display:none}
/* Inline email validation hint */
.moon-cf7-wrap .moon-email-hint{font-size:11px;margin-top:4px;display:block;transition:color 160ms var(--ease)}
.moon-cf7-wrap .moon-email-hint.invalid{color:var(--alert-error-accent)}
.moon-cf7-wrap .moon-email-hint.valid{color:var(--alert-success-accent)}
/* Mobile: field-row stacks to single column */
@media (max-width:640px){
.moon-cf7-wrap .field-row{grid-template-columns:1fr}
}
/* Mobile: consent checkbox wyrównany do pierwszej linii tekstu (nie center całego bloku)
margin-top = (line-height − checkbox) / 2 = (11px×1.6 − 16px) / 2 = 0.8px ≈ 1px */
@media (max-width:768px){
.moon-cf7-wrap .consent{align-items:start}
.moon-cf7-wrap .consent .wpcf7-acceptance input[type="checkbox"]{margin-top:1px}
.b2b-consent label{align-items:start}
.b2b-consent input[type="checkbox"]{margin-top:1px}
}
/* Honeypot — podwójne ukrycie (inline + arkusz) */
#moon_hp_xz7,
[name="moon_hp_xz7"],
label[for="moon_hp_xz7"]{position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;overflow:hidden!important;opacity:0!important}
/* ======================================================================
DLA SALONÓW (B2B) — spójne ze stroną główną / Kontaktem
====================================================================== */
/* ======================================================================
B2B MONOCHROMATYCZNY PREMIUM — Warm Atelier palette
Jedno tło champagne, złoto = jedyny akcent, włoskowe linie, dużo przestrzeni
====================================================================== */
/* Gold hairline between sections — delicate editorial separator */
hr.b2b-hr{border:none;height:0;border-top:1px solid var(--b1);margin:24px auto;max-width:calc(var(--container) - 48px);padding:0;width:calc(100% - 48px);box-sizing:border-box}
/* B2B section padding — generous spacing ("gallery not shop") */
.b2b-hero ~ .sec.sec-pearl{padding:72px 0}
.b2b-quote-sec{padding:56px 0 !important}
/* --- 1. HERO --- */
.b2b-hero{padding:96px 0 72px}
.b2b-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.b2b-hero .lbl{margin-bottom:20px}
.b2b-hero h1{font-family:var(--font-display);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 0;font-size:44px;line-height:1.08;color:var(--t1);margin-bottom:24px;letter-spacing:-0.02em}
.b2b-hero h1 em{font-style:italic;color:var(--gold);font-weight:400}
.b2b-hero .b2b-lead{font-size:15.5px;color:var(--t2);line-height:1.7;margin-bottom:28px}
/* Facts row — 1 line with vertical separators */
.b2b-facts-row{display:flex;align-items:center;gap:0;margin-bottom:32px}
.b2b-fact{display:flex;align-items:center;gap:8px;padding:0 20px;font-size:12px;font-weight:500;color:var(--t1);line-height:1.3}
.b2b-fact:first-child{padding-left:0}
.b2b-fact svg{width:24px;height:24px;color:var(--gold);flex-shrink:0}
.b2b-facts-sep{width:1px;height:28px;background:var(--gold);flex-shrink:0}
/* CTA row */
.b2b-hero-ctas{display:flex;flex-wrap:wrap;gap:36px;align-items:center;margin-bottom:20px}
/* Link CTA — underline gold style */
.b2b-link-cta{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--t1);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;transition:color 160ms var(--ease)}
.b2b-link-cta:hover{color:var(--gold)}
.b2b-link-cta svg{color:var(--gold)}
/* Exclusive note */
.b2b-exclusive-note{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);margin-bottom:28px}
.b2b-exclusive-note svg{width:20px;height:20px;color:var(--gold);flex-shrink:0}
.b2b-hero-img{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:linear-gradient(160deg,#1A1815 0%,#2A2520 40%,#1A1815 100%)}
.b2b-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Image placeholders — minimal */
.b2b-img-ph{width:100%;height:100%;min-height:280px;border-radius:12px;background:var(--bg);border:1px solid rgba(139,111,71,.15);display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.b2b-img-ph span{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);text-align:center;padding:20px}
.b2b-img-ph.small{min-height:160px;border-radius:8px;aspect-ratio:1/1}
/* Shared B2B helpers */
.b2b-sec-sub{font-size:15px;color:var(--t2);line-height:1.7;text-align:center;max-width:560px;margin:0 auto 48px}
/* --- 2. SELEKCJA --- */
.b2b-criteria{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.b2b-crit{background:#fff;border:1px solid rgba(139,111,71,.12);border-radius:8px;padding:32px 24px;text-align:center;box-shadow:0 2px 12px rgba(26,24,21,.04)}
.b2b-crit-ico{width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid rgba(139,111,71,.2);color:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.b2b-crit h3{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:6px}
.b2b-crit p{font-size:13px;color:var(--t2);line-height:1.55}
/* --- 3. QUOTE (hasło) --- */
.b2b-quote-sec{padding:64px 0}
.b2b-quote{font-family:var(--font-display);font-weight:400;font-variation-settings:'opsz' 96,'SOFT' 0;font-size:36px;line-height:1.2;color:var(--t1);text-align:center;max-width:700px;margin:0 auto;letter-spacing:-0.01em}
.b2b-quote em{font-style:italic;color:var(--gold);font-variation-settings:'opsz' 144,'SOFT' 0}
/* --- 4. FILARY --- */
.b2b-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.b2b-pillar{background:#fff;border:1px solid rgba(139,111,71,.12);border-radius:12px;padding:32px 24px;box-shadow:0 2px 12px rgba(26,24,21,.04)}
.bp-ico{width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid rgba(139,111,71,.2);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.b2b-pillar h3{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--t1)}
.b2b-pillar p{font-size:13px;color:var(--t2);line-height:1.6}
/* --- 5. PRODUKTY + ZESTAW --- */
.b2b-prod-grid{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:stretch}
.b2b-prod-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.b2b-prod-card{background:#fff;border:1px solid rgba(139,111,71,.12);border-radius:8px;overflow:hidden;text-align:center;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(26,24,21,.04);transition:box-shadow 200ms var(--ease)}
.b2b-prod-card:hover{box-shadow:0 4px 20px rgba(139,111,71,.08)}
.b2b-prod-card img{width:100%;aspect-ratio:1/1;object-fit:cover;flex:0 0 auto}
.b2b-prod-card h4{font-size:15px;font-weight:600;margin:14px 14px 4px;color:var(--t1);min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center;overflow-wrap:break-word}
.b2b-prod-card p{font-size:13px;color:var(--t2);line-height:1.55;padding:0 14px 18px;flex:1 1 auto}
.b2b-starter{display:flex;flex-direction:column}
.b2b-starter-img{border-radius:12px;overflow:hidden;aspect-ratio:3/4;flex:1 1 auto}
.b2b-starter-img img{width:100%;height:100%;object-fit:cover;display:block}
.b2b-starter-inner{position:relative;border:1px solid rgba(139,111,71,.12);border-radius:8px;padding:32px 24px;text-align:center;box-shadow:0 2px 12px rgba(26,24,21,.04);display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;overflow:hidden;background-color:#F0EAE0;background-size:cover;background-position:center;background-repeat:no-repeat}
.b2b-starter-inner.has-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(240,234,224,.92) 0%,rgba(240,234,224,.55) 100%);border-radius:7px;z-index:0}
.b2b-starter-inner>*{position:relative;z-index:1}
.b2b-badge{display:inline-block;background:var(--gold);color:#fff;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 16px;border-radius:20px;margin-bottom:16px}
.b2b-starter h3{font-family:var(--font-display);font-weight:400;font-variation-settings:'opsz' 48;font-size:20px;color:var(--t1);margin-bottom:12px}
.b2b-kit{font-size:14px;font-weight:500;color:var(--t1);margin-bottom:8px}
.b2b-kit-note{font-size:12.5px;color:var(--t2);line-height:1.55}
.b2b-potential{font-size:12px;color:var(--t3);text-align:center;margin-top:28px;max-width:640px;margin-left:auto;margin-right:auto;line-height:1.65;font-style:italic}
/* --- 6. AUTORYTET MAGDY --- */
.b2b-auth-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.b2b-auth-img{border-radius:12px;overflow:hidden;aspect-ratio:3/4}
.b2b-auth-img img{width:100%;height:100%;object-fit:cover;display:block}
.b2b-auth-text h2{font-family:var(--font-display);font-weight:400;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:26px;color:var(--t1);margin-bottom:18px;line-height:1.15}
.b2b-auth-text h2 em{font-style:italic;color:var(--gold)}
.b2b-auth-text p{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:22px}
.b2b-auth-badges{font-size:13px;color:var(--gold);display:flex;align-items:flex-start;gap:6px;margin-bottom:12px;font-weight:500}
.b2b-auth-badges svg{color:var(--gold);flex-shrink:0}
.b2b-auth-bonus{font-size:13px;color:var(--t2);line-height:1.65;display:flex;align-items:flex-start;gap:6px;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}
.b2b-auth-bonus svg{color:var(--gold);flex-shrink:0;margin-top:2px}
/* --- 7. PROCES --- */
.b2b-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.b2b-steps::before{content:'';position:absolute;top:20px;left:28px;right:28px;height:1px;background:var(--gold)}
.b2b-step{text-align:center;position:relative;z-index:1;padding:0 8px}
.bs-num{width:40px;height:40px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:500;font-size:15px;margin:0 auto 16px}
.b2b-step h3{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:4px}
.b2b-step p{font-size:11.5px;color:var(--t2);line-height:1.55}
/* --- 8. FAQ + FORMULARZ --- */
.b2b-final-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.b2b-final-grid .b2b-form-col{border-left:1px solid var(--b1);padding-left:56px}
.b2b-faq-col .acc-item{border-bottom:1px solid var(--b1)}
.b2b-faq-col .acc-q{padding:18px 0;font-size:14px;font-weight:500;color:var(--t1);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.b2b-faq-col .acc-q .acc-ico{color:var(--t3);flex-shrink:0;transition:transform 200ms var(--ease)}
.b2b-faq-col .acc-item.open .acc-q .acc-ico{transform:rotate(180deg)}
.b2b-faq-col .acc-a{display:none;padding:0 0 18px;font-size:13px;color:var(--t2);line-height:1.65}
.b2b-faq-col .acc-item.open .acc-a{display:block}
.b2b-form-col .info-card{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}
.b2b-form-sub{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:20px}
.b2b-form-note{font-size:12px;color:var(--t3);margin-top:16px}
/* b2b-field — unified with .field (16px gap, labels from .moon-cf7-wrap rule) */
.b2b-field{margin-bottom:16px}
.b2b-field p{margin:0}
.b2b-consent{margin:14px 0 4px}
.b2b-consent label{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--t2);cursor:pointer}
.b2b-consent input[type="checkbox"]{accent-color:var(--gold);width:16px;height:16px;flex-shrink:0;cursor:pointer}
.b2b-consent a{color:var(--t2);text-decoration:underline;text-underline-offset:3px}
/* Responsive B2B */
@media (max-width:768px){
.b2b-hero{padding:64px 0 48px}
.b2b-hero-grid{grid-template-columns:1fr;gap:28px}
.b2b-hero-text{min-width:0}
.b2b-hero-ctas .btn{max-width:100%}
.b2b-hero h1{font-size:32px}
.b2b-hero-img{aspect-ratio:3/4}
.b2b-facts-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.b2b-fact{padding:0;align-items:flex-start}
.b2b-fact svg{flex-shrink:0}
.b2b-facts-sep{display:none}
.b2b-hero ~ .sec.sec-pearl{padding:56px 0}
.b2b-criteria{grid-template-columns:1fr;gap:14px}
.b2b-pillars{grid-template-columns:repeat(2,1fr);gap:14px}
.b2b-prod-grid{grid-template-columns:1fr;gap:24px}
.b2b-prod-cards{grid-template-columns:repeat(3,1fr)}
.b2b-auth-grid{grid-template-columns:1fr;gap:28px}
.b2b-auth-img{max-width:360px;margin:0 auto}
.b2b-steps{grid-template-columns:1fr;gap:0}
.b2b-steps::before{display:none}
.b2b-step{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;text-align:left;padding:14px 0;border-bottom:1px solid var(--gold)}
.b2b-step .bs-num{grid-row:1/3;margin:0;align-self:center}
.b2b-step h3{grid-column:2}
.b2b-step p{grid-column:2}
.b2b-step:last-child{border:0}
.b2b-final-grid{grid-template-columns:1fr;gap:32px}
.b2b-final-grid .b2b-form-col{border-left:none;padding-left:0}
.b2b-quote{font-size:26px}
}
@media (max-width:640px){
.b2b-hero h1{font-size:30px}
.b2b-hero .b2b-lead{font-size:14px}
.b2b-pillars{grid-template-columns:1fr}
.b2b-prod-cards{grid-template-columns:1fr}
.b2b-quote{font-size:22px}
.b2b-faq-col .lbl{font-size:10px}
hr.b2b-hr{width:calc(100% - 32px);max-width:calc(var(--container) - 32px)}
}
/* =========================================================
KONTO — auth-split (template override) + reset hasła
Scoped: body.woocommerce-account
========================================================= */
/* --- page title (WP auto-inject) --- */
body.woocommerce-account .wp-block-post-title{display:none}
/* --- auth-split: break out of ALL WP content wrappers (full-bleed, zero vertical gaps) --- */
body.woocommerce-account .entry-content,
body.woocommerce-account .wp-block-post-content{max-width:none!important;padding:0!important}
body.woocommerce-account .woocommerce:has(.auth-split){max-width:none!important;margin:0!important;padding:0!important}
body.woocommerce-account .woocommerce:has(.auth-split)>.moon-ui{max-width:none!important;margin:0!important;padding:0!important}
/* kill vertical gaps: WP main margin-top + block-gap between template parts */
body.woocommerce-account .wp-site-blocks>.wp-block-group:has(.auth-split){margin-top:0!important;margin-bottom:0!important}
body.woocommerce-account .wp-site-blocks{gap:0!important}
body.woocommerce-account .wp-site-blocks>.wp-block-template-part+.wp-block-group{margin-block-start:0!important}
body.woocommerce-account .wp-site-blocks>.wp-block-group+.wp-block-template-part{margin-block-start:0!important}
/* --- lost-password form (standalone page) --- */
body.woocommerce-account .woocommerce:has(.lost_reset_password){max-width:460px;margin:0 auto;padding:0 16px 60px}
/* --- dashboard: .dash-layout needs container width --- */
body.woocommerce-account .woocommerce:has(.dash-layout){max-width:var(--container);margin:0 auto;padding:0 24px}
body.woocommerce-account .woocommerce:has(.dash-layout) .woocommerce-MyAccount-content{min-width:0;width:100%!important}
.dash-layout .page-head{padding:28px 0 22px}
/* stat-row: always 3 columns like mockup */
.dash-layout .stat-row{grid-template-columns:repeat(3,1fr)}
/* clickable stat-card (link) — pointer + hover */
a.stat-card{cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
a.stat-card:hover{border-color:var(--gold);box-shadow:0 2px 8px rgba(138,111,71,.10)}
/* "wkrótce" card — muted, premium teaser */
.stat-card.stat-soon{opacity:.55;position:relative}
.stat-card.stat-soon .sv{color:var(--t3)}
.stat-card.stat-soon .soon-tag{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-top:6px}
/* hidden placeholder — keeps grid shape */
.stat-card.stat-empty{border-color:transparent;background:transparent;box-shadow:none}
/* "wkrótce" info-card — softer */
.info-card.stat-soon{opacity:.7}
.info-card.stat-soon h3::after{content:' — wkrótce';font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--gold);text-transform:uppercase}
/* ── Edit Account: set-card, pw-eye, pw-reqs, danger-card, dialog ── */
.set-card{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:28px 24px;margin-bottom:16px}
.set-card h3{font-size:15px;font-weight:600;margin-bottom:16px}
.set-actions{display:flex;gap:12px;align-items:center;margin-top:20px}
.field-hint{font-size:11px;color:var(--t3);margin-top:4px;display:block;line-height:1.5}
/* password eye toggle */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px!important}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;padding:0;cursor:pointer;color:var(--t3);transition:color 160ms var(--ease)}
.pw-eye:hover{color:var(--t1)}
/* password strength meter (light bg) */
.pw-meter-wrap{margin-top:8px}
.pw-meter-light{height:4px;border-radius:999px;background:var(--b2);overflow:hidden}
.pw-meter-light .pw-fill-light{height:100%;width:0;border-radius:999px;transition:width 200ms var(--ease),background 200ms var(--ease)}
.pw-strength-label{font-size:11px;color:var(--t3);margin-top:4px;display:block}
/* password requirements */
.pw-reqs{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pw-reqs li{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:8px;transition:color 160ms var(--ease)}
.pw-reqs li.met{color:var(--success,#5A6B3A)}
.pw-req-ico{width:16px;height:16px;border-radius:999px;border:1.5px solid var(--b2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 160ms var(--ease);color:transparent}
.pw-req-ico svg{flex-shrink:0}
.pw-reqs li.met .pw-req-ico{border-color:var(--success,#5A6B3A);background:var(--success,#5A6B3A);color:#fff}
/* danger card */
.danger-card{background:#fff;border:1px solid #E8CCCB;border-radius:12px;padding:28px 24px;margin-top:32px}
.danger-card h3{font-size:15px;font-weight:600;color:var(--t1);margin-bottom:8px}
.danger-card p{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:16px}
.btn-danger{background:transparent!important;border:1.5px solid #B5654A!important;color:#B5654A!important;border-radius:6px;padding:0 20px;height:44px;font-size:13px;font-weight:500;cursor:pointer;transition:all 160ms var(--ease)}
.btn-danger:hover{background:#B5654A!important;color:#fff!important}
/* ── Payment Methods ── */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.pay-method{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:20px;transition:border-color 160ms var(--ease)}
.pay-method:hover{border-color:var(--b1)}
.pay-method.exp{opacity:.55}
.pm-top{display:flex;align-items:center;gap:14px}
.pm-logo{width:52px;height:34px;border:1px solid var(--b2);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--t2);flex-shrink:0}
.pm-details{flex:1;min-width:0}
.pm-num{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--t1)}
.pm-exp{font-size:12px;color:var(--t3);margin-top:2px}
.pm-exp.soon{color:#B8860B}
.pm-exp.dead{color:#B5654A}
.pm-acts{display:flex;gap:16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--b3);font-size:12px}
.pm-acts a{color:var(--t2);text-decoration:underline;text-underline-offset:3px;transition:color 160ms var(--ease)}
.pm-acts a:hover{color:var(--t1)}
.pm-acts .rm:hover{color:#B5654A}
/* empty state */
.pay-empty{text-align:center;padding:48px 24px 40px}
.pay-empty-ico{width:64px;height:64px;border-radius:999px;background:var(--gold-soft,#F5EDE0);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--gold)}
.pay-empty h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:22px;margin-bottom:10px}
.pay-empty p{font-size:14px;color:var(--t2);line-height:1.65;max-width:420px;margin:0 auto}
/* info note */
.pay-note{border-left:3px solid var(--gold);background:var(--gold-soft,#F5EDE0);border-radius:0 10px 10px 0;padding:16px 20px;margin-top:20px}
.pay-note p{font-size:13px;color:#5A4322;line-height:1.65;margin:0}
@media(max-width:640px){.pay-grid{grid-template-columns:1fr}}
/* confirmation dialog */
.moon-dialog{border:0;border-radius:16px;padding:0;box-shadow:0 12px 48px rgba(26,24,21,.18);max-width:420px;width:calc(100% - 32px)}
.moon-dialog::backdrop{background:rgba(26,24,21,.5)}
.moon-dialog-body{padding:32px 28px}
.moon-dialog-body h3{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:22px;margin-bottom:12px}
.moon-dialog-body p{font-size:13.5px;color:var(--t2);line-height:1.65}
/* --- notices — Warm Atelier global (all Woo pages) --- */
body.woocommerce-account .woocommerce-notices-wrapper{max-width:var(--container);margin:0 auto;padding:0 16px}
/* ── shared base ── */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner{
font-family:var(--font-sans)!important;font-size:13px!important;line-height:1.5;
border-radius:3px 8px 8px 3px!important;padding:14px 18px!important;margin-bottom:16px!important;
list-style:none!important;
border-width:1px!important;border-style:solid!important;border-color:#D8C9AC!important;
border-left-width:3px!important;border-left-color:var(--gold)!important;
box-shadow:0 1px 4px rgba(26,24,21,.06)!important;
background:#F3EEE4!important;color:#71603F!important;
outline:none!important;
max-width:720px!important;margin-left:auto!important;margin-right:auto!important;
}
/* notices wrapper — constrain to content width */
.woocommerce-notices-wrapper{max-width:720px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;box-sizing:border-box}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{list-style:none}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content{font-size:13px!important;line-height:1.5}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content strong{font-weight:600}
/* hide Woo default SVG icons in block notices — we rely on border-left accent */
.wc-block-components-notice-banner>svg{display:none!important}
/* ── ERROR — terracotta ── */
.woocommerce-error,
.wc-block-components-notice-banner.is-error{
background:var(--alert-error-bg)!important;border-color:var(--alert-error-border)!important;border-left-color:var(--alert-error-accent)!important;color:var(--alert-error-text)!important;
}
.woocommerce-error strong,.woocommerce-error b,
.wc-block-components-notice-banner.is-error strong,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content strong{color:var(--alert-error-strong)!important}
.woocommerce-error a{color:var(--alert-error-strong)!important;text-decoration:underline;text-underline-offset:2px}
.woocommerce-error a:hover{color:var(--alert-error-accent)!important}
/* ── SUCCESS — sage ── */
.woocommerce-message,
.wc-block-components-notice-banner.is-success{
background:var(--alert-success-bg)!important;border-color:var(--alert-success-border)!important;border-left-color:var(--alert-success-accent)!important;color:var(--alert-success-text)!important;
}
.woocommerce-message strong,.woocommerce-message b,
.wc-block-components-notice-banner.is-success strong,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content strong{color:var(--alert-success-strong)!important}
.woocommerce-message a{color:var(--alert-success-strong)!important;text-decoration:underline;text-underline-offset:2px}
.woocommerce-message a:hover{color:var(--alert-success-accent)!important}
/* Woo adds a dismiss link (.button) inside .woocommerce-message */
.woocommerce-message .button,.woocommerce-message .restore-item{
float:none!important;margin-left:8px;font-size:12px!important;color:var(--alert-success-strong)!important;
background:transparent!important;border:1px solid var(--alert-success-border)!important;border-radius:4px!important;
padding:2px 10px!important;text-decoration:none!important;line-height:1.8;
}
.woocommerce-message .button:hover{background:var(--alert-success-bg)!important}
/* ── INFO — brass/espresso ── */
.woocommerce-info,
.wc-block-components-notice-banner.is-info{
background:var(--alert-info-bg)!important;border-color:var(--alert-info-border)!important;border-left-color:var(--alert-info-accent)!important;color:var(--alert-info-text)!important;
}
.woocommerce-info strong,.woocommerce-info b,
.wc-block-components-notice-banner.is-info strong,
.wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__content strong{color:var(--alert-info-strong)!important}
.woocommerce-info a{color:var(--alert-info-strong)!important;text-decoration:underline;text-underline-offset:2px}
.woocommerce-info a:hover{color:var(--alert-info-accent)!important}
/* Woo dismiss/button in info */
.woocommerce-info .button{
float:none!important;margin-left:8px;font-size:12px!important;color:var(--alert-info-strong)!important;
background:transparent!important;border:1px solid var(--alert-info-border)!important;border-radius:4px!important;
padding:2px 10px!important;text-decoration:none!important;line-height:1.8;
}
.woocommerce-info .button:hover{background:var(--alert-info-bg)!important}
/* ── Block checkout: inline validation errors → terracotta ── */
.wc-block-components-validation-error{color:var(--alert-error-accent)!important}
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input.has-error select{border-color:var(--alert-error-border)!important}
/* ── InPost validation modal → Warm Atelier ── */
#inpost_pl_checkout_validation_modal{background-color:var(--overlay)!important}
#inpost_pl_checkout_validation_modal>div{
background-color:var(--bg)!important;border-radius:12px!important;
box-shadow:0 8px 32px rgba(26,24,21,.18)!important;padding:28px 24px!important;
max-width:340px!important;font-family:var(--font-sans)!important;overflow-wrap:break-word!important;
}
#inpost_pl_checkout_validation_modal>div>div{
font-size:16px!important;font-weight:500!important;color:var(--t1)!important;
margin:16px 0 24px!important;line-height:1.4!important;
}
#inp_pl_close_modal_button{
background-color:var(--gold)!important;border-radius:6px!important;
font-size:14px!important;font-weight:500!important;font-family:var(--font-sans)!important;
padding:10px 28px!important;transition:background-color 160ms var(--ease)!important;
}
#inp_pl_close_modal_button:hover{background-color:var(--gold-dark)!important}
#inp_pl_close_modal_cross{color:var(--t3)!important;font-size:22px!important}
#inp_pl_close_modal_cross:hover{color:var(--t1)!important}
/* ── Stock notices on PDP/shop → Warm Atelier ── */
.stock{font-family:var(--font-sans);font-size:13px;font-weight:500;padding:6px 0;line-height:1.4}
.stock.in-stock{color:var(--success)}
.stock.out-of-stock{color:#B5654A}
.stock.available-on-backorder{color:var(--gold)}
.stock.low-stock{color:var(--warning)}
/* Woo low-stock message on PDP */
.woocommerce-variation-availability .stock,
.product .stock{margin-top:8px}
/* ── Woo classic: kill default ::before icons ── */
.woocommerce-error::before,.woocommerce-message::before,.woocommerce-info::before{display:none!important}
/* ── responsive mobile ── */
@media(max-width:640px){
.woocommerce-error,.woocommerce-message,.woocommerce-info,
.wc-block-components-notice-banner{font-size:12px!important;padding:12px 14px 12px 14px!important}
}
/* --- auth-tabs: hidden on desktop, visible on mobile --- */
.auth-tabs{display:none}
/* --- responsive ≤768px (auth-split + dashboard) --- */
@media (max-width:768px){
.auth-split{grid-template-columns:1fr;min-height:auto;width:100%;margin-left:0}
.auth-pane{padding:32px 24px}
.auth-pane>*{max-width:none}
.auth-pane h2{font-size:24px}
/* --- mobile tabs --- */
.auth-tabs{display:flex;gap:0;margin:0;width:100vw;margin-left:calc(50% - 50vw);border:none;border-radius:0}
.auth-tab{flex:1;padding:13px 0;font-family:var(--font-sans);font-size:14px!important;font-weight:600!important;color:var(--t1);background:transparent!important;border:none;border-radius:0;cursor:pointer;transition:background 160ms var(--ease),color 160ms var(--ease);text-align:center}
.auth-tab+.auth-tab{border-left:1px solid rgba(139,111,71,.35)}
.auth-tab.active{color:#FBF8F1;background:var(--gold)!important}
/* --- tabs: show/hide panes --- */
.auth-pane[data-tab-pane]{display:none}
.auth-pane[data-tab-pane].auth-pane-active{display:flex}
/* --- dark pane → light on mobile (jasne tło, ciemny tekst) --- */
.auth-pane.dark{background:var(--bg)!important;color:var(--t1)!important;padding:32px 24px}
.auth-pane.dark h2{color:var(--t1)!important}
.auth-pane.dark .sub{color:var(--t2)!important}
.auth-pane.dark .field label{color:var(--t2)!important}
.auth-pane.dark .field input.input-text{background:#fff!important;border-color:var(--b2)!important;color:var(--t1)!important}
.auth-pane.dark .field input.input-text::placeholder{color:var(--t3)!important}
.benefits li{color:var(--t1)!important}
.moon-consent label{color:var(--t2)!important}
.pw-meter{background:var(--b3)!important}
.pw-label{color:var(--t3)!important}
.dash-layout{grid-template-columns:1fr;gap:24px;padding:16px 0 60px}
.dash-nav{position:static;padding:0;border:none;background:transparent}
.dash-userhead{padding:14px 0;border-bottom:none;margin-bottom:0}
.dash-avatar{width:40px;height:40px;font-size:15px}
.dash-last-order{flex-direction:column;align-items:stretch;gap:0}
.dash-lo-info{margin-bottom:14px}
.dash-lo-num{flex-wrap:wrap;gap:8px;justify-content:space-between;width:100%}
.dash-last-order>.btn{margin-top:14px;width:100%;text-align:center}
.moon-alert{flex-direction:column;align-items:center}
.moon-alert .ma-content{text-align:center}
.moon-alert .btn{width:auto}
.dash-sub-link{white-space:nowrap}
.moon-ui .dash-nav-trigger{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:var(--bg2) !important;border:1px solid var(--b2) !important;border-radius:10px;font-size:13.5px !important;font-weight:600 !important;color:var(--t1);cursor:pointer;min-height:44px;box-shadow:0 2px 6px rgba(26,24,21,.10)}
.moon-ui .dash-nav-trigger:active{background:var(--b3) !important}
.dash-nav-trigger span{flex:1;text-align:left;line-height:1.3}
.dnt-label{display:block;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:1px}
.dash-nav-trigger svg:first-child{width:16px;height:16px;flex-shrink:0;color:var(--gold-dark);align-self:center}
.dash-nav-chev{transition:transform 200ms var(--ease);color:var(--t1);width:16px;height:16px;flex-shrink:0}
.dash-nav-trigger[aria-expanded="true"] .dash-nav-chev{transform:rotate(180deg)}
.dash-nav-links{display:none;background:#fff;border:1px solid var(--b2);border-radius:10px;margin-top:6px;padding:6px;overflow:hidden}
.dash-nav-links.open{display:block}
.dash-hero h1{font-size:24px}
.dash-layout .stat-row{grid-template-columns:1fr;gap:12px}
.stat-card.stat-empty{display:none}
body.woocommerce-account .lost_reset_password{padding:24px 20px;margin-top:24px}
body.woocommerce-account .lost_reset_password::before{font-size:24px}
}
/* =========================================================
404 PAGE
========================================================= */
.err-wrap{text-align:center;padding:80px 24px;max-width:520px;margin:0 auto}
.err-code{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 144;font-size:120px;line-height:1;color:var(--gold);letter-spacing:-0.02em}
.err-wrap h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72;font-size:28px;margin:8px 0 12px}
.err-wrap p{color:var(--t2);font-size:14.5px;line-height:1.65;margin-bottom:28px}
.err-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.err-pop{margin-top:40px}
.err-pop .lbl{margin-bottom:14px}
.err-pop-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:13px}
.err-pop-links a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
.err-pop-links a:hover{color:var(--gold)}
@media(max-width:640px){
.err-code{font-size:88px}
.err-wrap h1{font-size:22px}
.err-wrap{padding:60px 20px}
.err-links{flex-direction:column}
.err-links .btn{width:100%}
}
/* =====================================================================
APOLLO INSIDER — zakładka w panelu konta
===================================================================== */
/* Hero (ciemny, gradient) */
.ai-hero{background:linear-gradient(135deg,#1A1815 0%,#2A2520 100%);color:var(--bg);border-radius:12px;padding:28px 28px 24px;margin-bottom:20px}
.ai-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.ai-tier-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:500}
.ai-tier-name{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:28px;margin-top:4px;color:#FBF8F1}
.ai-balance{text-align:right}
.ai-balance-num{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:36px;color:#FBF8F1;line-height:1}
.ai-balance-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,248,241,.5);margin-top:4px}
.ai-progress{margin-bottom:12px}
.ai-progress-bar{height:6px;background:rgba(251,248,241,.12);border-radius:3px;overflow:hidden}
.ai-progress-fill{height:100%;background:var(--gold);border-radius:3px;transition:width 600ms var(--ease)}
.ai-progress-info{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:rgba(251,248,241,.6)}
.ai-progress-info strong{color:#FBF8F1;font-weight:600}
.ai-progress-pct{font-variant-numeric:tabular-nums}
.ai-next-perk{font-size:12px;color:rgba(251,248,241,.5);margin-top:4px}
/* Stat row (3 cols) */
.ai-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.ai-stat{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:18px 16px;text-align:center}
.ai-stat-v{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 32,'SOFT' 0;font-size:24px;color:var(--t1)}
.ai-stat-k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-top:4px}
/* Catalog header */
.ai-catalog{margin:32px 0 0}
.ai-catalog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.ai-catalog-header .lbl-bar{margin:0}
.ai-catalog-notice{font-size:12px;color:var(--t3);margin-bottom:20px}
.ai-section-label{font-size:12px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.04em;margin:20px 0 10px}
/* Rewards grid — 3-kol desktop / 2-kol mobile */
.ai-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ai-reward{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:border-color 160ms var(--ease)}
.ai-reward:hover{border-color:var(--border-hover)}
.ai-reward-locked{opacity:.6}
.ai-reward-img{width:72px;height:72px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg2)}
.ai-reward-img img{width:100%;height:100%;object-fit:cover}
.ai-reward-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--t3)}
.ai-reward-info{min-width:0}
.ai-reward-name{font-size:13px;font-weight:600;color:var(--t1)}
.ai-reward-prices{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.ai-reward-cost{font-size:13px;color:var(--gold-dark);font-weight:700}
.ai-reward-ref{font-size:11px;color:var(--t3)}
.ai-reward-link{display:contents;text-decoration:none;color:inherit}
.ai-reward-link:hover .ai-reward-name{color:var(--gold-dark)}
.ai-reward-action{width:100%}
.ai-reward-action .btn-sm{width:100%}
.ai-reward-missing{font-size:11px;color:var(--t3);white-space:nowrap}
/* Discounts rows */
.ai-discounts{display:flex;flex-direction:column;gap:0}
.ai-discount-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--b3)}
.ai-discount-row:last-child{border-bottom:0}
.ai-discount-locked{opacity:.6}
.ai-discount-info{flex:1;min-width:0}
.ai-discount-value{font-size:14px;font-weight:600;color:var(--t1)}
.ai-discount-desc{font-size:12px;color:var(--t2);margin-left:6px}
.ai-discount-cost{font-size:13px;font-weight:700;color:var(--gold-dark);white-space:nowrap}
.ai-discount-action{flex-shrink:0}
/* My Rewards (active coupons) */
.ai-my-rewards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ai-my-reward{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.ai-my-reward-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-my-reward-name{font-size:14px;font-weight:600;color:var(--t1)}
.ai-my-reward-hint{font-size:12px;color:var(--t2);line-height:1.4}
.ai-my-reward-code-row{display:flex;align-items:center;gap:8px}
.ai-my-reward-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:600;color:var(--gold-dark);background:var(--bg2);border:1px dashed var(--b2);border-radius:6px;padding:6px 10px;letter-spacing:.04em}
.ai-my-reward-code-row .btn-sm{flex-shrink:0}
.ai-copy-code{cursor:pointer}
.ai-copy-code:hover{color:var(--gold-dark)}
.ai-my-reward-expiry{font-size:11px;color:var(--t3)}
/* Perks */
.ai-perks{display:flex;flex-direction:column;gap:0}
.ai-perk{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--b3)}
.ai-perk:last-child{border-bottom:0}
.ai-perk-locked{opacity:.5}
.ai-perk-ico{width:40px;height:40px;border-radius:10px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-perk-info{flex:1;min-width:0}
.ai-perk-name{font-size:14px;font-weight:600;color:var(--t1)}
.ai-perk-desc{font-size:12px;color:var(--t3);margin-top:2px}
/* Tier table */
.ai-tier-table{background:#fff;border:1px solid var(--b2);border-radius:12px;overflow:hidden}
.ai-tier-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:14px 18px;border-bottom:1px solid var(--b3);font-size:13px;color:var(--t2);align-items:center}
.ai-tier-row:last-child{border-bottom:0}
.ai-tier-current{background:var(--gold-soft);font-weight:600;color:var(--t1)}
.ai-tr-name{display:flex;align-items:center;gap:8px;font-weight:600}
.ai-tr-you{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:rgba(139,111,71,.12);padding:2px 7px;border-radius:999px}
.ai-tr-range{text-align:center;font-variant-numeric:tabular-nums}
.ai-tr-mult{text-align:right;font-weight:600;color:var(--gold-dark)}
/* Earn cards */
.ai-earn{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ai-earn-card{background:#fff;border:1px solid var(--b2);border-radius:12px;padding:22px 18px}
.ai-earn-pts{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:28px;color:var(--gold);margin-bottom:10px}
.ai-earn-card h3{font-size:14px;font-weight:600;margin-bottom:6px}
.ai-earn-card p{font-size:12.5px;color:var(--t2);line-height:1.55;margin:0}
/* History */
/* Birthday box */
.ai-bday{display:flex;gap:16px;align-items:flex-start;border-radius:12px;padding:20px;margin-bottom:20px}
.ai-bday-setup{background:var(--bg2);border:1px solid var(--b2)}
.ai-bday-active{background:linear-gradient(135deg,#F5EDE0 0%,#E8D9BE 100%);border:1px solid var(--gold)}
.ai-bday-done{background:#E9EFE0;border:1px solid #C5D9B0}
.ai-bday-ico{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-bday-done .ai-bday-ico{background:#D4E8C4;color:var(--success)}
.ai-bday-title{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:4px}
.ai-bday-desc{font-size:13px;color:var(--t2);line-height:1.55}
.ai-bday-desc a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
.ai-bday-gifts{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ai-bday-gift{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--b2);border-radius:8px;padding:10px 14px}
.ai-bday-gift img{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}
.ai-bday-gift-name{flex:1;font-size:13px;font-weight:600;color:var(--t1)}
/* History */
.ai-history{background:#fff;border:1px solid var(--b2);border-radius:12px;overflow:hidden}
.ai-hist-entry{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--b3);gap:16px}
.ai-hist-entry:last-child{border-bottom:0}
details.ai-hist-entry{display:block;cursor:pointer}
details.ai-hist-entry>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none}
details.ai-hist-entry>summary::-webkit-details-marker{display:none}
.ai-hist-left{min-width:0;flex:1}
.ai-hist-type{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.ai-hist-desc{font-size:13px;color:var(--t2);margin-top:2px;overflow-wrap:break-word}
.ai-hist-right{flex-shrink:0;display:flex;align-items:center;gap:16px}
.ai-hist-amt{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;min-width:66px;text-align:right;color:var(--t1)}
.ai-hist-pts{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.ai-hist-pts.positive{color:var(--success)}
.ai-hist-pts.negative{color:var(--error)}
.ai-hist-right .sbadge{flex-shrink:0}
.ai-hist-date{font-size:11px;color:var(--t3);margin-top:2px}
@media(max-width:640px){
.moon-partner-counters{grid-template-columns:repeat(2,1fr)!important}
}
/* ====== HISTORIA: link "wszystkie (N)" ====== */
.hist-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}
.hist-head .lbl-bar{margin:0}
.hist-all-link{font-size:12px;font-weight:500;color:var(--gold);text-decoration:none;white-space:nowrap}
.hist-all-link:hover{text-decoration:underline}
/* ====== HISTORIA: strona z pełną listą ====== */
.hist-page-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gold);text-decoration:none;margin-bottom:16px}
.hist-page-back:hover{text-decoration:underline}
.hist-page-title{font-family:var(--font-display);font-size:28px;font-weight:600;color:var(--t1);margin:0 0 20px}
.hist-summary{font-size:14px;color:var(--t2);margin:0 0 16px}
/* ====== PILL FILTERS ====== */
.hist-pills{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.hist-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:5px 10px;border-radius:999px;border:1px solid var(--b2);background:var(--surface);color:var(--t2);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.hist-pill:hover{border-color:var(--b1);color:var(--t1)}
.hist-pill[aria-pressed="true"]{background:var(--bg2);color:var(--t1);border-color:var(--bg2)}
.hist-pill-count{font-size:10px;font-weight:400;color:var(--t3)}
/* ====== MONTHLY GROUP HEADER ====== */
.hist-month{margin:20px 0 12px}
.hist-month:first-child{margin-top:0}
.hist-month .lbl-bar{font-size:11px;letter-spacing:.12em}
/* ====== MUTED / CANCELLED ENTRIES ====== */
.ai-hist-entry.muted{opacity:.65}
.ai-hist-entry.muted .ai-hist-amt{color:var(--t3)}
.ai-hist-entry.muted .ai-hist-pts{color:var(--t3)}
/* ====== SBADGE ERR (rejected/cancelled — brakował) ====== */
.sbadge.err{background:#F2DAD5;color:#B5654A}
/* ====== PAGINATION ====== */
.hist-pager{display:flex;justify-content:space-between;align-items:center;margin:20px 0 0;font-size:13px;color:var(--t3)}
.hist-pager-info{font-size:12px}
.hist-pager-links{display:flex;gap:4px;align-items:center}
.hist-pager-links a,.hist-pager-links span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border-radius:6px;font-size:12px;font-weight:500;text-decoration:none;border:1px solid var(--b2);color:var(--t2);background:var(--surface);transition:background .15s,border-color .15s}
.hist-pager-links a:hover{border-color:var(--b1);color:var(--t1)}
.hist-pager-links .current{background:var(--bg2);color:var(--t1);border-color:var(--bg2);font-weight:600}
.hist-pager-links .dots{border:0;background:transparent;min-width:auto;padding:0 4px}
/* ====== ARIA-LIVE REGION (visually hidden, announced) ====== */
.hist-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* ====== MOBILE RESPONSIVE (history pages) ====== */
@media(max-width:640px){
.hist-page-title{font-size:22px}
.hist-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
.hist-pills::-webkit-scrollbar{display:none}
.hist-pill{flex-shrink:0}
.ai-hist-entry{flex-wrap:wrap}
.ai-hist-left{flex:1 1 100%;order:1}
.ai-hist-right{order:2;width:100%;justify-content:flex-start;margin-top:6px}
.hist-pager{flex-direction:column;gap:8px;align-items:center}
.hist-pager-links .page-num{display:none}
.hist-pager-compact{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2)}
}
@media(min-width:641px){
.hist-pager-compact{display:none}
.ai-hist-entry{flex-wrap:nowrap}
}
@media(max-width:640px){
.ai-hero-top{flex-direction:column;gap:12px}
.ai-balance{text-align:left}
.ai-stats{grid-template-columns:1fr;gap:10px}
.ai-rewards{grid-template-columns:1fr 1fr}
.ai-my-rewards{grid-template-columns:1fr}
.ai-discount-desc{display:block;margin-left:0;margin-top:2px}
.ai-earn{grid-template-columns:1fr;gap:10px}
.ai-tier-row{grid-template-columns:1fr 1fr;gap:4px}
.ai-tr-mult{text-align:left;grid-column:1/-1;font-size:12px}
.ai-hero{padding:22px 20px 18px}
.ai-tier-name{font-size:24px}
.ai-balance-num{font-size:28px}
}
/* =========================================================
SUBSCRIPTIONS — PDP toggle, pill na kartach, panel konta
========================================================= */
/* Pill na kartach — style w glownej sekcji .card-product (nie duplikowac) */
/* --- PDP: radio toggle "kup jednorazowo / subskrybuj" --- */
.sub-toggle {
display: flex; flex-direction: column; gap: 0;
border: 1px solid var(--b2); border-radius: 10px;
overflow: hidden; margin-top: 12px;
}
.sub-radio {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; cursor: pointer;
border-bottom: 1px solid var(--b2);
transition: background .15s var(--ease);
}
.sub-radio:last-child { border-bottom: 0; }
.sub-radio:hover { background: var(--bg-hover); }
.sub-radio input { display: none; }
.sub-radio-dot {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--b1); flex-shrink: 0;
position: relative; transition: border-color .15s var(--ease);
}
.sub-radio-dot::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--gold); transform: scale(0);
transition: transform .15s var(--ease);
}
.sub-radio-active .sub-radio-dot { border-color: var(--gold); }
.sub-radio-active .sub-radio-dot::after { transform: scale(1); }
.sub-radio-active { background: rgba(139,111,71,0.04); }
.sub-radio-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sub-radio-label { font-size: 14px; font-weight: 600; color: var(--t1); }
.sub-radio-price {
font-family: var(--font-sans); font-variant-numeric: tabular-nums;
font-size: 15px; font-weight: 600; color: var(--t1); flex-shrink: 0;
}
.sub-radio-price-sub { color: var(--gold-dark); }
.sub-cycle-row { display: flex; align-items: center; gap: 8px; }
.sub-cycle-select {
height: 32px; padding: 0 10px; border: 1px solid var(--b2);
border-radius: 6px; background: var(--bg); font-size: 12px;
color: var(--t2); cursor: pointer;
}
.sub-cycle-select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
/* --- Panel konta: karta subskrypcji (dziedziczy .info-card: biała + b2 border + 12px) --- */
/* Anulowana karta — stonowane dane + akcje wznowienia */
.moon-sub-card-cancelled .moon-sub-name,
.moon-sub-card-cancelled .moon-sub-meta { opacity: .55; }
.moon-sub-cancelled-actions { margin-top: 20px; }
.moon-sub-cancelled-msg { font-size: 14px; color: var(--t2); margin-bottom: 16px; }
.moon-sub-cancelled-btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media(max-width:640px){
.moon-sub-cancelled-btns { flex-direction: column; }
.moon-sub-cancelled-btns .btn { width: 100%; text-align: center; justify-content: center; }
}
.moon-sub-header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; flex-wrap: wrap;
}
.moon-sub-name {
font-family: var(--font-display); font-size: 20px;
font-variation-settings: 'opsz' 48; margin: 6px 0;
}
.moon-sub-meta { font-size: 13px; color: var(--t2); }
.moon-sub-options { margin-top: 24px; }
.moon-sub-options .lbl-bar { margin-bottom: 16px; }
/* Opcje (Pomiń / Wstrzymaj / Zmień) — białe karty z b2 border */
.sub-opt {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; background: #fff; border: 1px solid var(--b2);
border-radius: 12px; padding: 18px 22px; margin-bottom: 12px;
}
.sub-opt .so-l { display: flex; gap: 14px; align-items: center; }
.sub-opt .so-ico {
width: 42px; height: 42px; border-radius: 999px;
background: var(--bg2); display: flex; align-items: center;
justify-content: center; color: var(--gold); flex-shrink: 0;
}
.sub-opt .so-t { font-size: 14px; font-weight: 600; }
.sub-opt .so-s { font-size: 12px; color: var(--t3); margin-top: 2px; }
.sub-opt .btn { height: 38px; padding: 0 16px; flex-shrink: 0; }
/* Box "Chcesz zrezygnować?" — delikatne beżowe tło (sand) */
.moon-sub-cancel-box {
margin-top: 24px; text-align: center;
background: var(--bg); border: 1px solid var(--b2); border-radius: 12px;
padding: 28px 24px;
}
.moon-sub-cancel-ico {
width: 48px; height: 48px; border-radius: 50%;
background: var(--bg2); display: flex; align-items: center;
justify-content: center; color: var(--gold); margin: 0 auto 14px;
}
.moon-sub-cancel-box h3 { margin-bottom: 8px; }
.moon-sub-cancel-box p {
font-size: 13.5px; color: var(--t2); max-width: 440px;
margin: 0 auto 18px; line-height: 1.6;
}
/* Status pills */
.pill-warn {
background: rgba(176,122,26,0.1); color: var(--warning);
font-size: 11px; font-weight: 600; padding: 4px 10px;
border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
}
.pill-muted {
background: var(--bg2); color: var(--t3);
font-size: 11px; font-weight: 600; padding: 4px 10px;
border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
}
/* Ghost button (anuluj — ramka b1, transparent bg) */
.moon-ui .btn-ghost, .btn-ghost {
background: transparent; border: 1px solid var(--b1); color: var(--t2);
padding: 10px 24px; border-radius: 6px; font-size: 13px;
font-weight: 500; cursor: pointer; transition: all .15s var(--ease);
text-decoration: none;
}
.btn-ghost:hover { border-color: var(--t1); color: var(--t1); }
/* Subscription cycle select in account panel */
.moon-sub-cycle-select {
height: 38px; padding: 0 12px; border: 1px solid var(--b2);
border-radius: 6px; background: var(--bg); font-size: 13px;
color: var(--t1); cursor: pointer;
}
.moon-sub-cycle-select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
/* --- Responsive --- */
@media(max-width:640px){
.moon-sub-card { padding: 18px 16px; }
.sub-opt { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
.sub-opt .btn, .sub-opt .moon-sub-cycle-select { align-self: stretch; width: 100%; text-align: center; }
.moon-sub-cancel-box { padding: 20px 16px; }
.sub-radio { padding: 12px 14px; }
.sub-radio-price { font-size: 14px; }
}
/* =========================================================
DIAGNOZA WLOSOW — quiz + wynik adaptacyjny
========================================================= */
/* --- Intro --- */
.dq-intro{max-width:520px;margin:0 auto;padding:80px 0 100px;text-align:center}
.dq-intro-ico{width:64px;height:64px;border-radius:999px;background:var(--gold-soft);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;margin-bottom:24px}
.dq-intro h1{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72,'SOFT' 0;font-size:36px;margin-bottom:12px}
.dq-intro p{font-size:15px;color:var(--t2);line-height:1.65;margin-bottom:28px;max-width:420px;margin-left:auto;margin-right:auto}
.dq-privacy-note{font-size:12px;color:var(--t3);margin-bottom:24px}
/* --- Quiz wrap (z makiety) --- */
.quiz-wrap{max-width:680px;margin:0 auto;padding:40px 0 80px;display:none}
.quiz-wrap.active{display:block}
.quiz-progress{height:4px;background:var(--b2);border-radius:999px;margin-bottom:12px;overflow:hidden}
.quiz-progress .qp-fill{height:100%;background:var(--gold);border-radius:999px;transition:width 300ms var(--ease)}
.quiz-step-label{text-align:center;font-size:12px;color:var(--t3);margin-bottom:24px}
.quiz-q{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72;font-size:28px;text-align:center;margin-bottom:8px}
.quiz-sub{text-align:center;color:var(--t2);font-size:14px;margin-bottom:28px}
.quiz-opts{display:grid;grid-template-columns:1fr;gap:12px}
.quiz-opt{border:1.5px solid var(--b1);border-radius:12px;padding:20px;cursor:pointer;transition:all 140ms var(--ease);display:flex;gap:14px;align-items:center;background:none;text-align:left;width:100%;font:inherit;color:inherit}
.quiz-opt:hover{border-color:var(--border-hover)}
.quiz-opt.active{border-color:var(--gold);background:var(--gold-soft)}
.quiz-opt .qo-ico{width:40px;height:40px;border-radius:999px;background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.quiz-opt.active .qo-ico{background:var(--gold);color:#fff}
.quiz-opt > span:last-child{display:flex;flex-direction:column;gap:2px;text-align:left}
.quiz-opt .qo-t{display:block;font-size:14px;font-weight:600;line-height:1.25}
.quiz-opt .qo-s{display:block;font-size:12px;color:var(--t3);line-height:1.4}
.quiz-nav{display:flex;justify-content:space-between;margin-top:28px}
.quiz-nav .btn{min-width:120px}
/* --- Wynik --- */
.dq-result{max-width:800px;margin:0 auto;padding:40px 0 80px;display:none}
.dq-result.active{display:block}
.dq-result-head{text-align:center;margin-bottom:40px}
.dq-result-head h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 72;font-size:32px;margin-bottom:8px}
.dq-result-head p{font-size:14px;color:var(--t2);max-width:480px;margin:0 auto}
/* Uzasadnienie */
.dq-reason{background:var(--bg2);border-radius:12px;padding:24px;margin-bottom:32px}
.dq-reason h3{font-size:15px;font-weight:600;margin-bottom:10px}
.dq-reason p{font-size:13.5px;color:var(--t2);line-height:1.65}
/* Grid produktow wyniku */
.dq-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:32px}
/* Karta zestawu (wariant B/C) */
.dq-set-card{background:#fff;border:1.5px solid var(--gold);border-radius:16px;padding:28px 24px;position:relative;box-shadow:0 8px 32px rgba(139,111,71,.1);margin-bottom:32px}
.dq-set-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.dq-set-name{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:24px;text-align:center;margin-top:8px;margin-bottom:4px}
.dq-set-prices{text-align:center;margin-bottom:20px}
.dq-set-prices .dq-old{font-size:14px;color:var(--t3);text-decoration:line-through;margin-right:8px}
.dq-set-prices .dq-new{font-family:var(--font-display);font-weight:500;font-size:28px;color:var(--gold-dark)}
/* Mini kafelki produktow w zestawie */
.dq-set-items{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.dq-set-item{background:var(--bg);border:1px solid var(--b2);border-radius:10px;padding:12px;text-align:center}
.dq-set-item img{width:60px;height:60px;object-fit:cover;border-radius:8px;margin:0 auto 8px}
.dq-set-item .dsi-name{font-size:12px;font-weight:600;line-height:1.3}
.dq-set-item .dsi-cap{font-size:11px;color:var(--t3)}
.dq-set-cta{display:flex;flex-direction:column;gap:10px;align-items:center}
.dq-set-cta .btn{min-width:260px}
/* Furtka osobno */
.dq-solo-toggle{text-align:center;margin-top:20px;font-size:13px;color:var(--t2)}
.dq-solo-toggle a{color:var(--gold-dark);text-decoration:underline;cursor:pointer}
.dq-solo-products{display:none;margin-top:24px}
.dq-solo-products.active{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
/* CTA pod produktami */
.dq-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.dq-actions .btn{min-width:200px}
/* Restart */
.dq-restart{text-align:center;margin-top:32px}
.dq-restart a{font-size:13px;color:var(--t3);text-decoration:underline;cursor:pointer}
.dq-restart a:hover{color:var(--gold-dark)}
/* Prosta karta produktu w wyniku */
.dq-prod-card{background:#fff;border:1px solid var(--b2);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.dq-prod-img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--bg2)}
.dq-prod-img img{width:100%;height:100%;object-fit:cover}
.dq-prod-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.dq-prod-name{font-size:14px;font-weight:600;line-height:1.3}
.dq-prod-name:hover{color:var(--gold-dark)}
.dq-prod-price{font-size:14px;color:var(--t2)}
.dq-prod-btn{margin-top:auto}
/* --- Responsive --- */
@media(max-width:640px){
.dq-intro{padding:48px 0 64px}
.dq-intro h1{font-size:28px}
.quiz-opts{grid-template-columns:1fr}
.quiz-q{font-size:22px}
.dq-result-head h2{font-size:26px}
.dq-set-items{grid-template-columns:1fr}
.dq-products{grid-template-columns:1fr}
.dq-solo-products.active{grid-template-columns:1fr}
.dq-set-card{padding:20px 16px}
.dq-actions{flex-direction:column;align-items:stretch}
.dq-actions .btn{min-width:0;width:100%}
}
/* =========================================================
LOOKBOOK — galeria metamorfoz przed/po
Mobile-first: 1 kolumna → 2 (768px) → 3 (1024px)
========================================================= */
.moon-ui .lb-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.moon-ui .lb-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(min-width:1024px){.moon-ui .lb-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.moon-ui .lb-card{background:#fff;border:1px solid var(--b2);border-radius:12px;overflow:hidden;transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
.moon-ui .lb-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(26,24,21,.06)}
/* Ramka przed/po */
.moon-ui .lb-ba{position:relative;aspect-ratio:4/5;overflow:hidden}
.moon-ui .lb-ba .img-ph{position:absolute;inset:0;border-radius:0}
.moon-ui .lb-ba-split{display:grid;grid-template-columns:1fr 1fr;height:100%}
.moon-ui .lb-ba-half{overflow:hidden;position:relative}
.moon-ui .lb-ba-half img{width:100%;height:100%;object-fit:cover;display:block}
/* Divider + tagi */
.moon-ui .lb-ba .lb-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--bg);box-shadow:0 0 0 1px rgba(26,24,21,.1);z-index:2}
.moon-ui .lb-ba .lb-tag{position:absolute;bottom:12px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;font-weight:500;z-index:3}
.moon-ui .lb-ba .lb-tag.before{left:12px;background:rgba(26,24,21,.85);color:var(--bg)}
.moon-ui .lb-ba .lb-tag.after{right:12px;background:var(--gold);color:#fff}
/* Karta info */
.moon-ui .lb-info{padding:16px;display:flex;flex-direction:column;gap:6px}
.moon-ui .lb-quote{font-family:var(--font-display);font-style:italic;font-weight:400;font-variation-settings:'opsz' 48,'SOFT' 30;font-size:14px;line-height:1.5;color:var(--t2)}
.moon-ui .lb-name{font-size:14px;font-weight:600;color:var(--t1)}
.moon-ui .lb-meta{font-size:12px;color:var(--t3)}
.moon-ui .lb-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
/* CTA końcowe */
.moon-ui .lb-cta{text-align:center;padding:32px 0 56px}
.moon-ui .lb-cta h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:24px;margin-bottom:8px}
.moon-ui .lb-cta p{color:var(--t2);margin-bottom:22px;font-size:14.5px;line-height:1.6;max-width:480px;margin-inline:auto}
/* Pusty stan — elegancki placeholder */
.moon-ui .lb-empty{text-align:center;padding:32px 24px 28px;color:var(--t2);font-size:14.5px;line-height:1.6}
.moon-ui .lb-empty svg{display:inline-block}
.moon-ui .lb-empty h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48,'SOFT' 0;font-size:22px;color:var(--t1);margin-bottom:10px}
.moon-ui .lb-empty p{max-width:440px;margin-inline:auto}
/* Mobile ≤640 — mniejsze paddingi */
@media(max-width:640px){
.moon-ui .lb-cta{padding:28px 0 48px}
.moon-ui .lb-cta h2{font-size:22px}
.moon-ui .lb-info{padding:14px}
.moon-ui .lb-quote{font-size:13px}
}
/* =========================================================
STRONY PRAWNE — legal-layout + TOC + legal-body
Dosłownie z makiety MOON_regulamin_1to1.html
========================================================= */
.moon-ui .legal-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;padding:24px 0 80px}
.moon-ui .toc{position:sticky;top:84px;font-size:13px}
.moon-ui .toc h4{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
.moon-ui .toc a{display:block;padding:7px 0 7px 14px;color:var(--t2);border-left:2px solid var(--b2);transition:all 120ms var(--ease)}
.moon-ui .toc a:hover{color:var(--t1);border-left-color:var(--b1)}
.moon-ui .toc a.active{color:var(--gold-dark);border-left-color:var(--gold);font-weight:600}
.moon-ui .legal-body h2{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 48;font-size:22px;margin:32px 0 12px;scroll-margin-top:90px}
.moon-ui .legal-body h2:first-child{margin-top:0}
.moon-ui .legal-body h3{font-size:16px;font-weight:600;margin:24px 0 8px}
.moon-ui .legal-body p{font-size:14px;color:var(--t2);line-height:1.75;margin-bottom:14px}
.moon-ui .legal-body ul,.moon-ui .legal-body ol{margin:0 0 14px 20px;font-size:14px;color:var(--t2);line-height:1.7}
.moon-ui .legal-body li{margin-bottom:4px}
.moon-ui .legal-body a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
.moon-ui .legal-body a:hover{color:var(--gold)}
.moon-ui .legal-body strong{color:var(--t1)}
.moon-ui .legal-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.moon-ui .legal-body th,.moon-ui .legal-body td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--b3)}
.moon-ui .legal-body th{background:var(--bg2);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
/* Responsive tables — mobile */
@media(max-width:640px){
/* Common: block layout for all legal tables */
.moon-ui .legal-body table,.moon-ui .legal-body thead,.moon-ui .legal-body tbody,.moon-ui .legal-body tr,.moon-ui .legal-body th,.moon-ui .legal-body td{display:block}
.moon-ui .legal-body thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* 3+ columns: rows with first-col as header */
.moon-ui .legal-body .moon-table--multi tr{padding:12px 0;border-bottom:0.5px solid var(--b3)}
.moon-ui .legal-body .moon-table--multi tbody tr:last-child,.moon-ui .legal-body .moon-table--multi tr:last-child{border-bottom:0}
.moon-ui .legal-body .moon-table--multi td{border:0;padding:0;font-size:13px;line-height:1.6;color:var(--t2)}
.moon-ui .legal-body .moon-table--multi td:first-child{color:var(--t1);font-weight:500;margin-bottom:4px}
.moon-ui .legal-body .moon-table--multi td + td{margin-top:6px}
.moon-ui .legal-body .moon-table--multi td[data-label]::before{content:attr(data-label);display:block;font-weight:600;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:2px}
/* 2 columns: definitions — term + explanation stacked */
.moon-ui .legal-body .moon-table--2col tr{padding:10px 0;border-bottom:0.5px solid var(--b3)}
.moon-ui .legal-body .moon-table--2col tr:last-child{border-bottom:0}
.moon-ui .legal-body .moon-table--2col td{padding:0;border:0;font-size:13px;line-height:1.6}
.moon-ui .legal-body .moon-table--2col td:first-child{color:var(--t1);font-weight:500;margin-bottom:2px}
.moon-ui .legal-body .moon-table--2col td:last-child{color:var(--t2)}
}
.moon-ui .legal-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;background:var(--bg2);border-radius:10px;margin-bottom:28px;font-size:13px;color:var(--t2)}
/* Powiązane dokumenty */
.moon-ui .legal-related{margin-top:32px;padding-top:24px;border-top:0.5px solid var(--b2)}
.moon-ui .legal-related .lbl{margin-bottom:14px}
.moon-ui .legal-related-links{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;font-size:13.5px}
.moon-ui .legal-related-links a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--b1);text-underline-offset:3px;width:fit-content}
.moon-ui .legal-related-links a:hover{color:var(--gold-dark);text-decoration-color:var(--gold)}
.moon-ui .legal-cookies-settings{margin-top:14px;padding-top:14px;border-top:0.5px solid var(--b2)}
.moon-ui .legal-cookies-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;font-size:13px;color:var(--t2);cursor:pointer}
.moon-ui .legal-cookies-btn:hover{color:var(--gold-dark)}
.moon-ui .legal-cookies-btn svg{flex-shrink:0}
/* Mobile ≤640 — TOC jako horizontal pills */
@media(max-width:640px){
.moon-ui .legal-layout{grid-template-columns:1fr;gap:24px}
.moon-ui .toc{position:static;display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid var(--b3);padding-bottom:12px}
.moon-ui .toc::-webkit-scrollbar{display:none}
.moon-ui .toc h4{display:none}
.moon-ui .toc a{border-left:0;white-space:nowrap;padding:6px 12px;border:1px solid var(--b2);border-radius:999px;font-size:12px}
.moon-ui .toc a.active{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-dark)}
.moon-ui .legal-body h2{font-size:20px;margin:24px 0 10px}
.moon-ui .legal-layout{padding:16px 0 56px}
.moon-ui .legal-related-links{grid-template-columns:1fr}
}
/* ====== A11Y: SKIP-LINK ====== */
.moon-skip-link{
position:absolute;top:-100%;left:16px;
background:var(--gold);color:#fff;
padding:8px 18px;border-radius:6px;
font-size:14px;font-weight:600;
z-index:10000;text-decoration:none;
transition:top .15s ease;
}
.moon-skip-link:focus{top:8px}
/* ====== A11Y: PREFERS-REDUCED-MOTION ====== */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:0.01ms!important;
animation-iteration-count:1!important;
transition-duration:0.01ms!important;
scroll-behavior:auto!important;
}
}
/* ====== A11Y: KONTRAST — brass maly tekst ciemny ====== */
/* Linki/akcenty inline (maly tekst <18pt) — uzywaj --gold-text zamiast --gold */
.nav a{color:var(--gold-text)}
.nav a:hover{color:var(--t1)}
.moon-ui a:not(.btn){color:var(--gold-text)}
.moon-ui .price,.moon-ui .pv-min,.moon-ui .pv-max{color:var(--gold-text)}
.moon-ui .card-product .pprice{color:var(--gold-text)}
/* ====== A11Y: TOUCH TARGETS ≥44px (WCAG 2.5.5) ====== */
/* Obszar klikalny większy, ikona/tekst wizualnie bez zmian */
@media (max-width:768px){
/* Icon buttons (search/cart/user) w mobile header */
.m-header .icon-btn{min-width:44px;min-height:44px;padding:8px;justify-content:center}
/* Wishlist heart on product cards */
.wishbtn{width:44px;height:44px;top:8px;right:8px}
/* Mobile logo — touch area */
.m-logo{display:inline-flex;align-items:center;min-height:44px}
/* "Zobacz wszystkie →" links */
.see-all{display:inline-flex;align-items:center;min-height:44px}
/* Product titles as links — padding gives ≥44px tap area (2.6em≈35px + 10px padding = 45px)
without expanding content area, so max-height:2.6em + line-clamp:2 clip cleanly */
.card-product a.ptitle{padding-block:5px}
/* Breadcrumbs — dopuszczalny wyjątek (nawigacja nawigacyjna, zazwyczaj nie główny
cel interakcji — WCAG 2.5.8 zezwala na wyjątki dla inline linków). Padding dodany
dla wygody ale pełne 44px rozciągnęłoby layout. */
.crumbs a{padding:8px 2px;min-height:36px;display:inline-flex;align-items:center}
}
/* ====== A11Y: INPUT FONT 16px (zapobiega iOS auto-zoom) ====== */
@media (max-width:768px){
.moon-ui input[type="text"],
.moon-ui input[type="email"],
.moon-ui input[type="search"],
.moon-ui input[type="tel"],
.moon-ui input[type="password"],
.moon-ui textarea,
.moon-ui select,
.moon-ui .chip,
body.woocommerce-checkout input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea{
font-size:16px!important;
}
}