/* ── BelChip Design System — Black & Lime ──────────────────────── */
/* Corporate palette: #0f0f0f (black) + #a8e63d (lime/chartreuse)   */
/* Fonts: General Sans (headings) + Inter (body)                    */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  /* ── Brand palette ───────────────────────────────────────────── */
  --lime:           #a8e63d;
  --lime-hover:     #91cc2a;
  --lime-light:     #e8f7c8;
  --lime-mid:       #c8ef7a;
  --lime-dark:      #6aaa0a;

  --black:          #252729;  /* тёмный графит */
  --black-2:        #2f3133;
  --black-3:        #393c3e;
  --black-4:        #454849;

  /* ── Surfaces (light mode body, dark header) ─────────────────── */
  --color-bg:            #f4f5f4;
  --color-surface:       #ffffff;
  --color-surface-2:     #f0f1f0;
  --color-border:        #e2e4e0;
  --color-divider:       #eceeed;

  --color-text:          #111310;
  --color-text-muted:    #5a5f56;
  --color-text-faint:    #a0a89a;
  --color-text-inverse:  #ffffff;

  /* ── Accent = lime ───────────────────────────────────────────── */
  --color-primary:       var(--lime);
  --color-primary-hover: var(--lime-hover);
  --color-primary-light: var(--lime-light);
  --color-primary-mid:   var(--lime-mid);
  --color-primary-text:  var(--black);   /* text ON lime button */

  /* ── Semantic ────────────────────────────────────────────────── */
  --color-success:       #2e7d32;
  --color-success-light: #e8f5e9;
  --color-error:         #c62828;
  --color-error-light:   #ffebee;
  --color-warning:       #e65100;
  --color-warning-light: #fff3e0;

  /* ── Header (dark) ───────────────────────────────────────────── */
  --header-bg:      var(--black);
  --header-text:    #eeeeee;
  --header-muted:   #9a9ea0;
  --header-border:  #3a3d40;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-display: 'General Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem,0.75rem + 0.30vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-lg:   clamp(1rem,     0.9rem  + 0.50vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  1rem    + 0.75vw, 1.75rem);
  --text-2xl:  clamp(1.75rem,  1.2rem  + 1.50vw, 2.5rem);

  /* ── Spacing ─────────────────────────────────────────────────── */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.07);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,.11), 0 1px 3px rgba(0,0,0,.07);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.14);
  --shadow-lime: 0 0 0 3px rgba(168,230,61,.35);

  /* ── Radius ──────────────────────────────────────────────────── */
  --radius-sm: .375rem; --radius-md: .5rem;
  --radius-lg: .75rem;  --radius-xl: 1rem;

  /* ── Layout ──────────────────────────────────────────────────── */
  --sidebar-w:   260px;
  --header-h:    60px;
  --topbar-h:    36px;
  --content-max: 1280px;
  --transition:  150ms ease;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:var(--black);text-decoration:none}
a:hover{color:var(--lime-dark);text-decoration:underline}
img{max-width:100%;height:auto}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,select,textarea{font-family:inherit}

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar{
  height:var(--topbar-h);
  background:var(--black-2);
  color:var(--header-muted);
  font-size:var(--text-xs);
  display:flex;
  align-items:center;
  padding:0 var(--space-6);
  border-bottom:1px solid var(--black-4);
}
.topbar__inner{
  max-width:var(--content-max);
  width:100%;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.topbar a{color:var(--header-muted);transition:color var(--transition)}
.topbar a:hover{color:var(--lime);text-decoration:none}
.topbar__contacts{display:flex;gap:var(--space-5);align-items:center}
.topbar__right{display:flex;gap:var(--space-4);align-items:center}

/* ── Header ──────────────────────────────────────────────────────── */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--black);
  border-bottom:1px solid var(--black-4);
  height:var(--header-h);
  display:flex;
  align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
.header__inner{
  max-width:var(--content-max);
  width:100%;
  margin:auto;
  padding:0 var(--space-6);
  display:flex;
  align-items:center;
  gap:var(--space-6);
}

/* ── Logo ────────────────────────────────────────────────────────── */
.logo{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-shrink:0;
  text-decoration:none!important;
}
.logo__svg{width:34px;height:34px}
.logo__text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color:#fff;
  letter-spacing:-.02em;
  line-height:1;
}
.logo__text span{color:var(--lime)}

/* ── Search bar ──────────────────────────────────────────────────── */
.search-bar{
  flex:1;
  max-width:600px;
  position:relative;
}
.search-bar__form{
  display:flex;
  border:1.5px solid var(--black-4);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--black-3);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.search-bar__form:focus-within{
  border-color:var(--lime);
  box-shadow:var(--shadow-lime);
}
.search-bar__input{
  flex:1;
  border:none;
  outline:none;
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-sm);
  background:transparent;
  color:#e8e8e8;
}
.search-bar__input::placeholder{color:var(--header-muted)}
.search-bar__btn{
  padding:var(--space-2) var(--space-5);
  background:var(--lime);
  color:var(--black);
  font-size:var(--text-sm);
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:background var(--transition);
  white-space:nowrap;
  font-family:var(--font-display);
}
.search-bar__btn:hover{background:var(--lime-hover)}

/* Search suggestions */
.search-suggestions{
  position:absolute;
  top:calc(100% + 4px);
  left:0;right:0;
  background:var(--black-2);
  border:1px solid var(--black-4);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  z-index:200;
  display:none;
}
.search-suggestions.active{display:block}
.search-suggestions__item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--space-2) var(--space-4);
  cursor:pointer;
  font-size:var(--text-sm);
  color:#d0d0d0;
  transition:background var(--transition);
}
.search-suggestions__item:hover{background:var(--black-3)}
.search-suggestions__item .price{color:var(--lime);font-weight:700}

/* ── Header actions ──────────────────────────────────────────────── */
.header__actions{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  flex-shrink:0;
}
.header-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-sm);
  color:var(--header-muted);
  font-size:var(--text-xs);
  font-weight:500;
  transition:background var(--transition),color var(--transition);
  cursor:pointer;
  text-decoration:none;
  position:relative;
}
.header-btn:hover{background:var(--black-3);color:#fff;text-decoration:none}
.header-btn svg{width:20px;height:20px}
.header-btn__badge{
  position:absolute;
  top:2px;right:4px;
  background:var(--lime);
  color:var(--black);
  font-size:10px;
  font-weight:800;
  border-radius:999px;
  min-width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 3px;
}

/* ── Category nav ────────────────────────────────────────────────── */
.catnav{
  background:var(--black-2);
  border-bottom:1px solid var(--black-4);
  position:sticky;
  top:var(--header-h);
  z-index:90;
}
.catnav__inner{
  max-width:var(--content-max);
  margin:auto;
  padding:0 var(--space-6);
  display:flex;
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
}
.catnav__inner::-webkit-scrollbar{display:none}
.catnav__item{
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--header-muted);
  white-space:nowrap;
  cursor:pointer;
  transition:color var(--transition);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.catnav__item:hover{color:#d8d8d8}
.catnav__item.active{color:var(--lime);border-bottom-color:var(--lime)}

/* ── Layout ──────────────────────────────────────────────────────── */
.page-wrapper{
  max-width:var(--content-max);
  margin:0 auto;
  padding:var(--space-6);
  flex:1;
}
.catalog-layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  gap:var(--space-6);
  align-items:start;
}
@media(max-width:768px){
  .catalog-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .sidebar.open{display:block}
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:sticky;
  top:calc(var(--header-h) + 48px + var(--space-6));
}
.sidebar__section{
  border-bottom:1px solid var(--color-divider);
  padding:var(--space-4);
}
.sidebar__section:last-child{border-bottom:none}
.sidebar__title{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:700;
  color:var(--color-text);
  margin-bottom:var(--space-3);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.sidebar__item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  transition:background var(--transition),color var(--transition);
}
.sidebar__item:hover{background:var(--color-surface-2);color:var(--color-text)}
.sidebar__item.active{
  background:var(--lime-light);
  color:var(--lime-dark);
  font-weight:600;
}
.sidebar__item .count{
  font-size:var(--text-xs);
  background:var(--color-surface-2);
  padding:1px 6px;
  border-radius:999px;
  color:var(--color-text-faint);
}
.sidebar__item.active .count{background:var(--lime-mid);color:var(--lime-dark)}

/* Price range */
.price-range{display:flex;gap:var(--space-2);align-items:center}
.price-range input{
  flex:1;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-2);
  font-size:var(--text-sm);
  outline:none;
  transition:border-color var(--transition);
  width:0;
}
.price-range input:focus{border-color:var(--lime);box-shadow:0 0 0 2px rgba(168,230,61,.2)}
.price-range span{color:var(--color-text-faint);font-size:var(--text-sm)}

