/* Page compositions consume the reusable foundation from ds-core.css. */
:root {
  --color-surface-media: #edf0f2;
  --color-surface-skeleton: #e2e5e8;
  --color-surface-skeleton-highlight: #f5f6f7;
  --color-promo-accent: #ffe9e2;
  --color-promo-graphite: #e7eaed;
  --color-promo-neutral: #f2f3f4;
  --color-text-inverse-muted: #d5dbe0;
  --color-field-inverse: #394048;
  --color-border-inverse: #59616a;
  --color-placeholder-inverse: #c3cad0;
  --color-accent-decoration: rgb(216 59 32 / 19%);
  --color-shadow-accent: rgb(125 31 15 / 20%);
  --color-service-text: #dbe0e5;
  --color-facts-link-hover: #ffc2b2;
  --color-tag-warning-bg: #fff3d5;
  --color-footer-text: #e7ebee;
  --color-footer-text-muted: #bcc4cb;
  --color-footer-text-subtle: #9ea7af;
  --color-footer-border: #3c434b;
  --color-footer-control-border: #4b535c;
  --color-footer-accent-soft: rgb(216 59 32 / 8%);
  --color-hero-copy: #56616a;
  --color-hero-copy-inverse: #c9d0d6;
  --color-hero-truth: #4e565e;
  --color-hero-truth-inverse: #e2e6e9;
  --color-hero-progress: rgb(32 36 42 / 28%);
  --color-hero-progress-hover: rgb(32 36 42 / 58%);
  --color-hero-progress-inverse: rgb(255 255 255 / 34%);
  --color-hero-progress-inverse-hover: rgb(255 255 255 / 66%);
  --color-hero-decoration: rgb(255 255 255 / 9%);
  --color-hero-product-halo: rgb(255 255 255 / 48%);
  --color-hero-rule: rgb(70 79 87 / 24%);
  --color-hero-rule-inverse: rgb(255 255 255 / 20%);
  --color-toast-shadow: rgb(24 28 32 / 24%);
  --color-grid-rule: rgb(37 42 48 / 12%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-family-sans);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

svg { stroke-linecap: round; stroke-linejoin: round; }

[hidden] { display: none !important; }

.visually-hidden {
  width: 1px;
  height: 1px;
  position: absolute;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  flex: 0 0 auto;
}

.container { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 999;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  color: var(--color-text-inverse);
  background: var(--color-text);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.demo-state-toolbar {
  border-bottom: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface-subtle);
}

.demo-state-toolbar-inner {
  min-height: 64px;
  padding-block: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.demo-state-toolbar-copy {
  min-width: 260px;
  display: grid;
  gap: 2px;
}

.demo-state-toolbar-copy strong {
  font-size: var(--font-size-13);
  line-height: 1.35;
}

.demo-state-toolbar-copy span {
  max-width: 72ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-12);
  line-height: 1.35;
}

.demo-state-toolbar-controls {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.demo-state-button {
  min-height: 36px;
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--font-size-12);
  font-weight: var(--weight-bold);
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}

.demo-state-button:hover { border-color: var(--color-border-strong); }
.demo-state-button[aria-pressed="true"] { border-color: var(--color-accent-active); color: var(--color-accent-active); background: var(--color-accent-soft); }

h1,
h2,
h3,
p { margin-top: 0; }

:where(h1, h2, h3, h4, h5, h6, strong, b) { font-weight: var(--weight-bold); }

h1 {
  margin-bottom: 20px;
  font-size: var(--type-page-title-size);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h2 {
  margin-bottom: 12px;
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  letter-spacing: -0.012em;
}

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  color: var(--color-accent);
  background: transparent;
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.text-link:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 4px; }
.text-link .icon,
.promo-link .icon,
.news-item button .icon,
.facts-link .icon,
.b2b-flow-card .button .icon { width: var(--icon-sm) !important; height: var(--icon-sm) !important; }

/* header */
.site-header { display: contents; }
.mobile-search-toggle,
.mobile-search-close,
.catalog-mobile-head,
.catalog-mobile-links,
.mobile-bottom-nav { display: none; }

.service-bar { min-height: 44px; color: var(--color-service-text); background: var(--color-surface-inverse); font-size: var(--font-size-14); line-height: 20px; }
.service-inner { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.service-inner nav { display: flex; align-items: center; gap: 26px; }
.service-inner a,
.service-inner button { min-height: 44px; padding: 0; display: inline-flex; align-items: center; gap: 6px; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.service-inner a:hover,
.service-inner button:hover { color: var(--color-text-inverse); text-decoration: underline; text-underline-offset: 3px; }
.service-inner .icon { width: 14px; height: 14px; }

body.city-selector-open { overflow: hidden; }
.city-selector-dialog {
  width: min(520px, calc(100% - 32px));
  height: min(900px, calc(100dvh - 32px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xl);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}
.city-selector-dialog::backdrop { background: rgb(32 36 42 / 58%); }
.city-selector-shell { height: 100%; padding: var(--space-8); display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.city-selector-header { margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.city-selector-header h2 { margin: 0; font-size: var(--font-size-24); line-height: 1.25; letter-spacing: -0.02em; }
.city-selector-close { flex: 0 0 auto; border-color: transparent; }
.city-selector-close .ds-icon { --icon-source: url("./assets/icons/ui/cancel.svg"); }
.city-selector-search-wrap { margin-bottom: var(--space-5); }
.city-selector-search {
  width: 100%;
  min-height: var(--control-xl);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--font-size-16);
  caret-color: var(--color-accent);
}
.city-selector-search::placeholder { color: var(--color-text-secondary); opacity: 1; }
.city-selector-search:hover { border-color: var(--color-text-secondary); }
.city-selector-search:focus { border-color: var(--color-field-focus); box-shadow: 0 0 0 1px var(--color-field-focus); outline: 0; }
.city-selector-search::-webkit-search-cancel-button {
  width: 20px;
  height: 20px;
  margin-inline-start: var(--space-2);
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-text-secondary);
  -webkit-mask: url("./assets/icons/ui/cancel.svg") center / 14px 14px no-repeat;
  mask: url("./assets/icons/ui/cancel.svg") center / 14px 14px no-repeat;
  cursor: pointer;
  opacity: 0.72;
}

.city-selector-search::-webkit-search-cancel-button:hover { opacity: 1; }
.city-selector-results { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.city-selector-results h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-14); line-height: 1.4; }
.city-selector-list { min-height: 0; margin: 0; padding: 0 var(--space-2) 0 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-color: var(--color-border-strong) transparent; scrollbar-width: thin; }
.city-selector-list li { margin: 0; }
.city-selector-option { width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); color: var(--color-text); background: transparent; font: inherit; font-size: var(--font-size-16); text-align: left; cursor: pointer; transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); }
.city-selector-option:hover,
.city-selector-option.is-active { background: var(--color-surface-muted); }
.city-selector-option[aria-selected="true"] { color: var(--color-accent); background: var(--color-accent-soft); font-weight: var(--weight-bold); }
.city-selector-status { min-height: 20px; margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-12); line-height: 20px; }
.city-selector-status.is-empty { padding: var(--space-4) 0; color: var(--color-text); font-size: var(--font-size-14); }
.service-end-link { margin-left: auto; color: var(--color-text-inverse); font-weight: var(--weight-bold); white-space: nowrap; }

.main-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 98%, transparent);
}

