/* Self-hosted @font-face declarations for ME LOANA.
 * Source: Google Fonts CSS API (css2), fetched with a Chrome UA so woff2 URLs are returned.
 * Subsets kept: latin + latin-ext (Polish diacritics need latin-ext). Files live in site/fonts/.
 * Cormorant Garamond: 300, 400, 500 upright + 400 italic. Jost: 300, 400, 500, 600.
 */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/jost-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/jost-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jost-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jost-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jost-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jost-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jost-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jost-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   MELOANA - Direction B  ("Editorial Gallery")
   References in genre only: sadh (home), janet&janet (shop), polene (pdp).
   Fonts: Cormorant Garamond (serif accents) + Jost (geometric sans / UI).
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --paper:    #ffffff;  /* white page background (Joanna, 20 Oct; was warm off-white #f5f2ec) */
  --paper-2:  #f5f5f5;  /* light grey boxes: cart summary, checkout, notices */
  --tile:     #ffffff;  /* behind product photos                      */
  --ink:      #191710;  /* near-black warm text                     */
  --ink-soft: #514c40;  /* muted body copy                          */
  --muted:    #938c7d;  /* captions, meta, hairline labels          */
  --line:     #e4e4e4;  /* hairline borders (neutral on white)       */
  --black:    #14130f;  /* footer black                             */
  --sale:     #9a4436;  /* tasteful terracotta for sale price       */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --pad:   clamp(22px, 6vw, 120px);   /* generous text-section side padding */
}

/* ---- Reset / base ------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  font-size: 15px;
  overflow-x: hidden;   /* never allow horizontal page scroll */
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* small uppercase label used everywhere (nav, captions, eyebrows) */
.eyebrow,
.nav a,
.nav-cart,
.nav-search,
.caption,
.tab,
.meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 400;
}
.nav-cart, .nav-search { color: inherit; transition: opacity 0.2s; }
.nav-cart:hover, .nav-search:hover { opacity: 0.55; }
/* Szukaj/Koszyk are real <button> elements (form controls need real hit targets), so the UA
   stylesheet gives them their own padding/border/font-family and centred text - reset that back
   to plain inline text matching the <a> links around them. ".nav button" (a class + a type
   selector) is more specific than the ".nav-cart"/".nav-search" classes above, so its "font:
   inherit" would otherwise win the cascade and undo their 11px/uppercase eyebrow sizing; the
   line below re-asserts it at matching specificity so the look is unchanged. */
.nav button { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; letter-spacing: inherit; text-transform: inherit; line-height: inherit; }
.nav .nav-cart, .nav .nav-search, .nav .nav-toggle { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 400; }

/* editorial serif display */
.display { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: 0.01em; }

/* the MELOANA wordmark = letter-spaced Jost, kept consistent as the "logo" */
.wordmark {
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.34em;
}
/* Her real logo (site/img/meloana-logo.svg) replaces the typed wordmark. Sized in em so every
   header keeps its own scale from the font-size rules below; the SVG is black, like the ink. */
.wordmark img { display: block; height: 0.8em; width: auto; }
/* The shop, product and footer headers set a small font-size for the old typed wordmark, which
   made the logo 18px tall; her own site shows it at about 30px, so those get a fixed height. */
.header--shop .wordmark img,
.header--pdp .wordmark img,
.footer--quiet .q-brand .wordmark img { height: 28px; }
.header--pdp .wordmark img { margin: 0 auto; }

/* ---- Shared: newsletter form + inline thank-you ------------------------- */
.news-form { display: flex; align-items: flex-end; gap: 0; max-width: 420px; }
.news-form input {
  flex: 1;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 8px 4px;
  outline: none;
}
.news-form input::placeholder { color: currentColor; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; }
.news-form button {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 8px 4px 8px 18px;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.news-msg { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 12px; }
.news-msg[hidden] { display: none; }
.news-msg.is-error { color: var(--sale); }
/* GDPR consent line under every leads form (Orbit newsletter contract - B's own demo form had no
   checkbox, so this is a required functional addition, kept in B's quiet visual language). */
.news-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; max-width: 420px; font-size: 10.5px; line-height: 1.6; color: var(--muted); text-transform: none; letter-spacing: 0.02em; }
.news-consent input { margin-top: 3px; accent-color: var(--ink); }
.news-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   HEADER (three variants share tokens)
   ========================================================================== */
.site-header { width: 100%; z-index: 50; }

/* -- Home header: overlay on hero, links LEFT, logo CENTRED, icons RIGHT -- */
.header--home {
  position: absolute; top: 0; left: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 30px var(--pad);
  color: var(--ink);                 /* solid black over the light hero */
}
/* explicit cells: on phones the left links hide and Menu takes cell 1 */
.header--home .nav-left { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 24px; }
.header--home .wordmark { grid-column: 2; grid-row: 1; }
.header--home .nav-right { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.header--home .nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
.nav-search--icon { display: inline-flex; align-items: center; }
.nav-search--icon svg { display: block; }
.header--home .wordmark { font-size: clamp(24px, 3vw, 42px); font-weight: 500; letter-spacing: 0.36em; }

/* -- Shop header: promo bar + wordmark LEFT, links RIGHT ----------------- */
.promo-bar {
  background: var(--black); color: var(--paper);
  text-align: center; padding: 9px 16px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em;
}
.promo-bar a { color: inherit; text-decoration: none; }
.header--shop {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header--shop .wordmark { font-size: 22px; }
.header--shop .nav { display: flex; align-items: center; gap: 26px; }

/* -- PDP header: thin, centered wordmark, tiny links both sides ---------- */
.header--pdp {
  position: sticky; top: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 20px var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header--pdp .nav-left { display: flex; gap: 24px; }
.header--pdp .nav-right { display: flex; gap: 24px; justify-content: flex-end; }
/* Links, text buttons and the 20px icons share one row: centre them, or the plain links
   (O nas) ride higher than the buttons, which centre their own text. */
.header--pdp .nav-left, .header--pdp .nav-right { align-items: center; }
.header--pdp .wordmark { font-size: 21px; text-align: center; }

.nav a { color: inherit; transition: opacity 0.2s; }
.nav a:hover { opacity: 0.55; }

/* mobile nav toggle (hidden on desktop) */
.nav-toggle { display: none; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; }

/* ==========================================================================
   HOME  (sadh genre: gallery, huge negative space)
   ========================================================================== */

/* full-bleed hero photo, near-100vh */
.hero {
  position: relative;
  width: 100%; height: 92vh; min-height: 560px;
  overflow: hidden;
}
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero .hero-tag {
  position: absolute; left: var(--pad); bottom: 34px;
  color: var(--ink);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em;
}

/* full-bleed media block (edge to edge, no side padding) */
.bleed { width: 100%; }
.bleed img { width: 100%; height: clamp(520px, 88vh, 900px); object-fit: cover; }
.bleed--tall img { height: clamp(560px, 96vh, 1000px); }

/* "Zobacz wszystkie" link (home Nowości label): underline grows on hover */
.cs-link { color: var(--ink); position: relative; }
.cs-link::after {
  content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.cs-link:hover::after { transform: scaleX(1); }

/* home trust bar (cms repeater "zaufanie"): delivery / returns / payments, three across */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: clamp(34px,5vh,56px) var(--pad); text-align: center; }   /* the footer's top line follows */
.trust-item { display: flex; flex-direction: column; gap: 6px; }
.trust-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink); }
.trust-text { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .trust { grid-template-columns: 1fr; gap: 18px; } }
/* home Instagram strip under the trust bar (script.js unhides it once Orbit returns posts): 5 square
   tiles across the content width, a swipe row on phones like the related carousel */
/* edge to edge in the master footer, no heading; 3:4 tiles like her Instagram profile grid */
.ig-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.ig-tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
.ig-tile:hover img { opacity: 0.85; }
@media (max-width: 700px) {
  .ig-tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ig-tiles::-webkit-scrollbar { display: none; }
  .ig-tile { flex: 0 0 42%; scroll-snap-align: start; }
}

/* home new-arrivals row: a scroll-snap row of 10 models, 5.5 visible (2.5 on phones), full 2:3 portraits */
.home-new-label { display: flex; align-items: baseline; justify-content: space-between; padding: clamp(50px,8vh,90px) var(--pad) 24px; }
.home-new-label .eyebrow { color: var(--muted); }
.home-new { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.home-new::-webkit-scrollbar { display: none; }
.home-new > a { flex: 0 0 calc(100% / 5.5); scroll-snap-align: start; }
.home-new > a:nth-child(n+11) { display: none; }   /* 24 rendered, 10 shown: script.js drops repeat models first */
@media (max-width: 700px) { .home-new > a { flex-basis: calc(100% / 2.5); } }

/* home top categories (cms repeater "kategorie"): three 2:3 portraits, name under each photo */
.home-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; width: 100%; margin: clamp(50px,8vh,90px) 0; }
/* 4th column: Joanna's brand text in the old About band style, filling its quarter, centred (Joanna, 20 Oct) */
.home-cats-about {
  align-self: center; padding: 0 var(--pad);
  text-align: center; text-transform: uppercase;
  font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.12em; line-height: 1.9; color: var(--ink);
}
.home-cat { display: block; }
.home-cat img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top center; }
.home-cat-label { display: block; padding: 14px 8px 0; text-align: center; color: var(--ink); transition: color 0.2s; }
.home-cat:hover .home-cat-label { color: var(--muted); }
@media (max-width: 700px) {
  .home-cat-label { padding: 10px 8px 0; }
  .home-cats { grid-template-columns: repeat(3, 1fr); }
  .home-cats-about { grid-column: 1 / -1; justify-self: center; text-align: center; max-width: 40ch; padding: 30px var(--pad) 0; }
}

