/* Scootive design system, ported piece by piece from the static prototype into
   the 'ever' theme. Kept as its own hand-authored file (not part of the
   Tailwind/_dev build output) so it survives a future `npm run build`.
   Currently covers: global type/color base (matches src/assets/css/tokens.css
   + base.css from the prototype) + the mobile nav accordion (see
   initMobileMenu() in theme.js and modules/ps_mainmenu/ps_mainmenu.tpl). */

:root {
  --scootive-ink: #0a0a0a;
  --scootive-line: #dfdfd8;
  --scootive-bg: #f5f5f1;
  --scootive-gray-50: #fafaf8;
  --scootive-gray-100: #f3f3ef;
  --scootive-gray-400: #c8c8c1;
  --scootive-gray-600: #777771;
  --scootive-gray-700: #555550;
  --scootive-gray-800: #333330;
  --scootive-green: #a0e01c;
  --scootive-green2: #7eb617;
  --scootive-max: 1760px;
  /* Order/return status colors (account area - src/pages/account.html's own
     .status.processing/.shipped/.delivered), a real semantic scale the
     prototype's tokens.css already defines - added here since nothing on
     this site needed order-status colors before now. */
  --scootive-state-success: #367c38;
  --scootive-state-success-bg: #eaf5e1;
  --scootive-state-warning: #9c5f08;
  --scootive-state-warning-bg: #fbeed9;
  --scootive-state-danger: #c33333;
  --scootive-state-danger-bg: #f8e6e6;
  --scootive-state-info-bg: #eeeee9;
}

.wrap {
  width: min(var(--scootive-max), calc(100% - 64px));
  margin: auto;
}

/* Prototype's base.css halves .wrap's side gutter below 1100px (28px total
   instead of 64px) - this theme's .wrap never got that mobile override, so
   every .wrap-based section (header included) sits with a full 32px gutter
   per side on mobile instead of the intended 14px, visibly too padded next
   to the prototype. */
@media (max-width: 1100px) {
  .wrap {
    width: calc(100% - 28px);
  }
}

/* Header chrome: logo, category row, search, icon buttons (see header.tpl). */
.mainnav {
  height: 74px;
  background: #fff;
  border-bottom: 1px solid var(--scootive-line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.mainnav .wrap {
  height: 100%;
  display: grid;
  grid-template-columns: auto auto minmax(140px, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.logo {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 25px;
  letter-spacing: -.08em;
  /*
   * Explicit width, not just on the <img>: CSS Grid's "auto" track sizing
   * for this column measured a much smaller intrinsic size than the image
   * actually renders at (a replaced-element-in-grid sizing quirk), leaving
   * the track too narrow and the logo overflowing into the icons next to
   * it. Sizing the grid ITEM itself removes the ambiguity. 124px fits the
   * current logo file's aspect ratio at 24px tall (~122px); revisit if the
   * logo image changes to a very different aspect ratio.
   */
  width: 124px;
}

.logo img {
  display: block;
  height: 24px;
  width: auto;
}

.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  place-items: center;
  cursor: pointer;
  padding: 0;
  color: var(--scootive-ink);
}

.hamburger svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}

/*
 * Only the top-level category label is uppercase — the expanded mega-menu
 * dropdown keeps normal case, per the prototype. Targeted structurally
 * (#top-menu > li > a) rather than by ps_mainmenu.tpl's own data-depth
 * attribute: that attribute is the same "0" at every nesting level (looks
 * like $node.depth never actually increments in the module's own PHP), so
 * a data-depth selector would (wrongly) catch the nested dropdown links too.
 */
/*
 * ps_mainmenu.tpl's #top-menu <ul> carries Tailwind's `text-sm font-semibold
 * text-slate-700` directly (14px/600/gray) — an explicit value on that exact
 * element, so it wins over `.navcats`'s own font-size/weight/color below no
 * matter the cascade order (inherited values always lose to a value set
 * directly on the element). Overriding it here, on #top-menu itself, is what
 * actually reaches the nav text.
 */
/*
 * Hover dead-zone bug: ps_mainmenu.tpl's <li> has Tailwind's `h-full`, but
 * `.navcats{align-items:center}` (a separate flex context) never actually
 * gave #top-menu a height to be "full" OF — so the <li> was only as tall as
 * its own text (~20px), centered within the 74px-tall row. Moving the mouse
 * straight down from the trigger crossed a real gap where NEITHER the <li>
 * (:hover ended above it) NOR .mega (starts at top:74px) was hovered, so the
 * dropdown closed before the cursor ever reached it — and if the cursor then
 * drifted over a neighboring trigger's <li>, THAT item's mega-menu opened
 * instead. Fix: make the whole chain genuinely 74px tall so hovering
 * anywhere in that column (not just the text) keeps .mega open with no gap
 * before it.
 */
.navcats #top-menu {
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-weight: 900;
  color: var(--scootive-ink);
}

/*
 * height:100% doesn't actually reach 74px here: .navcats/#top-menu sit in a
 * grid row sized `auto` (align-items:center on .mainnav .wrap means the row
 * itself shrinks to content instead of stretching to the container's own
 * 74px) — percentage height with no definite reference collapses back to
 * auto. The prototype sidesteps this by hardcoding .navitem{height:74px}
 * directly rather than inheriting it, so doing the same here instead.
 */
.navcats #top-menu > li {
  flex-shrink: 0;
  height: 74px;
}

.navcats #top-menu > li > a {
  text-transform: uppercase;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
  height: 74px;
  display: flex;
  align-items: center;
  position: relative;
}

/*
 * Animated underline — prototype-exact behavior, including WHERE it appears:
 * in the prototype, plain links ARE the .navitem (`<a class="navitem">`, no
 * nested anchor), while only items with a dropdown wrap a plain `<a>` inside
 * `<div class="navitem hasmega">` — so `.navitem>a:after` structurally only
 * ever matches items that have a mega-menu. Every item here has the same
 * <li><a> shape regardless, so that has to be spelled out explicitly with
 * :has(.mega) instead of falling out of the structure for free.
 *
 * Driven ONLY by .active (JS-tracked, see initMegaMenu() in theme.js), not a
 * plain :hover variant — a `li:has(.mega):hover` selector used to also show
 * this, and it had the exact same Firefox-only bug as the dropdown itself
 * (see initMegaMenu()'s comment on `trigger.matches(':hover')`): .mega is a
 * position:absolute, full-width descendant of the <li>, and Firefox's :hover
 * computation for the <li> factors in that descendant's full (invisible,
 * pointer-events:none) box, so the underline stayed lit any time the pointer
 * was anywhere within .mega's footprint (well past the header row itself),
 * confirmed via a user screen recording after the dropdown-open bug was
 * fixed but this lingering underline wasn't. Since .active already tracks
 * real hover intent correctly (dwell + a properly-scoped :hover recheck),
 * there's no reason for a second, redundant, less-correct trigger here.
 */
.navcats #top-menu > li:has(.mega) > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #111;
  transform: scaleX(0);
  transition: transform .18s;
}

.navcats #top-menu > li.active:has(.mega) > a::after {
  transform: scaleX(1);
}

/*
 * overflow-x:auto here would clip the mega-menu dropdown (position:absolute
 * descendants are clipped by ANY ancestor with overflow != visible, even
 * though .mega's own containing block is further up at .mainnav) — CSS also
 * won't let overflow-x:auto coexist with overflow-y:visible on the same box,
 * so the horizontal-scroll safety net from the earlier width fix and a
 * working dropdown are mutually exclusive here. Dropped the scroll fallback;
 * the tighter gap/search-floor/nowrap changes made earlier are enough to fit
 * real content at normal desktop widths, and the dropdown is the far more
 * important thing to keep working.
 */
.navcats {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 1;
  min-width: 0;
}

.navitem {
  height: 74px;
  display: flex;
  align-items: center;
  position: static;
  white-space: nowrap;
}

.navitem > a {
  height: 74px;
  display: flex;
  align-items: center;
  position: relative;
}

.navitem.builder {
  height: auto;
  background: var(--scootive-green);
  padding: 10px 14px;
}

.navitem.builder > a {
  height: auto;
}

.search-wrap {
  min-width: 0;
}

/*
 * ps_searchbar ships its own core stylesheet (modules/ps_searchbar/ps_searchbar.css,
 * loaded regardless of theme) targeting #search_widget by ID — higher specificity
 * than any class selector, so it wins over the plain `.search`/`.search input`
 * rules below unless explicitly neutralized here. Left unfixed, it caused a grey
 * input background fighting the pill background, ~40px of dead left padding meant
 * for its own absolutely-positioned icon (this template uses an inline <svg>
 * sibling instead), and — because #search_widget itself has a fixed height plus
 * overflow:auto — an internal scrollbar once the input's own intrinsic height
 * exceeded it.
 */
#search_widget {
  overflow: visible !important;
  height: auto !important;
  margin-bottom: 0 !important;
  width: 100%;
}

#search_widget form input {
  width: auto !important;
  padding: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.search {
  height: 42px;
  background: #f3f3ef;
  border: 1px solid #e4e4de;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--scootive-gray-700);
  font-size: 12px;
}

.search svg {
  width: 17px;
  flex-shrink: 0;
}

.search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 12px !important;
  font-family: inherit;
  color: var(--scootive-ink);
  min-width: 0;
  height: auto !important;
}

.search input::placeholder {
  color: var(--scootive-gray-700);
}

.search:focus-within {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.search .clear {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--scootive-gray-600);
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  padding: 0;
  color: var(--scootive-ink);
  text-decoration: none;
}

.icon-btn:hover {
  background: #f2f2ee;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
}

.count {
  position: absolute;
  right: 1px;
  top: 1px;
  background: #111;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 20px;
  min-width: 18px;
  height: 18px;
  font-size: 9px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

/*
 * <select> elements render with the platform's own control font by default
 * and don't reliably pick up author font-size the way other elements do —
 * needs font-family:inherit and !important to actually land.
 */
.lang-select {
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--scootive-ink);
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 800;
  padding: 0 4px;
  margin-right: 2px;
  cursor: pointer;
}

.lang-select:hover {
  background: var(--scootive-gray-100);
}

.lang-select:focus {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.subnav {
  height: 36px;
  background: #fafaf8;
  border-bottom: 1px solid var(--scootive-line);
  position: relative;
}

/*
 * ps_linklist's theme override (modules/ps_linklist/views/templates/hook/
 * linkblock.tpl) puts Tailwind's `text-sm font-semibold text-slate-700`
 * directly on each <a> — an explicit value on that element beats the
 * inherited font-size/weight/color from .subnav .wrap below, so it has to
 * be overridden at the same (or deeper) level.
 */
.subnav .wrap a {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.subnav .wrap {
  height: 100%;
  display: flex;
  gap: 29px;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #555;
  text-transform: uppercase;
}

.subnav .label {
  color: var(--scootive-gray-700);
  letter-spacing: .12em;
}

@media (max-width: 1100px) {
  .mainnav .wrap {
    grid-template-columns: auto auto 1fr auto;
  }

  .hamburger {
    display: grid;
    grid-column: 1;
  }

  .logo {
    grid-column: 2;
  }

  .header-icons {
    grid-column: 4;
  }

  .navcats {
    display: none;
  }

  .search-wrap {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-bottom: 12px;
  }

  .mainnav {
    height: auto;
    padding: 12px 0;
  }

  .subnav {
    display: none;
  }

  .mega {
    display: none;
  }
}

/* Smallest phones: hamburger + logo + 4 icons doesn't fit at 124px logo
   width + full 40px icon buttons, so trim a little further. */
@media (max-width: 380px) {
  .logo {
    width: 100px;
  }

  .logo img {
    height: 20px;
  }

  .header-icons {
    gap: 0;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
  }

  .icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .lang-select {
    padding: 0 2px;
    margin-right: 0;
  }
}

/*
 * The theme's base layout sets `class="font-sans text-slate-900 ..."` on
 * <body> (Tailwind utilities, specificity (0,1,0)) which doesn't match the
 * prototype's plain Arial stack + pure-black ink. Overriding needs the same
 * specificity plus !important to reliably win regardless of Tailwind's own
 * cascade/load order — same reasoning as the earlier checkbox-inline fix.
 */
body {
  font-family: Arial, Helvetica, sans-serif !important;
  color: var(--scootive-ink) !important;
  background: var(--scootive-bg) !important;
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: #0008;
  z-index: 350;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}

.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .24s;
  z-index: 351;
}

.mobile-nav.open {
  transform: translateX(0);
}

.mobile-nav-head {
  height: 74px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--scootive-ink);
  flex-shrink: 0;
}

.mobile-nav-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  font-size: 22px;
  cursor: pointer;
}

.mobile-nav-close:hover {
  background: var(--scootive-ink);
  color: #fff;
  border-color: var(--scootive-ink);
}

.mobile-nav-list {
  padding: 6px 0;
  overflow: auto;
  flex: 1;
}

.mobile-nav-list > a {
  display: block;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .01em;
  border-bottom: 1px solid var(--scootive-line);
  border-left: 4px solid transparent;
  transition: border-color .15s, background .15s;
  color: inherit;
}

.mobile-nav-list > a:hover,
.mobile-nav-list > a:focus-visible {
  border-left-color: var(--scootive-green);
  background: var(--scootive-gray-50);
}

.mobile-nav-group {
  border-bottom: 1px solid var(--scootive-line);
}

.mobile-nav-toggle {
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-left: 4px solid transparent;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.mobile-nav-toggle span {
  font-size: 16px;
  font-weight: 900;
  transition: transform .15s;
}

.mobile-nav-group.open .mobile-nav-toggle {
  background: var(--scootive-ink);
  color: #fff;
  border-left-color: var(--scootive-green);
}

.mobile-nav-sub {
  display: none;
  padding: 2px 20px 16px 32px;
  background: var(--scootive-gray-50);
}

.mobile-nav-group.open .mobile-nav-sub {
  display: block;
}

.mobile-nav-group.open .mobile-nav-toggle span {
  transform: rotate(45deg);
}

.mobile-nav-sub a {
  display: block;
  padding: 10px 0;
  font-size: 13px;
  color: #555;
  font-weight: 800;
  letter-spacing: .01em;
}

.mobile-nav-sub a:hover,
.mobile-nav-sub a:focus-visible {
  color: #3d6c00;
  text-decoration: underline;
}

.mobile-nav-builder {
  display: block;
  margin: 16px 20px;
  background: var(--scootive-green);
  color: var(--scootive-ink);
  text-align: center;
  padding: 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
}

.mobile-nav-builder:hover {
  background: var(--scootive-ink);
  color: #fff;
}

.mobile-nav-foot {
  border-top: 2px solid var(--scootive-ink);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.mobile-nav-account-btn {
  display: block;
  text-align: center;
  background: var(--scootive-ink);
  color: #fff;
  padding: 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.mobile-nav-account-btn:hover {
  background: var(--scootive-green);
  color: var(--scootive-ink);
}

.mobile-nav-foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-nav-foot-link {
  font-size: 12px;
  font-weight: 800;
  color: #555;
}

.mobile-nav-foot-link:hover,
.mobile-nav-foot-link:focus-visible {
  color: var(--scootive-ink);
  text-decoration: underline;
}


/*
 * ship-timer.tpl's outer wrapper used Tailwind's bg-slate-950 (#020617, a
 * cold blue-black) — prototype's .utility bar is #0b0b0b (neutral warm
 * black). Renamed its class from bg-slate-950 to utility-bar so this can be
 * targeted directly instead of fighting the Tailwind utility everywhere else
 * that class might be reused.
 */
.utility-bar {
  background-color: #0b0b0b;
}

/*
 * Desktop mega-menu dropdown. The prototype's real version has hand-curated
 * column groupings (e.g. "GŁÓWNE CZĘŚCI" / "KOMPRESJA" / "WYKOŃCZENIE") that
 * don't exist as data in a plain PrestaShop category tree — ps_mainmenu.tpl
 * only gives us a flat list of subcategories per parent. Rather than fabricate
 * editorial groupings, the flat list flows into CSS columns (visually similar
 * density, honestly real data). The .mega-feature panel falls back to a
 * plain dark block, or shows the category's own real thumbnail (ps_mainmenu.
 * php's $node.image_urls, scanned from _PS_CAT_IMG_DIR_) as its background
 * when one is configured — see ps_mainmenu.tpl's mega-feature markup.
 */
/*
 * ps_mainmenu.tpl's top-level <li> carries Tailwind's `relative` class
 * (position:relative), which makes IT the containing block for .mega's
 * position:absolute — so `width:100%` resolved to 100% of that narrow,
 * content-sized <li> instead of the full header width. The prototype relies
 * on .navitem staying position:static so .mega bubbles up to .mainnav
 * (position:sticky) as its containing block instead. Forcing it back to
 * static here (higher specificity than Tailwind's single .relative class).
 */
.navcats .nav-item {
  position: static;
}

.mega {
  position: absolute;
  top: 74px;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid var(--scootive-line);
  border-bottom: 1px solid var(--scootive-line);
  box-shadow: 0 24px 45px rgba(0, 0, 0, .09);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .16s, transform .16s;
  z-index: 120;
}

/*
 * Driven by initMegaMenu() in theme.js (JS-tracked .active), not :hover —
 * with plain :hover, moving the mouse diagonally toward a link on the far
 * side of the panel can briefly cross a NEIGHBORING trigger's own full-height
 * hit box (each is a sibling in the same 74px-tall row), opening that one's
 * mega on top since both would be independently :hover-true at once. JS
 * guarantees only one .nav-item is ever "active".
 */
.nav-item.active .mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-inner {
  width: min(var(--scootive-max), calc(100% - 64px));
  margin: auto;
  padding: 32px 0 36px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
}

.mega-links {
  column-width: 200px;
  column-gap: 32px;
}

.mega .mega-col-label {
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--scootive-gray-700);
  margin: 0 0 12px;
  text-transform: uppercase;
  column-span: all;
}

.mega a {
  display: block;
  font-size: 13px;
  padding: 6px 0;
  font-weight: 750;
  line-height: 1.25;
  break-inside: avoid;
  color: var(--scootive-ink);
}

.mega a:hover,
.mega a:focus {
  color: #3d6c00;
  text-decoration: underline;
}

/* `.mega a { color: ink }` above has higher specificity (0,1,1) than a bare
   `.mega-feature` class (0,1,0) would, and .mega-feature IS an <a> — so the
   ink color would otherwise win over this panel's intended white text. */
.mega .mega-feature {
  background: #111;
  color: #fff;
  min-height: 215px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
}

.mega-feature .eyebrow {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
}

.mega-feature b {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 22px;
  line-height: .95;
  margin-top: 8px;
}

.mega-feature span:last-child {
  font-size: 10px;
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .mega {
    display: none;
  }
}

/*
 * Shared typography/button utilities from the prototype (base.css/buttons.css)
 * — reused across every homepage section and beyond, so defined once here
 * rather than per-component.
 */
.eyebrow {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
}

.display {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: .9;
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-break: break-word;
}

.btn {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  text-decoration: none;
}

.btn.green {
  background: var(--scootive-green);
  color: #111;
  border-color: var(--scootive-green);
}

.hero {
  height: 690px;
  background: #141414;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero-track {
  display: flex;
  height: 100%;
  transition: transform .6s ease;
}

.hero-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
}

.hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(.72) contrast(1.08);
}

