/* ========================================
   SBS Theme - Main Stylesheet
   ======================================== */

/* --- @font-face --- */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/exo/Exo-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* --- Custom Properties --- */
:root {
  --sbs-primary: #b6242a;
  --sbs-text-dark: #232e38;
  --sbs-text-secondary: #70777c;
  --sbs-text-tertiary: #666d73;
  --sbs-bg-gray: #f8f9f9;
  --sbs-bg-button: #f4f4f4;
  --sbs-border-light: #eaecf0;
  --sbs-border-medium: #d6d8de;
  --sbs-border-dark: #949494;
  --sbs-border-soft: #e8e8e8;
  --sbs-white: #ffffff;
  --sbs-primary-dark: #9e1f24;
  --sbs-danger: #e30613;

  --sbs-font-ui: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sbs-font-logo: 'Exo', sans-serif;

  --sbs-sidebar-width: 280px;
  --sbs-page-width: 1440px;

  --sbs-shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

  --sbs-radius-sm: 8px;
  --sbs-radius-md: 10px;
  --sbs-radius-lg: 12px;
  --sbs-radius-xl: 16px;
  --sbs-radius-2xl: 24px;
}

/* --- Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--sbs-font-ui);
  line-height: 1.6;
  color: var(--sbs-text-dark);
  background: var(--sbs-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

/* ========================================
   Page Grid Layout
   ======================================== */
.sbs-page {
  display: grid;
  grid-template-columns: var(--sbs-sidebar-width) 1fr;
  grid-template-rows: 1fr auto;
  max-width: var(--sbs-page-width);
  margin: 0 auto;
  min-height: 100vh;
}

.sbs-sidebar {
  width: var(--sbs-sidebar-width);
  background: var(--sbs-bg-gray);
}

.sbs-sidebar-inner {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sbs-main-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ========================================
   Sidebar
   ======================================== */
.sbs-sidebar-catalogue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px;
  background: var(--sbs-bg-button);
  border: 1px solid var(--sbs-border-dark);
  border-radius: var(--sbs-radius-lg);
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  color: var(--sbs-text-dark);
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sbs-sidebar-catalogue-btn:hover {
  background: #323232;
  color: var(--sbs-white);
}

.sbs-sidebar-catalogue-btn:hover svg {
  color: var(--sbs-white);
}

.sbs-sidebar-catalogue-btn svg {
  flex-shrink: 0;
}

.sbs-sidebar-catalogue-btn span {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  text-align: center;
}

.sbs-sidebar-categories {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.sbs-sidebar-categories::-webkit-scrollbar {
  display: none;
}

.sbs-sidebar-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 6px 8px 12px;
  border-radius: var(--sbs-radius-sm);
  cursor: pointer;
  text-decoration: none;
  color: var(--sbs-text-dark);
  transition: background-color 0.15s ease;
}

.sbs-sidebar-category:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sbs-sidebar-category.is-active {
  background: var(--sbs-text-dark);
  border-radius: 10px;
}

.sbs-sidebar-category.is-active .sbs-sidebar-category-name {
  color: #f5f5f5;
}

.sbs-sidebar-category.is-active .sbs-sidebar-category-icon svg {
  color: #f5f5f5;
}

.sbs-sidebar-category.is-active:hover {
  background: var(--sbs-text-dark);
}

.sbs-sidebar-category-name {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--sbs-text-dark);
  flex: 1;
  min-width: 0;
}

.sbs-sidebar-category-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sbs-sidebar-category-icon svg {
  width: 20px;
  height: 20px;
}

/* ========================================
   Header
   ======================================== */
#header {
  background: var(--sbs-white);
  padding: 0;
  border-bottom: none;
  /* audit 2.0: keep the header (top bar + search + cart) reachable while
     scrolling long pages. z-index 50 stays below the mobile/filter drawers and
     their overlays (z-index 100+), so those still render above the header.
     Sticky needs a non-scroll-container ancestor chain — see .sbs-main-area,
     which uses overflow-x: clip (not hidden) at ≤1024px so this keeps working. */
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Top Bar */
.sbs-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.sbs-header-top-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sbs-header-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo */
.sbs-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 30.3px;
  flex-shrink: 0;
}

.sbs-logo-symbol {
  position: relative;
  width: 39.6px;
  height: 30.3px;
  flex-shrink: 0;
}

/* SBSIL-159: size the two symbol layers in % of .sbs-logo-symbol so they scale
   with the box. The SVGs used fixed px width + a fixed px offset, so when the
   mobile breakpoint shrank .sbs-logo-symbol the artwork kept its desktop size,
   overflowed the box and overlapped the wordmark. Ratios are taken from the
   desktop box (39.6 × 30.3): rays 18/39.6, SB 32.9/39.6 offset 6.69/39.6. */
.sbs-logo-symbol svg {
  position: absolute;
  top: 0;
  height: auto;
}

.sbs-logo-symbol svg:first-child {
  left: 0;
  width: 45.45%;
}

.sbs-logo-symbol svg:last-child {
  left: 16.89%;
  width: 83.08%;
}

.sbs-logo-text {
  font-family: var(--sbs-font-logo);
  font-weight: 800;
  font-style: italic;
  font-size: 23.03px;
  line-height: 1.2;
  letter-spacing: -0.4606px;
  color: var(--sbs-primary);
  margin-left: 5.5px;
  font-feature-settings: 'case' 1, 'liga' 0, 'lnum' 1, 'pnum' 1;
  white-space: nowrap;
}

/* Portal Switch */
.sbs-portal-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 4px;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-lg);
  position: relative;
}

.sbs-portal-switch-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: 40px;
  border-radius: var(--sbs-radius-md);
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.sbs-portal-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--sbs-radius-md);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  text-align: center;
  user-select: none;
  cursor: pointer;
  transition: color 0.3s ease;
  border: none;
  background: none;
  color: var(--sbs-text-secondary);
}

.sbs-portal-tab.is-active {
  color: var(--sbs-text-dark);
}

/* Header Buttons */
.sbs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  box-shadow: var(--sbs-shadow-sm);
  cursor: pointer;
  text-decoration: none;
  color: var(--sbs-text-dark);
  transition: background-color 0.15s ease;
}

.sbs-btn:hover {
  background: var(--sbs-bg-gray);
}

.sbs-btn-lang {
  gap: 10px;
  padding: 10px 14px 10px 10px;
}

.sbs-btn-lang .sbs-icon-flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.sbs-btn-lang .sbs-icon-flag svg {
  width: 24px;
  height: 24px;
}

.sbs-btn-lang .sbs-icon-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sbs-btn-lang .sbs-icon-chevron svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.sbs-lang-dropdown.is-open .sbs-btn-lang .sbs-icon-chevron svg {
  transform: rotate(180deg);
}

/* Language Dropdown */
.sbs-lang-dropdown {
  position: relative;
}

.sbs-lang-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 100%;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  box-shadow: var(--sbs-shadow-sm);
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.sbs-lang-dropdown.is-open .sbs-lang-dropdown-menu {
  display: block;
}

/* Footer language dropdown — opens upward */
.sbs-footer-lang .sbs-lang-dropdown-menu {
  top: auto;
  bottom: calc(100% + 4px);
}

.sbs-lang-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--sbs-text-dark);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.sbs-lang-dropdown-item:hover {
  background: var(--sbs-bg-gray);
}

.sbs-lang-dropdown-item.is-active {
  font-weight: 500;
}

.sbs-lang-dropdown-item .sbs-icon-flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.sbs-lang-dropdown-item .sbs-icon-flag svg {
  width: 24px;
  height: 24px;
}

.sbs-btn-login {
  gap: 12px;
  padding: 10px 16px;
}

.sbs-btn-login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(180deg) scaleY(-1);
  width: 16px;
  height: 16px;
}

.sbs-btn-login-icon svg {
  width: 16px;
  height: 16px;
}

.sbs-btn-login-text {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  text-align: center;
}

/* Profile dropdown */
.sbs-profile-dropdown {
  position: relative;
}

.sbs-profile-trigger {
  cursor: pointer;
}

.sbs-profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sbs-bg-gray);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 12px;
  color: var(--sbs-text-dark);
  flex-shrink: 0;
}

.sbs-profile-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.sbs-profile-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 8px;
  width: 260px;
  z-index: 100;
}

.sbs-profile-menu-inner {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.sbs-profile-dropdown:hover .sbs-profile-menu {
  display: block;
}

.sbs-profile-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--sbs-border-light);
}

.sbs-profile-menu-name {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  color: var(--sbs-text-dark);
}

.sbs-profile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.sbs-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  font-weight: 400;
  color: var(--sbs-text-dark);
  text-decoration: none;
  transition: background 0.15s;
}

.sbs-profile-menu-item:hover {
  background: var(--sbs-bg-gray);
}

.sbs-profile-menu-item .sbs-profile-menu-icon {
  flex-shrink: 0;
  display: block;
}

.sbs-profile-menu-divider {
  border: none;
  height: 1px;
  background: var(--sbs-border-light);
  margin: 4px 0;
}

/* Search Bar */
.sbs-search-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin: 0 24px;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-xl);
}

.sbs-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.sbs-search-input-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  padding: 12px 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-lg);
}

.sbs-search-input-icon {
  display: flex;
  align-items: center;
  height: 24px;
  flex-shrink: 0;
}

.sbs-search-input-icon svg {
  width: 16px;
  height: 16px;
}

.sbs-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  background: transparent;
  min-width: 0;
}

.sbs-search-input::placeholder {
  color: var(--sbs-text-secondary);
}

.sbs-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 10px 14px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-lg);
  box-shadow: var(--sbs-shadow-sm);
  text-decoration: none;
  color: var(--sbs-text-dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.sbs-cart-btn:hover {
  background: var(--sbs-bg-gray);
}

.sbs-cart-btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sbs-cart-btn-icon svg {
  width: 24px;
  height: 24px;
}

.sbs-cart-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  background: var(--sbs-primary);
  border-radius: var(--sbs-radius-sm);
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: -0.24px;
  color: var(--sbs-white);
}

/* Search Autocomplete Dropdown */
.sbs-search-bar-wrap {
  margin: 0 24px;
}

.sbs-search-bar-wrap .sbs-search-bar {
  margin: 0;
}

.sbs-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-top: none;
  border-radius: 0 0 var(--sbs-radius-xl) var(--sbs-radius-xl);
  box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.2);
  z-index: 100;
}

.is-search-open .sbs-search-input-wrap {
  position: relative;
  border-radius: var(--sbs-radius-lg) var(--sbs-radius-lg) 0 0;
  border-bottom: none;
  background: #ffffff;
  z-index: 101;
}

.sbs-search-dropdown[hidden] {
  display: none;
}

.sbs-search-results {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sbs-border-medium);
}

.sbs-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px;
  border-radius: var(--sbs-radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.sbs-search-item:hover {
  background: var(--sbs-bg-gray);
}

.sbs-search-item + .sbs-search-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sbs-border-medium);
  border-radius: 0;
}

.sbs-search-item + .sbs-search-item:hover {
  border-radius: 0 0 var(--sbs-radius-sm) var(--sbs-radius-sm);
}

.sbs-search-item-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.sbs-search-item-image {
  width: 72px;
  height: 57px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 1px;
}

div.sbs-search-item-image {
  background: var(--sbs-bg-gray);
}

.sbs-search-item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sbs-search-item-name {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.32;
  color: #333333;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sbs-search-item-code {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.32;
  color: var(--sbs-text-tertiary);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-search-item-code-value {
  font-weight: 500;
  color: var(--sbs-text-dark);
  letter-spacing: 0.45px;
}

.sbs-search-item-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.sbs-search-item-price {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--sbs-primary);
}

.sbs-search-item-old-price {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 1.12px;
  color: #757575;
  text-decoration: line-through;
}

.sbs-search-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 48px;
  padding: 0 24px;
  margin-top: 16px;
  box-sizing: border-box;
  background: var(--sbs-primary);
  color: var(--sbs-white);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  text-decoration: none;
  border-radius: var(--sbs-radius-lg);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sbs-search-show-all:hover {
  background: var(--sbs-primary-dark);
  color: var(--sbs-white);
}

.sbs-search-show-all svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sbs-search-item-highlight {
  color: var(--sbs-primary);
}

.sbs-search-dropdown-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sbs-loader {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--sbs-border-medium);
  border-top-color: var(--sbs-primary);
  border-radius: 50%;
  animation: sbs-spin 0.7s linear infinite;
}

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

/* ========================================
   Content Area
   ======================================== */
#wrapper {
  flex: 1;
  padding: 20px 0;
}

#index #wrapper {
  padding-bottom: 0;
}

.container {
  max-width: 100%;
  padding: 0 24px;
}

#left-column,
#right-column {
  display: none;
}

#content-wrapper {
  width: 100%;
}

.page-header h1 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

/* ========================================
   Footer
   ======================================== */
#footer {
  grid-column: 1 / -1;
  background: var(--sbs-white);
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.sbs-footer {
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- Footer Top: logo | nav (centered) | socials+lang --- */
.sbs-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: 40px;
}

.sbs-footer-logo {
  flex-shrink: 0;
}

.sbs-footer-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.sbs-footer-nav-list {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbs-footer-nav-link {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.sbs-footer-nav-link:hover {
  color: var(--sbs-primary);
}

.sbs-footer-nav-sep {
  width: 1px;
  height: 20px;
  background: var(--sbs-border-light);
}

/* --- Footer Right: socials + language --- */
.sbs-footer-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.sbs-footer-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sbs-footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid var(--sbs-border-light);
  border-radius: 100px;
  background: var(--sbs-white);
  text-decoration: none;
  color: var(--sbs-text-dark);
  transition: background-color 0.15s ease;
}

.sbs-footer-social-btn:hover {
  background: var(--sbs-bg-gray);
}

.sbs-footer-social-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* --- Footer Divider --- */
.sbs-footer-divider {
  border: none;
  border-top: 1px solid var(--sbs-border-light);
  margin: 0;
}

/* --- Footer Bottom: links + copyright --- */
.sbs-footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.sbs-footer-links {
  display: flex;
  align-items: center;
  gap: 40px;
  /* SBSIL-151: wrap so the bottom row's min-content can't exceed the viewport.
     On single-column pages (.sbs-page forced to 1fr — simple/auth pages at any
     width, and every page on the 1024-768 range) the nowrap links + copyright
     otherwise inflated the grid track past the viewport → page-level horizontal
     scroll. At typical desktop widths (≥~1150px) the row fits one line so wrap
     is inert; on the narrow 1025–1149px band it wraps to a second line instead
     of overflowing. */
  flex-wrap: wrap;
}

.sbs-footer-link {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.sbs-footer-link:hover {
  color: var(--sbs-text-dark);
}

.sbs-footer-copyright {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-secondary);
  white-space: nowrap;
  text-align: right;
}

/* ========================================
   Alerts
   ======================================== */
.alert {
  padding: 12px 20px;
  margin-bottom: 15px;
  border-radius: 4px;
}

.alert-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* ========================================
   Homepage section spacing
   Зазор задаётся только между соседними секциями. Модули с пустыми
   данными не рендерят `<section>` (guard `{if !empty(...)}` в Smarty),
   поэтому отключение любого модуля не приводит к слипанию соседей.
   Селектор `> section + section` намеренно НЕ затрагивает другие
   дочерние элементы `.page-home` (нотификации в `page_content_top`
   и т.п.), чтобы они не получали лишний отступ.
   ======================================== */
.page-home > section + section {
  margin-top: 56px;
}

/* ========================================
   Banner Carousel (Homepage)
   ======================================== */
.sbs-banner-carousel {
  position: relative;
}

.sbs-banner-carousel-viewport {
  border-radius: var(--sbs-radius-2xl);
  overflow: clip;
}

.sbs-banner-carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.sbs-banner-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
}

.sbs-banner-carousel-slide img {
  width: 100%;
  height: 463px;
  object-fit: cover;
  display: block;
}

.sbs-banner-carousel-slide a {
  display: block;
}

.sbs-banner-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 89px;
  background: var(--sbs-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  transition: background-color 0.15s ease;
  box-shadow: inset 0 0 9.6px 0 rgba(0, 0, 0, 0.04);
  color: var(--sbs-text-dark);
}

.sbs-banner-carousel-arrow:hover {
  background: #f5f5f5;
}

.sbs-banner-carousel-arrow--left {
  left: 0;
  border-radius: 0 12px 12px 0;
  border-top: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  border-left: none;
}

.sbs-banner-carousel-arrow--right {
  right: 0;
  border-radius: 12px 0 0 12px;
  border-top: 1px solid #f1f1f1;
  border-left: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  border-right: none;
}

.sbs-banner-carousel-arrow svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Desktop: controls wrapper as contents, dots hidden */
.sbs-banner-carousel-controls {
  display: contents;
}

.sbs-banner-carousel-dots {
  display: none;
}

/* Dot shared style */
.sbs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sbs-border-medium);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sbs-dot.is-active {
  background: var(--sbs-text-dark);
}

/* ========================================
   CTA Banner (Homepage)
   ======================================== */
.sbs-cta-banner {
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: clip;
}

.sbs-cta-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  padding: 80px 88px;
}

.sbs-cta-banner-left {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 431 1 0;
  min-width: 0;
}

.sbs-cta-banner-divider {
  width: 1px;
  align-self: stretch;
  background: var(--sbs-border-soft);
  flex-shrink: 0;
}

.sbs-cta-banner-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 394 1 0;
  min-width: 0;
}

.sbs-cta-banner-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.96px;
  color: var(--sbs-text-dark);
  margin: 0;
}

.sbs-cta-banner-left .sbs-cta-banner-title {
  max-width: 394px;
}

.sbs-cta-banner-highlight {
  color: var(--sbs-primary);
}

.sbs-cta-banner-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sbs-cta-banner-benefit {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sbs-cta-banner-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-soft);
  border-radius: var(--sbs-radius-sm);
  flex-shrink: 0;
}

.sbs-cta-banner-benefit-icon img {
  width: 24px;
  height: 24px;
}

.sbs-cta-banner-benefit-text {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.48;
  letter-spacing: -0.16px;
  color: var(--sbs-text-dark);
  margin: 0;
}

.sbs-cta-banner-right-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sbs-cta-banner-subtitle {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.16px;
  color: var(--sbs-text-tertiary);
  margin: 0;
  max-width: 343px;
}

.sbs-cta-banner-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 14px;
  height: 64px;
  padding: 20px 24px;
  background: var(--sbs-primary);
  color: var(--sbs-white);
  border-radius: var(--sbs-radius-lg);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.sbs-cta-banner-btn:hover {
  background: var(--sbs-primary-dark);
  color: var(--sbs-white);
}

.sbs-cta-banner-btn span {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}

/* CTA banner: keep horizontal layout on tablet/desktop, just compress padding
   so the 431/394 proportional columns get more room with the 280px sidebar. */
@media (max-width: 1400px) {
  .sbs-cta-banner-inner {
    padding: 48px 40px;
    gap: 40px;
  }
}

.sbs-cta-banner-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ========================================
   Latest News Cards (Homepage)
   ======================================== */
.sbs-latest-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.sbs-latest-news-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 590px;
  text-align: center;
}

.sbs-latest-news-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.16;
  letter-spacing: -1.08px;
  color: var(--sbs-text-dark);
  margin: 0;
}

.sbs-latest-news-subtitle {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
  color: var(--sbs-text-tertiary);
  margin: 0;
}

.sbs-latest-news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  width: 100%;
}

.sbs-latest-news-card {
  width: 302px;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: clip;
}

.sbs-latest-news-card-img {
  height: 212px;
  overflow: clip;
}

.sbs-latest-news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sbs-latest-news-card-body {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sbs-latest-news-card-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.54px;
  color: var(--sbs-text-dark);
  margin: 0;
  max-height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sbs-latest-news-card-title a {
  color: inherit;
  text-decoration: none;
}

.sbs-latest-news-card-title a:hover {
  color: var(--sbs-primary);
}

.sbs-latest-news-card-date {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.14px;
  color: var(--sbs-text-tertiary);
}

.sbs-latest-news-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 10px 20px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  box-shadow: var(--sbs-shadow-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.sbs-latest-news-btn:hover {
  background: #f9fafb;
}

.sbs-latest-news-btn span {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
}

/* ========================================
   Partners Section (Homepage)
   ======================================== */
.sbs-partners {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.sbs-partners-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 590px;
  text-align: center;
}

.sbs-partners-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.16;
  letter-spacing: -1.08px;
  color: var(--sbs-text-dark);
  margin: 0;
}

.sbs-partners-subtitle {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
  color: var(--sbs-text-tertiary);
  margin: 0;
}

.sbs-partners-grid {
  display: flex;
  gap: 24px;
  width: 100%;
}

.sbs-partners-card {
  flex: 1;
  height: 192px;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sbs-partners-logo {
  opacity: 0.8;
  max-width: 140px;
  max-height: 56px;
  width: auto;
  height: auto;
}

/* ========================================
   News Cards (Homepage)
   ======================================== */
.sbs-news-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sbs-news-cards-row {
  display: flex;
  gap: 24px;
}

.sbs-news-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
  display: flex;
}

.sbs-news-card-title-link {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .sbs-news-card-title-link:hover {
    color: var(--sbs-primary);
  }
}

.sbs-news-card-title-link:focus-visible {
  outline: 2px solid var(--sbs-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.sbs-news-card--large {
  min-height: 500px;
}

.sbs-news-card--small {
  min-height: 290px;
}

/* Card image */
.sbs-news-card-img {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 16px;
}

.sbs-news-card--large .sbs-news-card-img {
  width: 160px;
  height: 160px;
}

.sbs-news-card--small .sbs-news-card-img {
  width: 120px;
  height: 120px;
}

.sbs-news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--sbs-radius-lg);
  display: block;
}

/* Card body */
.sbs-news-card-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 16px 16px 0;
}

.sbs-news-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sbs-news-card-title {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--sbs-text-dark);
  margin: 0;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-news-card-desc {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sbs-text-secondary);
}

.sbs-news-card-desc p {
  margin: 0 0 4px;
}

.sbs-news-card-desc p:last-child {
  margin-bottom: 0;
}

.sbs-news-card-desc strong,
.sbs-news-card-desc a {
  color: var(--sbs-primary);
}

.sbs-news-card-desc a {
  text-decoration: underline;
}

.sbs-news-card-desc a:hover {
  color: var(--sbs-primary-dark);
}

.sbs-news-card-desc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sbs-news-card-desc ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sbs-news-card-desc ul li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--sbs-primary);
  flex-shrink: 0;
  margin-top: 8px;
}

.sbs-news-card-link {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sbs-text-secondary);
  margin: 0;
}

.sbs-news-card-link span {
  color: var(--sbs-primary);
  text-decoration: underline;
}

/* Bullet list */
.sbs-news-card-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sbs-news-card-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sbs-news-card-bullets li {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sbs-text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sbs-news-card-bullets li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--sbs-primary);
  flex-shrink: 0;
  margin-top: 8px;
}

/* Meta: tags + date */
.sbs-news-card-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sbs-news-card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sbs-news-card-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: 300px;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: #323232;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sbs-news-card-date {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.14px;
  color: rgba(102, 109, 115, 0.8);
}

/* ========================================
   Stub placeholder (dev only)
   ======================================== */
.sbs-stub {
  padding: 40px 20px;
  text-align: center;
  background: #f0f4f8;
  border: 2px dashed #b0bec5;
  border-radius: 8px;
  margin: 20px 0;
  color: #546e7a;
}

.sbs-stub h2 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.sbs-stub p {
  font-size: 0.9rem;
}

.sbs-stub-clear {
  margin-top: 16px;
  padding: 8px 20px;
  background: var(--sbs-primary);
  color: var(--sbs-white);
  border: none;
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}

.sbs-stub-clear:hover {
  background: var(--sbs-primary-dark);
}

/* ========================================
   Mobile Drawer (hidden on desktop)
   ======================================== */
.sbs-mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sbs-mobile-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.sbs-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--sbs-white);
  z-index: 101;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sbs-mobile-drawer.is-open {
  transform: translateX(0);
}

.sbs-mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  flex-shrink: 0;
}

.sbs-mobile-drawer-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sbs-mobile-drawer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sbs-cart-btn--drawer {
  height: 40px;
  padding: 10px 16px;
  gap: 12px;
  border-radius: var(--sbs-radius-sm);
  border-color: var(--sbs-border-light);
}

.sbs-mobile-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  background: var(--sbs-white);
  box-shadow: var(--sbs-shadow-sm);
  cursor: pointer;
  color: var(--sbs-text-dark);
}

/* Panels container — holds main + nested catalog panels (only active one visible) */
.sbs-mobile-drawer-panels {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.sbs-mobile-drawer-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--sbs-white);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sbs-mobile-drawer-panel.is-to-left {
  transform: translateX(-100%);
}

.sbs-mobile-drawer-panel.is-active {
  transform: translateX(0);
}

.sbs-mobile-drawer-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 24px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sbs-mobile-drawer-panel-footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  flex-shrink: 0;
}

/* Drawer — Back button */
.sbs-drawer-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sbs-text-secondary);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.28px;
  align-self: flex-start;
}

.sbs-drawer-back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--sbs-text-secondary);
  transform: rotate(180deg);
}

/* Drawer — Category list (panels that drill down) */
.sbs-drawer-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sbs-drawer-cat-item {
  margin: 0;
  padding: 0;
}

.sbs-drawer-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: var(--sbs-font-ui);
  /* audit 2.0: aligned to the main drawer-menu type scale (.sbs-mobile-drawer-menu-item
     is 20px/500). Categories one step down at 16px/500 keep the hierarchy
     (menu > categories) while removing the "big menu / tiny categories" mismatch. */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
}

.sbs-drawer-cat-name {
  flex: 1;
  min-width: 0;
}

/* Sub-panels are fetched on demand (see theme.js "Lazy catalog panels"):
   dim the row while its panel is in flight, and surface a failed fetch
   inline instead of leaving the tap silently unanswered. */
.sbs-drawer-cat-link.is-loading {
  opacity: 0.5;
  cursor: progress;
}

.sbs-drawer-cat-error {
  display: block;
  padding: 0 0 10px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--sbs-primary);
}

.sbs-drawer-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sbs-text-dark);
  flex-shrink: 0;
}

/* Leaf items (direct link to product listing) share the cat-list container
   but render with a red bullet instead of a chevron, and with a hairline
   separator matching the brand-list visual style. */
.sbs-drawer-cat-item--leaf + .sbs-drawer-cat-item--leaf {
  border-top: 1px solid var(--sbs-border-light);
}

.sbs-drawer-cat-link--leaf {
  justify-content: flex-start;
  gap: 8px;
}

.sbs-drawer-cat-bullet {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--sbs-primary);
  flex-shrink: 0;
}