/* Checkbox filter */
.filter-check{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  cursor:pointer;
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  padding:var(--space-1) 0;
}
.filter-check input[type=checkbox]{accent-color:var(--lime-dark);width:14px;height:14px}
.filter-check:hover{color:var(--color-text)}

/* ── Product grid ────────────────────────────────────────────────── */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-4);
}
.product-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);
  cursor:pointer;
}
.product-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
  border-color:var(--lime-mid);
}
.product-card__img{
  aspect-ratio:1;
  background:var(--color-bg);
  background-image:radial-gradient(circle,rgba(168,230,61,.04) 1px,transparent 1px);
  background-size:16px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  position:relative;
  overflow:hidden;
}
.product-card__img img{
  max-width:100%;
  max-height:120px;
  object-fit:contain;
}
.product-card__img .no-img{
  width:52px;height:52px;
  color:var(--lime);
  stroke:var(--lime) !important;
  opacity:.65;
  background:var(--black);
  border-radius:var(--radius-md);
  padding:10px;
  box-sizing:border-box;
}
.product-card__stock-badge{
  position:absolute;
  top:var(--space-2);
  right:var(--space-2);
  font-size:10px;
  font-weight:700;
  padding:2px 7px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.badge-instock{background:#d4efb8;color:#2a6600}
.badge-onorder{background:var(--color-warning-light);color:var(--color-warning)}
.badge-unavail{background:var(--color-surface-2);color:var(--color-text-faint)}

.product-card__body{
  padding:var(--space-3) var(--space-4);
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.product-card__code{font-size:var(--text-xs);color:var(--color-text-faint);font-family:monospace}
.product-card__name{
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-text);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
.product-card__producer{font-size:var(--text-xs);color:var(--color-text-muted)}
.product-card__footer{
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--color-divider);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}
.product-card__price{
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-weight:700;
  color:var(--color-text);
}
.product-card__price.special{color:var(--color-error)}
.product-card__price.no-price{color:var(--color-text-faint);font-weight:400;font-size:var(--text-sm)}
.product-card__qty{font-size:var(--text-xs);color:var(--color-text-faint)}

/* Add button — lime on dark */
.btn-add{
  padding:var(--space-1) var(--space-3);
  background:var(--black);
  color:#fff;
  border-radius:var(--radius-sm);
  font-size:var(--text-xs);
  font-weight:600;
  transition:background var(--transition),transform var(--transition);
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:4px;
}
.btn-add:hover{background:var(--black-3);border:1px solid var(--lime);color:var(--lime)}
.btn-add:active{transform:scale(.96)}
.btn-add.added{background:var(--color-success);color:#fff}

/* ── Sidebar new elements ──────────────────────────────────────────────── */
/* Filter chips strip in sidebar */
.sidebar__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-divider);
  background:var(--lime-light);
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:#fff;
  border:1px solid var(--lime);
  color:var(--lime-dark);
  font-size:11px;
  font-weight:600;
  padding:3px 8px;
  border-radius:999px;
  cursor:pointer;
  transition:background var(--transition);
  white-space:nowrap;
}
.filter-chip:hover{background:var(--lime-light)}
.filter-chip.chip-clear{
  background:var(--black);
  border-color:var(--black);
  color:var(--lime);
}
.filter-chip.chip-clear:hover{background:var(--black-3)}

/* Toggle (inStock) */
.filter-toggle{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  cursor:pointer;
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  padding:var(--space-1) 0;
  user-select:none;
}
.filter-toggle:hover{color:var(--color-text)}
.toggle-track{
  position:relative;
  width:36px;
  height:20px;
  background:var(--color-border);
  border-radius:999px;
  transition:background var(--transition);
  flex-shrink:0;
}
.filter-toggle.active .toggle-track{background:var(--lime-dark)}
.toggle-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  background:#fff;
  border-radius:50%;
  transition:transform var(--transition);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.filter-toggle.active .toggle-thumb{transform:translateX(16px)}

/* Price inputs */
.price-inputs{display:flex;gap:var(--space-2);margin-bottom:var(--space-2)}
.price-input-wrap{
  flex:1;
  display:flex;
  align-items:center;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--color-bg);
  transition:border-color var(--transition);
}
.price-input-wrap:focus-within{border-color:var(--lime);box-shadow:0 0 0 2px rgba(168,230,61,.15)}
.price-label{
  padding:0 var(--space-2);
  font-size:var(--text-xs);
  color:var(--color-text-faint);
  background:var(--color-surface-2);
  height:100%;
  display:flex;
  align-items:center;
  border-right:1px solid var(--color-border);
}
.price-input-wrap input{
  flex:1;
  border:none;
  outline:none;
  padding:var(--space-1) var(--space-2);
  font-size:var(--text-sm);
  width:0;
  background:transparent;
}
.btn-price-apply{
  width:100%;
  padding:var(--space-2);
  background:var(--black);
  color:var(--lime);
  border-radius:var(--radius-sm);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:background var(--transition);
  margin-top:var(--space-1);
}
.btn-price-apply:hover{background:var(--black-3)}

