/* ==========================================================================
   Customer order page styles. Consumes tokens from design-system.css.
   Markup/classes consumed here are produced by public/js/order.js and
   public/order.html; do not rename without coordinating the JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0 0;
}

.navbar > .container-fluid,
.main-content > .container-fluid {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.main-content > .container-fluid {
  flex: 1 0 auto;
}

/* --------------------------------------------------------------------------
   2. Navbar
   -------------------------------------------------------------------------- */
.navbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-2) 0;
  box-shadow: none;
}

.navbar-brand {
  font-weight: 700;
  font-size: var(--font-size-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
}

.navbar-brand img {
  margin-right: var(--space-3);
}

.user-info-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  /* One height for every control in the toolbar (search, filters, sort, Tilaus,
     help, this pill): they used to be 32-40px, so their edges did not line up. */
  min-height: var(--control-height-touch);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.user-info-pill:hover,
.user-info-pill:focus {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.user-info-pill .icon {
  font-size: 1.05rem;
  color: var(--brand-primary);
}

.user-name-label {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-weight: 600;
  border: 1px solid var(--brand-primary);
}

/* --------------------------------------------------------------------------
   3. Toolbar (sticky filter row)
   -------------------------------------------------------------------------- */
.toolbar {
  position: sticky;
  top: 0;
  background: var(--bg-page);
  z-index: 100;
  padding: var(--space-3) 0 var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}

.toolbar-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
}

/* The logo copy that sits in the toolbar. Hidden here (the partner themes keep
   the white .navbar strip); section 17 shows it on the default storefront. */
.toolbar-brand {
  display: none;
}

.toolbar-filters {
  flex: 0 0 auto;
}

.toolbar-filters .btn-outline-secondary {
  padding: 8px 14px;
  min-height: var(--control-height-touch);
}

/* Utility cluster (item count, cart, help, profile): one axis, never shrinks. */
.toolbar-utils {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.toolbar-sort {
  flex: 0 0 auto;
}

/* The category landing renders tiles, not products, so the sort control has
   nothing to act on. Hidden rather than disabled: an inert control that offers
   "Hinta: halvin ensin" over a category grid is a promise the view cannot keep. */
body.is-category-landing .toolbar-sort {
  display: none;
}

/* Search is the shrink sink: absorbs the squeeze so siblings stay on one line
   (min-width:0 lets it shrink below content width before the ≤767.98px stack). */
.toolbar-search {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 420px;
}

.toolbar-search input.form-control {
  min-height: var(--control-height-touch);
  border-radius: var(--radius-pill);
  padding: 8px 40px 8px 16px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  font-size: var(--font-size-sm);
}

.toolbar-search input.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.toolbar-count #productCount {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Cart button in toolbar */
.toolbar-cart-btn {
  position: relative;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-touch);
}

.toolbar-cart-badge {
  font-size: var(--font-size-xs);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--status-warning) !important;
  color: var(--text-primary) !important;
  animation: badgePulse 0.3s ease;
}

@keyframes badgePulse {
  0%   { transform: scale(0.8) translate(-50%, -50%); opacity: 0.8; }
  50%  { transform: scale(1.1) translate(-50%, -50%); opacity: 1; }
  100% { transform: scale(1) translate(-50%, -50%); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes cartBump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    70%  { transform: scale(0.96); }
    100% { transform: scale(1); }
  }
  .toolbar-cart-btn.bump {
    animation: cartBump 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* --------------------------------------------------------------------------
   3b. Toolbar sort control (dropdown button, not a form field)
   -------------------------------------------------------------------------- */
.toolbar-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-touch);
  padding: 8px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.toolbar-sort-menu .dropdown-item.active {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-weight: 600;
}

.toolbar-sidebar-toggle {
  display: none;
}

/* Empty catalogue: no products means nothing to search, sort or filter. */
body.is-catalog-empty .toolbar-search,
body.is-catalog-empty .toolbar-sort,
body.is-catalog-empty .toolbar-count,
body.is-catalog-empty .toolbar-filters,
body.is-catalog-empty .toolbar-sidebar-toggle,
body.is-catalog-empty .filter-sidebar {
  display: none !important;
}

.catalog-empty-state {
  padding: var(--space-8) var(--space-4);
}

/* Counts beside filter rows and colour chips are a default-storefront feature
   (section 17); the partner themes' rails stay as they were. */
.filter-option__count,
.filter-chip__count {
  display: none;
}

/* "Tyhjennä kaikki" as words (default storefront) or as the round "x" (partner themes). */
.active-chip__clear-text {
  display: none;
}

.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  margin-left: 4px;
}

/* --------------------------------------------------------------------------
   4. Dual-axis filter system (sidebar + sheet + chips)
   -------------------------------------------------------------------------- */
.catalog-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  /* Mirror the top-of-grid breathing room (the toolbar's bottom gap) so the last
     product row isn't flush against the footer when scrolled to the bottom. */
  padding-bottom: var(--space-3);
}

.catalog-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Persistent sidebar is desktop-only; tablet/phone use the full-screen sheet. */
.filter-sidebar {
  display: none;
}

.filter-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

.filter-sidebar__inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Scroll lives on the panel, not the full sidebar — keeps header actions clear of the track. */
.filter-panel {
  scrollbar-gutter: stable;
}

.filter-panel::-webkit-scrollbar {
  width: 6px;
}

.filter-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-strong) 65%, transparent);
  border-radius: var(--radius-pill);
}

.filter-panel::-webkit-scrollbar-track {
  background: transparent;
}

.filter-sidebar__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  margin: 0;
}

.filter-sidebar__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.filter-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.filter-icon-btn:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

.filter-icon-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Clear-filters buttons hide while at the default (nothing-to-clear) state. */
.filter-icon-btn.is-hidden,
.filter-sheet-clear-btn.is-hidden {
  display: none;
}

/* Collapsible facet groups (native <details>) */
.filter-group {
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-3) 0;
}

.filter-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.filter-group__summary::-webkit-details-marker {
  display: none;
}

.filter-group__chevron {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.filter-group[open] .filter-group__chevron {
  transform: rotate(180deg);
}

.filter-group__body {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-group__body--list {
  display: block;
  flex-wrap: unset;
}

.filter-category-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.filter-option--category,
.filter-option--subcategory {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--border-default);
  /* Pill, like every other selectable chip (design-system .chip, sales tabs). */
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.filter-option__icon {
  /* Sizing/fill come from the .icon base; font-size scales the 1em SVG. A
     larger glyph here keeps the category icons crisp and legible in-button. */
  font-size: 1.4rem;
  color: var(--text-secondary);
}

.filter-option--category:hover,
.filter-option--subcategory:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-surface-muted);
}

.filter-option--category.is-active,
.filter-option--subcategory.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
  font-weight: 600;
}

.filter-option--category.is-active .filter-option__icon {
  color: inherit;
}

.filter-option--category:focus-visible,
.filter-option--subcategory:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Second level (subcategories, e.g. Matkamuistot -> Avaimenperät), nested
   under the selected category's own option in the Kategoria list — the same
   shape as the sales sidebar (.sales-category-subtabs). The indent + vertical
   guide line say "these live inside the category above" at a glance. There is
   deliberately no Kaikki row: the parent option is this category's
   show-everything control (clicking it clears the subcategory selection), so
   a Kaikki row beneath it would be a second control for the same thing. */
.filter-subcategory-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-left: var(--space-4);
  padding-left: var(--space-3);
}

.filter-subcategory-list::before {
  content: '';
  position: absolute;
  top: var(--space-1);
  bottom: var(--space-1);
  left: 0;
  width: 2px;
  border-radius: var(--radius-pill);
  background: var(--border-default);
}

/* Children sit slightly tighter than the 44px parents — the size step is part
   of the parent/child read, same as the sales sidebar's subtabs. */
.filter-subcategory-list .filter-option--subcategory {
  min-height: var(--space-10);
}

/* One colour per row. Two columns left ~80px for the name, and Finnish colour
   names are long single words (grafiittimeleerattu, vaaleansininen) that
   either spilled past the tile or broke mid-word. */
.filter-group__body--color-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  width: 100%;
}

.filter-group__body--color-grid .filter-chip {
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--radius-md);
  min-height: 44px;
  padding: 8px 10px;
  /* Buttons centre text by default; a wrapped name must read left like the
     one-line names beside it. */
  text-align: left;
  line-height: 1.25;
}

/* Last resort for a name longer than the whole row: wrap, never spill. */
.filter-group__body--color-grid .filter-chip__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Colour names are stored lower-case; capitalise them to match the
   Kategoria list above. */
.filter-group__body--color-grid .filter-chip__label::first-letter {
  text-transform: uppercase;
}

/* Facet chips / pills (colour, toggles) */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  min-height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.filter-chip.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.filter-chip__swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  flex: 0 0 auto;
}

.filter-chip.is-active .filter-chip__swatch {
  border-color: var(--text-on-brand);
}

/* Price range */
.filter-price {
  width: 100%;
}

.filter-price__values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.filter-price__sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-price__range {
  width: 100%;
  accent-color: var(--brand-primary);
  min-height: 24px;
}

/* Active-filter chip row above the grid */
.active-filter-chips {
  display: none;
}

.active-filter-chips.has-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  /* "Selected" is brand fill + white text everywhere (design-system .chip.is-active). */
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
}

.active-chip:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.active-chip i {
  font-size: 1rem;
}

.active-chip__remove {
  color: inherit;
  margin-left: 2px;
}