.hero-slide .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.hero-copy {
  max-width: 690px;
  min-width: 0;
}

.hero-copy .eyebrow {
  color: #fff;
}

.hero h1 {
  font-size: 92px;
  margin: 12px 0 18px;
}

.hero p {
  max-width: 440px;
  color: #d4d4d4;
  line-height: 1.55;
  font-size: 15px;
  margin: 0 0 24px;
}

.hero-track {
  cursor: grab;
}

.hero-track.dragging {
  cursor: grabbing;
}

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
}

.hero-dot.active {
  background: #fff;
}

@media (max-width: 1100px) {
  .hero {
    height: 590px;
  }

  .hero h1 {
    font-size: 58px;
  }
}

/*
 * Section wrapper (see ps_newproducts.tpl and every other homepage section
 * to come — bestsellers, specials, etc. all use the same .section/.section-head
 * shape) and the canonical product card, ported from the prototype's
 * product-card.css. Used on home, category, search, and product-reco grids.
 */
.section {
  padding: 88px 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 30px;
}

.section-head h2 {
  font-size: 46px;
  margin: 0;
}

.section-head a {
  font-size: 10px;
  font-weight: 900;
  border-bottom: 1px solid;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

/* Category listing page uses a taller row-gap than home/other grids. */
body#category .products {
  gap: 34px 26px;
}

.card {
  position: relative;
  min-width: 0;
}

.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.prodimg {
  aspect-ratio: 1;
  background: #ecece7;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.prodimg img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .28s ease;
}

.card:hover .prodimg img {
  transform: scale(1.04);
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #161614;
  color: #fff;
  padding: 6px 8px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  z-index: 2;
}

.badge--new {
  background: var(--scootive-green);
  color: #111;
}

.badge--sale {
  background: #c33333;
  color: #fff;
}

.badge--out {
  background: #ecece7;
  color: #161614;
}

.card-body {
  padding-top: 14px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.brand {
  font-size: 9px;
  letter-spacing: .11em;
  color: var(--scootive-gray-700);
  font-weight: 900;
}

.name {
  font-weight: 800;
  font-size: 14px;
  margin: 6px 0 9px;
  line-height: 1.25;
  min-height: 35px;
  color: var(--scootive-ink);
}

.wish {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  padding: 0;
  margin-top: -5px;
  color: var(--scootive-ink);
  cursor: pointer;
}

.wish:hover {
  background: var(--scootive-gray-100);
}

.wish svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.wish.active {
  color: #c33333;
}

.wish.active svg {
  fill: currentColor;
}

.price {
  font-weight: 900;
  font-size: 14px;
  color: var(--scootive-ink);
}

.price.sale {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.sale-now {
  font-weight: 950;
}

.sale-old,
.old {
  text-decoration: line-through;
  color: var(--scootive-gray-700);
  font-size: 11px;
  font-weight: 500;
}

.price.out-label {
  color: var(--scootive-gray-700);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.omnibus-note {
  font-size: 8px;
  color: var(--scootive-gray-700);
  margin-top: 5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.weight {
  font-size: 9px;
  font-weight: 900;
  color: var(--scootive-gray-700);
  margin-top: 7px;
  letter-spacing: .06em;
}

.variant-line {
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.4;
  color: var(--scootive-gray-700);
  font-weight: 800;
  letter-spacing: .02em;
}

.variant-line .vlabel {
  color: var(--scootive-gray-700);
  margin-right: 6px;
  font-weight: 700;
  text-transform: uppercase;
}

.swatches {
  display: flex;
  gap: 7px;
  margin-top: 12px;
  align-items: center;
  pointer-events: none;
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--scootive-gray-600);
  box-shadow: inset 0 0 0 2px #f5f5f1;
}

.more {
  font-size: 9px;
  color: var(--scootive-gray-700);
}

.card.is-out .prodimg img {
  opacity: .45;
  filter: grayscale(.4);
}

@media (max-width: 1100px) {
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body#category .products {
    gap: 28px 12px;
  }

  .name {
    font-size: 12px;
  }

  .section {
    padding: 48px 0;
  }

  .section-head h2 {
    font-size: 28px;
  }
}

/*
 * blockwishlist's own add-button.tpl renders `<i class="material-icons">
 * favorite_border</i>` — a ligature that needs Google's Material Icons
 * webfont to render as a glyph. This theme never loads that font (every
 * other icon on the site is a hand-drawn inline SVG instead), so it was
 * rendering as literal visible text. Hiding the ligature text and drawing
 * the prototype's own heart icon via background-image instead, rather than
 * pulling in an extra external font for one icon.
 */
.wish {
  position: relative;
}

/*
 * blockwishlist ships its OWN CSS fighting these exact properties at higher
 * specificity: modules/blockwishlist/public/wishlist.css has
 * ".products article .wishlist-button-add{position:absolute;top:.635rem;
 * right:.635rem;z-index:10}" (beats a plain ".wish .wishlist-button-add"
 * rule since it has an extra element selector), and its Vue components
 * inject their own "<style>.wishlist-button-add{display:flex;height:2.5rem;
 * width:2.5rem;background:#fff;box-shadow:...;border-radius:50%}" at
 * runtime. Together these turned the button into a floating white circle
 * badge in the image's corner instead of a plain transparent icon button
 * inline in the meta row. !important on every contested property is the
 * only reliable way to win against CSS this module ships and reloads on
 * every version bump.
 */
.wish .wishlist-button-add {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  padding: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center;
  align-items: center;
  justify-content: center;
  transition: none;
}

.wish .wishlist-button-add .material-icons {
  font-size: 0;
  width: 17px;
  height: 17px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.6'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*
 * blockwishlist's login/create-list/choose-list popups (mounted via the
 * displayFooter hook) are plain Bootstrap 4 modal markup (.modal/.modal-
 * dialog/.modal-backdrop) — this theme has no Bootstrap CSS at all, so
 * without these rules the elements exist in the DOM (Vue toggles a real
 * "show" class) but render with no positioning, sizing or backdrop at all.
 */
/*
 * blockwishlist's own modules/blockwishlist/public/wishlist.css has
 * ".wishlist-modal.show{z-index:1051}" — equal-or-higher specificity to a
 * plain ".modal"/".modal.show" rule (2 classes vs our 1-2), so it was
 * winning and rendering the backdrop (z-index 1055) ABOVE the modal itself:
 * visually the whole page looked greyed out with no way to click Anuluj/
 * Zaloguj się underneath it. !important forces ours to actually win.
 */
.modal {
  position: fixed !important;
  inset: 0;
  z-index: 1060 !important;
  display: none;
  overflow-y: auto;
}

.modal.show {
  display: block !important;
}

.modal-dialog {
  position: relative;
  width: calc(100% - 32px);
  max-width: 440px;
  margin: 8vh auto;
  pointer-events: none;
}

.modal-content {
  pointer-events: auto;
  background: #fff;
  border: 1px solid var(--scootive-ink);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--scootive-line);
}

.modal-title {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}

.modal-body {
  padding: 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--scootive-ink);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--scootive-line);
}

.modal .close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--scootive-ink);
  padding: 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: rgba(10, 10, 10, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.modal-backdrop.in,
.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.modal .btn-primary,
.modal .btn-secondary {
  display: inline-flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid var(--scootive-ink);
  cursor: pointer;
}

.modal .btn-primary {
  background: var(--scootive-ink);
  color: #fff;
}

.modal .btn-secondary {
  background: #fff;
  color: var(--scootive-ink);
}

.modal .form-group {
  margin: 0;
}

.modal .form-control-label {
  display: block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--scootive-gray-700);
  margin-bottom: 8px;
}

.modal .form-control {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--scootive-line);
  background: #fff;
  color: var(--scootive-ink);
}

.modal .form-control:focus {
  outline: none;
  border-color: var(--scootive-ink);
}
/*
 * ps_banner (displayHome) — single promotional image banner. The module
 * only stores an image + link (no copy fields), so it reuses the shared
 * .section/.wrap rhythm every other homepage section uses and needs just
 * two new classes for the image/link itself.
 */
.banner-promo__link {
  display: block;
}

/* Full-bleed, native aspect ratio; sharp edges (this theme uses square
   corners everywhere except pill-shaped controls like swatches/dots), no
   invented card shadow for a plain photo. */
.banner-promo__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/*
 * ps_customtext ("Custom text block", displayHome). The module lets the
 * shop owner enter arbitrary rich HTML via TinyMCE (see
 * modules/ps_customtext/ps_customtext.tpl -> $cms_infos.text nofilter), so
 * this wrapper only needs to be generic and robust for whatever tags show
 * up (headings, paragraphs, bold, links, lists, images) — it is not tied
 * to one fixed layout the way the prototype's other homepage sections are.
 * Reuses .section (vertical rhythm) and .wrap (page gutter) already
 * defined above; only the classes below are new.
 */

/* Subtle background so the free-text block reads as its own section
   between the productised .section blocks above/below it. */
.customtext {
  background: var(--scootive-gray-50);
}

/* Narrower, centered reading column for admin-authored copy — full .wrap
   width (1760px) is too wide a line length for prose. */
.customtext-body {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.customtext-body > :first-child {
  margin-top: 0;
}

.customtext-body > :last-child {
  margin-bottom: 0;
}

/* Headings inside the free-text HTML echo the site's .display look
   (same family/weight/tracking/case) but at a smaller, secondary scale
   since this block is never the page's primary heading. */
.customtext-body h1,
.customtext-body h2,
.customtext-body h3,
.customtext-body h4,
.customtext-body h5,
.customtext-body h6,
.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4,
.cms-content h5,
.cms-content h6 {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 950;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--scootive-ink);
  margin: 0 0 18px;
}

.customtext-body h1,
.cms-content h1 {
  font-size: 42px;
}

.customtext-body h2,
.cms-content h2 {
  font-size: 34px;
}

.customtext-body h3,
.cms-content h3 {
  font-size: 24px;
}

.customtext-body h4,
.customtext-body h5,
.customtext-body h6,
.cms-content h4,
.cms-content h5,
.cms-content h6 {
  font-size: 18px;
}

.customtext-body p,
.cms-content p {
  margin: 0 0 16px;
  color: var(--scootive-gray-700);
  font-size: 15px;
  line-height: 1.6;
}

.customtext-body strong,
.customtext-body b,
.cms-content strong,
.cms-content b {
  color: var(--scootive-ink);
  font-weight: 900;
}

.customtext-body a,
.cms-content a {
  color: var(--scootive-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.customtext-body a:hover,
.cms-content a:hover {
  color: var(--scootive-green);
}

/* Lists read left-aligned even though .customtext-body itself is centered
   (a homepage blurb) — center-aligned bullet/numbered lists are hard to
   read. .cms-content is already left-aligned by default, so this is just
   a shared declaration, not an override, there. */
.customtext-body ul,
.customtext-body ol,
.cms-content ul,
.cms-content ol {
  text-align: left;
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--scootive-gray-700);
  font-size: 15px;
  line-height: 1.6;
}

.customtext-body img,
.cms-content img {
  max-width: 100%;
  height: auto;
  margin: 24px 0;
}

.customtext-body blockquote,
.cms-content blockquote {
  margin: 24px 0;
  padding-left: 18px;
  border-left: 3px solid var(--scootive-ink);
  font-style: italic;
  color: var(--scootive-gray-700);
  text-align: left;
}

@media (max-width: 1100px) {
  .customtext-body h1,
  .cms-content h1 {
    font-size: 32px;
  }

  .customtext-body h2,
  .cms-content h2 {
    font-size: 26px;
  }

  .customtext-body h3,
  .cms-content h3 {
    font-size: 20px;
  }
}

/* templates/cms/page.tpl - CMS pages (Terms, Privacy Policy, Delivery,
   etc.) all render through this one shared template with real, admin-
   authored (WYSIWYG) content - shares its element-level typography with
   .customtext-body above (same real-HTML-editor use case) but left-aligned
   and sized for a genuine document, not a centered homepage blurb. */
.cms-head {
  margin: 36px 0 32px;
}
.cms-content {
  max-width: 760px;
  padding-bottom: 100px;
}
.cms-content > :first-child {
  margin-top: 0;
}
.cms-content > :last-child {
  margin-bottom: 0;
}


/* espepromoduo theme override — additions layered on top of the
   .espe-promo-duo__* rules ALREADY LIVE in scootive-theme.css (grep confirmed
   .espe-promo-duo__grid/__card/.is-small/__image/__overlay/__content/__label/
   __color/__size already exist there, unused until now). Every block below
   either (a) adds properties those existing selectors don't yet set — never
   redeclares background/border-radius/box-shadow/min-height they already have
   — or (b) is a genuinely new selector, each commented. Merge these into the
   existing rule bodies rather than appending a second competing block where
   noted "ADDITION". No new custom properties invented; reuses --scootive-green
   only where noted, otherwise plain values matching the already-live
   .espe-promo-duo__card's own plain-hex convention (#0f172a etc.) so nothing
   here fights the seeded rules on specificity. */

/* ADDITION to existing .espe-promo-duo__grid { display:grid; gap:1.5rem; } */
.espe-promo-duo__grid {
  align-items: stretch;
}

/* NEW: two-card layout — large card gets 3x the width of the small one,
   mirroring the stock module's own lg:grid-cols-[3fr_1fr] ratio. Single-card
   case is left at the grid's default single implicit column. */
.espe-promo-duo__grid.has-two {
  grid-template-columns: 3fr 1fr;
}

/* NEW: full-height clickable wrapper so the <a> (not just the <article>)
   is the grid cell and stretches to the row's height. */
.espe-promo-duo__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/*
 * ADDITION to existing .espe-promo-duo__card { position:relative; overflow:hidden;
 * border-radius:2rem; background:#0f172a; box-shadow:...; }
 * height:100% (not just min-height) so both cards genuinely match the grid
 * row's height regardless of the module's own differing is-large/is-small
 * min-heights — .espe-promo-duo__link is the grid item (height:100% of the
 * row), and without an explicit height here the card itself (a plain block)
 * only takes its own min-height/content height, leaving the shorter card
 * looking visibly shorter with empty space below its stretched wrapper.
 */
.espe-promo-duo__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 560px;
  color: #fff;
}

@media (max-width: 991.98px) {
  /* the existing seeded rule already drops both .card and .card.is-small to
     420px at this same breakpoint — this just collapses the two-column grid
     to match. */
  .espe-promo-duo__grid.has-two {
    grid-template-columns: 1fr;
  }
}

/* ADDITION to existing .espe-promo-duo__image { transform-origin:center center; } */
.espe-promo-duo__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* NEW: hover zoom on the product photo, matching the product-card component's
   own .card:hover .prodimg img scale(1.04) convention. */
.espe-promo-duo__card:hover .espe-promo-duo__image {
  transform: scale(1.04);
}

/* ADDITION to existing .espe-promo-duo__overlay { background: linear-gradient(...); } */
.espe-promo-duo__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ADDITION to existing .espe-promo-duo__content { position:relative; z-index:2; } */
.espe-promo-duo__content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 32px;
}

@media (max-width: 991.98px) {
  .espe-promo-duo__content {
    padding: 24px;
  }
}

/*
 * ADDITION to existing .espe-promo-duo__label { letter-spacing:.22em; }
 * Matches the real product-card .badge component exactly: same corner
 * position (top-left, absolute) and shape/weight (sharp corners, solid
 * dark fill, tiny uppercase text) instead of a rounded translucent pill
 * anchored at the bottom with the rest of the content.
 */
.espe-promo-duo__label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  padding: 6px 8px;
  border-radius: 0;
  background: var(--scootive-ink);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

/* NEW: brand/manufacturer line above the product name. */
.espe-promo-duo__brand {
  margin: 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* NEW: product name — sizing only; type face/weight/case come from the
   .display class already applied on the <h3> in the template. */
.espe-promo-duo__name {
  margin: 0;
  color: #fff;
  font-size: 32px;
}

.espe-promo-duo__card.is-large .espe-promo-duo__name {
  font-size: 46px;
}

/* NEW: price row (current + optional struck-through regular price). */
.espe-promo-duo__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.espe-promo-duo__price {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}

.espe-promo-duo__regular-price {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  text-decoration: line-through;
}

/* NEW: color-swatch row wrapper. */
.espe-promo-duo__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * ADDITION to existing .espe-promo-duo__color { box-sizing:border-box; }
 * Same technique as the real product-card .swatch (border + inset ring),
 * just sized up for this much bigger card — the inset ring uses the dark
 * card background instead of the page's light --scootive-bg so it still
 * separates the swatch from a busy photo behind it.
 */
.espe-promo-duo__color {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--scootive-gray-600);
  box-shadow: inset 0 0 0 2px #0a0a0a;
}

/* NEW: "Available options:" sub-label above the size chips. */
.espe-promo-duo__options-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .62);
}

/* NEW: size-chip row wrapper. */
.espe-promo-duo__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ADDITION to existing .espe-promo-duo__size { line-height:1; } — sharp
   corners, matching the site's square-cornered convention (no rounded
   chips anywhere outside genuinely circular controls). */
.espe-promo-duo__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 991.98px) {
  /* existing seeded rule already sets .espe-promo-duo__name{font-size:2rem}
     at this breakpoint for both is-large/is-small — nothing further needed
     here beyond the content padding reduction above. */
}


/* Breadcrumb - shared partial used on category, search/manufacturer listing, and product pages.
   Ported 1:1 from the prototype's base.css .breadcrumb rule (var(--gray-700) -> var(--scootive-gray-700)).
   text-transform:uppercase is a deliberate addition: the prototype's ALL-CAPS look there comes from its
   hardcoded demo copy ("STRONA GLOWNA / CZESCI"), not from CSS - real category names are stored in normal
   case ("Czesci"), so this transform is needed to actually match the prototype's visual style with real data. */
.breadcrumb{padding:22px 0 12px;font-size:9px;letter-spacing:.04em;color:var(--scootive-gray-700);text-transform:uppercase}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover,.breadcrumb a:focus-visible{text-decoration:underline}

/* ===== Category/listing filters — real ps_facetedsearch data, full port of
   the prototype's toolbar-wrap/filter-topbar/quick-filters/filter-overlay/
   filter-drawer (src/pages/category.html + category.css). Was previously
   deliberately deferred ("off-canvas facet redesign... out of scope for this
   pass") — this is that pass. See catalog/_partials/facets.tpl (theme
   override of ps_facetedsearch's own template) for the real markup this
   styles, and [[project-ever-theme-status]] for the interaction-model
   decisions (full-page-reload filtering for now, quick-filter dropdown
   instead of "opens the full drawer", first-5-facets-in-admin-order). */
.toolbar-wrap{
  position:sticky;
  top:74px;
  z-index:50;
  background:rgba(245,245,241,.97);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--scootive-line);
  border-bottom:1px solid var(--scootive-line);
  margin-bottom:26px;
}

.filter-topbar{padding:12px 0 10px}

.quick-filters{display:flex;flex-wrap:wrap;gap:7px}

.quick-filter-wrap{position:relative}

