/* Generated from main.source.css by build.ps1. Do not edit directly. */
/* Source manifest. Run build.ps1 to create main.css for the browser. */

/* Base */

/* Source: ./base/vars.css */
:root {
  /* =========================================================================
     Fonts
  ========================================================================= */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent:    var(--font-primary);
  --font-secondary: var(--font-primary);

  /* =========================================================================
     Font weights
  ========================================================================= */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* =========================================================================
     Font size scale (base ≥ 16px)
  ========================================================================= */
  --text-xs:   11px;  --lh-xs:   1.5;
  --text-sm:   13px;  --lh-sm:   1.5;
  --text-base: 16px;  --lh-base: 1.6;
  --text-md:   18px;  --lh-md:   1.5;
  --text-lg:   20px;  --lh-lg:   1.4;
  --text-xl:   24px;  --lh-xl:   1.3;
  --text-2xl:  30px;  --lh-2xl:  1.2;
  --text-3xl:  36px;  --lh-3xl:  1.15;
  --text-4xl:  52px;  --lh-4xl:  1.1;

  /* =========================================================================
     Letter spacing
  ========================================================================= */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;

  /* =========================================================================
     Spacing (4px base)
  ========================================================================= */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Gap shortcuts (used in utils.css) */
  --sp-1: var(--space-1);
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-5: var(--space-5);
  --sp-6: var(--space-6);
  --sp-8: var(--space-8);

  /* =========================================================================
     Colors — Light mode
  ========================================================================= */

  /* Background */
  --color-bg-primary:   #FFFFFF;
  --color-bg-secondary: #F5F6FA;
  --color-bg-tertiary:  #ECEEF4;

  /* Text */
  --color-text-primary:   #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6B7280;
  --color-text-inverse:   #FFFFFF;
  --color-text-accent:    #1A4FA8;

  /* Accent — brand navy blue */
  --color-accent-primary: #1A4FA8;
  --color-accent-hover:   #163D84;
  --color-accent-light:   #EBF0FA;

  /* Secondary accent — bright blue for CTAs / interactive */
  --color-secondary-primary: #2563EB;
  --color-secondary-hover:   #1D4ED8;
  --color-secondary-light:   #EFF6FF;

  /* Semantic */
  --color-success:    #22C55E;
  --color-success-bg: #F0FDF4;
  --color-warning:    #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-error:      #EF4444;
  --color-error-bg:   #FEF2F2;
  --color-info:       #3B82F6;
  --color-info-bg:    #EFF6FF;

  /* Border */
  --color-border-light:  #F3F4F6;
  --color-border:        #E5E7EB;
  --color-border-strong: #D1D5DB;

  /* Panel (sidebar, surface panels) */
  --color-panel-bg:     #F5F6FA;
  --color-panel-text:   #111827;
  --color-panel-accent: #1A4FA8;
  --color-panel-muted:  #6B7280;

  /* Product / pump type badges */
  --color-product-disc:         #1A4FA8;
  --color-product-disc-bg:      #EBF0FA;
  --color-product-screw:        #6D28D9;
  --color-product-screw-bg:     #EDE9FE;
  --color-product-centrifugal:  #0E7490;
  --color-product-centrifugal-bg: #ECFEFF;
  --color-product-gear:         #B45309;
  --color-product-gear-bg:      #FEF3C7;
  --color-product-sale:         #EF4444;
  --color-product-sale-bg:      #FEF2F2;
  --color-product-new:          #22C55E;
  --color-product-new-bg:       #F0FDF4;
  --color-product-hit:          #F59E0B;
  --color-product-hit-bg:       #FFFBEB;
  --color-product-out:          #9CA3AF;
  --color-product-out-bg:       #F9FAFB;

  /* =========================================================================
     Border radius
  ========================================================================= */
  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-2xl:    16px;
  --radius-full:   9999px;
  --radius-button: 6px;
  --radius-card:   8px;
  --radius-badge:  4px;
  --radius-input:  6px;
  --radius-image:  6px;

  /* =========================================================================
     Shadows
  ========================================================================= */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 16px 40px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08);

  /* =========================================================================
     Transitions
  ========================================================================= */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* =========================================================================
     Z-index layers
  ========================================================================= */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* =========================================================================
     Layout
  ========================================================================= */
  --container-max: 1440px;
  --container-px:  var(--space-6);
  --sidebar-width: 240px;
  --header-height: 60px;
}


/* Source: ./base/reset.css */
/* Reset and base styles  */
* {
	padding: 0px;
	margin: 0px;
	border: none;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Links */

a, a:link, a:visited  {
    text-decoration: none;
}

a:hover  {
    text-decoration: none;
}

/* Common */

aside, nav, footer, header, section, main {
	display: block;
}

h1, h2, h3, h4, h5, h6, p {
    font-size: inherit;
	font-weight: inherit;
}

ul, ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

img, svg {
	max-width: 100%;
	height: auto;
}

address {
  font-style: normal;
}

/* Form */

input, textarea, button, select {
	font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
}

input::-ms-clear {
	display: none;
}

textarea {
	resize: vertical;
}

button, input[type="submit"] {
    display: inline-block;
    box-shadow: none;
    background-color: transparent;
    background: none;
    cursor: pointer;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

label {
	cursor: pointer;
}

legend {
	display: block;
}

input[type='file'] {
	max-width: 100%;
}


/* Source: ./base/base.css */
/* ==========================================================================
   Base — global page styles, typography, layout primitives
   ========================================================================== */

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Headings */
h1 { font-size: var(--text-4xl); line-height: var(--lh-4xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--text-xl);  line-height: var(--lh-xl);  font-weight: var(--fw-semibold); }
h4 { font-size: var(--text-lg);  line-height: var(--lh-lg);  font-weight: var(--fw-semibold); }
h5 { font-size: var(--text-md);  line-height: var(--lh-md);  font-weight: var(--fw-medium); }
h6 { font-size: var(--text-base);line-height: var(--lh-base);font-weight: var(--fw-medium); }

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  margin: 0;
}

/* Links */
a {
  color: var(--color-accent-primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Paragraphs */
p {
  margin: 0;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================================
   Layout: Container
========================================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* =========================================================================
   Layout: Page shell
========================================================================= */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1;
}

/* =========================================================================
   Layout: Two-column catalog (sidebar + content)
========================================================================= */
.catalog-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-6);
  align-items: start;
}

.catalog-layout__sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

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

  .catalog-layout__sidebar {
    position: static;
  }
}

.catalog-layout--full {
  width: 100%;
  min-width: 0;
  padding: var(--space-6) var(--space-6) var(--space-12) 0;
}


/* Blocks */

/* Source: ./blocks/button.css */
/* ==========================================================================
   Block: button
   BEM: .btn, .btn--*, .btn--sm, .btn--lg, .btn--icon
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Variants
-------------------------------------------------------------------------- */

/* Primary — dark navy */
.btn--primary {
  background-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-primary);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.btn--primary:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* CTA — bright blue (Run pump selection) */
.btn--cta {
  background-color: var(--color-secondary-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-secondary-primary);
}

.btn--cta:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.btn--cta:focus-visible {
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}

/* Secondary — outlined */
.btn--secondary {
  background-color: transparent;
  color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.btn--secondary:hover {
  background-color: var(--color-accent-light);
  color: var(--color-accent-primary);
  text-decoration: none;
}

/* Ghost — no border */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn--ghost:hover,
.btn--ghost.btn--active {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Danger */
.btn--danger {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}

.btn--danger:hover {
  background-color: #DC2626;
  border-color: #DC2626;
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* Link */
.btn--link {
  background-color: transparent;
  color: var(--color-accent-primary);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  height: auto;
}

.btn--link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Sizes
-------------------------------------------------------------------------- */

.btn--sm {
  height: 32px;
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  height: 48px;
  padding: 12px var(--space-6);
  font-size: var(--text-md);
}

/* --------------------------------------------------------------------------
   Modifiers
-------------------------------------------------------------------------- */

.btn--full {
  width: 100%;
}

.btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

.btn--icon.btn--sm {
  width: 28px;
  height: 28px;
}

.btn--icon.btn--lg {
  width: 44px;
  height: 44px;
}

.btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin 0.6s linear infinite;
  color: var(--color-text-inverse);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}


/* Source: ./blocks/input.css */
/* ==========================================================================
   Block: input / form elements
   BEM: .field, .input, .select, .textarea, .checkbox, .radio, .toggle, .range
   ========================================================================== */

/* --------------------------------------------------------------------------
   Form field wrapper
-------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.field__error {
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Input base
-------------------------------------------------------------------------- */
.input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.input:disabled {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.input--error {
  border-color: var(--color-error);
}

.input--error:focus {
  box-shadow: 0 0 0 3px var(--color-error-bg);
}

.input--success {
  border-color: var(--color-success);
}

/* Small variant */
.input--sm {
  height: 32px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
}

/* With icon prefix */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrap .input {
  padding-left: var(--space-10);
}

.input-wrap__icon {
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Textarea
-------------------------------------------------------------------------- */
.textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.textarea::placeholder {
  color: var(--color-text-muted);
}

.textarea:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* --------------------------------------------------------------------------
   Select
-------------------------------------------------------------------------- */
.select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-8) 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.select--sm {
  height: 32px;
  font-size: var(--text-sm);
  padding-left: var(--space-2);
}

/* --------------------------------------------------------------------------
   Checkbox
-------------------------------------------------------------------------- */
.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
}

.checkbox__input:checked {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.checkbox__input:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox__input:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.checkbox__label {
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Radio
-------------------------------------------------------------------------- */
.radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.radio__input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
}

.radio__input:checked {
  border-color: var(--color-accent-primary);
}

.radio__input:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-primary);
}

/* --------------------------------------------------------------------------
   Toggle
-------------------------------------------------------------------------- */
.toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--color-border-strong);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.toggle__input:checked + .toggle__track {
  background-color: var(--color-accent-primary);
}

.toggle__input:checked ~ .toggle__thumb,
.toggle__track:has(.toggle__input:checked) .toggle__thumb {
  transform: translateX(20px);
}

/* --------------------------------------------------------------------------
   Range slider
-------------------------------------------------------------------------- */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  outline: none;
  cursor: pointer;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-accent-primary);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast);
}

.range::-webkit-slider-thumb:hover {
  background: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   Counter input
-------------------------------------------------------------------------- */
.counter {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  overflow: hidden;
}

.counter__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  cursor: pointer;
  border: none;
  transition: background-color var(--transition-fast);
  font-size: var(--text-lg);
  line-height: 1;
}

.counter__btn:hover {
  background-color: var(--color-bg-tertiary);
}

.counter__value {
  width: 48px;
  height: 36px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

.counter__value:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Tags input
-------------------------------------------------------------------------- */
.tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background-color: var(--color-bg-primary);
  min-height: 40px;
  cursor: text;
}

.tags-input__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  background-color: var(--color-accent-light);
  color: var(--color-accent-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.tags-input__tag-remove {
  cursor: pointer;
  opacity: 0.7;
  line-height: 1;
  font-size: 14px;
}

.tags-input__tag-remove:hover {
  opacity: 1;
}

.tags-input__input {
  border: none;
  outline: none;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: transparent;
  min-width: 80px;
  flex: 1;
}

/* --------------------------------------------------------------------------
   File dropzone
-------------------------------------------------------------------------- */
.dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--color-accent-primary);
  background-color: var(--color-accent-light);
}

.dropzone__icon {
  color: var(--color-text-muted);
  margin: 0 auto var(--space-3);
}

.dropzone__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.dropzone__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}