/* PDP related products: horizontal scroll-snap carousel of the shop card component */
.related { padding: clamp(40px,6vh,70px) 0; width: 100%; }
.related-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--pad) 22px; }
.related-head h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; }
.rel-arrows { display: flex; gap: 10px; }
.rel-prev, .rel-next {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 18px; line-height: 1;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rel-prev:hover, .rel-next:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
/* track: edge-to-edge like the other product grids, 4 cards visible on desktop */
.rel-track {
  display: flex; gap: 2px; width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;                 /* Firefox */
}
.rel-track::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.rel-track .card { flex: 0 0 calc((100% - 10px) / 4); scroll-snap-align: start; }
/* text badge variant (bestseller / low stock / new) alongside the existing % badge */
.card .badge--txt { font-size: 10px; }
.os-badge-new { display: none; }   /* no "Nowość" badge (Joanna, 20 Oct); her own labels, low stock, sold out and sale still show */

@media (max-width: 700px) { .rel-track .card { flex: 0 0 calc((100% - 2px) / 2); } }

/* quiet section intro (uppercase eyebrow centered) */
.section-intro { text-align: center; padding: clamp(70px,12vh,150px) var(--pad) 34px; }
.section-intro .eyebrow { color: var(--muted); display: block; margin-bottom: 18px; }
.section-intro h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 56px); line-height: 1.05; }

/* visually hidden, still read by search engines and screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   SHOP  (janet genre: promo bar, sticky tabs, gray-tile grid)
   ========================================================================== */

/* sticky category tab bar */
.cat-bar {
  position: sticky; top: 66px;      /* sits under the sticky header      */
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; row-gap: 10px;   /* desktop: every tab shows and the bar never scrolls sideways, so it sits the same on every page (Joanna, 20 Oct) */
  gap: clamp(14px, 2.4vw, 40px);
  padding: 15px var(--pad);
  overflow-x: auto;                 /* scrolls on mobile, page never does */
  scrollbar-width: none;            /* swipe stays, the bar's scrollbar goes (Firefox) */
}
.cat-bar::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.cat-bar .tab {
  color: var(--muted); white-space: nowrap; padding-bottom: 3px;
  border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.cat-bar .tab:hover { color: var(--ink); }
.cat-bar .tab.active { color: var(--ink); border-color: var(--ink); }
.cat-bar .tab--filter { margin-left: auto; color: var(--ink); }

/* centered page title */
.shop-title { text-align: center; padding: clamp(46px,7vh,86px) var(--pad) clamp(30px,4vh,50px); }
.shop-title h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 60px); line-height: 1; }
.shop-title p { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 16px; }

/* product grid */
.grid {
  display: grid; grid-template-columns: repeat(4, 1fr);   /* 4 across (Joanna, 7 Oct); 2 from 900px down */
  gap: 0;                                    /* edge-to-edge full-width grid, no gaps (Joanna, 20 Oct) */
  padding: 0 0 clamp(50px,7vh,90px);
  max-width: none; margin: 0;
}
.card { display: block; }
.card .card-media {
  position: relative;
  background: var(--tile);
  aspect-ratio: 2 / 3;   /* her product photos are 800x1200 (2:3): the full photo shows, nothing cropped */
  overflow: hidden;
}
.card .card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1), opacity 0.4s;
}
.card:hover .card-media img { transform: scale(1.04); }
/* stacked gallery images: only the .on image shows; JS switches .on by cursor zone (left/right) */
.card .card-media .ci { position: absolute; inset: 0; opacity: 0; }
.card .card-media .ci.on { opacity: 1; }
/* size chips: revealed on hover, centered under the price; sold-out sizes dimmed */
.card .card-sizes { display: flex; justify-content: center; gap: 13px; min-height: 15px; margin-top: 10px; opacity: 0; transition: opacity 0.25s ease; }
.card:hover .card-sizes { opacity: 1; }
.card .card-sizes span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.card .card-sizes span.out,
.card .card-sizes span[data-in-stock="false"] { opacity: 0.28; }
/* struck compare-at price next to the live price; hidden entirely when the field is empty */
.card-compare { margin-left: 8px; color: var(--muted); text-decoration: line-through; }
.card-compare:empty { display: none; }
/* whole-product sold out, driven live by store.js (.os-sold-out on [data-product-card]); the
   "Brak w magazynie" wording comes from the badge below. Full opacity on purpose (Joanna
   1 Nov: no fade, she archives or badges the product herself); beats store.js's .55 baseline */
.card.os-sold-out { opacity: 1; }
/* Badges, filled live by store.js into [data-badges] (Brak w magazynie / Ostatnie sztuki, Sale,
   Nowość). On a card they stack top-left above the stacked .ci gallery images; on the PDP they
   sit inline between the name and the price. */
.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badges:empty { display: none; }
.card .badges { position: absolute; top: 12px; left: 12px; z-index: 2; flex-direction: column; align-items: flex-start; }
.pdp-rail .badges { margin-top: 14px; }
.badge {
  background: var(--black); color: var(--paper);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em;
  padding: 4px 9px;
}
.card .card-body { text-align: center; padding: 16px 8px 4px; }
.card .card-name { font-size: 12px; letter-spacing: 0.06em; color: var(--ink); }
.card .card-price { margin-top: 7px; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft); }
.card .card-price .old { color: var(--muted); text-decoration: line-through; margin-right: 8px; }
.card .card-price .now-sale { color: var(--sale); }
.card.is-hidden { display: none; }

/* pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px var(--pad) clamp(80px,10vh,130px); }
.pager button {
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 12px; color: var(--muted);
  display: grid; place-items: center; transition: color 0.2s, background 0.2s;
}
.pager button.active { background: var(--ink); color: var(--paper); }
.pager button:hover:not(.active) { color: var(--ink); }

/* pre-footer full-bleed campaign photo */
.prefooter-bleed { width: 100%; }
.prefooter-bleed img { width: 100%; height: clamp(420px, 66vh, 720px); object-fit: cover; }