.quick-filter,.more-filters{
  height:42px;
  border:1px solid var(--scootive-gray-600);
  background:#fff;
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--scootive-ink);
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
}
.quick-filter:hover{border-color:var(--scootive-ink)}
.quick-filter[aria-expanded="true"]{background:var(--scootive-ink);border-color:var(--scootive-ink);color:#fff}

.more-filters{background:var(--scootive-ink)!important;color:#fff!important;border-color:var(--scootive-ink)!important}

.quick-filter-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:2;
  min-width:280px;
  max-width:320px;
  max-height:70vh;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--scootive-ink);
  padding:16px;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s;
}
/* opacity/visibility (not the `hidden` attribute/display:none) deliberately -
   a hidden slider container would report zero width to jQuery UI on init;
   this way its real layout box always exists, so initFacetedSliders() (see
   theme.js) only ever needs to run once on page load, never re-run on open. */
.quick-filter-dropdown.open{opacity:1;visibility:visible}

.filter-meta{
  min-height:40px;
  padding-top:10px;
  margin-top:10px;
  border-top:1px solid rgba(223,223,216,.7);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:14px 20px;
}

.active-filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center}

.chip{
  height:30px;
  padding:0 10px;
  border:1px solid var(--scootive-gray-600);
  background:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--scootive-ink);
  text-transform:uppercase;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}
.chip:hover{border-color:var(--scootive-ink)}
.chip b{font-weight:400}

.toolbar-right{display:flex;align-items:center;gap:12px;margin-left:auto}

/* Full filter drawer + backdrop - single overlay used identically on mobile
   and desktop (no more separate always-visible desktop sidebar). */
.filter-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.53);
  z-index:300;
  opacity:0;
  visibility:hidden;
  transition:.2s;
}
.filter-overlay.open{opacity:1;visibility:visible}

.filter-drawer{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:min(470px,92vw);
  background:#f7f7f3;
  transform:translateX(-100%);
  transition:.24s;
  display:flex;
  flex-direction:column;
}
.filter-overlay.open .filter-drawer{transform:translateX(0)}

.filter-drawer-head{
  height:76px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--scootive-line);
  background:#fff;
  flex-shrink:0;
}
.filter-drawer-head h2{font-size:24px;margin:0}

.filter-close{width:38px;height:38px;border:0;background:transparent;font-size:24px;cursor:pointer;color:var(--scootive-ink)}

.filter-drawer-body{overflow-y:auto;padding:0 24px 24px;flex:1}

.facet{border-bottom:1px solid var(--scootive-line)}
.facet-head{
  width:100%;
  height:58px;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--scootive-ink);
  cursor:pointer;
}
.facet-body{padding:0 0 18px;display:none}
.facet.open .facet-body{display:block}

.checkrow{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:7px 0;color:#333}
.checkrow label{display:flex;align-items:center;gap:10px;cursor:pointer}
.checkrow input[type="checkbox"],.checkrow input[type="radio"]{width:15px;height:15px;accent-color:var(--scootive-ink)}
.checkrow .swatch{width:15px;height:15px;border-radius:50%;border:1px solid var(--scootive-line);flex-shrink:0;background-size:cover;background-position:center}
.countf{font-size:9px;color:var(--scootive-gray-700)}

.facet-links{display:flex;flex-direction:column}
.facet-link{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;padding:7px 0;color:#333;text-decoration:none}
.facet-link.active{font-weight:900;color:var(--scootive-ink)}
.facet-link:hover{color:var(--scootive-ink)}

.filter-drawer-foot{
  margin-top:auto;
  border-top:1px solid var(--scootive-line);
  background:#fff;
  padding:16px 24px;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:8px;
  flex-shrink:0;
}
.clear,.apply{height:46px;border:1px solid var(--scootive-ink);font-size:10px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.clear{background:#fff;color:var(--scootive-ink)}
.apply{background:var(--scootive-ink);color:#fff}

/* Vendor range slider (ps_facetedsearch's own front.css, a real jQuery UI
   slider - the module's own compiled CSS still loads normally, only its
   theme override front.js is a no-op stub, see part 25) - reskin only, kept
   as the real functional widget rather than hand-rebuilding range-URL
   encoding with plain OD/DO inputs like the prototype's own mockup. */
/* !important throughout: jquery.ui.theme.css/jquery.ui.slider.css load AFTER
   scootive-theme.css in head.tpl (core enqueues vendor CSS after the theme's
   own), so on equal selector specificity the vendor's own .ui-slider-handle
   background/border rules win by load order alone - verified live (computed
   background stayed the vendor's default light gray without !important). */
/* jQuery UI's .slider() call adds "ui-slider" to the SAME element .faceted-
   slider is already on (not a wrapper) - a descendant selector here would
   silently never match; verified live (track stayed vendor-default white
   with a space, fixed once changed to a compound .faceted-slider.ui-slider
   selector, no space). .ui-slider-range/-handle genuinely ARE descendants
   (elements jQuery UI creates inside the container), so those keep the
   space. */
.faceted-slider.ui-slider{background:var(--scootive-gray-600)!important;border-radius:0!important;border:0!important;height:3px!important}
.faceted-slider .ui-slider-range{background:var(--scootive-ink)!important;border-radius:0!important}
.faceted-slider .ui-slider-handle{width:16px!important;height:16px!important;border-radius:50%!important;background:var(--scootive-ink)!important;border:2px solid #fff!important;box-shadow:0 0 0 1px var(--scootive-ink)!important;top:-7px!important;outline:none!important}

/* The slider's own layout: everything was rendering with zero spacing
   between the value readout and the track - jammed together at a
   mismatched 16px font. Fixed to the same compact scale as the rest of the
   filter UI, with real breathing room around the track (handles overhang
   it by 7px on each side - top padding on the wrap keeps that from
   crowding the values text above it). */
.js-faceted-filter-slider{padding:6px 4px 2px}
.js-faceted-values{font-size:11px;font-weight:900;letter-spacing:.02em;color:var(--scootive-ink);margin-bottom:22px}
.faceted-slider{margin:0 8px}

/* Each quick-filter dropdown's own single apply button (the drawer's
   equivalent is .apply, in its own footer - this is the same idea, just
   sized for a small ~280-320px dropdown instead of the full drawer). */
.quick-filter-apply{
  display:block;
  width:100%;
  height:32px;
  margin-top:14px;
  border:1px solid var(--scootive-ink);
  background:#fff;
  color:var(--scootive-ink);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.quick-filter-apply:hover{background:var(--scootive-ink);color:#fff}

/* Category page header (H1 + short description) and the bottom SEO-copy
   block - ported directly from the prototype's .cat-head/.cat-copy/
   .cat-bottom-copy (category.css). .cat-bottom-layout's 2-column photo+copy
   grid IS now ported (see category.tpl) - the photo turned out to be real,
   per-category data after all (core's own $category.cover, i.e. CategoryLazyArray
   ::getCover(), backed by a genuinely uploaded img/c/<id>.jpg - 58 categories
   on this shop have one), not prototype demo filler as first assumed; this
   earlier comment's premise was wrong. */
.cat-head{padding:36px 0 38px}
.cat-head h1{font-size:76px;margin:8px 0 0}
.cat-copy{font-size:14px;line-height:1.65;color:#555;max-width:620px;margin-top:16px}

/* margin-top: the prototype gets this same pre-divider breathing room from
   its own .catalog{padding:34px 0 90px} wrapper around the product grid +
   pagination - this theme has no equivalent wrapping element (product-grid.
   tpl/pagination.tpl are shared, unwrapped includes), so the gap is added
   here instead, scoped to just this section rather than the shared grid/
   pagination partials used by other listing pages too. */
.cat-bottom{border-top:1px solid var(--scootive-line);padding:58px 0 80px;margin-top:90px}
.cat-bottom-layout{display:grid;grid-template-columns:minmax(0,700px) 1fr;gap:70px}
.cat-bottom-copy{max-width:700px}
.cat-bottom-copy h2{font-size:20px;font-weight:900;letter-spacing:.01em;margin:0 0 14px}
.cat-bottom-copy h3{font-size:15px;font-weight:900;letter-spacing:.01em;margin:28px 0 12px}
.cat-bottom-copy p{font-size:13px;line-height:1.75;color:#555;margin:0 0 14px}
.cat-bottom-copy a{color:var(--scootive-ink);text-decoration:underline}
.cat-bottom-photo{background-position:center;background-size:cover}

/* Real sort-order labels ("Najczęściej kupowane" etc.) aren't stored
   uppercase the way the prototype's hardcoded demo option text is -
   same class of fix as .breadcrumb elsewhere in this file. */
.sort-select{text-transform:uppercase}

.more-filters-label-mobile{display:none}

@media(max-width:1100px){
  .toolbar-wrap{top:137px}
  /* Matches the prototype's own intended mobile behavior (its category.css
     already has this exact rule) - individual quick-filter chips disappear
     entirely on mobile, replaced by ONE full-width button opening the same
     drawer. My first pass instead made the whole chip row horizontally
     scrollable, which isn't what the prototype (or the user) wants here. */
  .quick-filter-wrap{display:none}
  .more-filters{width:100%}
  .more-filters-label-desktop{display:none}
  .more-filters-label-mobile{display:inline}
  .toolbar-right{margin-left:0;width:100%;justify-content:space-between}
  .filter-meta{align-items:flex-start}
  .cat-head h1{font-size:52px}
  .cat-copy{max-width:none}
  .cat-bottom-layout{grid-template-columns:minmax(0,1fr)}
  .cat-bottom-photo{display:none}
}

.result-count{
  font-size:9px;
  letter-spacing:.08em;
  color:var(--scootive-gray-700);
  text-transform:uppercase;
  margin:0;
  white-space:nowrap;
}

.sort-control{
  position:relative;
  height:42px;
  min-width:220px;
  border:1px solid var(--scootive-gray-600);
  background:#fff;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}

.sort-label{
  height:100%;
  display:flex;
  align-items:center;
  padding:0 11px;
  border-right:1px solid var(--scootive-line);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--scootive-gray-700);
  text-transform:uppercase;
  white-space:nowrap;
}

.sort-select{
  width:100%;
  height:40px;
  border:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  padding:0 32px 0 12px;
  /* Real sort labels ("Referencje, od A do Z" etc.) run longer than the
     prototype's own demo option text - on mobile's 150px max-width this
     otherwise hard-clips mid-character rather than degrading gracefully. */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* !important needed: app.css has a sitewide `input,select,textarea{font-size:
     16px!important}` rule (the standard iOS-Safari zoom-on-focus-prevention
     trick - not something to remove) that otherwise wins regardless of this
     rule's own specificity. The prototype's own .sort-select rule already
     carries font-size:10px!important for exactly this reason; this port had
     dropped it, which is why the control rendered at 16px instead of 10px. */
  font-size:10px!important;
  font-weight:900;
  color:var(--scootive-ink);
  cursor:pointer;
}
.sort-select:focus{outline:2px solid var(--scootive-ink);outline-offset:2px}

.sort-chevron{
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-56%);
  font-size:15px;
  pointer-events:none;
  color:var(--scootive-gray-700);
}

/* Pagination - ported from the prototype's category.css .pagination rules (var(--gray-600) -> var(--scootive-gray-600),
   #111 -> var(--scootive-ink)). Real PS pagination renders <a href> links (not the prototype's JS-built <button>s),
   so text-decoration/color/centering are added here since anchors don't auto-center text the way buttons do. */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:56px;flex-wrap:wrap}
.pagination .page-num,.pagination .page-arrow{min-width:38px;height:38px;padding:0 6px;border:1px solid var(--scootive-gray-600);background:#fff;font-size:12px;font-weight:900;color:var(--scootive-ink);text-decoration:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pagination .page-num:hover,.pagination .page-arrow:hover{border-color:var(--scootive-ink)}
.pagination .page-num.active{background:var(--scootive-ink);border-color:var(--scootive-ink);color:#fff}
.pagination .page-arrow{font-size:16px}
/* Ellipsis between non-adjacent page numbers (core PS's "spacer" link type) - the prototype's static demo
   never had enough pages to need one, so this is a net-new rule for a real state the prototype doesn't show. */
.pagination .page-spacer{border:0;background:transparent;cursor:default;color:var(--scootive-gray-600)}

@media(max-width:1100px){
  .result-count{display:none}
  .sort-control{min-width:158px}
  .sort-label{display:none}
  .sort-select{max-width:150px}
}


/*
 * Product page (catalog/product.tpl + _partials/product-*.tpl) — core buy
 * flow: layout grid, gallery, brand/title/price/stock, variants, qty/add-
 * to-cart. Ported from the prototype's product.css. Not covered in this
 * pass: description/specs accordion, related products, lightbox, the
 * size-guide modal, and the handlebar-cutting/addon service modals (no
 * real backend feature exists for the cutting service yet — see memory).
 */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .72fr);
  gap: 84px;
  align-items: start;
  padding: 0 0 90px;
}

.left-flow {
  min-width: 0;
}

.buy {
  padding: 8px 0 0;
}

/* Gallery: thumbs column (left) + main stage (right) */
.gallery.images-container {
  display: grid !important;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  position: relative;
  padding: 0 !important;
}

/*
 * Single-image products never render the .thumbs block at all (the Smarty
 * {if $product.images|count > 1} guard) — with only one grid item left,
 * auto-placement dropped .stage into the first (84px) track instead of
 * stretching it, squashing the whole gallery to a thumbnail-sized sliver.
 * Explicit grid-column assignments make placement deterministic regardless
 * of how many items exist, and the :not(:has()) fallback collapses to a
 * single full-width column when there's truly nothing to show on the left.
 */
.gallery .stage {
  grid-column: 2;
}

.gallery:not(:has(.thumbs)) {
  grid-template-columns: 1fr;
}

.gallery:not(:has(.thumbs)) .stage {
  grid-column: 1;
}

.gallery .thumbs {
  grid-column: 1;
  order: -1;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

.gallery .thumbs ul.product-images {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: visible;
  padding: 0;
  margin: 0;
  list-style: none;
}

.gallery .thumb-container {
  width: auto !important;
}

.gallery .thumb-container button {
  display: block;
  width: 100% !important;
  aspect-ratio: 1;
  background: #ecece7;
  border: 1px solid var(--scootive-gray-600) !important;
  border-radius: 0 !important;
  padding: 0;
  cursor: pointer;
}

.gallery .thumb-container button:has(.selected) {
  border-color: #111 !important;
}

.gallery img.thumb {
  width: 84% !important;
  height: 84% !important;
  margin: 8% auto;
  object-fit: contain !important;
  mix-blend-mode: multiply;
  border-radius: 0 !important;
  border: 0 !important;
}

.gallery .stage {
  min-height: 720px;
  background: #ecece7;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
  border: 1px solid #e1e1db;
}

.gallery .stage > div {
  border-radius: 0 !important;
  background: transparent !important;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.gallery .stage img.js-product-cover {
  width: 86% !important;
  height: 86% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
  border-radius: 0 !important;
  transition: transform .25s;
  aspect-ratio: auto !important;
}

.gallery .stage-note {
  position: absolute;
  right: 16px;
  top: 14px;
  font-size: 9px;
  color: var(--scootive-gray-700);
  letter-spacing: .1em;
  z-index: 1;
}

.gallery .stage .zoom {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: auto;
  top: auto;
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1px solid #ddd !important;
  border-radius: 0 !important;
  display: grid;
  place-items: center;
  box-shadow: none !important;
}

@media (max-width: 1100px) {
  .gallery.images-container {
    grid-template-columns: 1fr;
  }

  /* .stage keeps the desktop-only grid-column:2 assignment unless reset here
     - with only one explicit column now, that forces an implicit auto-sized
     second column that hogs all the space, starving .thumbs's column
     (grid-column:1) down to 0 width and hiding the thumbnails entirely. */
  .gallery .stage {
    grid-column: 1;
  }

  .gallery .thumbs {
    order: 2;
    flex-direction: row;
  }

  .gallery .thumbs ul.product-images {
    flex-direction: row;
    overflow-x: auto;
  }

  .gallery .thumb-container {
    width: 70px !important;
    flex-shrink: 0;
  }

  .gallery .stage {
    min-height: 380px;
  }
}

/* Brand / title / rating / price / stock */
.brandline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brandname {
  font-size: 10px;
  letter-spacing: .13em;
  font-weight: 900;
  color: var(--scootive-gray-700);
  text-transform: uppercase;
}

.buy h1.display {
  font-size: 46px;
  margin: 12px 0 18px;
  max-width: 670px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.buy .price {
  font-size: 30px;
  font-weight: 900;
  color: var(--scootive-ink);
}

.buy .oldprice {
  font-size: 13px;
  text-decoration: line-through;
  color: var(--scootive-gray-700);
  font-weight: 500;
}

.buy .omnibus-note {
  margin-top: 7px;
  font-size: 10px;
  color: var(--scootive-gray-700);
  font-weight: 700;
}

.buy .unit-price {
  margin-top: 7px;
  font-size: 11px;
  color: var(--scootive-gray-700);
}

.stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0 24px;
  font-size: 11px;
  font-weight: 800;
  color: var(--scootive-ink);
}

.stock .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4d7a0d;
  flex-shrink: 0;
}

.stock .dot.low {
  background: #966000;
}

.stock .dot.out {
  background: #e23a3a;
}

/* Real delivery-estimate line (wetwoshipping's own displayWetwoProductShipping
   hook - built in an earlier session but never actually wired into
   product-prices.tpl until now, per user request to reuse the same module
   already powering checkout's delivery-step date labels). The prototype's
   own two-line "U CIEBIE: X / Szacowana dostawa..." split doesn't map onto
   this module's data model (it only ever produces ONE complete,
   admin-configurable sentence - see WETWOSHIPPING_PRODUCT_TEXT_BEFORE/AFTER),
   so this is a single-line message inside the same icon+border-top/bottom
   strip, not a forced two-line split with invented content. */
.shipline {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--scootive-line);
  border-bottom: 1px solid var(--scootive-line);
}
.delivery-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #e9eee0;
}
.delivery-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--scootive-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.delivery-copy-top {
  min-width: 0;
}
.delivery-main {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 900;
  color: var(--scootive-ink);
  letter-spacing: -0.01em;
}
.delivery-sub {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--scootive-gray-700);
}

/* condition/reference/ean meta line — not in the prototype's mockup at all,
   kept as real useful info but styled small/muted so it doesn't compete. */
#product-details p {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 10px;
  color: var(--scootive-gray-700);
}

/* Variants: option-row / opt-title / color swatches / size buttons */
.option-row {
  margin: 20px 0 0;
}

.opt-title {
  font-size: 10px;
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--scootive-ink);
  letter-spacing: .02em;
}

.opt-title span {
  font-weight: 700;
  color: var(--scootive-gray-700);
  text-transform: none;
}

.color-choices {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

/*
 * Product page color choices: NOT flat color circles — a square photo
 * swatch (product's own image, reused for every color, matching the
 * prototype's actual behavior exactly — see product-variants.tpl for why)
 * with a small color-coded dot badge in the corner. Selection state reacts
 * live to the real radio's :checked state via :has(), no JS class
 * management needed (same pattern as the mega-menu/thumbnail :has() rules
 * elsewhere in this file).
 */
.color-choice {
  width: 68px;
  height: 68px;
  border: 1px solid var(--scootive-gray-600);
  background: var(--scootive-gray-100);
  padding: 5px;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
}

.color-choice:has(.input-color:checked) {
  border: 2px solid var(--scootive-ink);
}

.color-choice img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.color-dot {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--scootive-gray-600);
}

.input-color:focus-visible ~ .color-dot {
  outline: 2px solid var(--scootive-ink);
  outline-offset: 2px;
}

.sizes {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.sizes .size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 49px;
  height: 40px;
  border: 1px solid var(--scootive-gray-600);
  background: transparent;
  color: var(--scootive-ink);
  font-size: 10px;
  font-weight: 900;
  padding: 0 10px;
  cursor: pointer;
}

.input-radio:checked + .size {
  background: var(--scootive-ink);
  color: #fff;
  border-color: var(--scootive-ink);
}

.input-radio:focus-visible + .size,
.input-color:focus-visible + .sw {
  outline: 2px solid var(--scootive-ink);
  outline-offset: 2px;
}

.variant-select {
  height: 44px;
  width: 100%;
  border: 1px solid var(--scootive-gray-600);
  background-color: #fff;
  padding: 0 36px 0 12px;
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 700;
  color: var(--scootive-ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230a0a0a' stroke-width='1.6'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

.variant-select:focus {
  outline: 2px solid var(--scootive-ink);
  outline-offset: 2px;
}

/* Additional services (avebartrim cutting card, aveaddoncards sticker card)
   share this slot with blockreassurance's own reassurance cards, which keep
   their own module styling untouched. */
.secondary-options {
  display: block;
  width: 100%;
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--scootive-gray-600);
}

.secondary-label {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  color: var(--scootive-ink);
  letter-spacing: 0;
  text-transform: uppercase;
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.service-card {
  position: relative;
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 38px;
  grid-template-rows: 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 8px 10px 8px 8px;
  margin: 0;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  border-radius: 0;
}

.service-visual {
  grid-column: 1;
  grid-row: 1;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: start;
  margin: 0;
  padding: 0;
  background: var(--scootive-gray-100);
  overflow: hidden;
}

.service-visual img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.service-visual svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: var(--scootive-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-copy {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.service-badge {
  display: block;
  margin: 0 0 2px;
  padding: 0;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--scootive-gray-600);
}

.service-copy strong {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 950;
  color: var(--scootive-ink);
}

.service-copy .service-price {
  display: block;
  margin: 7px 0 0;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  color: var(--scootive-ink);
}

.service-price s {
  margin-left: 6px;
  font-weight: 600;
  text-decoration: line-through;
  color: var(--scootive-gray-600);
}

.service-add {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--scootive-ink);
  background: #fff;
  color: var(--scootive-ink);
  border-radius: 0;
  font-size: 20px;
  line-height: 1;
}

.service-add:hover,
.service-card.selected .service-add {
  background: var(--scootive-ink);
  color: #fff;
}

/* Checkout's "Create an account" optional step (customer-form.tpl) - a
   native <details>/<summary> disclosure, styled to match the order
   summary's own .csp-toggle "POKAŻ SZCZEGÓŁY" row (thin border, chevron,
   no icon box) rather than the product-page's heavier .service-card -
   that combination (icon square + badge + "+" toggle) read as too heavy
   for a plain optional form-step prompt once seen live. No JS beyond the
   browser's own <details> behavior; [open] rotates the chevron. */
.account-toggle {
  border: 1px solid var(--scootive-gray-600);
  margin-bottom: 18px;
}
.account-toggle summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}
.account-toggle summary::-webkit-details-marker,
.account-toggle summary::marker {
  display: none;
  content: "";
}
.account-toggle-badge {
  display: block;
  margin: 0 0 2px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
}
.account-toggle summary strong {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--scootive-ink);
}
.account-toggle-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--scootive-gray-700);
}
.account-toggle-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--scootive-ink);
  transition: transform 0.15s;
}
.account-toggle-chevron svg {
  width: 11px;
  height: 11px;
}
.account-toggle[open] .account-toggle-chevron {
  transform: rotate(180deg);
}
.account-toggle-body {
  padding: 0 16px 18px;
}