/* Producer list */
.producer-search-wrap{margin-bottom:var(--space-2)}
.producer-search{
  width:100%;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-3);
  font-size:var(--text-sm);
  outline:none;
  background:var(--color-bg);
  box-sizing:border-box;
}
.producer-search:focus{border-color:var(--lime);box-shadow:0 0 0 2px rgba(168,230,61,.15)}
.producer-list{max-height:220px;overflow-y:auto}
.producer-list::-webkit-scrollbar{width:3px}
.producer-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:999px}
.producer-item{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-1);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  transition:background var(--transition),color var(--transition);
}
.producer-item:hover{background:var(--color-surface-2);color:var(--color-text)}
.producer-item.active{
  background:var(--lime-light);
  color:var(--lime-dark);
  font-weight:600;
}
.producer-item input[type=checkbox]{
  accent-color:var(--lime-dark);
  width:14px;height:14px;
  flex-shrink:0;
}
.producer-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--lime);
  color:var(--black);
  font-size:10px;
  font-weight:700;
  width:18px;height:18px;
  border-radius:50%;
  margin-left:6px;
}
.btn-show-more{
  margin-top:var(--space-2);
  font-size:var(--text-xs);
  color:var(--lime-dark);
  font-weight:600;
  padding:var(--space-1) 0;
  width:100%;
  text-align:center;
  background:none;
  cursor:pointer;
}
.btn-show-more:hover{text-decoration:underline}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.toolbar{
  margin-bottom:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.toolbar__row1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.toolbar__info{font-size:var(--text-sm);color:var(--color-text-muted)}
.toolbar__info strong{color:var(--color-text);font-size:var(--text-base)}
.toolbar__note{color:var(--color-text-faint);font-size:var(--text-xs);margin-left:4px}
.toolbar__right{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
/* Toolbar active chips row */
.toolbar__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:var(--space-2) 0 0;
}
.toolbar-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--lime-light);
  border:1px solid var(--lime);
  color:var(--lime-dark);
  font-size:11px;
  font-weight:600;
  padding:3px 10px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--transition);
}
.toolbar-chip:hover{background:var(--lime-mid);color:var(--black)}
/* Sort pills */
.sort-pills{display:flex;gap:4px}
.sort-pill{
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:4px 10px;
  font-size:var(--text-xs);
  font-weight:500;
  color:var(--color-text-muted);
  background:var(--color-surface);
  cursor:pointer;
  transition:all var(--transition);
  white-space:nowrap;
}
.sort-pill:hover{border-color:var(--lime);color:var(--color-text)}
.sort-pill.active{
  background:var(--black);
  border-color:var(--black);
  color:var(--lime);
  font-weight:700;
}
/* View toggle */
.view-toggle{
  display:flex;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.view-btn{
  padding:5px 8px;
  background:var(--color-surface);
  color:var(--color-text-faint);
  transition:all var(--transition);
  cursor:pointer;
  border-right:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:center;
}
.view-btn:last-child{border-right:none}
.view-btn:hover{background:var(--color-surface-2);color:var(--color-text)}
.view-btn.active{background:var(--black);color:var(--lime)}
/* Legacy sort-select (keep for search page) */
.sort-select{
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-3);
  font-size:var(--text-sm);
  color:var(--color-text);
  background:var(--color-surface);
  outline:none;
  cursor:pointer;
}
.sort-select:focus{border-color:var(--lime-dark)}

/* ── Product list (list view) ─────────────────────────────────────────────── */
.product-list{display:flex;flex-direction:column;gap:var(--space-2)}
.product-row{
  display:grid;
  grid-template-columns:56px 1fr 110px 120px auto;
  align-items:center;
  gap:var(--space-3);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
  cursor:pointer;
  transition:box-shadow var(--transition),border-color var(--transition);
}
.product-row:hover{box-shadow:var(--shadow-sm);border-color:var(--lime-mid)}
.product-row__img{
  width:48px;height:48px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-bg);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.product-row__img img{max-width:100%;max-height:48px;object-fit:contain}
.no-img-sm{width:28px;height:28px;color:var(--lime);opacity:.6;stroke:var(--lime)!important}
.product-row__info{min-width:0}
.product-row__code{font-size:var(--text-xs);color:var(--color-text-faint);font-family:monospace;margin-bottom:2px}
.product-row__name{
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.product-row__producer{font-size:var(--text-xs);color:var(--color-text-muted)}
.row-country{color:var(--color-text-faint)}
.product-row__stock{text-align:center}
.row-qty{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:3px;text-align:center}
.product-row__price{text-align:right}
.row-moq{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:2px;text-align:right}
.product-row__action{display:flex;justify-content:flex-end}
@media(max-width:768px){
  .product-row{grid-template-columns:48px 1fr auto}
  .product-row__stock,.product-row__price{display:none}
}

/* Empty state */
.empty-state{
  grid-column:1/-1;
  text-align:center;
  padding:3rem 2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-3);
  color:var(--color-text-muted);
}
.empty-state p{font-size:var(--text-base);font-weight:600;margin:0}
.empty-state span{font-size:var(--text-sm)}

/* ── Pagination ──────────────────────────────────────────────────── */
.pagination{
  display:flex;
  justify-content:center;
  gap:var(--space-1);
  margin-top:var(--space-8);
  flex-wrap:wrap;
}
.pagination__btn{
  min-width:36px;
  height:36px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:var(--color-surface);
  color:var(--color-text-muted);
  transition:all var(--transition);
  padding:0 var(--space-2);
}
.pagination__btn:hover{background:var(--color-surface-2);color:var(--color-text);border-color:var(--lime-mid)}
.pagination__btn.active{background:var(--black);color:var(--lime);border-color:var(--black);font-weight:700}
.pagination__btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Product page ────────────────────────────────────────────────── */
/* ── Product page layout ────────────────────────────────────── */
.product-page{
  display:grid;
  grid-template-columns:400px 1fr;
  gap:var(--space-8);
  align-items:start;
}
@media(max-width:960px){.product-page{grid-template-columns:1fr}}

/* Gallery */
.product-gallery{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  position:sticky;
  top:calc(var(--header-h) + 48px + var(--space-4));
}
.product-gallery__main{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-8);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.product-gallery__main img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transition:transform .3s ease;
}
.product-gallery__main:hover img{transform:scale(1.04)}

/* Gallery badges */
.gallery__badge{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  padding:4px var(--space-3);
  border-radius:var(--radius-sm);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.04em;
}
.gallery__badge--out{background:var(--color-surface-2);color:var(--color-text-muted)}
.gallery__badge--sale{background:var(--lime);color:var(--black)}

/* Meta chips below image */
.product-meta-chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:4px var(--space-3);
  font-size:var(--text-xs);
  color:var(--color-text-muted);
}
.meta-chip--link{
  color:var(--lime-dark);
  border-color:var(--lime-mid);
  background:var(--lime-light);
  cursor:pointer;
  transition:background var(--transition);
}
.meta-chip--link:hover{background:var(--lime-mid)}

/* Product info column */
.product-info{display:flex;flex-direction:column;gap:var(--space-5)}

/* Header: article + title */
.product-info__header{display:flex;flex-direction:column;gap:var(--space-2)}
.product-info__code{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-xs);
  color:var(--color-text-faint);
  font-family:monospace;
  letter-spacing:.03em;
}
.copy-btn{
  background:none;
  border:none;
  cursor:pointer;
  color:var(--color-text-faint);
  padding:3px;
  border-radius:4px;
  display:inline-flex;
  transition:color var(--transition),background var(--transition);
}
.copy-btn:hover{color:var(--lime-dark);background:var(--lime-light)}
.copy-btn.copied{color:var(--color-success)}
.product-info__name{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:700;
  color:var(--color-text);
  line-height:1.35;
}

/* Buy box */
.product-buy-box{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}

/* Price row */
.pbb-price-row{
  display:flex;
  align-items:baseline;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.pbb-price{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--color-text);
}
.pbb-price__val{font-size:2rem;line-height:1}
.pbb-price__cur{font-size:var(--text-lg);color:var(--color-text-muted)}
.pbb-price--special .pbb-price__val{color:var(--color-error)}
.pbb-price--req{font-size:var(--text-lg);color:var(--color-text-muted);font-weight:500}
.pbb-per{font-size:var(--text-sm);color:var(--color-text-muted);align-self:center}
.pbb-sale-tag{
  background:var(--color-error-light);
  color:var(--color-error);
  font-size:var(--text-xs);
  font-weight:700;
  padding:3px var(--space-2);
  border-radius:var(--radius-sm);
  letter-spacing:.06em;
  align-self:center;
}