/* -- Giant black footer (janet genre) ----------------------------------- */
.footer--giant { background: var(--black); color: var(--paper); padding: clamp(56px,8vh,90px) var(--pad) 40px; }
.footer--giant .giant-word {
  font-family: var(--sans); font-weight: 600; text-transform: uppercase;
  line-height: 0.84; letter-spacing: -0.03em;
  font-size: clamp(64px, 21vw, 320px);
  color: var(--paper);
}
.footer--giant .giant-word span { display: block; }
.footer--giant .g-cols {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 34px;
  margin-top: clamp(40px,6vh,72px); padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.16);
}
.footer--giant .g-col h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.6; margin-bottom: 16px; font-weight: 500; }
.footer--giant .g-col a, .footer--giant .g-col p { display: block; font-size: 12px; letter-spacing: 0.04em; color: rgba(255,255,255,0.82); margin-bottom: 9px; }
.footer--giant .g-col a:hover { color: #fff; }
.footer--giant .g-news .news-form { color: var(--paper); }
.footer--giant .g-bottom {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 46px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.5);
}

/* ==========================================================================
   PDP  (polene genre: airy, serif, sticky rail)
   ========================================================================== */
.breadcrumb { padding: 22px var(--pad) 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }

.pdp {
  display: grid; grid-template-columns: 1.5fr 1fr;   /* bigger photos, flush to the left edge like meloana.pl (Joanna, 20 Oct) */
  gap: clamp(24px, 4vw, 70px);
  padding: 26px var(--pad) clamp(60px,8vh,110px) 0;
  align-items: start;
}
/* LEFT: tall editorial photo stack */
.pdp-media { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }   /* 2-up photo grid (Ludovic, 7 Oct), no gaps (Joanna, 20 Oct) */
.pdp-media figure { background: var(--tile); overflow: hidden; }
.pdp-media figure:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* odd count (a single photo too): the last item spans both columns, no empty cell; the video counts as an item */
.pdp-media img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.pdp-media .packshot { background: #fff; }
/* product video (script.js appends it as the last figure): same 2:3 frame as the photos */
.pdp-media .pdp-video video { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }   /* same 2:3 cell as the photos in the grid */
.pdp-media .packshot img { padding: clamp(30px,6vw,90px); }

/* gallery lightbox: click a photo to enlarge, click again to 2x zoom at the click point */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,19,15,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 86vh; width: auto; height: auto;
  object-fit: contain; cursor: zoom-in; transition: transform 0.3s ease;
}
.lightbox img.zoomed { transform: scale(2); cursor: zoom-out; }
/* lightbox prev/next arrows + "n / total" counter */
.lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(245,242,236,.4); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; background: rgba(20,19,15,.35);
  transition: border-color 0.2s, background 0.2s;
}
.lightbox .lb-nav:hover { border-color: var(--paper); background: rgba(20,19,15,.65); }
.lightbox .lb-prev { left: 24px; }
.lightbox .lb-next { right: 24px; }
.lightbox .lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(245,242,236,.7); font-size: 11px; letter-spacing: 0.18em; }

/* RIGHT: sticky product rail */
.pdp-rail { position: sticky; top: 96px; align-self: start; }
.pdp-media { grid-column: 1; grid-row: 1; }
.pdp-rail { grid-column: 2; grid-row: 1; }
.pdp-rail .eyebrow { color: var(--muted); }
.pdp-name { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; margin: 0; }
.pdp-price { font-size: 17px; letter-spacing: 0.04em; margin: 22px 0 26px; }
.pdp-compare { margin-left: 10px; color: var(--muted); text-decoration: line-through; font-size: 14px; }
.pdp-compare:empty { display: none; }
/* Omnibus (EU 2019/2161) line - Orbit only fills price_lowest_30d when a reduction is active,
   so an empty <span> is the "not currently discounted" signal (the common case today, since
   the field also stays empty locally until Orbit's PriceHistory backfills it) and the whole
   line disappears, leaving .pdp-price's own 26px gap as the untouched default spacing. When
   visible, pull it up into that gap instead of adding a second one. */
.pdp-omnibus { font-size: 11px; color: var(--muted); margin: -20px 0 20px; }
.pdp-omnibus:has(span:empty) { display: none; }
/* Klarna line under the price (static text), pulled up into the price gap like the Omnibus line */
.pdp-klarna { font-size: 12px; line-height: 1.6; color: var(--ink-soft); margin: -12px 0 24px; }
.pdp-klarna strong { font-weight: 500; color: var(--ink); }
.pdp-klarna a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* title row: h1 left, wishlist heart right (eyebrow + subtitle removed per client) */
.pdp-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 6px; }
.pdp-title-row .pdp-name { flex: 1; }
.pdp-wish { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink); transition: transform 0.2s ease; }
.pdp-wish:hover { transform: scale(1.08); }
.pdp-wish svg { display: block; }
.pdp-wish svg path { transition: fill 0.15s ease; }
/* store.js applies the real .os-active (not B's demo .on) when the product is saved; the
   selector is deliberately more specific than store.js's own injected `[data-wishlist-toggle]
   .os-active{color:#e0245e}` default so the heart stays monochrome ink, matching every other
   accent-free control on this page (B never uses a brand accent colour). */
.pdp-title-row .pdp-wish.os-active { color: var(--ink); }
.pdp-title-row .pdp-wish.os-active svg path { fill: currentColor; }

/* variant / related thumbnails row */
.pdp-thumbs { display: flex; gap: 10px; margin-bottom: 26px; }
.pdp-thumbs button {
  width: 54px; height: 68px; background: var(--tile); overflow: hidden;
  border: 1px solid transparent; transition: border-color 0.2s;
}
.pdp-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs button.active { border-color: var(--ink); }
/* the video's thumb: a small play triangle over its poster frame (also the home Instagram strip's video tiles) */
.pdp-thumbs .pdp-thumb-video { position: relative; }
.pdp-thumbs .pdp-thumb-video::after, .ig-tile--video::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

/* Model note (phone only): "Modelka ma ... cm ... rozmiar ..." pulled from the Wymiary
   accordion by script.js. Base rule keeps it out of the layout on every width - even once
   script.js removes [hidden] after finding a matching sentence - the media query below is the
   only place that shows it, right under the mobile thumb strip. Desktop already has the
   Wymiary accordion, so it never needs this line. */
.pdp-model-note[hidden] { display: none; }
/* Model height + size (petitepants.pl reference), styled as the grid tags (.badge, square).
   It is a grid item sharing the gallery's cell, NOT inside a photo: it stays put while the
   phone gallery swipes, and on desktop sticks 40px above the viewport bottom while the
   photo stack scrolls past, never leaving the gallery column. */
.pdp > .pdp-model-note { grid-column: 1; grid-row: 1; align-self: end; justify-self: end;
  position: sticky; bottom: 40px; margin: 0 40px 40px 0; z-index: 3; pointer-events: none;
  max-width: calc(100% - 80px); }

/* colour swatches: round dots linking the family's colours (Orbit swatches / swatches2), the
   eyebrow reads "Kolor: czarna". A dot with a hex is that colour; without one (prints) it shows
   the product photo. Own dot ringed, a faded dot has no sibling to go to. */
.swatch-row { margin-bottom: 22px; }
.swatch-row:not(:has(.swatch)) { display: none; }
.swatch-row .eyebrow { display: block; color: var(--muted); margin-bottom: 12px; }
.swatch-row .eyebrow span { color: var(--ink); }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--tile);
  box-shadow: inset 0 0 0 1px rgba(25, 23, 16, 0.14); outline: 1px solid transparent; outline-offset: 3px;
  transition: outline-color 0.2s; }
.swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.swatch:not([data-hex=""]) img { display: none; }
.swatch:hover { outline-color: var(--line); }
.swatch[aria-current="page"] { outline-color: var(--ink); }
.swatch[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

/* size pills */
.pdp-sizes { margin-bottom: 24px; }
.pdp-sizes .eyebrow { display: block; color: var(--muted); margin-bottom: 12px; }
/* "Tabela rozmiarów" lives in the sizes row, pushed right, bottom edge flush with the size boxes */
.size-chart-link { margin-left: auto; align-self: flex-end; line-height: 1; padding-bottom: 1px; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
.size-chart-link:hover { color: var(--ink); }
/* A gift card (Lap H): its "sizes" are the card amounts, so no size chart and no model note. */
.pdp-sizes[data-gift-card="true"] .size-chart-link,
.pdp-model-note[data-gift-card="true"] { display: none !important; }
/* Gift card picture + recipient fields (Lap H.1): only on a gift card's page. The picture slot keeps
   its 3:2 shape and stays blank until store.js gives it a src. */
.pdp-gc { display: none; }
.pdp-gc[data-gift-card="true"] { display: flex; flex-direction: column; gap: 14px; margin: 0 0 22px; }
.pdp-gc-preview { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: var(--paper-2); }
.pdp-gc-preview:not([src]) { visibility: hidden; }
.pdp-gc-tick { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--ink); cursor: pointer; }
.pdp-gc-tick input { margin-top: 4px; accent-color: var(--ink); }
.pdp-gc-fields { display: flex; flex-direction: column; gap: 14px; }
.pdp-gc-fields[hidden] { display: none; }
.pdp-gc-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.pdp-gc-input {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: normal;
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 9px 2px; outline: none; transition: border-color 0.2s;
}
.pdp-gc-input:focus { border-color: var(--ink); }
.pdp-gc-message { resize: vertical; min-height: 72px; line-height: 1.6; }
.pdp-gc-count { align-self: flex-end; margin-top: -10px; font-size: 11px; color: var(--muted); }
.pdp-gc-privacy { font-size: 11px; line-height: 1.6; color: var(--muted); }
.pdp-gc-err { font-size: 12px; color: var(--sale); }
.pdp-gc-err:empty { display: none; }
.pdp-sizes .sizes { display: flex; align-items: flex-end; gap: 8px; }
.pdp-sizes .size {
  min-width: 46px; padding: 11px 4px; text-align: center;
  border: 1px solid var(--line); font-size: 12px; letter-spacing: 0.08em;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pdp-sizes .size:hover { border-color: var(--ink); }
/* .is-selected (not B's demo .active) is what script.js's shared [data-variant-select] sync
   helper actually toggles - shared with the card quick-add, see site/script.js. */
.pdp-sizes .size.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pdp-sizes .size:disabled,
.pdp-sizes .size[data-in-stock="false"] {
  text-decoration: line-through; cursor: pointer;   /* clickable: opens the notify form; not faded (Joanna, 20 Oct) */
  border-color: var(--line); color: var(--ink); background: none;
}
.pdp-sizes .size[data-in-stock="false"].is-selected { border-color: var(--ink); color: var(--ink); }
/* no-size shake: store.js shakes the hidden <select> itself (invisible), so relay the
   animation onto the visible button row via :has() - same pattern as meloana-store. The
   @keyframes are store.js's own injected stylesheet (runtime), reused here by name. */
.pdp-sizes:has(select.os-shake) .sizes { animation: os-shake 0.4s; }
.pdp-sizes:has(select.os-shake) .size:not(:disabled) { border-color: var(--ink); }

/* add to cart (dead link, demo) - .btn-solid is the same style reused for other pages'
   generic solid CTAs (dziękujemy, odstąpienie, koszyk P24, 404), kept as a separate class
   so script.js's PDP add-to-cart demo (document.querySelector('.btn-cart')) never targets
   an unrelated button on another page. */
.btn-cart, .btn-solid {
  display: block; width: 100%; text-align: center;
  background: var(--ink); color: var(--paper);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
  padding: 18px; transition: background 0.25s;
}
.btn-cart:hover, .btn-solid:hover { background: #000; }

/* payment method chips, directly under the add-to-cart button (text only, no logos) */
.pay-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pay-marks span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px;
  color: var(--muted);
}

/* ---- sold-out / back-in-stock swap (ported from meloana-store, restyled in B's language) ----
   [data-pdp-buy] wraps the picker+CTA and the BIS form; script.js flips data-in-stock live
   when the stock feed disables every variant, same as the static (always-out) case. */
.pdp-buy[data-in-stock="true"] .pdp-bis { display: none; }
/* whole product sold out: the sizes stay (struck through, still clickable) so the notify form can
   carry the size she wants; only the cart button and the payment marks go */
.pdp-buy[data-in-stock="false"] .btn-cart, .pdp-buy[data-in-stock="false"] .pay-marks { display: none; }
/* one sold-out SIZE picked on an in-stock product (script.js sets data-size-oos): notify form
   for that size instead of add-to-cart, with the size wording of the lead line */
.pdp-buy[data-in-stock="true"][data-size-oos] .pdp-bis { display: flex; }
.pdp-buy[data-size-oos] .btn-cart, .pdp-buy[data-size-oos] .pay-marks { display: none; }
.pdp-bis-lead--size { display: none; }
.pdp-buy[data-in-stock="true"][data-size-oos] .pdp-bis-lead { display: none; }
.pdp-buy[data-in-stock="true"][data-size-oos] .pdp-bis-lead--size { display: block; }
.pdp-bis { display: flex; flex-direction: column; gap: 14px; margin: 0 0 26px; }
.pdp-bis-lead { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.pdp-bis-email {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 9px 2px; outline: none; transition: border-color 0.2s;
}
.pdp-bis-email:focus { border-color: var(--ink); }
.pdp-bis-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.pdp-bis-consent input { margin-top: 3px; accent-color: var(--ink); }
.pdp-bis-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pdp-bis-msg { font-size: 12px; color: var(--ink); }
.pdp-bis-msg.is-error { color: var(--sale); }
.pdp-bis-msg[hidden] { display: none; }
.pdp-bis-success { border: 1px solid var(--line); background: var(--paper-2); padding: 20px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* size chart dialog, opened from the "Tabela rozmiarów" link */
/* size chart = side panel docked right, slides in (native <dialog> in the top layer) */
.size-dialog {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(440px, 92vw); height: 100vh; max-height: 100vh; max-width: none;
  border: none; border-left: 1px solid var(--line); border-radius: 0;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 36px);
  background: var(--paper); color: var(--ink);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s ease, overlay 0.35s ease allow-discrete, display 0.35s ease allow-discrete;
}
.size-dialog[open] { transform: translateX(0); }
@starting-style { .size-dialog[open] { transform: translateX(100%); } }
.size-dialog::backdrop { background: rgba(20,19,15,.82); }
.size-dialog h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin-bottom: 10px; }
.size-dialog-note { color: var(--muted); font-size: 12px; margin-bottom: 20px; }
.size-dialog table { width: 100%; border-collapse: collapse; font-size: 13px; }
.size-dialog th, .size-dialog td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.size-dialog th:first-child, .size-dialog td:first-child { text-align: left; }
.size-dialog thead th { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; color: var(--muted); font-weight: 400; }
/* Dialog body = the product's own chart from Orbit (photo, then HTML text; not a shared table).
   Same prose treatment as the accordion bodies. An unset photo renders src="" and is hidden;
   with no photo and no text the "Tabela rozmiarów" link hides too. */
.size-dialog-body { font-size: 13px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 12px; }
.size-dialog-body .size-chart-img { display: block; width: 100%; height: auto; margin-bottom: 16px; }
.size-dialog-body .size-chart-img[src=""] { display: none; }
.pdp:has(.size-chart-img[src=""]):has(.size-chart-text:empty) .size-chart-link { display: none; }
.size-dialog-body p { margin-bottom: 10px; }
.size-dialog-body strong { color: var(--ink); font-weight: 500; }
.size-dialog-close {
  margin-top: 26px; padding: 12px 22px; border: 1px solid var(--line);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  transition: border-color 0.2s;
}
.size-dialog-close:hover { border-color: var(--ink); }
/* showModal() autofocuses this button, so Chrome paints its default blue ring over the
   dialog on open. Keep a visible focus indicator (a11y) but in the brand ink, not blue. */
.size-dialog-close:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.size-dialog-close:focus:not(:focus-visible) { outline: none; }

.pdp-desc { color: var(--ink-soft); font-size: 14px; line-height: 1.75; margin: 26px 0 4px; }

/* accordions */
.accordion { border-top: 1px solid var(--line); }
.accordion:last-of-type { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .plus { transition: transform 0.3s; font-size: 15px; line-height: 1; }
.accordion[open] summary .plus { transform: rotate(45deg); }
.accordion .acc-body { padding: 0 2px 20px; font-size: 13px; line-height: 1.75; color: var(--ink-soft); }
.accordion .acc-body p { margin-bottom: 10px; }

/* full-bleed lifestyle below columns */
.pdp-lifestyle img { width: 100%; height: clamp(460px, 78vh, 860px); object-fit: cover; }

/* newsletter band (shared, on paper) */
.news-band { text-align: center; padding: clamp(60px,9vh,120px) var(--pad); border-top: 1px solid var(--line); }
.news-band .eyebrow { color: var(--muted); display: block; margin-bottom: 16px; }
.news-band h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,3.2vw,44px); margin-bottom: 26px; }
.news-band .news-form { margin: 0 auto; }
.news-band .news-msg { text-align: center; }
.news-band .news-consent { margin-left: auto; margin-right: auto; text-align: left; }

/* quiet PDP footer columns */
.footer--quiet { border-top: 1px solid var(--line); padding: clamp(50px,7vh,84px) var(--pad) 34px; }
.footer--quiet .q-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.footer--quiet .q-brand .wordmark { font-size: 22px; }
.footer--quiet .q-brand p { color: var(--muted); font-size: 12px; margin-top: 16px; max-width: 26ch; line-height: 1.7; }
.footer--quiet .q-social { display: flex; gap: 18px; margin-top: 18px; }
.footer--quiet .q-social a { display: inline; margin: 0; }
.footer--quiet .q-col h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 16px; font-weight: 500; }
.footer--quiet .q-col a, .footer--quiet .q-col p.line { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 9px; }
.footer--quiet .q-col a:hover { color: var(--ink); }
.footer--quiet .q-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
/* the three legal links, moved here (out of the Obsługa column, which was getting too long
   once /wysylka, /platnosci and /polityka-plikow-cookie joined it). */