/* Source: ./blocks/card.css */
/* ==========================================================================
   Block: card — generic card and pump-card
   BEM: .card, .pump-card, .pump-card__*
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pump grid — catalog listing layout
-------------------------------------------------------------------------- */
.pump-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1280px) {
  .pump-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .pump-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .pump-grid {
    grid-template-columns: 1fr;
  }
}

[data-view-mode="list"] .pump-card {
  flex-direction: row;
  align-items: stretch;
}

[data-view-mode="list"] .pump-card .pump-card__image-wrap {
  width: 180px;
  flex-shrink: 0;
  aspect-ratio: auto;
}

[data-view-mode="list"] .pump-card .pump-card__body {
  border-top: none;
  border-left: 1px solid var(--color-border-light);
}

[data-view-mode="list"] .pump-grid {
  grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   Generic card
-------------------------------------------------------------------------- */
.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card__header {
  padding: var(--space-4) var(--space-4) 0;
}

.card__body {
  padding: var(--space-4);
}

.card__footer {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Pump card — grid view
-------------------------------------------------------------------------- */
.pump-card {
  position: relative;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast);
  overflow: hidden;
}

.pump-card:hover {
  box-shadow: var(--shadow-md);
}

/* Top row: badge + cart icon */
.pump-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2) 0;
}

.pump-card__top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  min-width: 0;
}

.pump-card__drives {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pump-card__drive {
  display: flex;
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
  cursor: default;
}

.pump-card__drive svg {
  width: 100%;
  height: 100%;
}

.pump-card__standard {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  line-height: 1;
  padding-top: 2px;
}

/* Image area */
.pump-card__image-wrap {
  position: relative;
  padding: var(--space-3);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pump-card__image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Card slider */
.pump-card__slide {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.pump-card__slide.is-active {
  display: flex;
}

.pump-card__slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pump-card__slide--empty {
  color: var(--color-text-muted);
}

.pump-card__slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}

.pump-card__image-wrap.has-multiple:hover .pump-card__slide-btn {
  opacity: 1;
}

.pump-card__slide-btn--prev { left: var(--space-2); }
.pump-card__slide-btn--next { right: var(--space-2); }

.pump-card__slide-dots {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 2;
}

.pump-card__slide-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background 0.15s;
  cursor: pointer;
}

.pump-card__slide-dot.is-active {
  background: var(--color-accent-primary);
}

.pump-card__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.pump-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: rgba(255,255,255,0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 12px;
  transition: opacity var(--transition-fast);
  opacity: 0;
}

.pump-card:hover .pump-card__nav {
  opacity: 1;
}

.pump-card__nav--prev { left: var(--space-2); }
.pump-card__nav--next { right: var(--space-2); }

/* Actions below image */
.pump-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3) var(--space-2);
}

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

.pump-card__action-btn:hover {
  color: var(--color-accent-primary);
  background-color: var(--color-bg-secondary);
}

.pump-card__action-btn.is-active {
  color: var(--color-error);
}

/* Industry icons */
.pump-card__industries {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pump-card__industry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: default;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.pump-card__industry:hover {
  color: var(--color-accent-primary);
  background-color: var(--color-accent-light);
}

.pump-card__industry svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: block;
}

/* Body */
.pump-card__body {
  padding: 0 var(--space-3) var(--space-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border-light);
}

/* Brand row */
.pump-card__brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
}

.pump-card__brand-logo {
  max-height: 20px;
  object-fit: contain;
}

.pump-card__flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

/* Breadcrumb path: Brand › Series */
.pump-card__path {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pump-card__path-sep {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Technical specs */
.pump-card__specs {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pump-card__spec {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pump-card__spec-icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
}

/* Price block */
.pump-card__price {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent-primary);
  line-height: 1.2;
}

.pump-card__price-change {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.pump-card__price-change--up   { color: var(--color-success); }
.pump-card__price-change--down { color: var(--color-error); }

/* Price meta row: "Price range" label left + "Details" link right */
.pump-card__price-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.pump-card__price-meta-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pump-card__price-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-medium);
}

.pump-card__price-range {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.pump-card__lifecycle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Delivery */
.pump-card__delivery-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Pump rating */
.pump-card__pump-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.pump-card__pump-rating:hover .pump-card__rating-val {
  color: var(--color-accent-primary);
}

.pump-card__rating-val {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.pump-card__review-count {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Stars (shared for pump rating and dealer rating) */
.pump-card__stars {
  display: inline-flex;
  gap: 1px;
  line-height: 1;
}

.pump-card__star {
  font-size: 13px;
}

.pump-card__star--full  { color: #f59e0b; }
.pump-card__star--half  { color: #f59e0b; opacity: 0.6; }
.pump-card__star--empty { color: var(--color-border); }

.pump-card__offer-count {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.pump-card__offer-cc {
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

/* Brand logo in card */
.pump-card__brand-logo {
  height: 20px;
  max-width: 80px;
  object-fit: contain;
  object-position: left center;
}

.pump-card__brand-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

/* Dealers list */
.pump-card__dealers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pump-card__dealers-label {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.pump-card__dealer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pump-card__dealer-row--header {
  margin-bottom: 2px;
}

.pump-card__dealer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}


.pump-card__dealer-flag {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.pump-card__dealer-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.pump-card__dealer-identity:hover .pump-card__dealer-name {
  color: var(--color-accent-primary);
  text-decoration: underline;
}

.pump-card__dealer-logo {
  height: 18px;
  max-width: 60px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.pump-card__dealer-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pump-card__dealer-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1;
}

.pump-card__dealer-review-count {
  color: var(--color-text-muted);
}

.pump-card__dealer-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.pump-card__dealer-reviews {
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
}

.pump-card__details {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-fast);
  padding-top: 2px;
}

.pump-card__details:hover {
  color: var(--color-accent-primary);
  text-decoration: underline;
}

/* Technical specs grid — 2 columns */
.pump-card__tech-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) 0;
}

.pump-card__tech-spec {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.pump-card__tech-spec-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.pump-card__tech-spec-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-right: 2px;
}

/* Materials expandable */
.pump-card__materials-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
}

.pump-card__materials-btn:hover {
  color: var(--color-accent-primary);
}

/* Separator */
.pump-card__divider {
  height: 1px;
  background-color: var(--color-border-light);
  border: none;
  margin: var(--space-2) 0;
}

/* Rating row */
.pump-card__rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.pump-card__stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pump-card__stars-icons {
  display: flex;
  gap: 2px;
}

.pump-card__stars-icons svg {
  width: 13px;
  height: 13px;
}

.pump-card__stars-value {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.pump-card__reviews {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Sold by section */
.pump-card__seller {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pump-card__seller-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-medium);
}

.pump-card__seller-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.pump-card__seller-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.pump-card__seller-units {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Pump card — list view variant
-------------------------------------------------------------------------- */
.pump-card--list {
  flex-direction: row;
  align-items: stretch;
}

.pump-card--list .pump-card__image-wrap {
  width: 180px;
  flex-shrink: 0;
  aspect-ratio: auto;
}

.pump-card--list .pump-card__body {
  border-top: none;
  border-left: 1px solid var(--color-border-light);
}

/* --------------------------------------------------------------------------
   Materials collapsible (details/summary)
-------------------------------------------------------------------------- */
.pump-card__materials {
  margin: var(--space-1) 0 0;
}

.pump-card__materials-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding: var(--space-1) 0;
  user-select: none;
}

.pump-card__materials-toggle::-webkit-details-marker { display: none; }
.pump-card__materials-toggle::marker { display: none; }

.pump-card__materials-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
}

.pump-card__materials-toggle:hover .pump-card__materials-label {
  color: var(--color-accent-primary);
}

.pump-card__materials-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.18s ease;
}

.pump-card__materials[open] .pump-card__materials-chevron {
  transform: rotate(180deg);
}

.pump-card__materials-list {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0 var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pump-card__materials-item {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.pump-card__materials-key {
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 52px;
}

.pump-card__materials-val {
  color: var(--color-text-secondary);
}


/* Source: ./blocks/badge.css */
/* ==========================================================================
   Block: badge, chip, counter-badge
   BEM: .badge, .badge--*, .chip, .chip--*, .counter-badge
   ========================================================================== */

/* --------------------------------------------------------------------------
   Badge
-------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-badge);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: nowrap;
}

/* Sizes */
.badge--sm {
  font-size: var(--text-xs);
  padding: 1px 6px;
}

.badge--md {
  font-size: var(--text-sm);
  padding: 2px var(--space-2);
}

.badge--lg {
  font-size: var(--text-base);
  padding: 4px var(--space-3);
}

/* Color variants */
.badge--primary {
  background-color: var(--color-accent-light);
  color: var(--color-accent-primary);
}

.badge--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.badge--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.badge--info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

.badge--neutral {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-muted);
}

/* Pump type badges */
.badge--disc {
  background-color: var(--color-product-disc-bg);
  color: var(--color-product-disc);
}

.badge--screw {
  background-color: var(--color-product-screw-bg);
  color: var(--color-product-screw);
}

.badge--centrifugal {
  background-color: var(--color-product-centrifugal-bg);
  color: var(--color-product-centrifugal);
}

.badge--gear {
  background-color: var(--color-product-gear-bg);
  color: var(--color-product-gear);
}

.badge--new {
  background-color: var(--color-product-new-bg);
  color: var(--color-product-new);
}

.badge--hit {
  background-color: var(--color-product-hit-bg);
  color: var(--color-product-hit);
}

.badge--out {
  background-color: var(--color-product-out-bg);
  color: var(--color-product-out);
}

/* --------------------------------------------------------------------------
   Chip (removable tag / filter)
-------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 var(--space-2);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: default;
}

.chip--active {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  font-size: 12px;
  transition: opacity var(--transition-fast);
}

.chip__remove:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Counter badge (notification dot)
-------------------------------------------------------------------------- */
.counter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* Positioned on icon */
.counter-badge--overlay {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
}


/* Source: ./blocks/table.css */
/* ==========================================================================
   Block: table
   BEM: .table, .table--*
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.table caption {
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-light);
}

.table thead th {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover td {
  background-color: var(--color-bg-secondary);
}

/* Compare table */
.table--compare th {
  width: 200px;
  background-color: var(--color-bg-secondary);
}

.table--compare td {
  min-width: 180px;
}

.table--compare .is-best {
  color: var(--color-success);
  font-weight: var(--fw-semibold);
}

/* Specs table */
.table--specs tbody tr:nth-child(odd) td {
  background-color: var(--color-bg-secondary);
}


/* Source: ./blocks/modal.css */
/* ==========================================================================
   Block: modal
   BEM: .modal, .modal__*, .modal--sm, .modal--lg, .modal--full
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding: var(--space-4);
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.modal--sm  { max-width: 400px; }
.modal--lg  { max-width: 800px; }
.modal--full {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  height: 100%;
  width: 100%;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 20px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.modal__close:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.modal__body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  flex-shrink: 0;
}


/* Source: ./blocks/alert.css */
/* ==========================================================================
   Block: alert, toast notification
   BEM: .alert, .alert--*, .toast, .toast--*
   ========================================================================== */

/* --------------------------------------------------------------------------
   Alert (inline)
-------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-base);
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.alert__content {
  flex: 1;
}

.alert__title {
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}

.alert__text {
  color: inherit;
  opacity: 0.9;
}

.alert__close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 18px;
  line-height: 1;
  padding: 2px;
  transition: opacity var(--transition-fast);
}

.alert__close:hover {
  opacity: 1;
}

/* Variants */
.alert--success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
  color: #166534;
}

.alert--warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: #92400E;
}

.alert--error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
  color: #991B1B;
}

.alert--info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info);
  color: #1E40AF;
}