.active-chip--clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--bg-surface-muted);
  border-color: var(--border-default);
  color: var(--text-muted);
}

.active-chip--clear:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-surface-hover);
}

.filter-sheet-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding-inline: var(--space-3);
}

/* Full-screen filter sheet (tablet / phone) */
.filter-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  /* Kept mounted so the panel can slide; hidden + inert when closed.
     visibility is delayed on close so the exit animation can play out. */
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--motion-base);
}

.filter-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

.filter-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-standard);
}

.filter-sheet.is-open .filter-sheet__backdrop {
  opacity: 1;
}

.filter-sheet__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  /* Closed = off to the right; exit is faster than entrance (tablet feel). */
  transform: translateX(100%);
  transition: transform var(--motion-base) var(--ease-standard);
  will-change: transform;
}

.filter-sheet.is-open .filter-sheet__panel {
  transform: translateX(0);
  transition: transform var(--motion-structural) var(--ease-out-premium);
}

.filter-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.filter-sheet__title {
  display: flex;
  align-items: center;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.filter-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 var(--space-4);
}

.filter-sheet__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.filter-sheet__footer .btn {
  min-height: 48px;
  font-weight: 600;
}

body.filter-sheet-open {
  overflow: hidden;
}

@media (min-width: 576px) {
  .filter-sheet__panel {
    inset: 0 0 0 auto;
    width: min(420px, 100%);
    box-shadow: var(--shadow-lg);
  }
}

/* Desktop: show the persistent sidebar, hide the toolbar "Suodata" sheet button. */
@media (min-width: 992px) {
  /* Force the mobile/tablet sheet hidden here even if it was left open before a
     resize — otherwise the sidebar and the sheet show at the same time. The JS
     resize handler also clears the body scroll-lock + aria state. */
  .filter-sheet.is-open {
    display: none;
  }

  .filter-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 264px;
    width: 264px;
    position: sticky;
    top: 5rem;
    align-self: flex-start;
    max-height: calc(100svh - 6rem);
    overflow: hidden;
  }

  .filter-sidebar .filter-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: var(--space-2);
  }

  .catalog-layout.filter-sidebar-collapsed .filter-sidebar {
    display: none;
  }

  .toolbar-filters {
    display: none;
  }

  .toolbar-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .toolbar-sidebar-toggle #filterSidebarShowBtn[hidden] {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   5. Category title + section
   -------------------------------------------------------------------------- */
.category-section {
  margin-bottom: var(--space-8);
}

.category-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
}

/* --------------------------------------------------------------------------
   6. Product grid / card
   -------------------------------------------------------------------------- */
#productsContainer {
  max-height: none;
  overflow: visible;
  scroll-behavior: smooth;
  padding-right: 0;
}

/* Equal-width columns per breakpoint; fixed gap keeps card spacing stable on wide screens. */
#productsContainer .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-inline: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

#productsContainer .product-col {
  flex: none;
  width: 100%;
  min-width: 0;
  padding: 0;
}

.product-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 14px 14px 16px;
  margin-bottom: 0;
  width: 100%;
  height: 100%;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-base),
              transform var(--transition-base);
  overflow: hidden;
  cursor: pointer;
}

.product-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
}

/* Touch press feedback (tablet-first). */
.product-card:active {
  transform: scale(0.98);
  transition-duration: var(--motion-instant);
}

.product-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--status-warning);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}

.childrens-tag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--accent-kids);
  color: var(--text-on-brand);
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  z-index: 5;
  box-shadow: var(--shadow-sm);
}

/* "Myydyin" — one of the channel's top sellers over the trailing year, computed
   from real order history (services/bestSellerService.js). Shares the top-left
   corner with the Lasten / Ei saatavilla tags; --stacked drops it one row so the
   two never overlap. Deliberately the brand colour rather than a third accent:
   it is a recommendation, not a category or a warning. */
.bestseller-tag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  z-index: 5;
  box-shadow: var(--shadow-sm);
}

.bestseller-tag--stacked {
  top: calc(var(--space-2) + 26px);
}

/* Shown in place of the "Lasten" tag (same corner) when nothing on the product can
   actually be ordered — no in-stock variant with an EAN. Deliberately muted rather
   than a warning colour: it is a state, not an error the customer caused. The card
   stays clickable so the detail page is still reachable. */
.product-card__unavailable-tag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--bg-surface-muted);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  z-index: 5;
  box-shadow: var(--shadow-sm);
}

.product-card--unavailable .product-card__img {
  opacity: 0.55;
}

.product-card__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.product-card__media--navigable {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.product-card--rich .product-card__media--navigable:hover .product-card__img {
  transform: scale(1.02);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.product-card__title {
  font-size: var(--font-size-md);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--font-size-md) * var(--leading-tight) * 2);
}

.product-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.product-card__meta-item {
  font-weight: 400;
}

.product-card__price {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text-primary);
}

/* B2B buyers order by product code, so it is a primary identifier on the card,
   not a footnote: it sits on the sm step in --text-secondary rather than the
   smallest step in the muted tone. */
.product-card__sku {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
}

.product-card__color {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.color-label-with-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Ring is an inset shadow, not a border — a border would give the element two
   concentric circles that antialias separately. See the note on the matching
   rule in admin.css. */
.color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border-default);
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* The whole card is the click target (the per-card "Valitse" button was removed),
   so it carries the pointer affordance and a keyboard focus ring. */
.product-card:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Tablet: three equal columns, cards stretch to fill (primary B2B viewport). */
@media (min-width: 576px) and (max-width: 991.98px) {
  #productsContainer .row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* Desktop: fixed column counts; cards stretch to fill grid cells (gap stays constant). */
@media (min-width: 992px) {
  #productsContainer .row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .catalog-layout.filter-sidebar-collapsed #productsContainer .row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  #productsContainer .row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .catalog-layout.filter-sidebar-collapsed #productsContainer .row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   7. Age badges (brand-aligned)
   -------------------------------------------------------------------------- */
.age-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.age-badge.age-adult {
  background-color: var(--brand-primary);
  color: var(--text-on-brand);
}

.age-badge.age-children {
  background-color: var(--accent-kids);
  color: var(--text-on-brand);
}

/* --------------------------------------------------------------------------
   8. Order basket (centered modal)
   -------------------------------------------------------------------------- */
.basket-order-dialog {
  max-width: min(var(--basket-modal-max-width), calc(100vw - var(--space-8)));
  margin: var(--space-4) auto;
}

.basket-order-modal .modal-content {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.basket-order-modal .modal-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.basket-modal-body {
  overflow: hidden;
}

.basket-layout {
  display: grid;
  grid-template-columns: 1fr;
}

.basket-products-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-default);
}

.basket-products-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(50vh, 28rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--space-4) 0;
}

.basket-products-scroll::after {
  content: '';
  position: sticky;
  display: block;
  bottom: 0;
  height: 2.5rem;
  margin-top: -2.5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-surface));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.basket-products-scroll.is-scrollable:not(.is-scrolled-end)::after {
  opacity: 1;
}

.basket-products-summary {
  flex-shrink: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}

.basket-products-summary:empty {
  display: none;
  padding: 0;
  border-top: none;
}

.basket-layout--empty {
  grid-template-columns: 1fr;
}

.basket-layout--empty .basket-checkout-panel {
  display: none !important;
}

.basket-layout--empty .basket-products-panel {
  border-bottom: none;
  min-height: 10rem;
}

.basket-layout--empty .basket-products-scroll {
  max-height: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  min-height: 10rem;
}

.basket-layout--empty .basket-products-scroll::after {
  display: none;
}

.basket-layout--empty .basket-empty-state {
  width: 100%;
  text-align: center;
}

.basket-section-heading {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* The checkout panel has its own padding, so its heading sits flush. */
.basket-checkout-panel .basket-section-heading {
  padding-inline: 0;
  padding-top: 0;
}

/* "Tuotteet" makes no sense above the empty state. */
.basket-layout--empty .basket-products-heading {
  display: none;
}

.basket-checkout-panel {
  padding: var(--space-4);
}

.basket-checkout-panel .basket-checkout-fields {
  margin-top: 0;
}

.basket-order-modal .modal-footer {
  justify-content: space-between;
  align-items: center;
}

.basket-order-modal .modal-footer .btn {
  flex: 0 1 auto;
  min-width: auto;
}

#submitOrderBtn {
  margin-left: auto;
}

#clearBasketBtn {
  color: var(--status-danger);
  min-height: var(--control-height-touch);
}

/* "Tyhjennä" sits under the product list, away from the send button, so one
   slip of the thumb cannot empty the order. */
.basket-clear-row {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-1) var(--space-4);
}

/* "Rivi poistettu - Kumoa" after removing a line. */
.basket-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface-muted);
  font-size: var(--font-size-sm);
}

.basket-undo[hidden] {
  display: none;
}

.basket-undo .btn {
  flex-shrink: 0;
  min-height: var(--control-height-touch);
}

/* Order confirmation: the number to quote when phoning, then what was ordered. */
.product-card__history {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.order-summary-number {
  margin: 0 0 var(--space-3);
  text-align: center;
}

.order-history-items-list.order-summary-items {
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  list-style: none;
}

#clearBasketBtn:hover,
#clearBasketBtn:focus-visible {
  color: var(--status-danger);
  background: var(--status-danger-soft);
}