.q-legal a:hover { color: var(--ink); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .footer--giant .g-cols { grid-template-columns: 1fr 1fr; }
  .footer--quiet .q-cols { grid-template-columns: 1fr 1fr; }
  .pdp { grid-template-columns: 1fr; padding-left: var(--pad); }   /* phones keep the inset swipe gallery */
  /* min-width: 0 on both grid items: without it, a grid item's automatic minimum width is its
     content's min-content size, so .pdp-thumbs's non-wrapping fixed-width buttons (or
     .pdp-media's figures) would force the WHOLE grid track wider than the viewport instead of
     scrolling internally - a classic flex/grid "won't shrink below content" trap. */
  .pdp-media, .pdp-rail { min-width: 0; }
  .pdp-rail { position: static; margin-top: 8px; display: flex; flex-direction: column; }

  /* Mobile PDP gallery: one big swipeable photo (2:3, like the cards) instead of the vertical
     stack, scroll-snapped one figure per viewport width. The thumb strip moves to right under
     it via flex `order` (no markup move needed - it already lives in .pdp-rail); script.js
     keeps thumb <-> track in sync both ways. Desktop is untouched (no rules here apply above
     900px). */
  .pdp-media {
    display: flex;                       /* desktop is a 2-up grid; phones swipe one photo at a time */
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pdp-media::-webkit-scrollbar { display: none; }
  .pdp-media figure { flex: 0 0 100%; aspect-ratio: 2 / 3; scroll-snap-align: start; scroll-snap-stop: always; }
  .pdp-media img { height: 100%; object-fit: cover; }
  .pdp-media .pdp-video video { height: 100%; object-fit: cover; }   /* phone: fills the 2:3 swipe frame like the photos */

  .pdp-thumbs {
    min-width: 0;
    order: -2;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumbs button { flex-shrink: 0; }

  .pdp-rail { grid-column: 1; grid-row: 2; }
  .pdp > .pdp-model-note { position: static; margin: 0 16px 16px 0; max-width: calc(100% - 32px); }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  /* Phone header (Ludovic 2026-09-24). Every text link and Szukaj live in the Menu overlay.
     Shop + product-style headers: logo LEFT, then Menu, basket, heart on the right. Their navs
     dissolve (display: contents) so the basket and heart become direct flex items of the header
     and can be ordered after the Menu toggle. */
  .site-header .nav a:not(.nav-wish), .nav-search { display: none; }
  .nav-toggle { display: block; }
  .header--shop, .header--pdp { display: flex; align-items: center; gap: 18px; padding: 16px var(--pad); }
  .header--shop .nav, .header--pdp .nav { display: contents; }
  .header--shop .wordmark, .header--pdp .wordmark { order: 0; margin-right: auto; }
  .header--shop .wordmark img, .header--pdp .wordmark img { height: 22px; margin: 0; }
  .header--shop .nav-toggle, .header--pdp .nav-toggle { order: 1; }
  .header--shop .nav-cart, .header--pdp .nav-cart { order: 2; }
  .header--shop .nav-wish, .header--pdp .nav-wish { order: 3; }
  /* Home (Joanna, 26 Sep notes): Menu LEFT, logo CENTRED, basket + heart RIGHT. */
  .header--home { padding: 20px var(--pad); }
  .header--home .nav-left { display: none; }
  .header--home .nav-right { gap: 18px; }
  .header--home .wordmark img { height: 22px; }

  .cat-bar { justify-content: flex-start; flex-wrap: nowrap; top: 55px; }  /* = phone shop header height; one swipe row */
  .cat-bar .tab--filter { position: sticky; right: 0; background: var(--paper); padding-left: 12px; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px 8px; }
  .footer--giant .g-cols { grid-template-columns: 1fr; }
  .footer--quiet .q-cols { grid-template-columns: 1fr 1fr; }
  .footer--giant .g-bottom, .footer--quiet .q-bottom { flex-direction: column; gap: 6px; }
  .hero { height: 78vh; min-height: 460px; }
}

/* very small (390px guard): keep 2-col grid usable, stack pdp */
@media (max-width: 400px) {
  :root { --pad: 18px; }
  .card .card-name, .card .card-price { font-size: 11px; }
}

/* ---- header: wishlist heart + cart, each with a count badge .cnt (hidden at 0) ---- */
.cnt { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 100px; background: var(--ink); color: var(--paper); font-size: 9.5px; font-weight: 500; letter-spacing: 0; line-height: 1; }
.cnt[hidden] { display: none; }
.nav-wish { position: relative; display: inline-flex; align-items: center; }
.nav-wish svg { display: block; }
.nav-wish .cnt { position: absolute; top: -6px; right: -9px; }
/* Koszyk as a basket icon (every header except home): same box and badge corner as the heart. */
.nav-cart--icon { position: relative; display: inline-flex; align-items: center; }
.nav-cart--icon svg { display: block; }
.nav-cart--icon .cnt { position: absolute; top: -6px; right: -9px; }
.nav-cart { display: inline-flex; align-items: center; gap: 6px; }

/* ==========================================================================
   PORTED COMPONENTS (from meloana-store / doselabel-site, restyled in B's
   visual language: paper/ink/muted/line tokens, Jost + Cormorant Garamond,
   no rounded corners, hairline borders, uppercase eyebrow labels).
   ========================================================================== */

/* locks background scroll while any full-screen overlay (search, mobile menu) is open -
   script.js's shared lockScroll() toggles this on <body>. */
body.overlay-open { overflow: hidden; }

/* ---- mobile menu overlay (full-screen, opened by any .nav-toggle "Menu" button) ----
   Minimal B-styled panel: category/utility links only - the client's own mobile batch is
   still pending, this just makes the phone store usable in the meantime. */
.menu-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.menu-overlay[hidden] { display: none; }
.menu-overlay.is-open { opacity: 1; visibility: visible; }
.menu-close {
  position: absolute; top: 18px; right: var(--pad);
  width: 40px; height: 40px; font-size: 28px; line-height: 1;
  color: var(--ink);
}
.menu-close:hover { opacity: 0.6; }
.menu-links { display: flex; flex-direction: column; gap: 2px; padding: clamp(74px,15vh,120px) var(--pad) 10px; overflow-y: auto; }
.menu-links a { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 6vw, 28px); padding: 11px 0; border-bottom: 1px solid var(--line); }
.menu-utility { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px var(--pad) clamp(28px,5vh,46px); border-top: 1px solid var(--line); margin-top: auto; }
.menu-utility a, .menu-utility button { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink); }
.menu-utility a:hover, .menu-utility button:hover { opacity: 0.6; }