/* Stock badges */
.pbb-stock{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.pstock-item{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  font-size:var(--text-xs);
}
.pstock-item--ok{
  background:#e8f5e9;
  color:#2e7d32;
}
.pstock-item--no{
  background:var(--color-surface-2);
  color:var(--color-text-faint);
}
.pstock-item strong{font-weight:700}

/* Order meta */
.pbb-order-meta{
  display:flex;
  gap:var(--space-5);
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  padding-top:var(--space-1);
}

/* Actions: qty + button */
.pbb-actions{
  display:flex;
  gap:var(--space-3);
  align-items:stretch;
}
.pbb-cart-btn{
  flex:1;
  padding:var(--space-3) var(--space-4);
}

/* Ask manager link */
.pbb-ask{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  justify-content:center;
  padding-top:var(--space-1);
  transition:color var(--transition);
}
.pbb-ask:hover{color:var(--lime-dark)}

/* Tabs section */
.product-tabs-section{margin-top:var(--space-2)}
.tab-badge{
  display:inline-block;
  background:var(--lime-light);
  color:var(--lime-dark);
  font-size:10px;
  font-weight:700;
  padding:1px 6px;
  border-radius:20px;
  vertical-align:middle;
}

/* Description */
.product-description{
  font-size:var(--text-sm);
  line-height:1.75;
  color:var(--color-text);
  padding:var(--space-4) 0;
}
.product-description--empty{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  padding:var(--space-4) 0;
  font-style:italic;
}
.product-video{
  margin-top:var(--space-4);
}
.video-link{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  color:var(--lime-dark);
  font-size:var(--text-sm);
  font-weight:500;
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--lime-mid);
  border-radius:var(--radius-sm);
  background:var(--lime-light);
  transition:background var(--transition);
}
.video-link:hover{background:var(--lime-mid)}

/* Params table */
.params-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.params-table__name{
  width:45%;
  padding:var(--space-2) var(--space-4) var(--space-2) 0;
  color:var(--color-text-muted);
  font-weight:500;
  border-bottom:1px solid var(--color-divider);
  vertical-align:top;
}
.params-table__val{
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--color-divider);
  vertical-align:top;
  color:var(--color-text);
}
.params-table tr.even .params-table__name,
.params-table tr.even .params-table__val{
  background:var(--color-bg);
}

/* Analogues */
.analog-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding:var(--space-4) 0;
}
.analog-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-2) var(--space-3);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  font-family:monospace;
  color:var(--color-text);
  transition:border-color var(--transition),background var(--transition);
}
.analog-chip:hover{border-color:var(--lime-mid);background:var(--lime-light);color:var(--lime-dark)}

/* Similar section */
.similar-section{margin-top:var(--space-10)}

/* Skeleton */
.skeleton-box{
  background:linear-gradient(90deg,var(--color-surface-2) 25%,var(--color-border) 50%,var(--color-surface-2) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Old qty-row kept for compat */
.qty-row{display:flex;align-items:center;gap:var(--space-3)}
.qty-control{
  display:flex;
  align-items:center;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.qty-control button{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-lg);
  color:var(--color-text-muted);
  background:var(--color-surface-2);
  transition:background var(--transition);
}
.qty-control button:hover{background:var(--lime-light);color:var(--lime-dark)}
.qty-control input{
  width:56px;
  text-align:center;
  border:none;
  border-left:1px solid var(--color-border);
  border-right:1px solid var(--color-border);
  padding:var(--space-2);
  font-size:var(--text-sm);
  font-weight:600;
  outline:none;
}

/* Primary button — lime */
.btn-primary{
  width:100%;
  padding:var(--space-3) var(--space-6);
  background:var(--lime);
  color:var(--black);
  border-radius:var(--radius-md);
  font-size:var(--text-base);
  font-weight:700;
  font-family:var(--font-display);
  transition:background var(--transition),box-shadow var(--transition),transform var(--transition);
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:none;
}
.btn-primary:hover{background:var(--lime-hover);box-shadow:0 4px 16px rgba(168,230,61,.35)}
.btn-primary:active{transform:scale(.98)}

/* Secondary button */
.btn-secondary{
  width:100%;
  padding:var(--space-3) var(--space-6);
  background:var(--color-surface-2);
  color:var(--color-text);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  font-size:var(--text-base);
  font-weight:500;
  font-family:var(--font-display);
  transition:background var(--transition);
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
}
.btn-secondary:hover{background:var(--color-border)}

/* Tabs */
.tabs{border-bottom:1px solid var(--color-border);display:flex;gap:0}
.tab-btn{
  padding:var(--space-3) var(--space-5);
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-text-muted);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  cursor:pointer;
  transition:color var(--transition),border-color var(--transition);
}
.tab-btn:hover{color:var(--color-text)}
.tab-btn.active{color:var(--lime-dark);border-bottom-color:var(--lime)}
.tab-panel{display:none;padding:var(--space-5) 0}
.tab-panel.active{display:block}

.params-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.params-table tr:nth-child(even) td{background:var(--color-bg)}
.params-table td{padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-divider);vertical-align:top}
.params-table td:first-child{width:40%;color:var(--color-text-muted);font-weight:500}

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
}
.breadcrumb a{color:var(--color-text-muted);transition:color var(--transition)}
.breadcrumb a:hover{color:var(--lime-dark);text-decoration:none}
.breadcrumb__sep{color:var(--color-text-faint)}
.breadcrumb__current{color:var(--color-text)}

/* ── Category cards ──────────────────────────────────────────────── */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--space-4);
}
.cat-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-4);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-3);
  cursor:pointer;
  text-align:center;
  transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition);
}
.cat-card:hover{
  box-shadow:var(--shadow-md);
  border-color:var(--lime-mid);
  transform:translateY(-2px);
}
.cat-card__icon{
  width:48px;height:48px;
  background:var(--black);
  border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;
}
.cat-card__icon svg{width:24px;height:24px;color:var(--lime)}
.cat-card__name{font-size:var(--text-sm);font-weight:500;color:var(--color-text);line-height:1.3}
.cat-card__count{font-size:var(--text-xs);color:var(--color-text-faint)}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{
  background:var(--black);
  border-radius:var(--radius-xl);
  padding:var(--space-10) var(--space-12);
  margin-bottom:var(--space-8);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-8);
  overflow:hidden;
  position:relative;
}
/* subtle grid pattern */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(168,230,61,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,230,61,.05) 1px,transparent 1px);
  background-size:40px 40px;
}
/* lime glow bottom-right */
.hero::after{
  content:'';
  position:absolute;
  bottom:-60px;right:-60px;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(168,230,61,.18) 0%,transparent 70%);
  pointer-events:none;
}
.hero__content{position:relative;z-index:1}
.hero__tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(168,230,61,.15);
  border:1px solid rgba(168,230,61,.3);
  padding:var(--space-1) var(--space-3);
  border-radius:999px;
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:var(--space-3);
  color:var(--lime);
}
.hero__tag::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:var(--lime);
  animation:pulse 2s ease infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.4)}
}
.hero__title{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:700;
  margin-bottom:var(--space-3);
  line-height:1.15;
  letter-spacing:-.02em;
}
.hero__title em{
  color:var(--lime);
  font-style:normal;
}
.hero__sub{
  font-size:var(--text-base);
  opacity:.7;
  margin-bottom:var(--space-6);
  max-width:440px;
}
.hero__cta{
  padding:var(--space-3) var(--space-8);
  background:var(--lime);
  color:var(--black);
  border-radius:var(--radius-md);
  font-weight:800;
  font-family:var(--font-display);
  font-size:var(--text-base);
  cursor:pointer;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
  display:inline-block;
  border:none;
  letter-spacing:-.01em;
}
.hero__cta:hover{background:var(--lime-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(168,230,61,.4)}

/* Hero circuit SVG */
.hero__graphic{
  position:relative;
  z-index:1;
  flex-shrink:0;
  opacity:.55;
}

/* ── Section heading ─────────────────────────────────────────────── */
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-5);
}
.section-heading h2{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:700;
  color:var(--color-text);
}
.section-heading__link{font-size:var(--text-sm);color:var(--lime-dark);font-weight:500}
.section-heading__link:hover{text-decoration:none;color:var(--lime-hover)}