/* --------------------------------------------------------------------------
   Toast (floating notification)
-------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
  pointer-events: all;
  animation: toast-in 0.25s ease;
  font-size: var(--text-base);
  border-left: 4px solid transparent;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.toast__text {
  flex: 1;
}

.toast__close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 18px;
  line-height: 1;
  transition: opacity var(--transition-fast);
}

.toast__close:hover {
  opacity: 1;
}

.toast--success {
  background-color: var(--color-bg-primary);
  border-left-color: var(--color-success);
  color: var(--color-text-primary);
}

.toast--error {
  background-color: var(--color-bg-primary);
  border-left-color: var(--color-error);
  color: var(--color-text-primary);
}

.toast--warning {
  background-color: var(--color-bg-primary);
  border-left-color: var(--color-warning);
  color: var(--color-text-primary);
}

.toast--info {
  background-color: var(--color-bg-primary);
  border-left-color: var(--color-info);
  color: var(--color-text-primary);
}


/* Source: ./blocks/nav.css */
/* ==========================================================================
   Block: nav — site header, breadcrumbs, pagination, tabs, accordion, sidebar
   ========================================================================== */

/* --------------------------------------------------------------------------
   Site header
-------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-header__logo img {
  height: 36px;
  width: auto;
}

.site-header__search {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  margin-left: auto;
}

.site-header__action {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  position: relative;
}

.site-header__action:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}

.site-header__action svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
-------------------------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumbs__link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
  color: var(--color-accent-primary);
  text-decoration: none;
}

.breadcrumbs__sep {
  color: var(--color-text-muted);
  opacity: 0.5;
  font-size: var(--text-xs);
}

.breadcrumbs__current {
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   Pagination
-------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-primary);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.pagination__btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  text-decoration: none;
}

.pagination__btn.is-active {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Tabs
-------------------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-direction: column;
}

.tabs__list {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  gap: 0;
  flex-wrap: wrap;
}

.tabs__tab {
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.tabs__tab:hover {
  color: var(--color-text-primary);
}

.tabs__tab[aria-selected="true"] {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}

.tabs__panel {
  padding: var(--space-6) 0;
}

.tabs__panel[hidden] {
  display: none;
}

/* Tabs — pill variant */
.tabs--pills .tabs__list {
  border-bottom: none;
  gap: var(--space-2);
  background-color: var(--color-bg-secondary);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
}

.tabs--pills .tabs__tab {
  border-radius: var(--radius-md);
  margin-bottom: 0;
  border-bottom: none;
}

.tabs--pills .tabs__tab[aria-selected="true"] {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Accordion
-------------------------------------------------------------------------- */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.accordion__item {
  border-bottom: 1px solid var(--color-border-light);
}

.accordion__item:last-child {
  border-bottom: none;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) 0;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}

.accordion__trigger:hover {
  color: var(--color-text-primary);
}

.accordion__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
  color: var(--color-text-muted);
}

.accordion__trigger[aria-expanded="true"] .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__body {
  padding-bottom: var(--space-3);
}

.accordion__body[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Filter sidebar panel
-------------------------------------------------------------------------- */
.filter-panel {
  background-color: var(--color-panel-bg);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.filter-panel__section {
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
}

.filter-panel__section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.filter-panel__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 0;
}

.filter-panel__label:hover {
  color: var(--color-text-primary);
}

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

.filter-panel__body[hidden] {
  display: none;
}

.filter-panel__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.filter-panel__run-btn {
  margin-top: var(--space-3);
  width: 100%;
}

/* --------------------------------------------------------------------------
   Catalog toolbar
-------------------------------------------------------------------------- */
.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.catalog-toolbar__search {
  flex: 1;
  min-width: 200px;
}

.catalog-toolbar__sort {
  min-width: 160px;
}

.catalog-toolbar__view-group {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.catalog-toolbar__view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.catalog-toolbar__view-btn:last-child {
  border-right: none;
}

.catalog-toolbar__view-btn:hover,
.catalog-toolbar__view-btn.is-active {
  background-color: var(--color-bg-secondary);
  color: var(--color-accent-primary);
}

.catalog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.catalog-meta__count strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

.catalog-meta__per-page {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


/* Source: ./blocks/header.css */
/* ==========================================================================
   Block: site-header
   BEM: .site-header, .site-header__*
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  text-decoration: none;
}

.site-header__logo:hover {
  text-decoration: none;
}

.site-header__logo-mark {
  width: 30px;
  height: 30px;
  background-color: var(--color-accent-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-weight: var(--fw-bold);
  font-size: 13px;
  flex-shrink: 0;
}

.site-header__logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.site-header__logo-name {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1;
  white-space: nowrap;
}

.site-header__logo-sub {
  font-size: 10px;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
}

/* Search */
.site-header__search {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

.site-header__search-input {
  width: 100%;
  height: 38px;
  padding: 0 var(--space-4) 0 36px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.site-header__search-input::placeholder {
  color: var(--color-text-muted);
}

.site-header__search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.site-header__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
}

/* Actions */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.site-header__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-primary);
  white-space: nowrap;
}

.site-header__action:hover {
  color: var(--color-accent-primary);
  background-color: var(--color-accent-light);
  text-decoration: none;
}

.site-header__action-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header__action--login {
  background-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-button);
  flex-direction: row;
  gap: var(--space-1);
}

.site-header__action--login:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-text-inverse);
}

/* Mobile */
.site-header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}

.site-header__burger-line {
  width: 22px;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 2px;
  display: block;
}

@media (max-width: 900px) {
  .site-header__search {
    max-width: 260px;
  }

  .site-header__action span:not(.site-header__action-icon) {
    display: none;
  }
}

@media (max-width: 640px) {
  .site-header__search { display: none; }
  .site-header__actions { display: none; }
  .site-header__burger { display: flex; }
}


/* Source: ./blocks/filter.css */
/* ==========================================================================
   Block: filter — sidebar filter panel
   BEM: .filter, .filter__*
   ========================================================================== */

.filter {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Active filters row */
.filter__active {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter__active-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter__active-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.filter__reset-all {
  font-size: var(--text-xs);
  color: var(--color-error);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  padding: 0;
  transition: opacity var(--transition-fast);
}

.filter__reset-all:hover {
  opacity: 0.7;
}

.filter__active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Accordion section */
.filter__section {
  border-bottom: 1px solid var(--color-border);
}

.filter__section:last-child {
  border-bottom: none;
}

.filter__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-primary);
  text-align: left;
  transition: background-color var(--transition-fast);
}

.filter__trigger:hover {
  background-color: var(--color-bg-tertiary);
}

.filter__trigger-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.filter__trigger-chevron {
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.filter__trigger[aria-expanded="true"] .filter__trigger-chevron {
  transform: rotate(180deg);
}

/* Section body */
.filter__body {
  padding: var(--space-3) var(--space-4);
}

/* Duty Point fields */
.filter__field {
  margin-bottom: var(--space-3);
}

.filter__field:last-child {
  margin-bottom: 0;
}

.filter__field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.filter__input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter__input::placeholder {
  color: var(--color-text-muted);
}

.filter__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* Run button wrapper */
.filter__run {
  padding: var(--space-2) var(--space-4) var(--space-4);
}

/* Checkbox/radio options */
.filter__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.filter__option input[type="checkbox"],
.filter__option input[type="radio"] {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  accent-color: var(--color-accent-primary);
  flex-shrink: 0;
}

.filter__option-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex: 1;
}

.filter__option-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Price range inputs */
.filter__price-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter__price-sep {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.filter__price-input {
  flex: 1;
  height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  width: 0;
}

.filter__price-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

/* Show more */
.filter__show-more {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-accent-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  padding: 0;
}

.filter__show-more:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Trigger title with icon (Duty Point style)
-------------------------------------------------------------------------- */
.filter__trigger-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.filter__trigger-icon {
  color: var(--color-accent-primary);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Two-column grid inside filter body
-------------------------------------------------------------------------- */
.filter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  align-items: end;
}

.filter__grid > .filter__field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Select
-------------------------------------------------------------------------- */
.filter__select {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  cursor: pointer;
}

.filter__select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* --------------------------------------------------------------------------
   Fluid Data nested sub-section
-------------------------------------------------------------------------- */
.filter__sub-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.filter__sub-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-primary);
  padding: 0;
  margin-bottom: var(--space-3);
}

.filter__sub-trigger-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent-primary);
}

.filter__sub-trigger[aria-expanded="true"] .filter__trigger-chevron {
  transform: rotate(180deg);
}

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

/* --------------------------------------------------------------------------
   Chip toggle grid (Drive-style)
-------------------------------------------------------------------------- */
.filter__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.filter__chip {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.filter__chip:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.filter__chip[aria-pressed="true"] {
  border-color: var(--color-accent-primary);
  background: var(--color-accent-light);
  color: var(--color-accent-primary);
  font-weight: var(--fw-medium);
}


/* Source: ./blocks/toolbar.css */
/* ==========================================================================
   Block: toolbar — catalog toolbar (search, sort, view toggle)
   BEM: .toolbar, .toolbar__*
   ========================================================================== */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Top row */
.toolbar__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Search */
.toolbar__search {
  flex: 1;
  min-width: 180px;
  position: relative;
}

.toolbar__search-input {
  width: 100%;
  height: 38px;
  padding: 0 var(--space-4) 0 36px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.toolbar__search-input::placeholder {
  color: var(--color-text-muted);
}

.toolbar__search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.toolbar__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
}

/* Sort select */
.toolbar__sort {
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  cursor: pointer;
  min-width: 150px;
}

.toolbar__sort:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

/* Right group */
.toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* View toggle */
.toolbar__view-toggle {
  display: flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  overflow: hidden;
}

.toolbar__view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: var(--color-bg-primary);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-right: 1px solid var(--color-border);
}

.toolbar__view-btn:last-child {
  border-right: none;
}

.toolbar__view-btn.is-active {
  background-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.toolbar__view-btn:hover:not(.is-active) {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

/* Bottom row */
.toolbar__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.toolbar__results {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.toolbar__results strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

.toolbar__per-page {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.toolbar__per-page select {
  height: 30px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}


/* Source: ./blocks/pagination.css */
/* ==========================================================================
   Block: pagination
   BEM: .pagination, .pagination__*
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-6) 0;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.pagination__btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  text-decoration: none;
}

.pagination__btn.is-active {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.pagination__btn:disabled,
.pagination__btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  user-select: none;
}


/* Source: ./blocks/footer.css */
/* ==========================================================================
   Block: site-footer
   BEM: .site-footer, .site-footer__*
   ========================================================================== */

.site-footer {
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
  padding: var(--space-10) 0 var(--space-6);
  margin-top: auto;
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

@media (max-width: 1024px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Brand column */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.site-footer__logo:hover {
  text-decoration: none;
}

.site-footer__logo-mark {
  width: 30px;
  height: 30px;
  background-color: var(--color-accent-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-weight: var(--fw-bold);
  font-size: 13px;
  flex-shrink: 0;
}

.site-footer__logo-name {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--color-text-inverse);
  line-height: 1;
}

.site-footer__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}

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

.site-footer__contact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__contact:hover {
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* Nav columns */
.site-footer__nav-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-4);
}

.site-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__nav-link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__nav-link:hover {
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* Bottom bar */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-footer__copy {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-4);
}

.site-footer__legal-link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__legal-link:hover {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}


/* Sections */

/* Source: ./sections/hero.css */
/* ==========================================================================
   Section: hero-banner — catalog page hero
   BEM: .hero-banner
   ========================================================================== */

.hero-banner {
  background-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
  text-align: center;
  padding: var(--space-10) var(--space-6);
}

.hero-banner__title {
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-inverse);
  line-height: var(--lh-4xl);
  margin-bottom: var(--space-3);
}

.hero-banner__subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--lh-lg);
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-banner__title {
    font-size: var(--text-2xl);
  }

  .hero-banner__subtitle {
    font-size: var(--text-base);
  }
}


/* Source: ./sections/pump-page.css */
/* ==========================================================================
   Section: pump-page — pump detail page layout
   BEM: .pump-page, .pump-gallery, .pump-info, .pump-tabs
   ========================================================================== */

/* Two-column layout: gallery + info */
.pump-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-8) 0 var(--space-12);
}