/* ---- search overlay (full-screen, live client-side results over /search-index.json) ---- */
.search-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.search-overlay[hidden] { display: none; }
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 26px var(--pad) 20px;
  border-bottom: 1px solid var(--line);
}
.search-input {
  flex: 1; min-width: 0; border: none; background: none;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--ink); padding: 6px 0;
}
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--muted); }
.search-clear, .search-close { background: none; border: none; color: var(--ink); cursor: pointer; }
.search-clear { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.search-clear:hover { color: var(--ink); }
.search-close { width: 40px; height: 40px; font-size: 28px; line-height: 1; }
.search-close:hover { opacity: 0.6; }
.search-body { flex: 1; overflow-y: auto; padding: 28px var(--pad) 60px; }
.search-msg { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 8px; }
.search-results:empty { display: none; }
/* the overlay reuses the shop's own .grid/.card component, so search results already look
   native - no separate card style needed for this surface */

/* ---- generic page head (koszyk / ulubione / konto / dziekujemy) ---- */
.page-head { text-align: center; padding: clamp(56px,8vh,96px) var(--pad) clamp(30px,4vh,40px); }
.page-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.5vw, 54px); line-height: 1.05; }
.page-head .eyebrow { display: block; color: var(--muted); margin-bottom: 14px; }
.page-head p { color: var(--muted); font-size: 13px; margin-top: 14px; max-width: 46ch; margin-left: auto; margin-right: auto; }
.page-head-cta { margin-top: 24px; }
.page-head-cta .btn-solid, .not-found-cta.btn-solid { display: inline-block; width: auto; padding: 15px 30px; }

/* ---- 404 ---- */
.not-found { padding-bottom: clamp(80px,12vh,140px); }
.not-found-copy { color: var(--muted); font-size: 13px; margin: 18px 0 30px; }

/* ==========================================================================
   CART PAGE - store.js renders into [data-cart-page]; everything with an
   os- prefix below is doubled (e.g. .os-cart-row.os-cart-row) because
   store.js injects its own neutral <style> block at runtime, AFTER this
   stylesheet, and would otherwise win every tie on specificity alone.
   ========================================================================== */
.cart-page { padding: 0 var(--pad) clamp(70px,9vh,110px); }
.cart-shell { max-width: 1040px; margin: 0 auto; }

.os-cart-row.os-cart-row { border-bottom: 1px solid var(--line); padding: 22px 0; }
.os-cart-img.os-cart-img { width: 78px; height: 98px; background: var(--tile); }
.os-cart-name.os-cart-name { font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; color: var(--ink); }
.os-cart-variant.os-cart-variant { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.os-cart-line-err.os-cart-line-err { font-size: 11px; color: var(--sale); margin-top: 4px; }
.os-cart-remove.os-cart-remove { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.os-cart-remove.os-cart-remove:hover { color: var(--ink); }
.os-cart-price.os-cart-price { font-family: var(--sans); font-size: 13px; color: var(--ink); }
.os-qty-btn.os-qty-btn { border: 1px solid var(--line); background: none; border-radius: 0; color: var(--ink); }
.os-qty-btn.os-qty-btn:hover { border-color: var(--ink); }
.os-cart-summary.os-cart-summary { background: var(--paper-2); border-radius: 0; padding: 28px; }
.os-cart-subtotal.os-cart-subtotal { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 400; }
.os-cart-note.os-cart-note { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.os-cart-err.os-cart-err { font-size: 11px; color: var(--sale); }
/* "(zawiera X zł VAT)" under the subtotal (cart page and drawer), in the muted caption voice. */
.os-cart-vat.os-cart-vat, .os-vat.os-vat { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
/* Free-shipping bar (drawer, cart page, checkout summary): caption voice, ink on a hairline track. */
.os-free-ship-text.os-free-ship-text { font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); }
.os-free-ship-bar.os-free-ship-bar { height: 3px; border-radius: 0; background: var(--line); }
.os-free-ship-bar.os-free-ship-bar::-webkit-progress-bar { background: var(--line); border-radius: 0; }
.os-free-ship-bar.os-free-ship-bar::-webkit-progress-value { background: var(--ink); border-radius: 0; }
.os-free-ship-bar.os-free-ship-bar::-moz-progress-bar { background: var(--ink); border-radius: 0; }
/* The mini-cart button (.os-checkout-btn) gets the same square look. store.js's own baseline
   is square too now; the radius stays here so the look does not depend on it. */
.os-cart-checkout.os-cart-checkout,
.os-checkout-btn.os-checkout-btn {
  border-radius: 0; background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 16px;
}
.os-cart-checkout.os-cart-checkout:hover,
.os-checkout-btn.os-checkout-btn:hover { background: #000; }
.os-cart-link.os-cart-link { border-radius: 0; border-color: var(--ink); color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; }
.os-cart-empty.os-cart-empty { padding: 80px 0; text-align: center; }
.os-cart-empty-text.os-cart-empty-text { color: var(--muted); font-size: 14px; }
.os-cart-empty-cta.os-cart-empty-cta {
  display: inline-block; margin-top: 20px; border-radius: 0;
  background: var(--ink); color: var(--paper);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; padding: 15px 28px;
}

/* Cart suggestions, "Uzupełnij stylizację" (store.js Lap I): under the lines in the drawer (two
   compact rows) and on the cart page (a grid of four, two on phones). The eyebrow heading, 2:3
   tile pictures and size pills cut like the product page size buttons. Doubled os- selectors for
   the same reason as above. */
.os-sg.os-sg { margin: 28px 0 0; }
.os-sg-title.os-sg-title {
  font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted); margin: 0 0 14px;
}
.os-sg-img.os-sg-img { aspect-ratio: 2 / 3; object-fit: cover; background: var(--tile); }
.os-sg-name.os-sg-name { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: var(--ink); }
.os-sg-name.os-sg-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.os-sg-price.os-sg-price { font-size: 12px; letter-spacing: 0.04em; color: var(--ink); margin: 4px 0 10px; }
.os-sg-compare.os-sg-compare { color: var(--muted); }
.os-sg-sale.os-sg-sale { color: var(--sale); }
.os-sg-sizes.os-sg-sizes { gap: 6px; }
.os-sg-size.os-sg-size,
.os-sg-add.os-sg-add {
  min-width: 38px; padding: 8px 4px; text-align: center; border-radius: 0;
  border: 1px solid var(--line); background: none; color: var(--ink);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.os-sg-add.os-sg-add { padding: 8px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; }
.os-sg-size.os-sg-size:hover,
.os-sg-add.os-sg-add:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.os-sg-drawer .os-sg-card.os-sg-card { padding: 14px 0; border-top: 1px solid var(--line); }
.os-sg-drawer .os-sg-img.os-sg-img { width: 56px; }
.os-sg-page .os-sg-list.os-sg-list { gap: 28px 18px; }

/* Replaces the old Przelewy24 form + note below the cart (Module 8.3 moved both gateways to
   /zamowienie): one quiet line pointing at the next step. Sits under [data-cart-page], so it
   naturally lands under the summary on desktop and under the lines on mobile. */
.cart-next-note { margin-top: 18px; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }

@media (min-width: 860px) {
  .cart-shell { display: grid; grid-template-columns: 1.6fr 0.9fr; column-gap: 56px; row-gap: 20px; align-items: start; }
  .cart-shell > [data-cart-page] { display: contents; }
  .os-cart-grid.os-cart-grid { display: contents; }
  .os-cart-lines.os-cart-lines { grid-column: 1; grid-row: 1 / span 2; }
  .os-cart-summary.os-cart-summary { grid-column: 2; grid-row: 1; }
  .os-cart-empty.os-cart-empty { grid-column: 1 / -1; }
  .cart-next-note { grid-column: 2; grid-row: 2; margin-top: 0; }
}

/* ==========================================================================
   FORMS - withdrawal statement (/odstapienie) + checkout contact/address
   fields (/zamowienie). Same field pattern, B tokens (hairline underline
   inputs).
   ========================================================================== */
.wform { margin-top: 30px; max-width: 480px; }
.wform-field { margin-bottom: 20px; }
.wform-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px; }
.wform-optional { text-transform: none; letter-spacing: 0; }
.wform-input {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 9px 2px; outline: none; transition: border-color 0.2s;
}
.wform-input:focus { border-color: var(--ink); }
.wform-textarea { resize: vertical; min-height: 90px; }
.wform-error { font-size: 12px; color: var(--sale); margin: -8px 0 18px; }
.wform-error[hidden] { display: none; }
.wform .os-field-bad.os-field-bad { border-color: var(--sale); }
.wform-success { max-width: 480px; margin-top: 30px; padding: 26px; background: var(--paper-2); }
.wform-success h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin-bottom: 10px; }
.wform-success p { font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

/* ==========================================================================
   LEGAL PROSE (regulamin / polityka-prywatnosci / zwroty / odstąpienie intro)
   ========================================================================== */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(56px,8vh,96px) var(--pad) clamp(70px,9vh,110px); }
.legal--tight { padding-top: 0; }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px,4vw,48px); margin-bottom: 30px; text-transform: uppercase; letter-spacing: 0.02em; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 34px 0 14px; }
.legal-body, .legal p { color: var(--ink-soft); font-size: 14px; line-height: 1.8; overflow-wrap: break-word; }
.legal-body h2 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 30px 0 12px; }
.legal-body p { margin-bottom: 14px; }
.legal-body ol, .legal-body ul { padding-left: 22px; margin-bottom: 14px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; display: block; overflow-x: auto; }
.legal-body th, .legal-body td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; }
.legal .wform { margin-top: 40px; }
/* /zwroty: "Wypełnij formularz zwrotu" button between the H1 and the legal text, links to the
   online return form (/odstapienie); same auto-width solid button as the page-head CTAs */