.main-header-inner {
  min-height: 76px;
  position: relative;
  display: grid;
  grid-template-columns: 60px 122px minmax(280px, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.brand { min-width: 0; display: inline-flex; align-items: center; position: relative; }
.brand-logo { width: 60px; height: 60px; display: block; object-fit: contain; }

.catalog-button {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  color: var(--color-text-inverse);
  background: var(--color-accent);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.catalog-button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.catalog-button:active { background: var(--color-accent-active); border-color: var(--color-accent-active); }
.catalog-button-icon { width: 20px; height: 20px; display: grid; place-items: center; }
.catalog-button-icon .icon { grid-area: 1 / 1; transition: opacity 150ms var(--ease), transform 180ms var(--ease); }
.catalog-close-icon { opacity: 0; transform: rotate(-45deg); }
.catalog-button[aria-expanded="true"] .catalog-menu-icon { opacity: 0; transform: rotate(45deg); }
.catalog-button[aria-expanded="true"] .catalog-close-icon { opacity: 1; transform: rotate(0); }

.search { min-width: 0; height: 52px; position: relative; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.search:focus-within { border-color: var(--color-field-focus); box-shadow: 0 0 0 1px var(--color-field-focus); }
.search input { width: 100%; height: 100%; padding: 0 86px 0 14px; border: 0; border-radius: inherit; color: var(--color-text); background: transparent; }
.search input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.search input:focus { outline: 0; }
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}
.search input[type="search"]::-ms-clear { display: none; }
.search-clear,
.search-submit { position: absolute; top: 3px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius-lg); background: transparent; cursor: pointer; }
.search-clear { right: 46px; color: var(--color-text-secondary); }
.search-clear .ds-icon { width: var(--icon-sm); height: var(--icon-sm); }
.search-submit { right: 3px; color: var(--color-text-inverse); background: var(--color-accent); }
.search-submit:hover { color: var(--color-text-inverse); background: var(--color-accent-hover); }
.search-submit:active { background: var(--color-accent-active); }

.header-actions { display: flex; align-items: stretch; gap: 2px; }
.header-actions :is(button, a) { min-width: 62px; min-height: 52px; position: relative; padding: 4px 7px; display: grid; place-items: center; gap: 0; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--color-text-secondary); font-size: var(--font-size-12); line-height: 16px; text-decoration: none; cursor: pointer; }
.header-actions :is(button, a):hover,
.header-actions a[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-soft); }
.header-actions .icon { width: 21px; height: 21px; }
.header-actions b { position: absolute; top: 0; right: 5px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--color-text-inverse); background: var(--color-accent); font-size: var(--font-size-12); }

.catalog-menu {
  width: 100vw;
  height: calc(100vh - 76px);
  position: absolute;
  z-index: 70;
  top: 100%;
  left: 50%;
  padding: 14px 32px 28px;
  background: var(--color-overlay);
  transform: translateX(-50%);
}
.catalog-menu-shell {
  width: min(1440px, 100%);
  height: min(720px, calc(100vh - 154px));
  position: relative;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.catalog-menu-nav { min-width: 0; padding: 28px 18px 22px; display: flex; flex-direction: column; background: var(--color-surface-muted); }
.catalog-menu-nav h2 { margin: 0 12px 16px; font-size: var(--font-size-24); }
.catalog-section-tabs { display: grid; gap: 3px; }
.catalog-section-tab { min-height: 48px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: var(--radius-lg); background: transparent; text-align: left; font-weight: var(--weight-bold); cursor: pointer; }
.catalog-section-tab .icon:last-child { width: var(--icon-sm); height: var(--icon-sm); opacity: 0; }
.catalog-section-tab:hover { color: var(--color-accent); background: var(--color-surface); }
.catalog-section-tab.active { color: var(--color-accent); background: var(--color-surface); }
.catalog-section-tab.active .icon:last-child { opacity: 1; }
.catalog-all-link { min-height: 44px; margin: auto 12px 0; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; color: var(--color-accent); background: transparent; font-weight: var(--weight-bold); cursor: pointer; }
.catalog-all-link:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.catalog-all-link .icon { width: var(--icon-sm); height: var(--icon-sm); }
.catalog-detail { min-width: 0; min-height: 0; position: relative; padding: 30px 36px 28px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--color-surface); }
.catalog-detail-head { min-height: 62px; border-bottom: 1px solid var(--color-border); }
.catalog-detail-head h2 { margin-bottom: 6px; font-size: var(--font-size-24); }
.catalog-section-link { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; color: var(--color-accent); background: transparent; font-size: var(--font-size-13); font-weight: var(--weight-bold); cursor: pointer; }
.catalog-section-link .icon { width: var(--icon-sm); height: var(--icon-sm); }
.catalog-items { min-height: 0; padding: 22px 10px 18px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(6, auto); align-content: start; gap: 7px 36px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.catalog-items-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: 5px 24px; }
.catalog-items-fasteners { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; align-content: start; }
.catalog-items-fasteners .catalog-nested-item { grid-column: 1 / -1; margin-top: 4px; }
.catalog-items-fasteners .catalog-nested-item ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 24px; }
.catalog-items > button,
.catalog-items > a,
.catalog-nested-item > button,
.catalog-nested-item li button { min-height: 30px; min-width: 0; padding: 2px 0; display: flex; align-items: center; border: 0; color: var(--color-text-secondary); background: transparent; text-align: left; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.catalog-items > button:hover,
.catalog-items > a:hover,
.catalog-nested-item button:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.catalog-nested-item { min-width: 0; align-self: start; }
.catalog-nested-item > button { color: var(--color-text); font-weight: var(--weight-bold); }
.catalog-nested-item ul { margin: 4px 0 0; padding: 0 0 0 15px; display: grid; gap: 2px; }
.catalog-nested-item li { color: var(--color-border-strong); }
.catalog-nested-item li button { min-height: 27px; color: var(--color-text-secondary); }
.catalog-utility { width: 100%; min-height: 88px; position: relative; padding: 18px 150px 18px 24px; border: 0; border-radius: var(--radius-lg); color: inherit; background: var(--color-accent-soft); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.catalog-utility:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.catalog-utility div { height: 100%; position: relative; z-index: 1; display: grid; align-content: center; justify-items: start; gap: 3px; }
.catalog-utility strong { font-size: var(--font-size-16); }
.catalog-utility span { color: var(--color-text-secondary); font-size: var(--font-size-13); }
.catalog-utility img { width: 132px; height: 94px; position: absolute; right: 12px; bottom: -3px; object-fit: contain; }

body.catalog-open { overflow: hidden; }

.quick-nav { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.quick-nav nav { min-height: 44px; display: flex; align-items: center; gap: 26px; overflow-x: auto; scrollbar-width: none; font-size: var(--font-size-14); font-weight: var(--weight-bold); white-space: nowrap; }
.quick-nav nav::-webkit-scrollbar { display: none; }
.quick-nav a { min-height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; }
.quick-nav a:hover { color: var(--color-accent); }
.quick-nav .quick-sale { width: 68px; min-width: 68px; justify-content: center; }
.quick-nav .quick-sale img { width: 68px; height: 24px; display: block; object-fit: contain; }
.quick-nav .quick-org { margin-left: auto; color: var(--color-accent); }

.search-feedback { padding-top: 10px; padding-bottom: 10px; }
.feedback { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-surface-muted); }
.feedback .icon { width: 24px; height: 24px; }
.feedback span { display: grid; margin-right: auto; }
.feedback small { color: var(--color-text-secondary); }
.feedback button { min-height: 40px; padding: 0 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); font-weight: var(--weight-bold); cursor: pointer; }
.feedback.success { color: var(--color-success); background: var(--color-success-soft); }
.feedback.warning { color: var(--color-warning); background: var(--color-warning-soft); }
.feedback.danger { color: var(--color-danger); background: var(--color-danger-soft); }
.feedback.empty { color: var(--color-info); background: var(--color-info-soft); }

/* shared sections */
.section { padding: 72px 0; background: var(--color-surface); }
.section-heading { margin-bottom: 8px; display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.section-heading p { margin-bottom: 0; color: var(--color-text-secondary); }
.category-heading { margin-bottom: 8px; }
.categories-section { padding-top: 0; padding-bottom: var(--space-12); }

.promotions-section { padding-top: 58px; background: var(--color-bg); }
.promotions-section .section-heading { margin-bottom: 8px; }
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promo-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.promo-grid-2,
.promo-grid-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promo-item { aspect-ratio: 1.5 / 1; min-height: 0; position: relative; padding: 24px; border: 0; border-radius: var(--radius-xl); color: var(--color-text); background: var(--color-surface-muted); text-align: left; cursor: pointer; overflow: hidden; transition: background-color 150ms var(--ease); }
.promo-item:hover { background: var(--color-surface-hover); }
.promo-copy { width: 54%; height: 100%; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.promo-item strong { font-size: var(--font-size-24); line-height: 1.15; letter-spacing: -0.025em; }
.promo-item small { max-width: 25ch; margin-top: 8px; color: var(--color-text-secondary); font-size: var(--font-size-13); line-height: 1.4; }
.promo-item > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: filter 150ms var(--ease); }
.promo-item:hover > img { filter: brightness(.96); }
.promo-overlay { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 96%) 0%, rgb(255 255 255 / 82%) 39%, rgb(255 255 255 / 0%) 70%); }
.promo-link { min-height: 38px; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--radius-sm); color: var(--color-text-inverse); background: var(--color-accent); font-size: var(--font-size-13); font-weight: var(--weight-bold); }
.promo-link .icon { width: 17px; height: 17px; }
.promo-dark { color: var(--color-text-inverse); }
.promo-dark small { color: var(--color-text-inverse-muted); }
.promo-dark .promo-overlay { background: linear-gradient(90deg, rgb(26 30 35 / 97%) 0%, rgb(26 30 35 / 78%) 43%, rgb(26 30 35 / 0%) 74%); }