/* Label-style link: leaf categories on levels 2–3 link to the product
   listing like the level ≥ 4 leaves, but render as plain text — no bullet
   marker — since at these levels the leaf sits among branch categories
   rather than as the expected listing destination. */
.sbs-drawer-cat-link--label {
  justify-content: flex-start;
  gap: 0;
}

/* Drawer — Brand list (leaf panels before product listing) */
.sbs-drawer-brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sbs-drawer-brand-item + .sbs-drawer-brand-item {
  border-top: 1px solid var(--sbs-border-light);
}

.sbs-drawer-brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--sbs-text-dark);
  text-decoration: none;
}

.sbs-drawer-brand-bullet {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--sbs-primary);
  flex-shrink: 0;
}

.sbs-drawer-brand-name {
  flex: 1;
  min-width: 0;
}

/* Drawer: search input */
.sbs-mobile-drawer-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-lg);
}

.sbs-mobile-drawer-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sbs-text-secondary);
  flex-shrink: 0;
}

.sbs-mobile-drawer-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  padding: 0;
}

.sbs-mobile-drawer-search-input::placeholder {
  color: var(--sbs-text-secondary);
}

.sbs-mobile-drawer-panel-body .sbs-portal-switch--drawer {
  width: 100%;
}

.sbs-mobile-drawer-panel-body .sbs-portal-switch--drawer .sbs-portal-tab {
  flex: 1;
}

/* In-card portal switch (registration page, mobile only) — hidden on desktop */
.sbs-portal-switch--card {
  display: none;
}

/* Drawer: main menu (Products catalog, About us, Partners, FAQ, Contact us) */
.sbs-mobile-drawer-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}

.sbs-mobile-drawer-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.4px;
  color: var(--sbs-text-dark);
  text-decoration: none;
}

.sbs-mobile-drawer-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sbs-text-dark);
  flex-shrink: 0;
}

/* Drawer: footer (pinned to bottom: login btn + socials/lang) */
.sbs-mobile-drawer-footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  flex-shrink: 0;
}

.sbs-mobile-drawer-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: var(--sbs-primary);
  color: var(--sbs-white);
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.sbs-mobile-drawer-login-btn:hover {
  background: var(--sbs-primary-dark);
}

.sbs-mobile-drawer-login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Drawer — Logged-in user pill with initial avatar (replaces "My account" button) */
.sbs-drawer-user-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 10px 14px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  text-decoration: none;
}

.sbs-drawer-user-btn-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sbs-drawer-user-btn-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 100px;
  background: #ffe9ea;
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  line-height: 24px;
  letter-spacing: -0.24px;
  color: var(--sbs-text-dark);
  text-transform: uppercase;
}

.sbs-mobile-drawer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sbs-mobile-drawer-socials {
  display: flex;
  gap: 16px;
}

/* Drawer: reuse footer social button styling */
.sbs-mobile-drawer-socials .sbs-footer-social-btn {
  width: 40px;
  height: 40px;
}

/* Drawer: language dropdown uses default header-style (single button + absolute menu opening upward) */
.sbs-mobile-drawer-lang .sbs-lang-dropdown-menu {
  top: auto;
  bottom: calc(100% + 4px);
  right: 0;
}

.sbs-lang-name {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  color: var(--sbs-text-dark);
}

/* Mobile header elements — hidden on desktop */
.sbs-cart-btn--header { display: none; }

.sbs-hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  background: var(--sbs-white);
  box-shadow: var(--sbs-shadow-sm);
  cursor: pointer;
}

/* ========================================
   Product Catalogue Page
   ======================================== */

/* Breadcrumbs */
.sbs-catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: normal;
  color: #868686;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-catalog-breadcrumbs a {
  color: #868686;
  text-decoration: none;
}

.sbs-catalog-breadcrumbs a:hover {
  color: var(--sbs-text-dark);
}

.sbs-catalog-breadcrumbs-sep {
  letter-spacing: 1.05px;
}

.sbs-catalog-breadcrumbs-current {
  color: #232e38;
  font-weight: 400;
}

/* SBSIL-136: mobile-only back link on the product page. The breadcrumb
   overflows on phones and offers no clear "back" control, so below 1024px we
   hide the product breadcrumb and show a back link to the parent category. */
.sbs-product-back-link {
  display: none;
}

@media (max-width: 1024px) {
  .sbs-product-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    font-family: var(--sbs-font-ui);
    font-size: 14px;
    color: var(--sbs-primary);
    text-decoration: none;
  }

  .sbs-catalog-breadcrumbs--product {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .sbs-product-back-link:hover {
    text-decoration: underline;
  }
}

/* Header */
.sbs-catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sbs-catalog-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.26px;
  color: #323232;
  margin: 0;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-catalog-info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sbs-catalog-info-vat,
.sbs-catalog-info-help {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 22px;
  color: var(--sbs-text-dark);
  white-space: nowrap;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-catalog-info-vat {
  color: #323232;
  line-height: 20px;
}

.sbs-catalog-info-vat svg,
.sbs-catalog-info-help svg {
  flex-shrink: 0;
}

.sbs-catalog-info-vat {
  cursor: help;
}

.sbs-catalog-info-help {
  transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sbs-catalog-info-help:hover {
    color: var(--sbs-primary);
  }
}

/* Products toolbar */
.sbs-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* SBSIL-175: controls don't fit next to the count on 1025–1100px desktops —
     without wrap they overflow the container and drag the page into a
     horizontal body scroll. */
  flex-wrap: wrap;
  gap: 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.sbs-catalog-toolbar-count {
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  line-height: 20px;
  color: #323232;
  white-space: nowrap;
}

.sbs-catalog-toolbar-count strong {
  font-weight: 500;
}

.sbs-catalog-toolbar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-left: auto;
}

/* Filter button (hidden on desktop, visible on mobile) */
.sbs-catalog-filter-btn {
  display: none;
}

/* Mobile old price (hidden on desktop, visible on mobile) */
.product-list-old-price-mobile {
  display: none;
}

.sbs-catalog-dropdown-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  padding: 13px 16px;
  margin-bottom: 24px;
}

.sbs-catalog-dropdown {
  position: relative;
}

.sbs-catalog-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  background: var(--sbs-bg-gray);
  border: 1px solid #dadcdf;
  border-radius: var(--sbs-radius-lg);
  cursor: pointer;
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: #323232;
  white-space: nowrap;
  overflow: clip;
}

.sbs-catalog-dropdown--compact .sbs-catalog-dropdown-trigger {
  min-width: 0;
}

.sbs-catalog-dropdown-trigger svg {
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.sbs-catalog-dropdown.is-open .sbs-catalog-dropdown-trigger svg {
  transform: rotate(180deg);
}

.sbs-catalog-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 100%;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 4px 0;
  z-index: 10;
  list-style: none;
  margin: 0;
}

.sbs-catalog-dropdown.is-open .sbs-catalog-dropdown-menu {
  display: block;
}

.sbs-catalog-dropdown-menu li button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--sbs-text-dark);
  text-align: left;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
}

.sbs-catalog-dropdown-menu li button:hover {
  background: var(--sbs-bg-gray);
}

.sbs-catalog-dropdown-menu li button.is-active {
  font-weight: 500;
  color: var(--sbs-primary);
}

/* ========================================
   Mobile Sort Bottom Sheet
   ======================================== */
.sbs-sort-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sbs-sort-sheet-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.sbs-sort-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--sbs-white);
  z-index: 201;
  border-radius: 16px 16px 0 0;
  box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding: 0 20px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sbs-sort-sheet.is-open {
  transform: translateY(0);
}

.sbs-sort-sheet-handle {
  width: 32px;
  height: 4px;
  background: #22205f;
  border-radius: 8px;
  margin: 12px auto 20px;
}

.sbs-sort-sheet-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #323232;
  margin: 0;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-sort-sheet-list {
  list-style: none;
  margin: 21px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sbs-sort-sheet-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #323232;
  text-align: left;
}

.sbs-sort-sheet-option.is-active {
  font-weight: 500;
  color: var(--sbs-primary);
}

.sbs-sort-sheet-option svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* ========================================
   Mobile Filters Drawer
   ======================================== */
.sbs-filter-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sbs-filter-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.sbs-filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 86%;
  max-width: 310px;
  height: 100%;
  background: var(--sbs-white);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sbs-filter-drawer.is-open {
  transform: translateX(0);
}

.sbs-filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px;
  flex-shrink: 0;
}

.sbs-filter-drawer-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: #323232;
  letter-spacing: 0.26px;
  margin: 0;
}

.sbs-filter-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #323232;
  padding: 0;
}

.sbs-filter-drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 16px;
}

.sbs-filter-drawer-body #search_filters,
.sbs-filter-drawer-body [data-cloned-filters] {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sbs-filter-drawer-body .sbs-filter-card {
  width: 100%;
}

.sbs-filter-drawer-body .sbs-filter-card + .sbs-filter-card {
  margin-top: 0;
}

.sbs-filter-drawer-body .sbs-filter-body {
  padding: 24px 16px;
}

.sbs-filter-drawer-body .sbs-filter-body--checkbox {
  padding: 16px 16px 24px;
}

.sbs-filter-drawer-body .sbs-checkbox-label {
  font-size: 16px;
  line-height: 22px;
}

.sbs-filter-drawer-footer {
  flex-shrink: 0;
  display: flex;
  gap: 15px;
  padding: 16px;
  border-top: 1px solid var(--sbs-border-light);
}

.sbs-filter-drawer-btn-clear {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  background: var(--sbs-white);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  cursor: pointer;
  box-shadow: var(--sbs-shadow-sm);
}

.sbs-filter-drawer-btn-clear svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.sbs-filter-drawer-btn-apply {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--sbs-radius-lg);
  background: var(--sbs-primary);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-white);
  cursor: pointer;
}

/* View toggle */
.sbs-catalog-view-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sbs-catalog-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 4px;
  background: var(--sbs-bg-gray);
  cursor: pointer;
  color: #323232;
  padding: 8px;
}

.sbs-catalog-view-btn.is-active {
  background: var(--sbs-primary);
  color: var(--sbs-white);
}

/* Categories grid (masonry via CSS columns) */
.sbs-catalog-grid {
  column-count: 2;
  column-gap: 24px;
}

/* Category card */
.sbs-catalog-card {
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: 24px;
}

.sbs-catalog-card:has(.sbs-catalog-card-list) {
  padding-bottom: 14px;
}

.sbs-catalog-card:not(:has(.sbs-catalog-card-list)) .sbs-catalog-card-header {
  border-bottom: none;
}

.sbs-catalog-card-header {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  background: var(--sbs-bg-gray);
  border-bottom: 1px solid #f0f0f0;
  border-radius: 10px 10px 0 0;
}

.sbs-catalog-card-header a {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.16;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  text-decoration: none;
}

.sbs-catalog-card-header a:hover {
  color: var(--sbs-primary);
}

/* Subcategories list */
.sbs-catalog-card-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
}

.sbs-catalog-card-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.sbs-catalog-card-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sbs-catalog-card-list li:first-child {
  padding-top: 0;
}

.sbs-catalog-bullet {
  width: 4px;
  height: 4px;
  min-width: 4px;
  background: var(--sbs-primary);
  border-radius: 1px;
}

.sbs-catalog-card-list li a {
  font-size: 14px;
  line-height: 22px;
  color: var(--sbs-text-dark);
  text-decoration: none;
}

.sbs-catalog-card-list li a:hover {
  color: var(--sbs-primary);
}

/* ========================================
   Product List View
   ======================================== */

/* Outer container with border */
.products-list[data-view="list"] {
  border: 1px solid var(--sbs-border-light);
  border-radius: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  overflow: clip;
}

/* Table header */
.product-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 8px;
  margin: 0 8px 12px;
  background: var(--sbs-bg-gray);
  border-radius: 4px;
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #323232;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-list-header-spacer {
  width: 60px;
  flex-shrink: 0;
}

.product-list-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.product-list-header .product-list-col-code,
.product-list-header .product-list-col-name,
.product-list-header .product-list-col-stock,
.product-list-header .product-list-col-price,
.product-list-header .product-list-col-discount,
.product-list-header .product-list-col-quantity {
  color: #323232;
  font-weight: 500;
}

/* Product item */
.product-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 8px;
}

.product-list-item + .product-list-item {
  border-top: 1px solid var(--sbs-border-light);
}

/* SBSIL-155: subtle row hover in the list view. Guarded with hover/pointer so
   the tint doesn't stick after a tap on touch devices. */
@media (hover: hover) and (pointer: fine) {
  .products-list[data-view="list"] .product-list-item {
    transition: background-color 0.15s;
  }
  .products-list[data-view="list"] .product-list-item:hover {
    background: var(--sbs-bg-gray);
  }
}

/* Product image */
.product-list-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.product-list-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.product-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Data row */
.product-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  min-height: 48px;
}

/* Columns */
.product-list-col-code {
  width: 84px;
  flex-shrink: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #666;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-list-col-name {
  width: 200px;
  flex-shrink: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  overflow-wrap: anywhere;
}

.product-list-col-name a {
  color: inherit;
  text-decoration: none;
}

.product-list-col-name a:hover {
  color: var(--sbs-primary);
}

.product-list-col-stock {
  width: 72px;
  flex-shrink: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-list-col-price {
  width: 80px;
  flex-shrink: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-list-by-request {
  color: var(--sbs-primary);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-list-col-discount {
  width: 112px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-list-old-price {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  color: #757575;
  text-decoration: line-through;
  text-decoration-skip-ink: none;
  letter-spacing: 0.98px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-list-discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  background: var(--sbs-primary);
  border-radius: 100px;
  font-family: var(--sbs-font-ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  color: var(--sbs-white);
  letter-spacing: 0.11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-list-col-quantity {
  width: 126px;
  flex-shrink: 0;
  display: flex;
  /* SBSIL-155: column so the "Maximum available" caption can sit under the
     counter+cart row (like the cart). */
  flex-direction: column;
  gap: 4px;
}

.product-list-qty-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* SBSIL-155: out-of-stock / price-on-request rows still show the counter + cart,
   but disabled, with a "By request" tooltip (native title on the cell).
   SBSIL-175: explicit disabled look — flat gray fill + muted glyphs instead of
   bare opacity. No pointer-events: none: it suppressed the button's own
   "By request" title, and native disabled already blocks interaction. Shared
   with the grid view (same counter classes). */
.product-list-col-quantity--disabled {
  cursor: not-allowed;
}

.product-list-col-quantity--disabled .product-list-counter,
.product-list-col-quantity--disabled .product-list-cart-btn,
.product-grid-cart-block--disabled .product-grid-counter {
  background: var(--sbs-bg-gray);
  border-color: var(--sbs-border-light);
  color: #9e9e9e;
  cursor: not-allowed;
}

.product-list-col-quantity--disabled .product-list-counter-btn,
.product-list-col-quantity--disabled .product-list-counter-value,
.product-grid-cart-block--disabled .product-list-counter-btn,
.product-grid-cart-block--disabled .product-list-counter-value {
  background: transparent;
  color: #9e9e9e;
  cursor: not-allowed;
}

.product-list-col-quantity .sbs-counter-hint {
  width: 100%;
  margin: 0;
}

.product-list-cart-btn.is-added,
.product-grid-addtocart.is-added {
  background: var(--sbs-primary);
  color: var(--sbs-white);
  border-color: var(--sbs-primary);
}

.product-info-addtocart.is-added {
  background: var(--sbs-primary-dark);
}

.product-list-cart-btn.is-loading,
.product-grid-addtocart.is-loading,
.product-info-addtocart.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.product-list-cart-btn.is-loading::after,
.product-grid-addtocart.is-loading::after,
.product-info-addtocart.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--sbs-white);
  border-radius: 50%;
  animation: sbs-spin 0.6s linear infinite;
}

/* Listing buttons have light backgrounds — override to dark spinner */
.product-list-cart-btn.is-loading::after,
.product-grid-addtocart.is-loading::after {
  border-color: rgba(0, 0, 0, 0.12);
  border-top-color: var(--sbs-primary);
}

@keyframes sbs-badge-bounce {
  0%   { transform: scale(1)    rotate(0deg); }
  15%  { transform: scale(1.25) rotate(-18deg); }
  30%  { transform: scale(1.2)  rotate(14deg); }
  45%  { transform: scale(1.15) rotate(-10deg); }
  60%  { transform: scale(1.08) rotate(6deg); }
  75%  { transform: scale(1.03) rotate(-3deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

.sbs-cart-badge--bounce {
  animation: sbs-badge-bounce 0.55s ease;
}

/* Quantity-limit signal: brief red pulse on the qty value and (where shown) the
   available-stock number when the user tries to exceed available stock (SBSIL-105).
   Restart-on-reflow is handled in JS pulse(). Implicit 0%/100% keyframes animate
   from/to each element's OWN color, so the one class works on <input> and <span>
   alike with no layout shift (color-only, no transform). */
@keyframes sbs-qty-limit-pulse {
  20%, 80% { color: var(--sbs-danger); text-shadow: 0 0 1px var(--sbs-danger); }
}

.sbs-qty-limit-pulse {
  animation: sbs-qty-limit-pulse 1.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sbs-qty-limit-pulse {
    animation: none;
  }
}

/* SBSIL-105 (warehouse-limit): transient error toast for rejected add/update
   (e.g. over the active-warehouse stock). Message text comes from the server. */
.sbs-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  max-width: 90vw;
  padding: 12px 18px;
  background: var(--sbs-danger);
  color: var(--sbs-white);
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.sbs-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sbs-toast { transition: none; }
}

/* Counter */
.product-list-counter {
  display: flex;
  align-items: center;
  /* SBSIL-155: gap 16px + the fixed 86px width left the flex:1 value box ~6px
     wide, so a 2-digit qty pushed the "+" button out of the counter. A tight gap
     leaves the value enough room to show up to a 3-digit stock (e.g. 998) without
     clipping while keeping the buttons pinned to the counter edges. */
  gap: 2px;
  width: 86px;
  height: 28px;
  padding: 4px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: 8px;
  box-sizing: border-box;
}

.product-list-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
  background: var(--sbs-bg-gray);
  border: none;
  border-radius: 3.5px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  color: var(--sbs-text-dark);
}

/* SBSIL-155: stepper +/- buttons fill dark on hover (white glyph via
   currentColor). Guarded so the fill doesn't stick after tap on touch. */
@media (hover: hover) and (pointer: fine) {
  .product-list-counter-btn:not(:disabled):hover {
    background: #323232;
    color: #f5f5f5;
  }
}

.product-list-counter-btn svg {
  pointer-events: none;
}

.product-list-counter-value {
  flex: 1;
  /* SBSIL-155: allow the value to shrink instead of forcing the counter to
     overflow (which shifted the "+" button) when the number has 2+ digits. */
  min-width: 0;
  width: auto;
  text-align: center;
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--sbs-text-dark);
  /* SBSIL-155: value is a typeable <input type="number"> — strip native chrome
     (border/background/spinners) so it reads as plain text inside the counter. */
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}

.product-list-counter-value::-webkit-inner-spin-button,
.product-list-counter-value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-list-counter-value:focus {
  outline: none;
  border-color: var(--sbs-border-light);
  background: var(--sbs-white);
}

/* Cart button */
.product-list-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  color: var(--sbs-text-dark);
}

/* SBSIL-151: cart icon button fills brand-red on hover (white glyph via
   currentColor), matching the Figma action-button hover and the cart's
   remove button. Guarded so the fill doesn't stick after tap on touch. */
@media (hover: hover) and (pointer: fine) {
  .product-list-cart-btn:not(:disabled):hover {
    background: var(--sbs-primary);
    border-color: var(--sbs-primary);
    color: #f5f5f5;
  }
}

.product-list-cart-btn:not(:disabled):active {
  background: var(--sbs-primary);
  border-color: var(--sbs-primary);
  color: #f5f5f5;
}

.product-list-cart-btn svg {
  pointer-events: none;
}

/* ================================================================
   SBSIL-175 (audit 2.0) — table listing must fit or scroll, never clip.
   Measured: the content column is only ~450px at 1025–1100px viewports while
   the table needs ~700px, so elastic columns alone cannot close the gap — the
   card becomes its own horizontal scroll container (the page body never
   scrolls, columns are never cut). >768px: the desktop table renders from
   769px up (the mobile stacked restyle lives in the max-width: 768px block);
   769–1024px shows the same fixed-column table, so the fixes must cover it
   too.
   ================================================================ */
@media (min-width: 769px) {
  .products-list[data-view="list"] {
    overflow-x: auto;
  }

  /* Rows stop shrinking at an explicit pixel floor instead of collapsing under
     the fixed-width columns; the card scrolls the remainder, and row
     backgrounds/borders span the full scrolled extent. Explicit pixels, not
     min-content: with a growable name column the browser derives min-content
     from the name's grown size (200), which would force a scrollbar even on
     wide screens. Formula for the row content:
     code 84 + stock 72 + price 92 + discount 112 + quantity 126 (= 486)
     + name minimum 140 + 5 column gaps × 8 = 666; the item adds image 60 +
     gap 8 + padding 16 = 750, the header spacer 60 + gap 8 = 734. The "In WH"
     column of logged-in users adds 40 (border-box, padding inside) + one
     gap = +48. Update when column widths change. */
  .products-list[data-view="list"] .product-list-item {
    min-width: 750px;
  }

  .products-list[data-view="list"] .product-list-header {
    min-width: 734px;
  }

  /* Spacing floor between columns for the fully-packed (scrolling) state;
     space-between still distributes any extra room as before. */
  .products-list[data-view="list"] .product-list-header-row,
  .products-list[data-view="list"] .product-list-row {
    column-gap: 8px;
  }

  /* Drop the header's horizontal padding so the header row and the data rows
     get the same available width — their elastic name columns then shrink in
     sync and the columns stay aligned (the margin keeps the gray bar inset). */
  .product-list-header {
    padding: 0;
  }

  /* Name is the elastic column: shrinks to a readable minimum before the card
     starts scrolling, grows back to the current 200px when there is room.
     basis = the minimum (not 200): the row's min-content floor above is
     computed from flex bases, so a 200px basis would disable shrinking
     entirely and force a scrollbar even on wide screens. */
  .product-list-col-name {
    flex: 1 1 140px;
    min-width: 140px;
    max-width: 200px;
  }

  /* Price column: wider + inner right padding so the value never touches the
     neighbouring column and long prices ("12 345,00 €") stay intact. */
  .product-list-col-price {
    width: 92px;
    padding-right: 8px;
  }
}

/* The "In WH" column exists in the DOM for logged-in users at any width but is
   display: none up to 1024px — the :has() floor bump must only apply where the
   column is actually rendered, otherwise 769–1024px gets 48px of phantom
   scroll. */
@media (min-width: 1025px) {
  .products-list[data-view="list"] .product-list-item:has(.product-list-col-wh) {
    min-width: 798px;
  }

  .products-list[data-view="list"] .product-list-header:has(.product-list-col-wh) {
    min-width: 782px;
  }
}

/* ========================================
   View mode: List — hide grid-only elements
   ======================================== */
.products-list[data-view="list"] .product-list-header {
  display: flex;
}

.products-list[data-view="list"] .product-grid-badges,
.products-list[data-view="list"] .product-grid-info,
.products-list[data-view="list"] .product-grid-actions {
  display: none;
}

/* ========================================
   View mode: Grid — card layout
   ======================================== */

/* Container */
.products-list[data-view="grid"] {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 0;
  border: 1px solid var(--sbs-border-light);
  border-radius: 8px;
  overflow: clip;
}

/* Hide list-only elements */
.products-list[data-view="grid"] .product-list-header {
  display: none;
}

.products-list[data-view="grid"] .product-list-row {
  display: none;
}

/* Card */
.products-list[data-view="grid"] .product-list-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: none;
}

.products-list[data-view="grid"] .product-list-item + .product-list-item {
  border-top: 1px solid var(--sbs-border-light);
}

/* First card: no top padding (container's 20px padding handles it) */
.products-list[data-view="grid"] .product-list-header + .product-list-item {
  padding-top: 0;
}

/* Last card: no bottom padding (container's 20px padding handles it) */
.products-list[data-view="grid"] .product-list-item:last-of-type {
  padding-bottom: 0;
}

/* Image */
.products-list[data-view="grid"] .product-list-image {
  width: 228px;
  height: 180px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: clip;
  position: relative;
}

.products-list[data-view="grid"] .product-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badges on image */
.product-grid-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 1;
}

.product-grid-badge-sale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  background: #f5c803;
  border-radius: 100px;
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  color: #000;
  letter-spacing: 0.12px;
  white-space: nowrap;
}

.product-grid-badge-discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 6px;
  background: var(--sbs-primary);
  border-radius: 100px;
  font-family: var(--sbs-font-ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  color: var(--sbs-white);
  letter-spacing: 0.11px;
  white-space: nowrap;
}

/* Grid info section */
.product-grid-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
}

.product-grid-name {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.32;
  color: #333;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.product-grid-name a {
  color: inherit;
  text-decoration: none;
}

.product-grid-name a:hover {
  color: var(--sbs-primary);
}

/* Mobile-only meta (price + availability) — hidden on desktop */
.product-grid-mobile-meta {
  display: none;
}

