/* ==========================================================================
   bumbumbum.sk — theme styles
   Neo-brutalist sticker look on warm cream. Faithful to the design handoff.
   Sections: tokens · base · buttons/chips · header · hero/editor · trust ·
             sections · footer · sticky CTA · WooCommerce · responsive
   ========================================================================== */

:root {
  /* palette */
  --page:#ffffff; --warm:#f0f0f0; --ink:#1A1512;
  --pink:#FF36A0; --green:#AFFF85; --green-strong:#1F9E5A;
  --body:#6B625B; --quote:#3A332E; --muted:#9a9088;
  --pink-soft:#FFF1F8; --pink-dash:#E2A8CC;
  --warn-bg:#FFF7E8; --warn-border:#F0D58A; --warn-text:#8A6D1E;
  --note-green:#EAFBDD; --neutral-border:#E4DDD3; --white:#fff;
  --foot-text:#b3aaa2; --foot-link:#ded6ce; --foot-head:#8a8178;

  /* type */
  --font-display:'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;

  /* hard offset shadows (no blur) */
  --sh-sm:3px 3px 0 var(--ink);
  --sh-card:5px 5px 0 var(--ink);
  --sh-lg:6px 6px 0 var(--ink);
  --sh-cta:8px 8px 0 var(--ink);

  /* radii */
  /* Sharp, angular corners to match the angular logo — no rounding on rectangles.
     (true circles still use border-radius:50% directly: colour dots, avatars, remove ×) */
  --r-card:0; --r-stage:0; --r-btn:0; --r-pill:0;

  /* layout */
  --maxw:1440px; --pad-x:48px;
  --border:2px solid var(--ink);
}

/* ───────────────────────── base ───────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection { background:var(--pink); color:#fff; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
h1,h2,h3 { font-family:var(--font-display); font-weight:900; letter-spacing:-.015em; margin:0; }
p { margin:0; }
.bbb-skip { position:absolute; left:-9999px; top:auto; }
.bbb-skip:focus { left:16px; top:16px; z-index:999; background:var(--ink); color:#fff; padding:10px 16px; border-radius:0; }

.mono { font-family:var(--font-mono); }
.is-pink { color:var(--pink); }
.is-green { color:var(--green-strong); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* shared container + section frame */
.bbb-section { padding:clamp(56px, 6.5vw, 96px) var(--pad-x); }
.bbb-section--warm { background:var(--warm); }
.bbb-wrap { max-width:var(--maxw); margin-inline:auto; }

@keyframes bbbglow { 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:.9;transform:scale(1.06);} }
@keyframes bbbfloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }

/* ───────────────────────── buttons / chips / badges ───────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:var(--border); border-radius:var(--r-btn);
  font-family:var(--font-display); font-weight:800; font-size:18px;
  padding:16px 22px; background:var(--white); color:var(--ink);
  box-shadow:var(--sh-card);
  transition:filter .12s ease, transform .07s ease, box-shadow .07s ease;
}
/* hover = darken (no movement); the press motion is reserved for the actual click (:active) */
.btn:hover { filter:brightness(.9); }
.btn:active { transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink); }
.btn--pink { background:var(--pink); color:#fff; }
.btn--ink { background:var(--ink); color:#fff; box-shadow:4px 4px 0 var(--green); }
.btn--ink:active { box-shadow:1px 1px 0 var(--green); }
.btn--block { width:100%; }
.btn--sm { font-size:15px; padding:10px 18px; }

.badge {
  display:inline-block; font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:.14em;
  border:var(--border); border-radius:var(--r-pill); padding:7px 16px; box-shadow:var(--sh-sm);
}
.badge--green { background:var(--green); color:var(--ink); transform:rotate(-3deg); }
.badge--pink  { background:var(--pink);  color:#fff;      transform:rotate(-2deg); }
.badge--green-r { background:var(--green); color:var(--ink); transform:rotate(2deg); }

.chip {
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:var(--border); border-radius:var(--r-pill); padding:13px 22px;
  font-family:var(--font-mono); font-size:15px; font-weight:700; letter-spacing:.06em;
}
.chip i { font-size:21px; }
.chip .dot { width:8px; height:8px; border-radius:50%; }
.dot--green { background:var(--green-strong); }
.dot--pink  { background:var(--pink); }

/* ───────────────────────── header ─────────────────────── */
/* Full-width bar (bg + border), but content aligns to the same container as the page. */
.site-header {
  position:sticky; top:0; z-index:60;
  background:var(--warm);
}
.site-header__inner {
  max-width:var(--maxw); margin-inline:auto;
  padding:18px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
}
.site-header__logo { position:relative; display:flex; align-items:flex-end; align-self:stretch; }
/* Signature oversized logo that overflows below the header (hand-tuned values). */
.site-header__logo img { position:relative; z-index:7; height:118px; width:auto; margin:6px 0 -56px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.22)); }
.site-nav { display:flex; align-items:center; gap:34px; }
.site-nav a { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:15px; }
.site-nav a i { font-size:18px; }
.site-nav a:hover { color:var(--pink); }
.site-header__actions { display:flex; align-items:center; gap:14px; }
.cart-btn {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--pink); color:#fff; border:var(--border); border-radius:var(--r-pill);
  padding:10px 20px; font-weight:800; font-size:15px; box-shadow:var(--sh-sm);
  transition:filter .12s ease, transform .07s ease, box-shadow .07s ease;
}
.cart-btn:hover { filter:brightness(.9); }
.cart-btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.burger { display:none; background:none; border:0; padding:6px; color:var(--ink); }

/* ───────────────────────── hero / editor ──────────────── */
.hero { position:relative; padding:58px var(--pad-x) 52px; overflow:hidden; }
.hero__inner {
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,30vw,440px); column-gap:40px;
}
/* left = text (top-aligned), right = t-shirt art whose bottom meets the editor */
.hero__copy { grid-column:1; grid-row:1; align-self:start; padding-bottom:40px; }
.hero__art  { grid-column:2; grid-row:1; align-self:end; position:relative; z-index:2; }
.hero__art img { display:block; width:100%; height:auto; }
/* the docked kind-tabs add ~46px on top of the editor — drop the shirt by the same
   amount so its bottom sits back on the editor's top frame (only when tabs render) */
.hero__inner:has(.editor-kinds) .hero__art { transform:translateY(46px); }
/* hero background blobs/shapes removed per request — clean white hero */