.edge-controls {
  width: calc(100% + 40px);
  position: absolute;
  z-index: 4;
  top: calc(50% - 7px);
  left: -20px;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}
.shelf-controls.edge-controls button {
  width: 48px;
  height: 48px;
  border-color: var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-floating);
  pointer-events: auto;
}

.shelf-controls button .icon,
.hero-controls button .icon { width: var(--icon-sm); height: var(--icon-sm); }

.category-slider { position: relative; }
.category-shell { overflow: hidden; }
.category-grid { display: flex; gap: 14px; padding: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.category-grid::-webkit-scrollbar { display: none; }
.category-controls { width: calc(100% + 40px); position: absolute; z-index: 4; top: 50%; left: -20px; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
.shelf-controls.category-controls button { width: 48px; height: 48px; border-color: var(--color-border); border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-floating); pointer-events: auto; }
.category-card { flex: 0 0 calc((100% - 70px) / 6); min-height: 194px; position: relative; padding: 20px; display: flex; align-items: flex-start; scroll-snap-align: start; border: 0; border-radius: var(--radius-xl); background: var(--color-surface-muted); text-align: left; cursor: pointer; overflow: hidden; transition: background-color 150ms var(--ease); }
.category-card:hover { background: var(--color-surface-hover); }
.category-card span { min-width: 0; max-width: 14ch; position: relative; z-index: 2; font-size: var(--font-size-16); font-weight: var(--weight-bold); line-height: 1.24; overflow-wrap: anywhere; }
.category-card img { width: 84%; height: 76%; position: absolute; right: -12%; bottom: -10%; object-fit: contain; }

.brands-section { padding-top: 8px; padding-bottom: 8px; background: var(--color-surface); }
.brand-slider { position: relative; }
.brand-shell { overflow: hidden; }
.brands-strip { display: flex; gap: 12px; padding: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.brands-strip::-webkit-scrollbar { display: none; }
.brand-controls { width: calc(100% + 40px); position: absolute; z-index: 4; top: 50%; left: -20px; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
.shelf-controls.brand-controls button { width: 48px; height: 48px; border-color: var(--color-border); border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-floating); pointer-events: auto; }
.brand-tile { flex: 0 0 174px; min-height: 86px; display: grid; place-items: center; scroll-snap-align: start; border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); background: var(--color-surface); cursor: pointer; transition: border-color 150ms var(--ease), color 150ms var(--ease); }
.brand-tile:hover { border-color: var(--color-accent); color: var(--color-accent); }
.brand-tile span { font-size: var(--font-size-20); font-weight: var(--weight-bold); letter-spacing: -0.025em; }
.brand-style-1 span { color: var(--color-accent); font-style: italic; }
.brand-style-2 span { font-weight: var(--weight-bold); letter-spacing: .025em; }
.brand-style-3 span { font-size: var(--font-size-20); font-weight: var(--weight-bold); }
.tone-orange { --tone: var(--category-safety); }
.tone-green { --tone: var(--category-fasteners); }
.tone-blue { --tone: var(--category-electric); }
.tone-yellow { --tone: var(--category-light); }

.facts-band { padding: 0; background: var(--color-surface); }
.facts-layout { display: grid; gap: 14px; }
.facts-intro { min-height: 360px; position: relative; padding: 48px 52% 48px 48px; border-radius: var(--radius-xl); color: var(--color-text-inverse); background: var(--color-surface-inverse); overflow: hidden; }
.facts-copy { max-width: 590px; position: relative; z-index: 2; }
.facts-intro h2 { max-width: 520px; margin-bottom: 16px; color: var(--color-text-inverse); font-size: var(--font-size-40); line-height: 1.15; }
.facts-intro p { max-width: 54ch; margin-bottom: 22px; color: var(--color-service-text); }
.facts-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; color: var(--color-text-inverse); background: transparent; font-weight: var(--weight-bold); cursor: pointer; }
.facts-link:hover { color: var(--color-facts-link-hover); }
.facts-link .icon { width: 18px; height: 18px; }
.facts-store-photo { width: 48%; height: 100%; position: absolute; z-index: 1; inset: 0 0 0 auto; object-fit: cover; object-position: center; }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fact { min-height: 170px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; border-radius: var(--radius-lg); background: var(--color-surface-muted); text-align: center; }
.fact-icon-shell { width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--color-surface); }
.fact .fact-icon { width: 28px; height: 28px; padding: 0; color: var(--color-accent); background-color: currentColor; }
.fact div { display: grid; justify-items: center; gap: 5px; }
.fact strong { font-size: var(--font-size-14); }
.fact span { max-width: 26ch; color: var(--color-text-secondary); font-size: var(--font-size-13); }