/* Details block */
.product-grid-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-grid-stock {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-grid-stock-label {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.32;
  color: var(--sbs-text-tertiary);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-grid-stock-available {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #34a853;
}

.product-grid-stock-available svg,
.product-grid-stock-callus svg {
  flex-shrink: 0;
}

.product-grid-stock-callus {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #f59e0b;
}

.product-grid-code,
.product-grid-artnumber {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-grid-detail-label {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  line-height: 1.32;
  color: var(--sbs-text-tertiary);
  flex-shrink: 0;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-grid-detail-value {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  line-height: 1.32;
  color: var(--sbs-text-dark);
  letter-spacing: 0.45px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grid actions section (price + cart) */
.product-grid-actions {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
  border-left: 1px solid #e7e7e7;
  padding-left: 24px;
}

/* Price block */
.product-grid-price-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-grid-price {
  font-family: var(--sbs-font-ui);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--sbs-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-grid-old-price {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #757575;
  text-decoration: line-through;
  text-decoration-skip-ink: none;
  letter-spacing: 1.12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-grid-price-request {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-grid-price-request-stars {
  color: var(--sbs-primary);
}

/* Cart block */
.product-grid-cart-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* SBSIL-155: caption spans the block width and drops below the counter (desktop
   column flows it under; mobile row wraps it — see flex-wrap in the breakpoint). */
.product-grid-cart-block .sbs-counter-hint {
  width: 100%;
  margin: 0;
}

/* Grid counter (wider than list counter) */
.product-grid-counter {
  width: 100%;
  height: 48px;
  padding: 4px;
  border: 1px solid var(--sbs-border-light);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.product-grid-counter .product-list-counter-btn {
  width: 40px;
}

/* Add to cart button */
.product-grid-addtocart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 24px;
  background: #ecf1f7;
  border: none;
  border-radius: 12px;
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #323232;
  letter-spacing: -0.32px;
  cursor: pointer;
  white-space: nowrap;
}

.product-grid-addtocart:not(:disabled):hover {
  background: #dfe7f0;
}

/* SBSIL-155: grid out-of-stock / price-on-request — disabled counter + a
   "By request" button (text), consistent with the list view. SBSIL-175: flat
   gray + muted text instead of bare opacity (counter styled with the list-view
   disabled rules — shared classes). */
.product-grid-addtocart:disabled {
  background: var(--sbs-bg-gray);
  color: #9e9e9e;
  cursor: not-allowed;
}

/* ========================================
   Pagination
   ======================================== */

.sbs-pagination {
  padding: 32px 0 12px;
}

.sbs-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Arrow buttons */
.sbs-pagination-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: var(--sbs-white);
  border: 1px solid #f1f1f1;
  border-radius: var(--sbs-radius-lg);
  box-shadow: inset 0px 0px 9.6px 0px rgba(0, 0, 0, 0.04);
  color: var(--sbs-text-dark);
  text-decoration: none;
  flex-shrink: 0;
}

.sbs-pagination-arrow:hover {
  border-color: #dcdcdc;
}

.sbs-pagination-arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.sbs-pagination-prev svg {
  transform: rotate(90deg);
}

.sbs-pagination-next svg {
  transform: rotate(-90deg);
}

/* Page numbers */
.sbs-pagination-pages {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sbs-pagination-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 17.6px;
  color: #333;
  letter-spacing: 0.048px;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sbs-pagination-page:hover {
  border-color: #b0b0b0;
}

.sbs-pagination-page.is-active {
  background: var(--sbs-primary);
  border-color: var(--sbs-primary);
  color: var(--sbs-white);
  font-weight: 500;
}

.sbs-pagination-page.is-active:hover {
  background: var(--sbs-primary-dark);
  border-color: var(--sbs-primary-dark);
}

.sbs-pagination-spacer {
  cursor: default;
  border-color: #dcdcdc;
  pointer-events: none;
}

/* ========================================
   Faceted Search Filters
   ======================================== */

/* Left column layout on subcategory pages */
#category .row {
  display: flex;
  gap: 24px;
}

#category #left-column {
  display: block;
  width: 240px;
  flex-shrink: 0;
}

#category #content-wrapper {
  flex: 1;
  min-width: 0;
}

/* Filter card container */
.sbs-filter-card {
  background: var(--sbs-white);
  border: 1px solid #f0f0f0;
  border-radius: var(--sbs-radius-md);
  width: 240px;
  overflow: hidden;
}

.sbs-filter-card + .sbs-filter-card {
  margin-top: 8px;
}

/* Header bar */
.sbs-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: #f8f9f9;
  border: none;
  border-radius: var(--sbs-radius-md);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sbs-filter-label {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.16;
  color: var(--sbs-text-dark);
  letter-spacing: -0.3px;
  text-align: left;
}

.sbs-filter-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--sbs-text-dark);
  transition: transform 0.2s ease;
}

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

.sbs-filter-header[aria-expanded="true"] {
  box-shadow: 0 1px 0 0 #f0f0f0;
}

/* Body (collapsible content) */
.sbs-filter-body {
  padding: 24px 20px;
}

.sbs-filter-body.is-collapsed {
  display: none;
}

/* Dual range slider */
.sbs-range-slider {
  position: relative;
  height: 20px;
}

.sbs-range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: #f0f0f0;
  border-radius: 1px;
  pointer-events: none;
}

.sbs-range-track-active {
  position: absolute;
  height: 100%;
  background: var(--sbs-primary);
  border-radius: 1px;
}

.sbs-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
  padding: 0;
  outline: none;
}

.sbs-range-input.sbs-range-min {
  z-index: 2;
}

.sbs-range-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  background: transparent;
}

.sbs-range-input::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
}

.sbs-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sbs-primary);
  border: 1px solid var(--sbs-white);
  box-shadow: none;
  pointer-events: all;
  cursor: pointer;
  margin-top: -6px;
}

.sbs-range-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sbs-primary);
  border: 1px solid var(--sbs-white);
  box-shadow: none;
  pointer-events: all;
  cursor: pointer;
}

/* Number input fields */
.sbs-range-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.sbs-range-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  padding: 12px;
  overflow: clip;
}

.sbs-range-field-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  color: var(--sbs-text-dark);
  letter-spacing: -0.28px;
  line-height: 24px;
  padding: 0;
  -moz-appearance: textfield;
}

.sbs-range-field-input::-webkit-outer-spin-button,
.sbs-range-field-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sbs-range-field-currency {
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: #70777c;
  letter-spacing: 0.97px;
  flex-shrink: 0;
}

.sbs-range-separator {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: var(--sbs-text-dark);
  letter-spacing: 0.97px;
  flex-shrink: 0;
}

/* ========================================
   Checkbox Facet Filter
   ======================================== */

/* Body padding modifier for checkbox filters */
.sbs-filter-body--checkbox {
  padding: 16px 20px 24px;
}

/* Search input wrapper */
.sbs-checkbox-search-wrap {
  position: relative;
  margin-bottom: 16px;
}

.sbs-checkbox-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--sbs-text-secondary);
}

.sbs-checkbox-search {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  background: var(--sbs-white);
  outline: none;
  box-sizing: border-box;
}

.sbs-checkbox-search::placeholder {
  color: var(--sbs-text-secondary);
}

.sbs-checkbox-search:focus {
  border-color: var(--sbs-border-medium);
}

/* Scrollable checkbox list */
.sbs-checkbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Checkbox item row */
.sbs-checkbox-item {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.sbs-checkbox-item.is-hidden {
  display: none;
}

.sbs-checkbox-item label {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  gap: 10px;
}

/* Visually hidden native checkbox */
.sbs-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Custom checkbox visual */
.sbs-checkbox-box {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: var(--sbs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.sbs-checkbox-input:checked + .sbs-checkbox-box {
  background: var(--sbs-primary);
  border-color: var(--sbs-primary);
}

.sbs-checkbox-box svg {
  display: none;
}

.sbs-checkbox-input:checked + .sbs-checkbox-box svg {
  display: block;
}

.sbs-checkbox-input:focus-visible + .sbs-checkbox-box {
  box-shadow: 0 0 0 2px var(--sbs-primary);
}

/* Label text */
.sbs-checkbox-label {
  flex: 1;
  min-width: 0;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--sbs-text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Product count */
.sbs-checkbox-count {
  flex-shrink: 0;
  min-width: 63px;
  text-align: right;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #737b7d;
}

/* Empty state */
.sbs-checkbox-empty {
  display: none;
  padding: 8px 0;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-secondary);
}

.sbs-checkbox-empty.is-visible {
  display: block;
}

/* ========================================
   Contact Us Page
   ======================================== */

#contact .sbs-search-bar-wrap,
#contact .sbs-catalog-breadcrumbs,
#contact .sbs-sidebar,
#contact .sbs-footer-top {
  display: none;
}

#contact .sbs-page {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

#contact #footer {
  grid-column: 1;
}

#contact .sbs-main-area {
  display: flex;
  flex-direction: column;
}

#contact #wrapper {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
}

#contact .container,
#contact #content-wrapper {
  display: contents;
}

.sbs-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 24px;
}

.sbs-contact-cards {
  display: flex;
  gap: 24px;
  align-items: stretch;
  max-width: 934px;
  width: 100%;
}

.sbs-contact-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-2xl);
  padding: 32px;
  overflow: hidden;
  min-width: 300px;
}

.sbs-contact-form-card {
  flex: 1 1 0;
}

.sbs-contact-info-card {
  flex: 1 1 0;
}

.sbs-contact-card-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: -0.84px;
  color: var(--sbs-text-dark);
  text-align: center;
  margin: 0 0 32px;
}

/* Contact form */
.sbs-contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sbs-contact-input {
  width: 100%;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-lg);
  padding: 14px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--sbs-text-dark);
  outline: none;
  transition: border-color 0.2s;
}

.sbs-contact-input::placeholder {
  color: #b1b1b1;
}

.sbs-contact-input:focus {
  border-color: var(--sbs-text-dark);
}

/* Inline validation (SBSIL-161 follow-up): wrapper keeps the error message
   stacked under its field; mirrors the registration form's error styling. */
.sbs-contact-field {
  display: flex;
  flex-direction: column;
}

.sbs-contact-input--error,
.sbs-contact-input--error:focus {
  border-color: var(--sbs-primary);
}

.sbs-contact-field-error {
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  color: var(--sbs-primary);
  margin-top: 4px;
}

.sbs-contact-textarea {
  min-height: 100px;
  resize: vertical;
}

.sbs-contact-hidden {
  display: none !important;
}

.sbs-contact-btn {
  width: 100%;
  height: 48px;
  background: var(--sbs-primary);
  color: var(--sbs-white);
  border: none;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 20px;
}

.sbs-contact-btn:hover {
  background: var(--sbs-primary-dark);
}

/* Notifications */
.sbs-contact-notification {
  border-radius: var(--sbs-radius-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}

.sbs-contact-notification ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbs-contact-notification--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.sbs-contact-notification--success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* Contact info card */
.sbs-contact-info-subtitle {
  font-family: var(--sbs-font-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.18px;
  color: var(--sbs-text-tertiary);
  text-align: center;
  margin: -16px 0 32px;
}

.sbs-contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 18px;
}

.sbs-contact-info-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sbs-contact-info-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-soft);
  border-radius: var(--sbs-radius-sm);
  color: var(--sbs-text-dark);
}

.sbs-contact-info-text {
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -0.16px;
  color: var(--sbs-text-dark);
}

.sbs-contact-info-link {
  text-decoration: none;
}

.sbs-contact-info-link:hover {
  text-decoration: underline;
}

/* ========================================
   FAQ Page
   ======================================== */
#module-sbsfaq-faq .sbs-search-bar-wrap,
#module-sbsfaq-faq .sbs-footer-top,
#module-sbsfaq-faq .sbs-footer-divider,
#module-sbsfaq-faq .sbs-sidebar {
  display: none;
}

#module-sbsfaq-faq .sbs-page {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

#module-sbsfaq-faq #footer {
  grid-column: 1;
}

#module-sbsfaq-faq #wrapper {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
  padding: 0;
}

#module-sbsfaq-faq .container,
#module-sbsfaq-faq #content-wrapper {
  display: contents;
}

/* ===== CMS Pages ===== */

.sbs-cms {
  padding: 40px 24px;
}

.sbs-cms-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-2xl);
  padding: 40px 48px;
}

.sbs-cms-card h2 {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: var(--sbs-text-dark);
  margin: 0 0 24px;
}

.sbs-cms-card h3 {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--sbs-text-dark);
  margin: 32px 0 12px;
}

.sbs-cms-card h2 + h3 {
  margin-top: 24px;
}

.sbs-cms-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #475467;
  margin: 0 0 16px;
}

.sbs-cms-card ul,
.sbs-cms-card ol {
  font-size: 15px;
  line-height: 1.6;
  color: #475467;
  margin: 0 0 16px;
  padding-left: 24px;
}

.sbs-cms-card li {
  margin-bottom: 8px;
}

.sbs-cms-card li:last-child {
  margin-bottom: 0;
}

.sbs-cms-card strong {
  color: var(--sbs-text-dark);
  font-weight: 600;
}

.sbs-cms-card a {
  color: var(--sbs-primary);
  text-decoration: none;
}

.sbs-cms-card a:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .sbs-cms {
    padding: 12px 0;
  }
}

@media (max-width: 768px) {
  .sbs-cms {
    padding: 24px 0;
  }

  .sbs-cms-card {
    padding: 24px 20px;
    border-radius: var(--sbs-radius-xl);
  }

  .sbs-cms-card h2 {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .sbs-cms-card h3 {
    font-size: 18px;
    margin-top: 24px;
  }
}

/* ===== Price Mode Badge ===== */

.sbs-price-mode-badge {
  display: inline-block;
  font-family: var(--sbs-font-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 3px 8px;
  border-radius: var(--sbs-radius-sm);
  background: var(--sbs-bg-gray);
  color: #475467;
  vertical-align: middle;
  white-space: nowrap;
}

.sbs-price-mode-badge--business {
  background: #fef3f2;
  color: var(--sbs-primary);
}

.sbs-price-mode-badge--inline {
  margin-left: 6px;
  font-size: 10px;
  padding: 2px 6px;
}

/* ===== FAQ ===== */

.sbs-faq {
  display: flex;
  justify-content: center;
  padding: 40px 24px;
}

.sbs-faq-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-2xl);
  padding: 32px 39px;
  max-width: 900px;
  width: 100%;
  overflow: hidden;
}

.sbs-faq-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.16;
  letter-spacing: -1.2px;
  color: var(--sbs-text-dark);
  text-align: center;
  margin: 0 0 32px;
}

.sbs-faq-list {
  display: flex;
  flex-direction: column;
}

.sbs-faq-item {
  padding: 24px 0;
}

.sbs-faq-item:first-child {
  padding-top: 0;
}

.sbs-faq-item:last-child {
  padding-bottom: 0;
}

.sbs-faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.48;
  letter-spacing: -0.18px;
  color: var(--sbs-text-dark);
}

.sbs-faq-question:hover {
  opacity: 0.7;
}

.sbs-faq-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: currentColor;
  transition: transform 0.3s ease;
  margin-top: 2px;
}

.sbs-faq-item.is-open .sbs-faq-chevron {
  transform: rotate(180deg);
}

.sbs-faq-answer {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
}

.sbs-faq-answer[hidden] {
  display: block;
}

.sbs-faq-answer.is-visible {
  opacity: 1;
}

.sbs-faq-answer-text {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.48;
  letter-spacing: -0.16px;
  color: var(--sbs-text-tertiary);
  margin-top: 8px;
}

.sbs-faq-item:not(:last-child) {
  border-bottom: 1px solid var(--sbs-border-light);
}

.sbs-faq-empty {
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  color: var(--sbs-text-tertiary);
  text-align: center;
}

/* ========================================
   Registration Page
   ======================================== */
#registration .sbs-sidebar,
#registration .sbs-search-bar-wrap,
#registration .sbs-cart-btn--header,
#registration .sbs-btn-login,
#registration .sbs-hamburger-btn,
#registration .sbs-mobile-drawer,
#registration .sbs-mobile-drawer-overlay,
#registration .sbs-footer-top,
#registration .sbs-footer-divider {
  display: none;
}

#registration .sbs-page {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

#registration #footer {
  grid-column: 1;
}

#registration .sbs-main-area {
  display: flex;
  flex-direction: column;
}

#registration #wrapper {
  flex: 1;
  display: grid;
  /* SBSIL-PP fix v2: реальный grid-item — `.row` (прямой ребёнок #wrapper
     через `display: contents` на .container). `justify-items: stretch`
     заставляет его заполнить grid-track, отвязывая ширину карточки от
     max-content postpay-алерта (истинная причина прыжка ширины).
     `center` = прежнее вертикальное центрирование (align-items). */
  place-items: center stretch;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
}

#registration .container,
#registration #content-wrapper {
  display: contents;
}

.sbs-registration {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 24px;
}

.sbs-registration-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-2xl);
  padding: 30px 32px 24px;
  max-width: 600px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sbs-registration-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: -0.84px;
  color: var(--sbs-text-dark);
  text-align: center;
  margin: 0;
}

/* Registration form */
.sbs-registration-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sbs-registration-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sbs-registration-field {
  min-width: 0;
}

.sbs-registration-input {
  width: 100%;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-lg);
  padding: 14px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--sbs-text-dark);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.sbs-registration-input::placeholder {
  color: transparent;
}

/* Floating label */
.sbs-float-field {
  position: relative;
}

.sbs-float-field label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b1b1b1;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  transition: all 0.15s ease;
  transform-origin: left top;
}

/* Textarea: content is top-aligned, so the resting label sits at the top
   (matching where the text starts) instead of vertically centered. */
.sbs-float-field textarea + label {
  top: 24px;
  transform: none;
}

.sbs-float-field input:focus + label,
.sbs-float-field input:not(:placeholder-shown) + label,
.sbs-float-field textarea:focus + label,
.sbs-float-field textarea:not(:placeholder-shown) + label,
.sbs-float-field select + label {
  top: 10px;
  transform: none;
  font-size: 12px;
  line-height: 1.2;
}

.sbs-float-field input:focus,
.sbs-float-field input:not(:placeholder-shown),
.sbs-float-field select {
  padding-top: 22px;
  padding-bottom: 6px;
}

.sbs-registration-input:focus {
  border-color: var(--sbs-text-dark);
}

.sbs-registration-input--error,
.sbs-registration-input--error:focus {
  border-color: var(--sbs-primary);
}

.sbs-registration-field-error {
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  color: var(--sbs-primary);
  margin-top: 4px;
}

/* Inline format hint shown under a field (e.g. registration number / VAT) */
.sbs-registration-hint {
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  color: #868686;
  margin-top: 4px;
}

/* Alert notifications */
.sbs-registration-alert {
  border-radius: var(--sbs-radius-lg);
  padding: 12px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  /* SBSIL-PP: alerts must never grow beyond their flex/grid parent.
     box-sizing + max-width: 100% are safety nets for unforeseen
     layout paths where intrinsic max-content of a long single-line
     alert could try to push the container width. */
  box-sizing: border-box;
  max-width: 100%;
}

.sbs-registration-alert ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbs-registration-alert--error {
  background: #fef2f2;
  color: #991b1b;
}

/* Checkboxes container */
.sbs-registration-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Checkbox */
.sbs-registration-checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.sbs-registration-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: var(--sbs-white);
  cursor: pointer;
  margin: 4px 0 0;
  position: relative;
}

.sbs-registration-checkbox:checked {
  background: var(--sbs-primary);
  border-color: var(--sbs-primary);
}

.sbs-registration-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--sbs-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sbs-registration-checkbox-text {
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #323232;
}

.sbs-registration-checkbox-text a {
  color: var(--sbs-primary);
  text-decoration: none;
}

.sbs-registration-checkbox-text a:hover {
  text-decoration: underline;
}

/* Submit button */
.sbs-registration-btn {
  width: 100%;
  height: 48px;
  background: var(--sbs-primary);
  color: var(--sbs-white);
  border: none;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sbs-registration-btn:hover {
  background: var(--sbs-primary-dark);
}

/* Login link */
.sbs-registration-login-link {
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  text-align: center;
  margin: 0;
}

.sbs-registration-login-link a {
  font-weight: 500;
  color: var(--sbs-primary);
  text-decoration: none;
}

.sbs-registration-login-link a:hover {
  text-decoration: underline;
}

/* Registration: business fields section */
.sbs-registration-business[hidden],
.sbs-registration-business-address[hidden] {
  display: none;
}

.sbs-registration-business {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.sbs-registration-separator {
  border: none;
  border-top: 1px solid var(--sbs-border-light);
  margin: 0;
  width: 100%;
}

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


/* ========================================
   Login Page
   ======================================== */
#authentication .sbs-sidebar,
#authentication .sbs-search-bar-wrap,
#authentication .sbs-cart-btn--header,
#authentication .sbs-btn-login,
#authentication .sbs-hamburger-btn,
#authentication .sbs-mobile-drawer,
#authentication .sbs-mobile-drawer-overlay,
#authentication .sbs-footer-top,
#authentication .sbs-footer-divider {
  display: none;
}

#authentication .sbs-page {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

#authentication #footer {
  grid-column: 1;
}

#authentication .sbs-main-area {
  display: flex;
  flex-direction: column;
}

#authentication #wrapper {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
}

#authentication .container,
#authentication #content-wrapper {
  display: contents;
}

/* Login two-card layout */
.sbs-login {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  padding: 40px 24px;
  max-width: 1062px;
  width: 100%;
}

.sbs-login-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-2xl);
  padding: 30px 32px 24px;
  overflow: hidden;
}

.sbs-login-verified-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 860px;
  padding: 12px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: #16a34a;
  margin-bottom: 16px;
}

.sbs-login-form-card {
  width: 410px;
  flex-shrink: 0;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sbs-login-benefits-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sbs-login-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: -0.84px;
  color: var(--sbs-text-dark);
  text-align: center;
  margin: 0;
}

.sbs-login-brand {
  color: var(--sbs-primary);
}

/* Login form */
.sbs-login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sbs-login-field {
  min-width: 0;
}

.sbs-login-password-wrap {
  position: relative;
}

.sbs-login-password-input {
  padding-right: 48px;
}

.sbs-login-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.sbs-login-password-toggle:hover {
  opacity: 1;
}

/* ===== Live password hint (requirements + strength meter) ===== */
.sbs-pwd-hint {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.sbs-pwd-hint.is-open {
  grid-template-rows: 1fr;
}
.sbs-pwd-hint-inner {
  overflow: hidden;
  min-height: 0;
}
.sbs-pwd-hint-title {
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--sbs-text-dark);
  margin: 8px 0 6px;
}
.sbs-pwd-hint-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.sbs-pwd-hint-req {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  color: var(--sbs-text-secondary);
}
.sbs-pwd-hint-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  position: relative;
}
.sbs-pwd-hint-req.is-met {
  color: #1a7f37;
}
.sbs-pwd-hint-req.is-met .sbs-pwd-hint-icon {
  background: #1a7f37;
  border-color: #1a7f37;
}
.sbs-pwd-hint-req.is-met .sbs-pwd-hint-icon::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid var(--sbs-white);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.sbs-pwd-hint-strength {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-family: var(--sbs-font-ui);
  font-size: 12px;
}
.sbs-pwd-hint-strength-caption {
  color: var(--sbs-text-secondary);
}
.sbs-pwd-hint-strength-track {
  flex: 1 1 120px;
  min-width: 80px;
  height: 6px;
  border-radius: 999px;
  background: var(--sbs-border-light);
  overflow: hidden;
}
.sbs-pwd-hint-strength-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: transparent;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.sbs-pwd-hint-strength-fill.is-score-0 {
  background: var(--sbs-danger);
}
.sbs-pwd-hint-strength-fill.is-score-1 {
  background: #e8722b;
}
.sbs-pwd-hint-strength-fill.is-score-2 {
  background: #e0a72b;
}
.sbs-pwd-hint-strength-fill.is-score-3 {
  background: #7bb026;
}
.sbs-pwd-hint-strength-fill.is-score-4 {
  background: #1a7f37;
}
.sbs-pwd-hint-strength-label {
  font-weight: 600;
}
.sbs-pwd-hint-strength-recommended {
  color: var(--sbs-text-secondary);
  flex-basis: 100%;
}

.sbs-login-forgot {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.14px;
  color: var(--sbs-primary);
  text-decoration: none;
  margin-top: 4px;
}

/* Login form spacing (Figma: 12px fields, 20px between sections) */
.sbs-login-form .sbs-registration-btn {
  margin-top: 8px;
}

.sbs-login-form .sbs-login-divider {
  margin-top: 8px;
}

.sbs-login-form .sbs-login-register-btn {
  margin-top: 8px;
}

.sbs-login-forgot:hover {
  text-decoration: underline;
}

/* SBSIL-110 — login brute-force throttle notice */
.sbs-login-throttle-notice {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--sbs-radius-lg);
  background: #fef2f2;
  color: #991b1b;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
}

.sbs-login-verify-link {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  color: var(--sbs-primary);
  text-decoration: none;
}

.sbs-login-verify-link:hover {
  text-decoration: underline;
}

/* OR divider */
.sbs-login-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.sbs-login-divider::before,
.sbs-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sbs-border-light);
}

.sbs-login-divider span {
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.12px;
  color: var(--sbs-text-tertiary);
  text-transform: uppercase;
}

/* Register button */
.sbs-login-register-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-lg);
  box-shadow: var(--sbs-shadow-sm);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.sbs-login-register-btn:hover {
  border-color: var(--sbs-text-dark);
}

.sbs-login-register-logo {
  flex-shrink: 0;
}

/* Benefits list */
.sbs-login-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sbs-login-benefit {
  display: flex;
  gap: 20px;
  align-items: center;
}

.sbs-login-benefit-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-soft);
  border-radius: var(--sbs-radius-sm);
}

.sbs-login-benefit-text {
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -0.16px;
  color: var(--sbs-text-dark);
  margin: 0;
}

/* ========================================
   Forgot Password Page
   ======================================== */
#password .sbs-sidebar,
#password .sbs-search-bar-wrap,
#password .sbs-cart-btn--header,
#password .sbs-btn-login,
#password .sbs-hamburger-btn,
#password .sbs-mobile-drawer,
#password .sbs-mobile-drawer-overlay,
#password .sbs-footer-top,
#password .sbs-footer-divider {
  display: none;
}

#password .sbs-page {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

#password #footer {
  grid-column: 1;
}

#password .sbs-main-area {
  display: flex;
  flex-direction: column;
}

#password #wrapper {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
}

#password .container,
#password #content-wrapper {
  display: contents;
}

.sbs-password {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 24px;
}

.sbs-password-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-2xl);
  padding: 32px 32px 42px;
  width: 410px;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sbs-password-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: -0.84px;
  color: var(--sbs-text-dark);
  text-align: center;
  margin: 0;
}

.sbs-password-description {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--sbs-text-tertiary);
  text-align: center;
  margin: 0;
  max-width: 288px;
}

.sbs-password-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.sbs-password-field {
  width: 100%;
}

.sbs-password-card .sbs-registration-alert {
  width: 100%;
}

.sbs-password-alert--success {
  background: #f0fdf4;
  color: #166534;
  border-radius: var(--sbs-radius-lg);
  padding: 12px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  width: 100%;
}

.sbs-password-alert--success p {
  margin: 0;
}

/* Password infos (confirmation after reset) */
.sbs-password-icon-box {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-soft);
  border-radius: var(--sbs-radius-sm);
}

.sbs-password-infos-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.sbs-password-infos-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.sbs-password-email {
  color: var(--sbs-primary);
}

.sbs-password-ok-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 294px;
  max-width: 100%;
  height: 48px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-lg);
  box-shadow: var(--sbs-shadow-sm);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  text-decoration: none;
  transition: border-color 0.2s;
}

.sbs-password-ok-btn:hover {
  border-color: var(--sbs-text-dark);
}

.sbs-password-resend {
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  text-align: center;
  margin: 0;
}

.sbs-password-resend-link {
  font-weight: 500;
  color: var(--sbs-primary);
  text-decoration: none;
}

.sbs-password-resend-link:hover {
  text-decoration: underline;
}