/* --------------------------------------------------------------------------
   Gallery
-------------------------------------------------------------------------- */
.pump-gallery {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

@media (max-width: 960px) {
  .pump-page {
    grid-template-columns: 1fr;
  }

  .pump-gallery {
    position: static;
  }
}

.pump-gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.pump-gallery__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
}

.pump-gallery__placeholder svg {
  opacity: 0.3;
}

.pump-gallery__placeholder-label {
  font-size: var(--text-sm);
  opacity: 0.6;
}

.pump-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 16px;
  transition: background-color var(--transition-fast);
}

.pump-gallery__nav:hover {
  background: var(--color-bg-primary);
}

.pump-gallery__nav--prev { left: var(--space-3); }
.pump-gallery__nav--next { right: var(--space-3); }

.pump-gallery__angle-hint {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--space-2);
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--color-text-muted);
}

.pump-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
  display: block;
}

.pump-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pump-gallery__thumb {
  width: 72px;
  height: 72px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  transition: border-color var(--transition-fast);
  overflow: hidden;
  flex-shrink: 0;
}

.pump-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}

.pump-gallery__thumb.is-active,
.pump-gallery__thumb:hover {
  border-color: var(--color-accent-primary);
}


/* --------------------------------------------------------------------------
   Info block
-------------------------------------------------------------------------- */
.pump-info__breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.pump-info__breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.pump-info__breadcrumb:hover {
  color: var(--color-accent-primary);
  text-decoration: none;
}

.pump-info__breadcrumb--current {
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

.pump-info__breadcrumb-sep {
  color: var(--color-border-strong);
  font-size: var(--text-xs);
}

.pump-info__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.pump-info__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pump-info__brand-name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

.pump-info__flag {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

.pump-info__title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

@media (max-width: 640px) {
  .pump-info__title {
    font-size: var(--text-xl);
  }
}

.pump-info__series {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Specs table */
.pump-info__specs {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.pump-info__specs-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.pump-info__spec-row {
  display: flex;
  align-items: baseline;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  gap: var(--space-4);
}

.pump-info__spec-row:last-child {
  border-bottom: none;
}

.pump-info__spec-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 150px;
  flex-shrink: 0;
}

.pump-info__spec-value {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

/* Industries */
.pump-info__industries {
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.pump-info__industries-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-3);
}

.pump-info__industries-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pump-info__industry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: default;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pump-info__industry:hover {
  background: var(--color-accent-light);
  color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.pump-info__industry svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Price block */
.pump-info__price-block {
  margin-bottom: var(--space-4);
}

.pump-info__price-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.pump-info__price {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent-primary);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.pump-info__delivery {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* CTA actions */
.pump-info__actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.pump-info__secondary-actions {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.pump-info__action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  padding: 0;
  transition: color var(--transition-fast);
}

.pump-info__action-btn:hover {
  color: var(--color-accent-primary);
}

/* --------------------------------------------------------------------------
   Tabs
-------------------------------------------------------------------------- */
.pump-tabs {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-12);
}

.pump-tabs__nav {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pump-tabs__tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  font-family: var(--font-primary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pump-tabs__tab:hover {
  color: var(--color-text-primary);
}

.pump-tabs__tab[aria-selected="true"] {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}

.pump-tabs__panel {
  display: none;
}

.pump-tabs__panel.is-active {
  display: block;
}

.pump-tabs__content {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
  max-width: 720px;
}

.pump-tabs__content p {
  margin-bottom: var(--space-4);
}

/* Technical description content from the pump editor */
.pump-tabs__content h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.pump-tabs__content h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.pump-tabs__content h2:first-child,
.pump-tabs__content h3:first-child {
  margin-top: 0;
}

.pump-tabs__content ul,
.pump-tabs__content ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
  list-style-position: outside;
}

.pump-tabs__content ul,
.pump-tabs__content ul li {
  list-style-type: disc;
}

.pump-tabs__content ol,
.pump-tabs__content ol li {
  list-style-type: decimal;
}

.pump-tabs__content p:last-child,
.pump-tabs__content ul:last-child,
.pump-tabs__content ol:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .pump-tabs__content h2 {
    margin-top: var(--space-6);
    font-size: var(--text-lg);
    line-height: var(--lh-lg);
  }

  .pump-tabs__content h3 {
    margin-top: var(--space-5);
    font-size: var(--text-base);
    line-height: var(--lh-base);
  }

  .pump-tabs__content ul,
  .pump-tabs__content ol {
    padding-left: var(--space-5);
  }
}

/* Documents list */
.pump-docs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pump-doc {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.pump-doc:hover {
  border-color: var(--color-accent-primary);
  background-color: var(--color-accent-light);
  text-decoration: none;
  color: var(--color-accent-primary);
}

.pump-doc__icon {
  color: var(--color-error);
  flex-shrink: 0;
}

.pump-doc__info {
  flex: 1;
}

.pump-doc__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: inherit;
}

.pump-doc__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.pump-doc__download {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Tab badge (review count) */
.pump-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-accent-primary);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  vertical-align: middle;
  margin-left: 4px;
}

/* Industries grid */
.pump-industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}

.pump-industry-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}

.pump-industry-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pump-industry-item__icon svg {
  width: 20px;
  height: 20px;
}

.pump-industry-item__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

/* Reviews */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.reviews-summary__score {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.reviews-summary__stars {
  display: inline-flex;
  gap: 2px;
  font-size: 18px;
}

.reviews-summary__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.review-item {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.review-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.review-item__author {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.review-item__stars {
  display: inline-flex;
  gap: 1px;
  font-size: 14px;
}

.review-item__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

.review-item__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.review-item__body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.reviews-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.reviews-auth-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: default;
}

/* --------------------------------------------------------------------------
   Downloads section
-------------------------------------------------------------------------- */
.pump-downloads {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.pump-downloads__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.pump-downloads__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pump-downloads__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.pump-downloads__link:hover {
  border-color: var(--color-accent-primary);
  background-color: var(--color-accent-light);
  color: var(--color-accent-primary);
}

.pump-downloads__icon {
  color: var(--color-error);
  flex-shrink: 0;
  display: flex;
}

.pump-downloads__name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.pump-downloads__type {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.pump-downloads__arrow {
  color: var(--color-text-muted);
  flex-shrink: 0;
  display: flex;
}

/* --------------------------------------------------------------------------
   Review form (inside pump reviews tab and dealer page)
-------------------------------------------------------------------------- */
.review-form-wrap {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.review-form__heading {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 480px;
}

.review-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-form__label {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

.review-form__optional {
  color: var(--color-text-muted);
  font-weight: var(--fw-regular, 400);
  opacity: 0.7;
}

.review-form__select,
.review-form__input,
.review-form__textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg);
  transition: border-color 0.15s;
}

.review-form__select:focus,
.review-form__input:focus,
.review-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.review-form__textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
}

/* Flash messages in public pages */
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.flash--success {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.flash--error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* --------------------------------------------------------------------------
   Review replies
-------------------------------------------------------------------------- */
.review-replies {
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.review-reply {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary, #f9f9f9);
  border-radius: var(--radius-sm);
}

.review-reply__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.review-reply__author {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.review-reply__role {
  font-size: 11px;
  font-weight: var(--fw-medium);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-reply__role--seller {
  background: #dcfce7;
  color: #15803d;
}

.review-reply__role--buyer {
  background: #e0f2fe;
  color: #0369a1;
}

.review-reply__company {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.review-reply__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

.review-reply__body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.review-reply-form {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 480px;
}

.review-reply-form__input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg);
  resize: vertical;
  line-height: 1.5;
  transition: border-color 0.15s;
}

.review-reply-form__input:focus {
  outline: none;
  border-color: var(--color-primary);
}


/* Source: ./sections/compare.css */
/* ==========================================================================
   Section: compare — сравнение насосов
   ========================================================================== */

.compare-page {
  padding: var(--space-6) var(--space-6) var(--space-12);
}

/* Scrollable wrapper (горизонтальный скролл на узких экранах) */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
}

/* --------------------------------------------------------------------------
   Table
-------------------------------------------------------------------------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 720px;
}

/* Header cells — no sticky (pump cards are too tall, rows get buried) */
.compare-table__head tr th {
  position: relative;
  z-index: 1;
}

/* Corner cell (верхний левый угол) */
.compare-table__corner {
  width: 180px;
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  vertical-align: bottom;
  text-align: left;
}

.compare-table__corner-meta {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Pump header cells */
.compare-table__pump-head {
  padding: var(--space-5) var(--space-4) var(--space-6);
  background: var(--color-bg-primary);
  border-left: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  vertical-align: top;
  text-align: center;
}

.compare-table__pump-head--empty {
  background: var(--color-bg-secondary);
}

/* --------------------------------------------------------------------------
   Pump column header card
-------------------------------------------------------------------------- */
.compare-pump {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  padding-top: var(--space-4);
}

.compare-pump__remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-primary);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.compare-pump__remove:hover {
  background: #FEF2F2;
  color: var(--color-error);
  border-color: var(--color-error);
}

.compare-pump__image {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.compare-pump__name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.3;
  margin: 0;
}

.compare-pump__series {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.compare-pump__brand {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: center;
}

.compare-pump__brand-logo {
  height: 20px;
  max-width: 80px;
  object-fit: contain;
}

.compare-pump__price {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent-primary);
  margin: var(--space-1) 0 0;
}

.compare-pump__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-1);
}

/* Empty slot */
.compare-pump--empty {
  justify-content: center;
  align-items: center;
  min-height: 220px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-6);
  gap: var(--space-3);
  transition: border-color var(--transition-fast), color var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
  background: none;
  font-family: var(--font-primary);
}

.compare-pump--empty:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.compare-pump--empty__icon {
  width: 40px;
  height: 40px;
  border: 2px dashed currentColor;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-pump--empty__text {
  font-size: var(--text-sm);
  text-align: center;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Table body rows
-------------------------------------------------------------------------- */

/* Group / section header row */
.compare-table__group td {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Spec label cell */
.compare-table__spec {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
  text-align: left;
}

/* Value cell */
.compare-table__value {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-align: center;
  border-left: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-primary);
}

.compare-table__value--na {
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
}

/* Best value highlight */
.compare-table__value--best {
  color: var(--color-accent-primary);
  font-weight: var(--fw-semibold);
  background: var(--color-accent-light);
}

.compare-best {
  display: inline-block;
  font-size: 9px;
  background: var(--color-accent-primary);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 1px 5px;
  margin-left: var(--space-1);
  letter-spacing: 0;
  vertical-align: middle;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}


/* Source: ./sections/wishlist.css */
/* ==========================================================================
   Section: wishlist — список сохранённых насосов
   ========================================================================== */

.wishlist-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-12);
}

/* --------------------------------------------------------------------------
   Toolbar
-------------------------------------------------------------------------- */
.wishlist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.wishlist-count {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.wishlist-count strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

.wishlist-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.wishlist-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Grid (3 колонки без сайдбара)
-------------------------------------------------------------------------- */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

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

@media (max-width: 600px) {
  .wishlist-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Empty state
-------------------------------------------------------------------------- */
.wishlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.wishlist-empty__icon {
  color: var(--color-border);
}

.wishlist-empty__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.wishlist-empty__text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 360px;
  margin: 0;
}


/* Source: ./sections/admin.css */
/* ==========================================================================
   Section: admin — панель администратора
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout
-------------------------------------------------------------------------- */
.admin-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Sidebar
-------------------------------------------------------------------------- */
.admin-sidebar {
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}

.admin-sidebar__logo-mark {
  width: 32px;
  height: 32px;
  background: var(--color-accent-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.admin-sidebar__logo-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
  display: block;
}

.admin-sidebar__logo-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
}

.admin-nav {
  padding: var(--space-4) var(--space-3);
  flex: 1;
}

.admin-nav__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
  display: block;
}

.admin-nav__label:first-child {
  margin-top: 0;
}

.admin-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.admin-nav__link:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.admin-nav__link.is-active {
  background: var(--color-accent-light);
  color: var(--color-accent-primary);
  font-weight: var(--fw-semibold);
}

.admin-nav__icon {
  flex-shrink: 0;
  color: inherit;
}

.admin-nav__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
}

.admin-nav__badge {
  margin-left: auto;
  background: var(--color-error);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.admin-sidebar__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.admin-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin-sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-accent-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.admin-sidebar__user-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-sidebar__user-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
}

.admin-sidebar__user-info {
  flex: 1;
  min-width: 0;
}

.admin-sidebar__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.admin-sidebar__logout:hover {
  color: var(--color-error);
  background: var(--color-bg-primary);
}

/* --------------------------------------------------------------------------
   Main area
-------------------------------------------------------------------------- */
.admin-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg-primary);
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  height: 56px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  flex-shrink: 0;
}