/* blockreassurance's own cards (themes/ever/modules/blockreassurance/views/templates/
   hook/blockreassurance.tpl) render raw Tailwind Play-CDN utility classes
   (rounded-2xl/border-slate-100/bg-slate-50/text-slate-700/text-slate-500) that were
   never brought in line with the site's flat, sharp-corner design language. Scoped via
   #block-reassurance's ID specificity (beats any single Tailwind utility class
   regardless of load/reinjection order) so no tpl/module edit is needed. Plain-row
   treatment (hairline dividers, no card/box chrome) matching .info-item, but the icon
   gets a boxed treatment matching .service-visual (the live analogue directly above
   this block in the same buy column) instead of floating bare - a naked icon next to
   text doesn't match any other icon+label pairing on this site (.service-visual,
   .icon-btn, header icons all box their icon in a neutral square). Title kept sentence
   case (not uppercase) to match .service-copy strong, the one truly analogous live
   component immediately above. */
#block-reassurance ul {
  gap: 0;
}

#block-reassurance li {
  border-top: 1px solid var(--scootive-line);
}

#block-reassurance li:last-child {
  border-bottom: 1px solid var(--scootive-line);
}

/* Breathing room when this hook renders inside the checkout sidebar,
   directly below the cart-summary card (see checkout.tpl) - not needed on
   the product page, where it already sits in its own column slot. */
.cart-summary #block-reassurance {
  margin-top: 24px;
}

#block-reassurance li > div {
  align-items: center !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 14px 0 !important;
}

#block-reassurance img {
  width: 20px !important;
  height: 20px !important;
  padding: 8px !important;
  box-sizing: content-box !important;
  margin-top: 0 !important;
  background: var(--scootive-gray-100) !important;
  flex-shrink: 0;
}

#block-reassurance li > div > span > span:first-child {
  color: var(--scootive-ink) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#block-reassurance li > div > span > span:last-child {
  color: var(--scootive-gray-600) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

#block-reassurance li > div > span > span:last-child:empty {
  display: none;
}

/* aveaddoncards' own combination-picker panel, shown once its card is selected */
.aac-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--scootive-gray-600);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.aac-panel label {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--scootive-gray-600);
}

/* Buy bar: qty stepper + add to cart + wishlist heart */
.buybar {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 52px;
  gap: 8px;
  margin-top: 24px;
  padding: 0 !important;
}

.buybar .qty {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  border: 1px solid var(--scootive-gray-600);
  height: 52px;
}

.buybar .qty button {
  border: 0;
  background: transparent;
  color: var(--scootive-ink);
  cursor: pointer;
  font-size: 16px;
}

.buybar .qty input {
  border: 0;
  background: transparent;
  text-align: center;
  width: 100%;
  font-size: 13px;
  color: var(--scootive-ink);
  -moz-appearance: textfield;
}

.buybar .qty input::-webkit-outer-spin-button,
.buybar .qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.buybar .addcart {
  border: 0;
  background: var(--scootive-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
}

.buybar .addcart:hover {
  background: #222;
}

.buybar .heartbtn.wish {
  width: 52px;
  height: 52px;
  border: 1px solid var(--scootive-gray-600);
  background: transparent;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  position: relative;
}

.buybar .heartbtn.wish .wishlist-button-add {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}

.buybar .heartbtn.wish .material-icons {
  font-size: 0;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.6'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.product-additional-info-wrap {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--scootive-line);
  font-size: 11px;
  color: var(--scootive-gray-700);
}

@media (max-width: 1100px) {
  .pdp {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 0 60px;
  }

  .buy h1.display {
    font-size: 32px;
  }
}

/*
 * .container-wrap is a generic Tailwind-scaffold class reused across dozens
 * of templates (footer, checkout, customer pages, ship-timer bar, etc.),
 * each keeping its own Tailwind px-4/sm:px-6/lg:px-8-style padding — this
 * rule only adds the site-wide 1760px cap on top of whatever padding each
 * of those already has, and must stay this simple/safe for all of them.
 */
.container-wrap {
  max-width: var(--scootive-max);
  margin-left: auto;
  margin-right: auto;
}

/*
 * page.tpl's own outer <section> (shared by every non-homepage page:
 * category, product, cart, account, etc.) needs its own dedicated class,
 * NOT .container-wrap above — it must match .wrap's exact formula (width:
 * min(--scootive-max, 100% - 64px)), since .wrap has no inner padding and
 * already nets out to a 32px gutter per side via auto-margin centering. An
 * earlier version of this rule reused .container-wrap with just max-width
 * and left page.tpl's original Tailwind px-4/sm:px-6/lg:px-8 classes in
 * place, which padded the CONTENT inward on top of that max-width instead
 * of narrowing the box itself — at desktop (lg:px-8, 32px/side) that shrank
 * the visible content area to 1696px, narrower than .wrap's true 1760px,
 * and offset breadcrumbs/content ~32px further in than the header's logo.
 * Fixed with its own .page-wrap class using the same width/margin formula
 * as .wrap, with the Tailwind padding classes removed from page.tpl itself.
 */
.page-wrap {
  width: min(var(--scootive-max), calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
  /* Prototype gives every content page its own bottom breathing room via a
     page-specific wrapper class (.catalog{padding:0 0 90px}, .contact-page
     {padding:54px 0 100px}, .brands-directory{padding:40px 0 90px}, etc.) -
     this shared wrapper has no top/bottom padding of its own by design (see
     the block comment above, and the breadcrumb-position fix elsewhere this
     project), so every page except cart/checkout (which already carry their
     own real 100px bottom padding) rendered completely flush against the
     footer/newsletter section below with zero gap. Added one common value
     here instead of duplicating a page-specific class on every page. */
  padding-bottom: 90px;
}

@media (max-width: 1100px) {
  .page-wrap {
    width: calc(100% - 28px);
  }
}

/* Product info accordion (Description / Product Details) — ported from the
   prototype's .product-info/.info-item/.info-trigger/.info-content pattern
   + accordion.js's open/close toggle (mirrored in initProductInfoAccordion()
   in theme.js). The prototype's own umbrella heading ("INFORMACJE O
   PRODUKCIE") has no real translation anywhere and was dropped — each
   section's own real, verified label ("Opis" / "Szczegóły produktu") is
   still the visible accordion trigger text either way. */
.product-info {
  margin-top: 48px;
  margin-left: 98px;
}

.info-item {
  border-top: 1px solid var(--scootive-line);
}

.info-item:last-child {
  border-bottom: 1px solid var(--scootive-line);
}

.info-trigger {
  width: 100%;
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  color: var(--scootive-ink);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.info-plus {
  width: 24px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--scootive-ink);
  transition: transform .15s;
}

.info-content {
  display: none;
  padding: 0 0 34px;
}

.info-item.open .info-content {
  display: block;
}

.info-item.open .info-plus {
  transform: rotate(45deg);
}

.info-description {
  max-width: 760px;
  font-size: 14px;
  line-height: 1.8;
  color: #3e3e39;
}

.info-description p {
  margin: 0 0 18px;
}

.info-description p:first-child {
  font-size: 16px;
  line-height: 1.7;
  color: var(--scootive-ink);
  font-weight: 700;
}

.info-description p:last-child {
  margin-bottom: 0;
}

.info-specgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 58px;
}

.specrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 14px 0;
  border-bottom: 1px solid var(--scootive-line);
  font-size: 11px;
  color: var(--scootive-ink);
}

.specrow span:first-child {
  color: var(--scootive-gray-700);
}

.specrow-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.specrow-link:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .product-info {
    margin-left: 0;
    margin-top: 42px;
  }

  .info-specgrid {
    grid-template-columns: 1fr;
  }
}

/* Related products ("Zobacz również") — same .section/.section-head/.products
   pattern as homepage sections, but the prototype gives this specific
   section a tighter/asymmetric padding than the default .section. */
.reco {
  padding: 54px 0 78px;
}

/* .reco's own .wrap (ported from the prototype's flat <main> layout, where
   .reco has no width-constrained ancestor) now sits inside page.tpl's
   .page-wrap, which already applies the full .wrap width formula to this
   section's containing block at every breakpoint. Re-applying that formula
   a second time here subtracts an extra gutter, making this section ~64px
   narrower than the header/breadcrumb .wrap. Just fill the already-correct
   .page-wrap box. */
.reco .wrap {
  width: 100%;
  margin: 0;
}

/* wetwocomments ("Opinie" reviews block) - complete redesign. This is an
   in-house module (own templates + front.js, safe to edit directly) that
   originally shipped 100% raw Tailwind markup; that markup has now been
   replaced entirely with plain wwc-* classes (see product-comments-section.tpl,
   product-list-reviews.tpl, front.js) so this is real, owned CSS rather than
   a sweep fighting Tailwind utilities. Matches this theme's established
   conventions: Arial Black uppercase headings, hairline dividers (.info-item/
   .specrow), sharp corners, no shadows, ink/gray palette, .btn button shape. */
/* .wwc-section now lives inside the "Reviews" accordion's own .info-content
   (product.tpl), which already provides the heading (the accordion trigger)
   and bottom spacing - no extra margin/heading needed here. */

.wwc-alert {
  border: 1px solid var(--scootive-line);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.wwc-alert-success {
  border-color: var(--scootive-green);
}

.wwc-alert-error {
  border-color: #c33333;
  color: #c33333;
}

.wwc-layout {
  display: grid;
  gap: 32px;
  grid-template-columns: 280px minmax(0, 1fr);
}

@media (max-width: 1100px) {
  .wwc-layout {
    grid-template-columns: 1fr;
  }
}

.wwc-summary-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.wwc-avg {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  color: var(--scootive-ink);
}

.wwc-avg-max {
  font-size: 11px;
  font-weight: 700;
  color: var(--scootive-gray-600);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.wwc-stars {
  color: var(--scootive-ink);
  letter-spacing: .08em;
}

.wwc-stars-lg {
  font-size: 16px;
  margin-top: 6px;
}

.wwc-count {
  font-size: 11px;
  color: var(--scootive-gray-600);
  margin: 6px 0 0;
}

.wwc-btn-block {
  width: 100%;
  margin-top: 16px;
}

.wwc-bars {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wwc-bar-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--scootive-gray-700);
}

.wwc-bar-track {
  height: 4px;
  background: var(--scootive-gray-100);
}

.wwc-bar-fill {
  display: block;
  height: 100%;
  background: var(--scootive-ink);
}

.wwc-criteria {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--scootive-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wwc-criteria-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.wwc-criteria-name {
  font-weight: 900;
  color: var(--scootive-ink);
}

.wwc-criteria-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wwc-criteria-value {
  color: var(--scootive-gray-600);
}

.wwc-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.wwc-filters-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wwc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  color: var(--scootive-ink);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.wwc-field-full {
  grid-column: 1 / -1;
}

/* Sortuj/Ocena/Język: ported from the prototype's category-page .sort-
   control exactly (label + native select + custom chevron combined in one
   bordered box, appearance:none hiding the native arrow) instead of a
   label-above-select stack, which read as oversized next to this page's
   compact controls no matter how much the select itself was shrunk. */
.wwc-sort-control {
  position: relative;
  height: 32px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.wwc-sort-label {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-right: 1px solid var(--scootive-line);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
  white-space: nowrap;
}

.wwc-sort-select {
  width: 100%;
  height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 22px 0 8px !important;
  font-family: inherit;
  font-size: 10px !important;
  font-weight: 900 !important;
  color: var(--scootive-ink);
  cursor: pointer;
}

.wwc-sort-select:focus {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.wwc-sort-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-56%);
  font-size: 13px;
  pointer-events: none;
  color: var(--scootive-gray-600);
}

.wwc-input {
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  font-family: inherit;
  color: var(--scootive-ink);
  border-radius: 0;
  height: 40px;
  padding: 0 12px;
  font-size: 12px;
}

.wwc-textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
}

.wwc-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--scootive-ink);
}

.wwc-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--scootive-ink);
}

.wwc-empty {
  border: 1px dashed var(--scootive-line);
  padding: 32px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--scootive-gray-600);
}

.wwc-list {
  display: flex;
  flex-direction: column;
}

.wwc-comment {
  border-top: 1px solid var(--scootive-line);
  padding: 20px 0;
}

.wwc-list .wwc-comment:last-child {
  border-bottom: 1px solid var(--scootive-line);
}

.wwc-comment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.wwc-comment-author {
  font-size: 12px;
  font-weight: 950;
  color: var(--scootive-ink);
}

.wwc-comment-badges {
  margin-top: 6px;
}

.wwc-badge {
  display: inline-block;
  border: 1px solid var(--scootive-gray-600);
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--scootive-gray-700);
}

.wwc-comment-meta {
  flex-shrink: 0;
  text-align: right;
}

.wwc-comment-meta .wwc-stars {
  font-size: 14px;
}

.wwc-comment-date {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--scootive-gray-600);
}

.wwc-comment-title {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 950;
  color: var(--scootive-ink);
}

.wwc-comment-body {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--scootive-gray-700);
}

.wwc-comment-criteria {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wwc-comment-criteria-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--scootive-gray-700);
}

.wwc-comment-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--scootive-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wwc-votes {
  display: flex;
  gap: 8px;
}

.wwc-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  color: var(--scootive-ink);
  cursor: pointer;
}

.wwc-vote-btn:hover {
  border-color: var(--scootive-ink);
}

.wwc-report-btn {
  border: 0;
  background: none;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--scootive-gray-600);
  text-decoration: underline;
  cursor: pointer;
}

.wwc-report-btn:hover {
  color: #c33333;
}

.wwc-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.wwc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.wwc-page-info {
  font-size: 11px;
  font-weight: 900;
  color: var(--scootive-ink);
}

.wwc-btn-outline {
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  color: var(--scootive-ink);
  cursor: pointer;
}

.wwc-btn-outline:hover {
  border-color: var(--scootive-ink);
}

.wwc-btn-outline:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.wwc-btn-sm {
  height: 36px;
  padding: 0 14px;
}

.wwc-teaser {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--scootive-ink);
  text-decoration: none;
}

.wwc-teaser:hover {
  text-decoration: underline;
}

.wwc-teaser-count {
  color: var(--scootive-gray-600);
}

/* Modals */
html.wwc-modal-open {
  overflow: hidden;
}

.wwc-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.wwc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .5);
}

.wwc-modal-center {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.wwc-modal-panel {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--scootive-line);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.wwc-modal-panel-sm {
  max-width: 480px;
}

.wwc-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--scootive-line);
  padding: 20px 24px;
}

.wwc-modal-eyebrow {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--scootive-gray-600);
  margin: 0;
}

.wwc-modal-title {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 950;
  color: var(--scootive-ink);
}

.wwc-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  font-size: 16px;
  line-height: 1;
  color: var(--scootive-ink);
  cursor: pointer;
}

.wwc-modal-close:hover {
  border-color: var(--scootive-ink);
}

.wwc-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wwc-criteria-input {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--scootive-line);
}

.wwc-star-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wwc-star-btn {
  border: 0;
  background: none;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--scootive-gray-600);
  cursor: pointer;
}

.wwc-star-btn.wwc-star-btn-active {
  color: var(--scootive-ink);
}

.wwc-form-grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 640px) {
  .wwc-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.wwc-form-message {
  font-size: 11px;
  font-weight: 700;
}

.wwc-form-message-error {
  color: #c33333;
}

.wwc-form-message-success {
  color: var(--scootive-green);
}

.wwc-modal-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--scootive-line);
  padding: 20px 24px;
}