/* ========================================
   Check Email Page
   ======================================== */
#module-sbsregistration-checkemail .sbs-sidebar,
#module-sbsregistration-checkemail .sbs-search-bar-wrap,
#module-sbsregistration-checkemail .sbs-cart-btn--header,
#module-sbsregistration-checkemail .sbs-btn-login,
#module-sbsregistration-checkemail .sbs-hamburger-btn,
#module-sbsregistration-checkemail .sbs-mobile-drawer,
#module-sbsregistration-checkemail .sbs-mobile-drawer-overlay,
#module-sbsregistration-checkemail .sbs-footer-top,
#module-sbsregistration-checkemail .sbs-footer-divider {
  display: none;
}

#module-sbsregistration-checkemail .sbs-page {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

#module-sbsregistration-checkemail #footer {
  grid-column: 1;
}

#module-sbsregistration-checkemail .sbs-main-area {
  display: flex;
  flex-direction: column;
}

#module-sbsregistration-checkemail #wrapper {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
}

#module-sbsregistration-checkemail .container,
#module-sbsregistration-checkemail #content-wrapper {
  display: contents;
}

.sbs-checkemail {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
  width: 100%;
}

.sbs-checkemail-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-2xl);
  padding: 48px 40px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}

.sbs-checkemail-icon {
  margin-bottom: 24px;
}

.sbs-checkemail-title {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 24px;
  color: var(--sbs-text-dark);
  margin: 0 0 12px;
}

.sbs-checkemail-text {
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--sbs-text-secondary);
  margin: 0 0 8px;
}

.sbs-checkemail-subtext {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--sbs-text-tertiary);
  margin: 0 0 32px;
}

.sbs-checkemail-resend-btn,
.sbs-confirm-resend-btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 15px;
  color: var(--sbs-text-dark);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sbs-checkemail-resend-btn:hover,
.sbs-confirm-resend-btn:hover {
  background: var(--sbs-bg-gray);
  border-color: var(--sbs-border-dark);
}

.sbs-checkemail-resend-btn:disabled,
.sbs-confirm-resend-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sbs-checkemail-resend-msg,
.sbs-confirm-resend-msg {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  margin-top: 12px;
  color: var(--sbs-text-secondary);
}

.sbs-checkemail-resend-msg--success,
.sbs-confirm-resend-msg--success {
  color: #16a34a;
}

.sbs-checkemail-resend-msg--error,
.sbs-confirm-resend-msg--error {
  color: var(--sbs-primary);
}

.sbs-checkemail-login-link {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--sbs-text-secondary);
  text-decoration: none;
}

.sbs-checkemail-login-link:hover {
  color: var(--sbs-text-dark);
  text-decoration: underline;
}

/* ========================================
   Email Confirm Page
   ======================================== */
#module-sbsregistration-confirm .sbs-sidebar,
#module-sbsregistration-confirm .sbs-search-bar-wrap,
#module-sbsregistration-confirm .sbs-cart-btn--header,
#module-sbsregistration-confirm .sbs-btn-login,
#module-sbsregistration-confirm .sbs-hamburger-btn,
#module-sbsregistration-confirm .sbs-mobile-drawer,
#module-sbsregistration-confirm .sbs-mobile-drawer-overlay,
#module-sbsregistration-confirm .sbs-footer-top,
#module-sbsregistration-confirm .sbs-footer-divider {
  display: none;
}

#module-sbsregistration-confirm .sbs-page {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

#module-sbsregistration-confirm #footer {
  grid-column: 1;
}

#module-sbsregistration-confirm .sbs-main-area {
  display: flex;
  flex-direction: column;
}

#module-sbsregistration-confirm #wrapper {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
}

#module-sbsregistration-confirm .container,
#module-sbsregistration-confirm #content-wrapper {
  display: contents;
}

.sbs-confirm {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
  width: 100%;
}

.sbs-confirm-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-2xl);
  padding: 48px 40px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}

.sbs-confirm-icon {
  margin-bottom: 24px;
}

.sbs-confirm-title {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 24px;
  color: var(--sbs-text-dark);
  margin: 0 0 12px;
}

.sbs-confirm-text {
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--sbs-text-secondary);
  margin: 0 0 32px;
}

.sbs-confirm-action-btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--sbs-primary);
  border: none;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 15px;
  color: var(--sbs-white);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.sbs-confirm-action-btn:hover {
  background: var(--sbs-primary-dark);
}

/* ========================================
   404 Error Page
   ======================================== */

#pagenotfound .sbs-sidebar,
#pagenotfound .sbs-search-bar-wrap,
#pagenotfound .sbs-cart-btn--header,
#pagenotfound .sbs-btn-login,
#pagenotfound .sbs-hamburger-btn,
#pagenotfound .sbs-mobile-drawer,
#pagenotfound .sbs-mobile-drawer-overlay,
#pagenotfound .sbs-footer-top,
#pagenotfound .sbs-footer-divider {
  display: none;
}

#pagenotfound .sbs-page {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

#pagenotfound #footer {
  grid-column: 1;
}

#pagenotfound .sbs-main-area {
  display: flex;
  flex-direction: column;
}

#pagenotfound #wrapper {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
}

#pagenotfound .container,
#pagenotfound #content-wrapper {
  display: contents;
}

.sbs-error-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 24px;
}

.sbs-error-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-2xl);
  padding: 48px 40px;
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.sbs-error-code {
  font-family: var(--sbs-font-heading);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: var(--sbs-primary);
  margin: 0;
  letter-spacing: -2px;
}

.sbs-error-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--sbs-text-dark);
  margin: 0;
}

.sbs-error-text {
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--sbs-text-secondary);
  margin: 0;
  max-width: 360px;
}

.sbs-error-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  width: 100%;
}

.sbs-error-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  background: var(--sbs-primary);
  color: var(--sbs-white);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 15px;
  border-radius: var(--sbs-radius-lg);
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}

.sbs-error-btn:hover {
  background: var(--sbs-primary-dark);
  color: var(--sbs-white);
}

.sbs-error-link {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.sbs-error-link:hover {
  color: var(--sbs-text-dark);
  text-decoration: underline;
}

/* ========================================
   Settings (Identity) page
   ======================================== */

.sbs-settings {
  padding: 16px 24px 48px;
}

/* Breadcrumbs */
.sbs-settings-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 12px;
}

.sbs-settings-breadcrumbs a {
  color: #868686;
  text-decoration: none;
}

.sbs-settings-breadcrumbs a:hover {
  text-decoration: underline;
}

.sbs-settings-breadcrumbs-sep {
  color: #868686;
  font-family: 'Roboto', var(--sbs-font-ui);
  letter-spacing: 1.05px;
}

.sbs-settings-breadcrumbs-current {
  color: var(--sbs-text-dark);
}

/* Page title */
.sbs-settings-page-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.26px;
  color: #323232;
  margin: 0 0 20px;
}

/* Layout: nav sidebar + content */
.sbs-settings-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Settings navigation sidebar */
.sbs-settings-nav {
  width: 240px;
  min-width: 240px;
  background: var(--sbs-bg-gray);
  border: 1px solid #f0f0f0;
  border-radius: var(--sbs-radius-md);
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.sbs-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--sbs-text-dark);
  text-decoration: none;
  transition: background-color 0.15s;
}

.sbs-settings-nav-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sbs-settings-nav-item--active {
  background: #323232;
  color: #f5f5f5;
}

.sbs-settings-nav-item--active:hover {
  background: #323232;
}

.sbs-settings-nav-item svg {
  flex-shrink: 0;
}

/* Short labels hidden on desktop, shown on mobile */
.sbs-settings-nav-short {
  display: none;
}

/* Content area */
.sbs-settings-content {
  flex: 1;
  min-width: 0;
}

/* Form */
.sbs-settings-form {
  display: flex;
  flex-direction: column;
}

/* Section */
.sbs-settings-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sbs-settings-section-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: #323232;
  margin: 0;
}

.sbs-settings-section-subtitle {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: #323232;
  margin: 24px 0 12px;
}

/* Fields grid */
.sbs-settings-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sbs-settings-fields--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sbs-settings-fields .sbs-float-field {
  min-width: 0;
}

.sbs-settings-fields .sbs-registration-input {
  font-size: 16px;
  letter-spacing: -0.32px;
}

/* Divider */
.sbs-settings-divider {
  border: none;
  height: 1px;
  background: var(--sbs-border-light);
  margin: 32px 0;
}

/* Action buttons */
.sbs-settings-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  align-items: center;
}

.sbs-settings-btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  box-shadow: var(--sbs-shadow-sm);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.sbs-settings-btn-cancel:hover {
  background: var(--sbs-bg-gray);
}

.sbs-settings-btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: var(--sbs-primary);
  border: none;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-white);
  cursor: pointer;
  transition: background-color 0.15s;
}

.sbs-settings-btn-save:hover {
  background: var(--sbs-primary-dark);
}

/* Read-only input (Company info fields) */
.sbs-settings-input--readonly {
  background: #f5f5f5;
  cursor: default;
}

/* Settings hint text */
.sbs-settings-hint {
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  color: #868686;
  line-height: normal;
}

.sbs-settings-hint-link {
  font-weight: 500;
  font-size: 18px;
  color: var(--sbs-primary);
  text-decoration: none;
}

/* Themed file picker (SBSIL-142): native input visually hidden inside the
   label-button; the span mirrors the chosen file name via theme.js. */
.sbs-file-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sbs-file-field-btn {
  position: relative;
  flex-shrink: 0;
}

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

.sbs-file-field-name {
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  color: #868686;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sbs-settings-hint-link:hover {
  text-decoration: underline;
}

/* Accordion */
.sbs-settings-accordion {
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-lg);
  overflow: hidden;
}

.sbs-settings-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  color: #323232;
  line-height: normal;
}

.sbs-settings-accordion-chevron {
  display: flex;
  transition: transform 0.2s;
}

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

.sbs-settings-accordion-body {
  overflow: hidden;
}

.sbs-settings-accordion-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 20px;
}

/* Users table */
.sbs-users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sbs-users-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 24px;
  background: var(--sbs-primary);
  border: none;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-white);
  cursor: pointer;
  transition: background-color 0.15s;
}

.sbs-users-invite-btn:hover {
  background: var(--sbs-primary-dark);
}

/* Users list (div-based for mobile accordion) */
.sbs-users-list {
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  overflow: hidden;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 20px;
}

.sbs-users-list-header {
  display: flex;
  align-items: center;
  background: var(--sbs-bg-gray);
  padding: 12px 16px;
  font-weight: 500;
  color: #323232;
  white-space: nowrap;
}

.sbs-users-row {
  display: flex;
  align-items: center;
  padding: 11px 16px;
  color: var(--sbs-text-dark);
  white-space: nowrap;
}

.sbs-users-col-name { width: 120px; flex-shrink: 0; }
.sbs-users-col-date { width: 95px; flex-shrink: 0; }
.sbs-users-col-email { width: 185px; flex-shrink: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sbs-users-col-phone { width: 102px; flex-shrink: 0; }
.sbs-users-col-status { width: 128px; flex-shrink: 0; }
.sbs-users-col-action { width: 28px; flex-shrink: 0; text-align: center; }

.sbs-users-row-toggle {
  display: none;
}

.sbs-users-action-label {
  display: none;
}

/* Status badges */
.sbs-users-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 20px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  background: var(--sbs-white);
  font-size: 14px;
  font-weight: 400;
  color: var(--sbs-text-dark);
  white-space: nowrap;
  width: 128px;
  justify-content: center;
}

.sbs-users-status svg {
  flex-shrink: 0;
}

.sbs-users-status--active { color: var(--sbs-text-dark); }
.sbs-users-status--active svg { color: #323232; }

.sbs-users-status--invited { color: var(--sbs-text-dark); }
.sbs-users-status--invited svg { color: #323232; }

.sbs-users-status--deactivated { color: var(--sbs-text-dark); }
.sbs-users-status--deactivated svg { color: #323232; }

/* Action buttons */
.sbs-users-action-form {
  display: inline-flex;
}

.sbs-users-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--sbs-text-tertiary);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.sbs-users-action-btn:hover {
  background: var(--sbs-primary);
  color: var(--sbs-white);
}

/* Empty state */
.sbs-users-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--sbs-text-secondary);
  font-size: 14px;
}

/* Invite modal */
.sbs-users-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  display: none;
}

.sbs-users-modal-overlay.sbs-users-modal--open {
  display: flex;
}

.sbs-users-modal {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  padding: 24px;
  width: 520px;
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

.sbs-users-modal-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.54px;
  color: var(--sbs-text-dark);
  margin: 0;
}

.sbs-users-modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sbs-users-modal-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .sbs-users-modal-fields {
    grid-template-columns: 1fr;
  }
}

.sbs-users-modal-buttons {
  display: flex;
  gap: 15px;
}