/* Armed state of the Clear button after the first tap (awaiting confirm). */
#clearBasketBtn.basket-clear-armed {
  background: var(--status-danger);
  border-color: var(--status-danger);
  color: var(--text-on-brand);
}

#clearBasketBtn.basket-clear-armed:hover,
#clearBasketBtn.basket-clear-armed:focus {
  background: color-mix(in srgb, var(--status-danger) 88%, var(--text-primary));
  border-color: color-mix(in srgb, var(--status-danger) 88%, var(--text-primary));
  color: var(--text-on-brand);
}

.basket-item-row {
  display: flex;
  align-items: center;
  padding-block: var(--space-4);
  padding-inline: 0;
}

#basketItemsList > .basket-item-row:not(:last-child) {
  border-bottom: 1px solid var(--border-default);
}

/* Quantity validation. The offending row is tinted and rule-marked so it is
   findable at a glance in a long basket, and carries its own message; the
   footer only reports how many rows need attention. */
.basket-item-row--invalid {
  background: var(--status-danger-soft);
  box-shadow: inset 3px 0 0 var(--status-danger);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-3);
}

.basket-item-error {
  margin-top: var(--space-2);
  color: var(--status-danger);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.basket-submit-error {
  flex: 1 1 100%;
  margin: 0;
  color: var(--status-danger);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-align: left;
}

/* Quantity "tick": brief pop when +/- changes this line's amount. */
.basket-item-quantity--tick {
  animation: qtyTick var(--motion-base) var(--ease-out-premium);
}

@keyframes qtyTick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.basket-item-media {
  flex-shrink: 0;
}

/* Cart line whose product/variant no longer resolves in the catalog. */
.basket-item-row--unavailable {
  background: var(--status-danger-soft);
}

.basket-item-unavailable-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--status-danger) 12%, transparent);
  color: var(--status-danger);
  font-size: 1.5rem;
}

.basket-item-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.basket-item-controls {
  flex-shrink: 0;
}

.basket-item-pricing {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.basket-line-total {
  color: var(--text-primary);
}

.basket-item-quantity {
  min-width: 20px;
  text-align: center;
}

.basket-item-meta {
  font-size: var(--font-size-sm);
}

.basket-order-modal .basket-item-meta {
  color: var(--text-secondary);
}

/* Logo decoration sub-row inside a basket line (Autoexperten add-on). Only
   present when a line carries a customer logo. */
.basket-item-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  margin-inline-start: 0;
  padding-inline-start: 0;
}

.basket-item-logo__thumb {
  width: var(--space-6);
  height: var(--space-6);
  object-fit: contain;
  background: var(--bg-surface-muted);
  border: calc(var(--space-1) / 4) solid var(--border-default);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}

.basket-item-logo__thumb--pending {
  display: inline-block;
}

.basket-item-logo__text {
  font-size: var(--font-size-xs);
  color: var(--brand-primary);
  font-weight: 600;
}

/* One-time logo setup fee line in the basket total block. */
/* "Logo uploaded but not on these lines" notice above the basket summary. */
.basket-logo-notice {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--status-warning-soft);
  color: var(--status-warning-text);
  font-size: var(--font-size-sm);
}

.basket-logo-notice__text {
  margin: 0 0 var(--space-2);
}

.basket-setup-fee,
.basket-shipping-fee {
  margin-top: calc(var(--space-1) / 2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.order-summary-copy {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Empty-cart state */
.basket-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.basket-empty-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.basket-empty-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.basket-empty-cta {
  margin-top: var(--space-2);
}

.order-summary-success {
  color: var(--status-success);
}

.order-summary-notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--status-info);
  border-radius: var(--radius-md);
  background: var(--status-info-soft);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .basket-item-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .basket-item-row > .flex-grow-1 {
    flex: 1 1 calc(100% - (var(--space-10) + var(--space-6)));
    min-width: 0;
  }

  .basket-item-media {
    margin-right: 0 !important;
  }

  .basket-item-controls {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-left: calc(var(--space-10) + var(--space-4));
  }

  .basket-item-controls .btn {
    min-width: calc(var(--space-10) + var(--space-1));
    min-height: calc(var(--space-10) + var(--space-1));
  }

  .basket-item-quantity {
    min-width: calc(var(--space-8) + var(--space-2));
    align-self: center;
  }
}

@media (max-width: 500px) {
  .basket-item-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding-left: 0;
  }

  .basket-item-controls .basket-remove-btn {
    grid-column: 1 / -1;
  }
}

.basket-summary {
  color: var(--text-primary);
}

.basket-summary__count {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.basket-grand-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.basket-grand-total__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.basket-grand-total__amount {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.basket-grand-total__tax {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-muted);
}

/* Animated order-success checkmark. Resting state is fully drawn, so when
   motion is reduced (animations stripped) it simply appears complete. */
.order-summary-success-badge {
  display: inline-flex;
  animation: successPop 420ms var(--ease-out-premium);
}

.order-summary-check {
  width: 4.5rem;
  height: 4.5rem;
}

.order-summary-check__circle {
  stroke: var(--status-success);
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 0;
  /* Delay lets the modal fade settle first, so the draw is actually seen. */
  animation: successCircleDraw 620ms var(--ease-out-premium) 160ms backwards;
}

.order-summary-check__mark {
  stroke: var(--status-success);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 0;
  animation: successMarkDraw 420ms var(--ease-out-premium) 620ms backwards;
}

@keyframes successPop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes successCircleDraw {
  from { stroke-dashoffset: 151; }
  to   { stroke-dashoffset: 0; }
}

@keyframes successMarkDraw {
  from { stroke-dashoffset: 36; }
  to   { stroke-dashoffset: 0; }
}

@media (min-width: 768px) {
  .basket-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-5);
  }

  .basket-products-panel {
    border-bottom: none;
  }

  .basket-products-scroll {
    max-height: min(55vh, 32rem);
  }

  /* On the two-column layout the visual split + field labels already make the
     two regions clear, so the section headings only add value when stacked. */
  .basket-section-heading {
    display: none;
  }

  /* An empty cart has no checkout column — collapse to a single column and drop
     the divider so it doesn't read as a half-empty two-pane layout. */
  .basket-layout--empty {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (min-width: 576px) {
  .basket-order-modal .modal-footer {
    flex-wrap: nowrap;
  }
}

/* --------------------------------------------------------------------------
   8b. Order basket as a side panel (order.html + product.html; the open-shop
   cart in shop.html keeps the centered window above).
   Right-hand panel with a scrim on desktop, full screen on a phone. Same
   Bootstrap modal underneath (same ids, focus trap, Escape); only the
   dialog is pinned right and slid in. Header and footer stay put, the body
   (lines + order details) is the one scroll region, and the running total
   sits in the footer next to the send button.
   -------------------------------------------------------------------------- */
.modal.basket-order-modal--panel.fade {
  transition: opacity var(--transition-base);
}

.basket-order-modal--panel .modal-dialog.basket-order-dialog {
  width: min(var(--basket-panel-width), 100vw);
  max-width: none;
  height: 100svh;
  min-height: 0;
  margin: 0 0 0 auto;
}

.modal.basket-order-modal--panel.fade .modal-dialog {
  transform: translateX(100%);
  transition: transform var(--transition-base);
}

.modal.basket-order-modal--panel.show .modal-dialog {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .modal.basket-order-modal--panel.fade,
  .modal.basket-order-modal--panel.fade .modal-dialog {
    transition: none;
  }
}

.basket-order-modal--panel .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-width: 0 0 0 1px;
  border-radius: 0;
}

.basket-order-modal--panel .modal-header {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
}

.basket-order-modal--panel .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* One column at every width; the section headings come back because the
   side-by-side layout that made them redundant is gone. */
.basket-order-modal--panel .basket-layout {
  grid-template-columns: 1fr;
  gap: 0;
}

.basket-order-modal--panel .basket-products-panel {
  border-bottom: 1px solid var(--border-default);
}

.basket-order-modal--panel .basket-layout:not(.basket-layout--empty) .basket-section-heading {
  display: block;
}

.basket-order-modal--panel .basket-layout--empty .basket-products-panel {
  border-bottom: none;
}

/* The body owns the scroll, so the lines flow inline with no scroll box of
   their own (and no fade cue for one). */
.basket-order-modal--panel .basket-products-scroll {
  max-height: none;
  overflow: visible;
}

.basket-order-modal--panel .basket-products-scroll::after {
  display: none;
}

.basket-order-modal--panel .basket-layout--empty .basket-products-scroll {
  min-height: 50svh;
}

.basket-logo-notice-slot {
  padding: var(--space-3) var(--space-4) 0;
}

.basket-logo-notice-slot:empty {
  display: none;
}

.basket-logo-notice-slot .basket-logo-notice {
  margin-bottom: 0;
}

/* Sticky footer: total on top, then the send button full width. */
.basket-order-modal--panel .modal-footer {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
}

/* Bootstrap gives every footer child a 4px margin; the gap does that job here. */
.basket-order-modal--panel .modal-footer > * {
  margin: 0;
}

#basketModal.basket-order-modal--panel .basket-actions .basket-products-summary {
  flex: 1 0 100%;
  padding: 0;
  border-top: none;
  background: none;
}

.basket-order-modal--panel .basket-actions .basket-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--space-3);
}

.basket-order-modal--panel .basket-actions .basket-setup-fee,
.basket-order-modal--panel .basket-actions .basket-shipping-fee {
  flex: 0 0 100%;
  margin-top: 0;
}

