/* GeekPara.pl - Vaperia engine (VooSklep build), storefront mirrors store.geekvape.com.
   Tokens read off the live store (Shopify theme Kalles 4.3.7.1, geekvape-pl-research/design,
   2026-10-17): Poppins, ink #222, body text #696969, white page, footer #f6f6f8, orange
   #ee5e08 (hover #a44106), 1px #ddd borders, 40px pill buttons and inputs, product boxes
   with a 1px border, 5px radius and a soft shadow, square badges.
   Orange with WHITE text uses #c94f06 (4.6:1); #ee5e08 under white text is 3.4:1, below
   WCAG AA, so the bright orange is kept for lines, underlines and dark-text fills. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-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: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-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: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-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; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700-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: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --ink: #222222;
  --ink-hover: #000000;
  --paper: #FFFFFF;
  --panel: #F6F6F8;
  --line: #DDDDDD;
  --muted: #696969;
  --muted-2: #6B6B6B;   /* Kalles greys #878787 are 3.6:1 on white, under WCAG AA for small text */
  --faint: #CCCCCC;
  --bronze: #C94F06;    /* orange for text, links and fills under white text */
  --bronze-hover: #A44106;
  --accent: #EE5E08;    /* GeekVape orange: lines, underlines, fills under dark text */
  --accent-soft: #FDEEE4;
  --alert: #E00000;     /* sale red (#ec0101 on the source is 4.59:1, kept a shade darker) */
  --footer-text: #696969;
  --ok: #1F8A6E;
  --maxw: 1200px;
  --pad: 24px;
  --radius: 5px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --pill: 40px;
  --display: 'Poppins', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* hard guard against horizontal wobble on small screens */
html, body { overflow-x: hidden; max-width: 100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: var(--paper); color: var(--ink);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.age-locked { overflow: hidden; }
h1, h2, h3, .pc-name, .cl-name { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 48px 0; }

/* ---------- announcement / notices ---------- */
.announce {
  background: var(--ink); color: #fff; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 16px;
}
.nic-warning {
  background: var(--panel); color: var(--muted); font-size: 11px;
  text-align: center; padding: 8px 16px; border-bottom: 1px solid var(--line);
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 252, 250, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-in { max-width: var(--maxw); margin: 0 auto; height: 64px; padding: 0 var(--pad); display: flex; align-items: center; gap: 24px; }
.wordmark { font-weight: 800; font-size: 22px; letter-spacing: .14em; }
.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav a { font-size: 14px; font-weight: 500; color: var(--ink); }
.main-nav a:hover { color: var(--bronze); }
.nav-div { width: 1px; height: 16px; background: var(--line); }
.header-actions { margin-left: auto; display: flex; gap: 6px; }
.icon-btn { background: none; border: 0; padding: 9px; border-radius: var(--radius); color: var(--ink); position: relative; display: inline-flex; }
.icon-btn:hover { background: var(--panel); }
.cart-count {
  position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px;
  background: var(--bronze); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 100px; display: none; align-items: center; justify-content: center; padding: 0 4px;
}
.cart-count.on { display: inline-flex; }
.nav-toggle { display: none; }

.search-row { border-top: 1px solid var(--line); display: none; padding: 12px 0; }
.search-row.open { display: block; }
.search-row input { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; outline: none; }
.search-row input:focus { border-color: var(--bronze); }
.search-results { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sr-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sr-item img { width: 44px; height: 44px; object-fit: contain; background: var(--panel); border-radius: var(--radius); }
.sr-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--bronze); text-transform: uppercase; }
.sr-name { font-size: 14px; font-weight: 600; }
.sr-price { margin-left: auto; font-weight: 700; font-size: 14px; }

/* ---------- type / headings ---------- */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }
.eyebrow.muted { color: var(--muted-2); }
h1.display { font-size: clamp(34px, 5vw, 60px); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; margin: 10px 0 14px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; margin-top: 8px; }
.section-link { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.section-link:hover { color: var(--bronze); border-color: var(--bronze); }
.lead { font-size: 17px; color: var(--muted); max-width: 600px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; font-size: 14px; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; transition: .2s; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-hover); }
.btn-primary:disabled { background: var(--faint); cursor: not-allowed; }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 14px; font-size: 13px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; padding: 66px var(--pad) 74px; max-width: var(--maxw); margin: 0 auto; align-items: center; }
.hero h1 { font-size: clamp(46px, 6.6vw, 100px); font-weight: 900; line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin: 14px 0 22px; }
.hero h1 em { font-style: normal; color: var(--bronze); }
.hero p { font-size: 18px; color: var(--muted); max-width: 460px; margin-bottom: 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* text-only centered hero (image slot removed) */
.hero.hero-solo { grid-template-columns: 1fr; text-align: center; padding: 88px var(--pad) 92px; max-width: 900px; }
.hero.hero-solo p { margin-left: auto; margin-right: auto; max-width: 520px; }
.hero.hero-solo .hero-cta { justify-content: center; }

/* ---------- grids & cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cat-card { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: #fff; transition: .25s; }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(23,23,26,.08); }
.cat-card .media { aspect-ratio: 16/10; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cat-card .media img { max-height: 85%; object-fit: contain; mix-blend-mode: multiply; }
.cat-card .body { padding: 16px; }
.cat-card h3 { font-size: 17px; font-weight: 700; }
.cat-card .meta { font-size: 13px; color: var(--muted-2); margin: 4px 0 12px; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

.product-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: .25s; position: relative; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(23,23,26,.09); }
.pc-media { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 18px; }
.pc-media img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pc-badge { position: absolute; top: 10px; left: 10px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius); }
.pc-sale { position: absolute; top: 10px; right: 10px; background: var(--bronze); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius); }
.pc-body { padding: 14px 16px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pc-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--bronze); text-transform: uppercase; }
.pc-name { font-size: 15px; font-weight: 600; line-height: 1.35; flex: 1; }
.pc-price { font-size: 15px; font-weight: 800; display: flex; gap: 8px; align-items: baseline; }
.pc-was { font-weight: 500; color: var(--muted-2); text-decoration: line-through; font-size: 13px; }
.pc-add { margin-top: 10px; width: 100%; padding: 11px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; border: 0; border-radius: var(--radius); transition: .2s; }
.pc-add:hover { background: var(--ink-hover); }

/* ---------- SEO blocks / chips / FAQ ---------- */
.seo-copy { max-width: 900px; }
.seo-copy h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 28px 0 10px; }
.seo-copy p { color: var(--muted); margin-bottom: 12px; font-size: 15px; line-height: 1.7; }
.seo-copy a, .in-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.seo-copy a:hover, .in-link:hover { color: var(--bronze); }
.seo-note { font-size: 14px; color: var(--muted); max-width: 760px; margin-top: 20px; line-height: 1.7; }
.kw-note { font-size: 13px; color: var(--muted-2); max-width: 900px; margin-top: 26px; line-height: 1.7; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.chip { background: var(--panel); border: 1px solid var(--line); padding: 9px 16px; border-radius: 100px; font-size: 13px; color: var(--ink); transition: .2s; }
.chip:hover { border-color: var(--bronze); color: var(--bronze); }
.faq-list { max-width: 900px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 600; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--bronze); font-size: 22px; font-weight: 400; }
.faq-list details[open] summary::after { content: '–'; }
.faq-list .faq-a { padding: 0 0 18px; color: var(--muted); max-width: 760px; }

/* ---------- breadcrumb / page head ---------- */
.crumb { font-size: 13px; color: var(--muted-2); padding: 26px 0 0; }
.crumb a:hover { color: var(--bronze); }
.crumb .sep { margin: 0 8px; color: var(--faint); }
.page-head { padding: 18px 0 8px; }

/* ---------- shop layout ---------- */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: start; }
.filter-side { position: sticky; top: 84px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; background: #fff; }
.filter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.filter-head h3 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.filter-head a { font-size: 12px; color: var(--muted-2); }
.filter-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; cursor: pointer; }
.filter-item input { accent-color: var(--bronze); width: 15px; height: 15px; }
.filter-item .cnt { margin-left: auto; color: var(--muted-2); font-size: 12px; }
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.shop-bar .count { font-size: 14px; color: var(--muted); }
.shop-bar select { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; outline: none; }