.sbs-users-modal-btn-cancel,
.sbs-users-modal-btn-confirm {
  flex: 1;
  height: 48px;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.sbs-users-modal-btn-cancel {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  box-shadow: var(--sbs-shadow-sm);
  color: var(--sbs-text-dark);
}

.sbs-users-modal-btn-cancel:hover {
  background: var(--sbs-bg-gray);
}

.sbs-users-modal-btn-confirm {
  background: var(--sbs-primary);
  border: none;
  color: var(--sbs-white);
}

.sbs-users-modal-btn-confirm:hover {
  background: var(--sbs-primary-dark);
}

/* Alert variants */
.sbs-registration-alert--success {
  background: #f0fdf4;
  color: #166534;
  border-radius: var(--sbs-radius-lg);
  padding: 12px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  margin-bottom: 8px;
}

.sbs-registration-alert--warning {
  background: #fffbeb;
  color: #92400e;
  border-radius: var(--sbs-radius-lg);
  padding: 12px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  margin-bottom: 8px;
}

.sbs-registration-alert--info {
  background: #eff6ff;
  color: #1e40af;
  border-radius: var(--sbs-radius-lg);
  padding: 12px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  margin-bottom: 8px;
}

/* Postpayment (SBSIL-PP): bold uppercase info alert. CSS handles the
   visual emphasis so XLIFF translations stay in natural sentence case. */
.sbs-registration-alert--info-bold {
  background: #f0f9ff;
  color: #075985;
  border-radius: var(--sbs-radius-lg);
  padding: 12px 16px;
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 8px;
  /* SBSIL-PP: long uppercase XLIFF translations (e.g. compound LV/DE
     words) must wrap inside the card rather than blow up intrinsic
     width. `anywhere` > `break-word` (handles URL/SKU-like runs too). */
  overflow-wrap: anywhere;
}
.sbs-registration-alert--info-bold[hidden] {
  display: none;
}

/* Profile postpay status badge — mirrors admin badge contrast levels. */
.sbs-settings-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.sbs-settings-badge--pending  { background: #fef3c7; color: #92400e; }
.sbs-settings-badge--approved { background: #d1fae5; color: #065f46; }
.sbs-settings-badge--rejected { background: #fee2e2; color: #991b1b; }
.sbs-settings-badge--none     { background: #e5e7eb; color: #4b5563; }

/* Inline-flowing forms in the Postpayment section (Resend + Cancel pair). */
.sbs-settings-form--inline {
  display: inline-block;
  margin-right: 8px;
}

/* ========================================
   Product Page
   ======================================== */

/* Breadcrumbs spacing on product page */
#product .sbs-catalog-breadcrumbs {
  margin-bottom: 24px;
}

/* Top section: gallery + info side by side */
.product-page-top {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* --- Gallery --- */
.product-gallery {
  flex: 506 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-gallery-main {
  width: 100%;
  height: 412px;
  border-radius: var(--sbs-radius-2xl);
  overflow: hidden;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
}

.product-gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* Fullscreen image lightbox */
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 80px 80px;
}

.product-lightbox[hidden] {
  display: none;
}

.product-lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.product-lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: auto;
}

.product-lightbox-close,
.product-lightbox-prev,
.product-lightbox-next {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
  z-index: 1;
}

.product-lightbox-close {
  top: 20px;
  right: 20px;
}

.product-lightbox-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.product-lightbox-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .product-lightbox-close:hover,
  .product-lightbox-prev:hover,
  .product-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.24);
  }
}

.product-lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-lightbox--single .product-lightbox-prev,
.product-lightbox--single .product-lightbox-next,
.product-lightbox--single .product-lightbox-counter {
  display: none;
}

.product-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.product-gallery-thumb {
  width: calc((100% - 60px) / 5);
  height: 72px;
  border-radius: var(--sbs-radius-sm);
  overflow: hidden;
  background: var(--sbs-white);
  border: 2px solid var(--sbs-border-light);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s;
}

.product-gallery-thumb.is-active {
  border-color: var(--sbs-text-dark);
}

.product-gallery-thumb:hover:not(.is-active) {
  border-color: var(--sbs-border-medium);
}

.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Product Info --- */
.product-info {
  flex: 566 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Header: name + refs + description */
.product-info-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-info-name {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  color: #323232;
  margin: 0;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-info-refs {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  white-space: nowrap;
}

.product-info-ref {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-info-ref-label {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  line-height: 1.32;
  color: var(--sbs-text-tertiary);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-info-ref-value {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  line-height: 1.32;
  color: var(--sbs-text-dark);
  letter-spacing: 0.45px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-info-refs-sep {
  width: 1px;
  height: 16px;
  background: var(--sbs-border-light);
  flex-shrink: 0;
}

.product-info-description {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-tertiary);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-info-description p {
  margin: 0;
}

/* Price block */
.product-info-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* SBSIL-150: energy-class / data-sheet badges shown above the price */
.product-info-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.product-info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 16px;
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--sbs-white);
  text-decoration: none;
  white-space: nowrap;
}

.product-info-badge--datasheet {
  background: var(--sbs-danger);
}

.product-info-badge--energy {
  padding-right: 24px;
  background: var(--sbs-energy-color, #50b848);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

@media (hover: hover) and (pointer: fine) {
  a.product-info-badge:hover {
    opacity: 0.9;
  }
}

.product-info-prices {
  display: flex;
  align-items: center;
  gap: 20px;
}

.product-info-price-current {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 32px;
  line-height: normal;
  color: var(--sbs-primary);
  letter-spacing: 0.096px;
}

.product-info-price-old {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: var(--sbs-text-tertiary);
  text-decoration: line-through;
  letter-spacing: 1.4px;
}

.product-info-vat {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #323232;
  cursor: help;
}

.product-info-vat svg {
  flex-shrink: 0;
}

.product-info-vat span {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Actions: cart row + stock */
.product-info-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* audit 2.0: unavailable product (no purchase form) — pull the block up so the
   stock indicator sits compactly under the price instead of floating in the
   empty space where the counter + add-to-cart button would be. */
.product-info-actions--unavailable {
  margin-top: -16px;
}

.product-info-cart-form {
  margin: 0;
}

.product-info-cart-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* Counter */
.product-info-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 160px;
  height: 48px;
  padding: 4px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  background: var(--sbs-white);
  flex-shrink: 0;
}

.product-info-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  border: none;
  border-radius: 3.5px;
  background: var(--sbs-bg-gray);
  cursor: pointer;
  padding: 0;
  color: var(--sbs-text-dark);
  transition: background-color 0.15s;
}

.product-info-counter-btn:hover {
  background: var(--sbs-border-light);
}

.product-info-counter-value {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--sbs-text-dark);
  text-align: center;
  min-width: 24px;
  width: 48px;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  -moz-appearance: textfield;
}

.product-info-counter-value::-webkit-outer-spin-button,
.product-info-counter-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* SBSIL-137: stock-limit hint shown when the qty stepper clamps a typed value
   (product page + cart). Rendered hidden in Smarty, revealed by showCounterHint(). */
.sbs-counter-hint {
  display: block;
  margin: 6px 0 0;
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  line-height: 1.4;
  color: var(--sbs-danger);
}

.sbs-counter-hint[hidden] {
  display: none;
}

/* Add to cart button */
.product-info-addtocart {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  border: none;
  border-radius: var(--sbs-radius-lg);
  background: var(--sbs-primary);
  color: var(--sbs-white);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  cursor: pointer;
  transition: background-color 0.15s;
  white-space: nowrap;
}

.product-info-addtocart:hover {
  background: var(--sbs-primary-dark);
}

.product-info-addtocart:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Stock status */
.product-info-stock {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-info-stock-label {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.32;
  color: var(--sbs-text-tertiary);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-info-stock-available {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #34a853;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

.product-info-stock-available svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.product-info-stock-unavailable {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sbs-primary);
}

/* SBSIL-107 (этап 2): warehouse selector on the product page (logged-in only).
   Visual parity with the cart picker (.sbs-cart-warehouse-select). */
.product-info-warehouse {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.product-info-warehouse-label {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-tertiary);
}

.product-info-warehouse-select-wrap {
  position: relative;
}

.product-info-warehouse-select {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 16px;
  background: var(--sbs-bg-gray);
  border: 1px solid #dadcdf;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  color: #323232;
  letter-spacing: -0.32px;
  appearance: none;
  cursor: pointer;
}

.product-info-warehouse-select-wrap svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--sbs-text-dark);
}

.product-info-warehouse-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.product-info-warehouse-lock {
  margin: 0;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  line-height: 18px;
  color: var(--sbs-text-secondary);
}

/* Stock by warehouse (logged-in only) */
.product-info-warehouses {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-info-warehouses-title {
  margin: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sbs-text-dark);
}

.product-info-warehouses-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-info-warehouses-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 14px;
  background: var(--sbs-bg-gray);
  border: 1px solid var(--sbs-border-light);
  border-radius: 4px;
}

.product-info-warehouses-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.32;
  color: var(--sbs-text-tertiary);
  overflow-wrap: anywhere;
}

.product-info-warehouses-qty {
  flex-shrink: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.32;
  color: var(--sbs-text-dark);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Downloads */
.product-info-downloads {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-info-downloads-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-info-downloads-extra[hidden] {
  display: none;
}

.product-info-download-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 14px;
  background: var(--sbs-bg-gray);
  border: 1px solid var(--sbs-border-light);
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.15s;
}

a.product-info-download-row:hover {
  background: var(--sbs-border-light);
}

.product-info-download-row--mock {
  cursor: default;
}

.product-info-download-label {
  flex: 1 1 50%;
  min-width: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.32;
  color: var(--sbs-text-tertiary);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  overflow-wrap: anywhere;
}

.product-info-download-file {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.product-info-download-file img {
  flex-shrink: 0;
}

.product-info-download-file span {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.32;
  color: var(--sbs-text-dark);
  letter-spacing: 0.45px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Show more */
.product-info-show-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--sbs-text-dark);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.28px;
}

/* Extra content (Show more toggle) — wraps divider + Product Overview */
.product-info-extra {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.product-info-extra[hidden] {
  display: none;
}

/* Divider line between Show more and Product Overview */
.product-info-divider {
  border: none;
  border-top: 1px solid var(--sbs-border-light);
  margin: 0;
}

/* Product Overview */
.product-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-overview-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: #323232;
  margin: 0;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-overview-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-tertiary);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-overview-content p {
  margin: 0;
}

.product-overview-content ul,
.product-overview-content ol {
  padding-left: 24px;
  margin: 0;
}

.product-overview-content li + li {
  margin-top: 4px;
}

.product-overview-content a {
  color: var(--sbs-primary);
  text-decoration: underline;
}

/* Parameters card */
.product-params {
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  overflow: hidden;
}

/* When Product Overview is above, tighten gap to 24px (Figma) */
.product-info-extra + .product-params {
  margin-top: -8px;
}

/* Below image (no description case): constrained to right-column width.
   No margin-top — divider sits at the image bottom level (continuation of .product-page-top). */
.product-page-bottom {
  display: flex;
  gap: 40px;
}

.product-page-bottom-spacer {
  flex: 506 1 0;
  min-width: 0;
}

.product-page-bottom-main {
  flex: 566 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.product-params-header {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 20px;
  background: var(--sbs-white);
  border-bottom: 1px solid var(--sbs-border-light);
}

.product-params-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.32;
  color: var(--sbs-text-dark);
  letter-spacing: 0.45px;
}

.product-params-body {
  background: var(--sbs-white);
  padding: 2px 0;
}

.product-params-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 20px;
}

.product-params-row + .product-params-row {
  border-top: 1px solid var(--sbs-border-light);
}

.product-params-name {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-params-vals {
  display: flex;
  align-items: center;
  gap: 48px;
}

.product-params-value {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-params-vals .product-params-value {
  width: 100px;
}

.product-params-unit {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  width: 26px;
  text-align: center;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Hide PS notifications banner on product page */
#product #notifications {
  display: none;
}

/* Hide unstyled PS hook content on product page until properly styled */
.product-page #product-comments-list-header,
.product-page .product-comment-list-item,
.product-page .product-comment-modal,
.product-page [id^="post-product-comment"],
.product-page .grade-stars,
.product-page > section:last-child {
  display: none;
}

.product-info-show-more svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.product-info-show-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ========================================
   Product Carousel (Related products, Recently viewed)
   ======================================== */
.product-carousel {
  margin-top: 84px;
}

.product-carousel + .product-carousel {
  margin-top: 40px;
}

.product-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.product-carousel-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  color: #323232;
  margin: 0;
  letter-spacing: 0.3px;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.product-carousel-nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

.product-carousel-arrow {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f1f1f1;
  border-radius: var(--sbs-radius-lg);
  background: var(--sbs-white);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 9.6px rgba(0, 0, 0, 0.04);
  color: var(--sbs-text-dark);
  transition: opacity 0.15s;
}

.product-carousel-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.product-carousel-arrow svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.product-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-carousel-track::-webkit-scrollbar {
  display: none;
}

.product-carousel-card {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}

.product-carousel-card:hover {
  box-shadow: var(--sbs-shadow-sm);
}

.product-carousel-card-img {
  height: 212px;
  overflow: hidden;
  position: relative;
  background: #f8f8f8;
}

.product-carousel-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-carousel-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

.product-carousel-card-name {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: #333;
  letter-spacing: 0.048px;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-carousel-card-prices {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.product-carousel-card-price {
  font-family: var(--sbs-font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 17.6px;
  color: var(--sbs-primary);
  letter-spacing: 0.048px;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  white-space: nowrap;
}

.product-carousel-card-old-price {
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--sbs-text-tertiary);
  letter-spacing: 1.12px;
  text-decoration: line-through;
  white-space: nowrap;
}

/* ========================================
   Responsive: max-width 1024px
   (Sidebar hidden, hamburger visible)
   ======================================== */
@media (max-width: 1024px) {
  .sbs-page {
    grid-template-columns: 1fr;
  }

  .sbs-main-area {
    /* clip (not hidden) contains horizontal overflow without turning
       .sbs-main-area into a scroll container — which would break the sticky
       #header (audit 2.0). Fixed-position drawers inside still escape to the
       viewport, so overlays keep covering the full screen. */
    overflow-x: clip;
  }

  .sbs-sidebar {
    display: none;
  }

  #footer {
    grid-column: 1;
  }

  /* Header: show hamburger + mobile cart + user btn, hide desktop-only items */
  .sbs-cart-btn--header { display: inline-flex; }
  .sbs-hamburger-btn { display: flex; width: 48px; height: 48px; }
  .sbs-header-top-left .sbs-portal-switch { display: none; }
  .sbs-header-top-right .sbs-btn-lang { display: none; }
  .sbs-header-top-right .sbs-lang-dropdown { display: none; }
  .sbs-header-top-right .sbs-btn-login { display: none; }

  /* Registration / Login pages on mobile: show language dropdown in header (figma) */
  #registration .sbs-header-top-right .sbs-lang-dropdown,
  #authentication .sbs-header-top-right .sbs-lang-dropdown { display: block; }
  #registration .sbs-header-top-right .sbs-btn-lang,
  #authentication .sbs-header-top-right .sbs-btn-lang { display: inline-flex; }
  #registration .sbs-portal-switch--card { display: flex; width: 100%; }
  #registration .sbs-portal-switch--card .sbs-portal-tab { flex: 1; }

  /* Hide cart in search bar (it's now in header) */
  .sbs-search-bar .sbs-cart-btn:not(.sbs-cart-btn--header) { display: none; }

  /* Search bar full width */
  .sbs-search-bar-wrap {
    margin: 0 16px;
  }

  /* Header top padding */
  .sbs-header-top {
    padding: 16px;
  }


  /* Footer nav: static, wrapping */
  .sbs-footer-nav {
    position: static;
    transform: none;
  }

  .sbs-footer-nav-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .sbs-footer-top {
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }


  /* Catalog: dropdown full-width */
  .sbs-catalog-dropdown-trigger {
    min-width: 0;
    width: 100%;
  }

  .sbs-catalog-dropdown-bar {
    justify-content: normal;
  }

  .sbs-catalog-dropdown {
    width: 100%;
  }

  /* Filters: hidden behind the "Filters" button (drawer) at ≤1024px.
     769–1024px used to stack the filter column inline with no toggle
     (audit 2.0) — now consistent with the mobile drawer. */
  #category #left-column {
    display: none;
  }

  .sbs-filter-card {
    width: 100%;
  }

  /* Filter button: visible ≤1024px, opens the filter drawer (JS clones
     #search_filters, which stays in the DOM though display:none). grid-area
     positions it once the toolbar becomes a grid at ≤768px; in 769–1024px it
     sits inline in the flex toolbar. */
  .sbs-catalog-filter-btn {
    display: flex;
    grid-area: filter;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--sbs-white);
    border: 1px solid var(--sbs-border-medium);
    border-radius: var(--sbs-radius-lg);
    padding: 12px 16px;
    font-family: var(--sbs-font-ui);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
    color: #323232;
    cursor: pointer;
  }

  .sbs-catalog-filter-btn svg {
    flex-shrink: 0;
  }

  /* Breadcrumbs: single line + horizontal scroll at ≤1024px (audit 2.0).
     769–1024px used to wrap the chain onto 2–3 rows. flex-shrink:0 keeps each
     label on one line so the row scrolls instead of wrapping. Covers catalog
     breadcrumbs and the shared settings-page partial. */
  .sbs-catalog-breadcrumbs,
  .sbs-settings-breadcrumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sbs-catalog-breadcrumbs::-webkit-scrollbar,
  .sbs-settings-breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .sbs-catalog-breadcrumbs a,
  .sbs-catalog-breadcrumbs-current,
  .sbs-settings-breadcrumbs a,
  .sbs-settings-breadcrumbs-current {
    flex-shrink: 0;
  }

  /* Settings page: nav sidebar → horizontal tabs, stack layout */
  .sbs-settings-nav {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    padding: 4px;
    gap: 0;
    border-radius: 10px;
  }

  .sbs-settings-nav-item {
    flex: 1;
    min-width: 0;
    justify-content: center;
    height: 38px;
    padding: 8px 12px 8px 10px;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    white-space: nowrap;
    border-radius: 8px;
  }

  .sbs-settings-nav-full {
    display: none;
  }

  .sbs-settings-nav-short {
    display: inline;
  }

  .sbs-settings-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .sbs-settings {
    padding: 16px 16px 32px;
  }

  /* Product page */
  .product-page-top {
    gap: 24px;
  }

  .product-gallery-main {
    height: 350px;
  }

  .product-info-name {
    font-size: 26px;
  }
}

/* ========================================
   Responsive: max-width 768px
   (CTA vertical, footer stacked, benefits 2 col)
   ======================================== */
@media (max-width: 768px) {
  /* Contact page */
  .sbs-contact {
    min-height: auto;
    padding: 24px 16px;
  }

  .sbs-contact-cards {
    flex-direction: column;
  }

  .sbs-contact-card {
    min-width: 0;
  }

  .sbs-contact-form-card,
  .sbs-contact-info-card {
    flex: 0 0 auto;
  }

  /* FAQ page */
  .sbs-faq {
    padding: 24px 16px;
  }

  .sbs-faq-card {
    padding: 24px 20px;
  }

  .sbs-faq-title {
    font-size: 32px;
    letter-spacing: -0.96px;
    margin-bottom: 24px;
  }

  .sbs-faq-question {
    font-size: 16px;
    letter-spacing: -0.16px;
  }

  .sbs-faq-answer-text {
    font-size: 14px;
  }

  /* 404 Error page */
  .sbs-error-page {
    padding: 24px 16px;
  }

  .sbs-error-card {
    padding: 36px 24px;
  }

  .sbs-error-code {
    font-size: 72px;
  }

  .sbs-error-title {
    font-size: 20px;
  }

  /* Registration page */
  .sbs-registration {
    padding: 24px 16px;
  }

  .sbs-registration-card {
    padding: 24px 20px 20px;
    gap: 24px;
  }

  .sbs-registration-fields {
    grid-template-columns: 1fr;
  }

  .sbs-registration-title {
    font-size: 24px;
    letter-spacing: -0.72px;
  }

  .sbs-registration-form {
    gap: 24px;
  }

  /* Login page */
  .sbs-login {
    flex-direction: column;
    padding: 24px 16px;
  }

  .sbs-login-form-card {
    width: 100%;
  }

  .sbs-login-card {
    padding: 24px 20px 20px;
    gap: 24px;
  }

  .sbs-login-title {
    font-size: 24px;
    letter-spacing: -0.72px;
  }

  /* Forgot Password page */
  .sbs-password { padding: 24px 16px; }
  .sbs-password-card { padding: 24px 20px 32px; gap: 16px; }
  .sbs-password-title { font-size: 24px; letter-spacing: -0.72px; }

  /* Check Email / Confirm pages */
  .sbs-checkemail-card,
  .sbs-confirm-card { padding: 32px 24px; }
  .sbs-checkemail-title,
  .sbs-confirm-title { font-size: 22px; }


  /* Footer: vertical top */
  .sbs-footer-top {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .sbs-footer-bottom {
    flex-direction: column;
    gap: 24px;
  }

  .sbs-footer-links {
    flex-wrap: wrap;
    gap: 24px;
  }

  /* Catalog: 1 column, stacked header */
  .sbs-catalog-breadcrumbs {
    margin-bottom: 24px;
  }

  .sbs-catalog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 16px;
  }

  .sbs-catalog-title {
    margin-bottom: 16px;
  }

  .sbs-catalog-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sbs-catalog-info-help {
    order: -1;
  }

  .sbs-catalog-dropdown-bar {
    border: none;
    padding: 0;
    background: none;
    margin-bottom: 16px;
  }

  /* ---- Mobile Catalog Grid: vertical list ---- */
  .sbs-catalog-grid {
    column-count: unset;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ---- Mobile Card → Button (default) ---- */
  .sbs-catalog-card,
  .sbs-catalog-card:has(.sbs-catalog-card-list) {
    border: 1px solid #f0f0f0;
    border-radius: var(--sbs-radius-md);
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: 16px;
  }

  .sbs-catalog-card:last-child {
    margin-bottom: 0;
  }

  .sbs-catalog-card-header {
    height: 56px;
    background: var(--sbs-bg-gray);
    border-radius: var(--sbs-radius-md);
    border-bottom: none;
    padding: 0 16px;
  }

  .sbs-catalog-card-header a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 500;
  }

  .sbs-catalog-card-header a::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .sbs-catalog-card-list {
    display: none;
  }

  /* ---- Mobile Card → Bullet list (flat brand list via .sbs-catalog-grid--flat) ---- */
  .sbs-catalog-grid--flat .sbs-catalog-card {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #dadcdf;
  }

  .sbs-catalog-grid--flat .sbs-catalog-card:last-child {
    border-bottom: none;
  }

  .sbs-catalog-grid--flat .sbs-catalog-card-header {
    height: auto;
    padding: 10px 0;
    background: none;
    border-radius: 0;
    border-bottom: none;
    gap: 8px;
  }

  .sbs-catalog-grid--flat .sbs-catalog-card-header::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    min-width: 4px;
    background: var(--sbs-primary);
    border-radius: 1px;
  }

  .sbs-catalog-grid--flat .sbs-catalog-card-header a {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    justify-content: flex-start;
  }

  .sbs-catalog-grid--flat .sbs-catalog-card-header a::after {
    display: none;
  }

  /* Breadcrumbs single-line/scroll moved to the ≤1024px block (audit 2.0). */

  /* ---- Mobile Toolbar (CSS Grid 2-column) ---- */
  .sbs-catalog-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "filter sort"
      "count toggle";
    gap: 12px 16px;
    background: var(--sbs-bg-gray);
    border: none;
    border-radius: var(--sbs-radius-sm);
    padding: 16px;
    margin-bottom: 16px;
  }

  /* .sbs-catalog-filter-btn shown at ≤1024px (see the 1024 block); grid-area
     positioning takes effect here once the toolbar becomes a grid. */

  .sbs-catalog-toolbar-controls {
    grid-area: sort;
    margin-left: 0;
    min-width: 0;
    overflow: hidden;
  }

  /* Hide brand, perpage and warehouse on mobile */
  .sbs-catalog-dropdown[data-dropdown="brand"],
  .sbs-catalog-dropdown[data-dropdown="perpage"],
  .sbs-catalog-dropdown[data-dropdown="warehouse"] {
    display: none;
  }

  /* Sort dropdown fills cell */
  .sbs-catalog-dropdown[data-dropdown="sort"] {
    width: 100%;
  }

  .sbs-catalog-dropdown[data-dropdown="sort"] .sbs-catalog-dropdown-trigger {
    background: var(--sbs-white);
    border-color: var(--sbs-border-medium);
    height: auto;
    padding: 12px 16px;
    width: 100%;
    min-width: 0;
  }

  .sbs-catalog-dropdown[data-dropdown="sort"] .sbs-catalog-dropdown-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Prevent sort dropdown menu from opening on mobile (bottom sheet used instead) */
  .sbs-catalog-dropdown[data-dropdown="sort"] .sbs-catalog-dropdown-menu {
    display: none !important;
  }

  .sbs-catalog-toolbar-count {
    grid-area: count;
    align-self: center;
  }

  .sbs-catalog-view-toggle {
    grid-area: toggle;
    justify-self: end;
    align-self: center;
  }

  /* View toggle buttons: mobile spec (border on inactive) */
  .sbs-catalog-view-btn {
    background: var(--sbs-white);
    border: 1px solid var(--sbs-border-medium);
  }

  .sbs-catalog-view-btn.is-active {
    border-color: var(--sbs-primary);
  }

  /* Left column (#category #left-column) hidden at ≤1024px — see the 1024 block. */

  /* ---- Mobile Product Table Header ---- */
  /* ---- Mobile Table Header ---- */
  .product-list-header {
    margin-left: 0;
    margin-right: 0;
    padding-left: 8px;
    padding-right: 8px;
  }

  .product-list-header-spacer {
    width: 40px; /* match image width exactly */
  }

  .product-list-header .product-list-col-stock,
  .product-list-header .product-list-col-discount {
    display: none;
  }

  /* Header quantity: invisible spacer matching cart button width */
  .product-list-header .product-list-col-quantity {
    width: 28px;
    visibility: hidden;
  }

  .product-list-header-row {
    justify-content: flex-start;
  }

  /* Same column widths in header and data rows */
  .product-list-header .product-list-col-code {
    width: 60px;
  }

  .product-list-header .product-list-col-name {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .product-list-header .product-list-col-price {
    width: 71px;
  }

  /* ---- Mobile Product Rows ---- */
  .products-list[data-view="list"] .product-list-image {
    width: 40px;
    height: 40px;
    border-radius: 2px;
  }

  .product-list-item {
    padding: 10px 0 10px 8px;
    gap: 8px;
  }

  /* Hide desktop-only columns */
  .product-list-col-stock,
  .product-list-col-discount {
    display: none;
  }

  .product-list-row {
    justify-content: flex-start;
    padding: 0 8px 0 0;
  }

  /* Code column: fixed width */
  .product-list-col-code {
    width: 60px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Name column: fills remaining space */
  .product-list-col-name {
    flex: 1;
    min-width: 0;
    width: auto;
    font-size: 12px;
    line-height: 14px;
  }

  .product-list-col-name a {
    font-size: 12px;
  }

  /* Price column: fixed width, flex column for stacked price + old price */
  .product-list-col-price {
    width: 71px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: normal;
    overflow: visible;
  }

  .product-list-price-value {
    font-size: 12px;
  }

  .product-list-by-request {
    font-size: 12px;
    white-space: nowrap;
  }

  /* Show mobile old price */
  .product-list-old-price-mobile {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    color: #757575;
    text-decoration: line-through;
    text-decoration-skip-ink: none;
    font-weight: 400;
  }

  /* Quantity column: fixed 28px width, hide counter, show only cart button */
  .product-list-col-quantity {
    width: 28px;
    flex-shrink: 0;
    gap: 0;
  }

  .product-list-col-quantity .product-list-counter {
    display: none;
  }

  .product-list-cart-btn {
    width: 28px;
    height: 28px;
  }

  /* ========================================
     Mobile Grid View
     ======================================== */

  /* Container: remove shared border, add gap between cards */
  .products-list[data-view="grid"] {
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 20px;
    overflow: visible;
  }

  /* Card: individual bordered card, vertical wrap layout */
  .products-list[data-view="grid"] .product-list-item {
    flex-wrap: wrap;
    padding: 12px;
    row-gap: 20px;
    column-gap: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background: var(--sbs-white);
    align-items: flex-start;
  }

  /* Override desktop border-top separator — match card border */
  .products-list[data-view="grid"] .product-list-item + .product-list-item {
    border-top: 1px solid #e7e7e7;
  }

  /* Restore padding for first/last card (desktop removes them) */
  .products-list[data-view="grid"] .product-list-header + .product-list-item {
    padding-top: 12px;
  }

  .products-list[data-view="grid"] .product-list-item:last-of-type {
    padding-bottom: 12px;
  }

  /* Image: 100x104 per Figma */
  .products-list[data-view="grid"] .product-list-image {
    width: 100px;
    height: 104px;
  }

  /* Badges: tighter positioning for smaller image */
  .products-list[data-view="grid"] .product-grid-badges {
    top: 4px;
    left: 4px;
  }

  /* Info section: fill remaining space next to image */
  .products-list[data-view="grid"] .product-grid-info {
    flex: 1;
    min-width: 0;
    height: auto;
    justify-content: flex-start;
    gap: 0;
  }

  /* Name: 14px, 2-line clamp */
  .products-list[data-view="grid"] .product-grid-name {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.14px;
    color: #232e38;
    -webkit-line-clamp: 2;
    max-height: 36px;
  }

  /* Show mobile-meta block (price + availability) */
  .products-list[data-view="grid"] .product-grid-mobile-meta {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    gap: 2px;
  }

  /* Mobile price row */
  .products-list[data-view="grid"] .product-grid-mobile-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }

  .products-list[data-view="grid"] .product-grid-mobile-meta .product-grid-price {
    font-size: 16px;
    font-weight: 700;
  }

  .products-list[data-view="grid"] .product-grid-mobile-meta .product-grid-old-price {
    font-size: 16px;
  }

  .products-list[data-view="grid"] .product-grid-mobile-meta .product-grid-price-request {
    font-weight: 600;
    font-size: 16px;
  }

  /* Mobile availability */
  .products-list[data-view="grid"] .product-grid-mobile-availability .product-grid-stock-available,
  .products-list[data-view="grid"] .product-grid-mobile-availability .product-grid-stock-callus {
    font-size: 14px;
    gap: 4px;
  }

  /* Hide desktop details (code, art number, stock with label) */
  .products-list[data-view="grid"] .product-grid-details {
    display: none;
  }

  /* Actions section: full width, no border, auto height */
  .products-list[data-view="grid"] .product-grid-actions {
    width: 100%;
    height: auto;
    border-left: none;
    padding-left: 0;
    justify-content: flex-start;
  }

  /* Hide price block in actions (price is now in mobile-meta) */
  .products-list[data-view="grid"] .product-grid-price-block {
    display: none;
  }

  /* Cart block: horizontal row */
  .products-list[data-view="grid"] .product-grid-cart-block {
    flex-direction: row;
    /* SBSIL-155: wrap so the full-width "Maximum available" caption drops below
       the counter+button row instead of squeezing in beside the button. */
    flex-wrap: wrap;
    gap: 16px;
  }

  /* Counter: flex 1 */
  .products-list[data-view="grid"] .product-grid-counter {
    flex: 1;
    min-width: 0;
    /* SBSIL-155: on a narrow phone the grid counter shrinks to ~124px; the base
       16px gap + 44px buttons left the value box at 0 width (number invisible).
       A tight gap keeps the quantity readable. */
    gap: 2px;
  }

  /* Add to cart: flex 1 */
  .products-list[data-view="grid"] .product-grid-addtocart {
    flex: 1;
    min-width: 0;
  }

  /* No-cart cards: hide empty actions section */
  .products-list[data-view="grid"] .product-list-item--no-cart .product-grid-actions {
    display: none;
  }

  /* ---- Mobile Pagination ---- */
  .sbs-pagination {
    padding: 12px 0;
  }

  .sbs-pagination-inner {
    gap: 16px;
  }

  /* Settings page: fields to single column */
  .sbs-settings-fields--two-col {
    grid-template-columns: 1fr;
  }

  .sbs-settings-section-title {
    font-size: 22px;
  }

  .sbs-settings-page-title {
    font-size: 22px;
  }

  .sbs-settings-actions {
    flex-direction: column-reverse;
  }

  .sbs-settings-actions .sbs-settings-btn-cancel,
  .sbs-settings-actions .sbs-settings-btn-save {
    width: 100%;
  }

  /* Users list → accordion */
  .sbs-users-list {
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  .sbs-users-list-header {
    display: none;
  }

  /* Card container */
  .sbs-users-row-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--sbs-white);
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
  }

  /* Header row: name (inline with toggle) */
  .sbs-users-row-wrap > .sbs-users-row {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    padding: 0 0 0 16px;
    background: var(--sbs-bg-gray);
    white-space: normal;
    align-items: center;
  }

  .sbs-users-row-toggle {
    background: var(--sbs-bg-gray);
  }

  .sbs-users-col-date,
  .sbs-users-col-email,
  .sbs-users-col-phone,
  .sbs-users-col-status,
  .sbs-users-col-action {
    display: none;
  }

  .sbs-users-col-name {
    flex: 1;
    min-width: 0;
    width: auto;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .sbs-users-row-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 56px;
    flex-shrink: 0;
    color: var(--sbs-text-dark);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .sbs-users-row-wrap.is-expanded .sbs-users-row-toggle svg {
    transform: rotate(180deg);
  }

  /* Expanded: flatten row so detail columns become direct children of wrap */
  .sbs-users-row-wrap.is-expanded > .sbs-users-row {
    display: contents;
  }

  /* Name becomes header bar */
  .sbs-users-row-wrap.is-expanded .sbs-users-col-name {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 56px;
    padding: 0 0 0 16px;
    background: var(--sbs-bg-gray);
    border-radius: 10px 0 0 0;
    font-size: 16px;
    letter-spacing: -0.32px;
    order: -2;
  }

  .sbs-users-row-wrap.is-expanded .sbs-users-row-toggle {
    background: var(--sbs-bg-gray);
    border-radius: 0 10px 0 0;
    order: -1;
  }

  .sbs-users-row-wrap.is-expanded .sbs-users-col-date,
  .sbs-users-row-wrap.is-expanded .sbs-users-col-email,
  .sbs-users-row-wrap.is-expanded .sbs-users-col-phone,
  .sbs-users-row-wrap.is-expanded .sbs-users-col-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--sbs-text-dark);
    padding: 12px 16px;
    white-space: normal;
    border-top: 1px solid var(--sbs-border-light);
  }

  .sbs-users-row-wrap.is-expanded .sbs-users-col-date::before,
  .sbs-users-row-wrap.is-expanded .sbs-users-col-email::before,
  .sbs-users-row-wrap.is-expanded .sbs-users-col-phone::before,
  .sbs-users-row-wrap.is-expanded .sbs-users-col-status::before {
    content: attr(data-label);
    font-weight: 400;
    font-size: 14px;
    color: rgba(35, 46, 56, 0.8);
    flex-shrink: 0;
  }

  .sbs-users-row-wrap.is-expanded .sbs-users-col-action {
    display: flex;
    width: 100%;
    flex: none;
    padding: 12px 16px 14px;
  }

  .sbs-users-row-wrap.is-expanded .sbs-users-action-form {
    width: 100%;
  }

  .sbs-users-row-wrap.is-expanded .sbs-users-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 40px;
    border: 1px solid var(--sbs-border-light);
    border-radius: var(--sbs-radius-lg);
    box-shadow: var(--sbs-shadow-sm);
    font-family: var(--sbs-font-ui);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
    color: var(--sbs-text-dark);
    background: var(--sbs-white);
    cursor: pointer;
  }

  .sbs-users-row-wrap.is-expanded .sbs-users-action-label {
    display: inline;
  }

  /* Product page */
  .product-page-top {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .product-gallery-main {
    height: 300px;
  }

  .product-info-name {
    font-size: 24px;
  }

  .product-info-price-current {
    font-size: 28px;
  }

  .product-info-download-row {
    flex-direction: column;
    height: auto;
    padding: 12px 14px;
    gap: 4px;
    align-items: flex-start;
  }

  /* Product carousel */
  .product-carousel {
    margin-top: 48px;
  }

  .product-carousel + .product-carousel {
    margin-top: 32px;
  }

  .product-carousel-title {
    font-size: 24px;
  }

  .product-carousel-card {
    flex: 0 0 calc((100% - 16px) / 2);
  }

  /* CTA banner: vertical on phone (sidebar already hidden, but the two columns
     can't fit + read comfortably on narrow viewports). */
  .sbs-cta-banner-inner {
    flex-direction: column;
  }

  .sbs-cta-banner-left,
  .sbs-cta-banner-right {
    flex: 1 1 auto;
    width: 100%;
  }

  .sbs-cta-banner-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }

  /* Partners: wrap into 2 columns */
  .sbs-partners-grid {
    flex-wrap: wrap;
  }

  .sbs-partners-card {
    flex: 0 0 calc(50% - 12px);
    height: 160px;
  }

  /* News cards: stack rows vertically */
  .sbs-news-cards-row {
    flex-direction: column;
  }

  .sbs-news-card--large {
    min-height: auto;
  }

  .sbs-news-card--small {
    min-height: auto;
  }

  .sbs-news-card-title {
    font-size: 20px;
  }
}

/* ========================================
   Responsive: max-width 480px
   (Mobile Figma design at 360px)
   ======================================== */