.product-section { padding-top: 24px; padding-bottom: 24px; background: var(--color-surface); }
.product-section + .product-section { padding-top: 24px; border-top: 0; }
.product-section[data-shelf-id="hits"] { padding-top: 48px; }
.product-section[data-shelf-id="new"] { padding-top: 48px; padding-bottom: 48px; }
.product-section[data-shelf-id="clearance"] { padding-top: 48px; padding-bottom: 48px; }
.shelf-heading { margin-bottom: 8px; }
.shelf-frame { position: relative; }
.shelf-controls { display: flex; gap: 8px; }
.shelf-controls button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); cursor: pointer; }
.shelf-controls button:hover { color: var(--color-accent); border-color: var(--color-accent); }
.shelf-controls .reverse { transform: rotate(180deg); }
.shelf-shell { overflow: hidden; }
.product-shelf { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.product-shelf::-webkit-scrollbar { display: none; }
.product-card { flex: 0 0 calc((100% - 48px) / 5); min-width: 0; padding: 8px 8px 12px; display: flex; flex-direction: column; scroll-snap-align: start; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.product-gallery { flex: 0 0 auto; }
.product-media { height: 232px; position: relative; display: grid; place-items: center; border-radius: var(--radius-lg); color: var(--color-text-secondary); background: var(--color-surface); overflow: hidden; }
.product-gallery-images { width: 100%; height: 100%; display: grid; place-items: center; pointer-events: none; }
.product-media-link { width: 100%; height: 100%; position: relative; z-index: 1; display: grid; place-items: center; color: inherit; }
.product-media-link:focus-visible { border-radius: inherit; outline: 2px solid var(--color-focus); outline-offset: -3px; }
.product-gallery-image { width: 100%; height: 100%; position: absolute; inset: 0; padding: 18px; object-fit: contain; opacity: 0; transform: scale(.985); transition: opacity 120ms var(--ease), transform 180ms var(--ease); }
.product-gallery-image.active { opacity: 1; transform: scale(1); }
.product-gallery-view-detail { object-position: 42% 50%; }
.product-gallery-view-detail.active { transform: scale(1.16); }
.product-gallery-view-close { object-position: 58% 48%; }
.product-gallery-view-close.active { transform: scale(1.24); }
.product-gallery-view-left { object-position: 35% 50%; }
.product-gallery-view-left.active { transform: scale(1.13); }
.product-gallery-view-right { object-position: 65% 50%; }
.product-gallery-view-right.active { transform: scale(1.13); }
.product-gallery-progress { height: 12px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.product-gallery-progress span { width: 4px; height: 4px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.product-gallery-progress span.active { width: 8px; background: var(--color-text); }
.product-gallery-empty .product-gallery-progress { visibility: hidden; }
.product-favorite { width: 32px; height: 32px; position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--color-text-secondary); background: var(--color-promo-neutral); box-shadow: none; cursor: pointer; }
.product-favorite:hover,
.product-favorite.active { color: var(--color-accent); }
.product-favorite.ds-icon-button:hover,
.product-favorite.ds-icon-button.active { background: var(--color-promo-neutral); box-shadow: none; }
.product-favorite.active .icon { fill: currentColor; }
.product-favorite.active .ds-icon { --icon-source: url("./assets/icons/ui/favourite-fill.svg") !important; }
.media-tags { max-width: calc(100% - 20px); position: absolute; z-index: 1; left: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.media-tag { min-height: var(--badge-min-height); padding: var(--badge-padding-block) var(--badge-padding-inline); display: inline-flex; align-items: center; border-radius: var(--badge-radius); font-size: var(--badge-font-size); line-height: 1; font-weight: var(--weight-bold); }
.sale-tag { color: var(--color-text-inverse); background: var(--color-accent); }
.hit-tag { color: var(--color-text); background: var(--color-surface); }
.new-tag { color: var(--color-text-inverse); background: var(--color-info); }
.request-tag { color: var(--color-warning); background: var(--color-tag-warning-bg); }
.product-icon { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.product-media.no-photo { gap: 8px; align-content: center; color: var(--color-text-secondary); background: var(--color-surface-muted); }
.product-media.no-photo .product-icon { width: 48px; height: 48px; }
.product-media.no-photo span { font-size: var(--font-size-13); font-weight: var(--weight-bold); }
.product-media.no-photo .media-tags span { font-size: var(--badge-font-size); }
.product-card h3 { min-height: 54px; margin: 4px 0 8px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: var(--font-size-14); line-height: 18px; font-weight: var(--weight-regular); }
.product-title-link { color: inherit; text-decoration: none; }
.product-title-link:hover { color: var(--color-accent); }
.price-block { min-height: 28px; margin: 0 0 4px; display: grid; align-content: start; gap: 0; }
.price-row { min-height: 28px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 7px; }
.price { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; color: var(--color-text); font-size: var(--font-size-24); line-height: 1.2; font-weight: var(--weight-bold); font-variant-numeric: proportional-nums; letter-spacing: -0.02em; }
.price small { color: inherit; font-size: var(--font-size-13); font-weight: var(--weight-bold); letter-spacing: 0; }
.price-row del { color: var(--color-text-secondary); font-size: var(--font-size-12); }
.unit-price { flex: 0 0 auto; color: var(--color-text-secondary); font-size: var(--font-size-12); line-height: 16px; font-variant-numeric: proportional-nums; white-space: nowrap; }
.request-price { min-height: 28px; margin: 0; color: var(--color-warning); }
.purchase-control { min-height: 44px; margin-top: auto; padding-top: 4px; }
.product-button { width: 100%; min-height: var(--control-md); display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--color-accent); border-radius: var(--radius-lg); color: var(--color-text-inverse); background: var(--color-accent); font-weight: var(--weight-bold); white-space: nowrap; cursor: pointer; }
.product-button .icon { width: 18px; height: 18px; }
.product-button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.product-button:disabled { cursor: not-allowed; color: var(--color-disabled-text); background: var(--color-disabled-bg); border-color: var(--color-disabled-bg); }
.month-section { padding-top: 8px; padding-bottom: 32px; background: var(--color-surface); }
.month-stage { position: relative; padding: 28px 24px 22px; border-radius: var(--radius-xl); background: var(--color-surface-muted); overflow: hidden; }
.month-heading { position: relative; z-index: 1; margin-bottom: 8px; display: flex; align-items: end; justify-content: space-between; gap: 24px; color: var(--color-text); }
.month-heading h2 { margin-bottom: 4px; color: var(--color-text); }
.month-heading p { margin-bottom: 0; color: var(--color-text-secondary); }
.month-controls button { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface); }
.month-controls button:hover { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-soft); }
.month-shell { position: relative; z-index: 1; }
.compact-product-shelf { display: flex; gap: 12px; padding: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.compact-product-shelf::-webkit-scrollbar { display: none; }
.mini-product-card { flex: 0 0 calc((100% - 24px) / 3); min-height: 164px; padding: 12px; display: grid; grid-template-columns: 118px minmax(0, 1fr) 48px; align-items: stretch; gap: 12px; scroll-snap-align: start; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.mini-product-media { width: 118px; min-height: 140px; position: relative; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.mini-product-media.no-photo { background: var(--color-surface-muted); }
.mini-product-media-link { width: 118px; min-height: 140px; display: grid; color: inherit; border-radius: var(--radius-lg); text-decoration: none; }
.mini-product-media-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }
.mini-product-media img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.mini-product-media.no-photo { align-content: center; gap: 5px; color: var(--color-text-secondary); font-size: var(--font-size-12); font-weight: var(--weight-bold); }
.mini-product-media.no-photo .icon { width: 32px; height: 32px; }
.mini-product-copy { min-width: 0; padding: 8px 0; display: flex; flex-direction: column; }
.mini-product-copy h3 { min-height: 57px; margin-bottom: 6px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: var(--font-size-13); line-height: 1.45; font-weight: var(--weight-regular); }
.mini-product-title-link { color: inherit; text-decoration: none; }
.mini-product-title-link:hover { color: var(--color-accent); }
.mini-price { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.mini-price strong { font-size: var(--font-size-20); line-height: 1.1; font-variant-numeric: proportional-nums; letter-spacing: -0.02em; }
.mini-price del { color: var(--color-text-secondary); font-size: var(--font-size-12); font-variant-numeric: proportional-nums; letter-spacing: -0.01em; }
.mini-purchase { align-self: end; display: grid; justify-items: end; }
.mini-cart-button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--color-accent); border-radius: 50%; color: var(--color-text-inverse); background: var(--color-accent); cursor: pointer; }
.mini-cart-button:hover { color: var(--color-text-inverse); background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.mini-cart-button:disabled { cursor: not-allowed; color: var(--color-disabled-text); border-color: var(--color-disabled-bg); background: var(--color-disabled-bg); }
.mini-skeleton-card { pointer-events: none; }
.mini-skeleton-media { width: 118px; min-height: 140px; }
.mini-skeleton-button { width: 46px; height: 46px; align-self: end; border-radius: 50%; }
.compact-product-shelf > .shelf-state { min-height: 180px; color: var(--color-text); }

.shelf-state { flex: 1 0 100%; min-height: 300px; padding: 40px; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.shelf-state .state-icon { width: 54px; height: 54px; color: var(--color-info); fill: none; stroke: currentColor; stroke-width: 1.4; }
.shelf-state h3 { margin-bottom: 6px; font-size: var(--font-size-20); }
.shelf-state p { margin-bottom: 0; color: var(--color-text-secondary); }
.shelf-state.error-state .state-icon { color: var(--color-danger); }

.skeleton-card { pointer-events: none; }
.skeleton { border-radius: var(--radius-sm); background: var(--color-surface-skeleton); background-image: linear-gradient(90deg, var(--color-surface-skeleton) 0%, var(--color-surface-skeleton-highlight) 48%, var(--color-surface-skeleton) 100%); background-size: 220% 100%; animation: skeleton 1.4s linear infinite; }
.skeleton.media { height: 178px; }
.skeleton.line { height: 15px; margin-top: 12px; width: 68%; }
.skeleton.line.wide { width: 100%; margin-top: 44px; }
.skeleton.price-line { height: 25px; width: 52%; margin-top: 30px; }
.skeleton.button-line { height: 44px; width: 100%; margin-top: auto; }
@keyframes skeleton { to { background-position: -220% 0; } }

.b2b-section { padding: 48px 0; background: var(--color-bg); }
.b2b-heading { max-width: 820px; margin-bottom: 18px; }
.b2b-heading h2 { margin-bottom: 10px; }
.b2b-heading p { max-width: 68ch; margin-bottom: 0; color: var(--color-text-secondary); }
.b2b-flow { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; }
.b2b-flow-card { min-width: 0; min-height: 286px; padding: 22px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; border-radius: var(--radius-lg); color: var(--color-text); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; }
.b2b-step-number { align-self: flex-end; color: var(--color-text-tertiary); font-size: var(--font-size-24); line-height: 1; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.b2b-flow-card > div { width: 100%; margin-top: auto; }
.b2b-flow-card h3 { max-width: 18ch; margin-bottom: 8px; font-size: var(--font-size-20); line-height: 1.25; letter-spacing: -.015em; }
.b2b-flow-card p { margin-bottom: 0; color: var(--color-text-secondary); font-size: var(--font-size-13); line-height: 1.48; }
.b2b-flow-card-accent { color: var(--color-text-inverse); background: var(--color-accent); box-shadow: none; }
.b2b-flow-card-accent .b2b-step-number { color: var(--color-text-inverse); opacity: .82; }
.b2b-flow-card-accent h3 { color: var(--color-text-inverse); }
.b2b-flow-card-accent p { color: var(--color-text-inverse); }
.b2b-flow-card-accent .button { width: 100%; margin-top: 20px; justify-content: space-between; }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-item { min-height: 250px; padding: 28px; display: flex; flex-direction: column; border-radius: var(--radius-xl); background: var(--color-surface-muted); transition: background-color 150ms var(--ease); }
.news-item:hover { background: var(--color-surface-hover); }
.news-item h3 { max-width: 32ch; margin: 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: var(--font-size-20); line-height: 1.35; font-weight: var(--weight-bold); }
.news-item-footer { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.news-item-footer time { color: var(--color-text-secondary); font-size: var(--font-size-14); line-height: 1.35; }
.news-item:focus-visible { outline-width: 3px; outline-offset: 3px; }
.news-item-arrow { width: 48px; height: 48px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--color-surface); cursor: inherit; }
.news-item:hover .news-item-arrow,
.news-item:active .news-item-arrow { color: var(--color-accent); }

.news-section { padding-top: 48px; padding-bottom: 48px; }
.subscription { padding: 0 0 48px; background: var(--color-surface); }
.subscription-panel { height: 320px; min-height: 320px; display: grid; grid-template-columns: 42% minmax(0, 1fr); border-radius: var(--radius-xl); color: var(--color-text-inverse); background: var(--color-surface-inverse); overflow: hidden; }
.subscription-visual { min-width: 0; position: relative; background: var(--color-disabled-bg); overflow: hidden; }
.subscription-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.subscription-content { min-width: 0; padding: 32px 52px; display: grid; align-content: center; gap: 20px; }
.subscription-copy h2 { max-width: 600px; margin-bottom: 10px; color: var(--color-text-inverse); font-size: var(--font-size-32); line-height: 1.1; }
.subscription-copy p { max-width: 60ch; margin-bottom: 0; color: var(--color-text-inverse-muted); font-size: var(--font-size-14); line-height: 1.45; }
.subscription form { position: relative; }
.subscription label { display: block; margin-bottom: 8px; color: var(--color-text-inverse); font-size: var(--font-size-13); font-weight: var(--weight-bold); }
.subscription-input { max-width: 720px; position: relative; }
.subscription input { width: 100%; min-height: 54px; padding: 0 166px 0 16px; border: 1px solid var(--color-border-inverse); border-radius: var(--radius-lg); color: var(--color-text-inverse); background: var(--color-field-inverse); }
.subscription input::placeholder { color: var(--color-placeholder-inverse); }
.subscription input:focus { border-color: var(--color-field-focus); outline: 2px solid var(--color-field-focus); outline-offset: 1px; }
.subscription-submit { min-width: 150px; min-height: 48px; position: absolute; top: 3px; right: 3px; border-radius: var(--radius-lg); color: var(--color-text-inverse); background: var(--color-accent); }
.subscription-submit:hover { background: var(--color-accent-hover); }
.form-note { margin: 10px 0 0; color: var(--color-placeholder-inverse); font-size: var(--font-size-12); }
.form-note button { padding: 0; border: 0; color: inherit; background: transparent; text-decoration: underline; cursor: pointer; }
.form-status { min-height: 22px; margin: 7px 0 0; font-size: var(--font-size-13); font-weight: var(--weight-bold); }
.form-status:empty { display: none; }
.subscription form.invalid input,
.subscription form.server-error input { border-color: var(--color-danger); }
.subscription form.invalid .form-status,
.subscription form.server-error .form-status { color: var(--color-danger); }
.subscription form.success .form-status { color: var(--color-success); }

.footer { padding-top: 64px; color: var(--color-footer-text); background: var(--color-text); }
.footer .brand { color: var(--color-text-inverse); }
.footer-main { padding-bottom: 54px; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(720px, 2.1fr); gap: 72px; }
.footer-about { min-width: 0; display: grid; align-content: start; justify-items: start; }
.footer-about > p { max-width: 34ch; margin: 24px 0 28px; color: var(--color-footer-text-muted); }
.footer-address { margin-top: 28px; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.footer-address .icon { margin-top: 2px; color: var(--color-accent-bright); }
.footer-address span { display: grid; gap: 2px; }
.footer-address strong { color: var(--color-text-inverse); font-size: var(--font-size-14); }
.footer-address small { color: var(--color-footer-text-subtle); font-size: var(--font-size-12); }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a,
.footer-socials button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-footer-control-border); border-radius: var(--radius-lg); color: var(--color-text-inverse); background: transparent; font-size: var(--font-size-12); font-weight: var(--weight-bold); cursor: pointer; }
.footer-socials a:hover,
.footer-socials button:hover { color: var(--color-accent-bright); border-color: var(--color-accent-bright); background: var(--color-footer-accent-soft); }
.footer-social-icon { width: 24px; height: 24px; display: block; background: currentColor; -webkit-mask: var(--social-icon) center / contain no-repeat; mask: var(--social-icon) center / contain no-repeat; }
.footer-social-vk { --social-icon: url("./assets/icons/social/vk.svg"); }
.footer-social-telegram { --social-icon: url("./assets/icons/social/telegram.svg"); }
.footer-social-youtube { --social-icon: url("./assets/icons/social/youtube.svg"); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.footer-group { min-width: 0; display: grid; align-content: start; justify-items: start; gap: 4px; }
.footer-group details { width: 100%; }
.footer-group summary { display: none; }
.footer-group-links { display: grid; align-content: start; justify-items: start; gap: 4px; }
.footer-group-route { display: none !important; }
.footer-grid strong { margin-bottom: 3px; color: var(--color-text-inverse); }
.footer-grid .footer-section-link { min-height: 0; margin-bottom: 3px; align-items: flex-start; color: var(--color-text-inverse); font-weight: var(--weight-bold); }
.footer-grid .footer-section-link[aria-current="page"] { color: var(--color-accent-bright); }
.footer-grid button,
.footer-grid a { min-height: 36px; padding: 0; border: 0; color: var(--color-footer-text-muted); background: transparent; text-align: left; cursor: pointer; }
.footer-grid a { display: inline-flex; align-items: center; }
.footer-grid button:hover,
.footer-grid a:hover { color: var(--color-text-inverse); text-decoration: underline; }
.footer-bottom { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--color-footer-border); color: var(--color-footer-text-subtle); font-size: var(--font-size-14); }
.footer-bottom button { min-height: 44px; border: 0; color: inherit; background: transparent; cursor: pointer; }
.footer-legal { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 24px; }
.footer-legal a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; text-underline-offset: 3px; }
.footer-legal a:hover,
.footer-legal a[aria-current="page"] { color: var(--color-text-inverse); text-decoration: underline; }

.footer-feedback-dialog {
  width: min(640px, calc(100vw - var(--space-8)));
  max-height: calc(100vh - var(--space-8));
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-floating);
}

.footer-feedback-dialog::backdrop { background: var(--color-overlay); }
.footer-feedback-form { padding: var(--space-8); display: grid; gap: var(--space-4); overflow: auto; }
.footer-feedback-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.footer-feedback-heading h2 { margin: 0 0 var(--space-1); font-size: var(--font-size-24); }
.footer-feedback-heading p { max-width: 56ch; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-14); line-height: 1.45; }
.footer-feedback-fields { --ds-form-row-gap: var(--space-4); --ds-form-column-gap: var(--space-4); }
.footer-feedback-message { min-height: 120px; padding-block: var(--space-3); resize: vertical; }
.footer-feedback-consent { width: fit-content; }
.footer-feedback-actions { display: flex; align-items: center; gap: var(--space-4); }
.footer-feedback-actions p { margin: 0; color: var(--color-success); font-size: var(--font-size-13); line-height: 1.4; }

@media (max-width: 640px) {
  .footer-feedback-form { padding: var(--space-5); }
  .footer-feedback-actions { align-items: stretch; flex-direction: column; }
}

/* Homepage hero */
.hero-home { padding: var(--space-4) 0 var(--space-10); background: var(--color-surface); }
.hero-slider { height: 400px; position: relative; border-radius: var(--radius-xl); overflow: hidden; }
.hero-progress { position: absolute; z-index: 5; top: 20px; left: 34px; right: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hero-progress button { height: 20px; padding: 8px 0; border: 0; background: transparent; cursor: pointer; }
.hero-progress button span { height: 4px; display: block; border-radius: var(--radius-pill); background: var(--color-hero-progress); transition: background-color 150ms var(--ease); }
.hero-progress button:hover span { background: var(--color-hero-progress-hover); }
.hero-progress button[aria-selected="true"] span { background: var(--color-text); }
.hero-slider[data-hero-tone="dark"] .hero-progress button span { background: var(--color-hero-progress-inverse); }
.hero-slider[data-hero-tone="dark"] .hero-progress button:hover span { background: var(--color-hero-progress-inverse-hover); }
.hero-slider[data-hero-tone="dark"] .hero-progress button[aria-selected="true"] span { background: var(--color-text-inverse); }
.hero-track { height: 400px; }
.hero-slide { width: 100%; height: 400px; display: block; overflow: hidden; }
.hero-slide img { width: 100%; height: 100%; display: block; object-fit: fill; }
.hero-controls { position: absolute; z-index: 6; right: 26px; bottom: 24px; display: flex; gap: 8px; }
.hero-controls button { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: var(--radius-lg); color: var(--color-text); background: var(--color-overlay-control); cursor: pointer; box-shadow: var(--shadow-floating); }
.hero-controls button:hover { color: var(--color-accent); background: var(--color-surface); }
.hero-controls .reverse { transform: rotate(180deg); }
.hero-slide:not([hidden]) img { animation: hero-image-in 320ms var(--ease) both; }
@keyframes hero-image-in { from { opacity: .01; transform: scale(1.008); } }

.toast {
  position: fixed;
  z-index: 200;
  right: 24px;
  bottom: 24px;
  max-width: 360px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  background: var(--color-surface-inverse);
  box-shadow: 0 12px 30px var(--color-toast-shadow);
  font-size: var(--font-size-14);
  animation: toast-in 180ms var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1280px) {
  .container { width: min(1180px, calc(100% - 48px)); }
  .service-inner nav { gap: 18px; }
  .service-end-link { font-size: var(--font-size-12); }
  .main-header-inner { grid-template-columns: 60px 112px minmax(260px, 1fr) auto; gap: 10px; }
  .catalog-menu { padding-inline: 24px; }
  .catalog-menu-shell { grid-template-columns: 270px minmax(0, 1fr); }
  .catalog-menu-nav { padding-inline: 14px; }
  .catalog-detail { padding-left: 30px; padding-right: 30px; }
  .catalog-items { gap-inline: 28px; }
  .catalog-items-dense { gap-inline: 18px; }
  .header-actions :is(button, a) { min-width: 56px; }
  .quick-nav nav { gap: 18px; }
  .hero-slider,
  .hero-track,
  .hero-slide { height: 400px; }
  .promo-grid { grid-template-columns: repeat(3, 1fr); }
  .promo-grid-4,
  .promo-grid-2,
  .promo-grid-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo-item { padding: 22px; }
  .promo-copy { width: 61%; }
  .category-card { min-height: 184px; padding: 17px; }
  .category-card span { font-size: var(--font-size-16); }
  .facts-intro { padding: 42px 52% 42px 42px; }
  .facts-copy { max-width: 530px; }
  .b2b-flow-card { min-height: 274px; padding: 20px; }
  .b2b-flow-card h3 { font-size: var(--font-size-20); }
  .subscription-panel { grid-template-columns: 40% minmax(0, 1fr); }
  .subscription-content { padding: 28px 38px; }
  .subscription-copy h2 { font-size: var(--font-size-32); }
  .footer-main { grid-template-columns: minmax(240px, .8fr) minmax(680px, 2.2fr); gap: 48px; }
  .footer-grid { gap: 24px; }
}

@media (max-width: 1024px) {
  body {
    min-width: 0;
    --font-size-64: 32px;
    --font-size-40: 24px;
    --font-size-32: 24px;
    --font-size-24: 20px;
    --font-size-20: 16px;
    --font-size-16: 14px;
    --type-display-size: 32px;
    --type-page-title-size: 24px;
    --type-title-size: 24px;
    --type-section-title-size: 20px;
    --type-subtitle-size: 16px;
    --type-body-size: 14px;
  }
  .container { width: calc(100% - 48px); }

  .service-bar { height: 40px; min-height: 40px; }
  .service-inner { height: 40px; min-height: 40px; }
  .service-inner a,
  .service-inner button { min-height: 40px; }
  .service-inner nav { width: 100%; }
  .service-inner nav > :not(.service-city-trigger),
  .service-end-link { display: none; }
  .service-city-trigger { min-height: 40px !important; }

  .main-header { z-index: 80; }
  .main-header {
    transition: transform var(--duration-fast) var(--ease);
    will-change: transform;
  }
  .main-header.is-scroll-hidden { transform: translateY(-100%); }
  body.mobile-search-open .main-header {
    position: fixed;
    z-index: 130;
    inset: 0 0 calc(60px + env(safe-area-inset-bottom));
    transform: none;
    will-change: auto;
    background: var(--color-surface);
  }
  body.mobile-search-open .main-header-inner > :not(.search) { visibility: hidden; }
  .main-header-inner {
    min-height: 56px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding-block: 8px;
  }
  .brand-logo { width: 40px; height: 40px; }
  .catalog-button,
  .header-actions,
  .quick-nav { display: none; }
  .mobile-search-toggle { display: none; }
  .main-header .search {
    height: 40px;
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0;
    overflow: hidden;
  }
  .main-header .search input {
    height: 40px;
    min-height: 40px;
    min-width: 0;
    display: block;
    padding: 0 44px 0 12px;
    font-size: var(--font-size-14);
    line-height: 40px;
  }
  .main-header .search:has(.search-clear:not([hidden])) input { padding-right: 44px; }
  .main-header .search-clear { width: 36px; height: 36px; top: 1px; right: 1px; }
  .main-header .search-submit { display: none; }
  .mobile-search-close {
    position: absolute;
    top: 3px;
    right: 47px;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    background: transparent;
  }
  .mobile-search-close { display: none; }
  .main-header .search.is-mobile-open {
    height: auto;
    position: fixed;
    z-index: 110;
    inset: 0 0 calc(60px + env(safe-area-inset-bottom));
    margin: 0;
    padding: 16px 60px 16px 16px;
    border: 0;
    border-radius: 0;
    background: var(--color-surface);
    overflow: visible;
  }
  .main-header .search.is-mobile-open input {
    height: 48px;
    min-height: 48px;
    padding-inline: 14px 44px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    line-height: 48px;
    cursor: text;
  }
  .main-header .search.is-mobile-open .search-clear { top: 22px; right: 64px; }
  .main-header .search.is-mobile-open .mobile-search-close {
    width: 44px;
    height: 44px;
    top: 18px;
    right: 8px;
    display: grid;
  }
  body.mobile-search-open { overflow: hidden; }

  .catalog-menu {
    width: auto;
    height: auto;
    position: fixed;
    z-index: 95;
    inset: 0 0 calc(60px + env(safe-area-inset-bottom));
    padding: 0;
    background: var(--color-surface);
    transform: none;
  }
  .catalog-menu-shell {
    width: 100%;
    height: 100%;
    max-height: none;
    grid-template-columns: 276px minmax(0, 1fr);
    grid-template-rows: 64px minmax(0, 1fr);
    border-radius: 0;
    box-shadow: none;
  }
  .catalog-mobile-head {
    min-height: 64px;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .catalog-mobile-head strong { font-size: var(--font-size-20); }
  .catalog-mobile-head button { width: 48px; height: 48px; border: 0; background: transparent; }
  .catalog-menu-nav { min-height: 0; padding: 18px 14px; overflow-y: auto; }
  .catalog-menu-nav h2 { display: none; }
  .catalog-detail { min-height: 0; padding: 24px; overflow-y: auto; }
  .catalog-mobile-links {
    margin: 16px 12px 0;
    padding-top: 12px;
    display: grid;
    gap: 2px;
    border-top: 1px solid var(--color-border);
  }
  .catalog-mobile-links a,
  .catalog-mobile-links button {
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    border: 0;
    color: var(--color-text-secondary);
    background: transparent;
    text-align: left;
  }

  .mobile-bottom-nav {
    height: calc(60px + env(safe-area-inset-bottom));
    min-height: calc(60px + env(safe-area-inset-bottom));
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 -8px 24px rgb(32 36 42 / 8%);
  }
  /* WebKit перерисовывает иконки-маски в закрепленных панелях при прокрутке, и они
     мерцают. Отдельный слой для таких иконок перерисовку убирает. */
  .mobile-bottom-nav .ds-icon,
  .main-header .ds-icon { will-change: transform; }
  .mobile-bottom-item {
    min-width: 0;
    min-height: 56px;
    position: relative;
    padding: 4px 2px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 0;
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    background: transparent;
    font: inherit;
    font-size: var(--font-size-12);
    line-height: 16px;
    text-decoration: none;
  }
  .mobile-bottom-item .ds-icon { width: 22px; height: 22px; }
  .mobile-bottom-item.is-active,
  .mobile-bottom-item[aria-expanded="true"] { color: var(--color-accent); }
  .mobile-bottom-item b {
    min-width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    left: calc(50% + 8px);
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--color-text-inverse);
    background: var(--color-accent);
    font-size: var(--font-size-12);
  }

  .hero-home { padding: 16px 0 24px; }
  .hero-slider,
  .hero-track,
  .hero-slide { height: auto; aspect-ratio: 1480 / 500; }
  .hero-slider { touch-action: pan-y; }
  .hero-slide img { object-fit: contain; }
  .hero-progress { top: 12px; right: 20px; left: 20px; gap: 8px; }
  .hero-progress button { height: 18px; padding-block: 7px; }
  .hero-controls,
  .edge-controls,
  .category-controls,
  .brand-controls,
  .month-controls { display: none; }

  .section { padding-block: 24px; }
  .section-heading h2,
  .shelf-heading h2,
  .month-heading h2,
  .b2b-heading h2 { font-size: var(--font-size-32); }
  .categories-section { padding-bottom: 24px; }
  .category-shell,
  .brand-shell,
  .shelf-shell { margin-right: -24px; padding-right: 24px; }
  .category-grid,
  .brands-strip,
  .product-shelf,
  .compact-product-shelf { overscroll-behavior-x: contain; scroll-padding-inline: 2px 24px; }
  .product-shelf,
  .compact-product-shelf { scroll-snap-type: none; }
  .product-section .shelf-shell { margin-inline: -24px; padding-inline: 0; }
  .product-section .product-shelf { padding-inline: 24px; scroll-padding-inline: 24px; }
  .category-card { flex-basis: 184px; min-height: 168px; }
  .brand-tile { flex-basis: 158px; min-height: 80px; }

  .product-section,
  .product-section[data-shelf-id="hits"],
  .product-section[data-shelf-id="new"],
  .product-section[data-shelf-id="clearance"] { padding-top: 24px; padding-bottom: 24px; }
  .product-card { flex-basis: clamp(200px, calc((100% - 36px) / 3.2), 260px); }
  .product-media { height: auto; aspect-ratio: 1; }
  .product-gallery-image { padding: 14px; }
  .product-card h3 { min-height: 54px; }

  .month-section { padding: 0 0 24px; }
  .month-stage { padding: 24px; }
  .mini-product-card { flex-basis: min(520px, calc(100% - 24px)); }

  .promotions-section { padding-top: 24px; }
  .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .facts-intro { min-height: 0; padding: 40px 40px 0; }
  .facts-copy { max-width: 680px; }
  .facts-store-photo {
    width: calc(100% + 80px);
    max-width: none;
    height: auto;
    position: relative;
    inset: auto;
    margin: 24px -40px 0;
    aspect-ratio: 16 / 7;
  }
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .b2b-section { padding-block: 24px; }
  .b2b-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2b-flow-card { min-height: 240px; }

  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .news-item { min-height: 224px; padding: 24px; }

  .subscription { padding-bottom: 24px; }
  .subscription-panel { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .subscription-visual { display: none; }
  .subscription-content { padding: 40px; }
  .subscription-input { max-width: none; }

  .shelf-state { min-height: 260px; padding: 32px; grid-template-columns: 56px minmax(0, 1fr); }
  .shelf-state .button { width: 100%; grid-column: 1 / -1; }

  .footer { padding-top: 48px; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .footer-main { padding-bottom: 40px; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footer-about > p { margin: 20px 0 24px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--color-footer-border); }
  .footer-group { width: 100%; display: block; border-bottom: 1px solid var(--color-footer-border); }
  .footer-group-desktop-heading { display: none !important; }
  .footer-group details { width: 100%; }
  .footer-group summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--color-text-inverse);
    font-weight: var(--weight-bold);
    cursor: pointer;
    list-style: none;
  }
  .footer-group summary::-webkit-details-marker { display: none; }
  .footer-group summary::after {
    width: 18px;
    height: 18px;
    content: "";
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("./assets/icons/ui/chevron-down.svg") center / contain no-repeat;
    mask: url("./assets/icons/ui/chevron-down.svg") center / contain no-repeat;
    transition: transform var(--duration-fast) var(--ease);
  }
  .footer-group details[open] summary::after { transform: rotate(180deg); }
  .footer-group-links { padding: 0 0 16px; }
  .footer-grid .footer-group-route {
    display: inline-flex !important;
    min-height: 44px;
    margin-bottom: 0;
    align-items: center;
    color: var(--color-footer-text-muted);
    font-weight: var(--weight-regular);
  }
  .footer-grid .footer-group-route[aria-current="page"] { color: var(--color-footer-text-muted); }
  .footer-grid button,
  .footer-grid a { min-height: 44px; }
  .footer-bottom { min-height: 0; padding-block: 24px; align-items: flex-start; flex-direction: column; gap: 12px; }
  .footer-legal { justify-content: flex-start; }

  .city-selector-dialog {
    width: min(560px, calc(100% - 48px));
    height: min(760px, calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
  .city-selector-shell { padding: 24px; }
  .city-selector-option { min-height: 44px; }
  .footer-feedback-dialog {
    width: calc(100vw - 48px);
    max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .footer-feedback-form { max-height: inherit; }

  .toast { right: 24px; bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width: 767px) {
  .container { width: calc(100% - 32px); }

  .catalog-menu-shell { display: block; overflow-y: auto; }
  .catalog-mobile-head { position: sticky; z-index: 2; top: 0; padding-inline: 16px; }
  .catalog-menu-nav { padding: 16px; overflow: visible; }
  .catalog-section-tabs {
    margin-right: -16px;
    padding: 2px 16px 8px 2px;
    display: grid;
    grid-auto-columns: minmax(152px, 44vw);
    grid-auto-flow: column;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .catalog-section-tabs::-webkit-scrollbar { display: none; }
  .catalog-section-tab {
    min-height: 52px;
    grid-template-columns: 22px minmax(0, 1fr);
    scroll-snap-align: start;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .catalog-section-tab .icon:last-child { display: none; }
  .catalog-all-link { margin: 8px 0 0; }
  .catalog-mobile-links { margin-inline: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-detail { padding: 0 16px 24px; overflow: visible; }
  .catalog-detail-head { padding-top: 8px; }
  .catalog-items,
  .catalog-items-dense,
  .catalog-items-fasteners { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; gap: 2px; }
  .catalog-items-fasteners .catalog-nested-item ul { grid-template-columns: minmax(0, 1fr); }
  .catalog-items > button,
  .catalog-items > a,
  .catalog-nested-item > button,
  .catalog-nested-item li button { min-height: 44px; }
  .catalog-utility { min-height: 96px; padding-left: 16px; }

  .hero-home { padding-bottom: 16px; }
  .hero-progress { top: 3px; right: 12px; left: 12px; gap: 6px; }
  .hero-progress button span { height: 3px; }

  .section { padding-block: 16px; }
  .section-heading { align-items: flex-start; gap: 16px; }
  .section-heading h2,
  .shelf-heading h2,
  .month-heading h2,
  .b2b-heading h2 { font-size: var(--font-size-32); }
  .section-heading .text-link { flex: 0 0 auto; }
  .categories-section { padding-block: 0; }
  .categories-section .container { display: grid; }
  .category-heading,
  .category-slider { display: contents; }
  .category-heading > div {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .category-heading .text-link {
    display: none;
  }
  .category-shell {
    grid-row: 1;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .brand-shell,
  .shelf-shell { margin-right: -16px; padding-right: 16px; }
  .brands-section { overflow: hidden; }
  .brands-section .brand-shell { margin-inline: -16px; padding-inline: 0; overflow: visible; }
  .brands-section .brands-strip { padding-inline: 16px; scroll-padding-inline: 16px; }
  .brands-strip,
  .product-shelf,
  .compact-product-shelf { scroll-padding-right: 16px; }
  .brands-strip { gap: 12px; }
  .category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .product-shelf,
  .compact-product-shelf { gap: 8px; }
  .product-section .shelf-shell { margin-inline: -16px; padding-inline: 0; }
  .product-section .product-shelf { padding-inline: 16px; scroll-padding-inline: 16px; }
  .category-card {
    width: auto;
    min-width: 0;
    min-height: 132px;
    padding: 12px;
    scroll-snap-align: none;
  }
  .category-card span { font-size: var(--font-size-12); }
  .category-card img { width: 82%; height: 66%; }
  .brand-tile { flex-basis: 142px; min-height: 72px; }
  .brand-tile span { font-size: var(--font-size-20); }

  .product-section,
  .product-section[data-shelf-id="hits"],
  .product-section[data-shelf-id="new"],
  .product-section[data-shelf-id="clearance"] { padding-block: 16px; }
  .product-section[data-shelf-id="hits"],
  .product-section[data-shelf-id="new"],
  .product-section[data-shelf-id="clearance"] { padding-block: 24px; }
  .product-card { flex-basis: calc((100% - 16px) / 2.08); padding: 6px 6px 10px; }
  .product-gallery-image { padding: 10px; }
  .product-media-link:focus-visible { outline-offset: -2px; }
  .product-favorite { top: 4px; right: 4px; }
  .media-tags { left: 6px; bottom: 6px; }
  .product-card h3 { margin-block: 3px 6px; }
  .shelf-heading h2 { margin-bottom: 4px; }
  .price { font-size: var(--font-size-24); }
  .price-row { gap-inline: 5px; }
  .product-button { gap: 4px; padding-inline: 6px; }
  .product-button .icon { width: 16px; height: 16px; }

  .month-section { padding: 0; overflow: hidden; }
  .month-stage { margin-inline: -16px; padding: 24px 0; border-radius: 0; overflow: visible; }
  .month-heading { padding-inline: 16px; }
  .month-shell { overflow: visible; }
  .compact-product-shelf { padding-inline: 16px; scroll-padding-inline: 16px; }
  .mini-product-card {
    flex-basis: calc(100% - 24px);
    min-height: 152px;
    grid-template-columns: 96px minmax(0, 1fr) 44px;
    gap: 10px;
  }
  .mini-product-media,
  .mini-product-media-link { width: 96px; min-height: 126px; }
  .mini-cart-button { width: 44px; height: 44px; }
  .mini-quantity-control { width: 44px; }

  .promo-grid { grid-template-columns: minmax(0, 1fr); }
  .promo-item { min-height: 220px; aspect-ratio: auto; padding: 20px; }
  .promo-item strong { font-size: var(--font-size-24); }

  .facts-intro { min-height: 0; padding: 24px 24px 0; }
  .facts-intro h2 { font-size: var(--font-size-32); }
  .facts-intro p { margin-bottom: 8px; }
  .facts-store-photo {
    width: calc(100% + 48px);
    max-width: none;
    height: auto;
    position: relative;
    inset: auto;
    margin: 24px -24px 0;
    aspect-ratio: 16 / 9;
  }
  .facts-grid {
    margin-right: -16px;
    padding-right: 16px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .facts-grid::-webkit-scrollbar { display: none; }
  .fact { min-height: 96px; flex: 0 0 calc(100% - 44px); padding: 12px 16px; flex-direction: row; justify-content: flex-start; text-align: left; }
  .fact div { justify-items: start; }

  .facts-band { padding: 24px 0 0; }

  .b2b-section { padding-block: 24px; }
  .b2b-flow { grid-template-columns: minmax(0, 1fr); }
  .b2b-flow-card { min-height: 0; position: relative; padding: 20px; }
  .b2b-step-number { position: absolute; top: 18px; right: 18px; font-size: var(--font-size-20); }
  .b2b-flow-card > div { margin-top: 0; }
  .b2b-flow-card h3 { padding-right: 44px; }
  .b2b-heading h2 { margin-bottom: 4px; }

  .news-section { padding-block: 24px; }
  .news-section .section-heading { align-items: center; }
  .news-section .section-heading h2 { margin-bottom: 4px; }
  .news-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .news-item { min-height: 144px; padding: 16px; column-gap: 0; }
  .news-item-footer { gap: 0; }
  .news-item-arrow { width: 36px; height: 36px; }
  .news-item-arrow .icon { width: 16px; height: 16px; }

  .subscription { padding-bottom: 24px; }
  .subscription-content { padding: 28px 20px; gap: 18px; }
  .subscription-copy h2 { font-size: var(--font-size-32); }
  .subscription-input { display: grid; gap: 10px; }
  .subscription input { min-height: 52px; padding: 0 14px; }
  .subscription-submit { width: 100%; min-height: 48px; position: static; }

  .shelf-state { min-height: 280px; padding: 24px; grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .shelf-state .state-icon { width: 48px; height: 48px; }
  .shelf-state .button { grid-column: auto; }

  .footer { padding-top: 32px; }
  .footer .brand-logo { width: 64px; height: 64px; }
  .footer-main { gap: 0; }
  .footer-about { display: contents; }
  .footer-about .brand { order: 1; margin-bottom: 8px; }
  .footer-about > p { order: 2; margin: 0 0 32px; }
  .footer-grid { order: 3; margin-bottom: 32px; }
  .footer-socials { order: 4; margin-bottom: 20px; }
  .footer-address { order: 5; margin-top: 0; }
  .footer-bottom { row-gap: 8px; }
  .footer-bottom > span { order: 2; }
  .footer-legal { order: 1; display: grid; gap: 4px; }
  .footer-legal a { min-height: 24px; }
  .footer-feedback-dialog,
  .city-selector-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .city-selector-shell { padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
  .footer-feedback-form { max-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
  .toast { right: 16px; left: 16px; max-width: none; }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .main-header { transition: none; }
}

@media (max-width: 1024px) and (pointer: fine) {
  .hero-slider,
  .category-grid,
  .brands-strip,
  .product-shelf,
  .compact-product-shelf,
  .facts-grid,
  .catalog-section-tabs,
  .ds-tabs[role="tablist"] { cursor: grab; }

  .hero-slider.is-mouse-dragging,
  .category-grid.is-mouse-dragging,
  .brands-strip.is-mouse-dragging,
  .product-shelf.is-mouse-dragging,
  .compact-product-shelf.is-mouse-dragging,
  .facts-grid.is-mouse-dragging,
  .catalog-section-tabs.is-mouse-dragging,
  .ds-tabs[role="tablist"].is-mouse-dragging {
    cursor: grabbing;
    user-select: none;
  }

  .category-grid.is-mouse-dragging,
  .brands-strip.is-mouse-dragging,
  .product-shelf.is-mouse-dragging,
  .compact-product-shelf.is-mouse-dragging,
  .catalog-section-tabs.is-mouse-dragging,
  .ds-tabs[role="tablist"].is-mouse-dragging { scroll-snap-type: none; }
}

@media (max-width: 359px) {
  .mobile-bottom-nav {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }
  .mobile-bottom-item { padding-inline: 0; letter-spacing: -0.03em; }
  .category-card { min-height: 124px; padding: 8px; }
  .category-card span { font-size: 11px; line-height: 1.2; hyphens: auto; }
  .product-card { flex-basis: min(78%, 220px); }
  .mini-product-card { grid-template-columns: 72px minmax(0, 1fr) 44px; padding: 10px; gap: 8px; }
  .mini-product-media,
  .mini-product-media-link { width: 72px; min-height: 112px; }
  .catalog-mobile-links { grid-template-columns: minmax(0, 1fr); }
}




@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}