@media (min-width: 640px) {
  .wwc-modal-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.wwc-modal-foot-end {
  justify-content: flex-end;
}

.wwc-modal-note {
  font-size: 11px;
  color: var(--scootive-gray-600);
  margin: 0;
}

.wwc-modal-actions {
  display: flex;
  gap: 12px;
}

/* PDP section wrappers (gallery, and the buybox/description/specs column)
   are each wrapped in a leftover Tailwind "card" recipe (rounded-[2rem],
   border-slate-100, bg-white, shadow-card) from the pre-cutover design -
   present at every viewport (not just mobile), just easy to miss on desktop
   since white-on-#f5f5f1 is subtle. Flatten to match the rest of the page's
   flat, borderless sections. Excludes .zoom - the gallery's small zoom
   button also happens to carry rounded-[...]+shadow-card, but it needs to
   keep its own deliberately-sized 1px border (see .gallery .stage .zoom),
   not have it zeroed by this broader section-wrapper sweep. */
.js-product [class*="rounded-["][class*="shadow-card"]:not(.zoom) {
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  border-color: var(--scootive-line) !important;
  background: transparent !important;
}

/* Gallery lightbox modal (product-images-modal.tpl, opened via the zoom
   button): still 100% leftover Tailwind styling (circular buttons, rounded
   thumbnails, a green ring on the selected one) never brought in line with
   the prototype's flat/square/gray-600-bordered .lightbox-* treatment.
   Scoped to #espeProductModal so it can't leak into any other modal. */

/* Hardening, NOT cosmetic: the modal's own CORE positioning (fixed/inset-0/
   z-[120], and the backdrop's absolute/inset-0/bg-white) comes entirely from
   Tailwind Play-CDN utility classes, which compile asynchronously after page
   load by scanning the DOM. A user report (real Firefox, screenshot) showed
   the modal opening un-positioned - rendering in normal document flow,
   letting the real page show through around/behind it - almost certainly a
   race where the modal was opened before Tailwind's CDN script finished
   generating CSS for these specific classes (elements that start `hidden`
   may not get scanned/compiled until they change, and there's no guarantee
   that finishes before a fast click). This makes the modal's positioning and
   opaque backdrop real, always-present CSS - independent of Tailwind's JIT
   timing entirely - so this exact failure mode cannot recur regardless of
   when the modal is opened. */
#espeProductModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
}

#espeProductModal[hidden] {
  display: none !important;
}

#espeProductModal > [data-espe-product-modal-close]:first-child {
  position: absolute !important;
  inset: 0 !important;
  background: #fff !important;
}

/* button[...] not bare [data-espe-product-modal-close] - the SAME attribute
   is also on the full-screen backdrop <div> (product-images-modal.tpl),
   which shares it purely so a click on the backdrop also closes the modal.
   A bare attribute selector here previously matched that backdrop div too
   and shrank it to this button's 40x40 box, leaving the modal's "white
   background" covering almost nothing - the real page then visibly bled
   through everywhere else. Confirmed live (getBoundingClientRect on the
   backdrop showed 40x40 instead of full-viewport) before this fix. */
#espeProductModal button[data-espe-product-modal-close],
#espeProductModal button[data-espe-product-modal-prev],
#espeProductModal button[data-espe-product-modal-next] {
  border-radius: 0 !important;
  border-color: var(--scootive-gray-600) !important;
}

/* Prototype's .lightbox-body has ITS OWN padding (24px 32px 32px) + a 28px
   gap between the stage and sidebar columns, and a 280px (not 22rem/352px)
   sidebar - so the gray .lightbox-stagewrap sits INSET inside a white frame,
   not edge-to-edge against the viewport/header. The live grid row and its
   two children each carried their OWN separate Tailwind padding (px-4/px-10
   on the stage, px-5/p-4 on the sidebar) with none on the shared outer row,
   producing a different white/gray split throughout - confirmed against the
   two side-by-side screenshots (margins/paddings called out explicitly).
   Desktop (lg) only, matching the prototype's own >1100px-only lightbox
   layout and this template's own lg: grid breakpoint. */
@media (min-width: 1024px) {
  #espeProductModal > div:nth-child(2) > div:nth-child(2) {
    padding: 24px 32px 32px !important;
    gap: 28px !important;
    grid-template-columns: 1fr 280px !important;
  }

  #espeProductModal div:has(> [data-espe-product-modal-prev]) {
    padding: 0 !important;
  }

  #espeProductModal aside {
    padding: 0 !important;
    border-left: 0 !important;
  }

  #espeProductModal aside > div:first-child {
    padding: 0 0 12px !important;
    border: 0 !important;
  }

  #espeProductModal #espeProductModalThumbsDesktop {
    padding: 0 !important;
    gap: 8px !important;
  }
}

/* Prototype's .lightbox-close/.lightbox-arrow both set an explicit solid
   background:#fff - these buttons sit transparent instead, blending into
   the gray stagewrap instead of reading as a solid white button floating
   on top of it ("buttony mają jasne tło" - they should, they currently
   don't). Close button's icon/text color was also only turning ink-black
   on :hover (text-slate-500 by default) - the prototype's × has no such
   hover-only state, so give it the real ink color at rest too. */
#espeProductModal button[data-espe-product-modal-close],
#espeProductModal button[data-espe-product-modal-prev],
#espeProductModal button[data-espe-product-modal-next] {
  background: #fff !important;
}

#espeProductModal button[data-espe-product-modal-close] {
  width: 40px !important;
  height: 40px !important;
  color: var(--scootive-ink) !important;
}

#espeProductModal button[data-espe-product-modal-prev],
#espeProductModal button[data-espe-product-modal-next] {
  width: 44px !important;
  height: 44px !important;
}

#espeProductModal button[data-espe-product-modal-close]:hover,
#espeProductModal button[data-espe-product-modal-prev]:hover,
#espeProductModal button[data-espe-product-modal-next]:hover {
  border-color: #111 !important;
  color: var(--scootive-ink) !important;
}

/* Product photos are shot on a white background - every other place they
   appear on this site (gallery stage/thumbs, service icons) blends that
   white away with mix-blend-mode:multiply so it merges into a colored
   backdrop instead of showing as a visible white box. The lightbox image
   never got this, so it showed its own white canvas as a stark rectangle
   against the gray stagewrap behind it - confirmed live (mixBlendMode:
   "normal" instead of "multiply"). Matches the prototype's own
   .lightbox-stage img{mix-blend-mode:multiply} exactly. */
#espeProductModalImage {
  border-radius: 0 !important;
  mix-blend-mode: multiply;
}

/* Header eyebrow label ("Galeria produktu"): was tinted brand-green with
   Tailwind's font-medium (500) - the prototype's .eyebrow class (base.css)
   is plain ink/gray, uppercase, 10px, weight 900, wide letter-spacing - not
   a color accent, and not medium weight. */
#espeProductModal .text-brand-600 {
  color: var(--scootive-gray-700) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

/* Title ("Lite Hulajnoga wyczynowa"): prototype gives this the site's own
   .display treatment (Arial Black, uppercase, tight tracking) - the same
   class used for every other big heading on the site (H1s, section titles).
   Only setting font-weight left it in the wrong typeface/case entirely. */
#espeProductModal h3 {
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase !important;
}

/* Stage background: the prototype's .lightbox-stagewrap (the column holding
   the prev/next arrows + main image) has background:var(--gray-100) - the
   live modal's equivalent column had no background at all (plain white),
   one of several still-Tailwind-default areas that read as "different
   background color under the photo" against the prototype. Targeted
   structurally (:has the prev-arrow as a child) so it survives regardless
   of Tailwind's own class churn. */
#espeProductModal div:has(> [data-espe-product-modal-prev]) {
  background: var(--scootive-gray-100) !important;
}

/* The image was vertically centered within the tall stagewrap (Tailwind's
   items-center on the inner flex wrapper around <picture>), so its actual
   top edge floats at a different height per image depending on aspect
   ratio, never lining up with "Zdjęcia" at the top of the sidebar. Top-
   align it instead so the image always starts flush with the stage/sidebar
   header - "tekst ZDJĘCIA powinien zaczynać się w tym samym miejscu co
   główne zdjęcie". Desktop only (matches the sidebar-vs-stage layout that
   prompted this) - the prototype's own .lightbox-stage centers unconditionally
   at every breakpoint, and on mobile there's no sidebar row to align with,
   just the "Zdjęcia" row stacked below - a wide/short image top-aligned there
   left an oversized empty gap instead of the prototype's centered look. */
@media (min-width: 1024px) {
  #espeProductModal div:has(> picture) {
    align-items: flex-start !important;
  }
}

/* Thumbnail rail (desktop 2-col grid + mobile row): square corners, and the
   sidebar heading row ("Zdjęcia" + "1 / 5") laid out side-by-side like the
   prototype's .lightbox-side-head instead of stacked. Same white-canvas-on-
   gray-background issue as the main image - thumb img needs multiply too. */
#espeProductModal [data-espe-product-modal-thumb],
#espeProductModal [data-espe-product-modal-thumb] img {
  border-radius: 0 !important;
}

#espeProductModal [data-espe-product-modal-thumb] img {
  mix-blend-mode: multiply;
}

#espeProductModal [data-espe-product-modal-thumb] {
  border-color: var(--scootive-gray-600) !important;
  background: var(--scootive-gray-100) !important;
}

/* Selected thumbnail: a plain thicker black border, not a colored ring +
   brand-tinted border. */
#espeProductModal [data-espe-product-modal-thumb].border-brand-500 {
  border-width: 2px !important;
  border-color: #111 !important;
  box-shadow: none !important;
}

#espeProductModal aside > div:first-child {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  border-color: var(--scootive-line) !important;
}

#espeProductModal aside > div:first-child p {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  color: var(--scootive-gray-600) !important;
  text-transform: uppercase !important;
}

/* Mobile lightbox: the stage's fixed min-height:calc(100dvh-11.5rem) assumes
   a single-line title. A longer product name (2 lines here) makes the real
   header taller than that formula accounts for, so the stage overflows its
   flex row and pushes the "Zdjęcia"/counter + thumbnail strip below the
   viewport with no way to scroll to them - confirmed live (stagewrap forced
   to 628px tall while its flex row only had 571px available). Let it shrink
   to fit instead, and make the whole modal scrollable as a safety net for
   any still-tight combination (long name + many thumbnails, etc). */
@media (max-width: 1023px) {
  #espeProductModal > div:nth-child(2) {
    overflow-y: auto !important;
  }

  #espeProductModal div:has(> [data-espe-product-modal-prev]) {
    min-height: 0 !important;
    height: 100% !important;
  }

  #espeProductModal .border-t.border-slate-100 {
    border-top: 0 !important;
  }

  #espeProductModal #espeProductModalThumbsMobile {
    gap: 8px !important;
  }

  /* Remaining prototype mobile values (@media max-width:1100px in product.css),
     ported to this template's own <1024px breakpoint for the header/title
     size, body padding+gap, image height cap, and arrow size/position -
     none of these were carried over from the desktop-only pass. */
  #espeProductModal > div:nth-child(2) > div:first-child {
    padding: 20px 18px 0 !important;
  }

  #espeProductModal h3 {
    font-size: 17px !important;
  }

  #espeProductModal > div:nth-child(2) > div:nth-child(2) {
    padding: 16px 18px 22px !important;
    gap: 14px !important;
  }

  #espeProductModalImage {
    max-height: 44vh !important;
  }

  #espeProductModal button[data-espe-product-modal-prev],
  #espeProductModal button[data-espe-product-modal-next] {
    width: 36px !important;
    height: 36px !important;
  }

  #espeProductModal button[data-espe-product-modal-prev] {
    left: 8px !important;
  }

  #espeProductModal button[data-espe-product-modal-next] {
    right: 8px !important;
  }

  #espeProductModal #espeProductModalThumbsMobile > * {
    flex: 0 0 64px !important;
    width: 64px !important;
  }

  /* Mobile "Zdjęcia"/counter row never got the desktop aside header's
     uppercase/letter-spaced/gray-600 treatment - it's a completely separate
     element (not inside <aside>, which is desktop-only), so the earlier
     "aside > div:first-child p" rule never reached it. */
  #espeProductModal > div:nth-child(2) > div:nth-child(3) > div:first-child p {
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    color: var(--scootive-gray-600) !important;
    text-transform: uppercase !important;
  }
}

#espeProductModal .border-slate-100 {
  border-color: var(--scootive-line) !important;
}

/* The prototype's .lightbox-head and .lightbox-side-head have NO border at
   all (plain padding, no divider line) - these two rows had a leftover
   Tailwind border-b that doesn't exist in the prototype at all ("some
   borders you added" - they were already there, from Tailwind, not added by
   an earlier fix, but they still don't belong). Structural selectors so
   this doesn't depend on Tailwind's own class names. */
#espeProductModal > div:nth-child(2) > div:first-child,
#espeProductModal aside > div:first-child {
  border-bottom: 0 !important;
}

#espeProductModal > div:nth-child(2) > div:first-child {
  padding: 28px 32px 0 !important;
}

/* ===== Footer — real cutover, matches src/partials/footer.html + footer.css exactly ===== */
.footer {
  background: #fff;
  padding: 60px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.footer h4 {
  font-size: 10px;
}
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-list li {
  font-size: 12px;
  color: #666;
  margin: 8px 0;
}
.footer-list a {
  display: block;
  color: inherit;
  font-size: inherit;
}
.copyright {
  border-top: 1px solid var(--scootive-line);
  margin-top: 38px;
  padding-top: 18px;
  font-size: 10px;
  color: var(--scootive-gray-700);
  display: flex;
  justify-content: space-between;
}

/* Opening hours: a compact grouped-range line ("mode=footer", e.g.
   "Poniedziałek–Niedziela 11:00–19:00") as the last item of the Kontakt
   list — inherits .footer-list li's font-size/color, see front-hours.css
   for the dot + inline-flex layout. */

@media (max-width: 1100px) {
  .footer {
    padding: 44px 0 26px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
  .copyright {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
}

/* ============ Cart page (checkout/cart.tpl, checkout/cart-empty.tpl,
   checkout/_partials/cart-voucher.tpl) — full port of the prototype's
   cart.html/cart.css, plus the shared classes it pulls in from
   cart-drawer.css (.remove/.summary-row/.shipping-progress/.progress -
   this cart page is the first one in the cutover to reuse those, so
   they're defined here for the first time, not duplicated from an
   existing page) and buttons.css (.btn-black/.qty). The prototype's own
   PayU-installments trigger/modal and the header's mini-cart drawer are
   deliberately NOT part of this pass - see project memory. */
.btn-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 1px solid var(--scootive-ink);
  background: var(--scootive-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 22px;
  text-decoration: none;
  cursor: pointer;
}
.btn-black:hover {
  background: #1d1d1d;
  border-color: #1d1d1d;
}

.cart-page {
  padding: 54px 0 100px;
}
.cart-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 20px;
  margin-bottom: 34px;
}
.cart-head h1 {
  font-size: 62px;
  margin: 8px 0 0;
}
.cart-head .countline {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
}

.cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 440px;
  gap: 64px;
  align-items: start;
}

.cart-list {
  border-top: 1px solid var(--scootive-line);
}
.cart-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 130px 120px 34px;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--scootive-line);
}
.cart-img {
  width: 130px;
  height: 130px;
  /* Literal #ecece7, not var(--scootive-gray-100) (#f3f3ef) - matches the
     prototype's own cart.css value exactly, and the product card's
     .prodimg background (also a literal #ecece7, see part 16) - these
     are two different steps on the gray scale, easy to conflate. */
  background: #ecece7;
  display: grid;
  place-items: center;
}
.cart-img img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.cart-info {
  min-width: 0;
}
.cart-info .brand {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
  font-weight: 900;
}
.cart-info h3 {
  font-size: 18px;
  font-weight: 900;
  margin: 7px 0 7px;
}
.cart-info h3 a {
  color: inherit;
  text-decoration: none;
}
.cart-info h3 a:hover {
  text-decoration: underline;
}
.cart-info .variant {
  font-size: 11px;
  color: var(--scootive-gray-700);
}

.cart-row .qty,
.drawer-item .qty {
  height: 42px;
  border: 1px solid var(--scootive-gray-600);
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  background: #fff;
}
.cart-row .qty a,
.drawer-item .qty a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--scootive-ink);
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
.cart-row .qty span,
.drawer-item .qty span {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--scootive-ink);
}

.cart-price {
  text-align: right;
}
.cart-price b {
  display: block;
  font-size: 15px;
  font-weight: 950;
  color: var(--scootive-ink);
}
.cart-price .unit {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--scootive-gray-700);
}

.remove {
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--scootive-gray-700);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.remove:hover {
  color: var(--scootive-ink);
}

.shipping-progress {
  margin: 28px 0 0;
}
.progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Whole line (label AND value) is the same gray-700 in the prototype -
     no separate darker treatment for the <b> value, unlike similar-looking
     .result-count on the category toolbar (a different component). */
  color: var(--scootive-gray-700);
  margin-bottom: 7px;
}
.progress {
  height: 5px;
  /* Literal #e5e5df, matching the prototype's own .progress track color -
     yet another distinct step on the gray scale from #ecece7/#f3f3ef. */
  background: #e5e5df;
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--scootive-green);
}

.continue {
  display: inline-block;
  margin-top: 24px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--scootive-ink);
  border-bottom: 1px solid var(--scootive-ink);
  text-decoration: none;
}

.cart-summary {
  position: sticky;
  top: 98px;
  background: #fff;
  border: 1px solid var(--scootive-line);
  padding: 28px;
}
.cart-summary h2 {
  font-size: 28px;
  margin: 0 0 24px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  margin: 8px 0;
}
.summary-row b {
  font-weight: 900;
}
.summary-row.total {
  border-top: 1px solid var(--scootive-line);
  padding-top: 18px;
  margin-top: 18px;
  font-size: 18px;
}
.summary-row.total span {
  font-weight: 950;
}

.promo {
  border-top: 1px solid var(--scootive-line);
  padding-top: 18px;
  margin-top: 18px;
}
.promo-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}
.promo-form input {
  height: 42px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  padding: 0 12px;
  /* !important: same app.css 16px-on-focus override as .field input above
     and .sort-select (part 28) - found while checking this same class of
     bug spread further while building checkout. */
  font-size: 12px !important;
  text-transform: uppercase;
}
.promo-form button {
  height: 42px;
  border: 1px solid var(--scootive-ink);
  background: #fff;
  color: var(--scootive-ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 13px;
  cursor: pointer;
}
.promo-form button:hover {
  background: var(--scootive-ink);
  color: #fff;
}

/* Applied-voucher chip, the promo-code disclosure toggle, and the
   available-offers list have no direct prototype equivalent (its .promo
   mockup only ever shows the plain input form) - these follow the
   session's established "plain row/divider, not a bordered card"
   convention for anything without a prototype reference (see e.g. the
   product-page reassurance rows). */
.voucher-applied {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--scootive-line);
}
.voucher-applied .code {
  display: inline-block;
  background: var(--scootive-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 9px;
}
.voucher-applied .reduction {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 900;
  color: var(--scootive-ink);
}
.voucher-applied .name {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--scootive-ink);
}
.voucher-applied .desc {
  margin-top: 2px;
  font-size: 11px;
  color: var(--scootive-gray-700);
}
.voucher-applied .remove-voucher {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
  text-decoration: underline;
  cursor: pointer;
}
.voucher-applied .remove-voucher:hover {
  color: var(--scootive-ink);
}