@media (max-width: 480px) {
  .sbs-header-top {
    padding: 16px;
  }

  .sbs-search-bar-wrap {
    margin: 0 16px 16px;
  }

  .sbs-search-bar {
    padding: 0;
    gap: 0;
    background: none;
    border-radius: 0;
  }

  .is-search-open .sbs-search-bar {
    border-radius: 0;
    box-shadow: none;
  }

  .is-search-open .sbs-search-input-wrap {
    border-radius: var(--sbs-radius-lg) var(--sbs-radius-lg) 0 0;
    border-bottom: none;
  }

  .sbs-search-input-wrap {
    padding: 12px 16px;
    border-radius: var(--sbs-radius-lg);
  }

  .sbs-search-dropdown {
    padding: 10px 12px;
  }

  .sbs-search-item-name {
    font-size: 16px;
  }

  .sbs-search-item-image {
    width: 56px;
    height: 44px;
  }

  .sbs-search-item {
    gap: 12px;
  }

  .sbs-search-item-code {
    font-size: 13px;
  }

  .sbs-search-item + .sbs-search-item {
    margin-top: 12px;
    padding-top: 12px;
  }

  .sbs-search-show-all {
    height: 44px;
    margin-top: 12px;
    font-size: 15px;
  }

  /* Header button overrides for Figma mobile spec */
  .sbs-cart-btn--header {
    height: 40px;
    border-color: var(--sbs-border-light);
    border-radius: var(--sbs-radius-sm);
  }

  .sbs-hamburger-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--sbs-radius-sm);
  }

  /* Logo: reduce to Figma mobile spec */
  .sbs-logo {
    height: 24.7px;
  }

  .sbs-logo-symbol {
    width: 32.33px;
    height: 24.7px;
  }

  .sbs-logo-text {
    font-size: 18.8px;
    letter-spacing: -0.376px;
  }

  /* Reduce gap between cart and burger */
  .sbs-header-top-right {
    gap: 8px;
  }


  /* Footer */
  .sbs-footer {
    padding: 48px 24px;
    gap: 32px;
  }

  .sbs-footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .sbs-footer-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .sbs-footer-nav-sep {
    display: none;
  }

  .sbs-footer-right {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .sbs-footer-bottom {
    flex-direction: column;
    gap: 24px;
  }

  .sbs-footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .sbs-footer-link {
    color: var(--sbs-text-secondary);
  }

  .sbs-footer-copyright {
    text-align: left;
  }

  /* Simple pages (auth/registration/password): minimal footer */
  #authentication .sbs-footer-links,
  #registration .sbs-footer-links,
  #password .sbs-footer-links,
  #module-sbsregistration-checkemail .sbs-footer-links,
  #module-sbsregistration-confirm .sbs-footer-links {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
  }

  #authentication .sbs-footer-link:nth-child(-n+2),
  #registration .sbs-footer-link:nth-child(-n+2),
  #password .sbs-footer-link:nth-child(-n+2),
  #module-sbsregistration-checkemail .sbs-footer-link:nth-child(-n+2),
  #module-sbsregistration-confirm .sbs-footer-link:nth-child(-n+2) {
    display: none;
  }

  #authentication .sbs-footer-bottom,
  #registration .sbs-footer-bottom,
  #password .sbs-footer-bottom,
  #module-sbsregistration-checkemail .sbs-footer-bottom,
  #module-sbsregistration-confirm .sbs-footer-bottom {
    gap: 24px;
  }

  #authentication .sbs-footer-copyright,
  #registration .sbs-footer-copyright,
  #password .sbs-footer-copyright,
  #module-sbsregistration-checkemail .sbs-footer-copyright,
  #module-sbsregistration-confirm .sbs-footer-copyright {
    text-align: center;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--sbs-border-light);
  }

  /* Content area padding */
  .container {
    padding: 0 16px;
  }

  /* Registration page */
  .sbs-registration {
    padding: 16px 8px;
  }

  .sbs-registration-card {
    padding: 20px 16px 16px;
    gap: 20px;
  }

  .sbs-registration-form {
    gap: 20px;
  }

  .sbs-registration-title {
    font-size: 22px;
    letter-spacing: -0.66px;
  }

  /* Login page */
  .sbs-login {
    padding: 16px 8px;
  }

  .sbs-login-card {
    padding: 20px 16px 16px;
    gap: 20px;
  }

  .sbs-login-title {
    font-size: 22px;
    letter-spacing: -0.66px;
  }

  /* Forgot Password page */
  .sbs-password { padding: 16px 8px; }
  .sbs-password-card { padding: 20px 16px 24px; gap: 16px; }
  .sbs-password-title { font-size: 22px; letter-spacing: -0.66px; }

  /* Check Email / Confirm pages */
  .sbs-checkemail,
  .sbs-confirm { padding: 16px 8px; }
  .sbs-checkemail-card,
  .sbs-confirm-card { padding: 24px 16px; }
  .sbs-checkemail-title,
  .sbs-confirm-title { font-size: 20px; }

  /* Product page */
  .product-gallery-thumb {
    height: 48px;
  }

  .product-info {
    gap: 24px;
  }

  /* Keep the unavailable-actions offset consistent with desktop (effective
     ~16px): the base -16px assumes gap:32px, but here gap is 24px. */
  .product-info-actions--unavailable {
    margin-top: -8px;
  }

  .product-info-name {
    font-size: 26px;
  }

  .product-info-refs {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .product-info-refs-sep {
    display: none;
  }

  .product-info-price-current {
    font-size: 24px;
  }

  .product-info-price-old {
    font-size: 16px;
  }

  .product-info-extra {
    gap: 24px;
  }

  #product-extra-content:not([hidden]) + .product-params {
    margin-top: 0;
  }

  .product-params-header {
    padding: 0 16px;
    height: 48px;
  }

  .product-params-row {
    padding: 0 16px;
  }

  .product-params-vals {
    gap: 24px;
  }

  /* Product carousel */
  .product-carousel {
    margin-top: 32px;
  }

  .product-carousel + .product-carousel {
    margin-top: 24px;
  }

  .product-carousel-header {
    margin-bottom: 16px;
  }

  .product-carousel-nav {
    display: none;
  }

  .product-carousel-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .product-carousel-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  .product-carousel-card-img {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* CTA Banner: mobile */
  .sbs-cta-banner {
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
  }

  .sbs-cta-banner-inner {
    padding: 48px 16px;
    gap: 40px;
  }

  .sbs-cta-banner-left .sbs-cta-banner-title {
    max-width: 100%;
  }

  .sbs-cta-banner-benefits {
    gap: 0;
  }

  .sbs-cta-banner-benefit {
    padding: 20px 0;
    border-bottom: 1px solid var(--sbs-border-soft);
  }

  .sbs-cta-banner-benefit:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .sbs-cta-banner-benefit:first-child {
    padding-top: 0;
  }

  .sbs-cta-banner-right-text {
    text-align: center;
  }

  .sbs-cta-banner-title {
    font-size: 30px;
    letter-spacing: -0.9px;
    text-align: center;
  }

  .sbs-cta-banner-subtitle {
    max-width: 100%;
    text-align: center;
  }

  .sbs-cta-banner-btn {
    width: 100%;
    align-self: center;
    justify-content: center;
  }

  /* Latest news: mobile horizontal scroll */
  .sbs-latest-news {
    gap: 24px;
  }

  .sbs-latest-news-title {
    font-size: 30px;
    letter-spacing: -0.9px;
  }

  .sbs-latest-news-subtitle {
    font-size: 16px;
    letter-spacing: -0.16px;
    line-height: 1.5;
  }

  .sbs-latest-news-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px;
  }

  .sbs-latest-news-grid::-webkit-scrollbar {
    display: none;
  }

  .sbs-latest-news-card {
    flex: 0 0 302px;
    scroll-snap-align: center;
  }

  .sbs-latest-news-btn {
    width: calc(100% - 32px);
    justify-content: center;
  }

  /* Banner carousel: mobile — controls below, dots visible */
  .sbs-banner-carousel-viewport {
    border-radius: var(--sbs-radius-sm);
  }

  .sbs-banner-carousel-slide img {
    height: 171px;
  }

  .sbs-banner-carousel-arrow {
    position: static;
    width: 85px;
    height: 40px;
    border-radius: var(--sbs-radius-md);
    border: 1px solid #f1f1f1;
    box-shadow: none;
    transform: none;
  }

  .sbs-banner-carousel-arrow--left {
    border-radius: var(--sbs-radius-md);
  }

  .sbs-banner-carousel-arrow--right {
    border-radius: var(--sbs-radius-md);
  }

  .sbs-banner-carousel[data-banner-carousel] {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sbs-banner-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .sbs-banner-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Partners: mobile */
  .sbs-partners {
    gap: 24px;
  }

  .sbs-partners-title {
    font-size: 30px;
    letter-spacing: -0.9px;
  }

  .sbs-partners-subtitle {
    font-size: 16px;
    letter-spacing: -0.16px;
    line-height: 1.5;
  }

  .sbs-partners-grid {
    gap: 16px;
  }

  .sbs-partners-card {
    flex: 0 0 calc(50% - 8px);
    height: 115px;
    border-radius: var(--sbs-radius-xl);
  }

  .sbs-partners-logo {
    max-width: 100px;
    max-height: 36px;
  }

  /* Homepage section spacing — компактнее на mobile */
  .page-home > section + section {
    margin-top: 48px;
  }

  /* News cards: compact mobile layout — text on top, image at bottom per Figma */
  .sbs-news-cards {
    gap: 16px;
  }

  .sbs-news-cards-row {
    gap: 16px;
  }

  .sbs-news-card {
    flex-direction: column;
    border-radius: var(--sbs-radius-xl);
  }

  .sbs-news-card-img {
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 200px;
  }

  .sbs-news-card--large .sbs-news-card-img,
  .sbs-news-card--small .sbs-news-card-img {
    width: 100%;
    height: auto;
  }

  .sbs-news-card-body {
    order: 0;
    padding: 16px 16px 12px;
  }

  .sbs-news-card-title {
    font-size: 18px;
  }

  .sbs-news-card-desc {
    font-size: 14px;
  }

  .sbs-news-card-bullets li {
    font-size: 14px;
  }
}

/* ========================================
   Cart Page
   ======================================== */

/* Warehouse pickup */
.sbs-cart-warehouse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  margin-bottom: 16px;
}

.sbs-cart-warehouse-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-tertiary);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-cart-warehouse-select-wrap {
  position: relative;
  width: 265px;
  flex-shrink: 0;
}

.sbs-cart-warehouse-select {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 16px;
  background: var(--sbs-bg-gray);
  border: 1px solid #dadcdf;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  color: #323232;
  letter-spacing: -0.32px;
  appearance: none;
  cursor: pointer;
}

.sbs-cart-warehouse-select-wrap svg {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--sbs-text-dark);
}

/* Cart table container */
.sbs-cart-table {
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  overflow: hidden;
  background: var(--sbs-white);
}

/* Info banner */
.sbs-cart-info-banner {
  padding: 0 20px;
  min-height: 56px;
  display: flex;
  align-items: center;
}

.sbs-cart-info-banner-content {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #323232;
}

.sbs-cart-info-banner-content svg {
  flex-shrink: 0;
}

.sbs-cart-info-banner-content span {
  font-size: 14px;
  line-height: 20px;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Table body */
.sbs-cart-table-body {
  padding-bottom: 12px;
}

/* Table header */
.sbs-cart-table-header-wrap {
  padding: 0 8px;
}

.sbs-cart-table-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 0 16px;
  background: var(--sbs-bg-gray);
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #323232;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Column widths */
.sbs-cart-col-product { flex: 1 1 0; min-width: 0; }
.sbs-cart-col-ref {
  width: 110px;
  flex-shrink: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sbs-cart-col-package { width: 100px; flex-shrink: 0; }
.sbs-cart-col-availability {
  width: 100px;
  flex-shrink: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sbs-cart-col-price { width: 90px; flex-shrink: 0; }
.sbs-cart-col-qty { width: 140px; flex-shrink: 0; }

/* Long SKU value: wrap inside the cell, never overflow into neighbours */
.sbs-cart-col-ref-value {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Product rows */
.sbs-cart-products {
  display: flex;
  flex-direction: column;
}

.sbs-cart-product-row {
  padding: 0 8px;
}

.sbs-cart-product-row-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-cart-product-name a {
  color: var(--sbs-text-dark);
  text-decoration: none;
}

.sbs-cart-product-name a:hover {
  text-decoration: underline;
}

/* Quantity actions */
.sbs-cart-qty-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Cart counter */
.sbs-cart-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 86px;
  height: 28px;
  /* SBSIL-155: unify with the listing/Figma Counter border (was --sbs-border-light). */
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-sm);
  background: var(--sbs-white);
  padding: 4px;
}

.sbs-cart-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
  border: none;
  background: var(--sbs-bg-gray);
  border-radius: 3.5px;
  cursor: pointer;
  padding: 0;
  color: var(--sbs-text-dark);
  flex-shrink: 0;
}

/* SBSIL-155: dark fill on hover (matches the listing stepper); :active kept for
   touch. Guarded so the fill doesn't stick after tap on touch devices. */
@media (hover: hover) and (pointer: fine) {
  .sbs-cart-counter-btn:not(:disabled):hover {
    background: #323232;
    color: #f5f5f5;
  }
}

.sbs-cart-counter-btn:active {
  background: #323232;
  color: #f5f5f5;
}

.sbs-cart-counter-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sbs-cart-counter-value {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: var(--sbs-text-dark);
  /* SBSIL-155: the fixed 44px input + two 20px buttons + 8px padding exceeded
     the 86px counter, pushing the "+" button outside its border. Let the input
     flex and shrink so the buttons stay pinned to the counter edges. */
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  -moz-appearance: textfield;
}

.sbs-cart-counter-value::-webkit-inner-spin-button,
.sbs-cart-counter-value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sbs-cart-counter-value:focus {
  outline: none;
  border-color: var(--sbs-border-light);
  background: var(--sbs-white);
}

/* Remove button */
.sbs-cart-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: var(--sbs-text-dark);
  text-decoration: none;
  flex-shrink: 0;
}

/* SBSIL-155: remove button fills red on hover (white trash glyph); :active kept
   for touch. Guarded so the fill doesn't stick after tap on touch devices. */
@media (hover: hover) and (pointer: fine) {
  .sbs-cart-remove-btn:hover {
    background: var(--sbs-primary);
    color: #f5f5f5;
  }
}

.sbs-cart-remove-btn:active {
  background: var(--sbs-primary);
  color: #f5f5f5;
  border-radius: 4px;
}

/* Totals section */
.sbs-cart-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.sbs-cart-totals-row-wrap {
  padding: 0 8px;
}

.sbs-cart-totals-row {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  background: var(--sbs-bg-gray);
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  color: #323232;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-cart-totals-label {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 500;
}

.sbs-cart-totals-amount {
  width: 90px;
  flex-shrink: 0;
  font-weight: 700;
  margin-right: 140px;
}

/* Save draft */
.sbs-cart-draft {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.sbs-cart-draft-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
}

.sbs-cart-draft-input {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  padding: 12px 16px;
  background: var(--sbs-bg-gray);
  border: 1px solid #dadcdf;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
}

.sbs-cart-draft-input::placeholder {
  color: var(--sbs-text-secondary);
}

.sbs-cart-draft-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: #323232;
  color: var(--sbs-white);
  border: none;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.32px;
  cursor: pointer;
  white-space: nowrap;
}

.sbs-cart-draft-btn:hover {
  background: var(--sbs-text-dark);
}

.sbs-cart-draft-comments {
  padding: 20px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: 4px;
}

.sbs-cart-draft-textarea {
  display: block;
  width: 100%;
  min-height: 95px;
  padding: 12px 16px;
  background: var(--sbs-bg-gray);
  border: 1px solid #dadcdf;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  resize: vertical;
}

.sbs-cart-draft-textarea::placeholder {
  color: var(--sbs-text-secondary);
}

/* Cart actions */
.sbs-cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  gap: 15px;
}

.sbs-cart-actions-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Continue shopping button */
.sbs-cart-continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding: 10px 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  box-shadow: var(--sbs-shadow-sm);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--sbs-text-dark);
  letter-spacing: -0.32px;
  text-decoration: none;
  white-space: nowrap;
}

.sbs-cart-continue-btn:hover {
  background: #323232;
  border-color: #323232;
  color: #f5f5f5;
}

.sbs-cart-continue-btn svg {
  flex-shrink: 0;
}

/* Clear button */
.sbs-cart-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding: 10px 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  box-shadow: var(--sbs-shadow-sm);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--sbs-text-dark);
  letter-spacing: -0.32px;
  cursor: pointer;
  white-space: nowrap;
}

.sbs-cart-clear-btn:hover {
  background: var(--sbs-bg-gray);
}

.sbs-cart-clear-btn svg {
  flex-shrink: 0;
}

/* Place order button */
.sbs-cart-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 48px;
  padding: 0 24px;
  background: var(--sbs-primary);
  color: var(--sbs-white);
  border: none;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.sbs-cart-order-btn:hover {
  background: var(--sbs-primary-dark);
}

.sbs-cart-order-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sbs-cart-warning {
  font-size: 13px;
  color: var(--sbs-primary);
}

/* Gift product */
.sbs-cart-gift-qty {
  font-size: 14px;
  font-weight: 500;
  color: var(--sbs-text-dark);
}

/* Empty cart */
.sbs-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.sbs-cart-empty-icon {
  color: var(--sbs-text-secondary);
  margin-bottom: 16px;
}

.sbs-cart-empty-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--sbs-text-dark);
  margin-bottom: 8px;
}

.sbs-cart-empty-text {
  font-size: 14px;
  color: var(--sbs-text-secondary);
  margin-bottom: 24px;
}

.sbs-cart-empty-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  background: var(--sbs-primary);
  color: var(--sbs-white);
  border-radius: var(--sbs-radius-sm);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.sbs-cart-empty-btn:hover {
  background: var(--sbs-primary-dark);
}

/* Desktop: hide product image, product-top/info/meta are transparent */
.sbs-cart-product-img { display: none; }
.sbs-cart-product-top { display: contents; }
.sbs-cart-product-info { display: contents; }
.sbs-cart-product-meta { display: contents; }

/* Mobile cart (<768px): card layout */
@media (max-width: 768px) {
  /* Table: remove border, let content flow freely */
  .sbs-cart-table {
    border: none;
    border-radius: 0;
  }

  /* Info banner: simple text, no card */
  .sbs-cart-info-banner {
    padding: 0 0 8px;
  }

  .sbs-cart-table-header-wrap { display: none; }

  .sbs-cart-table-body { padding-bottom: 0; }

  .sbs-cart-products {
    gap: 16px;
    padding: 0 0 16px;
  }

  .sbs-cart-product-row { padding: 0; }

  .sbs-cart-product-row-inner {
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    background: var(--sbs-white);
    border: 1px solid #e7e7e7;
    border-radius: var(--sbs-radius-sm);
  }

  /* Warehouse: hide label, only show dropdown */
  .sbs-cart-warehouse-label { display: none; }

  /* Top section: image + info side by side */
  .sbs-cart-product-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
  }

  .sbs-cart-product-img {
    display: block;
    width: 100px;
    min-height: 104px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .sbs-cart-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .sbs-cart-product-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-end;
  }

  /* Product name: 2-line clamp */
  .sbs-cart-col-product {
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.14px;
    max-height: 36px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Meta rows (ID, Package, Availability) */
  .sbs-cart-product-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .sbs-cart-col-ref,
  .sbs-cart-col-package,
  .sbs-cart-col-availability {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: var(--sbs-text-dark);
    letter-spacing: 0.42px;
  }

  .sbs-cart-col-ref::before,
  .sbs-cart-col-package::before,
  .sbs-cart-col-availability::before {
    content: attr(data-label) ':';
    font-weight: 400;
    font-size: 15px;
    color: var(--sbs-text-tertiary);
    letter-spacing: 0;
  }

  .sbs-cart-col-ref-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Price: bold, right-aligned */
  .sbs-cart-col-price {
    width: auto;
    font-size: 16px;
    font-weight: 700;
    color: #323232;
  }

  .sbs-cart-col-price::before { display: none; }

  /* Counter: larger on mobile */
  .sbs-cart-col-qty { width: 100%; }

  .sbs-cart-qty-actions { justify-content: space-between; }

  .sbs-cart-counter {
    width: 144px;
    height: 48px;
  }

  .sbs-cart-counter-btn { width: 40px; }

  /* Totals */
  .sbs-cart-totals-row-wrap { padding: 0; }

  .sbs-cart-totals-row { padding: 12px 16px; }

  .sbs-cart-totals-amount {
    width: auto;
    margin-right: 0;
    text-align: right;
  }

  /* Warehouse: full-width dropdown only */
  .sbs-cart-warehouse {
    padding: 0;
    border: none;
  }

  .sbs-cart-warehouse-select-wrap { width: 100%; }

  .sbs-cart-warehouse-select {
    height: 48px;
    border-radius: var(--sbs-radius-sm);
    border: 1px solid var(--sbs-border-light);
    background: var(--sbs-white);
  }

  /* Draft: merge into single card on mobile */
  .sbs-cart-draft {
    padding: 16px;
    background: var(--sbs-white);
    border: 1px solid var(--sbs-border-light);
    border-radius: var(--sbs-radius-sm);
  }

  .sbs-cart-draft-row {
    display: contents;
  }

  .sbs-cart-draft-comments {
    display: contents;
  }

  .sbs-cart-draft-input {
    flex: none;
    width: 100%;
  }

  .sbs-cart-draft-textarea {
    order: 5;
  }

  .sbs-cart-draft-btn {
    width: 100%;
    order: 10;
  }

  /* Reorder: draft after actions on mobile */
  .sbs-cart {
    display: flex;
    flex-direction: column;
  }

  .sbs-cart-draft {
    order: 10;
  }

  /* Actions: Clear + Place order in a row */
  .sbs-cart-continue-btn {
    display: none;
  }

  .sbs-cart-actions {
    gap: 15px;
  }

  .sbs-cart-actions-right {
    flex: 1;
    gap: 15px;
  }

  .sbs-cart-clear-btn {
    flex: 1;
  }

  .sbs-cart-order-btn {
    width: 190px;
    flex-shrink: 0;
  }

  /* Divider between actions and draft */
  .sbs-cart-draft {
    margin-top: 80px;
    position: relative;
  }

  .sbs-cart-draft::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sbs-border-light);
  }
}


/* ==========================================================================
   DRAFTS PAGE
   ========================================================================== */

.sbs-drafts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sbs-drafts-title {
  font-family: var(--sbs-font-ui);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--sbs-text-dark);
  margin: 0;
}

.sbs-drafts-my-only {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  user-select: none;
}

.sbs-drafts-my-only input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--sbs-primary);
}

/* Toolbar */
.sbs-drafts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  margin-bottom: 16px;
}

.sbs-drafts-count {
  font-size: 16px;
  line-height: 20px;
  color: #323232;
  margin: 0;
}

.sbs-drafts-count-num {
  font-weight: 500;
}

.sbs-drafts-filters {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sbs-drafts-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sbs-drafts-select {
  height: 40px;
  padding: 8px 40px 8px 16px;
  background: var(--sbs-bg-gray);
  border: 1px solid #dadcdf;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: #323232;
  appearance: none;
  cursor: pointer;
  min-width: 200px;
}

.sbs-drafts-select-wrap--sm .sbs-drafts-select {
  min-width: auto;
  padding-right: 36px;
}

.sbs-drafts-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #323232;
}

/* Table */
.sbs-drafts-table {
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  overflow: hidden;
  background: var(--sbs-white);
}

.sbs-drafts-table-body {
  padding: 12px 0;
}

.sbs-drafts-table-header-wrap {
  padding: 0 8px;
}

.sbs-drafts-table-header {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--sbs-bg-gray);
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #323232;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

/* Column widths */
.sbs-drafts-col-order { width: 90px; flex-shrink: 0; }
.sbs-drafts-col-date { width: 90px; flex-shrink: 0; }
.sbs-drafts-col-user { width: 120px; flex-shrink: 0; }
.sbs-drafts-col-project { flex: 1 1 0; min-width: 0; }
.sbs-drafts-col-warehouse { flex: 1 1 0; min-width: 0; }
.sbs-drafts-col-amount { width: 140px; flex-shrink: 0; }
.sbs-drafts-col-status { width: 80px; flex-shrink: 0; text-align: right; }

/* Rows */
.sbs-drafts-rows {
  display: flex;
  flex-direction: column;
}

.sbs-drafts-row-wrap {
  padding: 0 8px;
}

.sbs-drafts-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  text-decoration: none;
  transition: background 0.15s;
}

a.sbs-drafts-row {
  cursor: pointer;
}

.sbs-drafts-row:hover {
  background: var(--sbs-bg-gray);
}

.sbs-drafts-row--alt {
  background: transparent;
}

.sbs-drafts-col-amount {
  color: var(--sbs-primary);
  white-space: nowrap;
}

/* Status badge */
.sbs-drafts-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 5px 20px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  font-size: 14px;
  line-height: 24px;
  color: var(--sbs-text-dark);
  white-space: nowrap;
}

/* Empty state */
.sbs-drafts-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--sbs-text-secondary);
  font-size: 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
}

/* Accordion toggle — hidden on desktop */
.sbs-drafts-row-toggle {
  display: none;
}

/* ==========================================================================
   DRAFTS — Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .sbs-drafts-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sbs-drafts-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sbs-drafts-filters {
    width: 100%;
  }

  .sbs-drafts-select {
    min-width: 0;
    flex: 1;
  }

  .sbs-drafts-select-wrap {
    flex: 1;
  }

  .sbs-drafts-select-wrap--sm {
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  /* Switch to accordion layout */
  .sbs-drafts-table {
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .sbs-drafts-table-body {
    padding: 0;
  }

  .sbs-drafts-table-header-wrap {
    display: none;
  }

  .sbs-drafts-rows {
    gap: 8px;
  }

  /* Row wrapper = accordion card */
  .sbs-drafts-row-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    background: var(--sbs-white);
    border: 1px solid var(--sbs-border-light);
    border-radius: var(--sbs-radius-sm);
  }

  /* Row link = accordion header */
  .sbs-drafts-row {
    flex: 1;
    min-width: 0;
    min-height: auto;
    padding: 12px 0 12px 16px;
    border: none;
    background: none;
    border-radius: 0;
    gap: 8px;
  }

  .sbs-drafts-row--alt {
    background: transparent;
  }

  /* Hide detail columns by default */
  .sbs-drafts-col-date,
  .sbs-drafts-col-user,
  .sbs-drafts-col-project,
  .sbs-drafts-col-warehouse,
  .sbs-drafts-col-amount {
    display: none;
  }

  /* Status badge visible in collapsed state (no label) */
  .sbs-drafts-col-status {
    width: auto;
    flex: none;
    text-align: right;
  }

  /* Order ID always visible */
  .sbs-drafts-col-order {
    width: auto;
    flex: none;
    font-weight: 500;
  }

  /* Badge always visible next to order ID */
  .sbs-drafts-badge {
    font-size: 13px;
    height: 24px;
    padding: 4px 12px;
  }

  /* Chevron toggle */
  .sbs-drafts-row-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--sbs-text-dark);
    transition: transform 0.2s;
  }

  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-row-toggle svg {
    transform: rotate(180deg);
  }

  /* Expanded: show detail columns as label:value pairs */
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-row {
    flex-wrap: wrap;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--sbs-border-light);
  }

  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-date,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-user,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-project,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-warehouse,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-amount,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.32;
    color: var(--sbs-text-dark);
    padding: 4px 16px;
  }

  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-date::before,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-user::before,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-project::before,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-warehouse::before,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-amount::before,
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-status::before {
    content: attr(data-label);
    font-weight: 400;
    font-size: 15px;
    color: var(--sbs-text-tertiary);
  }

  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-amount {
    color: var(--sbs-primary);
  }

  /* Hide badge in expanded status (show text via ::before label) */
  .sbs-drafts-row-wrap.is-expanded .sbs-drafts-col-status .sbs-drafts-badge {
    border: none;
    padding: 0;
    background: none;
    height: auto;
  }
}

/* ==========================================================================
   DRAFT DETAIL PAGE
   ========================================================================== */

.sbs-draft-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.sbs-draft-detail-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.26px;
  color: #323232;
  margin: 0;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-dd-download-icon {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--sbs-text-dark);
  text-decoration: none;
}

/* Summary table — column widths */
.sbs-dd-col-order { width: 80px; flex-shrink: 0; }
.sbs-dd-col-date { width: 80px; flex-shrink: 0; }
.sbs-dd-col-user { width: 185px; flex-shrink: 0; }
.sbs-dd-col-project { display: none; }
.sbs-dd-col-warehouse { flex: 1 1 0; min-width: 0; }
.sbs-dd-col-excl { width: 140px; flex-shrink: 0; white-space: nowrap; }
.sbs-dd-col-vat { width: 120px; flex-shrink: 0; white-space: nowrap; }
.sbs-dd-col-amount { width: 130px; flex-shrink: 0; white-space: nowrap; }
.sbs-dd-col-status { width: 73px; flex-shrink: 0; text-align: right; }

/* Products table */
.sbs-dd-products {
  margin-top: 16px;
}

.sbs-dd-pcol-code { width: 80px; flex-shrink: 0; }
.sbs-dd-pcol-product { flex: 1 1 0; min-width: 0; }
.sbs-dd-pcol-price { width: 150px; flex-shrink: 0; white-space: nowrap; }
.sbs-dd-pcol-amount { width: 130px; flex-shrink: 0; white-space: nowrap; }
.sbs-dd-pcol-qty { width: 134px; flex-shrink: 0; }