/* ── Stats bar ───────────────────────────────────────────────────── */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-4);
  margin-top:var(--space-8);
}
.stat-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-4);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.stat-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--lime),var(--lime-hover));
}
.stat-card__num{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:800;
  color:var(--black);
}
.stat-card__label{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
@media(max-width:640px){.stats-bar{grid-template-columns:repeat(2,1fr)}}

/* ── Cart drawer ─────────────────────────────────────────────────── */
.drawer-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:300;
  display:none;opacity:0;
  transition:opacity 200ms ease;
}
.drawer-overlay.open{display:block;opacity:1}
.drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px,100vw);
  background:var(--color-surface);
  z-index:301;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform 250ms ease;
  box-shadow:var(--shadow-lg);
}
.drawer.open{transform:translateX(0)}
.drawer__header{
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--black);
}
.drawer__title{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:700;
  color:#fff;
}
.drawer__close{
  width:32px;height:32px;
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--header-muted);
  transition:color var(--transition),background var(--transition);
}
.drawer__close:hover{background:var(--black-3);color:var(--lime)}
.drawer__body{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-6)}
.drawer__footer{
  padding:var(--space-5) var(--space-6);
  border-top:1px solid var(--color-border);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.cart-item{
  display:grid;
  grid-template-columns:60px 1fr auto;
  gap:var(--space-3);
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-divider);
  align-items:start;
}
.cart-item__img{
  width:60px;height:60px;
  background:var(--color-bg);
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;padding:var(--space-2);
}
.cart-item__img img{max-width:100%;max-height:100%;object-fit:contain}
.cart-item__name{font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-1)}
.cart-item__price{font-size:var(--text-sm);color:var(--lime-dark);font-weight:700}
.cart-item__qty{font-size:var(--text-xs);color:var(--color-text-muted)}
.cart-item__del{color:var(--color-text-faint);font-size:18px;line-height:1;transition:color var(--transition)}
.cart-item__del:hover{color:var(--color-error)}
.cart-total{display:flex;justify-content:space-between;font-weight:700;font-size:var(--text-base)}
.cart-empty{text-align:center;padding:var(--space-12) 0;color:var(--color-text-muted)}
.cart-empty svg{width:48px;height:48px;opacity:.2;margin-bottom:var(--space-4)}

/* ── Auth modal ──────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:400;
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-4);
  opacity:0;pointer-events:none;
  transition:opacity 200ms ease;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--color-surface);
  border-radius:var(--radius-xl);
  padding:var(--space-8);
  width:100%;max-width:400px;
  transform:scale(.96);
  transition:transform 200ms ease;
  box-shadow:var(--shadow-lg);
}
.modal-overlay.open .modal{transform:scale(1)}
.modal__title{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:700;
  margin-bottom:var(--space-6);
}
.form-group{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-4)}
.form-group label{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.form-input{
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3);
  font-size:var(--text-sm);
  outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
  background:var(--color-surface);
  color:var(--color-text);
}
.form-input:focus{border-color:var(--lime);box-shadow:var(--shadow-lime)}
.modal__switch{text-align:center;margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}
.modal__switch a{color:var(--lime-dark);cursor:pointer;font-weight:500}
.modal-error{
  background:var(--color-error-light);
  color:var(--color-error);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  margin-bottom:var(--space-4);
  display:none;
}
.modal-error.show{display:block}

/* ── Toast ───────────────────────────────────────────────────────── */
.toast-container{
  position:fixed;bottom:var(--space-6);right:var(--space-6);
  z-index:500;
  display:flex;flex-direction:column;gap:var(--space-2);
}
.toast{
  background:var(--black);
  color:#fff;
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:500;
  box-shadow:var(--shadow-lg);
  animation:slideIn 200ms ease forwards;
  max-width:300px;
  border-left:3px solid var(--lime);
}
.toast.success{border-left-color:var(--lime);background:var(--black)}
.toast.error{border-left-color:var(--color-error);background:var(--black)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}}
.toast.removing{animation:slideOut 200ms ease forwards}

/* ── Skeleton / spinner ──────────────────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--color-surface-2) 25%,var(--color-divider) 50%,var(--color-surface-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:var(--radius-sm);
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.spinner{
  width:24px;height:24px;
  border:3px solid var(--color-border);
  border-top-color:var(--lime);
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin:var(--space-8) auto;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-center{display:flex;justify-content:center;padding:var(--space-8)}

/* ── Footer ──────────────────────────────────────────────────────── */
.footer{
  background:var(--black);
  color:rgba(255,255,255,.5);
  margin-top:auto;
  padding:var(--space-10) var(--space-6);
  border-top:1px solid var(--black-4);
}
.footer__inner{
  max-width:var(--content-max);
  margin:auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--space-8);
}
@media(max-width:768px){.footer__inner{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer__inner{grid-template-columns:1fr}}
.footer__logo{margin-bottom:var(--space-3)}
.footer__desc{font-size:var(--text-sm);line-height:1.7}
.footer__col h4{
  color:#fff;
  font-family:var(--font-display);
  font-size:var(--text-sm);
  font-weight:600;
  margin-bottom:var(--space-4);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.footer__col ul{display:flex;flex-direction:column;gap:var(--space-2)}
.footer__col ul li a{
  font-size:var(--text-sm);
  color:rgba(255,255,255,.45);
  transition:color var(--transition);
}
.footer__col ul li a:hover{color:var(--lime);text-decoration:none}
.footer__bottom{
  max-width:var(--content-max);
  margin:var(--space-8) auto 0;
  padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--text-xs);flex-wrap:wrap;gap:var(--space-3);
}
.payment-logos{display:flex;gap:var(--space-2);align-items:center}
.payment-logo{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  padding:2px 7px;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,.55);
  letter-spacing:.04em;
}