.voucher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.voucher-head b {
  font-size: 11px;
  font-weight: 900;
  color: var(--scootive-ink);
}
/* Direct-child combinator only - a qualifier span nested INSIDE the <b>
   (e.g. "(optional)" right after "Create an account") must stay inline on
   the same line as the bold text, not become its own block line like the
   subtitle span below it. A plain ".voucher-head span" caught both. */
.voucher-head > div > span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--scootive-gray-700);
}
.voucher-toggle {
  width: 100%;
  cursor: pointer;
  list-style: none;
}
.voucher-toggle::-webkit-details-marker {
  display: none;
}
.voucher-toggle .chev {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--scootive-gray-700);
  transition: transform 0.15s;
}
.voucher-details[open] .voucher-toggle .chev {
  transform: rotate(180deg);
}
.voucher-details-body {
  padding: 0 0 14px;
}

.voucher-offers-wrap {
  /* .voucher-head no longer carries its own border-top (removed - it was
     doubling up with .promo's own top divider whenever the promo-code
     toggle was the first thing inside .promo). This is the one place that
     genuinely still needs a divider of its own, since it sits AFTER the
     promo-code toggle/applied-voucher-list, not at the very top. */
  border-top: 1px solid var(--scootive-line);
}
.voucher-offers {
  padding-bottom: 4px;
}
.voucher-offer {
  padding: 10px 0;
  border-top: 1px solid var(--scootive-line);
}
.voucher-offer .code {
  display: inline-block;
  background: var(--scootive-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  margin-right: 8px;
}
.voucher-offer .desc {
  margin-top: 4px;
  font-size: 11px;
  color: var(--scootive-gray-700);
}

.voucher-error {
  margin-top: 8px;
  font-size: 11px;
  color: #b3261e;
}

.checkout-btn {
  width: 100%;
  margin-top: 20px;
}

/* Empty cart (checkout/cart-empty.tpl) - port of the prototype's
   #cartEmpty/.empty-state block. */
.empty-state {
  text-align: center;
  padding: 90px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.empty-state-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  background: var(--scootive-gray-100);
  border-radius: 999px;
}
.empty-state-icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--scootive-gray-600);
  stroke-width: 1.5;
  fill: none;
}
.empty-state h2 {
  font-size: 28px;
  margin: 0 0 12px;
}
.empty-state p {
  font-size: 13px;
  color: var(--scootive-gray-700);
  line-height: 1.6;
  margin: 0 0 28px;
}
.empty-state .btn-black {
  display: inline-flex;
}

@media (max-width: 1100px) {
  .cart-head h1 {
    font-size: 44px;
  }
  .cart-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cart-row {
    grid-template-columns: 90px minmax(0, 1fr) auto;
    gap: 12px;
  }
  .cart-img {
    width: 90px;
    height: 90px;
  }
  .cart-row .qty {
    grid-column: 2;
    width: 100%;
    max-width: 120px;
  }
  .cart-price {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .remove {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }
  .cart-summary {
    position: static;
  }
}

/* ============ Checkout page (checkout/checkout.tpl + _partials/) ============
   Full port of the prototype's checkout.html/checkout.css/forms.css. Unlike
   cart, this is a REAL PrestaShop 9 multi-step server-rendered flow (not a
   pure client-side accordion simulation like the prototype) - each step's
   .-current/.-reachable/.-complete state and all step-switching/AJAX
   behavior is computed server-side and driven by core's own always-loaded
   themes/core.js bundle (registered by FrontController::initHeader() at
   priority 0 for every front page, independent of this theme's own stub
   front.js) - only markup/classes are restyled here, no new JS written.
   .field/.title-choice/.checkrow-consent (this section) are shared with
   _partials/form-fields.tpl, which is ALSO the field renderer for every
   customer-account form (login/register/address/profile) - restyling it
   here improves those pages too as a side effect, not a redo of them. */

.checkout-page {
  padding: 54px 0 100px;
}
.checkout-head {
  margin-bottom: 34px;
}
.checkout-head h1 {
  font-size: 62px;
  margin: 8px 0 0;
}
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 440px;
  gap: 64px;
  align-items: start;
}
.checkout-grid > div {
  min-width: 0;
}

/* Steps accordion - styled directly on PrestaShop's own real classes
   (.checkout-step/.-current/.-reachable/.-complete/.step-title/.step-edit/
   .content) rather than inventing new ones, since those exact classes are
   what core's JS (js-current-step, step-edit) and the step logic itself
   key off - renaming them would risk breaking real step-switching. */
.steps {
  border-top: 1px solid var(--scootive-line);
}
.checkout-step {
  border-bottom: 1px solid var(--scootive-line);
}
.checkout-step .step-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 0;
  margin: 0;
}
.checkout-step.-reachable:not(.-current) .step-title {
  cursor: pointer;
}
.step-title-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}
.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--scootive-gray-100);
  color: var(--scootive-ink);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}
.checkout-step.-current .step-num,
.checkout-step.-complete .step-num {
  background: var(--scootive-ink);
  color: #fff;
}
.step-label {
  font-size: 20px;
  font-weight: 800;
  color: var(--scootive-gray-700);
}
.checkout-step.-current .step-label,
.checkout-step.-complete .step-label {
  color: var(--scootive-ink);
}
.step-edit {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
  text-decoration: underline;
}
.step-edit:hover {
  color: var(--scootive-ink);
}
.checkout-step .content {
  display: none;
  padding: 0 0 34px 50px;
}
.checkout-step.-current .content {
  display: block;
}
.checkout-step.-unreachable .step-title {
  padding: 22px 0;
}
.checkout-step.-unreachable .step-num,
.checkout-step.-unreachable .step-label {
  background: var(--scootive-gray-100);
  color: var(--scootive-gray-700);
}

@media (max-width: 1100px) {
  .checkout-head h1 {
    font-size: 44px;
  }
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .checkout-step .content {
    padding-left: 0;
  }
}

/* Shared radio/payment-card list - used by both the delivery-method step
   and the payment-method step in the prototype, and here also reused for
   the saved-address selector (a real feature the prototype doesn't have,
   since its static mockup never shows a returning customer's saved
   addresses - extended from, not dropped in favor of, the option-card
   language). */
.option-list {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}
.option-card {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--scootive-gray-600);
  padding: 16px 18px;
  background: #fff;
  cursor: pointer;
}
.option-card.selected {
  border-color: var(--scootive-ink);
}
.option-card input {
  width: 18px;
  height: 18px;
}
.option-card strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: var(--scootive-ink);
}
.option-card > label > div > div,
.option-card .option-copy {
  font-size: 11px;
  color: var(--scootive-gray-700);
  margin-top: 3px;
  white-space: nowrap;
}
.option-price {
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  color: var(--scootive-ink);
}
.option-logo {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 6px;
}
.option-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.address-option {
  border: 1px solid var(--scootive-gray-600);
  padding: 18px 20px;
  background: #fff;
}
.address-option.selected {
  border-color: var(--scootive-ink);
}
.address-option .alias {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: var(--scootive-ink);
}
.address-option .formatted {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--scootive-gray-700);
}
.address-option-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--scootive-line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.address-option-actions a {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
  text-decoration: underline;
}
.address-option-actions a:hover {
  color: var(--scootive-ink);
}
.address-option-actions a.delete-address:hover {
  color: #b3261e;
}

/* Field renderer (_partials/form-fields.tpl) - shared with EVERY form on
   the site (checkout steps, customer account, login/register). */
.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-size: 10px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--scootive-ink);
}
.field label .req {
  color: #c33;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  padding: 0 14px;
  /* !important: same sitewide app.css `input,select,textarea{font-size:
     16px!important}` (iOS zoom-prevention) fight as .sort-select - see
     part 28. */
  font-size: 13px !important;
  font-family: inherit;
  color: var(--scootive-ink);
}
.field input,
.field select {
  height: 46px;
}
.field textarea {
  padding: 12px 14px;
  height: 140px;
  resize: vertical;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #b3261e;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.field-row-3 select {
  width: 100%;
}
.field-hint {
  font-size: 10px;
  color: var(--scootive-gray-700);
  margin-top: 6px;
}
/* Register form (checkout's own customer-form.tpl override) - pairs known
   field names (firstname/lastname) side by side on desktop, matching the
   prototype's .field-row, the same "half-width by name, let grid auto-flow
   seat them" technique the account area's own address-form.tpl already
   uses (untouched, not this cutover's work) for postcode/city. */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.field-full {
  grid-column: 1 / -1;
}
@media (max-width: 1100px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
}
.field-errors {
  margin-top: 6px;
  font-size: 11px;
  color: #b3261e;
}
.field-password {
  position: relative;
}
.field-password input {
  padding-right: 70px;
}
.field-password-toggle {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  border: 0;
  background: transparent;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
  cursor: pointer;
}
.field-password-toggle:hover {
  color: var(--scootive-ink);
}

.title-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.title-btn {
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex !important;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.title-btn input {
  width: 14px;
  height: 14px;
}
.title-btn.selected {
  border-color: var(--scootive-ink);
}

/* This label sits inside the SAME .field wrapper form-fields.tpl gives
   every field type (not just text inputs) - .field label{font-size:10px;
   font-weight:900;color:var(--scootive-ink)} (form-fields.tpl's real
   <label>) has higher specificity (.field label = 0,1,1) than .checkrow-
   consent alone (0,1,0), so it silently won on font-size/weight/color here
   despite never being intended to touch checkboxes - real bug, affected
   EVERY consent checkbox (all rendered bold 10px black instead of the
   intended lighter 11px gray), not just the ones with a second line below.
   !important pins this one back regardless of the ancestor's specificity. */
.checkrow-consent {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--scootive-gray-700) !important;
  line-height: 1.5;
  margin: 22px 0;
}
.checkrow-consent input {
  /* Vertically centers the box against the label's OWN first line (11px
     text at line-height:1.5 ≈ a 16.5px line box), not against the whole
     flex row - so it sits centered next to a short one-line label, centered
     next to a wrapped paragraph's first line, and next to the bold "main"
     line specifically when a second, smaller <em> line follows below it,
     matching every checkbox on this page uniformly (general rule on the
     shared input, not a per-checkbox override). */
  margin-top: 1px;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.checkrow-consent .req {
  color: #c33;
}
/* Real links inside consent text (psgdpr's "Regulamin", the core-rendered
   terms-of-service link in conditions_to_approve) - bold+underline so they
   read as clickable, not indistinguishable from the surrounding plain
   text (the core-rendered one had no link styling at all by default). */
.checkrow-consent a {
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
}
/* Secondary explanatory line (psgdpr's newsletter-unsubscribe note, the
   core customer_privacy disclaimer) - real <em> tags already in the
   source HTML, just never given a distinct lighter treatment from the
   main consent line above. */
.checkrow-consent em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  color: var(--scootive-gray-700);
}

/* Guest/login mode toggle (personal-information.tpl's real
   .js-checkout-auth-tab buttons) and the register-form's optional
   password <details> (same collapsible pattern as the cart page's
   voucher-code toggle, see .voucher-toggle). */
.mode-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
}
/* core.js (themes/core.js, shared/unmodifiable, registered on every front
   page) runs its OWN tab-switching logic on these same buttons and adds ITS
   OWN assumed Tailwind utility classes alongside ours on every real click -
   border-slate-200/bg-white/text-slate-600 when inactive, border-brand-500/
   bg-brand-500/text-white when active (real classes, confirmed live via
   button.className - NOT a browser focus ring, which is what the green
   border was wrongly attributed to earlier). !important beats those
   regardless of load order.
   Styled off [aria-selected], NOT the .active class the template renders
   server-side once: core.js's click handler updates aria-selected (and its
   own Tailwind classes) on every switch but never touches a class literally
   named "active" - so keying off .active would freeze the visible
   selection at whatever the very first page load happened to render,
   showing the WRONG tab as "selected" after a real click (confirmed live:
   clicking "Zaloguj się" correctly flips aria-selected/the visible
   tab-pane, but .active stayed on the original button). */
.mode-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--scootive-ink) !important;
  background: #fff !important;
  color: var(--scootive-ink) !important;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.mode-btn[aria-selected='true'] {
  background: var(--scootive-ink) !important;
  border-color: var(--scootive-ink) !important;
  color: #fff !important;
}
/* Explicit, branded focus ring - without this the browser/OS falls back to
   its own default focus indicator, which we don't otherwise control. */
.mode-btn:focus-visible {
  outline: 2px solid var(--scootive-ink);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .field-row {
    grid-template-columns: 1fr;
  }
  .field-row-3 {
    grid-template-columns: 1fr;
  }
}

/* checkout/_partials/cart-summary*.tpl - the checkout sidebar's order
   summary, sharing .summary-row/.summary-row.total/.promo/.voucher-* with
   the cart page (see part 27/28) rather than redefining them. Adds a real
   feature the prototype doesn't have (collapsible per-product breakdown,
   .csp-*) - kept per the session's "don't cap real data to the mockup's
   placeholder scope" rule rather than dropped to match the simpler mockup. */
/* Explicit per-block dividers rather than a generic ">* + *" sibling rule -
   .cart-summary-top turned out to NOT always be empty after all (the real
   PayU installments module hooks displayCheckoutSummaryTop with its own
   mini-widget - a genuine, real feature, not something to hide), so it
   needs its own divider treatment below rather than being written off. */
.cart-summary-top:empty {
  display: none;
}
.cart-summary-top:not(:empty) {
  padding-bottom: 20px;
}
.cart-summary-top:not(:empty) + .cart-summary-products {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--scootive-line);
}
/* PayU's own module template ships a plain <hr class="payu-separator-reset">
   + empty <p></p> - the "-reset" in that class name is the module's own
   convention signalling themes are expected to hide it and provide their
   own spacing instead (which the rules above now do), rather than leave
   its unstyled native browser-default hr line sitting next to ours. */
.payu-separator-reset,
.cart-summary-top > p:empty {
  display: none;
}
/* Styled to match the prototype's .payu-trigger (solid black bar, green
   "RATY" tag, green amount, trailing arrow) even though the actual text
   content ("Rata już od: X zł") is generated by PayU's own external SDK,
   not our markup - a ::before/::after supply the tag/arrow decoration,
   and the widget's own inline styles ("color: rgb(29,175,236)", PayU's
   brand blue) are overridden with !important since inline beats any
   non-!important CSS regardless of specificity. */
.payu-installment-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--scootive-ink);
  padding: 16px 18px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.payu-installment-panel::before {
  content: "RATY";
  flex-shrink: 0;
  background: var(--scootive-green);
  color: var(--scootive-ink);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.08em;
  padding: 5px 8px;
}
.payu-installment-panel::after {
  content: "\2192";
  flex-shrink: 0;
  font-size: 14px;
  color: var(--scootive-green);
}
.payu-installment-panel a,
.payu-installment-panel [class*="payu-mini-installments-widget"] {
  color: #fff !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.payu-installment-panel .payu-mini-installments-widget-amount {
  color: var(--scootive-green) !important;
  font-weight: 950 !important;
}
.cart-summary-subtotals-container,
.cart-summary-totals,
.checkout-summary-body .promo {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--scootive-line);
}
/* .summary-row.total (shared with the cart page, where it's a bare sibling
   row with no wrapping divider of its own) ALSO carries its own border-top
   - redundant here specifically when "Razem" is the only/first thing in
   .cart-summary-totals (the normal tax-inclusive-prices case), since the
   container above already drew the one divider needed. Cancelled only for
   :first-child so the tax-exclusive branch (where a plain subtotal row
   precedes "Razem" inside the SAME container) still gets its own
   separation from that row. */
.cart-summary-totals > .summary-row.total:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.csp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.csp-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
  margin: 0;
}
.csp-value {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 900;
  color: var(--scootive-ink);
}
.csp-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  padding: 8px 12px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--scootive-ink);
  cursor: pointer;
}
.csp-toggle:hover {
  border-color: var(--scootive-ink);
}
.csp-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s;
}
.csp-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.csp-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.csp-line {
  display: flex;
  gap: 12px;
}
.csp-line-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: #ecece7;
  display: grid;
  place-items: center;
}
.csp-line-img img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.csp-line-info {
  min-width: 0;
  flex: 1;
}
.csp-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.csp-line-name {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  color: var(--scootive-ink);
}
.csp-line-name a {
  color: inherit;
  text-decoration: none;
}
.csp-line-name a:hover {
  text-decoration: underline;
}
.csp-line-price {
  flex-shrink: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  color: var(--scootive-ink);
  white-space: nowrap;
}
.csp-line-qty,
.csp-line-attrs {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--scootive-gray-700);
}
.csp-line-attr-key {
  color: var(--scootive-ink);
  font-weight: 700;
}
.csp-line-unit:empty {
  display: none;
}

.cart-summary-tax-note {
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--scootive-gray-700);
}

/* Addresses step (checkout/_partials/steps/addresses.tpl + address-form.tpl
   + address-selector-block.tpl) - plain info/error notices and a small
   sub-heading style for "Shipping details"/"Billing details" (no direct
   prototype reference for these two - its own demo has no saved-address
   selector or split invoice/delivery flow, so this follows the same
   plain-box convention as everywhere else in this cutover with no
   prototype source to copy). */
.checkout-notice {
  border: 1px solid var(--scootive-line);
  background: var(--scootive-gray-50);
  padding: 16px 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--scootive-gray-700);
}
.checkout-notice a {
  color: var(--scootive-ink);
  font-weight: 700;
}
.checkout-notice.is-error {
  border-color: #f0b8b8;
  background: #fdf3f3;
  color: #a3261e;
}
.checkout-subhead {
  margin: 28px 0 16px;
}
.checkout-subhead:first-child {
  margin-top: 0;
}
.checkout-subhead h3 {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--scootive-ink);
}
.checkout-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}
.checkout-link-row a {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--scootive-ink);
  text-decoration: underline;
}
.checkout-link-row a:hover {
  color: var(--scootive-gray-700);
}
.btn-outline-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  color: var(--scootive-ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn-outline-checkout:hover {
  border-color: var(--scootive-ink);
}
.step-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

/* Delivery/shipping step (shipping.tpl) - carrier list reuses .option-list/
   .option-card/.option-logo/.option-price (same component as the payment
   step's method cards). extraContent (e.g. an InPost locker picker) is a
   real sibling the core JS shows/hides based on selection, kept outside
   the <label> itself. */
.carrier-extra-content {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--scootive-line);
}
.order-options {
  margin-top: 22px;
}
.order-options .field {
  margin-bottom: 18px;
}
.order-options .checkrow-consent {
  margin: 0 0 18px;
}

/* Payment step (payment.tpl) - method cards reuse .option-list/.option-card/
   .option-logo/.option-price exactly like the prototype's own payment-step
   demo (label>input[radio]+span+span.option-price). .step-edit is also a
   real <button> here (module's own JS-disabled "Choose" fallback and the
   final-check "Edit" buttons in order-final-summary.tpl below) as well as
   an <a> (checkout-step.tpl's step-title edit link) - reset to plain text
   either way. */