.sbs-dd-info-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  color: #70777c;
}

.sbs-dd-product-row .sbs-dd-pcol-qty {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Product image and meta — hidden on desktop */
.sbs-dd-product-img {
  display: none;
}

.sbs-dd-product-meta {
  display: none;
}

.sbs-dd-price-info-mob {
  display: none;
}

/* Summary accordion — desktop table appearance */
.sbs-dd-summary {
  border-color: var(--sbs-border-light);
}

.sbs-dd-summary-thead {
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 500;
  color: #70777c;
  background: var(--sbs-bg-gray);
  border-bottom: 1px solid var(--sbs-border-light);
}

.sbs-dd-summary .sbs-settings-accordion-header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 56px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  cursor: default;
  pointer-events: none;
}

.sbs-dd-summary .sbs-settings-accordion-chevron {
  display: none;
}

.sbs-dd-summary .sbs-settings-accordion-body {
  display: none;
}

/* Totals */
.sbs-dd-totals {
  padding: 0 8px;
}

.sbs-dd-total-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--sbs-bg-gray);
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  color: #323232;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}

.sbs-dd-total-label {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 500;
}

.sbs-dd-total-value {
  width: 130px;
  flex-shrink: 0;
  font-weight: 700;
}

.sbs-dd-total-spacer {
  width: 134px;
  flex-shrink: 0;
}

/* Action buttons */
.sbs-dd-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  gap: 16px;
}

.sbs-dd-actions-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.sbs-dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding: 10px 16px;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.32px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
}

.sbs-dd-btn--outline {
  background: var(--sbs-white);
  color: var(--sbs-text-dark);
  border: 1px solid var(--sbs-border-light);
  box-shadow: var(--sbs-shadow-sm);
}

.sbs-dd-btn--outline:hover {
  background: var(--sbs-bg-gray);
}

.sbs-dd-btn--primary {
  background: var(--sbs-primary);
  color: var(--sbs-white);
  padding: 10px 24px;
  min-width: 190px;
}

.sbs-dd-btn--primary:hover {
  background: var(--sbs-primary-dark);
}

.sbs-dd-btn--icon svg {
  flex-shrink: 0;
}

/* Rename row */
.sbs-dd-rename {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 12px 16px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
}

.sbs-dd-rename-input {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 12px 16px;
  background: var(--sbs-bg-gray);
  border: 1px solid #dadcdf;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: #323232;
}

.sbs-dd-rename-input::placeholder {
  color: #70777c;
}

.sbs-dd-rename-btn {
  height: 44px;
  padding: 0 24px;
  background: #323232;
  color: var(--sbs-white);
  border: none;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  cursor: pointer;
  white-space: nowrap;
}

.sbs-dd-rename-btn:hover {
  background: #1a1a1a;
}

/* Comments */
.sbs-dd-comments {
  margin-top: 16px;
  padding: 20px;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
}

.sbs-dd-comments-textarea {
  width: 100%;
  min-height: 95px;
  padding: 12px 16px;
  background: var(--sbs-bg-gray);
  border: 1px solid #dadcdf;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--sbs-text-dark);
  resize: vertical;
}

.sbs-dd-comments-textarea::placeholder {
  color: #70777c;
}

.sbs-dd-save-mobile {
  display: none;
}

.sbs-dd-delete-mobile {
  display: none;
}

/* ==========================================================================
   DRAFT DETAIL — Responsive
   ========================================================================== */

@media (max-width: 768px) {
  /* ---- Summary accordion ---- */
  .sbs-dd-summary-thead {
    display: none;
  }

  .sbs-dd-summary .sbs-settings-accordion-header {
    padding: 0 0 0 16px;
    height: 56px;
    cursor: pointer;
    pointer-events: auto;
    background: var(--sbs-bg-gray);
  }

  .sbs-dd-summary .sbs-settings-accordion-header[aria-expanded="true"] {
    border-radius: 0;
  }

  /* Hide desktop columns on mobile */
  .sbs-dd-summary .sbs-dd-col-date,
  .sbs-dd-summary .sbs-dd-col-user,
  .sbs-dd-summary .sbs-dd-col-warehouse,
  .sbs-dd-summary .sbs-dd-col-excl,
  .sbs-dd-summary .sbs-dd-col-vat,
  .sbs-dd-summary .sbs-dd-col-amount {
    display: none;
  }

  .sbs-dd-summary .sbs-dd-col-order {
    width: auto;
    flex: none;
    font-weight: 500;
  }

  .sbs-dd-summary .sbs-dd-col-status {
    width: auto;
    flex: none;
    margin-left: auto;
  }

  .sbs-dd-summary .sbs-settings-accordion-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
  }

  /* Show accordion body on mobile when not hidden */
  .sbs-dd-summary .sbs-settings-accordion-body {
    display: block;
  }

  .sbs-dd-summary .sbs-settings-accordion-body[hidden] {
    display: none;
  }

  /* Reset base accordion-content padding/gap for summary details */
  .sbs-dd-summary .sbs-settings-accordion-content {
    padding: 0;
    gap: 0;
  }

  /* Detail rows */
  .sbs-dd-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--sbs-border-light);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--sbs-text-dark);
  }

  .sbs-dd-detail-row::before {
    content: attr(data-label);
    font-weight: 400;
    font-size: 15px;
    color: rgba(35, 46, 56, 0.8);
  }

  /* Amount EUR — red value */
  .sbs-dd-detail-amount {
    color: var(--sbs-primary);
    font-weight: 700;
  }

  .sbs-dd-detail-amount::before {
    color: rgba(35, 46, 56, 0.8);
    font-weight: 400;
  }

  /* ---- Product cards (grid layout with image) ---- */
  .sbs-dd-products .sbs-drafts-table-header-wrap {
    display: none;
  }

  .sbs-dd-product-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0 12px;
    min-height: auto;
    padding: 16px;
    border: 1px solid var(--sbs-border-light);
    border-radius: var(--sbs-radius-sm);
    margin-bottom: 8px;
  }

  /* Product image — shown on mobile */
  .sbs-dd-product-img {
    display: block;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100px;
    border-radius: 4px;
    overflow: hidden;
    align-self: start;
  }

  .sbs-dd-product-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Product name — right of image */
  .sbs-dd-pcol-product {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  /* Product meta: ID, Package, Availability — right of image */
  .sbs-dd-product-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-column: 2;
    grid-row: 2;
  }

  .sbs-dd-pcol-id,
  .sbs-dd-pcol-package,
  .sbs-dd-pcol-availability {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: var(--sbs-text-dark);
  }

  .sbs-dd-pcol-id::before,
  .sbs-dd-pcol-package::before,
  .sbs-dd-pcol-availability::before {
    content: attr(data-label) ':';
    font-weight: 400;
    font-size: 15px;
    color: var(--sbs-text-tertiary);
  }

  /* Hide desktop Code column on mobile (replaced by ID in meta) */
  .sbs-dd-pcol-code {
    display: none;
  }

  /* Price row — full width with separator */
  .sbs-dd-pcol-price {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--sbs-border-light);
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
  }

  .sbs-dd-pcol-price::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--sbs-text-dark);
  }

  .sbs-dd-price-info-mob {
    display: inline-block;
    flex-shrink: 0;
    color: #70777c;
  }

  .sbs-dd-price-val {
    margin-left: auto;
  }

  /* Amount row — full width, red value */
  .sbs-dd-pcol-amount {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
  }

  .sbs-dd-pcol-amount::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--sbs-text-dark);
  }

  .sbs-dd-amount-val {
    color: var(--sbs-primary);
    font-weight: 700;
  }

  /* Qty row — counter left, trash right */
  .sbs-dd-pcol-qty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--sbs-border-light);
  }

  .sbs-dd-total-spacer {
    display: none;
  }

  .sbs-dd-total-row {
    justify-content: space-between;
  }

  /* ---- Actions ---- */
  .sbs-dd-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Hide download excel text button, show icon in title */
  .sbs-dd-actions > .sbs-dd-btn--outline:first-child {
    display: none;
  }

  .sbs-dd-download-icon {
    display: flex;
  }

  .sbs-dd-actions-right {
    flex-direction: column;
    gap: 8px;
  }

  .sbs-dd-btn--primary {
    min-width: auto;
    order: -1;
    width: 100%;
  }

  .sbs-dd-actions-right .sbs-dd-copy-to-cart {
    width: 100%;
    justify-content: center;
  }

  /* Hide delete from actions, show after save via order */
  .sbs-dd-actions-right .sbs-dd-delete-draft {
    display: none;
  }

  .sbs-draft-detail {
    display: flex;
    flex-direction: column;
  }

  .sbs-dd-delete-mobile {
    display: flex;
    width: 100%;
    justify-content: center;
    order: 20;
    margin-top: 16px;
  }

  /* ---- Rename + Comments → single card ---- */
  .sbs-draft-detail .sbs-dd-rename {
    flex-direction: column;
    margin-top: 24px;
    padding: 16px;
    padding-bottom: 0;
    gap: 16px;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .sbs-dd-rename-input {
    width: 100%;
  }

  .sbs-dd-rename-btn {
    display: none;
  }

  .sbs-dd-comments {
    margin-top: 0;
    padding: 16px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .sbs-dd-comments::after {
    content: '';
    display: block;
    margin-top: 16px;
  }

  /* Save button after comments */
  .sbs-draft-detail .sbs-dd-save-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: #323232;
    color: var(--sbs-white);
    border: none;
    border-radius: var(--sbs-radius-lg);
    font-family: var(--sbs-font-ui);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
    cursor: pointer;
  }
}


/* ==========================================================================
   CONFIRMATION MODAL (shared)
   ========================================================================== */

.sbs-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}

.sbs-confirm-modal {
  background: var(--sbs-white);
  border-radius: var(--sbs-radius-xl);
  padding: 32px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.sbs-confirm-title {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--sbs-text-dark);
  margin: 0 0 8px;
}

.sbs-confirm-message {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-secondary);
  margin: 0 0 24px;
}

.sbs-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.sbs-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--sbs-radius-lg);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.sbs-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sbs-confirm-btn--cancel {
  background: var(--sbs-bg-gray);
  color: var(--sbs-text-dark);
  border: 1px solid var(--sbs-border-light);
}

.sbs-confirm-btn--cancel:hover:not(:disabled) {
  background: #eef0f1;
}

.sbs-confirm-btn--confirm {
  background: var(--sbs-primary);
  color: var(--sbs-white);
}

.sbs-confirm-btn--confirm:hover:not(:disabled) {
  background: var(--sbs-primary-dark);
}

/* ==========================================================================
   Orders page
   ========================================================================== */

.sbs-orders-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sbs-orders-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.78px;
  color: var(--sbs-text-dark);
  margin: 0;
}

.sbs-orders-my-only {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
  cursor: pointer;
}

.sbs-orders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sbs-orders-count {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-secondary);
  margin: 0;
}

.sbs-orders-count-num {
  font-weight: 500;
  color: var(--sbs-text-dark);
}

.sbs-orders-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Orders — search + filters bar */
.sbs-orders-controls {
  margin-bottom: 16px;
}

.sbs-orders-search {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.sbs-orders-search-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
}

.sbs-orders-search-btn,
.sbs-orders-filter-apply {
  flex-shrink: 0;
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: var(--sbs-radius-sm);
  background: var(--sbs-primary);
  color: var(--sbs-white);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.sbs-orders-search-btn {
  height: 40px;
  padding: 0 22px;
}

@media (hover: hover) and (pointer: fine) {
  .sbs-orders-search-btn:hover,
  .sbs-orders-filter-apply:hover {
    background: var(--sbs-primary-dark);
  }
}

.sbs-orders-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sbs-orders-filters-row .sbs-orders-select-wrap {
  min-width: 160px;
}

.sbs-orders-amount {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sbs-orders-amount-input {
  width: 116px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
}

.sbs-orders-amount-sep {
  color: var(--sbs-text-tertiary);
}

.sbs-orders-filter-reset {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-secondary);
  text-decoration: underline;
}

.sbs-orders-select-wrap {
  position: relative;
}

.sbs-orders-select-wrap--sm {
  width: 72px;
}

.sbs-orders-select {
  appearance: none;
  width: 100%;
  height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
  background: var(--sbs-white);
  cursor: pointer;
}

.sbs-orders-select-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--sbs-text-tertiary);
  width: 20px;
  height: 20px;
}

/* Orders table */
.sbs-orders-table {
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  overflow: hidden;
}

.sbs-orders-table-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--sbs-bg-gray);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 14px;
  color: #323232;
}

.sbs-orders-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 24px;
  text-decoration: none;
  color: var(--sbs-text-dark);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 20px;
  transition: background-color 0.1s;
}

.sbs-orders-row:hover {
  background: var(--sbs-bg-gray);
}

.sbs-orders-row--alt {
  background: var(--sbs-white);
}

.sbs-orders-col-order { width: 110px; flex-shrink: 0; }
.sbs-orders-col-date { width: 132px; flex-shrink: 0; }
.sbs-orders-col-user { width: 130px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbs-orders-col-type { width: 140px; flex-shrink: 0; }
.sbs-orders-col-products { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.sbs-orders-col-status { flex-shrink: 1; min-width: 0; white-space: nowrap; }
.sbs-orders-col-amount { width: 100px; flex-shrink: 0; text-align: right; }

.sbs-orders-product-name {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sbs-orders-product-more {
  flex: 0 0 auto;
  color: var(--sbs-text-tertiary);
  white-space: nowrap;
}

/* The whole badge is filled with the order's status colour; the status
   colour is applied inline. var(--sbs-text-secondary) is the fallback when
   an order has no status colour. */
.sbs-orders-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--sbs-white);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--sbs-text-secondary);
}

.sbs-orders-empty {
  padding: 48px 24px;
  text-align: center;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-secondary);
}

/* Order detail */
.sbs-order-detail-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.78px;
  color: var(--sbs-text-dark);
  margin: 0 0 24px;
}

.sbs-order-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  margin-bottom: 24px;
}

.sbs-order-summary > div {
  min-width: 0;
}

.sbs-order-summary-label {
  display: block;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  color: var(--sbs-text-secondary);
  margin-bottom: 4px;
}

.sbs-order-summary-value {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--sbs-text-dark);
}

.sbs-order-section-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 18px;
  color: var(--sbs-text-dark);
  margin: 0 0 12px;
}

/* Cancelled order — replaces the timeline (1С reported «Atcelts») */
.sbs-order-cancelled-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
}

.sbs-order-cancelled-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--sbs-text-secondary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* Order line 1С added for an item the shop does not carry */
.sbs-order-line--off-catalog td:first-child {
  color: var(--sbs-text-secondary);
  font-style: italic;
}

/* Contents revised by the warehouse — "before → after" table */
.sbs-order-changes {
  margin-bottom: 24px;
}

.sbs-order-changes-table tbody tr.sbs-order-change-removed td {
  text-decoration: line-through;
  color: var(--sbs-text-secondary);
}

.sbs-order-changes-table tbody tr.sbs-order-change-added td {
  font-weight: 600;
}

/* Order tracking — lifecycle timeline */
.sbs-order-tracking {
  margin-bottom: 24px;
}

.sbs-order-tracking-type {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
}

.sbs-order-tracking-type-label {
  color: var(--sbs-text-secondary);
}

.sbs-order-track {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbs-order-track-step {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
}

/* connecting line between markers */
.sbs-order-track-step::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--sbs-border-light);
}

.sbs-order-track-step:last-child {
  padding-bottom: 0;
}

.sbs-order-track-step:last-child::before {
  display: none;
}

.sbs-order-track-marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--sbs-border-medium);
  background: var(--sbs-white);
  box-sizing: border-box;
}

.sbs-order-track-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sbs-order-track-name {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-secondary);
}

/* Reached marker — filled. The status colour is applied inline; this is the
   fallback fill when a state has no colour. */
.sbs-order-track-step.is-reached .sbs-order-track-marker {
  border-color: var(--sbs-text-secondary);
  background: var(--sbs-text-secondary);
}

/* Current step — ring around the marker + bold label. */
.sbs-order-track-step.is-current .sbs-order-track-marker {
  box-shadow: 0 0 0 3px var(--sbs-border-light);
}

.sbs-order-track-step.is-reached .sbs-order-track-name {
  color: var(--sbs-text-dark);
}

.sbs-order-track-step.is-current .sbs-order-track-name {
  font-weight: 600;
}

.sbs-order-track-date {
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  color: var(--sbs-text-secondary);
}

.sbs-order-products {
  margin-bottom: 24px;
}

.sbs-order-products-table-wrap {
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  overflow-x: auto;
}

.sbs-order-products-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
}

.sbs-order-products-table thead tr {
  background: var(--sbs-bg-gray);
}

.sbs-order-products-table th {
  font-weight: 500;
  color: #323232;
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}

.sbs-order-products-table td {
  padding: 11px 16px;
  color: var(--sbs-text-dark);
}

.sbs-order-col-right {
  text-align: right;
}

.sbs-order-col-center {
  text-align: center;
}

.sbs-order-products-empty {
  text-align: center;
  color: var(--sbs-text-secondary);
}

/* Order totals — carried in the products table footer (order-detail.tpl). */
.sbs-order-products-table-wrap tfoot tr:first-child td {
  border-top: 1px solid var(--sbs-border-light);
}

.sbs-order-products-table-wrap tfoot .sbs-order-foot-label {
  text-align: right;
  color: var(--sbs-text-secondary);
}

.sbs-order-products-table-wrap tfoot .sbs-order-foot-total td {
  border-top: 1px solid var(--sbs-border-light);
  font-weight: 600;
  font-size: 16px;
}

.sbs-order-products-table-wrap tfoot .sbs-order-foot-total .sbs-order-foot-label {
  color: var(--sbs-text-dark);
}

/* Confirmation-page totals row (order-confirmation-table.tpl). */
.sbs-order-totals-row--total {
  font-weight: 600;
  font-size: 16px;
  border-top: 1px solid var(--sbs-border-light);
  padding-top: 12px;
  margin-top: 4px;
}

.sbs-order-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.sbs-order-address {
  padding: 20px 24px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
}

.sbs-order-address p {
  margin: 0 0 4px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
}

/* Checkout-form snapshot (steps 1-2) on the order detail page */
.sbs-order-checkout-section {
  margin-bottom: 24px;
}

/* Payment requisites — sourced from the native payment modules
   (Bank transfer / Payments by check) */
.sbs-order-payment {
  margin-bottom: 24px;
}

.sbs-order-payment-method {
  margin-bottom: 24px;
}

.sbs-order-payment-method:last-child {
  margin-bottom: 0;
}

.sbs-order-payment-method-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 15px;
  color: var(--sbs-text-dark);
  margin: 0 0 12px;
}

.sbs-order-payment .sbs-order-summary {
  margin-bottom: 0;
}

.sbs-order-payment-multiline {
  white-space: pre-line;
}

.sbs-order-payment-note {
  margin: 12px 0 0;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--sbs-text-secondary);
  white-space: pre-line;
}

/* Order success message — same closing text as the confirmation e-mail */
.sbs-order-success-message {
  margin-bottom: 24px;
  padding: 16px 20px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  background: var(--sbs-bg-gray);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--sbs-text-dark);
  white-space: pre-line;
}

.sbs-order-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-primary);
  text-decoration: none;
}

.sbs-order-back-link:hover {
  text-decoration: underline;
}

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

/* The 7-column orders table does not fit the content area below desktop —
   switch it to a stacked card layout (one order per card, labelled rows). */
@media (max-width: 1024px) {
  .sbs-orders-table-header { display: none; }

  .sbs-orders-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sbs-border-light);
  }

  .sbs-orders-col-date,
  .sbs-orders-col-user,
  .sbs-orders-col-type,
  .sbs-orders-col-products,
  .sbs-orders-col-amount,
  .sbs-orders-col-status {
    width: auto;
    text-align: left;
  }

  .sbs-orders-col-products { display: block; }

  .sbs-orders-col-date::before,
  .sbs-orders-col-user::before,
  .sbs-orders-col-type::before,
  .sbs-orders-col-products::before,
  .sbs-orders-col-amount::before,
  .sbs-orders-col-status::before {
    content: attr(data-label) ': ';
    font-weight: 500;
    color: var(--sbs-text-secondary);
  }
}

@media (max-width: 480px) {
  .sbs-orders-filters-row .sbs-orders-select-wrap {
    min-width: 0;
    flex: 1 1 100%;
  }

  .sbs-orders-amount {
    flex: 1 1 100%;
  }

  .sbs-orders-amount-input {
    flex: 1;
    width: auto;
  }
}

/* ==========================================================================
   Checkout page
   ========================================================================== */

/* --- Checkout header --- */
.sbs-checkout-header {
  border-bottom: 1px solid var(--sbs-border-light);
  background: var(--sbs-white);
}

.sbs-checkout-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
}

.sbs-checkout-header-inner .sbs-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* SBSIL-156: back-to-cart link moved from the top-right header into the content,
   left-aligned above the form (closer to the natural reading flow). */
.sbs-checkout-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.sbs-checkout-back:hover {
  color: var(--sbs-text-dark);
}

/* --- Checkout footer --- */
.sbs-checkout-footer {
  border-top: 1px solid var(--sbs-border-light);
  background: var(--sbs-white);
  margin-top: 48px;
}

.sbs-checkout-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
}

.sbs-checkout-footer-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  color: #059669;
  font-weight: 500;
}

.sbs-checkout-footer-copy {
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  color: var(--sbs-text-tertiary);
  margin: 0;
}

/* --- Main layout --- */
.sbs-checkout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

.sbs-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 1024px) {
  .sbs-checkout {
    padding: 24px 16px;
  }
  .sbs-checkout-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sbs-checkout-summary {
    order: -1;
  }
}

/* --- Step accordion --- */
.sbs-checkout-step {
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--sbs-white);
  transition: box-shadow 0.2s;
}

.sbs-checkout-step.-current {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.sbs-checkout-step-title {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  margin: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 17px;
  color: var(--sbs-text-dark);
  cursor: pointer;
  background: var(--sbs-bg-gray);
  transition: background-color 0.15s;
  user-select: none;
}

.sbs-checkout-step.-current .sbs-checkout-step-title {
  background: var(--sbs-white);
  border-bottom: 1px solid var(--sbs-border-light);
}

.sbs-checkout-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sbs-text-dark);
  color: var(--sbs-white);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.sbs-checkout-step-done {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  flex-shrink: 0;
}

.sbs-checkout-step-label {
  flex: 1;
  min-width: 0;
}

.sbs-checkout-step-edit {
  display: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--sbs-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sbs-checkout-step-content {
  display: none;
  padding: 24px;
}

/* Step states */
.sbs-checkout-step.-current .sbs-checkout-step-content {
  display: block;
}

.sbs-checkout-step.-complete .sbs-checkout-step-done {
  display: inline-flex;
}

.sbs-checkout-step.-complete .sbs-checkout-step-number {
  display: none;
}

.sbs-checkout-step.-complete .sbs-checkout-step-edit {
  display: inline;
}

.sbs-checkout-step.-complete .sbs-checkout-step-title {
  background: var(--sbs-white);
}

.sbs-checkout-step.-unreachable {
  opacity: 0.6;
}

.sbs-checkout-step.-unreachable .sbs-checkout-step-title {
  color: var(--sbs-text-tertiary);
  cursor: default;
}

.sbs-checkout-step.-unreachable .sbs-checkout-step-number {
  background: var(--sbs-text-tertiary);
}

/* --- Buttons --- */
.sbs-checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 28px;
  border: none;
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.sbs-checkout-btn--primary {
  background: var(--sbs-primary);
  color: var(--sbs-white);
}

/* Exclude the soft-gated state (.disabled) so a click-gated step-1 button does
   not darken on hover and look active (SBSIL-161 BUG-002); guard for touch so the
   hover background doesn't stick after tap. */
@media (hover: hover) and (pointer: fine) {
  .sbs-checkout-btn--primary:hover:not(.disabled):not(:disabled) {
    background: var(--sbs-primary-dark);
  }
}

.sbs-checkout-btn--primary.disabled,
.sbs-checkout-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sbs-checkout-btn--primary:not(.disabled):not(:disabled) {
  opacity: 1;
}

.sbs-checkout-btn--secondary {
  background: var(--sbs-white);
  color: var(--sbs-text-dark);
  border: 1px solid var(--sbs-border-medium);
}

.sbs-checkout-btn--secondary:hover {
  background: var(--sbs-bg-gray);
  border-color: var(--sbs-border-dark);
}

.sbs-checkout-btn--place-order {
  width: 100%;
  height: 52px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--sbs-radius-md);
}

.sbs-checkout-order-note {
  margin: 12px 0 0;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sbs-text-secondary);
  text-align: center;
}

/* --- Tabs (personal info) --- */
.sbs-checkout-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--sbs-border-light);
}

.sbs-checkout-tab {
  padding: 10px 24px 12px;
  border: none;
  background: none;
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  color: var(--sbs-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s;
}

.sbs-checkout-tab:hover {
  color: var(--sbs-text-dark);
}

.sbs-checkout-tab.is-active {
  color: var(--sbs-text-dark);
  border-bottom-color: var(--sbs-primary);
  font-weight: 500;
}

.sbs-checkout-tab-pane {
  display: none;
}

.sbs-checkout-tab-pane.is-active {
  display: block;
}

/* --- Logged-in user --- */
.sbs-checkout-logged {
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  line-height: 1.6;
}

.sbs-checkout-logged a {
  color: var(--sbs-primary);
  text-decoration: none;
}

.sbs-checkout-logged a:hover {
  text-decoration: underline;
}

.sbs-checkout-logged form {
  margin-top: 16px;
}

.sbs-checkout-logged-info {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.sbs-checkout-logged-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sbs-bg-gray);
  color: var(--sbs-text-secondary);
  flex-shrink: 0;
}

.sbs-checkout-logged-name {
  margin: 0;
  font-weight: 500;
}

.sbs-checkout-logged-switch {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--sbs-text-secondary);
}

/* --- Hints / Alerts --- */
.sbs-checkout-hint {
  font-size: 13px;
  color: var(--sbs-text-secondary);
  line-height: 1.5;
}

.sbs-checkout-subtitle {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--sbs-text-dark);
  margin: 20px 0 12px;
}

.sbs-checkout-alert {
  padding: 12px 16px;
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.sbs-checkout-alert--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.sbs-checkout-alert--info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.sbs-checkout-alert a {
  color: inherit;
  text-decoration: underline;
}

.sbs-checkout-add-link {
  margin: 12px 0 16px;
}

.sbs-checkout-add-link a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sbs-primary);
  text-decoration: none;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  font-weight: 500;
}

.sbs-checkout-add-link a:hover {
  text-decoration: underline;
}