/* ── Utility ─────────────────────────────────────────────────────── */
.hidden{display:none!important}
.text-center{text-align:center}
.text-muted{color:var(--color-text-muted)}
.mt-4{margin-top:var(--space-4)}
.mb-4{margin-bottom:var(--space-4)}
.flex{display:flex}
.items-center{align-items:center}
.w-full{width:100%}

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:640px){
  .page-wrapper{padding:var(--space-4)}
  .hero{padding:var(--space-6);flex-direction:column}
  .hero__graphic{display:none}
  .hero__title{font-size:var(--text-xl)}
  .topbar{display:none}
  .header__inner{
    gap:var(--space-2);
    padding:0 var(--space-3);
  }
  .search-bar{
    flex:1;
    min-width:0;
    max-width:none;
  }
  .search-bar__form{
    width:100%;
  }
  .search-bar__input{
    min-width:0;
    font-size:0.75rem;
    padding:var(--space-2) var(--space-2);
  }
  .search-bar__btn{
    padding:var(--space-2) var(--space-3);
    font-size:0.75rem;
    flex-shrink:0;
    letter-spacing:0;
  }
  .header__actions {
    flex-shrink:0;
  }
  .header-btn__label{display:none}
  .header-btn{
    padding:var(--space-1);
    gap:0;
  }
  .logo__text{font-size:1rem}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   CART PAGE & CHECKOUT
   ══════════════════════════════════════════════════════════════ */

/* ── Empty cart state ─────────────────────────────────────────── */
.cart-empty-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
}
.cart-empty-page h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.cart-empty-page p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* ── Step progress bar ────────────────────────────────────────── */
.cart-steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.cart-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-faint);
  cursor: default;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: color .18s;
}
.cart-step.active {
  color: var(--lime);
  font-weight: 700;
  cursor: default;
}
.cart-step.done {
  color: var(--color-text-secondary);
  cursor: pointer;
}
.cart-step.done:hover {
  color: var(--lime);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--color-surface-2);
  color: var(--color-text-faint);
  border: 1.5px solid var(--color-border);
  transition: background .18s, color .18s, border-color .18s;
  flex-shrink: 0;
}
.cart-step.active .step-num {
  background: var(--lime);
  color: var(--black);
  border-color: var(--lime);
}
.cart-step.done .step-num {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.cart-step-arrow {
  font-size: 1.1rem;
  color: var(--color-border);
  flex-shrink: 0;
  user-select: none;
}

/* ── Two-column layout (items + summary) ─────────────────────── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-6);
  align-items: start;
}

/* ── Cart items column ────────────────────────────────────────── */
.cart-items-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Table header */
.cart-items-header {
  display: grid;
  grid-template-columns: 56px 1fr 100px 120px 80px 36px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ch-price, .ch-qty, .ch-sum {
  text-align: center;
}

/* Cart row */
.cart-row {
  display: grid;
  grid-template-columns: 56px 1fr 100px 120px 80px 36px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  transition: background .15s;
}
.cart-row:last-of-type {
  border-bottom: none;
}
.cart-row:hover {
  background: var(--color-surface-2);
}

/* Product image cell */
.cart-row__img {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}
.cart-row__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Product info cell */
.cart-row__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cart-row__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}
.cart-row__name:hover {
  color: var(--lime-dark);
}
.cart-row__code {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-mono, monospace);
}
.cart-row__unit {
  font-size: 0.7rem;
  color: var(--color-text-faint);
}

/* Price, qty, sum cells */
.cart-row__price {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.cart-row__sum {
  text-align: center;
  font-size: var(--text-sm);
}
.cart-row__sum strong {
  font-weight: 700;
  color: var(--color-text);
}
.cart-row__qty {
  display: flex;
  justify-content: center;
}

/* Quantity stepper */
.qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.qty-btn {
  width: 30px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.qty-btn:hover {
  background: var(--lime);
  color: var(--black);
}
.qty-input {
  width: 44px;
  height: 32px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: none; background: var(--color-surface-2); }

/* Delete button */
.cart-row__del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-faint);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  justify-self: center;
}
.cart-row__del:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Cart bottom action row */
.cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.cart-clear-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: background .15s, color .15s;
}
.cart-clear-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* ── Order summary sidebar ────────────────────────────────────── */
.cart-summary {
  position: sticky;
  top: calc(var(--header-h, 60px) + var(--space-4));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cart-summary__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.cart-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.cart-summary__row.muted {
  color: var(--color-text-faint);
  font-style: italic;
}
.cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 2px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
}
.cart-summary__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.cart-summary__hint a {
  color: var(--lime-dark);
  text-decoration: none;
  font-weight: 600;
}
.cart-summary__hint a:hover {
  text-decoration: underline;
}

/* Product list in step-2 summary */
.cart-summary__product {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-summary__product:last-child { border-bottom: none; }
.csp-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csp-qty {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: 2px;
}

/* ── Order form (step 2) ──────────────────────────────────────── */
.order-form-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.order-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.order-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.order-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.order-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.order-field label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.req {
  color: #ef4444;
  font-style: normal;
}

/* Delivery radio cards */
.delivery-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.delivery-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.delivery-option:hover {
  border-color: var(--lime);
  background: var(--color-surface-2);
}
.delivery-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--lime);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.delivery-option:has(input:checked) {
  border-color: var(--lime);
  background: rgba(168,230,61,.06);
}
.delivery-option__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.delivery-option__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.delivery-option__desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Textarea */
.form-textarea {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-3);
  resize: vertical;
  min-height: 80px;
  transition: border-color .18s;
  box-sizing: border-box;
}
.form-textarea:focus {
  outline: none;
  border-color: var(--lime);
  background: var(--color-surface);
}

/* Form buttons row */
.order-form-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ── Order confirmation (step 3) ──────────────────────────────── */
.order-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-4);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.order-confirm__icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168,230,61,.12);
  border-radius: 50%;
  border: 2px solid var(--lime);
}
.order-confirm h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.order-confirm p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 400px;
}
.order-confirm__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 340px;
  text-align: left;
}
.order-confirm__contacts a {
  color: var(--lime-dark);
  font-weight: 600;
  text-decoration: none;
}
.order-confirm__contacts a:hover { text-decoration: underline; }
.order-confirm__btns {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Cart drawer improvements ─────────────────────────────────── */
.cart-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  transition: background .15s;
}
.cart-item:hover { background: var(--color-surface-2); }
.cart-item__img {
  width: 44px;
  height: 44px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cart-item__name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cart-item__name:hover { color: var(--lime-dark); }
.cart-item__price-unit {
  font-size: 0.7rem;
  color: var(--color-text-faint);
}
.cart-item__controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.cart-item__qty-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text);
  line-height: 1;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.cart-item__qty-btn:hover {
  background: var(--lime);
  color: var(--black);
  border-color: var(--lime);
}
.cart-item__qty-val {
  font-size: var(--text-xs);
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  color: var(--color-text);
}
.cart-item__sum {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--lime-dark);
  min-width: 52px;
  text-align: right;
}
.cart-item__del {
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background .15s, color .15s;
  align-self: flex-start;
}
.cart-item__del:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* ── Cart drawer improved row layout ─────────────────────────── */
.cart-item-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* ── Responsive: cart ─────────────────────────────────────────── */
@media (max-width: 800px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-summary {
    position: static;
  }
  .cart-items-header {
    display: none;
  }
  .cart-row {
    grid-template-columns: 48px 1fr 36px;
    grid-template-rows: auto auto;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .cart-row__img { grid-row: 1 / 3; }
  .cart-row__info { grid-column: 2; }
  .cart-row__price { display: none; }
  .cart-row__qty { grid-column: 2; justify-content: flex-start; grid-row: 2; }
  .cart-row__sum { grid-column: 3; text-align: right; grid-row: 2; align-self: end; }
  .cart-row__del { grid-column: 3; grid-row: 1; align-self: start; }
  .order-fields { grid-template-columns: 1fr; }
  .order-form-btns { flex-direction: column-reverse; }
  .cart-steps { flex-wrap: wrap; gap: var(--space-1); }
}

/* ══════════════════════════════════════════════════════════════
   HOME PAGE — PROMO BANNERS + SCROLL ROWS
   ══════════════════════════════════════════════════════════════ */

/* ── Section badge labels ─────────────────────────────────────── */
.section-heading__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.section-heading__left h2 { margin: 0; }

.section-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.section-badge.new {
  background: rgba(91,156,246,.15);
  color: #5b9cf6;
  border: 1px solid rgba(91,156,246,.3);
}
.section-badge.hot {
  background: rgba(245,158,66,.12);
  color: #f59e42;
  border: 1px solid rgba(245,158,66,.3);
  font-size: 0.7rem;
}

/* ── Promo slider ─────────────────────────────────────────────── */
.promo-slider {
  margin: var(--space-6) 0;
  overflow: hidden;
  position: relative;
}
.promo-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  --promo-visible: 3;
  --promo-gap: 16px;
}