.legal-cta { margin: -6px 0 34px; }
.legal-cta .btn-solid { display: inline-block; width: auto; padding: 15px 30px; }

/* ORDER TRACKING (/sledzenie-zamowienia): the .wform fields, then the answer store.js renders
   into [data-order-track-result] (os- rules scoped under .track-result to beat its baseline). */
.track-page { padding: 0 var(--pad) clamp(70px,9vh,110px); }
.track-shell { max-width: 480px; margin: 0 auto; }
.track-shell .wform { margin-top: 0; }
.track-result { margin-top: 30px; padding: 26px; background: var(--paper-2); }
.track-result:empty { display: none; }
.track-result .os-track-facts { gap: 10px 24px; font-size: 13px; color: var(--ink); }
.track-result .os-track-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); padding-top: 2px; }
.track-result .os-track-facts .os-track-status { font-weight: 500; }
.track-result .os-track-facts a { text-decoration: underline; text-underline-offset: 2px; }
.track-result .os-track-msg { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.track-result .os-track-err { color: var(--sale); }

/* ==========================================================================
   ACCOUNT ("konto" - deliberate no-login coming-soon page)
   ========================================================================== */
.account-page { max-width: 480px; margin: 0 auto; padding: 0 var(--pad) clamp(70px,9vh,110px); text-align: center; }
.account-lead { color: var(--ink-soft); font-size: 15px; line-height: 1.8; margin-bottom: 14px; }
.account-note { color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 28px; }
.account-page .news-form { margin: 0 auto; }
.account-page .news-consent { margin-left: auto; margin-right: auto; text-align: left; }
.account-help { margin-top: 26px; font-size: 12px; color: var(--muted); }
.account-help a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   WISHLIST PAGE - store.js renders into [data-wishlist-list] (its own
   .os-empty line has no shop link, so this adds one, shown only while empty).
   ========================================================================== */
.wishlist-page { max-width: 780px; margin: 0 auto; padding: 0 var(--pad) clamp(70px,9vh,110px); }
.os-wl-item.os-wl-item { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.os-wl-img.os-wl-img { width: 64px; height: 80px; background: var(--tile); }
.os-wl-name.os-wl-name { font-size: 13px; color: var(--ink); }
.os-wl-price.os-wl-price { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.os-wl-remove.os-wl-remove { color: var(--muted); font-size: 20px; }
.os-wl-remove.os-wl-remove:hover { color: var(--ink); }
.wishlist-empty-more { display: none; text-align: center; color: var(--muted); font-size: 13px; margin-top: 18px; }
.wishlist-empty-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.wishlist-page:has([data-wishlist-list] .os-empty) .wishlist-empty-more { display: block; }
[data-wishlist-list] .os-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 50px 0 0; }

/* ==========================================================================
   RESPONSIVE (ported components)
   ========================================================================== */
@media (max-width: 560px) {
  .search-bar { padding: 20px var(--pad) 16px; gap: 10px; }
  .wform, .wform-success, .account-page { max-width: none; }
  .os-cart-img.os-cart-img { width: 60px; height: 76px; }
}

/* ===== checkout (/zamowienie) =====
   One form, store.js (Module 8.3) fills every data-os-* host and re-renders the summary +
   methods on every change. Everything os- prefixed below is doubled (e.g. .os-co-row.os-co-row)
   for the same reason as the CART PAGE block above: store.js injects its own neutral <style>
   AFTER this stylesheet and would otherwise win every tie on specificity alone. */
.checkout { padding: 0 var(--pad) clamp(70px,9vh,110px); }
.co { display: grid; gap: 30px; max-width: 1040px; margin: 0 auto; align-items: start; }

.co__title { display: block; padding: 0; border: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 14px; }
.co__block { margin-bottom: 34px; }
.co__block:last-child { margin-bottom: 0; }
/* fieldsets carry the delivery radios and the address; their UA chrome has to go */
.co__methods, .co__addr { border: 0; margin: 0; padding: 0; min-width: 0; }
.co__addr[hidden] { display: none; }
/* .wform caps itself at 480px for the withdrawal form; in a checkout column it takes the width */
.co__fields.wform { margin-top: 0; max-width: none; }
/* post code beside the city: the code is short and the pair reads as one address line */
.co__row { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 14px; }

/* summary: the same panel as the cart summary it continues from */
.co__summary { background: var(--paper-2); border-radius: 0; padding: 22px; }

/* ---- delivery methods: hairline radio cards ---- */
.os-co-method.os-co-method {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; margin-bottom: 10px;
  cursor: pointer; transition: border-color 0.2s;
}
.os-co-method.os-co-method:last-child { margin-bottom: 0; }
.os-co-method.os-co-method input[type="radio"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--ink); }
.os-co-method-on.os-co-method-on { border-color: var(--ink); }
.os-co-method-label.os-co-method-label { flex: 1; min-width: 0; font-family: var(--sans); font-size: 13px; color: var(--ink); }
.os-co-method-free.os-co-method-free { display: block; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-top: 3px; }
.os-co-method-price.os-co-method-price { font-family: var(--sans); font-size: 13px; color: var(--ink); white-space: nowrap; }
.os-co-method-empty.os-co-method-empty { font-size: 12px; letter-spacing: 0.04em; color: var(--sale); }

/* ---- locker (Paczkomat) step ---- */
.co__locker { margin-top: 14px; padding: 18px; background: var(--paper-2); }
.co__locker[hidden] { display: none; }
.co__locker-chosen { margin-top: 14px; font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; color: var(--ink-soft); }
.co__locker-chosen:empty { display: none; }
.co__locker-fallback { display: block; margin-top: 14px; }
.co__locker-fallback[hidden] { display: none; }
.co__locker-fallback > span { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.co__locker-fallback input { text-transform: uppercase; }

/* ---- order summary lines + totals (store.js markup) ---- */
.os-co-lines.os-co-lines { margin-bottom: 4px; }
.os-co-row.os-co-row { display: flex; gap: 14px; border-bottom: 1px solid var(--line); padding: 14px 0; }
.os-co-row.os-co-row:first-child { padding-top: 0; }
.os-co-img.os-co-img { width: 52px; height: 66px; background: var(--tile); flex: 0 0 auto; }
.os-co-name.os-co-name { font-family: var(--sans); font-size: 13px; color: var(--ink); }
.os-co-variant.os-co-variant, .os-co-qty.os-co-qty { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-top: 3px; }
.os-co-line-err.os-co-line-err { font-size: 11px; color: var(--sale); margin-top: 3px; }
.os-co-price.os-co-price { font-family: var(--sans); font-size: 13px; color: var(--ink); white-space: nowrap; }
.os-co-total-row.os-co-total-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); padding: 6px 0; }
.os-co-total-label.os-co-total-label { text-transform: uppercase; }
.os-co-grand.os-co-grand { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 14px; font-weight: 500; color: var(--ink); }
.os-co-vat.os-co-vat { margin-top: 2px; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); text-align: right; }