.step-edit {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
}
.payment-option-additional {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--scootive-line);
  background: var(--scootive-gray-50);
  font-size: 12px;
  line-height: 1.7;
  color: var(--scootive-gray-700);
}
.payment-option-additional strong {
  color: var(--scootive-ink);
}
.payment-option-form {
  margin-top: 14px;
}
.btn-black[disabled],
.btn-black.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-black[disabled]:hover,
.btn-black.disabled:hover {
  background: var(--scootive-ink);
  border-color: var(--scootive-ink);
}
.payment-confirm-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.payment-confirm-actions .checkout-notice {
  align-self: stretch;
}

/* Final check (order-final-summary.tpl) - a read-only recap of addresses/
   shipping method/order total shown at the bottom of the payment step,
   right before "Place order". No direct prototype reference (its own demo
   uses a much smaller #orderReview box, see project memory) - built from
   the same component vocabulary as the rest of checkout instead: .address-
   option for the two read-only address boxes (same look, just without
   .selected/radio since nothing is chosen here), a plain non-interactive
   variant of .option-card for the shipping method line. */
.checkout-review {
  margin-top: 8px;
}
.review-block {
  margin-top: 32px;
}
.review-block:first-of-type {
  margin-top: 0;
}
.review-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.review-block-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--scootive-ink);
}
.review-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.review-address-grid .address-option .alias {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
}
.review-carrier {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--scootive-gray-600);
  padding: 16px 18px;
}
.review-carrier strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: var(--scootive-ink);
}
.review-carrier .option-copy {
  font-size: 11px;
  color: var(--scootive-gray-700);
  margin-top: 3px;
}
@media (max-width: 1100px) {
  .review-address-grid {
    grid-template-columns: 1fr;
  }
}

/* Order line items table (order-confirmation-table.tpl) - shared between
   this "Final check" recap and the real post-purchase order-confirmation
   page (checkout/order-confirmation.tpl), which is still in the OLDER/
   different rounded design language (see project memory) - restyled here
   anyway rather than left raw, since on THIS page it sits directly beneath
   the now-restyled payment cards and a half-styled page would look broken,
   not just "a different page in an older style". Reuses .summary-row/
   .summary-row.total for the subtotals/total block underneath (identical
   markup/logic to the cart page and checkout sidebar). */
.review-head {
  display: none;
}
.review-line {
  padding: 20px 0;
  border-bottom: 1px solid var(--scootive-line);
}
.review-line:first-child {
  padding-top: 0;
}
.review-line:last-child {
  border-bottom: 0;
}
.review-grid {
  display: grid;
  gap: 10px;
}
.review-main {
  display: flex;
  gap: 14px;
  min-width: 0;
}
.review-img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  background: #ecece7;
  display: grid;
  place-items: center;
}
.review-img img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.review-info {
  min-width: 0;
}
.review-info h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--scootive-ink);
}
.review-info h3 a {
  color: inherit;
  text-decoration: none;
}
.review-info h3 a:hover {
  text-decoration: underline;
}
.review-info .variant {
  margin-top: 4px;
  font-size: 11px;
  color: var(--scootive-gray-700);
}
.review-customization {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--scootive-line);
  background: var(--scootive-gray-50);
}
.review-customization-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
  margin-bottom: 6px;
}
.review-customization-field {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--scootive-gray-700);
  margin-top: 4px;
}
.review-customization-field strong {
  flex-shrink: 0;
  color: var(--scootive-ink);
  font-weight: 700;
}
.review-unit-price {
  margin-top: 6px;
  font-size: 10px;
  color: var(--scootive-gray-700);
}
.review-cols {
  display: flex;
  gap: 16px;
}
.review-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--scootive-ink);
}
.review-col.total {
  justify-content: flex-end;
  font-weight: 900;
}
.review-col-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scootive-gray-700);
}
.review-tax-note {
  margin-top: 8px;
  font-size: 10px;
  color: var(--scootive-gray-700);
}
@media (min-width: 901px) {
  .review-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 70px 120px;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--scootive-ink);
    margin-bottom: 6px;
  }
  .review-head span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--scootive-gray-700);
  }
  .review-head span:nth-child(2),
  .review-head span:nth-child(3) {
    text-align: center;
  }
  .review-head span:nth-child(4) {
    text-align: right;
  }
  .review-grid {
    grid-template-columns: minmax(0, 1fr) 110px 70px 120px;
    align-items: center;
    gap: 16px;
  }
  .review-cols {
    display: contents;
  }
  .review-col {
    display: block;
    text-align: center;
  }
  .review-col.total {
    text-align: right;
  }
  .review-col-label {
    display: none;
  }
}

/* Header mini-cart drawer (_partials/drawers/cart-drawer.tpl). Its own
   .opacity-0/.opacity-100/.translate-x-full/.translate-x-0/.pointer-events-*
   toggle classes are added/removed directly by theme.js's initCartDrawer() -
   scoped to .cart-overlay/.cart-drawer here rather than left as bare Tailwind
   utilities, since this bundle's compiled CSS doesn't actually contain rules
   for those specific utility names (checked: absent from app.css too), so
   the open/close previously just snapped via the `hidden` attribute alone
   with no slide/fade. */
.cart-overlay {
  position: fixed;
  inset: 0;
  /* Matches the .mobile-nav-overlay/.mobile-nav drawer pair's own 350/351
     scale (same tier: a full-screen slide-in drawer above the sticky
     .mainnav header, which is z-index:100) rather than an arbitrary low
     value - 60/61 first tried here rendered BEHIND the sticky header. */
  z-index: 355;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  transition: opacity 0.2s;
}
.cart-overlay.opacity-0 {
  opacity: 0;
}
.cart-overlay.opacity-100 {
  opacity: 1;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 356;
  width: min(520px, 100%);
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--scootive-line);
  display: flex;
  flex-direction: column;
  transition: transform 0.24s;
}
.cart-drawer.translate-x-full {
  transform: translateX(100%);
}
.cart-drawer.translate-x-0 {
  transform: translateX(0);
}
.drawer-head {
  height: 84px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--scootive-line);
  flex-shrink: 0;
}
.drawer-head h2 {
  font-size: 26px;
  margin: 0;
}
.drawer-head small {
  display: block;
  color: var(--scootive-gray-700);
  font-size: 10px;
  margin-top: 6px;
  text-transform: uppercase;
}
.drawer-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.drawer-body {
  padding: 22px 26px;
  overflow: auto;
  flex: 1;
}
.drawer-empty {
  font-size: 13px;
  color: var(--scootive-gray-700);
  text-align: center;
  padding: 40px 0;
}
.drawer-item {
  display: grid;
  grid-template-columns: 90px 1fr 28px;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--scootive-line);
}
.drawer-item:first-child {
  padding-top: 0;
}
.drawer-image {
  width: 90px;
  height: 90px;
  background: #ecece7;
  display: grid;
  place-items: center;
}
.drawer-image img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.drawer-item .brand {
  font-size: 9px;
  letter-spacing: 0.11em;
  color: var(--scootive-gray-700);
  font-weight: 900;
  text-transform: uppercase;
}
.drawer-item h3 {
  font-size: 14px;
  font-weight: 900;
  margin: 6px 0 5px;
}
.drawer-item h3 a {
  color: inherit;
  text-decoration: none;
}
.drawer-item h3 a:hover {
  text-decoration: underline;
}
.drawer-item .variant {
  font-size: 10px;
  color: var(--scootive-gray-700);
}
.drawer-item .line-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.drawer-item .price {
  font-size: 13px;
  font-weight: 900;
}
.drawer-foot {
  background: #fff;
  border-top: 1px solid var(--scootive-line);
  padding: 22px 26px;
  flex-shrink: 0;
}
.drawer-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 18px;
}
.drawer-actions .btn-black {
  width: 100%;
}
.drawer-secondary {
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  padding-top: 4px;
  color: var(--scootive-ink);
  text-decoration: none;
  text-transform: uppercase;
}
.drawer-secondary:hover {
  text-decoration: underline;
}

/* Order confirmation page (checkout/order-confirmation.tpl) - the real
   product/subtotal table below reuses the "Final check" step's own
   .review-* component untouched (see the comment above .review-head); this
   block only covers the page's own header/sidebar/actions shell. */
.confirmation-page {
  padding: 70px 0 24px;
}
.confirmation-body {
  padding-bottom: 100px;
}
.confirmation-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.confirmation-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--scootive-green);
  color: #111;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
}
.confirmation-head .eyebrow {
  color: var(--scootive-gray-700);
}
.confirmation-head h1 {
  font-size: 40px;
  margin: 10px 0 14px;
}
.confirmation-head p {
  font-size: 14px;
  color: var(--scootive-gray-700);
  line-height: 1.6;
}
.confirmation-head p a {
  font-weight: 900;
  text-decoration: underline;
  color: inherit;
}
.confirmation-hook {
  max-width: 640px;
  margin: 0 auto;
}
.confirmation-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 1px solid var(--scootive-gray-600);
  background: transparent;
  color: var(--scootive-ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 22px;
  text-decoration: none;
}
.btn-outline:hover {
  border-color: var(--scootive-ink);
}
@media (max-width: 1100px) {
  .confirmation-head h1 {
    font-size: 30px;
  }
  .confirmation-actions {
    flex-direction: column;
  }
}

/* Guest -> customer upsell (customer/_partials/account-transformation-form.tpl),
   shown on the order-confirmation page for guest checkouts. */
.account-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.account-benefit {
  border: 1px solid var(--scootive-line);
  padding: 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--scootive-gray-700);
  text-align: center;
}
@media (max-width: 1100px) {
  .account-benefits {
    grid-template-columns: 1fr;
  }
  /* The shipping-method row can carry a long real carrier delay sentence
     (e.g. "Kurier JWP Przewidywana dostawa: Poniedziałek (21 września)
     (przy szybkiej płatności)") - right-aligned in a narrow value column it
     reads cramped, so this one row stacks label above value on narrow
     screens instead of the plain label:price side-by-side every other
     .summary-row uses (those always hold a short price, never long prose). */
  .summary-row-shipping {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
  }
  .summary-row-shipping b {
    text-align: left !important;
  }
}


/* Contact page (templates/contact.tpl). The prototype's mockup hardcoded a
   department directory + NIP/REGON/bank details that don't match this
   shop's real configured contact info (confirmed via a DB read) - per
   explicit instruction, this page shows only the real contacts configured
   in Admin > Customer Service > Contacts (no message-sending form), the
   real ps_contactinfo module, the real wetwoshipping opening-hours widget,
   and a map on the real configured shop address. No fabricated legal/
   banking details.
   Structural note: breadcrumb sits directly in page_content_container (same
   nesting depth as the real category page's own .cat-head), not wrapped in
   its own extra .wrap/.contact-page div - an earlier version double-wrapped
   this, which is why the breadcrumb sat at a different height here than on
   other pages. */
.contact-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: stretch;
  margin-bottom: 40px;
}
.contact-list {
  border-top: 1px solid var(--scootive-line);
}
.contact-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--scootive-line);
  align-items: baseline;
}
.contact-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--scootive-ink);
}
.contact-body h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--scootive-gray-700);
  margin: 0 0 10px;
  line-height: 1.4;
}
.contact-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.contact-links a {
  font-size: 13px;
  font-weight: 900;
  text-decoration: underline;
  color: var(--scootive-ink);
}
.contact-phone-group {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.contact-ext {
  font-size: 12px;
  font-weight: 400;
  color: var(--scootive-gray-700);
}
.contact-store-dark {
  background: var(--scootive-ink);
  color: #fff;
  padding: 44px;
  position: relative;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.contact-store-dark .eyebrow {
  margin-bottom: 14px;
}
.contact-store-dark h2 {
  font-size: 32px;
  margin: 8px 0 26px;
  color: #fff;
}
.store-facts {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 28px;
}
.store-facts b {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--scootive-green);
  margin-bottom: 8px;
}
.store-facts span {
  display: block;
  font-size: 14px;
  color: #ddd;
  line-height: 1.6;
}
/* Dark-mode override for wetwoshipping's own hours widget (front-hours.css
   ships light-only colors) so its real weekly table + upcoming exceptions
   fit inside this dark section instead of a separate light sidebar card. */
.contact-store-dark .wetwo-hours--full {
  margin-top: 0;
}
.contact-store-dark .wetwo-hours__row th,
.contact-store-dark .wetwo-hours__row td {
  color: #ddd;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.contact-store-dark .wetwo-hours__row th {
  color: #9a9a9a;
}
.contact-store-dark .wetwo-hours__row--today th,
.contact-store-dark .wetwo-hours__row--today td {
  color: #fff;
}
.contact-store-dark .wetwo-hours__exceptions {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.contact-store-dark .wetwo-hours__exceptions-title,
.contact-store-dark .wetwo-hours__note {
  color: #9a9a9a;
}
.store-map {
  flex: 1;
  min-height: 180px;
  border: 1px solid #2a2a2a;
}
.store-map iframe {
  width: 100%;
  height: 100%;
  min-height: 180px;
  border: 0;
  display: block;
}

/* Real store-info block - modules/ps_contactinfo's OWN "rich" template
   variant (ps_contactinfo-rich.tpl), used automatically by the module
   itself for displayContactLeftColumn/RightColumn (confirmed by reading
   renderWidget()'s own hook-name switch - NOT the plain ps_contactinfo.tpl
   footer variant its default .block-contact classes would suggest). Core
   markup, unmodified - themed directly on its own real classes.
   Its <i class="material-icons"> ligature icons are hidden rather than
   restyled: this theme never loads the Material Icons webfont (same root
   cause as the blockwishlist heart-icon fix earlier this project), so
   they'd otherwise render as a visible fallback glyph/box. */
.contact-rich h4 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--scootive-ink);
  margin: 0 0 16px;
}
.contact-rich .block {
  display: flex;
  padding: 12px 0;
}
.contact-rich .icon {
  display: none;
}
.contact-rich hr {
  border: 0;
  border-top: 1px solid var(--scootive-line);
  margin: 0;
}
.contact-rich .data {
  font-size: 13px;
  color: var(--scootive-gray-700);
  line-height: 1.7;
}
.contact-rich .data a {
  color: var(--scootive-ink);
  font-weight: 700;
}

/* Real contact form (modules/contactform/views/templates/widget/contactform.tpl),
   core markup, unmodified - themed directly on its own real classes. */
.login-form header h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
.login-form header p {
  font-size: 13px;
  color: var(--scootive-gray-700);
  line-height: 1.6;
  margin: 0 0 24px;
}
.login-form .form-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-form .form-fields label {
  display: block;
}
.login-form .form-fields label span {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--scootive-ink);
  margin-bottom: 8px;
}
.login-form .form-fields input,
.login-form .form-fields select,
.login-form .form-fields textarea {
  width: 100%;
  height: 46px;
  border: 1px solid var(--scootive-gray-600);
  background: #fff;
  padding: 0 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--scootive-ink);
}
.login-form .form-fields textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}
.login-form .form-fields input[type='file'] {
  border: 0;
  height: auto;
  padding: 0;
}
.login-form .form-footer {
  margin-top: 22px;
}
.login-form .form-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 1px solid var(--scootive-ink);
  background: var(--scootive-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 26px;
  cursor: pointer;
}
.login-form .form-footer button:hover {
  background: #fff;
  color: var(--scootive-ink);
}
.login-form .notification {
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  border: 1px solid var(--scootive-line);
}
.login-form .notification-error {
  border-color: #f0b8b8;
  background: #fdf3f3;
  color: #a3261e;
}
.login-form .notification-success {
  border-color: #cfe8b0;
  background: #f3fbe9;
  color: #3d6b1e;
}
.login-form .notification ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 1100px) {
  .contact-split {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 32px;
  }
  .contact-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 0;
  }
  .contact-store-dark {
    padding: 32px;
    margin-top: 32px;
  }
  .store-map {
    min-height: 220px;
  }
  .store-map iframe {
    min-height: 220px;
  }
}

/* Manufacturers/brands listing (templates/catalog/manufacturers.tpl +
   _partials/miniatures/brand.tpl) - REAL prototype reference at
   src/pages/marki.html + assets/css/marki.css (missed on the first pass -
   searched for "brand"/"manufacturer" in the prototype tree, but the file
   is named in Polish). Ported close to 1:1: sticky A-Z jump nav, a
   "featured" section, and a letter-grouped directory - all real-data
   driven, not the prototype's own hardcoded demo array:
   - featured = manufacturers with a real, non-empty admin-written
     description (an honest "someone actually curated this" signal - this
     store currently has exactly 3: Apex/Graphic Corner/Studio Design),
     not a fabricated flag.
   - directory cards drop the prototype's per-brand "tag" (category label)
     and logo image entirely, per explicit request - name + product count
     only.
   - letter-jump grouping is computed server-side per real brand name
     (Smarty {foreach}, not the prototype's own client-side marki.js) so it
     works with no JS and matches this project's established preference for
     real server-rendered content. */
.brands-head {
  padding: 36px 0 40px;
}
.brands-head h1 {
  font-size: 76px;
  margin: 8px 0 16px;
}
.brands-intro {
  font-size: 14px;
  line-height: 1.65;
  color: var(--scootive-gray-700);
  max-width: 560px;
}

.az-jump-wrap {
  position: sticky;
  top: 74px;
  z-index: 90;
  background: rgba(245, 245, 241, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--scootive-line);
  border-bottom: 1px solid var(--scootive-line);
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}
.az-jump {
  display: flex;
  gap: 2px;
  padding: 14px 0;
  overflow-x: auto;
}
.az-jump a,
.az-jump span {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}
.az-jump a {
  color: var(--scootive-ink);
  cursor: pointer;
  text-decoration: none;
}
.az-jump a:hover {
  background: var(--scootive-ink);
  color: #fff;
}
.az-jump span {
  color: var(--scootive-gray-600);
}

.brands-featured {
  padding: 54px 0 20px;
}
.brands-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.brand-feature {
  display: block;
  border: 1px solid var(--scootive-line);
  background: #fff;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: 0.2s;
  text-decoration: none;
}
.brand-feature-name {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--scootive-ink);
}
.brand-feature p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--scootive-gray-700);
  margin: 14px 0 26px;
  max-width: 340px;
  transition: 0.2s;
}
.brand-feature-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.brand-feature-meta span:first-child {
  color: var(--scootive-gray-600);
  transition: 0.2s;
}
.brand-feature-link {
  position: relative;
  color: var(--scootive-ink);
}
.brand-feature-link:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--scootive-green);
  transition: 0.2s;
}
.brand-feature:hover {
  background: var(--scootive-ink);
  border-color: var(--scootive-ink);
}
.brand-feature:hover .brand-feature-name,
.brand-feature:hover p,
.brand-feature:hover .brand-feature-meta span:first-child,
.brand-feature:hover .brand-feature-link {
  color: #fff;
}
.brand-feature:hover .brand-feature-link:after {
  width: 100%;
}

