/* ─── Splash screen ─── */
#splash {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  background:      #ffffff;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             48px;
  transition:      opacity .45s ease;
}
#splash.splash-out { opacity: 0; pointer-events: none; }
.splash-logo {
  width:      160px;
  height:     160px;
  object-fit: contain;
  animation:  splash-float 1.6s ease-in-out infinite alternate;
}
@keyframes splash-float {
  from { transform: translateY(0)   scale(1); }
  to   { transform: translateY(-10px) scale(1.04); }
}
.splash-bar-track {
  width:         220px;
  height:        3px;
  background:    rgba(0,0,0,.1);
  border-radius: 2px;
  overflow:      hidden;
}
.splash-bar {
  height:        100%;
  width:         0%;
  background:    #000;
  border-radius: 2px;
  transition:    width .4s cubic-bezier(.4,0,.2,1);
}

/* ─── Telegram theme vars ─── */
:root {
  --safe-top:    calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  --tg-bg:       var(--tg-theme-bg-color,           #17212b);
  --tg-surface:  var(--tg-theme-secondary-bg-color,  #232e3c);
  --tg-text:     var(--tg-theme-text-color,          #f5f5f5);
  --tg-hint:     var(--tg-theme-hint-color,          #708499);
  --tg-link:     var(--tg-theme-link-color,          #6ab3f3);
  --tg-btn:      var(--tg-theme-button-color,        #5288c1);
  --tg-btn-text: var(--tg-theme-button-text-color,   #ffffff);

  --border:    rgba(255,255,255,.07);
  --border-md: rgba(255,255,255,.11);
  --card:      var(--tg-surface);
  --radius:    14px;
  --radius-sm: 8px;
  --header-h:  56px;
  --green:     #34d399;
  --red:       #ff453a;
  --amber:     #fbbf24;
}

/* ─── Light theme ─── */
html.theme-light {
  --tg-bg:       #f0f2f5;
  --tg-surface:  #ffffff;
  --tg-text:     #0d0f1e;
  --tg-hint:     #64748b;
  --tg-link:     #3b7ddd;
  --tg-btn:      #0d0f1e;
  --tg-btn-text: #ffffff;
  --border:      rgba(0,0,0,.07);
  --border-md:   rgba(0,0,0,.12);
  --green:       #16a34a;
  --red:         #dc2626;
  --amber:       #d97706;
}
html.theme-light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }
html.theme-light input,
html.theme-light textarea,
html.theme-light select {
  caret-color: #0d0f1e;
  color:       #0d0f1e;
}
html.theme-light ::selection {
  background: rgba(59,125,221,.22);
  color:      #0d0f1e;
}
html.theme-light .form-group input:focus,
html.theme-light .form-group textarea:focus,
html.theme-light #search-input:focus,
html.theme-light .review-textarea:focus {
  border-color: #3b7ddd;
  box-shadow:   0 0 0 3px rgba(59,125,221,.15);
}
html.theme-light .form-group input,
html.theme-light .form-group textarea,
html.theme-light #search-input,
html.theme-light .review-textarea,
html.theme-light .filter-price-input {
  background:   #ffffff;
  border-color: rgba(0,0,0,.15);
}

html.theme-light #app-header {
  background: var(--tg-bg);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }

input, textarea, select {
  caret-color: var(--tg-text);
  color:       var(--tg-text);
}
::selection {
  background: rgba(82,136,193,.28);
  color:      var(--tg-text);
}

body {
  background:  var(--tg-bg);
  color:       var(--tg-text);
  font-family: -apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:   15px;
  line-height: 1.5;
  min-height:  var(--tg-viewport-height, 100dvh);
  padding-bottom: calc(env(safe-area-inset-bottom,16px) + 80px);
  overflow-x:  hidden;
}
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.hidden { display:none !important; }
.active { display:block; }

/* ─── Header ─── */
#app-header {
  position:       sticky;
  top:            0;
  z-index:        100;
  height:         calc(var(--header-h) + var(--safe-top));
  padding-top:    var(--safe-top);
  background:     var(--tg-bg);
  border-bottom:  none;
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  padding-left:   14px;
  padding-right:  14px;
}
#app-header.minimal {
  height:          var(--safe-top, 0px);
  min-height:      0;
  padding-left:    0;
  padding-right:   0;
  pointer-events:  none;
}
#app-header.minimal * { pointer-events: auto; }
.header-left {
  display:     flex;
  align-items: center;
  gap:         8px;
  min-width:   0;
}
#header-title {
  font-size:    17px;
  font-weight:  700;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow:ellipsis;
  letter-spacing:-.2px;
  display:      none;
}
#header-title.visible { display: block; }
.header-right { display:flex; align-items:center; gap:4px; }

.icon-btn {
  background:   none;
  border:       none;
  color:        var(--tg-text);
  cursor:       pointer;
  padding:      6px;
  border-radius:var(--radius-sm);
  display:      flex;
  align-items:  center;
  justify-content:center;
  transition:   opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.icon-btn:active { opacity:.6; }

.cart-btn { position:relative; }
.cart-badge {
  position:     absolute;
  top:          2px;
  right:        2px;
  min-width:    18px;
  height:       18px;
  padding:      0 4px;
  background:   var(--red);
  color:        #fff;
  font-size:    11px;
  font-weight:  700;
  border-radius:9px;
  display:      flex;
  align-items:  center;
  justify-content:center;
  line-height:  1;
  animation:    pop .2s cubic-bezier(.36,.07,.19,.97);
}
@keyframes pop { 0%{transform:scale(.7)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }

/* ─── Screens ─── */
.screen {
  display:    none;
  min-height: calc(100vh - var(--header-h));
  animation:  fade-up .22s ease;
}
.screen.active { display:block; }
@keyframes fade-up {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}

/* ─── Search ─── */
.search-wrap  { padding:20px 14px 10px; }
.search-row   { display:flex; align-items:center; gap:8px; }
.search-row .search-box { flex:1; }
.search-theme-btn {
  flex-shrink: 0;
  width:  40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tg-surface);
  color: var(--tg-hint);
}
.search-box {
  position:    relative;
  display:     flex;
  align-items: center;
}
.search-icon {
  position:       absolute;
  left:           13px;
  color:          var(--tg-hint);
  pointer-events: none;
}
#search-input {
  width:         100%;
  background:    var(--tg-surface);
  border:        1.5px solid var(--border);
  border-radius: 13px;
  padding:       10px 36px 10px 38px;
  color:         var(--tg-text);
  font-size:     16px;
  outline:       none;
  transition:    border-color .15s, box-shadow .15s;
}
#search-input::placeholder { color:var(--tg-hint); }
#search-input:focus {
  border-color:var(--tg-btn);
  box-shadow:0 0 0 3px rgba(82,136,193,.18);
}
.clear-btn {
  position:   absolute;
  right:      10px;
  background: none;
  border:     none;
  color:      var(--tg-hint);
  cursor:     pointer;
  font-size:  16px;
  padding:    4px;
}

/* ─── Categories ─── */
.categories-wrap { padding:0 14px 14px; overflow:hidden; }
.categories-bar {
  display:          flex;
  gap:              7px;
  overflow-x:       auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:  none;
  padding-bottom:   2px;
}
.categories-bar::-webkit-scrollbar { display:none; }
.cat-chip {
  scroll-snap-align:start;
  flex-shrink:  0;
  background:   var(--tg-surface);
  border:       1.5px solid var(--border);
  color:        var(--tg-hint);
  border-radius:20px;
  padding:      6px 16px;
  font-size:    13px;
  font-weight:  500;
  cursor:       pointer;
  white-space:  nowrap;
  transition:   all .15s;
  -webkit-tap-highlight-color:transparent;
}
.cat-chip.active {
  background:  var(--tg-btn);
  border-color:var(--tg-btn);
  color:       var(--tg-btn-text);
  font-weight: 600;
}
.cat-chip:active { opacity:.7; }

/* ─── Products Grid ─── */
.products-grid {
  display:               grid;
  grid-template-columns: repeat(2,1fr);
  gap:                   12px;
  padding:               0 14px;
}

/* ─── Product Card ─── */
.product-card {
  background:     var(--card);
  border-radius:  16px;
  overflow:       hidden;
  cursor:         pointer;
  display:        flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  box-shadow:     0 2px 12px rgba(0,0,0,.28);
  transition:     transform .14s, box-shadow .14s;
  will-change:    transform;
}
.product-card:active {
  transform:  scale(.96);
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
}

.product-card-img-wrap {
  position: relative;
  width:    100%;
}
.product-card-img {
  width:        100%;
  aspect-ratio: 1/1;
  object-fit:   cover;
  background:   var(--tg-surface);
  display:      block;
}
video.product-card-img {
  object-fit: contain;
  background: #000;
}
.product-card-img-placeholder {
  width:           100%;
  aspect-ratio:    1/1;
  background:      var(--tg-surface);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       40px;
  color:           var(--tg-hint);
}
/* gradient overlay at bottom of image */
.product-card-img-wrap::after {
  content:  '';
  position: absolute;
  inset:    auto 0 0;
  height:   40%;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 100%);
  pointer-events: none;
}
.card-video-badge {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%,-50%);
  background:      rgba(0,0,0,.52);
  backdrop-filter: blur(4px);
  color:           #fff;
  font-size:       22px;
  width:           42px;
  height:          42px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
  z-index:         2;
}
.product-card-disc {
  position:      absolute;
  top:           8px;
  left:          8px;
  background:    var(--red);
  color:         #fff;
  font-size:     10px;
  font-weight:   800;
  letter-spacing:.3px;
  padding:       3px 7px;
  border-radius: 20px;
  line-height:   1.4;
  z-index:       2;
  box-shadow:    0 1px 4px rgba(0,0,0,.35);
}
.product-card-body {
  padding:        10px 11px 13px;
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            3px;
}
.product-card-brand {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color:          var(--tg-btn);
  opacity:        .85;
}
.product-card-name {
  font-size:   13px;
  font-weight: 500;
  line-height: 1.35;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
  color:       var(--tg-text);
}
.product-card-price-row {
  display:     flex;
  align-items: baseline;
  gap:         5px;
  flex-wrap:   wrap;
  margin-top:  auto;
  padding-top: 5px;
}
.product-card-price {
  font-size:   15px;
  font-weight: 800;
  color:       var(--tg-text);
}
.product-card-old-price {
  font-size:       11px;
  color:           var(--tg-hint);
  text-decoration: line-through;
}
.product-card-out-label {
  font-size:     10px;
  font-weight:   600;
  color:         var(--tg-hint);
  background:    rgba(255,255,255,.06);
  border-radius: 4px;
  padding:       2px 5px;
  align-self:    flex-start;
  margin-top:    3px;
}
.stock-low {
  font-size:   10px;
  font-weight: 600;
  color:       var(--amber);
  margin-top:  2px;
}
.out-of-stock-overlay { opacity:.45; }