.admin-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin-content {
  padding: var(--space-7) var(--space-8);
  flex: 1;
}

.admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  padding: 0 var(--space-4);
}

.admin-page-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: var(--space-4) 0 0;
}

.admin-page-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

/* --------------------------------------------------------------------------
   Stat cards
-------------------------------------------------------------------------- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);

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

.admin-stats--6 {
  grid-template-columns: repeat(6, 1fr);

  @media (max-width: 1200px) { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 700px)  { grid-template-columns: repeat(2, 1fr); }
}

.admin-stat {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.admin-stat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.admin-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

.admin-stat__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-stat__icon--blue   { background: var(--color-accent-light); color: var(--color-accent-primary); }
.admin-stat__icon--green  { background: #D1FAE5; color: #059669; }
.admin-stat__icon--orange { background: #FEF3C7; color: #D97706; }
.admin-stat__icon--red    { background: #FEE2E2; color: #DC2626; }

.admin-stat__value {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.admin-stat__value--sm {
  font-size: var(--text-lg);
  line-height: 1.3;
  word-break: break-word;
}

.admin-stat__delta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.admin-stat__delta--up   { color: #059669; }
.admin-stat__delta--down { color: #DC2626; }

/* --------------------------------------------------------------------------
   Section card
-------------------------------------------------------------------------- */
.admin-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: clip;
  margin-bottom: var(--space-6);
}

.admin-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.admin-section__title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Empty state
-------------------------------------------------------------------------- */
.admin-empty {
  padding: var(--space-8) var(--space-6);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Toolbar
-------------------------------------------------------------------------- */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.admin-toolbar__search {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.admin-toolbar__search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.admin-toolbar__search-input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3) 0 calc(var(--space-3) + 22px);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-sizing: border-box;
}

.admin-toolbar__search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.admin-toolbar__select {
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Data table
-------------------------------------------------------------------------- */
.admin-table-wrap {
  overflow-x: auto;
  overflow-y: clip;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.admin-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.admin-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover td {
  background: var(--color-bg-secondary);
}

.admin-table__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-table__name {
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.admin-table__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.admin-table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.admin-table__btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.admin-table__btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.admin-table__btn--danger:hover {
  border-color: var(--color-error);
  color: var(--color-error);
  background: #FEF2F2;
}

.admin-table__filter-row th {
  padding: var(--space-2) var(--space-2);
  background: var(--color-bg-primary);
  border-bottom: 2px solid var(--color-border);
}

.admin-table__filter-input,
.admin-table__filter-select {
  width: 100%;
  height: 30px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}

.admin-table__filter-input:focus,
.admin-table__filter-select:focus {
  border-color: var(--color-accent-primary);
}

.admin-table__filter-input::placeholder {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Status badges
-------------------------------------------------------------------------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.status-badge--active   { background: #D1FAE5; color: #065F46; }
.status-badge--draft    { background: var(--color-bg-secondary); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.status-badge--new      { background: #DBEAFE; color: #1D4ED8; }
.status-badge--progress { background: #FEF3C7; color: #92400E; }
.status-badge--closed   { background: #F3F4F6; color: #6B7280; }

/* --------------------------------------------------------------------------
   Pagination
-------------------------------------------------------------------------- */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.admin-pagination__info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.admin-pagination__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.admin-pagination__btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.admin-pagination__btn:hover:not(:disabled) {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.admin-pagination__btn.is-active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #fff;
}

.admin-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Form
-------------------------------------------------------------------------- */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.admin-form-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.admin-form-section__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.admin-form-section__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.admin-form-section__body {
  padding: var(--space-5) var(--space-6);
}

.admin-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);

  @media (max-width: 768px) { grid-template-columns: 1fr; }
}

.admin-form__grid--3 {
  grid-template-columns: 1fr 1fr 1fr;

  @media (max-width: 900px) { grid-template-columns: 1fr 1fr; }
  @media (max-width: 600px) { grid-template-columns: 1fr; }
}

.admin-form__grid--mt {
  margin-top: var(--space-6);
}

.admin-form__inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  margin-top: var(--space-4);
}

.admin-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-form__field--full { grid-column: 1 / -1; }

.admin-form__field--error .admin-form__input,
.admin-form__field--error .admin-form__select,
.admin-form__field--error .admin-form__textarea {
  border-color: var(--color-error);
}

.admin-form__error {
  font-size: var(--text-xs);
  color: var(--color-error);
}

.admin-form__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.admin-form__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}

.admin-form__label--req::after {
  content: ' *';
  color: var(--color-error);
}

.admin-form__input,
.admin-form__select,
.admin-form__textarea {
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-form__textarea {
  height: auto;
  padding: var(--space-3);
  resize: vertical;
  min-height: 100px;
}

.admin-form__input:focus,
.admin-form__select:focus,
.admin-form__textarea:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.admin-form__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.admin-form__range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-form__range-sep {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.admin-form__checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.admin-form__checkboxes--3col {
  grid-template-columns: 1fr 1fr 1fr;
}

.admin-form__checkboxes--tab-panel {
  padding: var(--space-4) 0;
}

.admin-form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.admin-form__checkbox input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-accent-primary);
  flex-shrink: 0;
}

.admin-form__checkbox--standalone {
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.admin-form__checkbox-icon {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
  color: var(--color-accent-primary);
  flex-shrink: 0;
}

.admin-form__checkbox-icon svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   Checkdrop — checkbox dropdown
-------------------------------------------------------------------------- */
.checkdrop {
  position: relative;
}

.checkdrop__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast);
}

.checkdrop__toggle:hover,
.checkdrop__toggle:focus {
  border-color: var(--color-accent-primary);
  outline: none;
}

.checkdrop__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.checkdrop[data-open] .checkdrop__chevron {
  transform: rotate(180deg);
}

[data-checkdrop-label] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkdrop__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  padding: var(--space-1) 0;
}

.checkdrop__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.checkdrop__item:hover {
  background: var(--color-bg-secondary);
}

.checkdrop__item input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-accent-primary);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Image upload
-------------------------------------------------------------------------- */
.admin-upload {
  display: block; /* label is inline by default — override */
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.admin-upload.is-dragover {
  border-color: var(--color-accent-primary);
  background: var(--color-accent-light);
}

.admin-upload:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-accent-light);
}

.admin-upload__icon { display: block; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.admin-upload__text { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-1); }
.admin-upload__hint { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }

.admin-images {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.admin-image-item {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}

.admin-image-item.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.admin-image-item__handle {
  position: absolute;
  bottom: 4px;
  left: 4px;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.admin-image-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-2);
}

.admin-image-item__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-image-item__cover-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--color-accent-primary);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Dashboard inquiry list
-------------------------------------------------------------------------- */
.inquiry-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.inquiry-item:last-child { border-bottom: none; }

.inquiry-item__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent-primary);
  margin-top: 5px;
  flex-shrink: 0;
}

.inquiry-item__dot--read { background: var(--color-border-strong); }

.inquiry-item__body { flex: 1; min-width: 0; }

.inquiry-item__from {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.inquiry-item__pump {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.inquiry-item__time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Login page
-------------------------------------------------------------------------- */
.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  padding: var(--space-6);
}

.admin-login__card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  width: 100%;
  max-width: 400px;
}

.admin-login__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  text-decoration: none;
}

.admin-login__logo-mark {
  width: 40px;
  height: 40px;
  background: var(--color-accent-primary);
  color: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.admin-login__logo-name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  display: block;
}

.admin-login__logo-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
}

.admin-login__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.admin-login__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}

.admin-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-login__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-login__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}

.admin-login__input {
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-sizing: border-box;
  width: 100%;
}

.admin-login__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* --------------------------------------------------------------------------
   Admin editor tabs (Technical data / Applications)
-------------------------------------------------------------------------- */
.admin-editor-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: var(--space-4);
  width: fit-content;
}

.admin-editor-tabs__tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs, 4px);
  cursor: pointer;
  font-family: var(--font-primary);
  transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-editor-tabs__tab:hover {
  color: var(--color-text-primary);
  background: rgba(255,255,255,0.6);
}

.admin-editor-tabs__tab[aria-selected="true"] {
  background: var(--color-bg-primary);
  color: var(--color-accent-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.admin-editor-holder {
  min-height: 200px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--color-bg-primary);
}

.admin-editor-holder .codex-editor__redactor {
  padding-bottom: var(--space-4);
  margin: 0 !important;
}

.admin-editor-holder .ce-block__content {
  max-width: 100%;
  margin: 0;
}

.admin-editor-holder .codex-editor {
  padding: 0;
}

/* Alert messages */
.admin-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
}

.admin-alert--success {
  background: #D1FAE5;
  color: #065F46;
}

.admin-alert--error {
  background: #FEE2E2;
  color: #991B1B;
}

/* Logo preview */
.admin-logo-preview {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  width: fit-content;
}

.admin-logo-preview__img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 4px;
  border: 1px solid var(--color-border-light);
}

/* Document list item */
.admin-document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  margin-bottom: var(--space-2);
}

.admin-document-item__info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--color-text-primary);
}