/* ---- payment ---- */
/* method list (store.js markup): the same hairline radio cards as the delivery methods, with
   the brand marks on the right */
.co__paylist { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.os-pay.os-pay {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 0; padding: 12px 16px; margin-bottom: 10px;
  cursor: pointer; transition: border-color 0.2s;
}
.os-pay.os-pay:last-child { margin-bottom: 0; }
.os-pay.os-pay input[type="radio"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--ink); }
.os-pay-on.os-pay-on { border-color: var(--ink); }
.os-pay-label.os-pay-label { font-family: var(--sans); font-size: 13px; color: var(--ink); }
.os-pay-hint.os-pay-hint { font-size: 11px; letter-spacing: 0.04em; color: var(--muted); margin-top: 3px; }
.os-pay-badge.os-pay-badge { border: 1px solid var(--line); border-radius: 0; color: var(--ink-soft); font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; padding: 2px 7px; }
/* privacy sentence + required terms tick, just above Zapłać */
.co__privacy { font-size: 12px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 14px; }
.co__terms { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.6; color: var(--ink); margin-bottom: 20px; cursor: pointer; }
.co__terms input { flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--ink); }
.co__invoice { display: flex; gap: 10px; align-items: center; font-size: 12px; line-height: 1.6; color: var(--ink); margin: 4px 0 16px; cursor: pointer; }
.co__invoice input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
[data-os-invoice-fields][hidden] { display: none; }
.co__privacy a, .co__terms a { border-bottom: 1px solid currentColor; }
.co__err { font-size: 12px; line-height: 1.6; color: var(--sale); margin-bottom: 14px; }
.co__err[hidden] { display: none; }
.co__err a { border-bottom: 1px solid currentColor; }
.co__pay-note { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.co__back { display: inline-block; margin-top: 14px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.co__back:hover { color: var(--ink); }

/* outline variant: same shape as .btn-solid, ink border instead of ink fill (the
   "Wybierz Paczkomat" button). */
.btn-outline {
  display: block; width: 100%; text-align: center;
  background: none; border: 1px solid var(--ink); color: var(--ink);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
  padding: 17px; transition: background 0.25s, color 0.25s;
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* ---- empty cart (store.js also disables the submit button) ---- */
.os-co-empty.os-co-empty { padding: 10px 0 4px; text-align: left; }
.os-co-empty-text.os-co-empty-text { color: var(--muted); font-size: 14px; }
.os-co-empty-cta.os-co-empty-cta {
  display: inline-block; margin-top: 20px; border-radius: 0;
  background: var(--ink); color: var(--paper);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; padding: 15px 28px;
}
.co button:disabled { opacity: 0.45; cursor: not-allowed; }

/* A 400 marks the named inputs .os-field-bad; store.js's own runtime stylesheet (appended
   after this one) sets a cold #c0392b outline on [data-checkout-page] .os-field-bad, so this
   needs the doubled-class trick to win and to carry B's warm terracotta instead. Also covers
   the fieldset-level marks (delivery methods, locker), which have no border of their own. */
.co .os-field-bad.os-field-bad { border-color: var(--sale); outline: 2px solid var(--sale); outline-offset: 1px; }

/* store.js dims the form and kills its pointer events while a request is in flight (.os-busy);
   this only adds the cursor. */
.co.os-busy { cursor: progress; }

/* Desktop: form left, summary right and sticky. DOM order keeps the summary first, so mobile
   (no override below) shows it above the form with no extra markup. */
@media (min-width: 900px) {
  .co { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); column-gap: 56px; }
  .co__main { grid-column: 1; grid-row: 1; }
  .co__summary { grid-column: 2; grid-row: 1; position: sticky; top: 30px; padding: 28px; }
}

@media (max-width: 560px) {
  .checkout { padding-bottom: 60px; }
  .co { gap: 26px; }
  .co__summary { padding: 20px; }
}

/* ==========================================================================
   CONTACT (/kontakt): heading + form column, contact-details column. Same
   .wform hairline fields as /odstapienie; .news-consent reused for the
   privacy tick (already styled for the newsletter forms).
   ========================================================================== */
.contact-page { max-width: 980px; margin: 0 auto; padding: clamp(56px,8vh,96px) var(--pad) clamp(70px,9vh,110px); }
.contact-page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px,4vw,48px); margin-bottom: 30px; text-transform: uppercase; letter-spacing: 0.02em; }
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: start; }
.contact-page .wform { max-width: none; margin-top: 0; }
.contact-info h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin-bottom: 18px; }
.contact-info .line { font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
.contact-info .line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   O NAS (/o-nas): eyebrow + Cormorant heading, text column + one sticky
   photo. Same building blocks as the home ABOUT band (.eyebrow, prose type).
   ========================================================================== */
.onas-page { max-width: 1040px; margin: 0 auto; padding: clamp(56px,8vh,96px) var(--pad) clamp(70px,9vh,110px); }
.onas-page .eyebrow { display: block; color: var(--muted); margin-bottom: 14px; }
.onas-page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px,4vw,48px); margin-bottom: 36px; text-transform: uppercase; letter-spacing: 0.02em; }
.onas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.onas-text h2 { font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); margin: 26px 0 10px; }
.onas-text h2:first-child { margin-top: 0; }
.onas-text p { font-size: 15px; line-height: 1.85; color: var(--ink-soft); margin-bottom: 4px; }
.onas-photo img { width: 100%; height: auto; display: block; position: sticky; top: 30px; }
@media (max-width: 800px) {
  .onas-grid { grid-template-columns: 1fr; gap: 30px; }
  .onas-photo img { position: static; }
}

/* Product sets, "Zestawy" (store.js Lap J): the "Rabat za zestaw" rows in the drawer, cart page and
   checkout summary read in the sale terracotta like the price cuts; the product page block "Kup w
   zestawie taniej" under the buy box takes the eyebrow heading and the suggestion cards (2:3
   pictures, size pills) in a two-up grid; the "w zestawie" tag on a suggestion is a small
   uppercase line. Doubled os- selectors for the same reason as above. */
.os-set-row .os-set-value.os-set-value { color: var(--sale); font-weight: 400; }
.os-sg-tag.os-sg-tag {
  display: block; margin: 4px 0 0; font-size: 10px; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--sale);
}
.pdp-sets { margin: 32px 0 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.os-sets.os-sets { margin: 0; }
.os-set-title.os-set-title {
  font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted); margin: 0 0 8px;
}
.os-set-value.os-set-value {
  font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0.04em;
  color: var(--sale); margin: 0 0 16px;
}
.os-set.os-set { margin: 0 0 24px; }
.os-set-list.os-set-list { gap: 24px 16px; grid-template-columns: repeat(2, 30%); }   /* cards 40% smaller than half the rail (Joanna, 20 Oct) */