.basket-order-modal--panel .basket-actions .basket-grand-total {
  margin-top: 0;
  margin-left: auto;
}

.basket-order-modal--panel .basket-actions .basket-submit-error {
  flex: 1 0 100%;
}

.basket-order-modal--panel #submitOrderBtn,
.basket-order-modal--panel #checkoutNextBtn {
  flex: 1 1 auto;
  margin-left: 0;
}

/* Full screen on a phone: no edge line against the screen edge. */
@media (max-width: 575.98px) {
  .basket-order-modal--panel .modal-content {
    border-width: 0;
  }
}

/* --------------------------------------------------------------------------
   9b. Store.confirm: the order portal's confirmation window (replaces the
   browser's confirm box; public/js/order/confirmDialog.js). A small centered
   card above every other window, on a phone too.
   -------------------------------------------------------------------------- */
.store-confirm {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.store-confirm__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
}

.store-confirm__dialog {
  position: relative;
  width: min(26rem, 100%);
  max-height: 90svh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}

.store-confirm__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}

.store-confirm__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.store-confirm__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

.store-confirm__body p {
  margin: 0;
}

.store-confirm__record {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.store-confirm__record strong {
  font-weight: 600;
}

.store-confirm__text {
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.store-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
}

@media (max-width: 575.98px) {
  .store-confirm__actions .btn {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .store-confirm__dialog {
    animation: storeConfirmIn var(--transition-base) both;
  }

  @keyframes storeConfirmIn {
    from { opacity: 0; transform: translateY(var(--space-2)); }
    to { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   9. How-it-works modal: four numbered steps, no icons, no intro line
   -------------------------------------------------------------------------- */
.how-it-works-modal .modal-dialog {
  max-width: 30rem;
}

.how-it-works-modal .modal-title {
  font-size: var(--font-size-section);
  font-weight: 600;
  color: var(--text-primary);
}

.how-it-works-modal .modal-body {
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
}

.how-it-works-modal .how-it-works-steps {
  list-style: none;
  counter-reset: how-step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.how-it-works-step {
  display: grid;
  grid-template-columns: var(--space-5) minmax(0, 1fr);
  gap: var(--space-2);
  counter-increment: how-step;
}

.how-it-works-step::before {
  content: counter(how-step) ".";
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
}

.how-it-works-step__title {
  margin: 0 0 calc(var(--space-1) / 2);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.how-it-works-step__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.how-it-works-step__text strong {
  font-weight: 600;
  color: var(--text-primary);
}

.how-it-works-modal .how-it-works-contact {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.how-it-works-modal .how-it-works-contact strong {
  font-weight: 600;
  color: var(--text-primary);
}

/* Modal stacking */
.modal {
  z-index: 1055 !important;
}
.modal-backdrop {
  z-index: 1054 !important;
}

body.modal-open:has(#sizeSelectionModal.show) .modal-backdrop {
  transition: opacity 0.05s linear !important;
}

/* --------------------------------------------------------------------------
   10b. Dynamic customer UI states (moved from public/js/order.js)
   -------------------------------------------------------------------------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  z-index: 9999;
  backdrop-filter: blur(3px);
  opacity: 1;
  animation: loadingOverlayIn var(--motion-base) var(--ease-standard);
  transition: opacity var(--motion-base) var(--ease-standard);
}

/* Fade-out applied by hideLoading() before the node is removed. */
.loading-overlay.is-hiding {
  opacity: 0;
}

.loading-content {
  text-align: center;
  padding: var(--space-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: loadingCardIn var(--motion-structural) var(--ease-out-premium);
}

.loading-overlay.is-hiding .loading-content {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--motion-base) var(--ease-standard),
              transform var(--motion-base) var(--ease-standard);
}

.loading-message {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-weight: 500;
  margin-top: var(--space-4);
}

/* On-brand spinner: brand colour (themes per channel), transparent track. */
.loading-spinner {
  width: 2.75rem;
  height: 2.75rem;
  border-width: 0.28em;
  color: var(--brand-primary);
  border-right-color: var(--brand-primary-soft);
  border-bottom-color: var(--brand-primary-soft);
}

@keyframes loadingOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes loadingCardIn {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Unified modal entrance: subtle scale-in (premium ease) instead of Bootstrap's
   default upward translate. Storefront modals only (admin keeps its own). */
.modal.fade .modal-dialog {
  transition: transform var(--motion-structural) var(--ease-out-premium);
  transform: scale(0.96);
}

.modal.show .modal-dialog {
  transform: scale(1);
}

/* First-reveal entrance stagger (applied to a capped number of cards in JS). */
.product-col--enter {
  animation: productColEnter var(--motion-structural) var(--ease-out-premium) backwards;
}

@keyframes productColEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn.is-success {
  background-color: var(--status-success);
  border-color: var(--status-success);
  color: var(--text-on-brand);
}

.btn .btn-success-state {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.btn.has-success-state.is-success .btn-text,
.btn.has-success-state.is-success .btn-loading {
  display: none;
}

.btn.has-success-state.is-success .btn-success-state {
  display: inline-flex;
}

.toast-container {
  z-index: 10000 !important;
}

/* Phones: notices sit at the top, so they never cover the basket's bottom
   buttons ("Lähetä tilaus"). Bootstrap's bottom-0 utility is !important. */
@media (max-width: 767.98px) {
  .toast-container {
    top: 0 !important;
    bottom: auto !important;
  }
}

.toast {
  min-width: 300px;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
}

/* Size-modal product image: muted, rounded, padded panel so the image is
   contained and never touches the modal edges (matches .product-card__media). */
#modalProductImageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: var(--bg-surface-muted);
  border-radius: var(--radius-md);
}

.modal-product-img {
  width: 100%;
  max-height: 300px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  cursor: zoom-in;
}

/* The size rows themselves (.product-size-row, the 44px .stepper-btn stepper)
   are the same ones /product.html uses, from product.css. Only the unit price
   above them is the modal's own. */
.size-selection__price {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

/* Footer of the size window: the running total on the left, the buttons on the right. */
.size-selection__total {
  margin: 0 auto 0 0;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.zoomed-image {
  max-height: 70svh;
  width: auto;
}

/* Discourage casual saving/copying of imagery. The context menu is blocked in
   JS (images.js), but the iOS/iPadOS long-press "save image" callout can only be
   suppressed in CSS. order.css is loaded only by the customer-facing /order and
   /product pages, so applying to every <img> covers all images (incl. the
   product hero) without touching text selection. Mirrors the sales.css pattern. */
img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.size-selection input.size-input[type="number"],
.product-size-row__qty[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.size-selection input.size-input[type="number"]::-webkit-outer-spin-button,
.size-selection input.size-input[type="number"]::-webkit-inner-spin-button,
.product-size-row__qty[type="number"]::-webkit-outer-spin-button,
.product-size-row__qty[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.basket-remove-btn {
  color: var(--text-secondary);
  padding-inline: var(--space-2);
}

.basket-remove-btn:hover,
.basket-remove-btn:focus-visible {
  color: var(--status-danger);
  background: var(--status-danger-soft);
}

.form-control.is-valid {
  border-color: var(--status-success);
  padding-right: calc(1.5em + 0.75rem);
}

.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px var(--status-success-soft);
}

#emailHelp {
  color: var(--status-success);
}

.skeleton-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .skeleton-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .skeleton-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.skeleton-product-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-image,
.skeleton-text,
.skeleton-button {
  background: linear-gradient(
    90deg,
    var(--bg-surface-muted) 25%,
    color-mix(in srgb, var(--border-default) 55%, var(--bg-surface-muted)) 50%,
    var(--bg-surface-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.skeleton-text {
  height: 16px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-button {
  height: 40px;
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.order-category-choice-backdrop {
  min-height: 42svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  text-align: center;
}

.order-category-choice-backdrop__text {
  max-width: 22rem;
  line-height: var(--leading-body);
}

/* Pack-size notice (e.g. "Myydään 10 kpl erissä") shown above the size table. */
.size-selection__pack-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-3);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

#storeProfileModal.is-profile-loading .form-control {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--bg-surface-muted) 25%,
    color-mix(in srgb, var(--border-default) 55%, var(--bg-surface-muted)) 50%,
    var(--bg-surface-muted) 75%
  );
  background-size: 200% 100%;
  border-color: var(--border-default);
  animation: shimmer 1.5s infinite;
}

#storeProfileModal.is-profile-loading .form-control::placeholder {
  color: transparent;
}

#storeProfileModal.is-profile-loading .form-text {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-product-card,
  .skeleton-image,
  .skeleton-text,
  .skeleton-button,
  #storeProfileModal.is-profile-loading .form-control {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   11. Category landing cards (default storefront only: partner themes use the flat grid)
   -------------------------------------------------------------------------- */
.category-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}

.category-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* Touch press feedback (tablet-first). */
.category-card:active {
  transform: scale(0.98);
  transition-duration: var(--motion-instant);
}

.category-card:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* The picture runs to the card's edges; the card's own border is the only frame. */
.category-card-images {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-surface-muted);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-card-image-single {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.category-card-header {
  padding: var(--space-3) var(--space-3) var(--space-3);
}

.category-card-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

/* The count is reassurance, not the thing being chosen: quiet grey under the name. */
.category-card-count {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Title and the "show all" link share one row; the grid below starts at the same left edge. */
.category-landing {
  padding: 0 0 var(--space-8);
}

.category-landing__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}

.category-landing__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.category-landing__all {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-primary-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
}

.category-landing__all:hover {
  text-decoration: underline;
}

.category-landing__all:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* A real grid: a short last row starts at the left edge, like every row above it. */
.category-landing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 575.98px) {
  .category-landing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .category-card-title { font-size: var(--font-size-sm); }
  .category-card-header { padding: var(--space-2) var(--space-3) var(--space-3); }
}

/* "Back to all product groups" bar shown above the product grid */
.category-back-bar {
  margin: var(--space-2) 0 var(--space-3);
}

/* A text link back to the tiles, not a boxed button: it is navigation, not a filter. */
.category-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--brand-primary-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
}

.category-back-btn:hover {
  text-decoration: underline;
}

.category-back-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   12. Platform footer
   -------------------------------------------------------------------------- */
.platform-footer {
  flex: 0 0 auto;
  margin-top: auto;
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

.platform-footer__inner {
  max-width: calc(var(--space-10) * 24);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}

.platform-footer p,
.platform-footer nav {
  margin: 0;
}

.platform-footer__links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Standalone nav links, not links inside a sentence, so the WCAG 2.2 AA 24px
   minimum target size applies. They rendered 17px tall (text height alone). */
.platform-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-secondary);
  text-decoration: none;
}

.platform-footer a:hover,
.platform-footer a:focus {
  color: var(--text-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   12b. Static legal pages
   -------------------------------------------------------------------------- */
.legal-page {
  padding-top: var(--space-6);
}

.legal-document {
  max-width: calc(var(--space-10) * 20);
  margin: 0 auto var(--space-10);
  padding: var(--space-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  line-height: calc(var(--leading-body) + 0.15);
}

.legal-document__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.legal-document h1 {
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  letter-spacing: var(--tracking-tight);
}

.legal-document__intro {
  margin: 0 0 var(--space-6);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.legal-section + .legal-section {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
}

.legal-section h2 {
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.legal-section p {
  margin: 0;
}

.legal-document__note {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   13. Mobile responsiveness
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .main-content { padding: var(--space-2) 0 0; }

  .product-card {
    padding: var(--space-3);
    width: 100%;
    box-sizing: border-box;
  }

  #productsContainer .row {
    margin-inline: 0;
  }

  #productsContainer .product-col {
    padding: 0;
    margin-bottom: 0;
  }

  .category-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--space-3);
  }

  .search-container { margin-bottom: var(--space-3); }
  .search-container input { font-size: 16px; } /* iOS zoom guard */

  .platform-footer__inner {
    flex-direction: column;
    gap: var(--space-2);
  }

  .legal-page {
    padding-top: var(--space-4);
  }

  .legal-document {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
  }

  .basket-container { display: none; }

  .basket-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Full-height sheet on phones/tablets: sticky header + footer, a single
     scroll region (the whole body) so products and checkout fields read as one
     flow and the Lähetä button is always reachable. */
  .basket-order-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100svh;
  }

  /* Fixed height (not min-height) so a full cart constrains the body and the
     body scrolls internally — keeping the header and footer fixed in view. */
  .basket-order-modal .modal-content {
    height: 100svh;
    border-radius: 0;
  }

  #basketModal .modal-header {
    padding: var(--space-3) var(--space-4);
  }

  #basketModal .modal-body {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Let the body own the scroll; the products list flows inline (no nested
     scrollbar) on small screens. */
  #basketModal .basket-products-scroll {
    max-height: none;
    overflow: visible;
    padding: var(--space-3) var(--space-4) 0;
  }

  #basketModal .basket-products-scroll::after {
    display: none;
  }

  #basketModal .basket-checkout-panel {
    padding: var(--space-3) var(--space-4);
  }

  #basketModal .basket-products-summary {
    padding: var(--space-4) var(--space-4) var(--space-3);
  }

  #basketModal .modal-footer {
    padding: var(--space-3) var(--space-4);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  #basketModal .modal-footer .btn {
    width: auto;
    min-height: 44px;
    font-size: var(--font-size-base);
  }

  #basketModal #submitOrderBtn {
    flex: 1 1 auto;
    min-width: min(100%, 10rem);
  }

  .toolbar-cart-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
    min-width: calc(var(--space-10) + var(--space-1));
    min-height: calc(var(--space-10) + var(--space-1));
  }

  .toolbar-search .clearable-input__clear {
    width: calc(var(--space-10) + var(--space-1));
    height: calc(var(--space-10) + var(--space-1));
  }

  .toolbar-search input.form-control {
    min-height: calc(var(--space-10) + var(--space-1));
    padding-right: calc(var(--space-10) + var(--space-6));
    font-size: var(--font-size-md);
  }

  .toolbar-cart-badge {
    font-size: var(--font-size-xs);
    min-width: 16px;
    height: 16px;
  }

  .row.g-2,
  .row.g-md-3 { margin: 0 -4px; }
  .row.g-2 > [class*="col-"]:not(.product-col),
  .row.g-md-3 > [class*="col-"]:not(.product-col) {
    padding: 0 4px;
    margin-bottom: var(--space-2);
  }
}