.admin-document-item__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-document-item__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.admin-document-item__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Badges
-------------------------------------------------------------------------- */
.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.admin-badge--gray   { background: var(--color-border); color: var(--color-text-secondary); }
.admin-badge--blue   { background: #dbeafe; color: #1d4ed8; }
.admin-badge--green  { background: #dcfce7; color: #15803d; }
.admin-badge--orange { background: #ffedd5; color: #c2410c; }

/* --------------------------------------------------------------------------
   Section title (reviews list heading)
-------------------------------------------------------------------------- */
.admin-section-title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}

/* --------------------------------------------------------------------------
   Reviews stats — new classes
-------------------------------------------------------------------------- */
.admin-badge--xs {
  font-size: 10px;
  padding: 1px 5px;
  margin-left: var(--space-1);
  vertical-align: middle;
}

.admin-section__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

.admin-section__link {
  font-size: var(--text-xs);
  color: var(--color-accent-primary);
  text-decoration: none;
}
.admin-section__link:hover { text-decoration: underline; }

.admin-table__link {
  color: var(--color-accent-primary);
  text-decoration: none;
}
.admin-table__link:hover { text-decoration: underline; }

.admin-table__muted {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.admin-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-table__excerpt {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.admin-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.review-stars {
  color: #f59e0b;
  letter-spacing: 1px;
  font-size: var(--text-sm);
}

.review-dist {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  height: 140px;
  padding-bottom: 0;
}

.review-dist__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  height: 100%;
}

.review-dist__val {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.review-dist__track {
  flex: 1;
  width: 100%;
  background: var(--color-border);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.review-dist__fill {
  width: 100%;
  background: #f59e0b;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.review-dist__star {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.review-dist__pct {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Page header filter row
-------------------------------------------------------------------------- */
.admin-page-header__filters {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* Sortable column header */
.admin-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.admin-table__sort::after {
  content: '↕';
  opacity: 0.4;
}

.admin-table th[aria-sort="ascending"] .admin-table__sort::after {
  content: '▲';
  opacity: 1;
}

.admin-table th[aria-sort="descending"] .admin-table__sort::after {
  content: '▼';
  opacity: 1;
}

/* Pump image grid: make-cover button (the first item is the cover and shows a badge instead) */
.admin-image-item__cover-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-image-item__cover-btn:hover {
  background: var(--color-accent-primary);
}

.admin-image-item:first-child .admin-image-item__cover-btn {
  display: none;
}


/* Source: ./sections/admin-article.css */
/* ==========================================================================
   Section: admin-article — форма SEO-статьи в админке
   BEM: .admin-cover-preview, .admin-form__counter, .seo-snippet, .admin-article-table
   ========================================================================== */

.admin-article-filter {
  margin-bottom: var(--space-4);
}

.admin-article-table__cover-col {
  width: 56px;
}

.admin-article-table__actions-col {
  width: 180px;
}

.admin-article-table__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Cover preview */
.admin-cover-preview {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.admin-cover-preview__img {
  width: 240px;
  height: 135px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-primary);
}

.admin-form__input--file {
  height: auto;
  padding: var(--space-2) var(--space-3);
}

/* Character counter (создаётся article-seo.js) */
.admin-form__counter {
  align-self: flex-end;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.admin-form__counter--over {
  color: var(--color-error);
  font-weight: var(--fw-semibold);
}

/* Search snippet preview */
.seo-snippet {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 600px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  font-family: Arial, sans-serif;
}

.seo-snippet__url {
  font-size: 14px;
  color: #4D5156;
  overflow-wrap: anywhere;
}

.seo-snippet__title {
  font-size: 20px;
  line-height: 1.3;
  color: #1A0DAB;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-snippet__desc {
  font-size: 14px;
  line-height: 1.58;
  color: #4D5156;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-article-table__title {
  min-width: 220px;
}

.admin-article-table__url {
  overflow-wrap: anywhere;
}

/* Блок Image в Editor.js (editor-image-tool.js) */
.editor-image {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.editor-image__picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  cursor: pointer;
}

.editor-image__picker-text,
.editor-image__status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.editor-image__error {
  font-size: var(--text-sm);
  color: var(--color-error);
}

.editor-image__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-image);
  border: 1px solid var(--color-border-light);
}

.editor-image__field {
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
}

.editor-image__field:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.editor-image__field--invalid {
  border-color: var(--color-error);
}

/* Место под тулбар Editor.js (+ и ⠿): иначе он уходит за край секции с overflow: hidden */
.admin-editor-holder--article {
  padding-left: 64px;
}


/* Source: ./sections/auth.css */
/* ==========================================================================
   Section: auth — login and register pages (standalone, no site header)
   ========================================================================== */

.auth-page {
  margin: 0;
  padding: 0;
  background: var(--color-bg-secondary);
}

/* --------------------------------------------------------------------------
   Two-column layout
-------------------------------------------------------------------------- */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Left panel — brand + pitch
-------------------------------------------------------------------------- */
.auth-layout__panel {
  background: var(--color-accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.auth-layout__panel-inner {
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.auth-brand__mark {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.auth-brand__name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.auth-brand__tagline {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-layout__pitch-text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 24px;
}

.auth-layout__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-layout__features li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.auth-layout__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Right panel — form side
-------------------------------------------------------------------------- */
.auth-layout__form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--color-bg-secondary);
}

/* --------------------------------------------------------------------------
   Form card
-------------------------------------------------------------------------- */
.auth-form-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.auth-form-card__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.auth-form-card__sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

.auth-form-card__alert {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.auth-form-card__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form-card__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-form-card__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.auth-form-card__input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 16px;
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.auth-form-card__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(26, 79, 168, 0.12);
}

.auth-form-card__field--error .auth-form-card__input {
  border-color: #ef4444;
}

.auth-form-card__field--error .auth-form-card__input:focus {
  box-shadow: 0 0 0 3px #fef2f2;
}

.auth-form-card__error {
  font-size: 11px;
  color: #ef4444;
  line-height: 1.4;
}

.auth-form-card__submit {
  width: 100%;
  height: 42px;
  margin-top: 4px;
  font-size: 16px;
}

.auth-form-card__switch {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

.auth-form-card__switch a {
  color: var(--color-accent-primary);
  font-weight: 500;
  text-decoration: none;
}

.auth-form-card__switch a:hover {
  text-decoration: underline;
}

.auth-form-card__back {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.auth-form-card__back:hover {
  color: var(--color-accent-primary);
}

/* --------------------------------------------------------------------------
   Mobile
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-layout__panel {
    display: none;
  }

  .auth-layout__form-side {
    padding: 32px 16px;
    background: var(--color-bg-primary);
  }

  .auth-form-card {
    border: none;
    box-shadow: none;
    padding: 16px 0;
  }
}


/* Source: ./sections/account.css */
/* ==========================================================================
   Section: account — personal cabinet pages
   ========================================================================== */

.account-page {
  background: var(--color-bg-secondary);
  min-height: calc(100vh - var(--header-height));
}

/* --------------------------------------------------------------------------
   Layout
-------------------------------------------------------------------------- */
.account-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Sidebar
-------------------------------------------------------------------------- */
.account-sidebar {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.account-sidebar__user {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.account-sidebar__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: #fff;
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}

.account-sidebar__name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: 2px;
  word-break: break-word;
}

.account-sidebar__email {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Sidebar nav
-------------------------------------------------------------------------- */
.account-nav {
  padding: var(--space-2) 0;
}

.account-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.account-nav__item svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.account-nav__item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.account-nav__item:hover svg {
  color: var(--color-accent-primary);
}

.account-nav__item--active {
  color: var(--color-accent-primary);
  background: var(--color-accent-light);
}

.account-nav__item--active svg {
  color: var(--color-accent-primary);
}

.account-nav__divider {
  height: 1px;
  background: var(--color-border-light);
  margin: var(--space-2) 0;
}

.account-nav__item--logout {
  color: var(--color-error);
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  text-align: left;
}

.account-nav__item--logout:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.account-nav__item--logout:hover svg {
  color: var(--color-error);
}

/* --------------------------------------------------------------------------
   Content area
-------------------------------------------------------------------------- */
.account-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.account-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.account-card__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

/* --------------------------------------------------------------------------
   Profile info rows
-------------------------------------------------------------------------- */
.account-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.account-info__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.account-info__row:last-child {
  border-bottom: none;
}

.account-info__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

.account-info__value {
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Password form
-------------------------------------------------------------------------- */
.account-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 400px;
}

.account-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-form__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}

.account-form__input {
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.account-form__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.account-form__input--error {
  border-color: var(--color-error);
}

.account-form__error {
  font-size: var(--text-xs);
  color: var(--color-error);
}

.account-form__optional {
  color: var(--color-text-muted);
  font-weight: 400;
}

.account-form__field--static {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.account-form__static {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.account-form__submit {
  align-self: flex-start;
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   Flash message
-------------------------------------------------------------------------- */
.account-flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  color: #166534;
}

.account-flash--error {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: #991b1b;
}

/* --------------------------------------------------------------------------
   Inquiries table
-------------------------------------------------------------------------- */
.account-inquiries {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.account-inquiries th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  border-bottom: 1px solid var(--color-border);
}

.account-inquiries td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  vertical-align: middle;
}

.account-inquiries tr:last-child td {
  border-bottom: none;
}

.account-inquiries__pump {
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
}

.account-inquiries__brand {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Wishlist grid
-------------------------------------------------------------------------- */
.account-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.account-wishlist-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.account-wishlist-card:hover {
  box-shadow: var(--shadow-md);
}

.account-wishlist-card__image {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-tertiary);
  overflow: hidden;
}

.account-wishlist-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
}

.account-wishlist-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.account-wishlist-card__body {
  padding: var(--space-3) var(--space-4);
}

.account-wishlist-card__brand {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.account-wishlist-card__name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.account-wishlist-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.account-wishlist-card__actions {
  display: flex;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   Empty state
-------------------------------------------------------------------------- */
.account-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
}

.account-empty__icon {
  font-size: 40px;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.account-empty__title {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.account-empty__text {
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

/* --------------------------------------------------------------------------
   Mobile
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .account-layout {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }

  .account-wishlist-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .account-wishlist-grid {
    grid-template-columns: 1fr;
  }
}


/* Source: ./sections/brands.css */
/* ==========================================================================
   Section: brands-index — alphabetical brand directory
   BEM: .brands-index, .brands-alpha, .brands-group
   ========================================================================== */

.brands-index {
  padding: var(--space-10) 0 var(--space-16);
}

.brands-index__title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}

.brands-index__empty {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Alphabet nav
-------------------------------------------------------------------------- */
.brands-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-6);
}

.brands-alpha__letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: default;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.brands-alpha__letter--active {
  color: var(--color-accent-primary);
  cursor: pointer;
}

.brands-alpha__letter--active:hover {
  background-color: var(--color-accent-light);
  text-decoration: none;
  color: var(--color-accent-primary);
}

/* --------------------------------------------------------------------------
   Brand groups
-------------------------------------------------------------------------- */
.brands-group {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 var(--space-8);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-light);
  align-items: start;
}

.brands-group__letter {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1;
  padding-top: 2px;
}

.brands-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 4;
  column-gap: var(--space-6);
}

.brands-group__item {
  break-inside: avoid;
}

.brands-group__link {
  display: inline-block;
  padding: var(--space-1) 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.brands-group__link:hover {
  color: var(--color-accent-primary);
  text-decoration: none;
}

@media (max-width: 900px) {
  .brands-group__list {
    column-count: 3;
  }
}

@media (max-width: 640px) {
  .brands-group {
    grid-template-columns: 36px 1fr;
    gap: 0 var(--space-4);
  }

  .brands-group__list {
    column-count: 2;
  }
}

@media (max-width: 400px) {
  .brands-group__list {
    column-count: 1;
  }
}

/* ==========================================================================
   Brand detail page — /brand/{id}
   BEM: .brand-hero, .brand-stats, .brand-profile, .brand-chart,
        .brand-industries, .brand-acquisitions, .brand-catalog
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: logo + identity
-------------------------------------------------------------------------- */
.brand-hero {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  padding: var(--space-5) 0 var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.brand-hero__logo-col {
  flex-shrink: 0;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.brand-hero__logo-img {
  max-width: 160px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.brand-hero__logo-fallback {
  width: 80px;
  height: 80px;
  background-color: var(--color-accent-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
}

.brand-hero__identity {
  flex: 1;
  min-width: 0;
}

.brand-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.brand-hero__breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.brand-hero__breadcrumb a:hover {
  color: var(--color-accent-primary);
  text-decoration: none;
}

.brand-hero__name {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}

.brand-hero__identity-logo {
  display: block;
  max-height: 72px;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: var(--space-2);
}

.brand-hero__tagline {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-4);
}

.brand-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.brand-hero__meta-sep {
  color: var(--color-border-strong);
}

.brand-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.brand-hero__meta-link {
  color: var(--color-accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.brand-hero__meta-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Stats strip
-------------------------------------------------------------------------- */
.brand-stats {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-8) 0;
}

.brand-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--color-border);
  text-align: center;
}

.brand-stat:last-child {
  border-right: none;
}

.brand-stat__value {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.brand-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   Profile: description + charts
-------------------------------------------------------------------------- */
.brand-profile {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-10);
  align-items: start;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.brand-about {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
  margin-bottom: var(--space-5);
}

.brand-certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.brand-cert {
  display: inline-block;
  padding: 3px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.brand-profile__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.brand-about-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.brand-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.brand-chart {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.brand-chart__header {
  text-align: center;
  margin-bottom: var(--space-3);
}

.brand-chart__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.brand-chart__unit {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Section wrapper
-------------------------------------------------------------------------- */
.brand-section {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.brand-section__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Industries
-------------------------------------------------------------------------- */
.brand-industries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.brand-industry-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.brand-industry-tag__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-accent-primary);
}

.brand-industry-tag__icon svg {
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Acquisitions
-------------------------------------------------------------------------- */
.brand-acquisitions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.brand-acquisition {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.brand-acquisition:last-child {
  border-bottom: none;
}

.brand-acquisition__year {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  min-width: 36px;
  letter-spacing: var(--ls-wide);
  padding-top: 2px;
  flex-shrink: 0;
}

.brand-acquisition__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.brand-acquisition__name {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.brand-acquisition__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.brand-acquisition__sep {
  color: var(--color-border-strong);
}

.brand-acquisition__products {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Portfolio
-------------------------------------------------------------------------- */
.brand-portfolio__summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: var(--lh-base);
}

.brand-portfolio__list {
  margin: 0;
  padding: 0;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.brand-portfolio__item {
  display: inline;
  color: var(--color-accent-primary);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
}

.brand-portfolio__item:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.brand-portfolio__sep {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Catalog section header
-------------------------------------------------------------------------- */
.brand-catalog {
  margin-bottom: var(--space-5);
}

.brand-catalog__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.brand-catalog__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 var(--space-2);
  background: var(--color-accent-light);
  color: var(--color-accent-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   Responsive
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .brand-profile {
    grid-template-columns: 1fr;
  }

  .brand-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .brand-hero {
    flex-direction: column;
    gap: var(--space-5);
    padding-top: var(--space-6);
  }

  .brand-hero__logo-col {
    width: auto;
  }

  .brand-hero__name {
    font-size: var(--text-2xl);
  }

  .brand-stats {
    flex-wrap: wrap;
  }

  .brand-stat {
    flex: 1 0 calc(50% - 1px);
    border-bottom: 1px solid var(--color-border);
  }

  .brand-stat:nth-child(2n) {
    border-right: none;
  }
}


/* Source: ./sections/dealer.css */
/* ==========================================================================
   Section: dealer — публичная страница дилера
   ========================================================================== */

.dealer-page {
  padding: var(--space-8) 0;
}

.dealer-page__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.dealer-page__breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.dealer-page__breadcrumb a:hover {
  color: var(--color-text-primary);
}

.dealer-page__breadcrumb span[aria-hidden] {
  color: var(--color-border);
}

.dealer-page__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.dealer-page__logo {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dealer-page__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dealer-page__logo-fallback {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}

.dealer-page__identity {
  flex: 1;
  min-width: 0;
}

.dealer-page__name {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.dealer-page__brand {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}

.dealer-page__location {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.dealer-page__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dealer-page__rating-score {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.dealer-page__rating-stars {
  font-size: var(--text-base);
  line-height: 1;
}

.dealer-page__rating-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.dealer-page__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dealer-page__contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.dealer-page__contact-link:hover {
  color: var(--color-primary);
}

.dealer-page__reviews {
  margin-top: var(--space-8);
}

.dealer-page__reviews-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-5);
}


/* Source: ./sections/knowledge-base.css */
/* ==========================================================================
   Section: knowledge-base — landing, category listing, article page
   BEM: .kb-landing, .kb-page, .kb-category-card, .kb-article-row, .kb-article
   ========================================================================== */

/* --------------------------------------------------------------------------
   Landing — /knowledge-base
-------------------------------------------------------------------------- */
.kb-landing {
  padding: var(--space-10) 0 var(--space-16);
}

.kb-landing__hero {
  margin-bottom: var(--space-10);
}

.kb-landing__title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.kb-landing__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

.kb-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .kb-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .kb-categories {
    grid-template-columns: 1fr;
  }
}

.kb-category-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.kb-category-card__media {
  display: block;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-secondary);
}

.kb-category-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kb-category-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-primary);
  text-decoration: none;
}

.kb-category-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-accent-light);
  border-radius: var(--radius-lg);
  color: var(--color-accent-primary);
  flex-shrink: 0;
}

.kb-category-card__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.kb-category-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
  flex: 1;
}

.kb-category-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.kb-category-card__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.kb-category-card__arrow {
  color: var(--color-accent-primary);
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Category page — /knowledge-base/{category}
-------------------------------------------------------------------------- */
.kb-page {
  padding: var(--space-8) 0 var(--space-16);
}

.kb-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.kb-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.kb-breadcrumb a:hover {
  color: var(--color-accent-primary);
}

.kb-breadcrumb__sep {
  color: var(--color-border-strong);
}

.kb-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.kb-category-header__copy {
  flex: 1 1 0;
}

.kb-category-header__image {
  display: block;
  width: min(42%, 360px);
  height: auto;
  border-radius: var(--radius-card);
  object-fit: cover;
}

@media (max-width: 600px) {
  .kb-category-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-5);
  }

  .kb-category-header__image {
    width: 100%;
  }
}

.kb-category-header__title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.kb-category-header__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
}

.kb-empty {
  padding: var(--space-10) 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.kb-articles {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kb-article-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

.kb-article-row:first-child {
  border-top: 1px solid var(--color-border-light);
}

.kb-article-row:hover .kb-article-row__title {
  color: var(--color-accent-primary);
}

.kb-article-row__title {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.kb-article-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.kb-article-row__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.kb-article-row__share {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.kb-article-row__arrow {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.kb-article-row:hover .kb-article-row__arrow {
  color: var(--color-accent-primary);
}

/* --------------------------------------------------------------------------
   Article page — /knowledge-base/{category}/{slug}
-------------------------------------------------------------------------- */
.kb-article {
  padding: var(--space-8) 0 var(--space-16);
  max-width: 760px;
}

.kb-article__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.kb-article__title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}

.kb-article__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.kb-article__meta-sep {
  color: var(--color-border-strong);
}

.kb-article__meta a {
  color: var(--color-accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.kb-article__meta a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Rendered Editor.js content
-------------------------------------------------------------------------- */
.kb-article__body {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.kb-article__body h2 {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: var(--space-8) 0 var(--space-3);
}

.kb-article__body h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-2);
}

.kb-article__body h4 {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: var(--space-4) 0 var(--space-2);
}

.kb-article__body p {
  margin: 0 0 var(--space-4);
}

.kb-article__cutaway {
  float: right;
  width: min(44%, 340px);
  margin: 0 0 var(--space-5) var(--space-7);
}

.kb-article__cutaway img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  background: var(--color-bg-secondary);
}

.kb-article__cutaway figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.kb-article__body h2 {
  clear: both;
}

.kb-gear-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-7);
}

.kb-piston-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-7);
}

.kb-gear-gallery__item,
.kb-piston-gallery__item {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-primary);
}

.kb-gear-gallery__item img,
.kb-piston-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}

.kb-gear-gallery__item figcaption,
.kb-piston-gallery__item figcaption {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.kb-gear-gallery__item strong,
.kb-piston-gallery__item strong {
  font-size: var(--text-base);
}

@media (max-width: 600px) {
  .kb-article__cutaway {
    float: none;
    width: 100%;
    margin: 0 0 var(--space-5);
  }

  .kb-gear-gallery {
    grid-template-columns: 1fr;
  }

  .kb-piston-gallery {
    grid-template-columns: 1fr;
  }

  .kb-gear-gallery__item img,
  .kb-piston-gallery__item img {
    max-height: 280px;
  }
}

.kb-article__body ul,
.kb-article__body ol {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kb-article__body li {
  line-height: var(--lh-base);
}

.kb-article__body a {
  color: var(--color-accent-primary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.kb-article__body a:hover {
  color: var(--color-accent-hover);
}

.kb-article__body strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}


/* Source: ./sections/static-page.css */
/* ============================================================
   Static Page — About, For Suppliers, Privacy, Terms, Contact
   ============================================================ */

.static-page {
  max-width: 780px;
  margin: var(--space-12) auto var(--space-20);
}

.static-page__hero {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.static-page__title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
}

.static-page__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-md);
  margin: 0;
}

/* Body prose */

.static-page__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.static-page__section h2 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.static-page__section h3 {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.static-page__section p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
  margin-bottom: var(--space-4);
}

.static-page__section p:last-child {
  margin-bottom: 0;
}

.static-page__section ul,
.static-page__section ol {
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.static-page__section li {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
}

.static-page__section a:not(.btn) {
  color: var(--color-accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.static-page__section a:not(.btn):hover {
  color: var(--color-accent-hover);
}

/* Supplier benefits grid */

.static-page__benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);

  @media (max-width: 540px) {
    grid-template-columns: 1fr;
  }
}

.static-benefit {
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.static-benefit__title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.static-benefit__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
  margin: 0;
}

/* Contact form */

.contact-form {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.contact-form__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);

  @media (max-width: 540px) {
    grid-template-columns: 1fr;
  }
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.contact-form__group:last-child {
  margin-bottom: 0;
}

.contact-form__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}

.contact-form__error {
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

.contact-form__footer {
  margin-top: var(--space-6);
}


/* Source: ./sections/article.css */
/* ==========================================================================
   Section: article — SEO-статьи /articles
   BEM: .articles-page, .article-grid, .article-card, .article-page, .article-figure
   ========================================================================== */

/* --------------------------------------------------------------------------
   List — /articles
-------------------------------------------------------------------------- */
.articles-page {
  padding: var(--space-10) 0 var(--space-16);
}

.articles-page__header {
  max-width: 720px;
  margin-bottom: var(--space-10);
}

.articles-page__title {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.articles-page__lead {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--color-text-secondary);
}

.articles-page__empty {
  padding: var(--space-10) 0;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.articles-page__pagination {
  margin-top: var(--space-10);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8) var(--space-6);

  @media (max-width: 960px) { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 600px) { grid-template-columns: 1fr; }
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.article-card__media {
  display: block;
  aspect-ratio: 1200 / 630;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
}

.article-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-border-strong);
}

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

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article-card__meta-sep {
  color: var(--color-border-strong);
}

.article-card__title {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
}

.article-card__link {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.article-card__link:hover {
  color: var(--color-accent-primary);
}

.article-card__excerpt {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Article — /articles/{slug}
-------------------------------------------------------------------------- */
.article-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-16);
}

.article-page__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article-page__breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.article-page__breadcrumb a:hover {
  color: var(--color-accent-primary);
}

.article-page__breadcrumb-sep {
  color: var(--color-border-strong);
}

.article-page__header {
  margin-bottom: var(--space-8);
}

.article-page__title {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);

  @media (max-width: 600px) { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
}

.article-page__lead {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.article-page__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article-page__meta-sep {
  color: var(--color-border-strong);
}

.article-page__cover {
  margin: 0 0 var(--space-10);
}

.article-page__cover-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  background: var(--color-bg-secondary);
}

/* Rendered Editor.js content */
.article-page__body {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.article-page__body h2 {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: var(--space-10) 0 var(--space-3);
}

.article-page__body h3 {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: var(--space-8) 0 var(--space-2);
}

.article-page__body h4 {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-2);
}

.article-page__body p {
  margin: 0 0 var(--space-5);
}

.article-page__body ul,
.article-page__body ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
  list-style-position: outside;
}

.article-page__body ul,
.article-page__body ul li { list-style-type: disc; }

.article-page__body ol,
.article-page__body ol li { list-style-type: decimal; }

.article-page__body a {
  color: var(--color-accent-primary);
  text-decoration: underline;
}

.article-page__body strong,
.article-page__body b {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.article-page__footer {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Image block from Editor.js (renderEditorImage)
-------------------------------------------------------------------------- */
.article-figure {
  margin: var(--space-8) 0;
}

.article-figure__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-image);
  background: var(--color-bg-secondary);
}

.article-figure__caption {
  margin-top: var(--space-2);
  font-size: 14px;
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}


/* Utils */

/* Source: ./utils/utils.css */
/* ==========================================================================
   Utils: spacing, display, flex, typography, color, layout helpers
   Based on tokens from base/vars.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset helpers
-------------------------------------------------------------------------- */


.m-0  { margin: 0 !important; }
.p-0  { padding: 0 !important; }
.b-0  { border: 0 !important; }

.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   Display
-------------------------------------------------------------------------- */
.none   { display: none; }
.d-none { display: none !important; }
.d-block      { display: block !important; }
.d-flex       { display: flex !important; }
.d-grid       { display: grid !important; }
.d-inline     { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }

/* --------------------------------------------------------------------------
   Flex utilities
-------------------------------------------------------------------------- */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1; }
.flex-none     { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* --------------------------------------------------------------------------
   Gap
-------------------------------------------------------------------------- */
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* --------------------------------------------------------------------------
   Margin helpers
   scale: 0,1,2,3,4,5,6,8,10,12,16,20,24
-------------------------------------------------------------------------- */

.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-10 { margin: var(--space-10) !important; }
.m-12 { margin: var(--space-12) !important; }
.m-16 { margin: var(--space-16) !important; }
.m-20 { margin: var(--space-20) !important; }
.m-24 { margin: var(--space-24) !important; }

.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-10 { margin-top: var(--space-10) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mt-16 { margin-top: var(--space-16) !important; }
.mt-20 { margin-top: var(--space-20) !important; }
.mt-24 { margin-top: var(--space-24) !important; }

.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-5 { margin-right: var(--space-5) !important; }
.mr-6 { margin-right: var(--space-6) !important; }
.mr-8 { margin-right: var(--space-8) !important; }
.mr-10 { margin-right: var(--space-10) !important; }
.mr-12 { margin-right: var(--space-12) !important; }
.mr-16 { margin-right: var(--space-16) !important; }
.mr-20 { margin-right: var(--space-20) !important; }
.mr-24 { margin-right: var(--space-24) !important; }

.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }
.mb-16 { margin-bottom: var(--space-16) !important; }
.mb-20 { margin-bottom: var(--space-20) !important; }
.mb-24 { margin-bottom: var(--space-24) !important; }

.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-5 { margin-left: var(--space-5) !important; }
.ml-6 { margin-left: var(--space-6) !important; }
.ml-8 { margin-left: var(--space-8) !important; }
.ml-10 { margin-left: var(--space-10) !important; }
.ml-12 { margin-left: var(--space-12) !important; }
.ml-16 { margin-left: var(--space-16) !important; }
.ml-20 { margin-left: var(--space-20) !important; }
.ml-24 { margin-left: var(--space-24) !important; }

.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.mx-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }
.mx-12 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
.mx-16 { margin-left: var(--space-16) !important; margin-right: var(--space-16) !important; }
.mx-20 { margin-left: var(--space-20) !important; margin-right: var(--space-20) !important; }
.mx-24 { margin-left: var(--space-24) !important; margin-right: var(--space-24) !important; }

.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
.my-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }
.my-12 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }
.my-16 { margin-top: var(--space-16) !important; margin-bottom: var(--space-16) !important; }
.my-20 { margin-top: var(--space-20) !important; margin-bottom: var(--space-20) !important; }
.my-24 { margin-top: var(--space-24) !important; margin-bottom: var(--space-24) !important; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Padding helpers
   scale: 0,1,2,3,4,5,6,8,10,12,16,20,24
-------------------------------------------------------------------------- */

.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }
.p-10 { padding: var(--space-10) !important; }
.p-12 { padding: var(--space-12) !important; }
.p-16 { padding: var(--space-16) !important; }
.p-20 { padding: var(--space-20) !important; }
.p-24 { padding: var(--space-24) !important; }

.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }
.pt-10 { padding-top: var(--space-10) !important; }
.pt-12 { padding-top: var(--space-12) !important; }
.pt-16 { padding-top: var(--space-16) !important; }
.pt-20 { padding-top: var(--space-20) !important; }
.pt-24 { padding-top: var(--space-24) !important; }

.pr-1 { padding-right: var(--space-1) !important; }
.pr-2 { padding-right: var(--space-2) !important; }
.pr-3 { padding-right: var(--space-3) !important; }
.pr-4 { padding-right: var(--space-4) !important; }
.pr-5 { padding-right: var(--space-5) !important; }
.pr-6 { padding-right: var(--space-6) !important; }
.pr-8 { padding-right: var(--space-8) !important; }
.pr-10 { padding-right: var(--space-10) !important; }
.pr-12 { padding-right: var(--space-12) !important; }
.pr-16 { padding-right: var(--space-16) !important; }
.pr-20 { padding-right: var(--space-20) !important; }
.pr-24 { padding-right: var(--space-24) !important; }

.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }
.pb-10 { padding-bottom: var(--space-10) !important; }
.pb-12 { padding-bottom: var(--space-12) !important; }
.pb-16 { padding-bottom: var(--space-16) !important; }
.pb-20 { padding-bottom: var(--space-20) !important; }
.pb-24 { padding-bottom: var(--space-24) !important; }

.pl-1 { padding-left: var(--space-1) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pl-3 { padding-left: var(--space-3) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pl-5 { padding-left: var(--space-5) !important; }
.pl-6 { padding-left: var(--space-6) !important; }
.pl-8 { padding-left: var(--space-8) !important; }
.pl-10 { padding-left: var(--space-10) !important; }
.pl-12 { padding-left: var(--space-12) !important; }
.pl-16 { padding-left: var(--space-16) !important; }
.pl-20 { padding-left: var(--space-20) !important; }
.pl-24 { padding-left: var(--space-24) !important; }

.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
.px-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
.px-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
.px-16 { padding-left: var(--space-16) !important; padding-right: var(--space-16) !important; }
.px-20 { padding-left: var(--space-20) !important; padding-right: var(--space-20) !important; }
.px-24 { padding-left: var(--space-24) !important; padding-right: var(--space-24) !important; }

.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.py-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
.py-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
.py-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
.py-20 { padding-top: var(--space-20) !important; padding-bottom: var(--space-20) !important; }
.py-24 { padding-top: var(--space-24) !important; padding-bottom: var(--space-24) !important; }

/* --------------------------------------------------------------------------
   Width / Height
-------------------------------------------------------------------------- */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }
.min-w-0 { min-width: 0; }

/* --------------------------------------------------------------------------
   Text alignment
-------------------------------------------------------------------------- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* --------------------------------------------------------------------------
   Text transforms
-------------------------------------------------------------------------- */
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* --------------------------------------------------------------------------
   Font sizes
-------------------------------------------------------------------------- */
.text-xs   { font-size: var(--text-xs);   line-height: var(--lh-xs); }
.text-sm   { font-size: var(--text-sm);   line-height: var(--lh-sm); }
.text-base { font-size: var(--text-base); line-height: var(--lh-base); }
.text-md   { font-size: var(--text-md);   line-height: var(--lh-md); }
.text-lg   { font-size: var(--text-lg);   line-height: var(--lh-lg); }
.text-xl   { font-size: var(--text-xl);   line-height: var(--lh-xl); }
.text-2xl  { font-size: var(--text-2xl);  line-height: var(--lh-2xl); }
.text-3xl  { font-size: var(--text-3xl);  line-height: var(--lh-3xl); }

/* --------------------------------------------------------------------------
   Font weights
-------------------------------------------------------------------------- */
.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

/* --------------------------------------------------------------------------
   Font families
-------------------------------------------------------------------------- */
.font-primary   { font-family: var(--font-primary); }
.font-accent    { font-family: var(--font-accent); }
.font-secondary { font-family: var(--font-secondary); }

/* --------------------------------------------------------------------------
   Text colors
-------------------------------------------------------------------------- */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent-primary); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-error     { color: var(--color-error); }
.text-info      { color: var(--color-info); }
.text-inverse   { color: var(--color-text-inverse); }

/* --------------------------------------------------------------------------
   Background colors
-------------------------------------------------------------------------- */
.bg-primary   { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary  { background-color: var(--color-bg-tertiary); }
.bg-accent    { background-color: var(--color-accent-light); }
.bg-panel     { background-color: var(--color-panel-bg); }

/* --------------------------------------------------------------------------
   Border radius
-------------------------------------------------------------------------- */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* --------------------------------------------------------------------------
   Overflow
-------------------------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Position
-------------------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* --------------------------------------------------------------------------
   Visibility
-------------------------------------------------------------------------- */
.invisible   { visibility: hidden; }
.visible     { visibility: visible; }
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* --------------------------------------------------------------------------
   Cursor
-------------------------------------------------------------------------- */
.cursor-pointer     { cursor: pointer; }
.cursor-default     { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* --------------------------------------------------------------------------
   User select
-------------------------------------------------------------------------- */
.select-none { user-select: none; }

/* --------------------------------------------------------------------------
   Truncate / line clamp
-------------------------------------------------------------------------- */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Divider
-------------------------------------------------------------------------- */
.hr { height: 1px; background: var(--color-border-light); border: none; }

/* --------------------------------------------------------------------------
   Visually hidden (accessible)
-------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --------------------------------------------------------------------------
   Shadow
-------------------------------------------------------------------------- */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* --------------------------------------------------------------------------
   Transition
-------------------------------------------------------------------------- */
.transition-fast   { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow   { transition: all var(--transition-slow); }

/* --------------------------------------------------------------------------
   Flash messages (public pages)
-------------------------------------------------------------------------- */
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
}

.flash--success {
  background: #D1FAE5;
  color: #065F46;
}

.flash--error {
  background: #FEE2E2;
  color: #991B1B;
}

/* --------------------------------------------------------------------------
   Tooltip — JS-positioned, appended to body
-------------------------------------------------------------------------- */
.tooltip {
  position: absolute;
  z-index: 9999;
  background-color: var(--color-text-primary);
  color: #fff;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  line-height: 1.4;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Body text variants
-------------------------------------------------------------------------- */
.text-body-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-secondary);
}

.text-body {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-text-secondary);
}

.text-body-lead {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--color-text-secondary);
}

.text-body-large {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--color-text-secondary);
}

.text-caption {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--color-text-muted);
}

.text-overline {
  font-family: var(--font-secondary);
  font-size: 10px;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}