/* --- Address selector --- */
.sbs-checkout-address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.sbs-checkout-address-item {
  border: 2px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-md);
  padding: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.sbs-checkout-address-item:hover {
  border-color: var(--sbs-border-medium);
}

.sbs-checkout-address-item.selected {
  border-color: var(--sbs-primary);
  box-shadow: 0 0 0 1px var(--sbs-primary);
}

.sbs-checkout-address-label {
  display: block;
  cursor: pointer;
}

.sbs-checkout-address-label input[type="radio"] {
  display: none;
}

.sbs-checkout-address-alias {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
  color: var(--sbs-text-dark);
}

.sbs-checkout-address-formatted {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-secondary);
  line-height: 1.6;
}

.sbs-checkout-address-actions {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sbs-border-light);
}

.sbs-checkout-address-actions a {
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  color: var(--sbs-text-secondary);
  text-decoration: none;
}

.sbs-checkout-address-actions a:hover {
  color: var(--sbs-primary);
}

/* --- Delivery options --- */
.sbs-checkout-delivery-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.sbs-checkout-delivery-option {
  border: 2px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-md);
  overflow: hidden;
  transition: border-color 0.15s;
}

.sbs-checkout-delivery-option:has(input:checked) {
  border-color: var(--sbs-primary);
}

.sbs-checkout-delivery-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
}

.sbs-checkout-delivery-label input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--sbs-primary);
}

.sbs-checkout-delivery-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.sbs-checkout-carrier-logo {
  max-height: 32px;
  max-width: 80px;
  flex-shrink: 0;
}

.sbs-checkout-carrier-name {
  font-weight: 500;
  color: var(--sbs-text-dark);
}

.sbs-checkout-carrier-delay {
  color: var(--sbs-text-secondary);
  font-size: 13px;
}

.sbs-checkout-carrier-price {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sbs-text-dark);
}

.sbs-checkout-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.15s;
}

.sbs-checkout-textarea:focus {
  outline: none;
  border-color: var(--sbs-primary);
}

.sbs-checkout-order-options {
  margin-bottom: 20px;
}

.sbs-checkout-order-options label {
  display: block;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-secondary);
  margin-bottom: 8px;
}

/* --- Payment options --- */
.sbs-checkout-payment-option {
  margin-bottom: 8px;
}

.sbs-checkout-payment-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 2px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-md);
  cursor: pointer;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sbs-checkout-payment-label:hover {
  border-color: var(--sbs-border-medium);
}

.sbs-checkout-payment-label.is-selected,
.sbs-checkout-payment-label:has(input:checked) {
  border-color: var(--sbs-primary);
  box-shadow: 0 0 0 1px var(--sbs-primary);
}

.sbs-checkout-payment-label input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--sbs-primary);
}

.sbs-checkout-payment-text {
  flex: 1;
  font-weight: 500;
  color: var(--sbs-text-dark);
}

.sbs-checkout-payment-logo {
  max-height: 28px;
  flex-shrink: 0;
}

/* --- Conditions --- */
.sbs-checkout-conditions {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.sbs-checkout-conditions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sbs-checkout-conditions li + li {
  margin-top: 12px;
}

.sbs-checkout-condition-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sbs-text-dark);
}

.sbs-checkout-condition-label input {
  margin-top: 4px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--sbs-primary);
}

.sbs-checkout-condition-text a {
  color: var(--sbs-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Same address checkbox --- */
.sbs-checkout-same-address {
  margin: 16px 0;
}

.sbs-checkout-same-address label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  cursor: pointer;
  color: var(--sbs-text-dark);
}

.sbs-checkout-same-address input {
  width: 16px;
  height: 16px;
  accent-color: var(--sbs-primary);
}

.sbs-checkout-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Step 1 (guest): Continue on the left, "Log in" link on the right. */
.sbs-checkout-form-actions--split {
  justify-content: space-between;
}

/* --- Cart summary sidebar --- */
.sbs-checkout-cart-summary {
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
  padding: 24px;
  position: sticky;
  top: 16px;
  background: var(--sbs-white);
}

.sbs-checkout-cart-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sbs-checkout-cart-summary-title {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 18px;
  color: var(--sbs-text-dark);
  margin: 0;
}

.sbs-checkout-cart-summary-edit {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-primary);
  text-decoration: none;
}

.sbs-checkout-cart-summary-edit:hover {
  text-decoration: underline;
}

.sbs-checkout-cart-summary-count {
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  color: var(--sbs-text-secondary);
  margin: 0 0 12px;
}

.sbs-checkout-cart-summary-products {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sbs-checkout-cart-summary-product {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sbs-border-light);
}

.sbs-checkout-cart-summary-product:last-child {
  border-bottom: none;
}

.sbs-checkout-cart-summary-product-img {
  width: 56px;
  height: 56px;
  border-radius: var(--sbs-radius-sm);
  background: var(--sbs-bg-gray);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sbs-checkout-cart-summary-product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sbs-checkout-cart-summary-product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sbs-checkout-cart-summary-name {
  font-weight: 500;
  color: var(--sbs-text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.sbs-checkout-cart-summary-attrs {
  font-size: 12px;
  color: var(--sbs-text-tertiary);
}

.sbs-checkout-cart-summary-qty-price {
  font-size: 13px;
  color: var(--sbs-text-secondary);
}

.sbs-checkout-cart-summary-product-total {
  font-weight: 600;
  color: var(--sbs-text-dark);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

/* --- Summary totals --- */
.sbs-checkout-cart-summary-totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sbs-border-light);
}

.sbs-checkout-cart-summary-line {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
}

.sbs-checkout-cart-summary-line--discount {
  color: #059669;
}

.sbs-checkout-cart-summary-total {
  display: flex;
  justify-content: space-between;
  padding: 16px 0 0;
  margin-top: 8px;
  /* SBSIL-156: was a darker 2px line (--sbs-text-dark) — unify with the dividers
     above (product rows + subtotals) which use 1px --sbs-border-light. */
  border-top: 1px solid var(--sbs-border-light);
  font-family: var(--sbs-font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--sbs-text-dark);
}

/* --- Voucher / Promo code --- */
.sbs-checkout-voucher {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sbs-border-light);
}

.sbs-checkout-voucher-toggle a {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-primary);
  text-decoration: none;
  font-weight: 500;
}

.sbs-checkout-voucher-toggle a:hover {
  text-decoration: underline;
}

.sbs-checkout-voucher-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.sbs-checkout-voucher-form.collapse {
  display: none;
}

.sbs-checkout-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  transition: border-color 0.15s;
}

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

.sbs-checkout-voucher-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.sbs-checkout-voucher-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
}

.sbs-checkout-voucher-name {
  flex: 1;
  min-width: 0;
  color: var(--sbs-text-dark);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sbs-checkout-voucher-reduction {
  color: #059669;
  font-weight: 500;
  white-space: nowrap;
}

.sbs-checkout-voucher-list a {
  color: var(--sbs-text-tertiary);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}

.sbs-checkout-voucher-list a:hover {
  color: var(--sbs-primary);
}

/* --- Order confirmation --- */
.sbs-order-confirmation-header {
  text-align: center;
  padding: 48px 16px 32px;
}

.sbs-order-confirmation-icon {
  margin-bottom: 16px;
}

.sbs-order-confirmation-title {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 28px;
  color: var(--sbs-text-dark);
  margin: 0 0 12px;
}

.sbs-order-confirmation-text {
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  color: var(--sbs-text-secondary);
  line-height: 1.5;
}

.sbs-order-confirmation-text a {
  color: var(--sbs-primary);
}

.sbs-order-confirmation-details {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.sbs-order-confirmation-info {
  margin-top: 24px;
}

.sbs-order-confirmation-info h3 {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 12px;
}

.sbs-order-confirmation-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sbs-order-confirmation-info li {
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  padding: 4px 0;
  color: var(--sbs-text-dark);
}

.sbs-order-confirmation-payment-return {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

/* --- Optional section (password) --- */
.sbs-checkout-optional-section {
  margin: 20px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--sbs-border-light);
}

.sbs-checkout-optional-title {
  font-family: var(--sbs-font-ui);
  font-weight: 500;
  font-size: 15px;
  color: var(--sbs-text-dark);
}

/* --- Final summary --- */
.sbs-checkout-final-summary {
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  padding: 16px;
  margin-bottom: 20px;
  background: var(--sbs-bg-gray);
}

.sbs-checkout-final-summary h3 {
  font-family: var(--sbs-font-ui);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 12px;
}

.sbs-checkout-final-summary-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
}

.sbs-checkout-final-summary-total {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--sbs-border-light);
  font-weight: 600;
}

/* --- Form fields --- */
.sbs-checkout-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .sbs-checkout-form-fields {
    grid-template-columns: 1fr;
  }
}

.sbs-checkout-field {
  min-width: 0;
}

.sbs-checkout-field--error .sbs-registration-input {
  border-color: #ef4444;
}

.sbs-registration-input--select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%2370777c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.sbs-registration-input--textarea {
  min-height: 80px;
  resize: vertical;
  /* Constant top padding leaves room for the floated label without overlap. */
  padding-top: 24px;
}

.sbs-checkout-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sbs-checkout-pickup-warehouse {
  padding: 16px 20px;
  background: var(--sbs-white);
  border: 1px solid #eaecf0;
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
}

.sbs-checkout-pickup-warehouse-name {
  margin: 0;
  font-weight: 600;
}

.sbs-checkout-pickup-warehouse-address {
  margin: 4px 0 0;
  color: var(--sbs-text-secondary);
}

.sbs-checkout-fields-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.sbs-checkout-step-content--no-chooser .sbs-checkout-fields-group {
  margin-top: 0;
}

.sbs-checkout-fields-group[hidden] {
  display: none;
}

.sbs-checkout-section-heading {
  /* gap is 20px; +12 / -8 offsets give 32px from the previous block and
     12px down to the heading's own inputs — asymmetric for hierarchy. */
  margin: 12px 0 -8px;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--sbs-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sbs-checkout-fields-group > .sbs-checkout-section-heading:first-of-type {
  margin-top: 0;
}

/* Guest checkout — Business/Consumer switch, full section width. */
.sbs-checkout-account-switch {
  width: 100%;
}

.sbs-checkout-account-switch .sbs-portal-tab {
  flex: 1;
  white-space: nowrap;
}

/* Guest checkout — company fields revealed on the Business tab. */
.sbs-checkout-guest-business {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sbs-checkout-guest-business[hidden] {
  display: none;
}

/* Checkout step 1 — 6-digit e-mail verification. */
.sbs-checkout-email-verify {
  /* Dissolves the wrapper so its children join the fieldset's flex gap. */
  display: contents;
}

.sbs-checkout-email-verify-panel {
  margin-top: 12px;
  padding: 16px;
  background: var(--sbs-bg-gray);
  border-radius: var(--sbs-radius-sm);
}

.sbs-checkout-email-verify-help {
  margin: 0 0 12px;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sbs-text-secondary);
}

.sbs-checkout-code-inputs {
  display: flex;
  gap: 10px;
}

.sbs-checkout-code-digit {
  width: 48px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--sbs-border-medium);
  border-radius: var(--sbs-radius-sm);
  background: var(--sbs-white);
  font-family: var(--sbs-font-ui);
  font-size: 22px;
  font-weight: 600;
  color: var(--sbs-text-dark);
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
}

.sbs-checkout-code-digit:focus {
  border-color: var(--sbs-text-dark);
}

.sbs-checkout-code-digit.is-error {
  border-color: var(--sbs-primary);
}

.sbs-checkout-email-verify-actions {
  margin-top: 14px;
}

.sbs-checkout-label-verified {
  color: #059669;
}

.sbs-checkout-email-verify-message {
  margin: 8px 0 0;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  line-height: 1.4;
  min-height: 18px;
}

.sbs-checkout-email-verify-message.is-error {
  color: var(--sbs-primary);
}

.sbs-checkout-email-verify-message.is-success {
  color: #059669;
}

.sbs-checkout-email-verify-message:empty {
  display: none;
}

.sbs-registration-input.is-verified {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.333 8.667 6 11.333l6.667-6.666' stroke='%23059669' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

@media (max-width: 480px) {
  .sbs-checkout-code-digit {
    width: 40px;
    height: 48px;
    font-size: 18px;
  }
}

/* Recipients (step 2 — pickup fieldset) */
.sbs-checkout-recipient-help {
  margin: 0;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sbs-text-secondary);
}

.sbs-checkout-recipients {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sbs-checkout-recipients:empty {
  display: none;
}

.sbs-checkout-recipient-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--sbs-bg-gray);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
}

.sbs-checkout-recipient-card--default .sbs-registration-input[readonly] {
  cursor: not-allowed;
  color: var(--sbs-text-secondary);
  background: var(--sbs-bg-gray);
}

.sbs-checkout-recipient-card[hidden] {
  display: none;
}

.sbs-checkout-recipient-default-badge-row {
  display: flex;
  align-items: center;
}

.sbs-checkout-recipient-default-badge {
  padding: 2px 8px;
  font-family: var(--sbs-font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sbs-text-secondary);
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: 999px;
}

.sbs-checkout-recipient-remove {
  align-self: flex-start;
  padding: 6px 12px;
  font-family: var(--sbs-font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--sbs-text-secondary);
  background: transparent;
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
  cursor: pointer;
}

.sbs-checkout-recipient-warning {
  padding: 12px 16px;
  background: #fff4d6;
  border: 1px solid #f0d27a;
  border-radius: var(--sbs-radius-sm);
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: #604d0a;
}

.sbs-checkout-recipient-warning[hidden] {
  display: none;
}

.js-sbs-add-recipient {
  align-self: flex-start;
}

/* --- Order confirmation (success) page --- */
.sbs-checkout-confirmation {
  display: flex;
  justify-content: center;
}

.sbs-checkout-confirmation-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  padding: 48px 32px;
  text-align: center;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-lg);
}

.sbs-checkout-confirmation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--sbs-white);
  background: #2e7d32;
  border-radius: 999px;
}

.sbs-checkout-confirmation-title {
  margin: 0;
  font-family: var(--sbs-font-ui);
  font-size: 24px;
  font-weight: 600;
  color: var(--sbs-text-dark);
}

.sbs-checkout-confirmation-order {
  margin: 0;
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  color: var(--sbs-text-secondary);
}

.sbs-checkout-confirmation-message {
  margin: 0;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--sbs-text-secondary);
  white-space: pre-line;
}

.sbs-checkout-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .sbs-checkout-confirmation-card {
    padding: 32px 20px;
  }
  .sbs-checkout-confirmation-actions {
    flex-direction: column;
    align-self: stretch;
  }
}

.sbs-checkout-btn[hidden] {
  display: none;
}

.sbs-checkout-link {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  color: var(--sbs-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sbs-checkout-link:disabled {
  color: var(--sbs-text-tertiary);
  cursor: not-allowed;
  text-decoration: none;
}

.sbs-registration-input[readonly] {
  background: var(--sbs-bg-gray);
  cursor: default;
}

.sbs-checkout-radio-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--sbs-white);
  border: 1px solid #eaecf0;
  border-radius: var(--sbs-radius-sm);
  cursor: pointer;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  color: var(--sbs-text-dark);
}

.sbs-checkout-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--sbs-border-medium);
  border-radius: 50%;
  background: var(--sbs-white);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease;
}

.sbs-checkout-radio:checked {
  border-color: var(--sbs-text-dark);
}

.sbs-checkout-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sbs-text-dark);
  transform: translate(-50%, -50%);
}

.sbs-checkout-radio:focus-visible {
  outline: 2px solid var(--sbs-text-dark);
  outline-offset: 2px;
}

/* --- Utility --- */
.mt-2 { margin-top: 8px; }

/* --- Responsive: mobile checkout --- */
@media (max-width: 768px) {
  .sbs-checkout-header-inner {
    padding: 12px 16px;
  }

  .sbs-checkout-header-logo-text {
    font-size: 16px;
  }

  .sbs-checkout-step-title {
    padding: 14px 16px;
    font-size: 15px;
    gap: 10px;
  }

  .sbs-checkout-step-number {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .sbs-checkout-step-done {
    width: 26px;
    height: 26px;
  }

  .sbs-checkout-step-content {
    padding: 16px;
  }

  .sbs-checkout-delivery-label {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .sbs-checkout-delivery-info {
    flex-wrap: wrap;
    gap: 4px;
  }

  .sbs-checkout-carrier-price {
    width: 100%;
    padding-left: 32px;
  }

  .sbs-checkout-payment-label {
    padding: 12px 14px;
  }

  .sbs-checkout-footer-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .sbs-checkout-cart-summary-product-img {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .sbs-checkout {
    padding: 16px 12px;
  }

  .sbs-checkout-address-list {
    grid-template-columns: 1fr;
  }

  .sbs-checkout-btn--place-order {
    height: 48px;
    font-size: 15px;
  }
}

/* ========================================
   Profile mobile page (hub)
   ======================================== */

.sbs-profile-mobile {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Noscript fallback: visible only on desktop when JS is disabled */
.sbs-profile-mobile-noscript {
  display: none;
}

/* Hide "Profile" breadcrumb item on desktop (page only exists on mobile) */
@media (min-width: 1024px) {
  .sbs-settings-breadcrumbs-profile,
  .sbs-settings-breadcrumbs-sep--profile {
    display: none;
  }

  /* Fallback if desktop user lands on /profile and JS redirect is blocked */
  .sbs-profile-mobile {
    display: none;
  }

  .sbs-profile-mobile-noscript {
    display: block;
    padding: 48px 16px;
    text-align: center;
  }

  .sbs-profile-mobile-noscript a {
    color: var(--sbs-primary);
    text-decoration: underline;
  }
}

.sbs-profile-mobile-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
}

.sbs-profile-mobile-breadcrumbs a {
  color: #868686;
  text-decoration: none;
}

.sbs-profile-mobile-breadcrumbs a:hover {
  text-decoration: underline;
}

.sbs-profile-mobile-breadcrumbs-sep {
  color: #868686;
  letter-spacing: 1.05px;
}

.sbs-profile-mobile-breadcrumbs-current {
  color: var(--sbs-text-dark);
}

.sbs-profile-mobile-card {
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-sm);
}

.sbs-profile-mobile-card--user {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.sbs-profile-mobile-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffe9ea;
  color: var(--sbs-text-dark);
  font-family: var(--sbs-font-ui);
  font-size: 24px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -0.48px;
  text-align: center;
}

.sbs-profile-mobile-user-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 17.6px;
  color: #323232;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sbs-profile-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.sbs-profile-mobile-nav--logout {
  padding: 8px;
}

.sbs-profile-mobile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: #323232;
  transition: background-color 0.15s ease;
}

.sbs-profile-mobile-item:hover {
  background: var(--sbs-bg-gray);
  color: #323232;
}

.sbs-profile-mobile-item-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sbs-font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 17.6px;
  color: inherit;
}

.sbs-profile-mobile-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: currentColor;
}

.sbs-profile-mobile-item-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.sbs-profile-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: #fff7e6;
  color: #7a4a00;
  border-bottom: 1px solid #f4d58b;
  font-size: 14px;
  line-height: 1.4;
}
.sbs-profile-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #b5770d;
}
.sbs-profile-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.sbs-profile-banner-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #b5770d;
  color: var(--sbs-white);
  border-radius: var(--sbs-radius-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.sbs-profile-banner-cta:hover {
  background: #925f0a;
  color: var(--sbs-white);
}
@media (max-width: 768px) {
  .sbs-profile-banner {
    flex-wrap: wrap;
    padding: 12px 16px;
  }
  .sbs-profile-banner-cta {
    margin-left: auto;
  }
}

/* ================================================================
   SBSIL-99 — Warehouse selector + In WH column on listing pages
   ================================================================ */

/* List-view column "In WH" — subtle highlight so it stands out from the
   neighbouring Stock / Price columns. Width matches Stock (40px) — qty digits. */
.product-list-header .product-list-col-wh,
.product-list-row .product-list-col-wh {
  width: 40px;
  flex-shrink: 0;
  font-family: var(--sbs-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--sbs-text-dark);
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  background: var(--sbs-bg-gray);
  padding: 0 8px;
  border-radius: 4px;
}
.product-list-header .product-list-col-wh {
  color: #323232;
  font-weight: 500;
}

/* Grid-view: row-style detail block like product-grid-code/-artnumber. */
.product-grid-wh {
  display: flex;
  gap: 6px;
  font-family: var(--sbs-font-ui);
  font-size: 14px;
  line-height: 20px;
}

/* Mobile grid: compact text indicator under Available / Call us. */
.product-grid-mobile-wh {
  font-size: 12px;
  line-height: 1.3;
  color: var(--sbs-text-secondary);
  margin-top: 2px;
}
.product-grid-mobile-wh strong {
  color: var(--sbs-text-dark);
  font-weight: 500;
}

/* Toolbar dropdown — long warehouse names truncate gracefully. */
.sbs-catalog-dropdown--wh .sbs-catalog-dropdown-text {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SBSIL-106: warehouse switch locked while cart is non-empty. */
.sbs-catalog-dropdown--wh.is-locked .sbs-catalog-dropdown-trigger,
.sbs-catalog-dropdown-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sbs-cart-warehouse-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sbs-catalog-warehouse-lock {
  margin: 0 0 24px;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  line-height: 18px;
  color: var(--sbs-text-secondary);
}
.sbs-cart-warehouse-lock {
  margin: 8px 0 0;
  font-family: var(--sbs-font-ui);
  font-size: 13px;
  line-height: 18px;
  color: var(--sbs-text-secondary);
}

/* Mobile (≤1024px): hide list-view WH column to match how Stock /
   Discount are hidden (existing pattern lines 7916-7919 / 7958-7962).
   Mobile users get the WH info via grid-view's compact mobile indicator. */
@media (max-width: 1024px) {
  .product-list-header .product-list-col-wh,
  .product-list-col-wh {
    display: none;
  }
}

/* ───────────────────────── Cookie consent (SBSIL-111) ───────────────────────── */
.sbs-cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1500;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--sbs-white);
  border: 1px solid var(--sbs-border-light);
  border-radius: var(--sbs-radius-xl);
  box-shadow: 0 8px 32px rgba(16, 24, 40, 0.16);
  padding: 20px 24px;
}

/* [hidden] must beat the flex display rules below (theme CSS convention). */
.sbs-cookie-consent[hidden],
.sbs-cookie-consent-panel[hidden] {
  display: none;
}

.sbs-cookie-consent-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sbs-cookie-consent-text {
  flex: 1 1 0;
  min-width: 0;
}

.sbs-cookie-consent-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--sbs-text-dark);
}

.sbs-cookie-consent-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sbs-text-secondary);
}

.sbs-cookie-consent-policy-link {
  color: var(--sbs-primary);
  text-decoration: underline;
}

.sbs-cookie-consent-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sbs-cookie-consent-btn {
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.sbs-cookie-consent-btn--primary {
  background: var(--sbs-primary);
  border-color: var(--sbs-primary);
  color: var(--sbs-white);
}

.sbs-cookie-consent-panel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--sbs-border-light);
}

.sbs-cookie-consent-category {
  padding: 12px 0;
  border-bottom: 1px solid var(--sbs-border-soft);
}

.sbs-cookie-consent-category:last-of-type {
  border-bottom: none;
}

.sbs-cookie-consent-category-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sbs-text-dark);
  cursor: pointer;
}

.sbs-cookie-consent-category-head input[disabled] {
  cursor: default;
}

.sbs-cookie-consent-category-desc {
  margin: 0;
  padding-left: 26px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sbs-text-secondary);
}

.sbs-cookie-consent-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* Footer "Cookie settings" re-open control — render a <button> as a footer link. */
.sbs-cookie-settings-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .sbs-cookie-consent-btn--primary:hover {
    background: var(--sbs-primary-dark);
    border-color: var(--sbs-primary-dark);
  }
}

@media (max-width: 768px) {
  .sbs-cookie-consent {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 16px;
  }

  .sbs-cookie-consent-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .sbs-cookie-consent-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sbs-cookie-consent-panel-actions {
    flex-direction: column;
  }
}

/* ============================================================
   SBSIL-120 — WCAG 2.5.5/2.5.8 mobile touch targets.
   Target 44x44px; 24px minimum on the most compact clusters.
   Mobile-scoped only — desktop (>1024px) is left unchanged.
   ============================================================ */

/* --- Mobile drawer = primary navigation on mobile (rendered <=1024px) --- */
@media (max-width: 1024px) {
  /* Square icon button */
  .sbs-mobile-drawer-close { width: 44px; height: 44px; }

  /* Cart button carries an inline icon + count badge, so it is already wider
     than 44px — only the height needs raising (a fixed width:44px would
     squeeze the badge). */
  .sbs-cart-btn--drawer { height: 44px; }

  /* Text rows — each is already display:flex + align-items:center, so
     min-height alone centres their content into a >=44px tap target. */
  .sbs-drawer-back,
  .sbs-mobile-drawer-menu-item,
  .sbs-drawer-cat-link,
  .sbs-drawer-cat-link--leaf,
  .sbs-drawer-cat-link--label,
  .sbs-drawer-brand-link,
  .sbs-lang-dropdown-item,
  .sbs-btn-lang { min-height: 44px; }

  /* Business/Consumer segmented toggle: grow the track, its sliding
     indicator and both tabs together so the 44px tap height stays in sync
     with the indicator (drawer variant only — desktop switch untouched). */
  .sbs-portal-switch--drawer { height: 52px; }
  .sbs-portal-switch--drawer .sbs-portal-switch-indicator { height: 44px; }
  .sbs-portal-switch--drawer .sbs-portal-tab { height: 44px; }
}

/* --- Catalog listing controls (mobile catalog layout <=768px) --- */
@media (max-width: 768px) {
  .sbs-catalog-view-btn { width: 44px; height: 44px; }

  .sbs-pagination-page  { width: 44px; height: 44px; }
  .sbs-pagination-pages { flex-wrap: wrap; }

  .sbs-sort-sheet-option { min-height: 44px; height: auto; }

  .sbs-catalog-dropdown-menu li button { padding: 11px 16px; }

  /* Grid-view quantity stepper (container is 48px tall, flex:1 wide). */
  .product-grid-counter .product-list-counter-btn { width: 44px; }

  /* List-view add-to-cart (icon-only square); widen its column to match. */
  .product-list-col-quantity { width: 44px; }
  .product-list-cart-btn     { width: 44px; height: 44px; }
}

/* --- Phone header controls (<=480px, where they shrink to 40px) --- */
@media (max-width: 480px) {
  .sbs-hamburger-btn    { width: 44px; height: 44px; }
  /* Header cart button is icon + badge → height only (see drawer note). */
  .sbs-cart-btn--header { height: 44px; }
}