.promo-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  min-height: 110px;
}
.promo-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--accent, var(--lime));
  border-radius: 4px 0 0 4px;
}
.promo-banner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,.02));
  pointer-events: none;
}
.promo-banner:hover {
  border-color: var(--accent, var(--lime));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.promo-banner__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
}
.promo-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.promo-banner__tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent, var(--lime));
}
.promo-banner__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  white-space: pre-wrap;
}
.promo-banner__desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.promo-banner__arrow {
  flex-shrink: 0;
  color: var(--color-text-faint);
  transition: color .2s, transform .2s;
}
.promo-banner:hover .promo-banner__arrow {
  color: var(--accent, var(--lime));
  transform: translateX(3px);
}

/* Promo dots (shown only on mobile) */
.promo-dots {
  display: none;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.promo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: background .2s, width .2s;
  padding: 0;
}
.promo-dot.active {
  background: var(--lime);
  width: 20px;
  border-radius: 4px;
}

/* ── Horizontal scroll row ────────────────────────────────────── */
.scroll-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

/* ── Scroll card ──────────────────────────────────────────────── */
.scroll-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  display: flex;
  flex-direction: column;
}
.scroll-card:hover {
  border-color: var(--lime);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

/* Image area */
.scroll-card__img {
  height: 140px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.scroll-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-2);
}
.scroll-card__noimg {
  display: block;
  width: 40px;
  height: 40px;
  background: var(--color-border);
  border-radius: var(--radius-md);
  opacity: .4;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E");
  mask-size: cover;
}
.scroll-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: .04em;
}
.scroll-card__badge.oos {
  background: rgba(239,68,68,.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.25);
}

/* Card body */
.scroll-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.scroll-card__producer {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--lime-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.scroll-card__name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.scroll-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  gap: var(--space-2);
}
.scroll-card__price {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.scroll-card__price.muted {
  color: var(--color-text-faint);
  font-weight: 400;
}
.scroll-card__add {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lime);
  color: var(--black);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}
.scroll-card__add:hover {
  background: var(--lime-hover);
  transform: scale(1.1);
}
.scroll-card__add.disabled {
  background: var(--color-surface-2);
  color: var(--color-text-faint);
  cursor: default;
  border: 1px solid var(--color-border);
}
.scroll-card__add.disabled:hover { transform: none; }

/* ── Responsive: home page ────────────────────────────────────── */
@media (max-width: 1100px) {
  .promo-track {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .promo-track {
    display: flex;
    gap: 12px;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
  }
  .promo-banner {
    min-width: calc(100vw - 48px);
    flex-shrink: 0;
  }
  .promo-dots {
    display: flex;
  }
  .scroll-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .scroll-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .promo-banner__icon { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   INFO PAGES — ABOUT + DELIVERY
   ══════════════════════════════════════════════════════════════ */

/* ── Shared info page chrome ──────────────────────────────────── */
.info-page {
  max-width: 1040px;
}
.info-page__title-row {
  margin-bottom: var(--space-6);
}
.info-page__h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
}
.info-page__lead {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Info section block */
.info-section {
  margin-bottom: var(--space-8);
}
.info-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  font-family: var(--font-display);
}
.info-section__title svg { color: var(--lime); flex-shrink: 0; }

/* Info prose text */
.info-text p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
}
.info-text p:last-child { margin-bottom: 0; }

/* ── About hero ───────────────────────────────────────────────── */
.info-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  background: var(--black-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8);
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
}
.info-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(168,230,61,.06) 0%, transparent 60%);
  pointer-events: none;
}
.info-hero__content { position: relative; z-index: 1; }
.info-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lime);
  background: rgba(168,230,61,.1);
  border: 1px solid rgba(168,230,61,.25);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: var(--space-4);
}
.info-hero__tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  display: inline-block;
}
.info-hero__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  font-family: var(--font-display);
}
.info-hero__sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.6);
  max-width: 480px;
  line-height: 1.6;
  margin: 0;
}
.info-hero__graphic {
  flex-shrink: 0;
  opacity: .8;
}

/* ── About stats row ──────────────────────────────────────────── */
.about-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.about-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  transition: border-color .18s, transform .18s;
}
.about-stat:hover {
  border-color: var(--lime);
  transform: translateY(-2px);
}
.about-stat__icon {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168,230,61,.1);
  border-radius: var(--radius-md);
  color: var(--lime);
}
.about-stat__icon svg { width: 18px; height: 18px; }
.about-stat__num {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  font-family: var(--font-display);
}
.about-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.3;
}

/* ── About two-col layout ─────────────────────────────────────── */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  align-items: start;
}
.about-story { display: flex; flex-direction: column; gap: 0; }

/* Audience cards */
.about-audience {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.audience-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color .18s;
}
.audience-card:hover { border-color: var(--lime); }
.audience-card__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168,230,61,.1);
  border-radius: var(--radius-md);
  color: var(--lime);
}
.audience-card__icon svg { width: 18px; height: 18px; }
.audience-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.audience-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.4;
}

/* Hours table */
.hours-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.hours-row:last-child { border-bottom: none; }
.hours-row.off { opacity: .5; }
.hours-row__day { color: var(--color-text-secondary); }
.hours-row__time { font-weight: 600; color: var(--color-text); }
.hours-row.off .hours-row__time { color: var(--color-text-faint); }

/* Contacts column */
.about-contacts { display: flex; flex-direction: column; gap: var(--space-4); }

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.contact-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.contact-list { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.contact-item__icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168,230,61,.1);
  border-radius: var(--radius-sm);
  color: var(--lime);
  margin-top: 2px;
}
.contact-item__label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: 2px;
}
.contact-item__value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
a.contact-item__value:hover { color: var(--lime-dark); }

/* Map card */
.map-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.map-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.map-card__header svg { color: var(--lime); flex-shrink: 0; }
.map-placeholder {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    var(--color-surface-2),
    var(--color-surface-2) 10px,
    var(--color-surface) 10px,
    var(--color-surface) 20px
  );
}
.map-placeholder__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--space-4);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.map-placeholder__btn {
  font-size: var(--text-xs);
  color: var(--lime-dark);
  text-decoration: none;
  font-weight: 600;
  margin-top: var(--space-1);
}
.map-placeholder__btn:hover { text-decoration: underline; }
.map-card__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  border-top: 1px solid var(--color-border);
}
.map-card__hint svg { flex-shrink: 0; }

/* About CTA */
.about-cta {
  background: linear-gradient(135deg, var(--black-2), var(--black-3));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.about-cta__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}