/* ─── Skeleton ─── */
@keyframes shimmer {
  0%   { background-position:-400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background:      linear-gradient(90deg,var(--tg-surface) 25%,rgba(255,255,255,.04) 50%,var(--tg-surface) 75%);
  background-size: 800px 100%;
  animation:       shimmer 1.4s infinite;
  pointer-events:  none;
  aspect-ratio:    2/3;
  border-radius:   var(--radius);
}

/* ─── Empty state ─── */
.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         60px 24px;
  text-align:      center;
  gap:             8px;
}
.empty-icon   { font-size:52px; }
.empty-img {
  width:         140px;
  height:        140px;
  object-fit:    cover;
  border-radius: 50%;
  filter:        drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* ─── Pig loader ─── */
@keyframes pig-bounce {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}
.pig-loader {
  width:  110px;
  height: 110px;
  object-fit: contain;
  animation: pig-bounce 0.9s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.empty-state p    { font-size:17px; font-weight:600; }
.empty-state span { font-size:14px; color:var(--tg-hint); }

/* ─── Infinite scroll spinner ─── */
.load-more-wrap { padding:24px 14px; display:flex; justify-content:center; }
.infinite-spinner {
  display:  flex;
  gap:      7px;
  align-items: center;
}
.infinite-spinner div {
  width:          9px;
  height:         9px;
  border-radius:  50%;
  background:     var(--tg-hint);
  animation:      dot-bounce 1.2s infinite ease-in-out;
}
.infinite-spinner div:nth-child(2) { animation-delay:.18s; }
.infinite-spinner div:nth-child(3) { animation-delay:.36s; }
@keyframes dot-bounce {
  0%,80%,100% { transform:scale(.6); opacity:.4; }
  40%         { transform:scale(1);  opacity:1;  }
}

/* ─── Product detail skeleton ─── */
.product-skeleton {
  padding: 0 0 20px;
}
.product-skeleton-img {
  width:      100%;
  aspect-ratio:1/1;
  background: linear-gradient(90deg,var(--tg-surface) 25%,rgba(255,255,255,.04) 50%,var(--tg-surface) 75%);
  background-size:800px 100%;
  animation:  shimmer 1.4s infinite;
}
.product-skeleton-body {
  padding: 18px 14px;
  display: flex;
  flex-direction:column;
  gap: 12px;
}
.product-skeleton-line {
  height:      14px;
  border-radius:7px;
  background: linear-gradient(90deg,var(--tg-surface) 25%,rgba(255,255,255,.04) 50%,var(--tg-surface) 75%);
  background-size:800px 100%;
  animation:  shimmer 1.4s infinite;
}
.product-skeleton-line.w90 { width:90%; }
.product-skeleton-line.w75 { width:75%; }
.product-skeleton-line.w60 { width:60%; }
.product-skeleton-line.w55 { width:55%; }
.product-skeleton-line.w40 { width:40%; height:20px; }

/* ─── Support banner ─── */
.support-banner {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      20px 14px 0;
  background:  var(--tg-surface);
  border:      1.5px solid var(--border);
  border-radius:var(--radius);
  padding:     14px 16px;
  cursor:      pointer;
  transition:  border-color .15s, opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.support-banner:active { opacity:.75; }
.support-banner-icon {
  width:  38px;
  height: 38px;
  border-radius:50%;
  background:var(--tg-btn);
  color:  var(--tg-btn-text);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.support-banner-text {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.support-banner-title {
  font-size:14px;
  font-weight:600;
  color:var(--tg-text);
}
.support-banner-sub {
  font-size:12px;
  color:var(--tg-hint);
}

/* ─── Support FAB ─── */
.support-fab {
  position:       fixed;
  bottom:         calc(56px + env(safe-area-inset-bottom,0px) + 12px);
  right:          16px;
  z-index:        200;
  width:          48px;
  height:         48px;
  border-radius:  50%;
  background:     var(--tg-btn);
  color:          var(--tg-btn-text);
  border:         none;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content:center;
  box-shadow:     0 4px 20px rgba(0,0,0,.45);
  transition:     transform .15s, opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.support-fab:active { transform:scale(.9); }

/* ─── Product detail ─── */
.product-gallery {
  position:   relative;
  background: var(--tg-surface);
  overflow:   hidden;
}
.gallery-slides {
  display:    flex;
  overflow-x: auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gallery-slides::-webkit-scrollbar { display:none; }
.gallery-slide {
  flex-shrink: 0;
  width:       100%;
  scroll-snap-align:start;
}
.gallery-slide img {
  width:       100%;
  aspect-ratio:4/3;
  object-fit:  cover;
  display:     block;
}
.gallery-slide video {
  width:        100%;
  aspect-ratio: 4/3;
  object-fit:   contain;
  display:      block;
  background:   #000;
}
.gallery-placeholder {
  width:           100%;
  aspect-ratio:    4/3;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       72px;
  color:           var(--tg-hint);
}
/* ─── Gallery arrows ─── */
.gallery-arrow {
  position:      absolute;
  top:           50%;
  transform:     translateY(-50%);
  z-index:       10;
  background:    rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  border:        none;
  color:         #fff;
  width:         38px;
  height:        38px;
  border-radius: 50%;
  cursor:        pointer;
  font-size:     26px;
  line-height:   1;
  display:       flex;
  align-items:   center;
  justify-content:center;
  transition:    background .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.gallery-arrow:hover  { background: rgba(0,0,0,.7); }
.gallery-arrow:active { background: rgba(0,0,0,.9); }
.gallery-prev { left:  10px; }
.gallery-next { right: 10px; }

.gallery-dots {
  display:         flex;
  justify-content: center;
  gap:             6px;
  padding:         10px;
  position:        absolute;
  bottom:          0;
  width:           100%;
}
.gallery-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    rgba(255,255,255,.35);
  transition:    background .2s, transform .2s;
  cursor:        pointer;
}
.gallery-dot.active { background:#fff; transform:scale(1.2); }
.gallery-dot.dot-video { border-radius: 3px; width: 12px; }
.gallery-dot.dot-video.active { background:#fff; }

.product-body { padding:18px 14px 20px; }
.product-meta {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom:8px;
  flex-wrap:   wrap;
}
.cat-badge {
  background:  rgba(106,179,243,.15);
  color:       var(--tg-link);
  border-radius:6px;
  padding:     3px 9px;
  font-size:   12px;
  font-weight: 500;
}
.stock-badge     { font-size:12px; font-weight:600; }
.stock-badge.in  { color:var(--green); }
.stock-badge.out { color:var(--red); }

.product-title {
  font-size:   22px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom:10px;
}
.price-row {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  margin-bottom:16px;
  flex-wrap:   wrap;
}
.price-current {
  font-size:   28px;
  font-weight: 800;
  color:       var(--tg-text);
  letter-spacing:-.5px;
}
.price-old {
  font-size:       17px;
  color:           var(--tg-hint);
  text-decoration: line-through;
}
.discount-badge {
  background:  rgba(255,69,58,.15);
  color:       var(--red);
  border-radius:6px;
  padding:     3px 9px;
  font-size:   13px;
  font-weight: 700;
}
.product-desc {
  font-size:   15px;
  color:       var(--tg-hint);
  line-height: 1.6;
  margin-bottom:24px;
  white-space: pre-line;
}
.product-actions {
  display:     flex;
  gap:         10px;
  align-items: center;
}
.qty-control {
  display:     flex;
  align-items: center;
  background:  var(--tg-surface);
  border:      1.5px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:    hidden;
  flex-shrink: 0;
}
.qty-btn {
  background:  none;
  border:      none;
  color:       var(--tg-text);
  font-size:   22px;
  font-weight: 400;
  width:       42px;
  height:      46px;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content:center;
  transition:  background .1s;
  -webkit-tap-highlight-color:transparent;
}
.qty-btn:active { background:var(--border); }
#qty-value {
  min-width:  36px;
  text-align: center;
  font-size:  16px;
  font-weight:700;
  pointer-events:none;
}
.btn-add { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-add-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.3; }
.btn-add-price { font-size:12px; font-weight:500; opacity:.75; }
.cart-goto-bar {
  position:        fixed;
  bottom:          calc(var(--safe-bottom, 0px) + 12px);
  left:            14px;
  right:           14px;
  z-index:         95;
  margin:          0;
  display:         flex;
  align-items:     center;
  gap:             10px;
  background:      var(--tg-btn);
  color:           var(--tg-btn-text);
  border-radius:   14px;
  padding:         13px 18px;
  cursor:          pointer;
  font-size:       14px;
  font-weight:     600;
  box-shadow:      0 4px 20px rgba(0,0,0,.25);
  transition:      transform .2s, opacity .2s;
  animation:       cart-bar-in .3s cubic-bezier(.34,1.56,.64,1);
}
.cart-goto-bar:active { transform: scale(.97); }
@keyframes cart-bar-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.cart-goto-arrow { margin-left:auto; opacity:.85; font-size:13px; }

/* ─── Product feature badges ─── */
.product-features {
  display:                  flex;
  flex-direction:           row;
  gap:                      8px;
  margin-top:               20px;
  padding-top:              20px;
  border-top:               1px solid var(--border);
  overflow-x:               auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type:         x mandatory;
  overscroll-behavior-x:    contain;
  scrollbar-width:          none;
  /* negative margin trick to keep full-bleed feel */
  padding-bottom:           2px;
}
.product-features::-webkit-scrollbar { display: none; }
.product-feature {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 10px;
  border-radius: var(--radius-sm);
  background:    var(--tg-surface);
  border:        1px solid var(--border);
  flex:          0 0 auto;
  /* show ~2.2 items on mobile so 3rd is visibly peeking */
  width:         calc((100% - 24px) / 2.2);
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .product-features {
    overflow-x:            visible;
    scroll-snap-type:      none;
    overscroll-behavior-x: auto;
    display:               grid;
    grid-template-columns: repeat(3,1fr);
  }
  .product-feature {
    width: auto;
    flex:  unset;
  }
}
.feature-icon {
  flex-shrink: 0;
  width:       32px;
  height:      32px;
  border-radius: 8px;
  background:  rgba(82,136,193,.12);
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--tg-btn);
}
.feature-text { min-width: 0; }
.feature-title { display:block; font-size:11px; font-weight:600; color:var(--tg-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feature-sub   { display:block; font-size:10px; color:var(--tg-hint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ─── Product card rating ─── */
.product-card-rating {
  display:     flex;
  align-items: center;
  gap:         3px;
  font-size:   11px;
  font-weight: 600;
  color:       var(--tg-text);
  margin-top:  1px;
}
.card-star { color: var(--amber); font-size:12px; }
.card-rating-count { color:var(--tg-hint); font-weight:400; }

/* ─── Reviews section ─── */
.reviews-section {
  padding: 0 14px 20px;
  margin-top: 4px;
}
.reviews-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   14px;
}
.reviews-summary {
  display:     flex;
  align-items: center;
  gap:         8px;
}
.reviews-avg-score {
  font-size:   28px;
  font-weight: 800;
  line-height: 1;
}
.stars-row { display:flex; gap:2px; }
.star { font-size:16px; line-height:1; }
.star-sm { font-size:13px; }
.star-fill  { color: var(--amber); }
.star-empty { color: var(--border-md); }
.reviews-count-label {
  font-size:  12px;
  color:      var(--tg-hint);
  margin-left:2px;
}

/* review form */
.review-form {
  background:    var(--tg-surface);
  border:        1.5px solid var(--border);
  border-radius: 14px;
  padding:       16px;
  margin-bottom: 16px;
}
.review-form-title {
  font-size:   14px;
  font-weight: 600;
  margin-bottom:10px;
}
.stars-input {
  display:  flex;
  gap:      6px;
  font-size:34px;
  cursor:   pointer;
  margin-bottom:12px;
  user-select:none;
}
.stars-input span { transition:color .1s; }
.stars-input .star-fill  { color:var(--amber); }
.stars-input .star-empty { color:var(--border-md); }
.review-textarea {
  width:        100%;
  background:   var(--tg-bg);
  border:       1.5px solid var(--border);
  border-radius:10px;
  color:        var(--tg-text);
  font-size:    16px;
  padding:      10px 12px;
  resize:       none;
  min-height:   80px;
  outline:      none;
  font-family:  inherit;
  margin-bottom:12px;
  transition:   border-color .15s;
}
.review-textarea:focus { border-color:var(--tg-btn); }
.review-form-actions {
  display: flex;
  gap:     8px;
  justify-content:flex-end;
}

/* review list */
.reviews-list { display:flex; flex-direction:column; gap:12px; }
.review-item {
  background:    var(--tg-surface);
  border-radius: 12px;
  padding:       12px 14px;
}
.review-item-header {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom:6px;
}
.review-delete-btn {
  margin-left: auto;
  background:  none;
  border:      none;
  font-size:   16px;
  cursor:      pointer;
  opacity:     0.45;
  padding:     4px;
  line-height: 1;
  transition:  opacity .15s;
  flex-shrink: 0;
}
.review-delete-btn:hover  { opacity: 1; }
.review-delete-btn:active { opacity: 1; }
.review-avatar {
  width:          36px;
  height:         36px;
  border-radius:  10px;
  background:     var(--tg-btn);
  color:          #fff;
  font-size:      15px;
  font-weight:    700;
  display:        flex;
  align-items:    center;
  justify-content:center;
  flex-shrink:    0;
}
.review-avatar-wrap {
  display:   flex;
  flex-shrink:0;
  text-decoration: none;
}
.review-avatar-img {
  width:         36px;
  height:        36px;
  border-radius: 10px;
  object-fit:    cover;
  flex-shrink:   0;
}
.review-meta { flex:1; min-width:0; }
.review-name {
  font-size:    13px;
  font-weight:  600;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow:ellipsis;
  color:        var(--tg-text);
  text-decoration: none;
}
.review-name.tg-link { cursor: pointer; }
.review-name.tg-link:active { opacity: 0.7; }
.review-date { font-size:11px; color:var(--tg-hint); margin-top:1px; }
.review-stars { display:flex; gap:1px; }
.review-text {
  font-size:   13px;
  line-height: 1.5;
  color:       var(--tg-text);
  margin-top:  4px;
}
.reviews-load-more { text-align:center; margin-top:12px; }
.btn-sm { padding:8px 20px !important; font-size:13px !important; }

/* ─── Similar products ─── */
.similar-section {
  padding:  0 0 8px;
  margin-top:4px;
  border-top:1px solid var(--border);
}
.similar-header {
  display:     flex;
  align-items: center;
  justify-content:space-between;
  padding:     16px 14px 12px;
}
.similar-title {
  font-size:   16px;
  font-weight: 700;
  color:       var(--tg-text);
}
.similar-scroll {
  display:    flex;
  gap:        10px;
  overflow-x: auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:    0 14px 4px;
}
.similar-scroll::-webkit-scrollbar { display:none; }
.similar-scroll .product-card.mini {
  flex-shrink:  0;
  width:        140px;
  scroll-snap-align:start;
}
.mini .product-card-img,
.mini .product-card-img-placeholder {
  aspect-ratio: 1/1;
}
.mini .product-card-name {
  font-size: 12px;
  -webkit-line-clamp:2;
}
.mini .product-card-price { font-size:13px; }

/* ─── Buttons ─── */
.btn-primary {
  background:    var(--tg-btn);
  color:         var(--tg-btn-text);
  border:        none;
  border-radius: var(--radius-sm);
  padding:       13px 20px;
  font-size:     15px;
  font-weight:   600;
  cursor:        pointer;
  transition:    opacity .15s, transform .1s;
  display:       inline-flex;
  align-items:   center;
  justify-content:center;
  gap:           6px;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary:active  { opacity:.8; transform:scale(.98); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-full { width:100%; }

.btn-secondary {
  background:   transparent;
  color:        var(--tg-link);
  border:       1.5px solid var(--tg-link);
  border-radius:var(--radius-sm);
  padding:      11px 24px;
  font-size:    15px;
  font-weight:  500;
  cursor:       pointer;
  transition:   opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn-secondary:active { opacity:.7; }

/* ─── Cart ─── */
.cart-list {
  padding: 12px 14px;
  display: flex;
  flex-direction:column;
  gap:     10px;
}

/* ─── Cart selection ─── */
.cart-select-bar {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     2px 2px 10px;
  border-bottom: 1px solid var(--border);
}
.cart-select-all-label {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  font-size:   13px;
  font-weight: 500;
  user-select: none;
}
.cart-cb-wrap {
  display:     flex;
  align-items: center;
  cursor:      pointer;
  flex-shrink: 0;
}
.cart-cb {
  appearance:         none;
  -webkit-appearance: none;
  width:        20px;
  height:       20px;
  border-radius:6px;
  border:       2px solid var(--border);
  background:   var(--tg-surface);
  cursor:       pointer;
  flex-shrink:  0;
  position:     relative;
  transition:   background .15s, border-color .15s;
}
.cart-cb:checked,
.cart-cb:indeterminate {
  background:   var(--tg-btn);
  border-color: var(--tg-btn);
}
.cart-cb:checked::after {
  content:  '';
  position: absolute;
  left:  4px; top: 1px;
  width: 7px; height: 11px;
  border: 2.5px solid #fff;
  border-top:  none;
  border-left: none;
  transform: rotate(45deg);
}
.cart-cb:indeterminate::after {
  content:  '';
  position: absolute;
  left: 3px; top: 7px;
  width: 10px; height: 2px;
  background: #fff;
}
.cart-select-hint {
  margin-left: auto;
  font-size:   12px;
  color:       var(--tg-hint);
}
.cart-item.cart-unselected { opacity: 0.38; }

.cart-item {
  background:   var(--card);
  border:       1.5px solid var(--border);
  border-radius:var(--radius);
  padding:      12px;
  display:      flex;
  gap:          12px;
  align-items:  center;
  transition:   opacity .15s;
}
.cart-item-img {
  width:        64px;
  height:       64px;
  border-radius:var(--radius-sm);
  object-fit:   cover;
  flex-shrink:  0;
  background:   var(--tg-surface);
}
.cart-item-img-placeholder {
  width:           64px;
  height:          64px;
  border-radius:   var(--radius-sm);
  background:      var(--tg-surface);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       28px;
  flex-shrink:     0;
}
.cart-item-info { flex:1; min-width:0; }
.cart-item-name {
  font-size:   14px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom:6px;
  overflow:    hidden;
  display:     -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.cart-item-price { font-size:13px; color:var(--tg-hint); }
.cart-item-right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            8px;
}
.cart-item-total {
  font-size:  15px;
  font-weight:700;
  white-space:nowrap;
}
.cart-item-controls {
  display:     flex;
  align-items: center;
  background:  var(--tg-surface);
  border:      1.5px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:    hidden;
}
.cart-qty-btn {
  background:  none;
  border:      none;
  color:       var(--tg-text);
  font-size:   18px;
  width:       32px;
  height:      32px;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.cart-qty-btn:active { background:var(--border); }
.cart-qty-val {
  min-width:  28px;
  text-align: center;
  font-size:  14px;
  font-weight:600;
}
.cart-item-delete {
  background: none;
  border:     none;
  color:      var(--red);
  font-size:  18px;
  cursor:     pointer;
  padding:    4px;
  line-height:1;
}
.cart-summary {
  padding:    16px 14px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  display:    flex;
  flex-direction:column;
  gap:        10px;
}
.summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       15px;
  color:           var(--tg-hint);
}
.total-row { font-size:17px; font-weight:700; color:var(--tg-text); }

/* ─── Checkout ─── */
.checkout-form-wrap {
  padding: 20px 14px 32px;
  display: flex;
  flex-direction:column;
  gap:     16px;
}
.section-title { font-size:17px; font-weight:700; margin-bottom:4px; }
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.form-group label {
  font-size:     13px;
  color:         var(--tg-hint);
  font-weight:   500;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.form-group input,
.form-group textarea {
  background:   var(--tg-surface);
  border:       1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:      11px 14px;
  color:        var(--tg-text);
  font-size:    16px;
  font-family:  inherit;
  outline:      none;
  transition:   border-color .15s, box-shadow .15s;
  width:        100%;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color:var(--tg-btn);
  box-shadow:0 0 0 3px rgba(82,136,193,.18);
}
.form-group input.error,
.form-group textarea.error { border-color:var(--red); }
.field-hint { font-size: 12px; margin-top: 4px; color: var(--tg-hint); min-height: 16px; }
.field-hint.error { color: var(--red); }
.field-hint.ok    { color: var(--green); }
.form-group textarea { resize:vertical; min-height:80px; }

.checkout-order-summary {
  background:   var(--card);
  border:       1.5px solid var(--border);
  border-radius:var(--radius);
  padding:      16px;
  display:      flex;
  flex-direction:column;
  gap:          10px;
}
.checkout-line {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       14px;
  gap:             8px;
}
.checkout-line-name {
  flex:    1;
  color:   var(--tg-hint);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.checkout-line-qty   { color:var(--tg-hint); margin:0 4px; }
.checkout-line-price { font-weight:600; white-space:nowrap; }

/* ─── Success ─── */
.success-wrap {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      calc(100vh - var(--header-h));
  padding:         32px 24px;
  text-align:      center;
  gap:             12px;
}
.success-anim {
  font-size:  72px;
  animation:  bounce-in .5s cubic-bezier(.36,.07,.19,.97);
}
@keyframes bounce-in {
  0%   { transform:scale(.4); opacity:0; }
  60%  { transform:scale(1.2); }
  100% { transform:scale(1); opacity:1; }
}
.success-wrap h2  { font-size:24px; font-weight:700; }
.success-wrap p   { font-size:15px; color:var(--tg-hint); }
.success-sub      { font-size:14px !important; }
#success-order-id { font-size:14px; color:var(--tg-link) !important; }
#payment-order-id { font-size:14px; color:var(--tg-link) !important; }

/* ─── Pay methods ─── */
.pay-methods {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  width:          100%;
  max-width:      320px;
  margin:         0 auto;
}
.pay-logos-row {
  display:         flex;
  gap:             14px;
  justify-content: center;
}
.pay-logo-btn {
  flex:            1;
  border:          none;
  background:      none;
  padding:         0;
  cursor:          pointer;
  border-radius:   16px;
  overflow:        hidden;
  transition:      transform .12s, box-shadow .12s;
  box-shadow:      0 2px 10px rgba(0,0,0,.12);
}
.pay-logo-btn img {
  width:        100%;
  aspect-ratio: 3/2;
  object-fit:   cover;
  display:      block;
}
.pay-logo-btn:active { transform: scale(.95); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.pay-btn {
  display:         flex;
  align-items:     center;
  gap:             14px;
  padding:         14px 18px;
  border-radius:   14px;
  border:          none;
  cursor:          pointer;
  transition:      transform .12s, opacity .12s;
  text-align:      left;
  width:           100%;
  border-left:     5px solid transparent;
}
.pay-btn:active { transform: scale(.97); opacity:.85; }
.pay-logo  { font-size:28px; flex-shrink:0; }
.pay-name  { font-weight:700; font-size:15px; color:var(--tg-text); display:block; line-height:1.2; }
.pay-desc  { font-size:12px; color:var(--tg-hint); display:block; margin-top:2px; }
.pay-cash  { background:rgba(255,180,0,.13); border-left-color:#ffb400; }

/* ─── Toast ─── */
.toast {
  position:      fixed;
  bottom:        calc(env(safe-area-inset-bottom,0px) + 80px);
  left:          50%;
  transform:     translateX(-50%);
  background:    rgba(30,40,55,.97);
  color:         #fff;
  padding:       11px 22px;
  border-radius: 24px;
  font-size:     14px;
  font-weight:   500;
  z-index:       500;
  white-space:   nowrap;
  backdrop-filter:blur(12px);
  box-shadow:    0 4px 24px rgba(0,0,0,.45);
  animation:     toast-in .2s ease;
  max-width:     calc(100vw - 32px);
  overflow:      hidden;
  text-overflow: ellipsis;
}
@keyframes toast-in {
  from { opacity:0; transform:translateX(-50%) translateY(12px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ─── Size selector ─── */
.size-selector {
  margin: 12px 0 4px;
}
.size-selector-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-hint);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.size-required-hint {
  color: var(--red);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.size-chip {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border-md);
  background: var(--tg-surface);
  color: var(--tg-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.size-chip:active { transform: scale(.96); }
.size-chip.selected {
  border-color: var(--tg-btn);
  background: var(--tg-btn);
  color: var(--tg-btn-text);
}
.size-chip.out-of-stock {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.size-chip.out-of-stock:active { transform: none; }

/* ─── Cart item size label ─── */
.cart-item-size {
  font-size: 12px;
  color: var(--tg-hint);
  margin-top: 2px;
}

/* ─── Stock badge ─── */
.stock-low {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #ff9f43;
  margin-top: 4px;
}

/* ─── Promo button ─── */
#btn-apply-promo {
  padding: 10px 16px;
  background: var(--tg-btn);
  color: var(--tg-btn-text);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
#btn-apply-promo:active { opacity: .8; }
#promo-result.ok    { color: #2ed573; }
#promo-result.error { color: #ff4757; }

/* ─── My orders screen ─── */
.order-card {
  background: var(--tg-surface);
  border-radius: 14px;
  margin: 12px 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-md);
}
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.order-card-id   { font-weight: 700; font-size: 14px; color: var(--tg-text); }
.order-card-date { font-size: 12px; color: var(--tg-hint); }
.order-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.order-status-new        { background: rgba(0,212,255,.15); color: #00d4ff; }
.order-status-processing { background: rgba(255,159,67,.15); color: #ff9f43; }
.order-status-shipped    { background: rgba(168,85,247,.15); color: #a855f7; }
.order-status-completed  { background: rgba(46,213,115,.15); color: #2ed573; }
.order-status-cancelled  { background: rgba(255,71,87,.15);  color: #ff4757; }
.order-items-list { font-size: 13px; color: var(--tg-hint); margin: 8px 0; line-height: 1.6; }
.order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-md);
  padding-top: 10px;
  margin-top: 8px;
}
.order-total { font-weight: 700; font-size: 15px; color: var(--tg-text); }
.btn-cancel-order {
  padding: 6px 14px;
  border: 1.5px solid #ff4757;
  background: rgba(255,71,87,.08);
  color: #ff4757;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-cancel-order:active { opacity: .7; }
.btn-reorder {
  padding: 6px 14px;
  border: 1.5px solid var(--tg-btn);
  background: rgba(82,136,193,.12);
  color: var(--tg-btn);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-reorder:active { opacity: .7; }
.btn-pay-order {
  padding: 6px 14px;
  border: 1.5px solid #2ed573;
  background: rgba(46,213,115,.13);
  color: #2ed573;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-pay-order:active { opacity: .7; }
.order-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.order-items-detail { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.order-item-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
.order-item-name  { flex: 1; color: var(--tg-text); }
.order-item-size  { color: var(--tg-hint); font-size: 12px; }
.order-item-qty   { color: var(--tg-hint); white-space: nowrap; }
.order-item-price { color: var(--tg-text); font-weight: 600; white-space: nowrap; }

/* ─── Heart / Favorite button on card ─── */
.heart-btn {
  position:        absolute;
  top:             7px;
  right:           7px;
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:          none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  z-index:         3;
  transition:      transform .14s, background .15s;
}
.heart-btn:active    { transform: scale(.84); }
.heart-btn svg       { width:16px; height:16px; stroke:#fff; fill:none; transition:fill .15s,stroke .15s; }
.heart-btn.active    { background: rgba(255,50,70,.9); }
.heart-btn.active svg{ fill:#fff; stroke:#fff; }

/* ─── Sort / Filter bar ─── */
.sort-filter-bar {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     0 14px 10px;
}
.sort-chips-wrap {
  flex:             1;
  display:          flex;
  gap:              6px;
  overflow-x:       auto;
  scrollbar-width:  none;
  -webkit-overflow-scrolling: touch;
}
.sort-chips-wrap::-webkit-scrollbar { display:none; }
.sort-chip {
  flex-shrink:  0;
  background:   var(--tg-surface);
  border:       1.5px solid var(--border);
  color:        var(--tg-hint);
  font-size:    12px;
  font-weight:  500;
  padding:      5px 12px;
  border-radius:20px;
  cursor:       pointer;
  white-space:  nowrap;
  transition:   background .15s, color .15s, border-color .15s;
}
.sort-chip.active {
  background:   var(--tg-btn);
  border-color: var(--tg-btn);
  color:        var(--tg-btn-text);
}
.filter-btn {
  flex-shrink:  0;
  width:        36px;
  height:       36px;
  border-radius:10px;
  background:   var(--tg-surface);
  border:       1.5px solid var(--border);
  color:        var(--tg-hint);
  display:      flex;
  align-items:  center;
  justify-content: center;
  cursor:       pointer;
  position:     relative;
}
.filter-btn.active { border-color: var(--tg-btn); color: var(--tg-btn); }
.filter-badge {
  position:     absolute;
  top:          -5px;
  right:        -5px;
  min-width:    16px;
  height:       16px;
  padding:      0 4px;
  background:   var(--red);
  color:        #fff;
  font-size:    10px;
  font-weight:  700;
  border-radius:8px;
  display:      flex;
  align-items:  center;
  justify-content: center;
}

/* ─── Filter panel (bottom sheet) ─── */
.filter-backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.55);
  z-index:    200;
}
.filter-panel {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  background: var(--tg-surface);
  border-radius: 18px 18px 0 0;
  z-index:    201;
  transform:  translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  max-height: 80vh;
  display:    flex;
  flex-direction: column;
}
.filter-panel.open { transform: translateY(0); }
.filter-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px 12px;
  border-bottom:   1px solid var(--border-md);
}
.filter-panel-title  { font-weight:700; font-size:16px; }
.filter-panel-close  { background:none; border:none; color:var(--tg-hint); font-size:18px; cursor:pointer; padding:4px; }
.filter-panel-body   { overflow-y:auto; padding:16px 20px; flex:1; }
.filter-panel-footer {
  display:   flex;
  gap:       10px;
  padding:   12px 20px calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border-md);
}
.filter-panel-footer .btn-primary,.filter-panel-footer .btn-secondary { flex:1; }
.filter-section { margin-bottom:20px; }
.filter-section-title { font-size:13px; font-weight:600; color:var(--tg-hint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
.filter-price-row  { display:flex; align-items:center; gap:10px; }
.filter-price-input {
  flex:1; background:var(--tg-bg); border:1.5px solid var(--border-md); border-radius:10px;
  padding:8px 12px; color:var(--tg-text); font-size:14px;
}
.filter-price-sep  { color:var(--tg-hint); }
.filter-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); }
.filter-toggle-row:last-child { border-bottom:none; }
.filter-toggle-label { font-size:14px; }
.filter-toggle-check { width:20px; height:20px; accent-color:var(--tg-btn); cursor:pointer; }
.filter-size-chips { display:flex; flex-wrap:wrap; gap:6px; }
.filter-size-chip {
  padding:5px 13px; border-radius:20px; border:1.5px solid var(--border);
  background:var(--tg-bg); color:var(--tg-hint); font-size:13px; cursor:pointer;
}
.filter-size-chip.active { border-color:var(--tg-btn); color:var(--tg-btn); background:rgba(82,136,193,.12); }

/* ─── Bottom navigation ─── */
.bottom-nav {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  height:     calc(56px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  background: var(--tg-surface);
  border-top: 1px solid var(--border-md);
  display:    flex;
  z-index:    90;
}
.bottom-nav.hidden { display: none; }
.nav-tab {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  color:           var(--tg-hint);
  font-size:       11px;
  font-weight:     500;
  background:      none;
  border:          none;
  cursor:          pointer;
  transition:      color .15s;
  padding-top:     6px;
}
.nav-tab.active       { color: var(--tg-btn); }
.nav-tab svg          { transition: stroke .15s; }
.nav-tab.active svg   { stroke: var(--tg-btn); }
.nav-cart-wrap        { position: relative; display: inline-flex; }
.nav-cart-badge {
  position:     absolute;
  top:          -4px;
  right:        -8px;
  min-width:    17px;
  height:       17px;
  padding:      0 4px;
  background:   var(--red);
  color:        #fff;
  font-size:    10px;
  font-weight:  700;
  border-radius:9px;
  display:      flex;
  align-items:  center;
  justify-content:center;
  line-height:  1;
  animation:    pop .2s cubic-bezier(.36,.07,.19,.97);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE / DESKTOP LAYOUT
═══════════════════════════════════════════════════ */

/* ── Tablet ≥640px: 3 columns, center bottom nav ── */
@media (min-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0 18px;
  }
  .bottom-nav {
    max-width: 520px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 14px 14px 0 0;
    border-left: 1px solid var(--border-md);
    border-right: 1px solid var(--border-md);
  }
  .filter-panel {
    max-width: 480px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
  }
  .filter-panel.open { transform: translateX(-50%) translateY(0); }
}

/* ── Desktop ≥1024px ───────────────────────────── */
@media (min-width: 1024px) {
  /* Thin scrollbar */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }

  /* Center all screens with max-width */
  .screen {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Wider padding */
  .search-wrap      { padding: 24px 28px 14px; }
  .categories-wrap  { padding: 0 28px 14px; }
  .sort-filter-bar  { padding: 0 28px 12px; }
  .support-banner   { margin: 20px 28px 0; }

  /* 4-column catalog grid */
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 28px;
  }

  /* Product detail: gallery left, info right */
  .product-top-card {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    align-items: start;
  }
  .product-gallery  {
    grid-column: 1;
    position: sticky;
    top: calc(var(--header-h) + 48px);
    height: max-content;
  }
  .product-body     { grid-column: 2; padding: 32px 36px 28px 28px; }
  #reviews-section  { max-width: 760px; margin: 0 auto; padding: 28px 0; }

  /* Cart: narrow centered */
  #screen-cart      { max-width: 780px; }

  /* Checkout: centered narrow form */
  .checkout-form-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 32px 56px;
  }

  /* Orders list: centered */
  #orders-list { max-width: 720px; margin: 0 auto; }

  /* Nav becomes sticky top bar on desktop */
  .bottom-nav {
    position: sticky;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: auto;
    max-width: none;
    transform: none;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--border-md);
    height: 48px;
    padding-bottom: 0;
    z-index: 89;
  }
  .nav-tab { padding-top: 0; font-size: 13px; flex-direction: row; gap: 7px; }
  .nav-tab svg { width: 18px; height: 18px; }

  body { padding-bottom: 24px; }

  /* Support FAB: clear of nav */
  .support-fab { bottom: 24px; right: 24px; }
}

/* ── Desktop light theme ──────────────────────── */
@media (min-width: 1024px) {
  html.theme-light .bottom-nav {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.1);
  }
  html.theme-light .bottom-nav.hidden { display: none; }
  html.theme-light .nav-tab           { color: #64748b; }
  html.theme-light .nav-tab.active    { color: #0d0f1e; }
  html.theme-light .nav-tab.active svg { stroke: #0d0f1e; }

  html.theme-light .product-top-card {
    background:    #ffffff;
    border-radius: 20px;
    box-shadow:    0 4px 32px rgba(0,0,0,.08), 0 1px 6px rgba(0,0,0,.04);
    overflow:      clip;
    margin:        20px 0;
  }
  html.theme-light .product-gallery { border-radius: 20px 0 0 20px; }
  html.theme-light .product-gallery .gallery-slide img { aspect-ratio: 1; object-fit: contain; background: #f8f9fa; }

  html.theme-light .size-chip {
    border-radius: 8px;
    border-color:  rgba(0,0,0,.14);
    background:    #f8f9fa;
  }
  html.theme-light .size-chip.selected {
    background:   #0d0f1e;
    border-color: #0d0f1e;
    color:        #ffffff;
  }
  html.theme-light .qty-control { border-color: rgba(0,0,0,.14); background: #f8f9fa; }
  html.theme-light .feature-icon { background: rgba(13,15,30,.06); color: #0d0f1e; }
  html.theme-light .product-feature { background: #f8f9fa; border-color: rgba(0,0,0,.07); }
  html.theme-light .product-card { box-shadow: 0 2px 14px rgba(0,0,0,.07); }
  html.theme-light .discount-badge { background: rgba(220,38,38,.1); }
}

/* ── Hover effects (mouse devices only) ─────────── */
@media (hover: hover) and (min-width: 640px) {
  .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.44);
  }
  .product-card:active {
    transform: scale(.97);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
  }
  .cat-chip:hover:not(.active) {
    border-color: var(--tg-btn);
    color: var(--tg-text);
  }
  .sort-chip:hover:not(.active) {
    border-color: var(--tg-btn);
    color: var(--tg-text);
  }
  .btn-primary:hover:not(:disabled) { opacity: .88; }
  .btn-secondary:hover               { opacity: .8; }
  .icon-btn:hover                    { opacity: .75; background: var(--border); }
  .nav-tab:hover:not(.active)        { color: var(--tg-text); }
}

/* ── Wide desktop ≥1440px: 5-column grid ────────── */
@media (min-width: 1440px) {
  .screen { max-width: 1400px; }
  .products-grid { grid-template-columns: repeat(5, 1fr); }
}