/* Price sticker — irregular magenta octagon "seal" slapped on the t-shirt */
.hero__price-badge {
  position:absolute; top:3%; left:-10px; z-index:4;
  width:clamp(106px, 9.5vw, 134px); aspect-ratio:1 / 1;
  display:grid; place-items:center;
  transform:rotate(-11deg);
  pointer-events:none; -webkit-user-select:none; user-select:none;
}
.hero__price-badge .pb__seal { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hero__price-badge .pb__txt {
  position:relative; z-index:1; text-align:center; line-height:1;
  color:#fff; transform:translateY(-1px);
}
.hero__price-badge .pb__od {
  display:block; font-family:var(--font-mono); font-weight:700;
  font-size:12px; letter-spacing:.16em; margin-bottom:4px;
}
.hero__price-badge .pb__amt {
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(19px, 1.7vw, 23px); letter-spacing:-.01em; white-space:nowrap;
}

.hero__eyebrow { position:relative; z-index:3; margin-bottom:18px; }
.hero__head { position:relative; z-index:2; max-width:800px; }
.hero__title { font-size:82px; line-height:.94; letter-spacing:-.02em; }
.hero__title .bum { color:var(--pink); }
.hero__title .u { position:relative; display:inline-block; }
.hero__title .u svg { position:absolute; left:0; bottom:-14px; width:100%; height:16px; }
.hero__sub { margin-top:52px; max-width:560px; font-weight:400; font-size:19px; line-height:1.6; color:var(--ink); }

.editor { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:32px; margin-top:0; align-items:stretch; grid-column:1 / -1; grid-row:2; }

/* dark focal stage */
.stage {
  position:relative; border-radius:var(--r-stage);
  background:radial-gradient(120% 90% at 50% 30%, #1f1f1f, #0c0c0c 72%);
  border:var(--border); box-shadow:var(--sh-lg); overflow:hidden;
  display:flex; align-items:center; justify-content:center; min-height:520px;
}
.stage__glow { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(175,255,133,.18), transparent 60%); animation:bbbglow 5s ease-in-out infinite; }
.stage__glow--pink { width:300px; height:300px; left:24px; bottom:18px; background:radial-gradient(circle, rgba(255,54,160,.16), transparent 60%); animation:none; }
.stage__star { position:absolute; }
.stage__star--g { left:36px; top:42px; }
.stage__star--p { right:50px; bottom:60px; }
.stage__label { position:absolute; left:24px; top:22px; font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; color:#7a7a7a; }
.stage__foot  { position:absolute; left:24px; bottom:22px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:#7a7a7a; }
.stage__shirt { width:430px; animation:bbbfloat 6s ease-in-out infinite; }
.stage__shirt-rot { position:relative; transform:rotate(-4deg); filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)); }
.stage__print { position:absolute; left:23%; top:10%; width:62%; height:78%; border:1.6px dashed rgba(255,54,160,.6); border-radius:0; }
.stage__sticker { position:absolute; right:16px; top:26%; transform:rotate(6deg); background:var(--pink); color:#fff; border:2px solid #fff; border-radius:0; padding:9px 14px; font-weight:800; font-size:13px; box-shadow:0 8px 20px rgba(255,54,160,.4); }

/* the embedded LUMISE designer (iframe) lives inside the stage */
.stage--live { display:block; padding:0; }
.stage__frame { width:100%; height:100%; min-height:520px; border:0; display:block; border-radius:var(--r-stage); background:#0c0c0c; }
.stage__loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#cbb9c6; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; pointer-events:none; transition:opacity .4s ease; }
.stage.is-loaded .stage__loading { opacity:0; }

/* live editor — full-width embedded LUMISE designer in on-brand chrome */
.editor--live { grid-template-columns:1fr; gap:0; } /* tabs dock flush onto the editor */
.live-editor { border:var(--border); border-radius:var(--r-stage); box-shadow:var(--sh-lg); overflow:hidden; background:#0c0c0c; }
.live-editor__bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:var(--page); border-bottom:var(--border); }
.live-editor__bar > .mono { font-size:12px; letter-spacing:.18em; color:var(--ink); font-weight:700; }
.live-editor__price { font-weight:900; font-size:18px; display:flex; align-items:baseline; gap:8px; }
.live-editor__price .mono { font-weight:700; font-size:11px; letter-spacing:.1em; }
.live-editor .stage--live { border:0; border-radius:0; box-shadow:none; min-height:680px; }
.live-editor .stage__frame { min-height:680px; border-radius:0; }
.live-editor__hint { margin:0; padding:12px 18px; background:var(--page); border-top:var(--border); font-size:11px; letter-spacing:.08em; color:var(--muted); text-align:center; }
.live-editor__hint strong { color:var(--ink); }

/* editor bar: right-side group + fullscreen toggle */
.live-editor__bar-right { display:flex; align-items:center; gap:14px; }

/* editor kind tabs — Pánske / Dámske / Detské: classic folder tabs docked on the editor.
   Each tab is its own bordered button (no bottom border) sitting ON the editor's top
   frame; the active one is taller + pink, so it reads as the open tab. */
.editor-kinds {
  display:flex; align-items:flex-end; gap:8px;
  margin:0; padding:0 0 0 16px;
  position:relative; z-index:2;
}
.editor-kinds__tab {
  padding:10px 30px 12px; background:var(--warm);
  border:var(--border); border-bottom:0; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--ink);
}
.editor-kinds__tab:hover { background:#fff; }
.editor-kinds__tab.is-active { background:var(--pink); color:#fff; padding-top:15px; }
@media (max-width:680px) {
  .editor-kinds { padding-left:0; gap:6px; }
  .editor-kinds__tab { flex:1; padding:10px 8px 12px; }
  .editor-kinds__tab.is-active { padding-top:15px; }
}
/* (the customer sets Potlač in LUMISE's Možnosti panel; theme.js mirrors the price into the bar) */
.live-editor__fs-btn {
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  border:2px solid var(--ink); border-radius:0; background:#fff; color:var(--ink);
  font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.02em;
  padding:8px 12px; box-shadow:2px 2px 0 var(--ink);
  transition:filter .12s ease, transform .07s ease, box-shadow .07s ease;
}
.live-editor__fs-btn:hover { filter:brightness(.9); }
.live-editor__fs-btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.live-editor__fs-btn svg { display:block; }
.live-editor__fs-btn .ic-close, .live-editor__fs-btn .lbl-close { display:none; }

/* fullscreen: pseudo-fullscreen overlay — the iframe stays mounted, so the in-progress
   design is preserved across open/close (no reload). */
.live-editor.is-fullscreen {
  position:fixed; inset:0; z-index:9999;
  width:100vw; height:100vh; height:100dvh;
  border:0; border-radius:0; box-shadow:none;
  display:flex; flex-direction:column;
}
.live-editor.is-fullscreen .live-editor__bar { flex:0 0 auto; }
.live-editor.is-fullscreen .stage--live,
.live-editor.is-fullscreen .stage__frame { flex:1 1 auto; min-height:0; height:100%; }
.live-editor.is-fullscreen .live-editor__hint { display:none; }
.live-editor.is-fullscreen .live-editor__fs-btn .ic-expand,
.live-editor.is-fullscreen .live-editor__fs-btn .lbl-open { display:none; }
.live-editor.is-fullscreen .live-editor__fs-btn .ic-close { display:block; }
.live-editor.is-fullscreen .live-editor__fs-btn .lbl-close { display:inline; }
body.bbb-fs-lock { overflow:hidden; }
/* The editor's z-index is trapped inside .editor--live's stacking context, so siblings
   (root sticky header, hero badge/blobs/title) would paint over the overlay. While
   fullscreen, hide everything except the editor itself. */
body.bbb-fs-lock .site-header,
body.bbb-fs-lock .sticky-cta,
body.bbb-fs-lock .hero__inner > *:not(.editor) { display:none !important; }

/* controls card */
.controls { background:#fff; border:var(--border); border-radius:var(--r-stage); box-shadow:var(--sh-lg); padding:28px 26px; display:flex; flex-direction:column; gap:22px; }
.controls__row { display:flex; align-items:center; justify-content:space-between; }
.controls__tag { font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; font-weight:700; }
.controls__step { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--muted); }
.controls__label { font-weight:800; font-size:14px; margin-bottom:12px; }

.swatches { display:flex; flex-wrap:wrap; gap:12px; }
.swatch { width:34px; height:34px; border-radius:50%; border:0; padding:0; position:relative; cursor:pointer; }
.swatch[data-light] { border:1.5px solid #D9D2C9; }
.swatch.is-active { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--pink); }
.swatch.is-active::after { content:''; position:absolute; inset:0; display:block; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF36A0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; }

.dropzone { border:2px dashed var(--pink-dash); border-radius:0; padding:24px 18px; text-align:center; background:var(--pink-soft); cursor:pointer; transition:border-color .12s ease, background .12s ease; }
.dropzone:hover { border-color:var(--pink); }
.dropzone__icon { width:40px; height:40px; border-radius:50%; background:var(--pink); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.dropzone__t { font-weight:700; font-size:14px; }
.dropzone__s { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:#B08AA0; margin-top:7px; }
.warn { display:flex; align-items:center; gap:9px; margin-top:11px; background:var(--warn-bg); border:1.5px solid var(--warn-border); border-radius:0; padding:9px 12px; }
.warn span { font-size:12.5px; color:var(--warn-text); }

.sizes { display:flex; flex-wrap:wrap; gap:9px; }
.size { min-width:46px; text-align:center; padding:10px 12px; border-radius:0; border:2px solid var(--neutral-border); background:#fff; font-weight:700; font-size:14px; color:var(--body); cursor:pointer; }
.size.is-active { border:var(--border); background:var(--pink); color:#fff; font-weight:800; }

.controls__foot { margin-top:auto; padding-top:20px; border-top:2px dashed var(--neutral-border); }
.price-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; }
.price { display:flex; align-items:baseline; gap:6px; }
.price__amt { font-weight:900; font-size:36px; letter-spacing:-.02em; }
.price__unit { font-size:13px; color:var(--muted); }
.price__vat { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--green-strong); font-weight:700; }
.controls__note { text-align:center; margin-top:11px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--muted); }

/* trust row */
.trust { display:flex; align-items:center; gap:14px; margin-top:34px; flex-wrap:wrap; max-width:var(--maxw); margin-inline:auto; grid-column:1 / -1; }

/* ───────────────────────── content sections ───────────── */
.kvalita__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:var(--maxw); margin-inline:auto; }
.kvalita h2 { font-size:44px; line-height:1; margin-bottom:0; }
.kvalita p { margin:18px 0 28px; font-size:17px; line-height:1.65; color:var(--body); max-width:480px; }
.feature { display:flex; gap:14px; align-items:flex-start; }
.feature + .feature { margin-top:14px; }
.feature__ic { flex:none; width:34px; height:34px; border-radius:0; background:var(--green); border:var(--border); display:flex; align-items:center; justify-content:center; }
.feature__t { font-weight:800; font-size:16px; }
.feature__s { font-size:14.5px; color:var(--body); margin-top:3px; }
.kvalita__art { position:relative; border-radius:var(--r-stage); overflow:hidden; background:linear-gradient(165deg, #ffffff 0%, #e8e8e8 100%); border:var(--border); box-shadow:var(--sh-lg); min-height:380px; display:flex; align-items:center; justify-content:center; padding:24px; }
.kvalita__art .glow { display:none; }
.kvalita__art img { width:100%; height:auto; display:block; position:relative; }

.section-head { text-align:center; margin-bottom:48px; }
.section-head h2 { font-size:44px; }
.section-head .badge { margin-bottom:16px; }

.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--maxw); margin-inline:auto; }
/* Doprava now has 2 cards (courier removed) → 2 equal columns filling the full
   width (mobile falls back to 1 col below 860px). */
.doprava .cards-3 { grid-template-columns:repeat(2, 1fr); }
.dcard { background:#fff; border:var(--border); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:28px; }
.dcard__ic { width:46px; height:46px; border-radius:0; background:var(--pink-soft); border:var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.dcard__t { font-weight:800; font-size:19px; margin-bottom:6px; }
.dcard__d { font-size:14.5px; line-height:1.55; color:var(--body); margin:0 0 16px; }
.dcard__p { font-family:var(--font-mono); font-size:14px; font-weight:700; color:var(--green-strong); }
.note { margin-top:22px; display:flex; align-items:center; justify-content:center; gap:12px; background:var(--note-green); border:var(--border); border-radius:var(--r-btn); padding:16px; max-width:var(--maxw); margin-inline:auto; }
.note span { font-size:15px; }

.review { background:#fff; border:var(--border); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:26px; }
.review__stars { color:var(--pink); font-size:16px; letter-spacing:3px; margin-bottom:14px; }
.review__q { font-size:15.5px; line-height:1.6; color:var(--quote); margin:0 0 18px; }
.review__who { display:flex; align-items:center; gap:11px; }
.avatar { width:36px; height:36px; border-radius:50%; border:var(--border); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; }
.avatar--pink { background:var(--pink); }
.avatar--green { background:var(--green); color:var(--ink); }
.review__name { font-weight:800; font-size:14px; }
.review__tag { font-size:12px; color:var(--muted); }

.cta-band { position:relative; overflow:hidden; border-radius:var(--r-stage); background:var(--pink); border:var(--border); box-shadow:var(--sh-cta); padding:56px 48px; text-align:center; max-width:var(--maxw); margin-inline:auto; }
.cta-band .star { position:absolute; }
.cta-band h2 { font-size:50px; color:#fff; }
.cta-band p { position:relative; margin:14px 0 28px; font-size:18px; color:rgba(255,255,255,.9); font-weight:500; }

/* ───────────────────────── footer ─────────────────────── */
.site-footer { padding:54px var(--pad-x) 36px; border-top:var(--border); background:var(--ink); color:#fff; }
.site-footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; max-width:var(--maxw); margin-inline:auto; }
/* selector specificity (0,2,0) beats WooCommerce's `.woocommerce-page img{height:auto}` (0,1,1) */
.site-footer .site-footer__logo { height:60px; width:auto; margin-bottom:16px; }
.site-footer p { font-size:14.5px; line-height:1.6; color:var(--foot-text); max-width:260px; }
.foot-head { font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; color:var(--foot-head); margin-bottom:16px; }
.foot-links { display:flex; flex-direction:column; gap:11px; }
.foot-links a { color:var(--foot-link); font-size:14.5px; }
.foot-links a:hover { color:#fff; }
.foot-mail { color:#fff; font-weight:700; font-size:15px; }
.foot-socials { display:flex; gap:10px; margin-top:16px; }
.foot-socials a { width:36px; height:36px; border-radius:0; border:1.5px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; }
.foot-socials a:hover { border-color:#fff; }
.site-footer__bar { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:var(--maxw); margin:40px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--foot-head); }

/* ───────────────────────── sticky mobile CTA ──────────── */
.sticky-cta { display:none; }

/* ───────────────────────── WooCommerce light overrides ── */
.bbb-page { max-width:1100px; margin:0 auto; padding:48px var(--pad-x); }
.bbb-page h1 { font-size:44px; margin-bottom:24px; }
/* Cart & checkout use the same wide container as the home page (1440).
   Legal/text pages stay at 1100 for comfortable line length. */
.woocommerce-cart .bbb-page { max-width:var(--maxw); }
/* Checkout: ONE focused column so the title, steps, summary and form all share
   the same left/right edges. (Full 1440 width scattered everything — the price
   floated to the far edge and the steps drifted to the centre = "random".) */
.woocommerce-checkout .bbb-page { max-width:1080px; }
/* the page-hero adds an extra 48px side padding → the title sat indented from the
   content; drop it on checkout so "Pokladňa" lines up with everything below it */
.woocommerce-checkout .page-hero { padding-left:0; padding-right:0; max-width:none; }
.woocommerce, .woocommerce-page { font-family:var(--font-display); }
.bbb-shop .woocommerce { max-width:1140px; margin-inline:auto; padding:40px var(--pad-x); }
/* ── WooCommerce buttons: ONE consistent system ──────────────────────────
   Base = brand pink button — sharp corners, 2px ink border, hard shadow, 16px/800.
   The long selector list catches EVERY Woo button (generic .button, both submit types,
   apply-coupon / update-cart, checkout, add-to-cart, account, review submit) so they're
   all uniform instead of inheriting Woo's tiny ~13px default. Primary CTAs scale up below.
   Hover darkens; the press motion is the actual click (:active). */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce button[type="submit"], .woocommerce input[type="submit"],
.woocommerce #respond input#submit, .woocommerce .button.alt,
.woocommerce .checkout-button, .woocommerce .single_add_to_cart_button,
.woocommerce .added_to_cart, .woocommerce .wc-forward.button,
.woocommerce-cart table.cart td.actions .button,
.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-Button.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--pink); color:#fff; border:var(--border); border-radius:0;
  font-family:var(--font-display); font-weight:800; font-size:16px; line-height:1.2; letter-spacing:0;
  padding:14px 26px; min-height:52px; width:auto;
  box-shadow:var(--sh-card); text-shadow:none; text-transform:none; cursor:pointer;
  transition:filter .12s ease, transform .07s ease, box-shadow .07s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce button[type="submit"]:hover, .woocommerce input[type="submit"]:hover,
.woocommerce #respond input#submit:hover, .woocommerce .button.alt:hover,
.woocommerce .checkout-button:hover, .woocommerce .single_add_to_cart_button:hover,
.woocommerce-cart table.cart td.actions .button:hover,
.woocommerce-form-login__submit:hover { filter:brightness(.9); background:var(--pink); }
.woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active,
.woocommerce button[type="submit"]:active, .woocommerce input[type="submit"]:active,
.woocommerce #respond input#submit:active, .woocommerce .button.alt:active,
.woocommerce .checkout-button:active, .woocommerce .single_add_to_cart_button:active,
.woocommerce-cart table.cart td.actions .button:active,
.woocommerce-form-login__submit:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

/* Primary CTAs — bigger; the two main ones go full-width */
.woocommerce .button.alt, .woocommerce .checkout-button,
.woocommerce #place_order, .woocommerce .single_add_to_cart_button {
  font-size:18px; min-height:60px; padding:18px 30px;
}
.woocommerce .checkout-button, .woocommerce #place_order { width:100%; }
/* LUMISE "Edit Design" cart link → small SECONDARY outline button (white + ink border, no big
   shadow). Needs specificity > LUMISE's `.woocommerce a.lumise-edit-design{…!important}` (add .button). */
.woocommerce a.lumise-edit-design.button, a.lumise-edit-design.button {
  display:inline-flex !important; align-items:center; width:auto !important;
  background:#fff !important; color:var(--ink) !important; border:2px solid var(--ink) !important;
  box-shadow:none !important; border-radius:0 !important;
  min-height:0 !important; padding:7px 14px !important;
  font-size:13px !important; font-weight:800 !important; line-height:1.2 !important;
}
.woocommerce a.lumise-edit-design.button:hover, a.lumise-edit-design.button:hover {
  background:var(--ink) !important; color:#fff !important; filter:none; box-shadow:none !important;
}

/* Form fields — ON-BRAND but CLEAN: sharp 2px ink border like the rest of the
   site, but NO hard offset shadow (piling one on every field was the clutter that
   read as "ugly"). Pink border on focus = confident brand accent. */
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label { font-weight:700; font-size:14px; margin-bottom:7px; display:inline-block; color:var(--ink); }
.woocommerce .required { color:var(--pink); border:0; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce #order_comments,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce select,
.woocommerce-cart .coupon input[type="text"] {
  width:100%; box-sizing:border-box;
  border:2px solid var(--ink); border-radius:0;
  padding:13px 15px; min-height:52px;
  background:#fff; color:var(--ink);
  font-family:var(--font-display); font-size:15px; line-height:1.3;
  box-shadow:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder { color:var(--muted); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce select:focus,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single {
  outline:none; border-color:var(--pink); box-shadow:inset 0 0 0 1px var(--pink);
}
/* select2 (country) — align height/arrow with the inputs */
.woocommerce .select2-container .select2-selection--single { height:52px; display:flex; align-items:center; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:normal; padding:0 6px; color:var(--ink); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height:48px; }
.select2-dropdown { border:2px solid var(--ink); }

/* Cards / tables (cart totals, order review, payment, notices) */
.woocommerce .cart_totals, .woocommerce-checkout #payment,
.woocommerce table.shop_table, .woocommerce-info, .woocommerce-message,
.woocommerce-checkout-review-order, .cart-collaterals .cart_totals {
  border-radius:var(--r-card);
}
.woocommerce table.shop_table { border:2px solid var(--ink); border-radius:0; box-shadow:var(--sh-card); overflow:hidden; }
.woocommerce-checkout #payment { background:var(--warm); border:2px solid var(--ink); border-radius:0; box-shadow:var(--sh-card); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom:2px solid var(--ink); }
.woocommerce-checkout #payment ul.payment_methods li { font-weight:600; }
/* Place-order button: big, full-width (it defaults to shrink-to-text) */
.woocommerce-checkout #payment .place-order { padding:16px 0 4px; margin:0; }
.woocommerce #place_order, .woocommerce-checkout #place_order {
  display:block; float:none; width:100%;
  font-size:19px; font-weight:800; padding:18px 24px; min-height:60px; line-height:1.2;
}
.woocommerce-info, .woocommerce-message { border-top:3px solid var(--pink); background:#fff; }
.woocommerce .quantity .qty { border:2px solid var(--ink); border-radius:var(--r-pill); min-height:44px; padding:6px 10px; font-weight:700; box-shadow:none; }
/* ── Cart table: line items ── */
.woocommerce-cart table.cart thead th { font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.04em; padding:16px; }
.woocommerce-cart table.cart td { vertical-align:middle; padding:16px; border-top:1px solid var(--neutral-border); }
.woocommerce-cart table.cart td.product-remove { width:48px; text-align:center; }
.woocommerce-cart table.cart td.product-thumbnail { width:90px; }
.woocommerce-cart table.cart td.product-thumbnail img { width:70px; height:70px; object-fit:cover; border:2px solid var(--ink); border-radius:0; display:block; }
.woocommerce-cart table.cart td.product-name { font-weight:700; font-size:15px; }
.woocommerce-cart table.cart td.product-name > a { color:var(--ink); }
.woocommerce-cart table.cart td.product-name > a:hover { color:var(--pink); }
.woocommerce-cart table.cart td.product-name .variation,
.woocommerce-cart table.cart td.product-name dl { margin:8px 0 0; font-size:13px; font-weight:400; color:var(--body); line-height:1.55; }
/* one "Label: value" per line — inline dt+dd, then a block ::after to break after each named value */
.woocommerce td.product-name dl.variation dt { display:inline; font-weight:700; color:var(--quote); margin:0 5px 0 0; }
.woocommerce td.product-name dl.variation dd { display:inline; margin:0; }
.woocommerce td.product-name dl.variation dd p { display:inline; margin:0; }
.woocommerce td.product-name dl.variation dd:not(.variation-)::after { content:""; display:block; height:2px; }
/* LUMISE colour value = <span style="background:#hex">Name</span>. Pad it + keep the name legible
   on any swatch (white text + dark outline reads on both light and dark colours). */
.woocommerce td.product-name dl.variation dd.variation-Farba span[style*="background"] {
  display:inline-block; padding:3px 10px !important; border:1.5px solid rgba(26,21,18,.35);
  color:#fff; font-weight:700; line-height:1.3; vertical-align:baseline;
  text-shadow:0 0 2px rgba(0,0,0,.9), 0 1px 1px rgba(0,0,0,.6);
}
.woocommerce-cart table.cart td.product-price, .woocommerce-cart table.cart td.product-subtotal { font-weight:700; white-space:nowrap; }
/* design-preview thumbnails LUMISE injects into the product meta (cart + checkout review) */
.woocommerce td.product-name img,
.woocommerce-checkout-review-order-table td img { max-width:84px; height:auto; border:2px solid var(--ink); border-radius:0; margin-top:8px; display:inline-block; }
/* tidy the LUMISE design meta lines */
.woocommerce td.product-name dl.variation dd p { margin:0; }
.woocommerce-checkout-review-order-table .product-name { font-weight:700; }

/* ── LUMISE design items: show ONLY the design preview (not the generic product image) ──
   In the CART, LUMISE appends its design preview (.lumise-cart-thumbnails) inside the product
   link next to the Woo featured image → two images. Hide the Woo one, keep the design. */
.woocommerce-cart td.product-thumbnail > a:has(.lumise-cart-thumbnails) > img { display:none; }
.woocommerce-cart td.product-thumbnail .lumise-cart-thumbnails img { height:70px; width:auto; border:2px solid var(--ink); border-radius:0; display:block; margin:0; }
/* LUMISE adds two empty-label rows: a design preview (a <div>, NOT an <img>) + the Edit Design link.
   Hide the empty ":" labels everywhere; make the Edit Design its own block button; and in the CART
   hide the preview row (the thumbnail column already shows the design). Checkout keeps the preview. */
.woocommerce td.product-name dl.variation dt.variation- { display:none; }
.woocommerce td.product-name dl.variation dd.variation-:has(.lumise-edit-design) { display:block; margin-top:10px; }
.woocommerce-cart td.product-name dl.variation dd.variation-:not(:has(.lumise-edit-design)) { display:none; }
.woocommerce-cart table.cart td.product-quantity .quantity { margin:0 auto; }
.woocommerce a.remove { color:var(--ink) !important; border:2px solid var(--ink); width:26px; height:26px; line-height:22px; text-align:center; font-weight:700; background:#fff; border-radius:50%; box-shadow:1px 1px 0 var(--ink); }
.woocommerce a.remove:hover { background:var(--pink) !important; color:#fff !important; }

/* ── Cart actions row: coupon + update ── */
.woocommerce-cart table.cart td.actions { padding:18px 16px; border-top:2px solid var(--ink); background:var(--warm); overflow:hidden; }
.woocommerce-cart table.cart td.actions .coupon { float:left; display:flex; align-items:center; gap:10px; margin:0; }
.woocommerce-cart table.cart td.actions .coupon #coupon_code { width:230px; min-height:52px; box-shadow:none; margin:0; }
.woocommerce-cart table.cart td.actions .button { margin:0; white-space:nowrap; }
.woocommerce-cart table.cart td.actions button[name="update_cart"] { float:right; }
.woocommerce-cart table.cart td.actions button[name="update_cart"][disabled] { opacity:.45; box-shadow:none; transform:none; cursor:default; }

/* ── Cart table → stacked cards on mobile (no horizontal scroll) ─────────
   The 6-column cart table can't fit a phone, so below 600px we collapse it into
   one card per item: design preview pinned top-left, name + "Cena/Množstvo/
   Medzisúčet:" (from each cell's data-title) stacked to its right. */
@media (max-width:600px) {
  .woocommerce-cart table.cart thead { display:none; }
  .woocommerce-cart table.cart,
  .woocommerce-cart table.cart tbody,
  .woocommerce-cart table.cart tr,
  .woocommerce-cart table.cart td { display:block; width:auto; }
  .woocommerce-cart table.cart tr.cart_item {
    position:relative; border:2px solid var(--ink); box-shadow:var(--sh-sm);
    background:#fff; margin:0 0 16px; padding:14px 14px 12px 98px; min-height:98px;
  }
  .woocommerce-cart table.cart tr.cart_item td { border:0; padding:3px 0; text-align:left; }
  .woocommerce-cart table.cart td.product-thumbnail { position:absolute; left:14px; top:14px; width:70px; padding:0; }
  .woocommerce-cart table.cart td.product-thumbnail img { width:70px; height:auto; }
  .woocommerce-cart table.cart td.product-remove { position:absolute; top:8px; right:10px; width:auto; padding:0; }
  .woocommerce-cart table.cart td.product-name { font-size:15px; padding-right:30px; margin-bottom:4px; }
  .woocommerce-cart table.cart td.product-price::before,
  .woocommerce-cart table.cart td.product-quantity::before,
  .woocommerce-cart table.cart td.product-subtotal::before {
    content: attr(data-title) ": "; font-weight:700; color:var(--quote);
  }
  .woocommerce-cart table.cart td.product-quantity { display:flex; align-items:center; gap:8px; }
  .woocommerce-cart table.cart td.product-quantity .quantity { margin:0; }
  .woocommerce-cart table.cart td.actions { padding:14px; text-align:left; overflow:visible; }
  .woocommerce-cart table.cart td.actions .coupon { float:none; display:flex; gap:8px; margin:0 0 10px; }
  .woocommerce-cart table.cart td.actions .coupon #coupon_code { flex:1; width:auto; min-width:0; }
  .woocommerce-cart table.cart td.actions button[name="update_cart"] { float:none; width:100%; margin:0; }
  .cart-collaterals, .cart-collaterals .cart_totals { width:100%; float:none; }
}

/* ── Checkout: single full-width column, ordered 1) Vaša objednávka (summary)
     2) Fakturačné údaje  3) Dobierka + Objednať button.
     #order_review wraps BOTH the summary table and #payment, so we hoist its children with
     display:contents and reorder all sections at the form level via flex order. ── */
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float:none; width:100%; }
.woocommerce form.checkout_coupon, .woocommerce .checkout_coupon { border:2px solid var(--ink); }
.woocommerce-checkout form.checkout { display:flex; flex-direction:column; }
.woocommerce-checkout form.checkout > #order_review_heading { order:1; margin:0 0 16px; }
.woocommerce-checkout form.checkout > #order_review { display:contents; }
.woocommerce-checkout #order_review > .woocommerce-checkout-review-order-table,
.woocommerce-checkout #order_review > .shop_table { order:2; }
.woocommerce-checkout form.checkout > #customer_details { order:3; width:100%; margin-top:40px; }
.woocommerce-checkout #order_review > #payment { order:4; margin-top:32px; }

/* ── Checkout: cleaner & CLEARER (stays on-brand / sharp) ─────────────────
   Hide optional clutter fields, give rows room, sharpen the headings, and fix
   the order-review table readability: Woo vertically-centres the price so it
   floats in a sea of whitespace — pin every cell to the TOP so the price sits
   next to its product, and give the meta a clear light-label / bold-value
   hierarchy instead of a wall of bold text. */
#billing_company_field, #billing_address_2_field,
#shipping_company_field, #shipping_address_2_field { display:none !important; }
.woocommerce-checkout .form-row { margin-bottom:16px; padding:0; }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { margin:0; }
.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading {
  font-size:22px; font-weight:900; letter-spacing:-.01em; margin:0 0 18px;
}
.woocommerce-billing-fields h3 { margin-top:0; }
/* order-review table — top-aligned, readable rows */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { vertical-align:top; padding:16px 18px; }
.woocommerce-checkout-review-order-table thead th { font-size:13px; letter-spacing:.04em; }
.woocommerce-checkout-review-order-table .cart_item td { border-top:1px solid var(--neutral-border); }
.woocommerce-checkout-review-order-table .cart_item td.product-name { font-weight:800; font-size:15px; line-height:1.35; }
.woocommerce-checkout-review-order-table .cart_item td.product-total { font-weight:800; white-space:nowrap; }
/* compact meta: light label, bold value */
.woocommerce-checkout-review-order-table dl.variation { margin:10px 0 0; font-size:13px; line-height:1.55; }
.woocommerce-checkout td.product-name dl.variation dt { font-weight:600; color:var(--body); }
.woocommerce-checkout td.product-name dl.variation dd { font-weight:700; color:var(--ink); }
/* THREE visual columns: [foto] [detail] [cena]. Woo crams the LUMISE design
   preview under the meta inside the product cell — pin it into a fixed left
   gutter (absolute, so DOM order doesn't matter) and pad the detail to its
   right; the product-total cell is the third column. */
.woocommerce-checkout-review-order-table td.product-name:has(img) {
  position:relative; padding-left:106px; min-height:104px;
}
.woocommerce-checkout-review-order-table td.product-name img {
  position:absolute; left:0; top:16px;
  width:86px; height:auto; margin:0; border:2px solid var(--ink); border-radius:0;
}
/* subtotal / shipping / total rows */
.woocommerce-checkout-review-order-table tfoot th { font-weight:700; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td { font-size:18px; font-weight:900; }

/* page hero (breadcrumb-ish) for info pages */
.page-hero { padding:48px var(--pad-x) 0; max-width:var(--maxw); margin-inline:auto; }
.page-hero h1 { font-size:clamp(32px,6vw,56px); }

/* ───────────────────────── návrh na mieru (mailom) ─────────────────────── */
.byo__card {
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:1.15fr .85fr;
  border:var(--border); box-shadow:var(--sh-lg); background:var(--white); overflow:hidden;
}
.byo__main { padding:44px; }
.byo__title { font-size:clamp(28px,3.4vw,40px); margin:16px 0 14px; line-height:1; }
.byo__lead { color:var(--quote); font-size:17px; margin-bottom:26px; max-width:48ch; }
.byo__lead strong { color:var(--ink); }
.byo__steps {
  list-style:none; margin:0; padding:32px 36px; background:var(--warm); border-left:var(--border);
  display:flex; flex-direction:column; gap:18px;
}
.byo__step { display:flex; align-items:flex-start; gap:14px; }
.byo__num {
  flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:var(--green); border:var(--border); box-shadow:var(--sh-sm); font-weight:900; font-size:16px;
}
.byo__step-tx { display:flex; flex-direction:column; gap:2px; }
.byo__step-t { font-weight:800; font-size:16px; }
.byo__step-s { color:var(--body); font-size:14px; line-height:1.45; }

/* ───────────────────────── contact form ────────────────────────────────── */
.bbb-form { max-width:640px; margin:30px 0 8px; }
.bbb-form__row { margin-bottom:18px; }
.bbb-form__row--split { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bbb-form label { display:block; font-weight:700; font-size:14px; margin-bottom:6px; }
.bbb-form .req { color:var(--pink); }
.bbb-form__opt { color:var(--muted); font-weight:400; font-size:13px; }
.bbb-form input[type="text"],
.bbb-form input[type="email"],
.bbb-form input[type="tel"],
.bbb-form textarea,
.bbb-form input[type="file"] {
  width:100%; box-sizing:border-box;
  border:2px solid var(--ink); border-radius:0;
  padding:13px 14px; min-height:50px;
  background:#fff; color:var(--ink);
  font-family:var(--font-display); font-size:15px; line-height:1.3;
  box-shadow:2px 2px 0 var(--ink);
  transition:box-shadow .12s ease, border-color .12s ease;
}
.bbb-form textarea { min-height:150px; resize:vertical; }
.bbb-form input[type="file"] { padding:10px 12px; background:var(--warm); cursor:pointer; }
.bbb-form input:focus, .bbb-form textarea:focus { outline:none; border-color:var(--pink); box-shadow:3px 3px 0 var(--pink); }
.bbb-form__hint { display:block; font-size:13px; color:var(--muted); margin-top:6px; }
.bbb-form__consent { display:flex; align-items:flex-start; gap:11px; font-size:14px; font-weight:400; color:var(--quote); line-height:1.45; cursor:pointer; }
.bbb-form__consent input { flex:0 0 auto; width:20px; height:20px; margin-top:1px; accent-color:var(--pink); }
.bbb-form__consent a { text-decoration:underline; }
/* honeypot — off-screen for humans, tempting for naive bots */
.bbb-form__hp { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
.bbb-form .field-error { display:block; color:#C0392B; font-size:13px; font-weight:700; margin-top:6px; }
.bbb-form input.has-error, .bbb-form textarea.has-error { border-color:#C0392B; box-shadow:3px 3px 0 #C0392B; }
.bbb-form .g-recaptcha { margin:2px 0; }
.bbb-form__submit { margin-top:4px; margin-bottom:0; }
/* notice banners (success / error) */
.bbb-notice { border:var(--border); box-shadow:var(--sh-card); padding:18px 20px; margin:0 0 26px; font-weight:600; color:var(--quote); }
.bbb-notice--ok { background:var(--note-green); }
.bbb-notice--err { background:var(--warn-bg); }
.bbb-notice strong { display:block; font-family:var(--font-display); font-weight:900; letter-spacing:-.01em; color:var(--ink); margin-bottom:4px; }

/* ───────────────────── na mieru (dopyt / firmy / väčší odber) ──────────── */
.namieru-hero__cta { display:flex; justify-content:center; align-items:center; gap:16px 22px; flex-wrap:wrap; margin-top:30px; }
.namieru-hero__note { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--green-strong); }
.namieru-hero__note i { font-size:18px; }
.namieru-caps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:var(--maxw); margin-inline:auto; }
.namieru-caps .dcard__ic i { font-size:24px; color:var(--pink); }
.namieru-caps .dcard__d { margin-bottom:0; }
.namieru-caps .dcard__d a { color:var(--pink); text-decoration:underline; font-weight:700; }
.namieru-who { justify-content:center; margin-top:34px; }
.namieru-form { max-width:680px; margin-inline:auto; }
.namieru-form .bbb-form { margin:6px auto 0; }
.namieru-form__sub { max-width:580px; margin:14px auto 0; color:var(--quote); font-size:16px; line-height:1.55; }
@media (max-width:980px) { .namieru-caps { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .namieru-caps { grid-template-columns:1fr; } }

/* ───────────────────────── blog / magazín ─────────────────────────────── */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:var(--maxw); margin:40px auto 0; }
.post-card { display:flex; flex-direction:column; background:#fff; border:var(--border); box-shadow:var(--sh-card); }
.post-card__img { display:block; border-bottom:var(--border); }
.post-card__img img { display:block; width:100%; height:180px; object-fit:cover; }
.post-card__body { padding:20px 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.post-card__date { font-size:11px; letter-spacing:.1em; color:var(--muted); }
.post-card__t { font-size:20px; line-height:1.2; }
.post-card__t a:hover { color:var(--pink); }
.post-card__ex { color:var(--body); font-size:15px; line-height:1.5; margin:0; }
.post-card__more { margin-top:auto; font-weight:800; color:var(--pink); }
.bbb-page .nav-links { display:flex; gap:8px; justify-content:center; margin:40px 0 0; flex-wrap:wrap; }
.bbb-page .page-numbers { display:inline-flex; min-width:42px; height:42px; align-items:center; justify-content:center; padding:0 12px; border:var(--border); background:#fff; font-weight:800; }
.bbb-page .page-numbers.current { background:var(--pink); color:#fff; }

/* ───────────────────────── shop / product listing ─────────────────────── */
ul.products.product-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  max-width:var(--maxw); margin:36px auto 0; padding:0; list-style:none;
}
ul.products.product-grid::before, ul.products.product-grid::after { content:none; display:none; } /* kill Woo clearfix */
ul.products.product-grid li.product {
  width:auto !important; float:none !important; margin:0 !important; clear:none !important;
  display:flex; flex-direction:column; background:#fff; border:var(--border); box-shadow:var(--sh-card); padding:0;
}
.product-card__img { display:block; border-bottom:var(--border); background:var(--warm); }
.product-card__img img { display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:contain; }
.product-card__body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-card__t { font-size:21px; line-height:1.2; margin:0; }
.product-card__t a { color:var(--ink); }
.product-card__t a:hover { color:var(--pink); }
.product-card__price { font-family:var(--font-mono); font-weight:700; font-size:16px; color:var(--green-strong); }
.product-card__price .amount, .product-card__price bdi { color:inherit; }
.product-card__cta { align-self:flex-start; margin-top:6px; }
.shop__empty { text-align:center; color:var(--body); margin:48px 0; }
@media (max-width:900px) { ul.products.product-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { ul.products.product-grid { grid-template-columns:1fr; } }

/* single article */
.article__hero { text-align:center; }
.article__meta { font-size:12px; color:var(--muted); margin-top:12px; letter-spacing:.06em; }
.article__cover { max-width:900px; margin:28px auto 0; }
.article__cover img { width:100%; height:auto; border:var(--border); box-shadow:var(--sh-card); display:block; }
.article__body .entry-content { max-width:760px; margin:32px auto 0; font-size:17px; line-height:1.75; }
.article__body .entry-content p { margin:0 0 16px; }
.article__body .entry-content h2 { font-size:27px; margin:38px 0 14px; }
.article__body .entry-content h3 { font-size:21px; margin:28px 0 10px; }
.article__body .entry-content ul, .article__body .entry-content ol { padding-left:24px; margin:14px 0; }
.article__body .entry-content li { margin:8px 0; }
.article__body .entry-content a { color:var(--pink); text-decoration:underline; font-weight:700; }
.article__body .entry-content blockquote { margin:18px 0; padding:14px 20px; border-left:4px solid var(--pink); background:var(--warm); font-style:italic; }
.article__cta { max-width:760px; margin:56px auto 0; padding:40px 32px; }
.article__cta h2 { color:#fff; }
.article__cta p { color:rgba(255,255,255,.92); margin:10px 0 22px; }
.article__back { max-width:760px; margin:28px auto 0; }
.article__back a { color:var(--ink); font-weight:700; }

/* ───────────────────────── landing pages ──────────────────────────────── */
.landing__hero { text-align:center; padding-bottom:0; }
.landing__hero .badge { margin-bottom:16px; }
.landing__lead { max-width:680px; margin:18px auto 0; font-size:20px; line-height:1.55; color:var(--quote); }
.landing__editor { max-width:1100px; margin:36px auto 0; padding:0 var(--pad-x); }
.landing .entry-content { max-width:760px; margin:36px auto 0; font-size:17px; line-height:1.7; }
.landing .entry-content h2 { font-size:26px; margin:34px 0 12px; }
.landing .entry-content ul { padding-left:22px; margin:14px 0; }
.landing .entry-content li { margin:8px 0; }
.landing .entry-content a { color:var(--pink); text-decoration:underline; font-weight:700; }
.landing__cta { max-width:760px; margin:56px auto 0; padding:40px 32px; }
.landing__cta h2 { color:#fff; }
.landing__cta p { color:rgba(255,255,255,.92); margin:10px 0 22px; }

/* ───────────────────────── FAQ (časté otázky) ─────────────────────────── */
.faq__list { max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq__item { border:var(--border); box-shadow:var(--sh-card); background:#fff; }
.faq__q { display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; list-style:none; padding:18px 22px; font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1.35; }
.faq__q::-webkit-details-marker { display:none; }
.faq__q::marker { content:""; }
.faq__ic { flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:var(--green); border:2px solid var(--ink); transition:transform .2s ease, background .2s ease; }
.faq__ic i { font-size:18px; color:var(--ink); }
.faq__item[open] .faq__ic { background:var(--pink); transform:rotate(45deg); }
.faq__a { padding:0 22px 20px; color:var(--quote); font-size:16px; line-height:1.6; }
.faq__a p { margin:0; }

/* ───────────────────────── ako to funguje (steps) ─────────────────────── */
.step { position:relative; background:#fff; border:var(--border); box-shadow:var(--sh-card); padding:34px 28px 30px; }
.step__num { position:absolute; top:-16px; left:26px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--green); border:var(--border); box-shadow:var(--sh-sm); font-family:var(--font-display); font-weight:900; font-size:16px; }
.step__ic { display:inline-flex; margin-bottom:14px; }
.step__ic i { font-size:46px; color:var(--pink); }
.step__t { font-size:22px; margin-bottom:10px; }
.step__d { color:var(--body); font-size:16px; line-height:1.55; }
.how__cta { text-align:center; margin-top:48px; }

/* ───────────────────────── Phosphor icons (bold) ──────────────────────── */
/* size + colour per context; buttons let the icon inherit the text colour */
.cart-btn i { font-size:18px; }
.burger i { font-size:28px; }
.dcard__ic i { font-size:24px; color:var(--pink); }
.feature__ic i { font-size:18px; color:var(--ink); }
.note i { font-size:22px; color:var(--green-strong); }
.foot-socials a i { font-size:18px; color:var(--foot-link); }
.foot-socials a:hover i { color:#fff; }
.btn i { font-size:1.15em; }
.live-editor__fs-btn i { font-size:16px; }

/* žiadne veľké písmená nikde — prebije predvolené WooCommerce uppercase */
.woocommerce span.onsale,
.woocommerce ul.products li.product .price .from,
.woocommerce ul.order_details li,
.woocommerce-page span.onsale { text-transform:none; }

/* ───────────────────────── responsive ─────────────────── */
@media (max-width:1024px) {
  :root { --pad-x:32px; }
  .editor { grid-template-columns:1fr; }
  .stage { min-height:420px; }
  .kvalita__grid { grid-template-columns:1fr; }
  .site-footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  .cards-3 { grid-template-columns:1fr; }
  .doprava .cards-3 { grid-template-columns:1fr; justify-content:stretch; }
  .hero__title { font-size:clamp(40px,9vw,60px); }
  .cta-band h2 { font-size:clamp(32px,7vw,46px); }
  /* hero stacks; the t-shirt art is desktop-only (editor itself shows the shirt).
     keep .hero__copy padding-bottom as the text→editor gap (editor margin-top is 0). */
  .hero__inner { display:block; }
  .hero__art { display:none; }
  .byo__card { grid-template-columns:1fr; }
  .byo__steps { border-left:0; border-top:var(--border); }
  .post-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  :root { --pad-x:18px; }
  .byo__main { padding:26px 20px; }
  .byo__steps { padding:22px 20px; }
  .byo__title { font-size:30px; }
  .bbb-form__row--split { grid-template-columns:1fr; }
  .live-editor__fs-btn { padding:7px 9px; }
  .live-editor__fs-btn .lbl-open,
  .live-editor__fs-btn .lbl-close,
  .live-editor.is-fullscreen .live-editor__fs-btn .lbl-close { display:none; }
  .site-header__inner { padding:12px var(--pad-x); }
  .site-header__logo img { height:74px; margin:6px 0 -36px; }
  .site-nav { position:fixed; inset:0 0 0 auto; width:min(82vw,340px); transform:translateX(100%);
    flex-direction:column; align-items:flex-start; gap:8px; background:var(--page);
    border-left:var(--border); box-shadow:-24px 0 60px rgba(0,0,0,.18); padding:88px 24px 24px; z-index:80;
    transition:transform .28s ease; }
  .site-nav.is-open { transform:translateX(0); }
  .site-nav a { font-size:20px; padding:8px 0; }
  .burger { display:inline-flex; }
  .nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:opacity .28s ease; z-index:70; }
  .nav-backdrop.is-open { opacity:1; visibility:visible; }
  .cart-btn { padding:7px 13px; font-size:13px; }
  .hero { padding:24px var(--pad-x) 20px; }
  .hero__title { font-size:44px; line-height:.96; }
  .hero__title .u svg { display:none; }
  .hero__sub { font-size:15px; }
  .stage { min-height:300px; }
  .stage__shirt { width:226px; }
  .live-editor .stage--live, .live-editor .stage__frame { min-height:78vh; }
  .live-editor__bar { padding:10px 14px; }
  .live-editor__bar > .mono { font-size:10px; letter-spacing:.12em; }
  .controls { padding:18px 16px; }
  .section-head h2, .kvalita h2 { font-size:28px; }
  .bbb-section { padding:48px var(--pad-x); }
  .site-footer__grid { grid-template-columns:1fr; gap:24px; }
  .site-footer { padding-bottom:96px; }
  .site-footer__bar { flex-direction:column; align-items:flex-start; gap:8px; }

  /* sticky bottom CTA on mobile */
  .sticky-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:65;
    align-items:center; justify-content:space-between; gap:12px;
    padding:14px var(--pad-x); background:var(--page); border-top:var(--border); }
  .sticky-cta__price { display:flex; flex-direction:column; }
  .sticky-cta__amt { font-weight:900; font-size:21px; line-height:1; }
  .sticky-cta__lbl { font-family:var(--font-mono); font-size:10px; color:var(--muted); letter-spacing:.08em; }
  .sticky-cta .btn { flex:1; font-size:15px; padding:14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; scroll-behavior:auto !important; }
}

/* ───────────────────────── Packeta pickup-point widget (checkout) ───────
   The plugin's "choose pickup point" control uses Woo's .button class, so our
   brand button rules pile a hard offset shadow on it; and in "after-rate" mode
   the plugin forces inline-grid + a 150px button, so the text wraps to 3 lines
   over the logo (the janky look). Reset it to a tidy secondary button that sits
   inline with the Packeta logo. Scoped to .packeta-widget-button only. */
.packeta-widget .packeta-widget-button,
.packeta-widget.after-rate .packeta-widget-button {
  display:flex !important; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 4px;
}
.packeta-widget .packeta-widget-button img,
.packeta-widget.after-rate .packeta-widget-button img {
  width:38px !important; height:auto; margin:0 !important; flex:0 0 auto;
}
.woocommerce .packeta-widget-button button.button,
.woocommerce .packeta-widget-button a.button,
.packeta-widget.after-rate .packeta-widget-button button,
.packeta-widget.after-rate .packeta-widget-button a.button,
.packeta-widget-button button, .packeta-widget-button a.button {
  display:inline-flex !important; align-items:center; justify-content:center;
  width:auto !important; min-height:0 !important; white-space:nowrap;
  padding:11px 22px !important; margin:0;
  background:var(--ink); color:#fff; border:2px solid var(--ink); border-radius:0;
  box-shadow:none !important; text-shadow:none;
  font-family:var(--font-display); font-weight:800; font-size:14px !important; line-height:1.2;
  transition:filter .12s ease, background .12s ease;
}
.woocommerce .packeta-widget-button button.button:hover,
.woocommerce .packeta-widget-button a.button:hover,
.packeta-widget-button button:hover, .packeta-widget-button a.button:hover {
  background:var(--pink) !important; color:#fff; filter:none;
}
.woocommerce .packeta-widget-button button.button:active,
.packeta-widget-button button:active { transform:none; box-shadow:none !important; }
.packetery-widget-button-wrapper .packeta-widget-info,
.packeta-widget-info, .packeta-widget-selected-address {
  margin-top:8px; font-size:14px; font-weight:600; color:var(--ink); line-height:1.4;
}

/* ── Checkout progress steps (Košík · Údaje a doprava · Hotovo) ───────────
   Shown at the top of cart + checkout so the customer sees the flow. On-brand:
   sharp square number badges, ink connector line, pink = current, green = done. */
.checkout-steps { margin:0 0 30px; } /* spans the full checkout column → edges line up with the summary + form */
.checkout-steps ol { list-style:none; margin:0; padding:0; display:flex; }
.checkout-steps__i { flex:1; position:relative; text-align:center; }
.checkout-steps__i:not(:first-child)::before {
  content:""; position:absolute; top:21px; right:50%; width:100%; height:2px; background:var(--ink); z-index:0;
}
.checkout-steps__n {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:0 auto 9px;
  border:2px solid var(--ink); background:#fff; color:var(--ink);
  font-family:var(--font-display); font-weight:900; font-size:17px; box-shadow:var(--sh-sm);
}
.checkout-steps__l { display:block; font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--muted); padding:0 4px; }
.checkout-steps__i.is-current .checkout-steps__n { background:var(--pink); color:#fff; }
.checkout-steps__i.is-current .checkout-steps__l { color:var(--ink); }
.checkout-steps__i.is-done .checkout-steps__n { background:var(--green); color:var(--ink); }
.checkout-steps__i.is-done .checkout-steps__l { color:var(--ink); }
@media (max-width:520px) {
  .checkout-steps__n { width:38px; height:38px; font-size:15px; }
  .checkout-steps__i:not(:first-child)::before { top:18px; }
  .checkout-steps__l { font-size:12px; }
}

/* ── Showcase gallery (finished shirts) — renders before the footer site-wide */
.showcase__grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; max-width:var(--maxw); margin-inline:auto; }
.showcase__item {
  display:block; aspect-ratio:1/1; border:var(--border); background:#fff;
  box-shadow:var(--sh-sm); overflow:hidden; cursor:zoom-in;
  transition:transform .1s ease, box-shadow .1s ease;
}
.showcase__item img { width:100%; height:100%; object-fit:cover; display:block; }
.showcase__item:hover { transform:translate(-2px,-2px); box-shadow:var(--sh-card); }
@media (max-width:900px) { .showcase__grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px) { .showcase__grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
.showcase__more { text-align:center; margin-top:30px; }
.showcase__grid--full { margin-top:8px; }
/* Ukážky landing page */
.ukazky__hero .btn { margin-top:22px; }
.ukazky-gallery { padding-top:36px; }
.ukazky-empty { text-align:center; color:var(--body); font-size:18px; }
/* Tables inside article / page content (blog comparisons — DTF vs…, rozlíšenie) */
.entry-content table { width:100%; border-collapse:collapse; border:2px solid var(--ink); box-shadow:var(--sh-sm); background:#fff; margin:24px 0; font-size:15px; }
.entry-content th, .entry-content td { padding:11px 15px; border:1px solid var(--neutral-border); text-align:left; vertical-align:top; line-height:1.5; }
.entry-content thead th { background:var(--warm); font-family:var(--font-display); font-weight:800; border-bottom:2px solid var(--ink); }
.entry-content tbody tr:nth-child(even) { background:#f7f6f4; }
.entry-content tbody td:first-child, .entry-content tbody th:first-child { font-weight:700; }
@media (max-width:600px) { .entry-content table { display:block; overflow-x:auto; } }

/* lightbox overlay (vanilla, driven by theme.js initLightbox) */
body.bbb-lb-lock { overflow:hidden; }
.bbb-lb { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(26,21,18,.92); padding:24px; }
.bbb-lb.is-open { display:flex; }
.bbb-lb__fig { margin:0; max-width:92vw; max-height:88vh; display:flex; }
.bbb-lb__img { max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain; border:3px solid #fff; background:#fff; }
.bbb-lb__close, .bbb-lb__nav { position:absolute; background:#fff; color:var(--ink); border:2px solid var(--ink); cursor:pointer; font-weight:800; line-height:1; z-index:2; display:flex; align-items:center; justify-content:center; }
.bbb-lb__close { top:20px; right:20px; width:46px; height:46px; font-size:26px; border-radius:50%; }
.bbb-lb__nav { top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:30px; }
.bbb-lb__prev { left:20px; }
.bbb-lb__next { right:20px; }
.bbb-lb__close:hover, .bbb-lb__nav:hover { background:var(--pink); color:#fff; }
@media (max-width:600px) {
  .bbb-lb__nav { width:42px; height:42px; font-size:24px; }
  .bbb-lb__prev { left:8px; } .bbb-lb__next { right:8px; }
  .bbb-lb__close { top:10px; right:10px; }
}