.about-cta__desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.5;
}
.about-cta__btns {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.about-cta__btns .btn-primary,
.about-cta__btns .btn-secondary {
  font-size: var(--text-xs);
  padding: .5rem 1rem;
  width: auto;
}

/* ── Delivery cards ───────────────────────────────────────────── */
.delivery-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.dcard {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.dcard:hover {
  border-color: var(--daccent, var(--lime));
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.dcard__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.dcard__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.dcard__head-info { flex: 1; min-width: 0; }
.dcard__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}
.dcard__addr {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.dcard__badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  align-self: flex-start;
}
.dcard__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dcard__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
}
.dcard__row:last-child { border-bottom: none; }
.dcard__key { color: var(--color-text-faint); flex-shrink: 0; }
.dcard__val { color: var(--color-text); font-weight: 500; text-align: right; }

/* ── Payment methods ──────────────────────────────────────────── */
.payment-methods {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.pay-method {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  transition: border-color .18s, transform .18s;
}
.pay-method:hover {
  border-color: currentColor;
  transform: translateY(-2px);
}
.pay-method__icon {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}
.pay-method__icon svg { width: 20px; height: 20px; }
.pay-method__title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.pay-method__desc {
  font-size: 0.68rem;
  color: var(--color-text-faint);
  line-height: 1.4;
}

/* ── Returns section ──────────────────────────────────────────── */
.return-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  align-items: start;
}
.return-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.return-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.return-step__num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lime);
  color: var(--black);
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: 800;
  font-family: var(--font-display);
  margin-top: 2px;
}
.return-step__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.return-step__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.return-rules {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.return-rules__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.return-rules__title svg { color: var(--lime); flex-shrink: 0; }
.return-rules__list {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.return-rules__list li {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.return-rules__cta {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--lime-dark);
  text-decoration: none;
  margin-top: var(--space-1);
}
.return-rules__cta:hover { text-decoration: underline; }

/* ── FAQ accordion ────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item:last-child { border-bottom: none; }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  transition: background .15s;
  gap: var(--space-4);
}
.faq-question:hover { background: var(--color-surface-2); }
.faq-chevron {
  flex-shrink: 0;
  color: var(--color-text-faint);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .25s;
  padding: 0 var(--space-5);
  background: var(--color-surface-2);
}
.faq-answer.open {
  max-height: 300px;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ── Responsive: info pages ───────────────────────────────────── */
@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-contacts { order: -1; }
  .return-layout { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(3, 1fr); }
  .payment-methods { grid-template-columns: repeat(3, 1fr); }
  .delivery-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .info-hero { flex-direction: column; padding: var(--space-5); }
  .info-hero__graphic { display: none; }
  .info-hero__title { font-size: var(--text-xl); }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .payment-methods { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   ACCOUNT PAGE
═══════════════════════════════════════════════════════════════ */

/* Page wrapper */
.acc-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Header */
.acc-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.acc-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acc-header__info {
  flex: 1;
  min-width: 0;
}
.acc-header__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}
.acc-header__email {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-logout {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .45rem .85rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.acc-logout:hover { border-color: #e55; color: #e55; }

/* Tabs */
.acc-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.acc-tab {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .55rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.acc-tab:hover { border-color: var(--lime); color: var(--color-text); }
.acc-tab.active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--black);
  font-weight: 700;
}
.acc-tab__icon { font-size: 14px; line-height: 1; }

/* Content area */
.acc-content { }

/* Section */
.acc-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}
.acc-section__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

/* Form */
.acc-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.acc-form__row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.acc-form__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.acc-form__input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .6rem .85rem;
  font-size: var(--text-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.acc-form__input:focus {
  outline: none;
  border-color: var(--lime);
}
.acc-form__actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}

/* Stats row */
.acc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.acc-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
}
.acc-stat__val {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--lime);
  line-height: 1;
}
.acc-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: .35rem;
}

/* Empty state */
.acc-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--color-text-muted);
}
.acc-empty__icon { font-size: 3rem; margin-bottom: 1rem; line-height: 1; }
.acc-empty__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: .5rem;
}
.acc-empty__text { font-size: var(--text-sm); }

/* ── Orders ─────────────────────────────────────────── */
.acc-orders { display: flex; flex-direction: column; gap: .75rem; }

.acc-order {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s;
}
.acc-order:hover { border-color: var(--lime); }

.acc-order__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
}
.acc-order__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
  min-width: 100px;
}
.acc-order__date  { font-size: var(--text-sm); color: var(--color-text-muted); }
.acc-order__total { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.acc-order__chevron { transition: transform .2s; flex-shrink: 0; color: var(--color-text-muted); }

/* Order status badges */
.badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-new    { background: #e8f0ff; color: #3461d6; }
.badge-proc   { background: #fff3cd; color: #8a6200; }
.badge-ship   { background: #e8f7c8; color: #3a7a00; }
.badge-done   { background: #d4edda; color: #155724; }
.badge-cancel { background: #fde8e8; color: #9b1c1c; }

/* Order details */
.acc-order__details {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  border-top: 0 solid var(--color-border);
}
.acc-order__details.open {
  max-height: 600px;
  border-top-width: 1px;
}
.acc-order__items { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.acc-order__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s;
}
.acc-order__item:hover { background: var(--lime-light); }
.acc-order__item-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.acc-order__item-meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.acc-order__delivery {
  padding: .5rem 1.25rem .75rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Addresses ──────────────────────────────────────── */
.acc-addr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.acc-addr-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  position: relative;
}
.acc-addr-card.default { border-color: var(--lime); }
.acc-addr-default {
  position: absolute;
  top: .6rem;
  right: .75rem;
  font-size: 10px;
  font-weight: 700;
  background: var(--lime);
  color: var(--black);
  padding: .15rem .5rem;
  border-radius: 999px;
}
.acc-addr-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: .35rem;
  padding-right: 70px;
}
.acc-addr-line { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: .2rem; }
.acc-addr-zip  { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: .75rem; }
.acc-addr-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

.acc-addr-form {
  background: var(--lime-light);
  border: 1px solid var(--lime);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

/* ── Wishlist ───────────────────────────────────────── */
.acc-wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.acc-wl-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.acc-wl-card:hover { border-color: var(--lime); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.acc-wl-card__img {
  height: 130px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.acc-wl-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: .5rem; }
.acc-wl-card__noimg { color: var(--color-text-muted); opacity: .35; }
.acc-wl-card__body { padding: .85rem 1rem; }
.acc-wl-card__producer { font-size: 10px; font-weight: 700; color: var(--lime-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.acc-wl-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.35;
  margin-bottom: .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acc-wl-card__name:hover { color: var(--lime-dark); }
.acc-wl-card__price {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: .75rem;
}
.acc-wl-card__actions { display: flex; gap: .4rem; align-items: center; }
.acc-wl-remove {
  margin-left: auto;
  opacity: .5;
  font-size: 12px;
}
.acc-wl-remove:hover { opacity: 1; color: #e55; }

/* ── Shared small buttons ──────────────────────────── */
.btn-lime-sm {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--lime);
  color: var(--black);
  border: none;
  border-radius: var(--radius);
  padding: .35rem .85rem;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.btn-lime-sm:hover { background: var(--lime-hover); }

.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .3rem .75rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-ghost-sm:hover { border-color: #e55; color: #e55; }

/* ── Wishlist button in buy-box ─────────────────────── */
.pbb-wishlist {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  width: 100%;
  justify-content: center;
  margin-bottom: .75rem;
}
.pbb-wishlist:hover { border-color: #e66; color: #e66; }
.pbb-wishlist.active { border-color: #e66; color: #e66; background: #fef2f2; }
.pbb-wishlist.active svg { fill: #e66; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
  .acc-page { padding: 1rem 1rem 3rem; }
  .acc-header { padding: 1.25rem 1rem; }
  .acc-header__name { font-size: var(--text-sm); }
  .acc-logout span { display: none; }
  .acc-tabs { gap: .35rem; }
  .acc-tab { padding: .45rem .75rem; font-size: 12px; }
  .acc-tab__label { display: none; }
  .acc-tab__icon { font-size: 18px; }
  .acc-tab.active .acc-tab__label { display: inline; }
  .acc-stats { grid-template-columns: repeat(3,1fr); gap: .6rem; }
  .acc-stat { padding: .85rem .5rem; }
  .acc-stat__val { font-size: var(--text-lg); }
  .acc-section { padding: 1.25rem 1rem; }
  .acc-addr-list { grid-template-columns: 1fr; }
  .acc-wl-grid { grid-template-columns: repeat(2, 1fr); }
  .acc-order__head { gap: .5rem; }
  .acc-order__date { display: none; }
}