/* Below desktop (<992px): deterministic two-row stack. The single-line toolbar
   only has room at >=992px, where the filter button is hidden and the sidebar
   takes over filtering. Below that the "Suodata" button is present, so cramming
   filter + search + sort + utils onto one line collapses the search input. We
   put the nav controls + utility cluster on row 1 and force search onto its own
   full-width row below. Uses 991.98 to hand off cleanly to the >=992px desktop
   layout (which hides .toolbar-filters and restores the single nowrap line). */
@media (max-width: 991.98px) {
  .toolbar {
    padding: var(--space-2) 0;
  }

  /* Re-enable wrap for the intentional two-row layout. */
  .toolbar-content {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  /* Row 2: search full-width on its own line (order:2 keeps it after the
     row-1 controls regardless of source order). */
  .toolbar-search {
    order: 2;
    flex: 1 0 100%;
    min-width: 0;
    max-width: none;
  }

  /* Keep the utility cluster a tight group pushed to the right (its ms-auto
     margin consumes the row-1 free space) so count + cart + help + profile
     read as one unit instead of stretching across the row.

     It stays `flex: 0 0 auto` on the desktop line, but at phone widths a long
     store name made the cluster wider than the viewport: measured 401px of
     layout at a 360px width, which scrolled the whole page sideways and — since
     a fixed element resolves against the widened layout viewport — dragged the
     back-to-top button 17px off the right edge with it. Let the cluster, the
     pill and the label all give way so the name ellipsises (it already has
     overflow:hidden + text-overflow) instead of the page growing. Shrinking
     rather than hiding keeps as much of the name as each width allows. */
  /* Shrinking alone cannot rescue this row: .dropdown is a block, so the pill
     inside it is not a flex item and ignores min-width:0 on its ancestors. The
     cluster's own content (count + cart + help + pill) simply exceeded the
     viewport. So cap the name — it already has overflow:hidden + ellipsis — and
     let the cluster wrap as a hard backstop, so no store name at any length can
     push the page sideways again. */
  .toolbar-utils {
    gap: var(--space-3);
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .user-name-label {
    max-width: 30vw;
  }
}

@media (max-width: 480px) {
  .product-card { padding: var(--space-2); }
  .category-title { font-size: var(--font-size-base); }
  .basket-container { max-height: 70svh; }

  /* Pinned bar down from four rows (205px, a quarter of the screen) to two.
     Row 1: Suodata, sort (icon), Tilaus, account (icon). Row 2: search + the
     product count. The utility cluster gives its children to the toolbar row so
     they can be ordered individually; the "?" help moves into the account menu
     (the "Ohjeet" entry lives there at every width). */
  .toolbar-utils {
    display: contents;
  }

  .toolbar-filters { order: 1; }
  .toolbar-sort { order: 2; }
  .toolbar-utils > .toolbar-cart-btn { order: 3; margin-left: auto; }
  .toolbar-content > .toolbar-utils > .dropdown { order: 4; }
  /* The basis is wider than the room left on row 1, which is what sends the
     search to row 2; it then grows to fill that row beside the count. */
  .toolbar-search { order: 5; flex: 1 1 calc(var(--space-10) * 5); }
  .toolbar-count { order: 6; flex: 0 0 auto; }

  /* Sort is an icon on a phone: label and caret would not leave room for the
     account icon on the same row once Suodata shows its active-filter badge. */
  .toolbar-sort-btn {
    justify-content: center;
    min-width: var(--control-height-touch);
    padding: 0;
  }

  .toolbar-sort-btn::after,
  .toolbar-sort-btn__label {
    display: none;
  }

  /* The store name is still the pill's accessible name, just not drawn: the
     pill becomes the account icon. */
  .user-info-pill {
    justify-content: center;
    width: var(--control-height-touch);
    padding: 0;
    gap: 0;
  }

  .user-info-pill .user-name-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .user-info-pill > .icon:last-child {
    display: none;
  }
}

/* Touch screens: menu rows of the account dropdown were 36px tall. */
@media (pointer: coarse) {
  .dropdown-item {
    display: flex;
    align-items: center;
    min-height: var(--control-height-touch);
  }
}

/* --------------------------------------------------------------------------
   13b. Tablet (approx. 11", 768–992px portrait/small landscape)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .toolbar {
    padding: var(--space-2) 0 var(--space-2);
  }

  .toolbar-content {
    row-gap: var(--space-2);
  }

  .toolbar-filters .btn-outline-secondary {
    min-height: 44px;
    padding: 8px 14px;
  }

  .toolbar-cart-btn {
    min-height: 44px;
  }

  .toolbar-search input.form-control {
    min-height: 44px;
    font-size: 16px;
  }
}

.search-highlight {
  background: var(--brand-primary-soft);
  color: var(--text-primary);
  padding: 0 2px;
  border-radius: var(--radius-sm);
}

.order-empty-state,
.order-load-error {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.products-load-sentinel {
  min-height: 1px;
}

/* --------------------------------------------------------------------------
   15. Order history modal
   -------------------------------------------------------------------------- */
#orderHistoryContainer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Hairline rows, not boxed cards: the whole summary row is the one toggle. */
#orderHistoryContainer {
  gap: 0;
  border-top: 1px solid var(--border-default);
}

.order-history-entry {
  border-bottom: 1px solid var(--border-default);
  background: transparent;
}

.order-history-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.order-history-summary:hover {
  background: var(--bg-surface-muted);
}

.order-history-summary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

.order-history-summary__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.order-history-ref {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

/* The action's words stay for screen readers; sighted users get the caret. */
.order-history-summary__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.order-history-summary__action {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-muted);
}

.order-history-summary__caret {
  transition: transform var(--transition-fast);
}

.order-history-summary.is-open .order-history-summary__caret {
  transform: rotate(180deg);
}

/* The order number and the date are the codes the mono face is for. */
.order-history-date {
  font-family: var(--font-mono);
}

.order-history-meta {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.order-history-details {
  padding: 0 var(--space-2) var(--space-4);
}

.order-history-items-list {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.order-history-items-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.order-history-comment {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

.order-history-empty-state,
.order-history-error,
.order-history-empty-items {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

#storeProfileModal .form-text {
  color: var(--text-muted);
}

@media (max-width: 576px) {
  #storeProfileModal .modal-footer {
    flex-direction: column;
  }

  #storeProfileModal .modal-footer .btn {
    width: 100%;
  }
}

#storeProfileModal .profile-section + .profile-section {
  margin-top: var(--space-4);
}

#storeProfileModal .card-header {
  font-weight: 600;
  background-color: var(--bg-surface-muted);
  color: var(--text-primary);
}