/* ---------- PDP ---------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 26px 0 40px; align-items: start; }
.pdp-media { aspect-ratio: 1/1; border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; padding: 40px; position: sticky; top: 84px; }
.pdp-media img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp-info h1 { font-size: clamp(30px, 4vw, 48px); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; margin: 10px 0 16px; }
.pdp-stars { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; font-size: 14px; }
.pdp-stars .rv-count { color: var(--muted-2); font-size: 13px; }
.stars { position: relative; display: inline-block; color: #D8D5CC; font-size: 16px; letter-spacing: 2px; line-height: 1; }
.stars::before { content: '★★★★★'; position: absolute; left: 0; top: 0; color: var(--bronze); overflow: hidden; white-space: nowrap; width: var(--fill, 85%); letter-spacing: 2px; }
.pdp-price { font-size: 26px; font-weight: 800; display: flex; align-items: baseline; gap: 12px; }
.pdp-price .was { font-size: 18px; font-weight: 500; color: var(--muted-2); text-decoration: line-through; }
.pdp-vat { font-size: 12px; color: var(--muted-2); margin: 4px 0 18px; }
.pdp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pdp-tag { border: 1px solid var(--line); background: var(--panel); border-radius: 100px; font-size: 12px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 6px; }
.pdp-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.pdp-buy { display: flex; gap: 12px; margin-bottom: 22px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
.qty button { width: 40px; height: 48px; background: none; border: 0; font-size: 18px; color: var(--ink); }
.qty input { width: 44px; text-align: center; border: 0; outline: none; font-weight: 700; font-size: 15px; background: transparent; }
.pdp-desc { color: var(--muted); margin-bottom: 22px; max-width: 520px; }
.trust-list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.trust-list li { list-style: none; display: flex; gap: 10px; align-items: center; }
.trust-list .tick { color: var(--bronze); font-weight: 800; }
.buy-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; max-width: 900px; margin-top: 8px; }
.buy-box h2 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.buy-box p { color: var(--muted); margin-bottom: 16px; }

/* ---------- trust bar / newsletter / footer ---------- */
.trust-bar { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-bar .in { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; padding: 30px var(--pad); max-width: var(--maxw); margin: 0 auto; }
.trust-cell { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.trust-cell svg { color: var(--bronze); flex: none; }

.newsletter { background: var(--ink); color: #fff; text-align: center; padding: 64px var(--pad); }
.newsletter h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; margin: 10px 0; }
.newsletter p { color: var(--muted-2); max-width: 480px; margin: 0 auto 24px; }
.nl-form { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nl-form input { padding: 14px 16px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; border-radius: var(--radius); min-width: 280px; outline: none; }
.nl-form button { padding: 14px 26px; background: #fff; color: var(--ink); border: 0; border-radius: var(--radius); font-weight: 700; }

.site-footer { background: var(--ink); color: var(--footer-text); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; padding: 56px var(--pad) 40px; max-width: var(--maxw); margin: 0 auto; }
.footer-grid h4 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.footer-grid a { display: block; font-size: 14px; color: var(--footer-text); padding: 4px 0; }
.footer-grid a:hover { color: var(--bronze); }
.footer-brand p { color: var(--muted-2); font-size: 13px; max-width: 300px; margin-top: 10px; }
.footer-sub { border-top: 1px solid rgba(255,255,255,.12); }
.footer-sub .in { max-width: var(--maxw); margin: 0 auto; padding: 18px var(--pad); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted-2); }

/* ---------- cart page / drawer ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.cart-lines { display: flex; flex-direction: column; }
.cart-line { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 84px; height: 84px; object-fit: contain; background: var(--panel); border-radius: var(--radius); padding: 8px; }
.cl-info { flex: 1; }
.cl-name { font-weight: 600; font-size: 15px; }
.cl-remove { font-size: 12px; color: var(--muted-2); background: none; border: 0; text-decoration: underline; margin-top: 4px; }
.cl-total { font-weight: 800; }
.summary-card { position: sticky; top: 84px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; background: #fff; }
.summary-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; color: var(--muted); }
.sum-row.total { color: var(--ink); font-weight: 800; font-size: 17px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }
.min-warn { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--muted); padding: 12px; margin: 12px 0; }
.empty-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 60px 20px; text-align: center; }

.overlay { position: fixed; inset: 0; background: rgba(23,23,26,.42); z-index: 90; display: none; animation: fadeIn .2s; }
.overlay.on { display: block; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--paper); z-index: 100; display: none; flex-direction: column; box-shadow: -16px 0 50px rgba(0,0,0,.15); }
.cart-drawer.on { display: flex; animation: drawerIn .3s cubic-bezier(.22,1,.36,1); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 20px; }
.drawer-body .cart-line img { width: 64px; height: 64px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 20px; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- checkout ---------- */
.co-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; padding-bottom: 60px; }
.co-section { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; background: #fff; margin-bottom: 18px; }
.co-section h2 { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; margin-bottom: 18px; }
.step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.span-2 { grid-column: span 2; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.field input, .field select { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); outline: none; }
.field input:focus { border-color: var(--bronze); background: #fff; }
.radio-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; margin-bottom: 10px; transition: .15s; }
.radio-card:has(input:checked) { border-color: var(--ink); background: var(--panel); }
.radio-card input { accent-color: var(--bronze); }
.radio-card .rc-name { font-weight: 600; font-size: 14px; }
.radio-card .rc-eta { font-size: 12px; color: var(--muted-2); }
.radio-card .rc-price { margin-left: auto; font-weight: 700; font-size: 14px; }
.pay-detail { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 14px; display: none; }
.pay-detail.on { display: block; }
.wallet-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; font-family: ui-monospace, monospace; font-size: 13px; display: flex; align-items: center; gap: 10px; justify-content: space-between; word-break: break-all; margin: 10px 0; }
.dropzone { border: 1px dashed var(--faint); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted-2); font-size: 13px; cursor: pointer; }
.dropzone.has { border-color: var(--ok); color: var(--ok); }
.legal-micro { font-size: 11px; color: var(--muted-2); margin-top: 12px; line-height: 1.6; }

/* ---------- BLIK modal / confirmation ---------- */
.modal-card { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--paper); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.3); z-index: 110; width: min(440px, calc(100vw - 32px)); padding: 32px; display: none; text-align: center; }
.modal-card.on { display: block; animation: fadeIn .2s; }
.modal-card h2 { font-size: 24px; font-weight: 900; text-transform: uppercase; margin: 8px 0 6px; }
.modal-card > p { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.chan-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 600; margin-bottom: 10px; transition: .15s; }
.chan-btn:hover { border-color: var(--ink); }
.chan-dot { width: 10px; height: 10px; border-radius: 50%; }
.confirm-wrap { text-align: center; padding: 90px 20px; }
.confirm-badge { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 28px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }

/* ---------- payment-pending modal + proof upload ---------- */
.modal-card.modal-lg { width: min(560px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto; text-align: left; }
.modal-card.modal-lg .eyebrow, .modal-card.modal-lg h2 { display: block; text-align: center; }
.modal-card.modal-lg > p { text-align: center; }
.pending-lines { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px 16px; margin: 16px 0; font-size: 13px; }
.pending-lines .pl-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--panel); }
.pending-lines .pl-row:last-child { border-bottom: 0; font-weight: 800; }
/* the "I JUST PAID" proof box - deliberately loud so it never blends in */
.just-paid { background: #F5EEE3; border: 2px solid var(--bronze); border-radius: var(--radius-md); padding: 20px; margin-top: 18px; }
.just-paid h3 { font-size: 16px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); margin-bottom: 6px; text-align: center; }
.just-paid .dropzone { background: #fff; border: 2px dashed var(--bronze); color: var(--bronze); font-weight: 600; font-size: 14px; padding: 30px 16px; }
.dropzone [data-dz-text] { display: block; line-height: 1.5; overflow-wrap: break-word; }
@media (max-width: 560px) {
  .just-paid { padding: 14px; }
  .just-paid .dropzone { padding: 20px 10px; font-size: 13px; }
}
.just-paid .dropzone.has { border-style: solid; background: #eef4ee; border-color: var(--ok); color: var(--ok); }
.just-paid .btn { font-weight: 800; letter-spacing: .06em; }
.blik-alt { border-top: 1px dashed var(--line); margin-top: 18px; padding-top: 16px; }
.blik-alt-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.blik-alt .chan-btn { margin-bottom: 8px; }
/* step 2: dedicated BLIK payment panel */
.pay-panel { max-width: 560px; margin: 30px auto 70px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.pay-panel h2 { font-size: 26px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; margin: 8px 0 14px; }
.pay-panel .field input { font-size: 20px; letter-spacing: .3em; text-align: center; font-weight: 700; }
/* BLIK expiry alert - deliberately loud */
.blik-expiry { max-width: 520px; margin: 24px auto 0; background: #FBF1D6; border: 2px solid #C99A3B; border-radius: var(--radius-md); padding: 18px 20px; font-size: 15px; line-height: 1.6; color: #6b5518; text-align: left; }
.blik-expiry strong { display: block; font-size: 16px; margin-bottom: 4px; color: #7d5e14; }
/* processing spinner */
.proc-spin { width: 46px; height: 46px; border: 3px solid var(--line); border-top-color: var(--bronze); border-radius: 50%; margin: 0 auto 22px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- resume-payment bar ---------- */
.resume-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 84; display: block;
  background: #FBF1D6; border-top: 2px solid #C99A3B; color: #6b5518;
  padding: 12px 18px; text-align: center; font-size: 14px; font-weight: 600; text-decoration: none; }
.resume-bar:hover { background: #f7e9c4; }
body.has-resume .social-toast { bottom: 64px; }
body.has-resume .lc-bubble, body.has-resume .lc { bottom: 68px; }

/* ---------- social-proof toast ---------- */
.social-toast { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 13px 34px 13px 14px;
  box-shadow: 0 14px 40px rgba(23,23,26,.14); max-width: 320px; animation: fadeIn .35s; }
.social-toast[hidden] { display: none; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-top: 5px; flex: none; }
.st-who { font-size: 12px; color: var(--muted); }
.st-prod { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.35; margin: 1px 0; }
.st-prod:hover { color: var(--bronze); }
.st-ago { font-size: 11px; color: var(--muted-2); }
.st-close { position: absolute; top: 6px; right: 6px; background: none; border: 0; color: var(--muted-2); font-size: 12px; padding: 4px; }
.st-close:hover { color: var(--ink); }
@media (max-width: 560px) { .social-toast { left: 10px; right: 10px; bottom: 10px; max-width: none; } }

/* ---------- bold WhatsApp button + on-page chat panel ---------- */
.wa-btn { display: block; width: 100%; background: #25D366; color: #fff; border: 0; border-radius: var(--radius);
  padding: 16px 20px; font-size: 15px; font-weight: 800; letter-spacing: .06em; cursor: pointer; transition: .2s;
  box-shadow: 0 8px 24px rgba(37,211,102,.35); text-align: center; }
.wa-btn:hover { background: #1eb355; transform: translateY(-1px); }
.wa-btn.chat { background: var(--ink); box-shadow: 0 8px 24px rgba(23,23,26,.3); }
.wa-btn.chat:hover { background: var(--bronze-hover); }
.paychat { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 14px; margin-top: 6px; }
.paychat-head { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.p24-chat [data-open-chat], .p24-chat [data-blik-chan] { display: none; }
.p24-chat .paychat { margin-top: 0; }
.p24-chat .p24-hide { display: none; }

/* Colour families in the supplier catalogue are distinct real SKUs. These
   controls link to the chosen SKU before it enters the basket, so packing and
   order records always retain the exact finish. */
.variant-picker{margin:18px 0 16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.variant-picker>b{display:block;font-size:14px}.variant-picked{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.variant-options{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.variant-option{padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:12px;font-weight:700;text-decoration:none;line-height:1.2}
.variant-option:hover{border-color:var(--ink)}.variant-option.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.variant-picker small{display:block;margin-top:10px;color:var(--muted);font-size:12px;line-height:1.45}.pc-add.pick-colour{display:block;text-align:center;text-decoration:none}
.paychat-msgs { min-height: 160px; max-height: 320px; overflow-y: auto; border-radius: 8px; margin-bottom: 10px; }
.lc-read { font-size: 10px; }

/* ---------- built-in live chat ---------- */
.lc-bubble { position: fixed; right: 18px; bottom: 18px; z-index: 95; width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); color: #fff; border: 0; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(23,23,26,.3); cursor: pointer; transition: .2s; }
.lc-bubble:hover { transform: translateY(-2px); background: var(--bronze-hover); }
.lc-bubble[hidden] { display: none; }
.lc-badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; border-radius: 100px;
  background: var(--bronze); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.lc { position: fixed; right: 18px; bottom: 18px; z-index: 96; width: min(360px, calc(100vw - 24px));
  height: min(520px, calc(100vh - 90px)); background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 60px rgba(23,23,26,.25); display: flex; flex-direction: column; overflow: hidden; animation: fadeIn .2s; }
.lc[hidden] { display: none; }
.lc-head { background: var(--ink); color: #fff; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.lc-head b { font-size: 14px; letter-spacing: .04em; }
.lc-status { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: 11px; color: #9A9A93; }
.lc-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #9A9A93; }
.lc-status.on { color: #8fce8f; } .lc-status.on::before { background: #4f7a4f; }
.lc-x { background: none; border: 0; color: #9A9A93; font-size: 14px; cursor: pointer; padding: 4px; }
.lc-x:hover { color: #fff; }
.lc-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); }
.lc-m { max-width: 82%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; overflow-wrap: break-word; white-space: pre-line; }
.lc-m.c { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 3px; }
.lc-m.a { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.lc-m.b { align-self: flex-start; background: #F5EEE3; border: 1px solid var(--bronze); border-bottom-left-radius: 3px; color: #5c4a2e; }
.lc-m .lc-t { display: block; font-size: 10px; color: var(--muted-2); margin-top: 3px; }
.lc-m.c .lc-t { color: rgba(255,255,255,.5); }
.lc-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--paper); }
.lc-form input { flex: 1; border: 1px solid var(--line); border-radius: 100px; padding: 10px 16px; font-size: 14px; outline: none; background: #fff; }
.lc-form input:focus { border-color: var(--bronze); }
.lc-send { width: 42px; height: 42px; border-radius: 50%; background: var(--bronze); color: #fff; border: 0; font-size: 15px; cursor: pointer; flex: none; }
.lc-send:hover { background: var(--bronze-hover); }
.lc-attach { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; flex: none; transition: .2s; }
.lc-attach:hover { border-color: var(--bronze); background: var(--paper); }
.lc-m .lc-img { display: block; max-width: 200px; max-height: 200px; border-radius: 8px; margin-top: 6px; }
.lc-m .lc-file { display: inline-block; margin-top: 6px; font-weight: 700; text-decoration: underline; color: inherit; }
.lc-m .lc-link { text-decoration: underline; color: inherit; font-weight: 600; word-break: break-all; }
.lc-prod { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; }
.lc-prod img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.lc-prod-i { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; }
.lc-prod-i b { font-weight: 700; line-height: 1.3; }
.lc-prodpick { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 8px; margin: 0 10px 8px; }
.paychat .lc-prodpick { margin: 0 0 8px; }
.lc-prodpick input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; outline: none; }
.lc-prodpick input:focus { border-color: var(--bronze); }
.lc-pp-list { max-height: 190px; overflow-y: auto; }
.lc-pp-item { display: flex; gap: 8px; align-items: center; width: 100%; background: none; border: 0;
  border-bottom: 1px solid var(--line); padding: 7px 2px; cursor: pointer; text-align: left; font-size: 12.5px; font-family: inherit; }
.lc-pp-item:last-child { border-bottom: 0; }
.lc-pp-item:hover { background: var(--paper); }
.lc-pp-item img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.lc-pp-item span { flex: 1; min-width: 0; }
.lc-pp-none { font-size: 12px; color: var(--muted); padding: 6px 2px; }
@media (max-width: 560px) { .lc { right: 8px; bottom: 8px; } .lc-bubble { right: 12px; bottom: 12px; } }

/* ---------- per-method payment minimum ---------- */
.rc-min { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--bronze); }
.radio-card.locked { opacity: .55; cursor: not-allowed; }
.radio-card.locked .rc-min { color: #A6683C; }
.radio-card.locked input { cursor: not-allowed; }

/* ---------- blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.blog-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #fff; color: var(--ink); text-decoration: none; transition: .2s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(23,23,26,.09); }
.blog-card img { width: 100%; height: 170px; object-fit: cover; }
.blog-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-body h2 { font-size: 17px; line-height: 1.35; }
.blog-card-body p { font-size: 13.5px; color: var(--muted); line-height: 1.55; flex: 1; }
.blog-more { font-size: 12.5px; font-weight: 700; color: var(--bronze); letter-spacing: .04em; }
.blog-cover { width: 100%; max-height: 380px; object-fit: cover; border-radius: 12px; margin-bottom: 22px; }
.blog-body ol, .blog-body ul { margin: 0 0 18px 22px; }
.blog-body li { margin-bottom: 8px; line-height: 1.65; }

/* ---------- misc ---------- */
.divider-top { border-top: 1px solid var(--line); }
.hide { display: none !important; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 13px; padding: 12px 22px; border-radius: 100px; z-index: 120; display: none; }
.toast.on { display: block; animation: fadeIn .2s; }

/* ---------- age gate (18+) ---------- */
.age-gate { position: fixed; inset: 0; z-index: 300; background: rgba(23,23,26,.6); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.age-gate[hidden] { display: none; }
.age-card { background: var(--paper); border-radius: var(--radius-lg); max-width: 460px; width: 100%; padding: 40px 32px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.age-card h2 { font-size: clamp(22px, 5vw, 28px); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; margin: 10px 0 8px; }
.age-card p { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.age-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.age-card .legal-micro { margin-top: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 48px; gap: 32px; }
  .section-head { flex-wrap: wrap; align-items: start; }
  .shop-layout { grid-template-columns: 1fr; }
  .filter-side { position: static; }
  .pdp { grid-template-columns: 1fr; gap: 28px; }
  .pdp-media { position: static; }
  .cart-layout, .co-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding: 44px var(--pad) 32px; }
  .main-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; padding: 16px 20px; gap: 12px; }
  .main-nav.open { display: flex; }
  .nav-div { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .section { padding: 36px 0; }
  .header-in { gap: 12px; }
  .announce { padding: 8px 12px; letter-spacing: .08em; }
  .product-grid, .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pc-body { padding: 12px; }
  .pc-add { font-size: 11px; letter-spacing: .04em; padding: 10px 6px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.span-2 { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .cart-line { flex-wrap: wrap; }
  .cart-line img { width: 64px; height: 64px; }
  .cl-total { margin-left: auto; }
  .pdp-media { padding: 20px; }
  .pdp-buy { flex-wrap: wrap; }
  .pdp-buy .btn { min-width: 200px; }
  .co-section, .summary-card { padding: 18px; }
  .buy-box { padding: 20px; }
  .nl-form input { min-width: 0; width: 100%; }
  .nl-form { width: 100%; }
  .hero h1 { font-size: clamp(40px, 12vw, 64px); }
  .shop-bar { flex-wrap: wrap; }
}


/* ================================================================
   VOOPOO layer: the storefront mirrors shop.voopoo.com
   (lime notice strip, white header with a centred menu, square white
   product cards with red prices, pill buttons, no shadows anywhere)
   ================================================================ */
body { background: var(--paper); }
.announce { background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 9px 16px; }
.announce-warn { color: var(--alert); font-weight: 600; }
.site-header { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--line); }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.wm-tld { background: var(--accent); color: var(--ink); padding: 0 6px; margin-left: 3px; border-radius: 6px; font-weight: 600; }
.cart-count { background: var(--accent); color: var(--ink); }
.icon-btn { border-radius: var(--pill); }
.icon-btn:hover { background: var(--paper); }

/* menu: Strona główna / Katalog / Akcesoria / Pomoc / Kontakt / Poradniki */
.main-nav a, .nav-drop-btn { font-size: 16px; font-weight: 600; color: var(--ink); }
.main-nav > a:hover, .nav-drop-btn:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.nav-drop { position: relative; }
.nav-drop-btn { background: none; border: 0; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; padding: 8px 0; cursor: pointer; }
.nav-drop-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; z-index: 60; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: 9px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav-drop-menu a:hover { background: var(--accent-soft); }
@media (min-width: 961px) {
  .header-in { height: 72px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; }
  .main-nav { justify-content: center; gap: 32px; }
  .header-actions { margin-left: 0; }
}
@media (max-width: 960px) {
  .main-nav { top: 100%; background: #fff; gap: 4px; padding: 12px 20px 18px; }
  .main-nav > a, .nav-drop-btn { padding: 10px 0; width: 100%; }
  .nav-drop { width: 100%; }
  .nav-drop-btn svg { display: none; }
  .nav-drop-menu { display: block; position: static; transform: none; border: 0; padding: 0 0 6px 14px; min-width: 0; }
  .nav-drop-menu a { padding: 8px 0; }
}

/* type */
h1, h2, h3, h4 { font-family: var(--display); }
h1.display, .hero h1, .section-head h2, .pdp-info h1, .newsletter h2 { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }
h1.display { font-size: clamp(32px, 4vw, 46px); line-height: 1.1; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; }
.eyebrow { color: var(--muted-2); font-weight: 600; letter-spacing: .14em; }
.lead { color: var(--muted); }
.in-link { text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 2px; }
.section-link { border-bottom: 2px solid var(--accent); }
.section-link:hover { color: var(--ink); border-color: var(--ink); }

/* buttons: VOOPOO pills, no uppercase, no shadow */
.btn { border-radius: var(--pill); font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: 0; text-transform: none; padding: 13px 30px; border: 1px solid var(--ink); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-hover); color: #fff; }
.btn-primary:disabled { background: var(--faint); border-color: var(--faint); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn-accent:hover { background: #DAEE00; }
.btn-sm { padding: 8px 16px; font-size: 14px; }

/* inputs are pills too (--input-border-radius: 40px) */
.search-row input, .field input, .field select, .shop-bar select, .locker-search input, .nl-form input { border-radius: var(--pill); }
.field textarea { border-radius: var(--radius-md); }
.qty { border-radius: var(--pill); border: 1px solid var(--ink); }

/* product cards: square white card, photo, name, red price */
.product-grid { gap: 12px; }
.product-card { border: 0; border-radius: 0; background: #fff; }
.product-card:hover { transform: none; box-shadow: none; }
.product-card:hover .pc-media img { transform: scale(1.03); }
.pc-media { background: #fff; border-radius: 0; padding: 24px; }
.pc-media img { transition: transform .35s ease; }
.pc-body { border-top: 0; padding: 14px 22px 22px; }
.pc-eyebrow { display: none; }
.pc-name { font-family: var(--display); font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.pc-opts { font-size: 13px; color: var(--muted); }
.pc-price { font-family: var(--display); color: var(--alert); font-size: 20px; font-weight: 700; }
.pc-was { color: var(--muted-2); font-size: 14px; font-weight: 400; text-decoration: line-through; margin-left: 8px; }
.pc-sale { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--alert); color: #fff; border-radius: var(--pill); padding: 5px 12px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pc-add { background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--pill); font-weight: 500; text-transform: none; letter-spacing: 0; }
.pc-add:hover { background: var(--ink); color: #fff; }
.pc-fits { font-size: 13px; }

/* category tiles */
.cat-card { border: 0; border-radius: 0; background: #fff; }
.cat-card:hover { transform: none; box-shadow: none; }
.cat-card .media { background: #fff; aspect-ratio: 4/3; }
.cat-card h3 { font-family: var(--display); font-size: 22px; font-weight: 600; text-transform: none; color: var(--ink); }
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cat-grid-6 { grid-template-columns: repeat(6, 1fr); }
.cat-grid-6 .cat-card .media { aspect-ratio: 1/1; }
.chip { border-radius: var(--pill); background: #fff; }
.chip:hover { border-color: var(--ink); background: var(--accent); color: var(--ink); }

/* hero banner */
.hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.05; letter-spacing: 0; text-transform: none; }
.hero h1 em { color: var(--ink); background: var(--accent); font-style: normal; padding: 0 .12em; }
.hero-points li::before { background: var(--accent); border: 1px solid var(--ink); }
.hero-visual { background: #fff; border-radius: 0; }
.hero-tag { background: var(--ink); }
.hero-tag b { color: var(--accent); }

/* product page: grey plate, red price, pill options, stacked buttons */
.pdp-media { border: 0; border-radius: 0; background: var(--panel); }
.pdp-info h1 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; line-height: 1.15; }
.pdp-price { font-family: var(--display); color: var(--alert); font-size: 32px; font-weight: 700; }
.pdp-price .was { color: var(--muted-2); }
.pdp-tag { border-radius: var(--pill); background: #fff; }
a.pdp-tag:hover { border-color: var(--ink); }
.variant-picker { background: transparent; }
.variant-option { display: inline-flex; align-items: center; gap: 7px; padding: 5px 16px 5px 5px; background: #fff; border: 1px solid rgba(51, 51, 51, .45); border-radius: var(--pill); cursor: pointer; font-family: inherit; font-size: 15px; color: var(--ink); }
.variant-option img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; background: var(--panel); }
.variant-option:hover { border-color: var(--ink); }
.variant-option.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pdp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 12px 0 8px; max-width: 1100px; }
.pdp-facts h2, .faq-title { font-size: 24px; font-weight: 600; margin: 28px 0 14px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.spec-table th, .spec-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table tbody th { width: 42%; color: var(--muted); font-weight: 600; background: #fff; }
.spec-table thead th { background: var(--ink); color: #fff; font-weight: 600; }
.spec-table thead th a { color: #fff; }
.seo-copy .spec-table, .blog-body .spec-table { margin: 14px 0 22px; }
.seo-copy ul { margin: 0 0 14px 20px; color: var(--muted); }
.seo-copy li { margin-bottom: 6px; line-height: 1.6; }
.box-list { padding: 0; }
.box-list li { list-style: none; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); position: relative; font-size: 15px; }
.box-list li::before { content: ''; position: absolute; left: 4px; top: 16px; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); border: 1px solid var(--ink); }
.specnote { font-size: 12px; color: var(--muted-2); margin-top: 10px; }
.cl-opt { font-size: 12px; color: var(--muted); margin-top: 2px; }
.buy-box { border: 0; background: #fff; border-radius: 0; }

/* trust strip, newsletter, footer */
.trust-bar { background: #fff; }
.trust-cell svg { color: var(--ink); }
.newsletter { background: var(--ink); }
.newsletter .eyebrow { color: var(--accent); }
.nl-form button { background: var(--accent); color: var(--ink); border-radius: var(--pill); }
.site-footer { background: var(--ink); }
.site-footer .wordmark { color: #fff; }
.footer-grid a:hover, .site-footer .footer-grid a:hover { color: var(--accent); }
.footer-grid h4 { color: #B8B8B8; }
.footer-disclaimer { font-size: 12px !important; color: var(--muted-2); line-height: 1.6; margin-top: 12px; }
.faq-list summary::after { color: var(--ink); }
.just-paid { background: var(--accent-soft); }
.just-paid .dropzone { color: var(--ink); }

/* 18+ gate in the style of VOOPOO's WARNING box */
.age-gate { background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.age-card { background: rgba(24, 24, 24, .62); border: 1px solid rgba(255, 255, 255, .85); border-radius: 4px; color: #fff; max-width: 650px; padding: 36px 30px 32px; text-align: left; box-shadow: none; }
.age-card h2 { color: #fff; text-align: center; text-transform: uppercase; font-weight: 500; font-size: 30px; margin: 0 0 16px; }
.age-card p { color: #fff; font-size: 18px; line-height: 1.6; }
.age-actions { justify-content: space-around; }
.age-card .btn { border-radius: 0; text-transform: uppercase; font-size: 15px; padding: 9px 14px; }
.age-card .btn-outline { background: transparent; color: #fff; border-color: #fff; }
.age-card .btn-outline:hover { background: #fff; color: var(--ink); }
.age-card .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.age-card .eyebrow { color: var(--accent); }

@media (max-width: 1100px) { .cat-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .pdp-facts { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 560px) {
  .cat-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .pc-body { padding: 12px 14px 16px; }
  .pc-name, .pc-price { font-size: 17px; }
  .wordmark { font-size: 22px; }
  .age-card p { font-size: 16px; }
  .spec-table th, .spec-table td { padding: 8px; font-size: 14px; }
  .seo-copy .spec-table, .blog-body .spec-table { display: block; overflow-x: auto; }
}

/* grid columns may shrink below their content's min width: a long variant
   name or spec value used to widen the product column past the screen */
.pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pdp > *, .pdp-facts > *, .shop-layout > *, .cart-layout > * { min-width: 0; }
.variant-option { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 960px) { .pdp { grid-template-columns: minmax(0, 1fr); } }
/* the breadcrumb's own padding used to override the container gutter, so on
   a phone the trail touched the screen edge */
.crumb.wrap { padding: 26px var(--pad) 0; }

/* Paczkomat picker */
.locker-box { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.locker-box[hidden] { display: none; }
.locker-box.need { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(238, 45, 67, .15); }
.locker-box > b { display: block; font-size: 15px; }
.locker-search { display: flex; gap: 8px; margin: 10px 0 6px; }
.locker-search input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.locker-geo { background: none; border: 0; padding: 4px 0; font-size: 13px; font-weight: 600; text-decoration: underline; color: var(--ink); cursor: pointer; }
.locker-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
.locker-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; font: inherit; font-size: 13px; }
.locker-item:hover { border-color: var(--bronze); }
.locker-item span, .locker-item small { grid-column: 1 / -1; }
.locker-item small { color: var(--muted); }
.locker-item .locker-dist { grid-column: 2; grid-row: 1; color: var(--muted); font-size: 12px; }
.locker-empty { font-size: 13px; color: var(--muted); }
.locker-picked { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border: 2px solid var(--bronze); border-radius: var(--radius); background: #fff; font-size: 13px; }
.locker-picked[hidden] { display: none; }
.locker-picked small { color: var(--muted); }
.locker-change { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }

/* "Pasuje do" on pod and coil pages and cards */
.pdp-fits { margin: 0 0 18px; padding: 12px 14px; background: var(--panel); border-radius: var(--radius-md); }
.pdp-fits > b { display: block; font-size: 13px; margin-bottom: 8px; }
.pdp-fits-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-fits-list a { background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 5px 11px; font-size: 12px; font-weight: 600; }
.pdp-fits-list a:hover { border-color: var(--bronze); }
.pdp-fits-list a.more { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.pc-fits { font-size: 12px; color: var(--muted); line-height: 1.4; }

.filter-head .fh-title { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* "Z poradnika" links on category and product pages */
.guides { margin: 28px 0 0; padding: 16px 18px; background: var(--panel); border-radius: var(--radius-md); max-width: 900px; }
.guides ul { margin: 8px 0 0; padding: 0; }
.guides li { list-style: none; padding: 5px 0; }
.guides a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* photos are on white: let them sit on the grey chip */
.variant-option img { mix-blend-mode: multiply; }

/* a colour without its own photo: a dot instead of a thumbnail */
.variant-option .vo-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); flex: none; }
.variant-option.on .vo-dot { border-color: rgba(255, 255, 255, .7); }

/* ---- phones: finger-size controls, and no zoom-on-focus (iPhone zooms the
   page into any field under 16 px, mid-checkout) ---- */
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]), select, textarea { font-size: 16px !important; }
  .field input, .field select, .shop-bar select, .lc-form input { min-height: 44px; }
  .qty input { align-self: stretch; min-height: 44px; }
  .cart-line .qty, .cart-line .qty button { height: 40px !important; }
  .cart-line .qty button { width: 40px !important; }
  .cart-line .qty input { min-height: 40px; width: 36px !important; }
  .cl-remove { min-height: 40px; padding: 0 8px; font-size: 13px; }
  .locker-geo { min-height: 40px; }
}

/* fixes after the first VOOPOO preview (2026-10-14): at the 1440 px width the
   page head lost its gutter (its own padding rule reset .wrap's), and a 400 px
   photo pushed the square card plate taller than wide */
.wrap.page-head { padding: 18px var(--pad) 8px; }
.pc-media { position: relative; overflow: hidden; min-height: 0; }
.pc-media img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); max-height: none; object-fit: contain; }
@media (max-width: 560px) { .pc-media img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); } }

/* home, as on shop.voopoo.com: series strip, pill tabs over product rows,
   feature block */
.series-strip { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.series-strip .wrap { display: flex; justify-content: space-around; align-items: center; gap: 24px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; }
.series-strip a { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5vw, 64px); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.series-strip a:hover { background: var(--accent); }
.tabs { margin-top: 6px; }
.tab-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.tab-btn { background: #fff; border: 1px solid var(--line); border-radius: var(--pill); padding: 8px 18px; font-family: var(--display); font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.tab-btn:hover { border-color: var(--ink); }
.tab-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tab-panel { display: none; }
.tab-panel.on { display: block; }
.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 12px) / 5); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.hscroll > * { scroll-snap-align: start; }
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; align-items: center; }
.fs-media { display: flex; justify-content: center; gap: 0; background: var(--panel); padding: 30px; }
.fs-media img { width: 48%; aspect-ratio: 1/1; object-fit: contain; mix-blend-mode: multiply; }
.fs-copy { padding: 40px 48px; }
.fs-copy h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 600; margin: 10px 0 14px; line-height: 1.15; }
.fs-copy p { color: var(--muted); margin-bottom: 22px; }
.hero.hero-split { max-width: var(--maxw); }
.hero-visual { background: var(--panel); }
@media (max-width: 1100px) { .hscroll { grid-auto-columns: calc((100% - 2 * 12px) / 3); } }
@media (max-width: 760px) {
  .hscroll { grid-auto-columns: 72%; }
  .feature-split { grid-template-columns: 1fr; }
  .fs-copy { padding: 26px 20px; }
  .series-strip .wrap { justify-content: center; gap: 14px 22px; }
}

/* hero: copy left, VOOPOO packshots right on the grey plate (restored from the
   engine's split hero, VOOPOO colours) */
.hero.hero-split { grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px var(--pad) 56px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; padding: 0; }
.hero-points li { list-style: none; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.hero-points li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); }
.hero-visual { position: relative; aspect-ratio: 1/1; background: var(--panel); border-radius: 0; overflow: hidden; }
.hero-visual img { position: absolute; object-fit: contain; mix-blend-mode: multiply; }
.hero-visual .hv-0 { width: 60%; left: 20%; top: 8%; z-index: 3; }
.hero-visual .hv-1 { width: 40%; left: -2%; top: 30%; z-index: 2; }
.hero-visual .hv-2 { width: 40%; right: -2%; top: 30%; z-index: 2; }
.hero-tag { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4; background: var(--ink); color: #fff; border-radius: var(--pill); padding: 10px 18px; display: flex; gap: 12px; align-items: baseline; font-size: 14px; font-weight: 600; white-space: nowrap; }
.hero-tag b { color: var(--accent); font-weight: 700; }
@media (max-width: 960px) {
  .hero.hero-split { grid-template-columns: 1fr; padding-top: 28px; }
  .hero-visual { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) { .hero-tag { font-size: 12px; padding: 8px 14px; } }
/* product page buttons as on shop.voopoo.com: outline "add", dark "buy now" */
.pdp-buy { margin-bottom: 10px; }
.pdp-buynow { margin-bottom: 22px; }

/* product page: "Kolory" tiles, first steps, parts costs */
.colours-sec { padding-bottom: 8px; }
.colours-sec .seo-copy p:last-child { margin-bottom: 18px; }
.colour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.colour-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); font-family: inherit; color: var(--ink); text-align: left; cursor: pointer; }
div.colour-tile { cursor: default; }
.colour-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #F5F5F5; border-radius: var(--radius); margin-bottom: 6px; }
.colour-tile .ct-dot { width: 100%; aspect-ratio: 1; border-radius: var(--radius); background: var(--panel); margin-bottom: 6px; border: 1px solid var(--line); }
.colour-tile b { font-size: 15px; font-weight: 700; line-height: 1.25; }
.colour-tile span:not(.ct-dot) { font-size: 13px; color: var(--muted); line-height: 1.4; }
button.colour-tile:hover { border-color: var(--ink); }
button.colour-tile.on { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: -2px; }
button.colour-tile.on b::after { content: "Wybrany"; display: inline-block; margin-left: 8px; padding: 1px 8px; background: var(--accent); border-radius: var(--pill); font-size: 11px; font-weight: 800; vertical-align: 2px; }
.steps-list { margin: 0; padding-left: 22px; }
.steps-list li { margin-bottom: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.parts-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); font-weight: 700; text-align: left; }
.parts-table a { color: var(--ink); }
@media (max-width: 640px) { .colour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .colour-tile b { font-size: 14px; } }

/* home: categories, pod/pod-mod/mod chooser, why us, guides */
.cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cat-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.cat-card:hover { border-color: var(--ink); }
.cat-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #F5F5F5; border-radius: var(--radius); margin-bottom: 8px; }
.cc-name { font-size: 17px; font-weight: 800; }
.cc-line { font-size: 13px; color: var(--muted); line-height: 1.45; flex: 1; }
.cc-count { font-size: 13px; font-weight: 700; margin-top: 6px; }
.choose-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.choose-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.choose-card img { width: 120px; height: 120px; object-fit: contain; background: #F5F5F5; border-radius: var(--radius-md); }
.choose-card h3 { font-size: 22px; font-weight: 800; }
.choose-card p { color: var(--muted); font-size: 15px; line-height: 1.6; flex: 1; }
.choose-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.choose-card li { padding: 4px 12px; background: var(--paper); border-radius: var(--pill); font-size: 13px; font-weight: 700; }
.choose-card .btn { align-self: flex-start; }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.why-card { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); border-top: 4px solid var(--accent); }
.why-card b { display: block; font-size: 17px; margin-bottom: 6px; }
.why-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.blog-card-body h3 { font-size: 17px; line-height: 1.35; }
.blog-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .choose-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .why-grid { grid-template-columns: 1fr; } .cc-line { display: none; } }

/* audit 2026-10-15: footer headings are h2 (heading order), footer text readable on ink */
.footer-grid .footer-h { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #B8B8B8; margin-bottom: 14px; font-family: var(--display); }
.site-footer { --muted-2: #BDBDBD; }
.pdp-lowest { font-size: 12px; color: var(--muted); margin: -12px 0 16px; }
.pc-lowest { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* phone fixes 2026-10-15: the checkout column may shrink below its widest child (a saved IBAN
   stretched it 10 px past a phone screen, cutting off every section edge), and the receipt
   dropzone is a <label>, so it needs to be a block or its dashed border wraps like text */
.co-layout > *, .cart-layout > * { min-width: 0; }
.dropzone { display: block; }

/* paysafecard how-to at checkout: it had no styles, so on a phone it showed in the browser's
   default size and its "Kup tutaj" link did not look like a link (2026-10-15) */
.psc-how { font-size: 14px; line-height: 1.55; margin: 6px 0 12px; }
.psc-how > b { display: block; font-size: 15px; margin-bottom: 6px; }
.psc-how ol { padding-left: 20px; margin: 0 0 8px; }
.psc-how li { margin: 4px 0; }
.psc-how a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* phone review 2026-10-15: blog comparison tables scroll inside the column instead of
   poking past the screen; the Drag 2/3 feature photo box was ~500 px of grey on a phone */
.blog-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .fs-media { padding: 16px; }
  .fs-media img { width: 44%; max-height: 200px; }
}

/* payment chat on a phone (2026-10-15): the text field may shrink, so the send button never
   falls off the screen next to the 📎 and 🛍 buttons */
.lc-form input[type="text"], .lc-form input:not([type]) { min-width: 0; }
.lc-form > * { flex-shrink: 0; }
.lc-form input { flex-shrink: 1; }

/* ================================================================
   GeekVape layer (2026-10-17): the storefront mirrors store.geekvape.com
   (Kalles): orange announcement bar, white sticky header with a centred
   menu, bordered and shadowed product boxes on white, uppercase pill
   buttons, light-grey footer, dark 18+ box. Comes last, so it wins over
   the VOOPOO layer above, which the engine was built with.
   ================================================================ */
body { font-size: 15px; line-height: 1.7; color: var(--muted); background: #fff; }
h1, h2, h3, h4, .pc-name, .cc-name, .wordmark, .pdp-price, .pc-price { color: var(--ink); }
.announce { background: var(--bronze); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .02em; padding: 11px 16px; }
.announce a { color: #fff; text-decoration: underline; }
.announce-warn { color: #fff; font-weight: 700; }
.nic-warning { background: var(--ink); color: #fff; border-bottom: 0; font-size: 12px; }
.site-header { background: #fff; border-bottom: 1px solid var(--line); box-shadow: none; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: 0; color: var(--ink); }
.wm-tld { background: none; color: var(--bronze); padding: 0; margin-left: 0; border-radius: 0; font-weight: 700; }
.cart-count { background: var(--ink); color: #fff; }
.icon-btn:hover { background: none; color: var(--bronze); }
.main-nav a, .nav-drop-btn { font-size: 14px; font-weight: 500; color: var(--ink); }
.main-nav > a:hover, .nav-drop-btn:hover { color: var(--bronze); text-decoration: none; }
.nav-drop-menu { border-radius: 0; border: 0; box-shadow: 0 0 3px rgba(0, 0, 0, .15); padding: 14px; }
.nav-drop-menu a { border-radius: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.nav-drop-menu a:hover { background: none; color: var(--bronze); }
@media (min-width: 961px) { .header-in { height: 66px; } }

/* type: section titles 30px/600 with a short orange underline (Kalles "title 2") */
h1.display { font-size: clamp(26px, 3vw, 34px); font-weight: 600; }
.section-head h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; line-height: 1.3; padding-bottom: 8px; position: relative; display: table; }
.section-head h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 2px; background: var(--accent); }
.eyebrow { color: var(--bronze); font-weight: 600; letter-spacing: .12em; font-size: 12px; }
.lead { color: var(--muted); }
.section-link { border: 1px solid var(--ink); border-radius: var(--pill); padding: 7px 18px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.section-link:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.in-link { text-decoration-color: var(--accent); }
.seo-copy a:hover, .in-link:hover { color: var(--bronze); }

/* buttons: 40px pills, 14px/600 uppercase, no shadow; orange buys, #222 is secondary */
.btn { font-family: var(--display); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; padding: 11px 28px; min-height: 40px; border-radius: var(--pill); }
.btn-primary { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.btn-primary:hover { background: var(--bronze-hover); border-color: var(--bronze-hover); color: #fff; }
.btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-accent { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-accent:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.btn-sm { padding: 7px 16px; font-size: 12px; min-height: 34px; }
.qty { border: 1px solid var(--line); }

/* product cards: white box with a 1px border, 5px radius and a soft shadow; text below */
.product-grid { gap: 30px; }
.product-card { background: transparent; }
.pc-media { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 0 12px rgba(0, 0, 0, .12); padding: 16px; }
.pc-media img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
.product-card:hover .pc-media img { transform: scale(1.06); }
.pc-body { padding: 14px 2px 6px; }
.pc-name { font-size: 15px; font-weight: 500; line-height: 1.45; }
.product-card:hover .pc-name { color: var(--bronze); }
.pc-price { font-size: 15px; font-weight: 600; color: var(--ink); }
.pc-was { color: var(--muted-2); }
.pc-sale { border-radius: 0; background: var(--alert); padding: 3px 8px; font-size: 12px; }
.pc-badge { border-radius: 0; background: var(--ok); }
.pc-add { background: var(--ink); color: #fff; border: 0; border-radius: var(--pill); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 10px; }
.pc-add:hover { background: var(--bronze); color: #fff; }
@media (max-width: 560px) {
  .product-grid { gap: 10px; }
  .pc-media { padding: 8px; }
  .pc-media img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .pc-name, .pc-price { font-size: 14px; }
}

/* category tiles, chips, icon boxes: 10px cards */
.cat-card { border: 1px solid var(--line); border-radius: var(--radius-md); }
.cat-card:hover { border-color: var(--ink); box-shadow: 0 0 12px rgba(0, 0, 0, .1); }
.cat-card img, .choose-card img, .colour-tile img { background: #fff; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13px; }
.chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.why-card { border-top: 2px solid var(--accent); border-radius: var(--radius-md); }
.choose-card { border-radius: var(--radius-md); }
.choose-card li { background: var(--panel); }
.tab-btn { font-size: 13px; font-weight: 600; text-transform: uppercase; }
.tab-btn.on, .tab-btn:hover { background: #fff; color: var(--ink); border-color: var(--ink); }
.series-strip { background: var(--panel); border: 0; }
.series-strip a { font-size: clamp(22px, 3.4vw, 40px); font-weight: 700; letter-spacing: .02em; }
.series-strip a:hover { background: none; color: var(--bronze); }

/* hero: light plate, Poppins headline, orange word */
.hero h1 { font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.12; }
.hero h1 em { background: none; color: var(--bronze); padding: 0; }
.hero-points li::before { background: var(--accent); border: 0; }
.hero-visual { background: var(--panel); border-radius: var(--radius-md); }
.hero-tag { background: var(--ink); }
.hero-tag b { color: var(--accent); }

/* product page: small title, 22px price, pill options, Kalles-style tabs feel */
.crumb.wrap { background: none; }
.pdp-media { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.pdp-info h1 { font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.35; }
.pdp-price { font-size: 22px; font-weight: 600; color: var(--ink); }
.pdp-price .was { color: var(--muted-2); }
.pdp-tag { border: 1px solid var(--line); }
.variant-option { border: 1px solid var(--line); font-size: 13px; }
.variant-option img { width: 34px; height: 34px; background: #fff; }
.variant-option:hover { border-color: var(--ink); }
.variant-option.on { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.pdp-facts h2, .faq-title { font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.spec-table { font-size: 14px; }
.spec-table thead th { background: var(--ink); }
.box-list li::before { background: var(--accent); border: 0; border-radius: 50%; width: 8px; height: 8px; top: 18px; }
.buy-box { background: #fff; }
button.colour-tile.on b::after { background: var(--bronze); color: #fff; }
.pdp-fits-list a.more { background: var(--ink); border-color: var(--ink); }

/* footer on light grey, as on the source */
.site-footer { background: var(--panel); color: var(--muted); --muted-2: #6B6B6B; }
.site-footer .wordmark { color: var(--ink); }
.footer-grid a { color: var(--muted); }
.footer-grid a:hover, .site-footer .footer-grid a:hover { color: var(--bronze); }
.footer-grid h4, .footer-grid .footer-h { color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.footer-disclaimer { color: var(--muted-2); }
.site-footer .footer-bottom, .site-footer .fb { color: var(--muted-2); }

/* cart drawer and checkout: white, orange pills */
.cart-drawer { background: #fff; }
.step-num { background: var(--bronze); }
.just-paid { background: var(--accent-soft); border-color: var(--bronze); }
.just-paid h3 { color: var(--bronze); }
.just-paid .dropzone { border-color: var(--bronze); color: var(--ink); }
.lc-head { background: var(--ink); }
.lc-send { background: var(--bronze); }
.lc-m.b { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.wa-btn.chat { background: var(--bronze); }
.toast { background: var(--ink); }

/* 18+ gate: the dark box of store.geekvape.com, pill buttons */
.age-card { background: var(--ink); border: 0; border-radius: var(--radius-md); }
.age-card h2 { font-weight: 600; font-size: 26px; letter-spacing: .02em; }
.age-card .btn { border-radius: var(--pill); font-size: 14px; padding: 11px 26px; }
.age-card .btn-primary { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.age-card .btn-primary:hover { background: var(--bronze-hover); border-color: var(--bronze-hover); }
.age-card .eyebrow { color: var(--accent); }
.hero-points li::before { flex: none; }

/* variant picker, as on store.geekvape.com (2026-10-17): one row per part of the variant,
   colours as 44 px photo swatches (tap targets stay 44 px on a phone), the rest as pills;
   the picked value sits in the row label. A value with no variant beside the other picks is
   dimmed but still tappable (it switches to the nearest variant that has it). */
.vp { margin: 16px 0 18px; padding: 0; border: 0; background: none; }
.vp-group + .vp-group { margin-top: 16px; }
.vp-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin-bottom: 9px; }
.vp-label b { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.vp-swatches, .vp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-sw { width: 48px; height: 48px; padding: 3px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.vp-sw img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; mix-blend-mode: multiply; }
.vp-sw .vo-dot { width: 100%; height: 100%; border-radius: 50%; display: block; border: 0; background: var(--panel); }
.vp-sw:hover { border-color: var(--ink); }
.vp-sw.on { border: 2px solid var(--ink); padding: 2px; box-shadow: inset 0 0 0 2px #fff; }
.vp-pill { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink); cursor: pointer; text-align: left; max-width: 100%; }
.vp-pill:hover { border-color: var(--ink); }
.vp-pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vp .na { opacity: .45; }
.vp .vp-sw.na { background: linear-gradient(135deg, transparent 47%, var(--line) 48%, var(--line) 52%, transparent 53%), #fff; }
.vp .vp-pill.na { border-style: dashed; }
.vp button:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.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; }
@media (max-width: 560px) {
  .vp-sw { width: 46px; height: 46px; }
  .vp-swatches { gap: 7px; }
  .vp-pills { gap: 6px; }
  .vp-pill { padding: 8px 12px; }
}

/* phones: a buy bar with the picked variant and the price slides in from the bottom once the
   page's own buttons have scrolled away; the chat bubble moves up above it */
.sticky-buy { display: none; }
@media (max-width: 760px) {
  .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); transform: translateY(110%); transition: transform .2s ease; }
  .sticky-buy.show { transform: none; }
  .sb-info { flex: 1; min-width: 0; line-height: 1.3; }
  .sb-name { display: block; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-opt { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-price { font-size: 15px; color: var(--ink); white-space: nowrap; }
  .sb-add { padding: 10px 16px; min-height: 44px; font-size: 13px; flex: none; }
  body.has-sticky-buy { padding-bottom: 76px; }
  body.has-sticky-buy .lc-bubble { bottom: 86px; }
}

/* phones: the quantity box and "Dodaj do koszyka" share one line without the label wrapping */
@media (max-width: 560px) {
  .pdp-buy { flex-wrap: nowrap; gap: 8px; }
  .pdp-buy .qty { flex: none; }
  .pdp-buy .btn { min-width: 0; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
}

/* the GeekVape wordmark in the header and footer (2026-10-17), as on geekvape.com: 24 px tall on a
   desktop, 18 px on a phone so the burger, the logo and the icons share one row */
.site-logo { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.site-logo img { display: block; height: 24px; width: auto; }
.footer-brand .site-logo { margin-bottom: 14px; }
@media (max-width: 560px) { .site-logo img { height: 18px; } }

/* QA 2026-10-17 */
/* free-shipping progress (Kalles teal bar) */
.freeship { margin: 12px 0 4px; font-size: 13px; color: var(--ink); }
.freeship.hide { display: none; }
.freeship > span:first-child { display: block; margin-bottom: 6px; }
.fs-bar { display: block; height: 6px; border-radius: 6px; background: var(--panel); overflow: hidden; }
.fs-bar i { display: block; height: 100%; background: #23b2c7; border-radius: 6px; transition: width .3s ease; }
/* cart lines: the name is a link back to the product */
.cl-name a { color: inherit; text-decoration: none; }
.cl-name a:hover { color: var(--bronze); text-decoration: underline; }
/* the phone sticky bar shows the whole variant on two lines */
@media (max-width: 760px) {
  .sb-opt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* age box: the primary "yes" first, "leave" quiet */
.age-card .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.age-card .btn-outline:hover { background: #fff; color: var(--ink); }
/* /sklep on a phone: the page gutter, and the filter folds behind a button */
@media (max-width: 760px) {
  .shop-layout { padding-left: 0; padding-right: 0; }
  .wrap.section .shop-layout, .shop-layout { margin: 0; }
  .filter-side { position: static; padding: 0; border: 0; background: none; }
  .filter-side > .filter-head { display: none; }
  .filter-side details { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; background: #fff; margin-bottom: 14px; }
  .filter-side summary { font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
  .filter-side summary::after { content: '+'; float: right; font-weight: 400; }
  .filter-side details[open] summary::after { content: '−'; }
  .shop-bar { padding-right: 64px; }
}
@media (min-width: 761px) { .filter-side details > summary { display: none; } }
/* phone menu: dropdowns fold, a tap on the heading opens one */
@media (max-width: 960px) {
  .nav-drop-menu { display: none; }
  .nav-drop.open .nav-drop-menu { display: block; }
  .nav-drop-btn svg { display: inline; transition: transform .2s; }
  .nav-drop.open .nav-drop-btn svg { transform: rotate(180deg); }
  .main-nav > a, .nav-drop-btn, .nav-drop-menu a { min-height: 44px; display: flex; align-items: center; }
}
/* desktop product rows: arrows */
.hscroll-wrap { position: relative; }
.hs-arrow { display: none; }
@media (min-width: 961px) {
  .hs-arrow { display: flex; position: absolute; top: 38%; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); align-items: center; justify-content: center; font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
  .hs-arrow:hover { background: var(--ink); color: #fff; }
  .hs-prev { left: -18px; } .hs-next { right: -18px; }
}

/* phone menu: the desktop hover/focus rule must not hold a dropdown open after a tap */
@media (max-width: 960px) {
  .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { display: none; }
  .nav-drop.open .nav-drop-menu, .nav-drop.open:hover .nav-drop-menu, .nav-drop.open:focus-within .nav-drop-menu { display: block; }
}
/* "wrap section" blocks: .section's own padding (48px 0) used to wipe the page gutter, so on a
   phone /sklep ran edge to edge (QA 2026-10-17) */
.wrap.section { padding-left: var(--pad); padding-right: var(--pad); }
@media (max-width: 760px) { .wrap.section { padding-left: 16px; padding-right: 16px; } .filter-side details { margin-bottom: 4px; } }

/* error notice (replaces alert boxes): top centre, so it never sits under the chat bubble or the sticky buy bar */
.notice-err { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 130; display: none;
  width: max-content; max-width: min(92vw, 520px); padding: 14px 18px; border-radius: 12px; background: #b42318; color: #fff;
  font-size: 14px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); cursor: pointer; }
.notice-err.on { display: block; animation: fadeIn .2s; }
.is-invalid { border-color: #b42318 !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .15) !important; }

/* chat bubble on phones: tucked while scrolling down or typing (store.js), and the footer ends
   with room for it so the last links are never under it */
.lc-bubble.lc-tuck { transform: translateY(150%); opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .site-footer { padding-bottom: 84px; } }

/* live chat start form: name + e-mail before the first message (2026-10-23) */
.lc-intro { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); }
.lc-intro-lead { margin: 0 0 2px; font-size: 14px; line-height: 1.5; }
.lc-intro label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.lc-intro input { border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 16px; font-weight: 400; outline: none; background: #fff; min-height: 44px; }
.lc-intro input:focus { border-color: var(--bronze); }
.lc-intro .btn { width: 100%; justify-content: center; margin-top: 2px; }
.lc-intro-err { margin: 0; color: #b3261e; font-size: 13px; }
.lc-intro .legal-micro { margin: 0; font-size: 11px; line-height: 1.5; }
.lc-intro[hidden], .lc-msgs[hidden], .lc-form[hidden] { display: none !important; }
.paychat .lc-intro { padding: 4px 2px 8px; background: none; }

/* prices could not be loaded (fetchProducts gave up): said above the basket lines (2026-10-23) */
.price-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #8a1c14; font-size: 14px; line-height: 1.45; }
.price-err a { color: inherit; font-weight: 700; text-decoration: underline; }