.brands-directory {
  padding: 40px 0 90px;
}
.brand-letter-group {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  align-items: start;
  border-top: 1px solid var(--scootive-line);
  padding: 30px 0;
  scroll-margin-top: 140px;
}
.brand-letter-group:first-child {
  border-top: 0;
}
.brand-letter {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 44px;
  line-height: 1;
  color: var(--scootive-ink);
  margin: 0;
}
.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.brand-card {
  position: relative;
  display: block;
  border: 1px solid var(--scootive-line);
  background: #fff;
  padding: 18px 34px 18px 20px;
  transition: 0.15s;
  text-decoration: none;
}
.brand-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.brand-card-name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--scootive-ink);
}
.brand-card-count {
  font-size: 10px;
  font-weight: 900;
  color: var(--scootive-gray-600);
}
.brand-card-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: 13px;
  opacity: 0;
  transform: translateX(-4px);
  transition: 0.15s;
  color: var(--scootive-green);
}
.brand-card:hover {
  background: var(--scootive-ink);
  border-color: var(--scootive-ink);
}
.brand-card:hover .brand-card-name,
.brand-card:hover .brand-card-count {
  color: #fff;
}
.brand-card:hover .brand-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1100px) {
  .az-jump-wrap {
    top: 137px;
  }
  .brand-letter-group {
    scroll-margin-top: 200px;
  }
  .brands-head {
    padding: 34px 0 26px;
  }
  .brands-head h1 {
    font-size: 46px;
  }
  .brands-featured-grid {
    grid-template-columns: 1fr;
  }
  .brands-featured {
    padding: 38px 0 10px;
  }
  .brand-letter-group {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 0;
  }
  .brand-letter {
    font-size: 26px;
  }
  .brands-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.catalog-empty {
  border: 1px solid var(--scootive-line);
  padding: 32px;
}
.catalog-empty h4 {
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 8px;
}
.catalog-empty p {
  font-size: 13px;
  color: var(--scootive-gray-700);
  line-height: 1.6;
  margin: 0;
}

/* 404 page (templates/errors/404.tpl) - a standalone document with no
   header/footer, matching the real prototype (src/pages/404.html +
   error-404.css) exactly: full-bleed dark page, side-by-side text+mascot
   on desktop, stacked (mascot above text) on mobile. The scaffold's own
   {l} strings here were ALREADY real, correctly-translated copy (verified
   in the compiled catalogue) - only the visual shell (raw Tailwind,
   green/white instead of the real near-black/white theme) needed work.
   body.page-404 needs its own !important to beat the sitewide
   `body{background:var(--scootive-bg)!important}` rule (added earlier
   this project for every other page) - confirmed live this was silently
   overriding the intended dark background before this fix. */
body.page-404 {
  background: #0b0b0b !important;
  color: #fff;
}
.error-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 60px 0;
}
.error-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
}
.error-copy {
  flex: 1;
  max-width: 640px;
}
.error-visual {
  flex-shrink: 0;
  width: 320px;
}
.error-visual img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.53));
}
.error-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  padding: 9px 16px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.error-copy h1 {
  font-size: 76px;
  margin: 20px 0 22px;
  color: #fff;
}
.error-copy p {
  font-size: 14px;
  line-height: 1.7;
  color: #aaa;
  max-width: 480px;
}
.error-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.error-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.error-btn-green {
  border: 1px solid var(--scootive-green);
  background: var(--scootive-green);
  color: #111;
}
.error-btn-green:hover {
  background: transparent;
  color: var(--scootive-green);
}
.error-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
}
.error-btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1100px) {
  .error-404 {
    padding: 48px 0;
  }
  .error-grid {
    flex-direction: column-reverse;
    gap: 34px;
    text-align: center;
  }
  .error-copy {
    max-width: none;
  }
  .error-copy p {
    margin: 0 auto;
  }
  .error-visual {
    width: 220px;
  }
  .error-copy h1 {
    font-size: 44px;
  }
  .error-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.contact-note {
  font-size: 12px;
  color: var(--scootive-gray-700);
  line-height: 1.6;
  margin: 12px 0 0;
}

/* Real homepage-only newsletter section (src/pages/home.html's own
   .newsletter/.signup, home.css) - replaces the old sitewide Tailwind-
   scaffold placeholder (hardcoded Polish text, shown on every page except
   cart/checkout/order) per explicit request ("Option A"): dropped entirely
   from every other page, rebuilt here as homepage-only, using the real
   ps_emailsubscription module (restyled, not replaced - see the theme's
   own ps_emailsubscription.tpl override) instead of a fake demo form.
   ps_socialfollow/blockreassurance intentionally excluded from this spot
   (isolated via {hook mod='ps_emailsubscription'}) - socialfollow currently
   has no configured links (renders an empty list) and blockreassurance
   already appears on 5 other hooks sitewide, so nothing is lost. */
.newsletter {
  background: #080808;
  color: #fff;
  padding: 94px 0;
}
.newsletter .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.newsletter h2 {
  font-size: 72px;
  margin: 8px 0;
}
.newsletter p {
  color: #aaa;
  line-height: 1.6;
}
.signup {
  display: flex;
  border-bottom: 1px solid #555;
}
.signup input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  padding: 18px 0;
}
.signup input::placeholder {
  color: #777;
}
.signup input:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.signup button {
  width: 90px;
  border: 0;
  background: var(--scootive-green);
  font-size: 20px;
  cursor: pointer;
}
.newsletter-msg {
  color: var(--scootive-green2);
  font-size: 14px;
  font-weight: 800;
  padding: 18px 0;
  border-bottom: 1px solid #555;
}
.newsletter-msg-error {
  color: #f5a3a3;
}
.newsletter-conditions {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}
@media (max-width: 1100px) {
  .newsletter {
    padding: 56px 0;
  }
  .newsletter .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .newsletter h2 {
    font-size: 38px;
  }
}

/* Login/register pages (src/pages/login.html, login.css/forms.css) - split-
   screen auth shell shared by customer/authentication.tpl and customer/
   registration.tpl. The prototype's single JS-toggled page became two real
   pages (see those templates' own comments); .mode-toggle/.mode-btn are the
   SAME components checkout's guest/register tabs already use (kept
   consistent, not reinvented) - here they're real <a> links between the two
   pages, so core.js's own .js-checkout-auth-tab click handling (which only
   targets its own class) never gets involved. */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--scootive-line);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--scootive-ink);
  z-index: 10;
}
.auth-close:hover {
  border-color: var(--scootive-ink);
}
.auth-visual {
  position: sticky;
  top: 0;
  height: 100vh;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px;
  overflow: hidden;
}
/* Real registration has more fields than the prototype's mockup (birthdate,
   2 consent checkboxes), so .auth-form-side is often taller than the
   viewport and the page scrolls - sticky (was a plain grid child) keeps
   this panel and the "Wróć do strony głównej" link pinned in view the
   whole time, matching the ORIGINAL raw scaffold's lg:fixed behavior that
   this rebuild had dropped.
   Not justify-content:space-between (the prototype's own value) - that
   prototype is ONE page whose visual/marketing copy never actually changes
   (only the form pane toggles), so it never had to handle two different
   copy heights. Splitting login/register into two real pages gave each its
   own real heading/paragraph (different lengths), and space-between
   redistributes leftover space by how much content there IS - caught live:
   the logo-to-copy gap visibly differed between the two pages.
   margin-top/bottom: auto on the copy block instead centers IT in
   whatever's left between the logo (top) and the back-link (bottom) -
   both of which now stay put at a fixed position regardless of copy
   length, per explicit request. */
.auth-visual-copy {
  margin-top: auto;
  margin-bottom: auto;
}
.auth-visual-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.65) 100%),
    url('../img/auth-visual.png') center/cover no-repeat;
  filter: saturate(0.85) contrast(1.05);
}
.auth-logo,
.auth-visual-copy,
.auth-back {
  position: relative;
  z-index: 1;
}
.auth-logo img {
  height: 22px;
  width: auto;
  display: block;
  filter: invert(1);
}
.auth-visual-copy {
  max-width: 440px;
}
.auth-pill {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 12px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.auth-visual h1 {
  font-size: 52px;
  margin: 0 0 18px;
}
.auth-visual-copy p {
  font-size: 13px;
  line-height: 1.65;
  color: #d4d4d4;
  max-width: 380px;
}
.auth-chips {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
.auth-chip {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 14px 16px;
}
.auth-chip b {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--scootive-green);
}
.auth-chip span {
  display: block;
  font-size: 11px;
  color: #ccc;
  margin-top: 4px;
}
.auth-back {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
}
.auth-form-side {
  background: var(--scootive-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--scootive-line);
  padding: 44px;
}
.auth-card h2 {
  font-size: 26px;
  margin: 14px 0 8px;
}
.auth-card .sub {
  font-size: 12px;
  color: var(--scootive-gray-700);
  margin-bottom: 26px;
}
/* Real registration has 2 real consent checkboxes stacked (regulamin/
   polityka prywatności + newsletter) that the prototype's own mockup never
   had, making the card taller than the sticky visual panel/viewport - per
   explicit request, tightened just their OWN spacing (not the shared
   .field rhythm, which stays at the prototype's real 18px value) to help
   the page need less scrolling. */
.auth-card .checkrow-consent {
  margin: 14px 0;
}
.auth-forgot {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
  margin: -6px 0 22px;
  color: var(--scootive-ink);
}
/* Generic form-error list (_partials/form-errors.tpl's real .help-block/
   .alert-danger classes) - same color values as .login-form's own
   .notification-error (contactform page) for visual consistency, kept as a
   separate rule rather than reusing that class since the markup shape
   differs entirely (.form-fields there vs .field here). */
.help-block ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-block .alert-danger {
  border: 1px solid #f0b8b8;
  background: #fdf3f3;
  color: #a3261e;
  font-size: 12px;
  padding: 12px 14px;
}
@media (max-width: 1100px) {
  .auth-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .auth-visual {
    /* NOT position:static - a real bug caught live: .auth-visual-bg is
       position:absolute;inset:0, and static removes the positioning
       context it needs, so the background photo escaped to the nearest
       OTHER positioned ancestor and rendered full-viewport-tall instead of
       confined to this 340px panel, bleeding into the form card below it. */
    position: relative;
    /* height, not min-height - a real bug caught live: login/register have
       their own distinct real copy (different heading/paragraph lengths,
       kept per explicit request), so a content-driven min-height made this
       whole panel a different size on each page, with the back-link
       landing at a different Y position and a different-looking gap
       before the form card below. A fixed height (tall enough for
       register's own longer 3-line heading, the taller of the two) keeps
       the photo and every page's own back-link at one consistent size/
       position regardless of which page's copy is showing; .auth-visual-
       copy's margin-top/bottom:auto (set globally, not mobile-specific)
       centers each page's own (shorter or taller) copy within it. */
    height: 430px;
    padding: 32px 24px;
    gap: 20px;
  }
  .auth-visual h1 {
    font-size: 36px;
  }
  .auth-chips {
    display: none;
  }
  .auth-form-side {
    padding: 32px 20px 60px;
  }
  .auth-card {
    padding: 30px 24px;
  }
  .auth-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  /* Real logo is a wide wordmark (naturalWidth 800x158, not the prototype's
     compact square-ish SVG mark) - at the prototype's fixed height:22px it
     renders ~330px wide, wide enough to collide with .auth-close at narrow
     widths (caught live at 375px). Capped by width instead, height auto. */
  .auth-logo img {
    height: auto;
    max-width: 130px;
  }
}

/* Account area (src/pages/account.html, account.css) - the prototype
   toggles 8 panes via JS on one page; real PrestaShop spreads these across
   separate controllers that already share customer/page.tpl, so the
   persistent .account-head/.account-layout/.account-nav shell lives there
   once and every page below (my-account/history/order-follow/discount/
   addresses/identity) picks it up. This block covers the whole area's CSS
   (including pieces not wired into a template yet in this same pass) so
   later pages reuse it directly instead of re-deriving it. */
.account-head {
  /* Matches .cat-head's own real padding (Marki/category pages etc.) - the
   * prototype's account.css only ever sets margin-bottom (34px) since its
   * own .account-page{padding:40px 0 100px} already provides the top
   * breathing room; this theme's shared page.tpl has no such per-page
   * padding (removed sitewide for the breadcrumb-position fix earlier this
   * project), so .account-head needs its own top padding to match every
   * other page's header position, same as .cat-head. */
  padding: 36px 0 0;
  margin-bottom: 34px;
}
.account-head h1 {
  font-size: 56px;
  margin: 8px 0 0;
}
.account-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-bottom: 90px;
}
.account-nav {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--scootive-line);
  background: #fff;
  position: sticky;
  top: 98px;
}
.account-nav-item {
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--scootive-line);
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--scootive-gray-700);
  cursor: pointer;
}
.account-nav-item:last-child {
  border-bottom: 0;
}
.account-nav-item:hover {
  background: var(--scootive-gray-100);
}
.account-nav-item.active {
  background: var(--scootive-ink);
  color: #fff;
}
.account-nav-logout {
  color: var(--scootive-state-danger);
}
.account-nav-logout:hover {
  background: var(--scootive-state-danger-bg);
}
.account-content {
  min-width: 0;
}
.account-pane-head {
  margin-bottom: 22px;
}
.account-pane-head h2 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--scootive-gray-700);
  text-transform: uppercase;
}
.orders-list {
  border-top: 1px solid var(--scootive-line);
  list-style: none;
  margin: 0;
  padding: 0;
}
.order-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--scootive-line);
  font-size: 12px;
}
.order-row .num {
  font-weight: 900;
}
.order-row .date {
  color: var(--scootive-gray-700);
}
.order-status {
  display: inline-block;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.order-status-warning {
  background: var(--scootive-state-warning-bg);
  color: var(--scootive-state-warning);
}
.order-status-info {
  background: var(--scootive-state-info-bg);
  color: var(--scootive-gray-800);
}
.order-status-success {
  background: var(--scootive-state-success-bg);
  color: var(--scootive-state-success);
}
.order-status-danger {
  background: var(--scootive-state-danger-bg);
  color: var(--scootive-state-danger);
}
.order-row .total {
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}
.order-row a {
  font-size: 10px;
  font-weight: 900;
  text-decoration: underline;
  white-space: nowrap;
}
.account-divider {
  margin: 34px 0 22px;
  padding-top: 22px;
  border-top: 1px solid var(--scootive-line);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--scootive-gray-700);
  text-transform: uppercase;
}
.account-hint {
  font-size: 12px;
  color: var(--scootive-gray-700);
  margin: 0 0 16px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--scootive-gray-700);
  padding: 9px 0;
  border-bottom: 1px solid var(--scootive-line);
}
.account-welcome {
  font-size: 13px;
  color: var(--scootive-gray-700);
  margin: 0 0 26px;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.summary-card {
  display: block;
  text-align: left;
  border: 1px solid var(--scootive-line);
  background: #fff;
  padding: 20px;
  cursor: pointer;
}
.summary-card:hover {
  border-color: var(--scootive-ink);
}
.summary-card-label {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--scootive-gray-700);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.summary-card p {
  font-size: 12px;
  color: var(--scootive-gray-700);
  line-height: 1.5;
  margin: 0 0 12px;
}
.summary-card-link {
  font-size: 10px;
  font-weight: 900;
  text-decoration: underline;
}
.coupon-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.coupon-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--scootive-line);
  background: #fff;
  padding: 18px 22px;
}
.coupon-code {
  display: inline-block;
  background: var(--scootive-ink);
  color: var(--scootive-green);
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 13px;
  padding: 6px 10px;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.coupon-card span {
  display: block;
  font-size: 11px;
  color: var(--scootive-gray-600);
}
.coupon-expiry {
  font-size: 10px;
  color: var(--scootive-gray-700);
  white-space: nowrap;
}
.address-list {
  display: grid;
  gap: 14px;
}
.address-card {
  position: relative;
  border: 1px solid var(--scootive-line);
  background: #fff;
  padding: 22px;
  font-size: 12px;
  line-height: 1.6;
}
.address-card b {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
}
.address-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  background: var(--scootive-green);
  color: var(--scootive-ink);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 5px 8px;
}
.address-actions {
  display: flex;
  gap: 16px;
  margin-top: 14px;
}
.address-actions a {
  font-size: 10px;
  font-weight: 900;
  text-decoration: underline;
}
.address-add {
  width: 100%;
  text-align: center;
  border: 1px dashed var(--scootive-gray-400);
  background: transparent;
  color: var(--scootive-gray-700);
  font-size: 11px;
  font-weight: 900;
  padding: 22px;
  cursor: pointer;
}
.address-add:hover {
  border-color: var(--scootive-ink);
  color: var(--scootive-ink);
}
@media (max-width: 1100px) {
  .account-head h1 {
    font-size: 38px;
  }
  .account-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 60px;
  }
  .account-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }
  .account-nav-item {
    white-space: nowrap;
    border-bottom: 0;
    border-right: 1px solid var(--scootive-line);
  }
  .account-nav-item:last-child {
    border-right: 0;
  }
  .order-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'num status' 'date total' 'action action';
  }
  .order-row .num {
    grid-area: num;
  }
  .order-row .order-status {
    grid-area: status;
    justify-self: end;
  }
  .order-row .date {
    grid-area: date;
  }
  .order-row .total {
    grid-area: total;
  }
  .order-row a {
    grid-area: action;
  }
  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }
  .coupon-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Header account dropdown (ps_customersignin.tpl, logged-in state) -
   restyled to the site's real flat design language (solid ink border, no
   shadow/rounding - same convention as the category page's own
   .quick-filter-dropdown) instead of the old rounded/shadowed Tailwind
   card. Pure CSS hover/focus-within, same as the original (no JS).
   Real bug caught live: "disappears 95% of the time" trying to hover down
   into it - the exact same dead-zone bug the mega-menu hit earlier this
   project. .account-menu has no explicit height of its own (only the
   40px icon-btn contributes to it, since the dropdown is
   position:absolute and doesn't), so the visual gap between the button
   and the panel (top:calc(100% + 8px)) was OUTSIDE .account-menu's own
   hoverable box - moving the mouse straight down through it lost :hover
   before ever reaching the panel. Fixed with the standard invisible-
   bridge technique: .account-dropdown itself now starts flush (top:100%,
   no gap) and stays a plain hover target with NO visual styling of its
   own; the real visible card is a nested .account-dropdown-panel offset
   by padding-top instead of a parent gap, so the "gap" is now padding
   INSIDE the hoverable element, not empty space outside it. */
.account-menu {
  position: relative;
}
.account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  width: 300px;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}
.account-menu:hover .account-dropdown,
.account-menu:focus-within .account-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.account-dropdown-panel {
  background: #fff;
  border: 1px solid var(--scootive-ink);
  padding: 18px;
}
.account-dropdown-user {
  padding-bottom: 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--scootive-line);
}
.account-dropdown-user .eyebrow {
  color: var(--scootive-gray-700);
  margin-bottom: 6px;
}
.account-dropdown-user b {
  display: block;
  font-size: 14px;
}
.account-dropdown-link {
  display: block;
  margin: 0 -10px;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--scootive-ink);
}
.account-dropdown-link:hover {
  background: var(--scootive-gray-100);
}
.account-dropdown-logout {
  /* NOT padding-top:18px (was mismatched against the base link's own 10px
     bottom padding) - a real bug caught live: the extra top padding made
     the hover highlight box taller above the text than below it, so
     "Logout" sat visibly off-center within its own hover state and read
     as crowding the divider. The divider now gets its breathing room from
     margin-top (transparent, outside the hover box) instead of asymmetric
     padding inside it - padding stays the same symmetric 10px as every
     other link. */
  margin-top: 8px;
  border-top: 1px solid var(--scootive-line);
  color: var(--scootive-state-danger);
}
.account-dropdown-logout:hover {
  background: var(--scootive-state-danger-bg);
}