#storeProfileModal .profile-readonly {
  background-color: var(--bg-surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}

#saveDefaultOrderEmailBtn .btn-loading {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

#saveDefaultOrderEmailBtn.is-loading .btn-text {
  display: none;
}

#saveDefaultOrderEmailBtn.is-loading .btn-loading {
  display: inline-flex;
}

#saveDefaultOrderEmailBtn.is-success {
  background-color: var(--status-success);
  border-color: var(--status-success);
}

#storeProfileModal .spin {
  display: inline-block;
  animation: storeProfileSpin 0.9s linear infinite;
}

@keyframes storeProfileSpin {
  to { transform: rotate(360deg); }
}

/* Floating "back to top" control. Appears after ~1 viewport of scroll; sits
   above the sticky toolbar (z 100) but below the filter sheet (z 1100). */
.back-to-top {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 1050;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--transition-fast),
              transform var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.back-to-top .icon {
  font-size: 1.25rem;
}

.back-to-top:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transform: none;
    transition: opacity var(--transition-fast);
  }
}

/* ---------------------------------------------------------------------------
   Support: "Ilmoita ongelmasta" pop-up (account menu). Bootstrap's modal and
   form controls do the layout; these only set the copy tones and the counter.
   --------------------------------------------------------------------------- */
.support-modal__lead {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
}

.support-modal__count {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.support-modal__error {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Admin "View as customer" banner (services/storefrontPreviewHtml.js).
   Only on a look-only preview session; the customer never sees it.
   -------------------------------------------------------------------------- */
.admin-preview-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--status-warning-soft);
  border-bottom: 1px solid var(--status-warning);
  color: var(--status-warning-text);
  font-size: var(--font-size-sm);
  line-height: var(--leading-tight);
  text-align: center;
}

.admin-preview-banner__exit {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--status-warning-text);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--status-warning-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.admin-preview-banner__exit:hover,
.admin-preview-banner__exit:focus-visible {
  background: var(--status-warning-soft);
}

/* --------------------------------------------------------------------------
   17. Default storefront look (design review 2026-10-16)

   Everything below is scoped to body:not(.theme-autoexperten, .theme-shop) so
   the Autoexperten and open-shop storefronts keep the look they had: they
   share this file and these pages, and are restyled by their own theme files.
   Rules it applies: one filled green button per area; badges only for
   exceptions; page title 24px / section 16px / body 13-15px, nothing bolder
   than 600; capitals only in table headers; controls 36px (44px only on touch
   screens); corners 4 / 6 / 8px from the tokens.
   -------------------------------------------------------------------------- */
body:not(.theme-autoexperten, .theme-shop) {
  --topbar-height: 56px;
}

/* ---- 17a. One top bar: the white logo strip is gone, the logo sits in the toolbar ---- */
body:not(.theme-autoexperten, .theme-shop) .navbar {
  display: none;
}

body:not(.theme-autoexperten, .theme-shop) .main-content,
body:not(.theme-autoexperten, .theme-shop) .product-page {
  padding-top: 0;
}

body:not(.theme-autoexperten, .theme-shop) .toolbar {
  /* The page gutters (px-3 / px-lg-4) are pulled back in so the white bar runs edge to edge. */
  --toolbar-gutter: var(--space-4);
  display: flex;
  align-items: center;
  margin: 0 calc(var(--toolbar-gutter) * -1) var(--space-4);
  padding: 0 var(--toolbar-gutter);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  box-shadow: none;
}

@media (min-width: 992px) {
  body:not(.theme-autoexperten, .theme-shop) .toolbar {
    --toolbar-gutter: var(--space-6);
  }
}

body:not(.theme-autoexperten, .theme-shop) .toolbar-content {
  width: 100%;
  min-height: var(--topbar-height);
  gap: var(--space-3);
}

body:not(.theme-autoexperten, .theme-shop) .toolbar-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: var(--space-2);
}

body:not(.theme-autoexperten, .theme-shop) .toolbar-brand img {
  display: block;
  height: 28px;
  width: auto;
}

/* One control height and one corner for every control in the bar. */
body:not(.theme-autoexperten, .theme-shop) .toolbar-search {
  flex: 1 1 320px;
  max-width: 400px;
}

body:not(.theme-autoexperten, .theme-shop) .toolbar-search input.form-control {
  min-height: var(--control-height);
  padding: 0 36px 0 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

body:not(.theme-autoexperten, .theme-shop) .toolbar-filters .btn,
body:not(.theme-autoexperten, .theme-shop) .toolbar-sidebar-toggle .btn,
body:not(.theme-autoexperten, .theme-shop) .toolbar-sort-btn {
  min-height: var(--control-height);
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

body:not(.theme-autoexperten, .theme-shop) .toolbar-count #productCount {
  font-size: var(--font-size-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* "Tilaus" is the only filled button in the bar; its count sits inside it. */
body:not(.theme-autoexperten, .theme-shop) .toolbar-cart-btn {
  min-height: var(--control-height);
  padding: 0 14px;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

body:not(.theme-autoexperten, .theme-shop) .toolbar-cart-badge {
  position: static !important;
  transform: none !important;
  animation: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--text-on-brand) 24%, transparent) !important;
  color: var(--text-on-brand) !important;
}

/* The account menu is a text button with a caret: no pill, no circle icon on desktop. */
body:not(.theme-autoexperten, .theme-shop) .user-info-pill {
  min-height: var(--control-height);
  padding: 0 8px 0 10px;
  border-radius: var(--radius-md);
  background: transparent;
  font-weight: 500;
}

body:not(.theme-autoexperten, .theme-shop) .user-info-pill:hover,
body:not(.theme-autoexperten, .theme-shop) .user-info-pill:focus {
  background: var(--bg-surface-muted);
}

body:not(.theme-autoexperten, .theme-shop) .user-info-pill .icon {
  color: var(--text-secondary);
}

body:not(.theme-autoexperten, .theme-shop) .user-info-pill > .icon:first-child {
  display: none;
}

/* The product page's back button sits in the same bar; same shape as the rest. */
body:not(.theme-autoexperten, .theme-shop) .product-page .toolbar-filters {
  order: 0;
}

body:not(.theme-autoexperten, .theme-shop) .product-page .toolbar-filters .btn {
  white-space: nowrap;
}

/* The sidebar and the sort control have nothing to act on while the tiles are up. */
body:not(.theme-autoexperten, .theme-shop).is-category-landing .filter-sidebar,
body:not(.theme-autoexperten, .theme-shop).is-category-landing .toolbar-filters,
body:not(.theme-autoexperten, .theme-shop).is-category-landing .toolbar-sidebar-toggle {
  display: none;
}

body:not(.theme-autoexperten, .theme-shop) .filter-count-badge {
  border-radius: var(--radius-sm);
  background: var(--bg-surface-muted);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Below desktop: row 1 = logo, filters, sort, Tilaus, account; row 2 = search + count.
   The utility cluster hands its children to the bar so each can be placed. */
@media (max-width: 991.98px) {
  body:not(.theme-autoexperten, .theme-shop) .toolbar-content {
    min-height: 0;
    padding: var(--space-2) 0;
    row-gap: var(--space-2);
    gap: var(--space-2);
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-utils {
    display: contents;
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-brand { order: 0; }
  body:not(.theme-autoexperten, .theme-shop) .toolbar-filters { order: 1; }
  body:not(.theme-autoexperten, .theme-shop) .toolbar-sort { order: 2; }
  body:not(.theme-autoexperten, .theme-shop) .toolbar-utils > .toolbar-cart-btn {
    order: 3;
    margin-left: auto;
  }
  body:not(.theme-autoexperten, .theme-shop) .toolbar-content > .toolbar-utils > .dropdown { order: 4; }

  /* A zero-height item that fills the row forces the search onto row 2 (order page only:
     the product page's bar has no search and stays one row). */
  body:not(.theme-autoexperten, .theme-shop) .toolbar-content:has(> .toolbar-search)::after {
    content: '';
    order: 5;
    flex: 0 0 100%;
    height: 0;
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-search {
    order: 6;
    flex: 1 1 0;
    max-width: none;
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-count {
    order: 7;
    flex: 0 0 auto;
  }
}

/* Phones and small tablets: the filter, sort and account buttons shrink to their icons. */
@media (max-width: 767.98px) {
  body:not(.theme-autoexperten, .theme-shop) .toolbar-brand {
    margin-right: 0;
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-brand img {
    height: 24px;
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-filters .filter-btn-label,
  body:not(.theme-autoexperten, .theme-shop) .toolbar-sort-btn__label,
  body:not(.theme-autoexperten, .theme-shop) .toolbar-back-label,
  body:not(.theme-autoexperten, .theme-shop) .user-info-pill .user-name-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-filters .btn,
  body:not(.theme-autoexperten, .theme-shop) .toolbar-sort-btn {
    justify-content: center;
    gap: var(--space-1);
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-filters .btn .icon {
    margin-right: 0 !important;
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-sort-btn {
    min-width: var(--control-height);
  }

  /* The count of active filters rides on the icon's corner instead of widening the button. */
  body:not(.theme-autoexperten, .theme-shop) .toolbar-filters .btn {
    position: relative;
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-filters .filter-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    margin: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    line-height: 1;
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-sort-btn::after {
    display: none;
  }

  body:not(.theme-autoexperten, .theme-shop) .user-info-pill {
    justify-content: center;
    width: var(--control-height);
    padding: 0;
    gap: 0;
  }

  body:not(.theme-autoexperten, .theme-shop) .user-info-pill > .icon:first-child {
    display: inline-block;
  }

  body:not(.theme-autoexperten, .theme-shop) .user-info-pill > .icon:last-child {
    display: none;
  }
}

/* ---- 17b. Filter rail: plain text rows, count on the right, selected = tint + thin marker ---- */
body:not(.theme-autoexperten, .theme-shop) .filter-sidebar {
  top: calc(var(--topbar-height) + var(--space-4));
  max-height: calc(100svh - var(--topbar-height) - var(--space-8));
}

body:not(.theme-autoexperten, .theme-shop) .filter-sidebar .filter-panel,
body:not(.theme-autoexperten, .theme-shop) .filter-sheet__body {
  overflow-x: hidden;
}

body:not(.theme-autoexperten, .theme-shop) .filter-sidebar__title,
body:not(.theme-autoexperten, .theme-shop) .filter-sheet__title {
  font-size: var(--font-size-section);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* One way to clear: the words in the chip row. The round x in the rail header goes. */
body:not(.theme-autoexperten, .theme-shop) #filterClearDesktop {
  display: none;
}

body:not(.theme-autoexperten, .theme-shop) .filter-group__summary {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
}

body:not(.theme-autoexperten, .theme-shop) .filter-group__body {
  gap: 2px;
}

body:not(.theme-autoexperten, .theme-shop) .filter-category-list {
  gap: 2px;
}

body:not(.theme-autoexperten, .theme-shop) .filter-option--category,
body:not(.theme-autoexperten, .theme-shop) .filter-option--subcategory,
body:not(.theme-autoexperten, .theme-shop) .filter-group .filter-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
}

body:not(.theme-autoexperten, .theme-shop) .filter-option--category:hover,
body:not(.theme-autoexperten, .theme-shop) .filter-option--subcategory:hover,
body:not(.theme-autoexperten, .theme-shop) .filter-group .filter-chip:hover {
  background: var(--bg-surface-hover);
  border-color: transparent;
  color: var(--text-primary);
}

body:not(.theme-autoexperten, .theme-shop) .filter-option--category.is-active,
body:not(.theme-autoexperten, .theme-shop) .filter-option--subcategory.is-active,
body:not(.theme-autoexperten, .theme-shop) .filter-group .filter-chip.is-active {
  background: var(--brand-primary-soft);
  border-left-color: var(--brand-primary);
  color: var(--brand-primary-text);
  font-weight: 600;
}

body:not(.theme-autoexperten, .theme-shop) .filter-option__label,
body:not(.theme-autoexperten, .theme-shop) .filter-group .filter-chip__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.theme-autoexperten, .theme-shop) .filter-option__count,
body:not(.theme-autoexperten, .theme-shop) .filter-chip__count {
  display: inline;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

body:not(.theme-autoexperten, .theme-shop) .filter-group .filter-chip__swatch {
  width: 14px;
  height: 14px;
}

body:not(.theme-autoexperten, .theme-shop) .filter-group .filter-chip.is-active .filter-chip__swatch {
  border-color: var(--border-strong);
}

body:not(.theme-autoexperten, .theme-shop) .filter-subcategory-list .filter-option--subcategory {
  min-height: 30px;
}

body:not(.theme-autoexperten, .theme-shop) .filter-subcategory-list::before {
  border-radius: 0;
  width: 1px;
}

/* Filters in use: one row of grey chips, then "Tyhjennä kaikki" as a link. */
body:not(.theme-autoexperten, .theme-shop) .active-filter-chips.has-chips {
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

body:not(.theme-autoexperten, .theme-shop) .active-chip {
  min-height: var(--control-height-sm);
  gap: var(--space-1);
  padding: 0 8px 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

body:not(.theme-autoexperten, .theme-shop) .active-chip:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

body:not(.theme-autoexperten, .theme-shop) .active-chip--clear {
  width: auto;
  height: auto;
  padding: 0 var(--space-1);
  border-color: transparent;
  background: transparent;
  color: var(--brand-primary-text);
  font-size: var(--font-size-sm);
}

body:not(.theme-autoexperten, .theme-shop) .active-chip--clear:hover {
  background: transparent;
  border-color: transparent;
  color: var(--brand-primary-text);
  text-decoration: underline;
}

body:not(.theme-autoexperten, .theme-shop) .active-chip__clear-icon {
  display: none;
}

body:not(.theme-autoexperten, .theme-shop) .active-chip__clear-text {
  display: inline;
}

/* The phone sheet's clear button: a text button, same height as "Näytä tuotteet". */
body:not(.theme-autoexperten, .theme-shop) .filter-sheet__footer .btn {
  min-height: var(--control-height);
  font-weight: 600;
}

/* ---- 17c. Headings and the product grid ---- */
body:not(.theme-autoexperten, .theme-shop) .category-title {
  margin-top: 0 !important;
  margin-bottom: var(--space-4) !important;
  font-size: var(--font-size-xl) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--text-primary) !important;
}

body:not(.theme-autoexperten, .theme-shop) .category-back-bar {
  margin: 0 0 var(--space-2);
}

/* Photo flush to the card edge; name, code and colour in a fixed block under it. */
body:not(.theme-autoexperten, .theme-shop) .product-card {
  padding: 0;
  border-radius: var(--radius-lg);
}

body:not(.theme-autoexperten, .theme-shop) .product-card:hover {
  border-color: var(--border-strong);
}

body:not(.theme-autoexperten, .theme-shop) .product-card__media {
  margin-bottom: 0;
  border-radius: 0;
  background: var(--bg-surface);
}

body:not(.theme-autoexperten, .theme-shop) .product-card__body {
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-4);
}

body:not(.theme-autoexperten, .theme-shop) .product-card__title {
  font-size: var(--font-size-base);
  min-height: calc(var(--font-size-base) * var(--leading-tight) * 2);
}

body:not(.theme-autoexperten, .theme-shop) .product-card__meta {
  flex-wrap: nowrap;
  gap: var(--space-3);
  min-width: 0;
}

body:not(.theme-autoexperten, .theme-shop) .product-card__sku {
  flex: 0 0 auto;
  text-transform: none;
  letter-spacing: 0;
}

body:not(.theme-autoexperten, .theme-shop) .product-card__color {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.theme-autoexperten, .theme-shop) .product-card__color .color-swatch {
  margin-right: var(--space-2);
}

body:not(.theme-autoexperten, .theme-shop) .product-card__price {
  font-weight: 600;
}

/* Tags are quiet grey text on white; only "in your order" earns the brand colour. */
body:not(.theme-autoexperten, .theme-shop) .bestseller-tag,
body:not(.theme-autoexperten, .theme-shop) .childrens-tag,
body:not(.theme-autoexperten, .theme-shop) .product-card__unavailable-tag {
  padding: 2px var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

body:not(.theme-autoexperten, .theme-shop) .product-card-badge {
  top: var(--space-2);
  right: var(--space-2);
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

/* ---- 17d. Size rows (size window and product page): 48px, hairlines, no boxes ---- */
body:not(.theme-autoexperten, .theme-shop) .product-sizes__list {
  gap: 0;
  border-top: 1px solid var(--border-default);
}

body:not(.theme-autoexperten, .theme-shop) .product-sizes__heading {
  font-size: var(--font-size-section);
  font-weight: 600;
  letter-spacing: 0;
}

body:not(.theme-autoexperten, .theme-shop) .product-size-row {
  min-height: 48px;
  padding: 0 var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  background: transparent;
}

body:not(.theme-autoexperten, .theme-shop) .product-size-row.is-in-cart {
  background: transparent;
  border-bottom-color: var(--border-default);
}

body:not(.theme-autoexperten, .theme-shop) .product-size-row.is-pending {
  background: var(--brand-primary-soft);
  border-bottom: 1px solid var(--border-default);
}

body:not(.theme-autoexperten, .theme-shop) .product-size-row__label {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

body:not(.theme-autoexperten, .theme-shop) .product-size-row__hint--existing {
  color: var(--brand-primary-text);
  font-weight: 500;
}

body:not(.theme-autoexperten, .theme-shop) .product-size-row .stepper-btn,
body:not(.theme-autoexperten, .theme-shop) .product-size-row .stepper-qty {
  min-width: var(--control-height);
  min-height: var(--control-height);
}

body:not(.theme-autoexperten, .theme-shop) .product-size-row .stepper-btn {
  font-size: var(--font-size-lg);
}

body:not(.theme-autoexperten, .theme-shop) .product-size-row .stepper-qty {
  font-size: var(--font-size-base);
}

body:not(.theme-autoexperten, .theme-shop) .product-size-row__controls .input-group {
  width: calc(var(--space-10) * 3 + var(--space-2));
}

body:not(.theme-autoexperten, .theme-shop) .product-size-pack-hint,
body:not(.theme-autoexperten, .theme-shop) .size-selection__pack-hint {
  color: var(--text-secondary);
  background: var(--bg-surface-muted);
  font-weight: 500;
}

body:not(.theme-autoexperten, .theme-shop) #modalProductImageContainer {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

body:not(.theme-autoexperten, .theme-shop) .size-selection__price {
  font-weight: 600;
}

/* Size window footer: total on the left, buttons on the right, one line even on a phone. */
#sizeSelectionModal .modal-footer {
  flex-wrap: nowrap;
  gap: var(--space-2);
}

#sizeSelectionModal .modal-footer > * {
  margin: 0;
}

.size-selection__total {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  body:not(.theme-autoexperten, .theme-shop) .modal-product-img {
    max-height: 160px;
  }

  body:not(.theme-autoexperten, .theme-shop) #modalProductImageContainer {
    padding: var(--space-2);
  }
}

/* The size window's add button is a grey stub until a quantity is typed. The
   partner themes paint it red/blue with a more specific rule, so say it here too. */
#sizeSelectionModal #addToOrderBtn:disabled,
body.theme-autoexperten #sizeSelectionModal #addToOrderBtn:disabled,
body.theme-autoexperten .product-cta__btn:disabled {
  background-color: var(--bg-surface-muted);
  border-color: var(--border-default);
  color: var(--text-muted);
  opacity: 1;
}

/* ---- 17e. Product page: details on the page, one hairline between parts ---- */
body:not(.theme-autoexperten, .theme-shop) .product-info {
  padding: 0;
  border: 0;
  background: transparent;
}

body:not(.theme-autoexperten, .theme-shop) .product-gallery__main {
  border-radius: var(--radius-lg);
}

body:not(.theme-autoexperten, .theme-shop) .product-gallery__nav,
body:not(.theme-autoexperten, .theme-shop) .product-zoom-nav {
  border-radius: var(--radius-md);
}

body:not(.theme-autoexperten, .theme-shop) .product-info__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

body:not(.theme-autoexperten, .theme-shop) .product-info__code {
  text-transform: none;
  letter-spacing: 0;
}

body:not(.theme-autoexperten, .theme-shop) .product-info__badge,
body:not(.theme-autoexperten, .theme-shop) .product-info__badge--kids,
body:not(.theme-autoexperten, .theme-shop) .product-info__badge--bestseller {
  padding: 2px var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  letter-spacing: 0;
  text-transform: none;
}

body:not(.theme-autoexperten, .theme-shop) .product-color-switcher__label {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

body:not(.theme-autoexperten, .theme-shop) .product-color-switcher__swatch {
  min-height: var(--control-height);
  border-radius: var(--radius-md);
}

body:not(.theme-autoexperten, .theme-shop) .product-info__size-chart a {
  color: var(--brand-primary-text);
}

/* The bar under the sizes: running total on the left, the one filled button on the right. */
body:not(.theme-autoexperten, .theme-shop) .product-cta {
  margin: 0;
  padding: var(--space-3) 0;
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-page);
  border-radius: 0;
}

body:not(.theme-autoexperten, .theme-shop) .product-cta__summary {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
}

body:not(.theme-autoexperten, .theme-shop) .product-cta__btn {
  min-height: var(--control-height);
}

/* ---- 17f. Order window (cart) ---- */
body:not(.theme-autoexperten, .theme-shop) .basket-order-modal .modal-title {
  font-size: var(--font-size-section);
  font-weight: 600;
}

body:not(.theme-autoexperten, .theme-shop) .basket-section-heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
}

body:not(.theme-autoexperten, .theme-shop) #clearBasketBtn,
body:not(.theme-autoexperten, .theme-shop) .basket-undo .btn {
  min-height: var(--control-height-sm);
}

body:not(.theme-autoexperten, .theme-shop) .basket-item-controls .stepper-btn,
body:not(.theme-autoexperten, .theme-shop) .basket-item-controls .stepper-qty {
  min-width: var(--control-height);
  min-height: var(--control-height);
}

body:not(.theme-autoexperten, .theme-shop) .basket-item-controls .stepper-btn {
  font-size: var(--font-size-lg);
}

/* A line with a problem gets a full outline, not a coloured stripe down its side. */
body:not(.theme-autoexperten, .theme-shop) .basket-item-row--invalid {
  box-shadow: inset 0 0 0 1px var(--status-danger);
}

body:not(.theme-autoexperten, .theme-shop) .basket-grand-total__label {
  letter-spacing: 0;
  text-transform: none;
}

body:not(.theme-autoexperten, .theme-shop) .basket-grand-total__amount {
  font-weight: 600;
}

body:not(.theme-autoexperten, .theme-shop) .basket-empty-title {
  font-size: var(--font-size-section);
}

/* ---- 17g. Smaller pieces ---- */
body:not(.theme-autoexperten, .theme-shop) .back-to-top {
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-md);
}

body:not(.theme-autoexperten, .theme-shop) .legal-document__eyebrow {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

body:not(.theme-autoexperten, .theme-shop) .legal-section h2 {
  font-weight: 600;
}

body:not(.theme-autoexperten, .theme-shop) .admin-preview-banner__exit {
  border-radius: var(--radius-md);
}

body:not(.theme-autoexperten, .theme-shop) .toolbar-sort-menu .dropdown-item.active {
  color: var(--brand-primary-text);
}

/* ---- 17h. Finger-size targets on touch screens (everything above is desktop size) ---- */
@media (pointer: coarse) {
  body:not(.theme-autoexperten, .theme-shop) .toolbar-search input.form-control,
  body:not(.theme-autoexperten, .theme-shop) .toolbar-filters .btn,
  body:not(.theme-autoexperten, .theme-shop) .toolbar-sidebar-toggle .btn,
  body:not(.theme-autoexperten, .theme-shop) .toolbar-sort-btn,
  body:not(.theme-autoexperten, .theme-shop) .toolbar-cart-btn,
  body:not(.theme-autoexperten, .theme-shop) .user-info-pill,
  body:not(.theme-autoexperten, .theme-shop) .product-cta__btn,
  body:not(.theme-autoexperten, .theme-shop) .back-to-top,
  body:not(.theme-autoexperten, .theme-shop) .product-color-switcher__swatch {
    min-height: var(--control-height-touch);
  }

  body:not(.theme-autoexperten, .theme-shop) .toolbar-search input.form-control {
    font-size: var(--font-size-md);
  }

  body:not(.theme-autoexperten, .theme-shop) .back-to-top {
    width: var(--control-height-touch);
  }

  @media (max-width: 767.98px) {
    body:not(.theme-autoexperten, .theme-shop) .user-info-pill {
      width: var(--control-height-touch);
    }
  }

  body:not(.theme-autoexperten, .theme-shop) .filter-option--category,
  body:not(.theme-autoexperten, .theme-shop) .filter-option--subcategory,
  body:not(.theme-autoexperten, .theme-shop) .filter-group .filter-chip {
    min-height: var(--control-height-touch);
  }

  body:not(.theme-autoexperten, .theme-shop) .active-chip {
    min-height: var(--control-height);
  }

  body:not(.theme-autoexperten, .theme-shop) .product-size-row {
    min-height: 56px;
  }

  body:not(.theme-autoexperten, .theme-shop) .product-size-row .stepper-btn,
  body:not(.theme-autoexperten, .theme-shop) .product-size-row .stepper-qty,
  body:not(.theme-autoexperten, .theme-shop) .basket-item-controls .stepper-btn,
  body:not(.theme-autoexperten, .theme-shop) .basket-item-controls .stepper-qty {
    min-width: var(--control-height-touch);
    min-height: var(--control-height-touch);
  }

  body:not(.theme-autoexperten, .theme-shop) .product-size-row__controls .input-group {
    width: calc(var(--space-10) * 4);
  }

  body:not(.theme-autoexperten, .theme-shop) #clearBasketBtn,
  body:not(.theme-autoexperten, .theme-shop) .basket-undo .btn {
    min-height: var(--control-height-touch);
  }
}