/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
  --primary:       #FF5C00;
  --primary-dark:  #e04d00;
  --dark:          #111111;
  --dark2:         #1c1c1c;
  --bg:            #f5f5f5;
  --card:          #ffffff;
  --text:          #1a1a1a;
  --text-light:    #666666;
  --text-muted:    #999999;
  --border:        #e8e8e8;
  --shadow-sm:     0 2px 8px rgba(0,0,0,.06);
  --shadow-md:     0 8px 24px rgba(0,0,0,.10);
  --shadow-lg:     0 16px 48px rgba(0,0,0,.14);
  --radius:        14px;
  --radius-sm:     8px;
  --wa-green:      #25D366;
  --wa-dark:       #128C7E;
  --tg-blue:       #0088cc;
  --tg-dark:       #0066aa;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ─── Container ──────────────────────────────────────────────────────────── */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ─── Announcement Bar ───────────────────────────────────────────────────── */
.announcement-bar {
  background: #c0562a;
  color: #fff;
  overflow: hidden;
  height: 42px;
  display: flex;
  align-items: center;
}
.announcement-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ann-scroll 28s linear infinite;
  will-change: transform;
}
.announcement-bar:hover .announcement-track {
  animation-play-state: paused;
}
.ann-item {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0 32px;
}
.ann-sep {
  color: var(--primary);
  font-size: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
@keyframes ann-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  user-select: none;
}

.logo-img {
  height: 34px;
  width: auto;
  display: block;
  object-fit: contain;
}

.logo-img--footer {
  height: 52px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0px;
  /* Logical property (not margin-right) — pushes the lang/login/cart
     cluster away from nav-links on its trailing side (left in RTL, right
     in LTR) instead of eating space on the logo side, which is what a
     plain margin-right:auto did here (RTL's "right" is nav-links' side
     facing the logo, not the button cluster). */
  margin-inline-end: auto;
  /* Room between the logo and "All Products" (the dropdown arrows were
     removed 2026-10-05, which left the menu bunched against the logo);
     shrinks on narrower screens so the menu still fits. */
  margin-inline-start: clamp(12px, 3vw, 44px);
}

/* آیتم اصلی nav */
.nav-link {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 7px 7px;
  font-size: 14.5px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--text-light);
  transition: background .15s, color .15s;
  white-space: nowrap;
  cursor: pointer;
}
.nav-link:hover { color: var(--primary); background: rgba(26,26,26,.06); }
.nav-link.active { color: var(--primary); }

/* فلش dropdown — hidden: the top menu shows titles only (dropdowns still
   open on hover). Kept in the markup so it can come back by removing this. */
.nav-arrow { display: none; }

/* گروه nav */
.nav-group { position: relative; }

/* dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 300;
  padding: 6px 0;
  /* به جای display:none از opacity/visibility استفاده می‌کنیم */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  transition-delay: .12s;   /* تأخیر قبل از بستن — زمان کافی برای رفتن به submenu */
}
[dir="ltr"] .nav-dropdown { right: auto; left: 0; }

.nav-group:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;     /* باز شدن فوری */
}

/* یه پل شفاف بین nav item و dropdown که gap رو می‌پوشونه */
.nav-group::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 10px;
  background: transparent;
  z-index: 301;
}

/* آیتم درون dropdown */
.nav-drop-item {
  display: block;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-light);
  transition: background .12s, color .12s;
  white-space: nowrap;
  cursor: pointer;
}
.nav-drop-item:hover  { color: var(--primary); background: rgba(26,26,26,.06); }
.nav-drop-item.active { color: var(--primary); font-weight: 700; }

/* ─── Mega Menu (همه محصولات) ──────────────────────────────────────────── */
.nav-mega {
  display: flex;
  flex-direction: row;
  gap: 0;
  min-width: 420px;
  padding: 18px 0 14px;
}

.mega-col {
  flex: 1;
  padding: 0 20px;
  border-inline-start: 1px solid var(--border);
}
.mega-col:first-child { border-inline-start: none; }

.mega-cat-title {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #111;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--primary);
  text-decoration: none;
  cursor: pointer;
  transition: color .12s;
  white-space: nowrap;
}
.mega-cat-title:hover { color: var(--primary); }
.mega-cat-title.active { color: var(--primary); }

.mega-sub-item {
  display: block;
  padding: 5px 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-light);
  text-decoration: none;
  cursor: pointer;
  transition: color .12s;
  white-space: nowrap;
}
.mega-sub-item:hover { color: var(--primary); }
.mega-sub-item.active { color: var(--primary); font-weight: 600; }

/* Category group + label inside nav dropdown */
.nav-drop-group { padding-bottom: 4px; }
.nav-drop-group + .nav-drop-group { border-top: 1px solid var(--border); padding-top: 4px; }

.nav-drop-cat-label {
  display: block;
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 800;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: .09em;
  pointer-events: none;
  user-select: none;
}

.nav-drop-group .nav-drop-item { padding-inline-start: 20px; }

.order-btn {
  display: inline-flex;
  align-items: center;
  background: var(--primary);
  color: #fff;
  padding: 9px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.order-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }

.menu-toggle {
  display: none;
  font-size: 22px;
  color: var(--dark);
  margin-right: auto;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 10px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: color .2s;
}
.mobile-menu a:hover { color: var(--primary); }
.mobile-order-btn {
  display: inline-block;
  background: var(--primary) !important;
  color: #fff !important;
  padding: 11px 20px !important;
  border-radius: 30px;
  text-align: center;
  font-weight: 700 !important;
  margin-top: 8px;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--dark);
  min-height: 280px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 110% 50%, rgba(26,26,26,.22) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at -10% 80%, rgba(26,26,26,.12) 0%, transparent 60%);
  pointer-events: none;
}
/* geometric accents */
.hero::after {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 32px 0;
  text-align: center;
  margin: 0 auto;
}
.hero-title {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 10px;
}
.hero-highlight {
  color: var(--primary);
  display: inline-block;
}
.hero-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin-bottom: 8px;
  font-weight: 400;
  max-width: 480px;
}
.hero-link-note {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 18px;
  font-weight: 400;
  max-width: 400px;
  line-height: 1.7;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── Hero — two-column split (browse products / submit a product link) ─── */
.hero-split {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 40px;
  padding: 40px 0;
}
.hero-col {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-col .hero-subtitle,
.hero-col .hero-link-note { margin-inline: auto; }
/* Column text lengths differ per language (the link-request note often
   wraps to 2 lines where the main subtitle stays on 1), which used to
   throw the two buttons out of horizontal alignment since the columns
   were just vertically centered as a whole. Anchoring each button to the
   bottom of its (now equal-height, align-items:stretch) column keeps
   both buttons level regardless of how many lines the text above takes. */
.hero-col > a { margin-top: auto; }
.hero-col-title {
  font-size: clamp(21px, 3vw, 32px);
  font-weight: 900;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 10px;
  max-width: 400px;
}
.hero-divider {
  align-self: stretch;
  width: 1px;
  background: rgba(255,255,255,.14);
  flex: 0 0 auto;
}
@media (max-width: 860px) {
  .hero-split { flex-direction: column; gap: 28px; padding: 32px 0; }
  .hero-divider { width: 60%; height: 1px; }
}

.btn-hero-primary,
.btn-hero-secondary {
  /* Shared min-width so the two hero buttons read as a matched pair —
     without it each just shrink-wraps its own text, and "Explore
     Collection" vs "Submit a Product Link" (or their fa/tr equivalents)
     are different enough lengths that they visibly don't match. min- (not
     fixed) width so a longer translation can still grow instead of wrapping. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  color: #fff;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s, transform .15s;
}
.btn-hero-primary { background: var(--primary); }
.btn-hero-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }

.btn-hero-secondary {
  background: rgba(26,26,26,.14);
  /* inset shadow instead of a real border — same outlined look without
     adding to the box's own size, so this stays pixel-identical in
     height to .btn-hero-primary (which has no border) */
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
.btn-hero-secondary:hover { background: rgba(26,26,26,.28); transform: translateY(-2px); }

/* ─── Features Bar ───────────────────────────────────────────────────────── */
.features-bar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.features-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 18px 0;
  flex-wrap: wrap;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-light);
}
.feature-icon { font-size: 18px; }

/* ─── Section Header ─────────────────────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 36px;
}
.section-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.section-subtitle {
  font-size: 16px;
  color: var(--text-light);
}

/* ─── Shop Section ───────────────────────────────────────────────────────── */
.shop-section { padding: 40px 0 72px; background: var(--bg); }

.shop-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* ─── Sidebar Nav ────────────────────────────────────────────────────────── */
.sidebar-nav {
  width: 210px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

.sidebar-menu { padding: 6px 0; }

/* آیتم اصلی */
.sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
  gap: 6px;
}
.sidebar-item:hover { background: var(--bg); color: var(--primary); }
.sidebar-item.active { color: var(--primary); background: rgba(26,26,26,.06); }

/* فلش */
.sidebar-chevron {
  font-size: 18px;
  line-height: 1;
  opacity: .4;
  transition: transform .2s, opacity .2s;
  flex-shrink: 0;
}

/* گروه با زیرمنو */
.sidebar-group { position: relative; }

.sidebar-group.open > .sidebar-item .sidebar-chevron {
  transform: rotate(-90deg);
  opacity: 1;
  color: var(--primary);
}

/* Dropdown — accordion زیر آیتم باز می‌شه */
.sidebar-dropdown {
  display: none;
  padding: 4px 0 8px;
  margin: 0 12px 4px;
  border-right: 2px solid rgba(26,26,26,.2);
}
[dir="ltr"] .sidebar-dropdown { border-right: none; border-left: 2px solid rgba(26,26,26,.2); }

.sidebar-group.open .sidebar-dropdown { display: block; }

/* آیتم زیرمنو */
.sidebar-sub-item {
  display: block;
  padding: 7px 18px 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
  margin: 1px 4px;
  position: relative;
}
[dir="ltr"] .sidebar-sub-item { padding: 7px 12px 7px 18px; }
.sidebar-sub-item:hover  { color: var(--primary); background: rgba(26,26,26,.07); }
.sidebar-sub-item.active { color: var(--primary); font-weight: 700; background: rgba(26,26,26,.1); }


@keyframes fadeIn {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}
[dir="ltr"] @keyframes fadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Products Area ──────────────────────────────────────────────────────── */
.products-area { flex: 1; min-width: 0; }

/* ─── Filter / Sort Bar ─────────────────────────────────────────────────── */
#filter-bar:empty { display: none; }

.filter-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
}

.filter-search-wrap {
  position: relative;
  flex: 1;
  min-width: 140px;
}
.filter-search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
  color: #b0b7c3;
}
[dir="rtl"] .filter-search-icon { right: 10px; }
[dir="ltr"] .filter-search-icon { left: 10px; }
.filter-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  font-size: 13px;
  color: #111;
  font-family: inherit;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
[dir="rtl"] .filter-search-input { padding: 0 30px 0 10px; text-align: right; }
[dir="ltr"] .filter-search-input { padding: 0 10px 0 30px; text-align: left; }
.filter-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,26,26,.12);
  background: #fff;
}
.filter-search-input::placeholder { color: #b0b7c3; }

.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #ddd;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.filter-toggle-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-toggle-btn.has-active { border-color: var(--primary); color: var(--primary); background: var(--soft); }

.filter-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 0 4px;
}

.filter-label {
  font-size: 12px;
  font-weight: 700;
  color: #888;
  white-space: nowrap;
}

.filter-sort-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.sort-chip {
  padding: 5px 11px;
  border-radius: 20px;
  border: 1.5px solid #ddd;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #444;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.sort-chip:hover { border-color: #111; color: #111; }
.sort-chip.active { background: #111; border-color: #111; color: #fff; }

/* ─── Filter Drawer ──────────────────────────────────────────────────────── */
.filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 450;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.filter-overlay.open { opacity: 1; visibility: visible; }

.filter-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 320px;
  max-width: 88vw;
  background: #fff;
  z-index: 500;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 32px rgba(0,0,0,.15);
  transform: translateX(-110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.filter-drawer.open { transform: translateX(0); }

[dir="rtl"] .filter-drawer {
  left: auto;
  right: 0;
  box-shadow: -4px 0 32px rgba(0,0,0,.15);
  transform: translateX(110%);
}
[dir="rtl"] .filter-drawer.open { transform: translateX(0); }

.filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.filter-drawer-title {
  font-size: 16px;
  font-weight: 800;
  color: #111;
}
.filter-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f5f5f5;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.filter-drawer-close:hover { background: #eee; color: #111; }

.filter-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Drawer sections */
.fd-section {
  padding: 18px 20px;
  border-bottom: 1px solid #f5f5f5;
}
.fd-section:last-child { border-bottom: none; }

.fd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 14px;
  cursor: pointer;
  font-family: inherit;
}
.fd-section.collapsed .fd-section-header { margin-bottom: 0; }

.fd-section-title {
  font-size: 11px;
  font-weight: 800;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.fd-section-arrow {
  opacity: .4;
  flex-shrink: 0;
  transition: transform .2s, opacity .2s;
}
.fd-section.collapsed .fd-section-arrow { transform: rotate(-90deg); }
.fd-section-header:hover .fd-section-arrow { opacity: 1; color: var(--primary); }

.fd-section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .2s ease;
}
.fd-section-body > * { overflow: hidden; min-height: 0; }
.fd-section.collapsed .fd-section-body { grid-template-rows: 0fr; }

/* Subcategory / brand — searchable, scrollable checkbox list (can have many
   more options than color/size, so a flat chip grid would blow up the drawer) */
.fd-search-list { display: flex; flex-direction: column; gap: 8px; }
.fd-list-search-input {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid #eee;
  font-size: 13px;
  font-family: inherit;
  background: #fafafa;
  color: #333;
}
.fd-list-search-input:focus { outline: none; border-color: var(--primary); background: #fff; }
.fd-list-search-input::placeholder { color: #aaa; }

.fd-list-scroll {
  max-height: 116px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fd-list-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.fd-list-row:hover { background: #f8f8f8; }
.fd-list-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Availability toggle switch */
.fd-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  user-select: none;
}
.fd-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
}
.fd-switch input[type="checkbox"] { display: none; }
.fd-switch-knob {
  position: absolute;
  inset: 0;
  background: #ddd;
  border-radius: 24px;
  transition: background .18s;
}
.fd-switch-knob::before {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: inset-inline-start .18s;
}
.fd-switch.checked .fd-switch-knob { background: var(--primary); }
.fd-switch.checked .fd-switch-knob::before { inset-inline-start: 19px; }

/* Color swatches — plain circles, no frame/name (hover for the tooltip) */
.fd-colors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.fd-color-cell {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
}
.fd-color-cell input[type="checkbox"] { display: none; }

.fd-color-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.12);
  flex-shrink: 0;
  transition: box-shadow .15s, transform .15s;
}
.fd-color-cell:hover .fd-color-dot { transform: scale(1.08); }
.fd-color-cell.checked .fd-color-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); }

/* Drawer footer */
.filter-drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.fd-clear-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px solid var(--primary);
  background: #fff;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fd-clear-btn:hover { background: var(--primary); color: #fff; }
.fd-close-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.fd-close-btn:hover { background: #333; }
.fd-close-full { flex: unset; width: 100%; }

@media (max-width: 600px) {
  .filter-bar-inner { gap: 6px 10px; padding: 8px 10px; }
  .filter-sort-group { margin-inline-start: 0; }
  .filter-drawer { width: 290px; }
}

.no-products { display: none; }

/* ─── Unified Empty View ─────────────────────────────────────────────────── */
.grid-empty-wrap {
  grid-column: 1 / -1;
  padding: 40px 0;
}

.empty-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
}

.empty-view-svg {
  width: 64px;
  height: 64px;
  color: #ccc;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.empty-view-title {
  font-size: 15px;
  font-weight: 700;
  color: #555;
  margin: 0;
}

.empty-view-hint {
  font-size: 13px;
  color: #aaa;
  font-weight: 400;
  margin: 0;
  max-width: 260px;
}

.empty-view-btn {
  margin-top: 8px;
  padding: 8px 20px;
  border-radius: 20px;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.empty-view-btn:hover { background: var(--primary); color: #fff; }

/* ─── Subcategory Sections ───────────────────────────────────────────────── */
.subcat-section {
  grid-column: 1 / -1;
  margin-bottom: 40px;
}
.subcat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}
.subcat-header-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.subcat-header-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: var(--soft);
  border: 1px solid #ffd4b8;
  border-radius: 20px;
  padding: 2px 9px;
}
.subcat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.subcat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 20px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1.5px dashed var(--border);
  color: var(--text-muted);
}
.subcat-empty-icon { font-size: 32px; opacity: .5; }
.subcat-empty-text { font-size: 13px; font-weight: 500; }

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

/* ─── Products Grid ──────────────────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
#pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 0 8px;
  flex-wrap: wrap;
}
#pagination-bar .pg-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
}
#pagination-bar .pg-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
#pagination-bar .pg-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
#pagination-bar .pg-btn:disabled {
  opacity: .35;
  cursor: default;
}
#pagination-bar .pg-dots {
  color: var(--text-muted);
  font-size: 14px;
  padding: 0 2px;
  line-height: 36px;
}
#pagination-bar .pg-info {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 8px;
}

/* ─── Product Card ───────────────────────────────────────────────────────── */
.product-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.product-card.product-sold-out {
  filter: grayscale(1);
  opacity: .5;
}
.product-card.product-sold-out:hover {
  filter: grayscale(.7);
  opacity: .75;
}

.product-real-img {
  width: 100%; height: 100%; object-fit: contain;
  position: absolute; inset: 0;
}
.product-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.img-placeholder {
  width: 48px;
  height: 60px;
  opacity: .18;
  pointer-events: none;
  user-select: none;
}

.product-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.product-camera-badge {
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.product-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.card-badges-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.product-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  white-space: nowrap;
  flex-shrink: 0;
}
.product-brand-badge .brand-label {
  font-weight: 600;
  color: #9ca3af;
}
.product-brand-badge .brand-name {
  font-weight: 600;
  color: #374151;
}
.category-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.gender-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.gender-female { background: #fce7f3; color: #be185d; }
.gender-male   { background: #dbeafe; color: #1d4ed8; }
.gender-kids   { background: #fef3c7; color: #b45309; }
.cat-clothing    { background: #ede9fe; color: #7c3aed; }
.cat-shoes       { background: #dbeafe; color: #1d4ed8; }
.cat-accessories { background: #d1fae5; color: #065f46; }
.cat-equipment   { background: #fef3c7; color: #92400e; }

.product-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.product-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.6em;
}

/* Sizes row — capped to one line (matching .card-meta-row's own 24px) so a
   product with enough sizes to wrap doesn't grow taller than its siblings
   and push its price row out of alignment with the rest of that grid row;
   overflow chips just get clipped rather than wrapping to a 2nd line. */
.sizes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 24px;
  overflow: hidden;
}
.size-chip {
  display: inline-block;
  /* Same width for every size up to "2XL"/"XXL" (only longer labels like
     "28/32" grow), so the row doesn't look uneven. */
  min-width: 36px;
  box-sizing: border-box;
  text-align: center;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg);
  transition: border-color .15s, color .15s;
}
.product-card:hover .size-chip {
  border-color: var(--primary);
  color: var(--primary);
}

/* Card meta rows (sizes + colors) */
.card-meta-rows {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}
.card-meta-row--ph { min-height: 30px; }
.card-meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 34px;
}
.card-colors {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.14);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform .15s;
  position: relative;
  overflow: hidden;
}
.product-card:hover .card-color-dot { transform: scale(1.15); }
.card-color-dot.unavailable { opacity: .55; }
.card-color-dot.unavailable::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(220,38,38,.9) calc(50% - 1px),
    rgba(220,38,38,.9) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
.card-color-more {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1;
}

/* Buy button */
.product-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  direction: ltr;
  text-align: right;
}
[dir="ltr"] .product-price { text-align: left; }
.price-has-discount { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.price-original { text-decoration: line-through; color: #9ca3af; font-weight: 500; font-size: .85em; }
.price-discounted { color: #ef4444; }
.product-delivery {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.product-actions { margin-top: auto; }
.buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  transition: background .2s, transform .15s;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.buy-btn:hover { transform: translateY(-1px); }
.cart-add-btn {
  background: var(--primary);
  color: #fff;
}
.cart-add-btn:hover { background: var(--primary-dark); }
.cart-add-btn:disabled {
  background: var(--border);
  color: var(--text-light);
  cursor: not-allowed;
}
.cart-add-btn:disabled:hover { transform: none; background: var(--border); }

/* ─── Contact Section ────────────────────────────────────────────────────── */
.contact-section {
  background: var(--dark);
  padding: 80px 0;
}
.contact-wrapper {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.contact-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 52px 44px;
}
.contact-icon-big { font-size: 52px; margin-bottom: 16px; }
.contact-card h2 {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.contact-card p {
  color: rgba(255,255,255,.6);
  font-size: 15px;
  margin-bottom: 28px;
  line-height: 1.7;
}
.phone-display { margin-bottom: 28px; }
.phone-link {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  transition: color .2s;
  display: inline-block;
}
.phone-link:hover { color: var(--primary); }

.contact-email-row {
  margin-bottom: 18px;
}
.contact-email-link {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color .2s;
}
.contact-email-link:hover { color: var(--primary); }

.channel-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 700;
  transition: transform .15s, opacity .2s;
  cursor: pointer;
}
.channel-btn:hover { transform: translateY(-2px); opacity: .9; }
.channel-icon { width: 20px; height: 20px; flex-shrink: 0; }
.whatsapp-btn { background: var(--wa-green); color: #fff; }
.telegram-btn { background: var(--tg-blue); color: #fff; }
.instagram-btn { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.tiktok-btn { background: #010101; color: #fff; }

.working-hours {
  font-size: 13px;
  color: rgba(255,255,255,.4) !important;
  margin-bottom: 0 !important;
}

/* ─── Return Policy Section ──────────────────────────────────────────────── */
.policy-section {
  background: #f9f9f9;
  padding: 72px 0;
  border-top: 1px solid #ebebeb;
}

.policy-header {
  text-align: center;
  margin-bottom: 44px;
}

.policy-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 8px;
}

.policy-subtitle {
  font-size: 15px;
  color: #888;
}

.policy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.policy-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  border: 1.5px solid #ebebeb;
  text-align: center;
  transition: box-shadow .2s, border-color .2s;
}

.policy-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  border-color: #FF6200;
}

.policy-card-icon {
  font-size: 36px;
  margin-bottom: 16px;
  line-height: 1;
}

.policy-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 10px;
}

.policy-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.75;
}

@media (max-width: 700px) {
  .policy-cards { grid-template-columns: 1fr; }
  .policy-section { padding: 48px 0; }
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  background: #0a0a0a;
  padding: 40px 0 28px;
}
.footer-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.footer-logo {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}
.footer-tagline {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-top: 4px;
  font-weight: 400;
}
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  transition: color .2s;
}
.footer-links a:hover { color: var(--primary); }
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 160px;
}
.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 4px;
}
.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  transition: color .2s;
  text-decoration: none;
}
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 22px;
  text-align: center;
  color: rgba(255,255,255,.3);
  font-size: 13px;
}

/* ─── Legal Modal ─────────────────────────────────────────────────────────── */
.legal-modal-box {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 36px 36px 32px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.legal-modal-box h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border);
}
.legal-section {
  margin-bottom: 20px;
}
.legal-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 6px;
}
.legal-section p {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}
.legal-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
}
.legal-info-table td {
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.legal-info-table td:first-child {
  color: #888;
  width: 40%;
}
.legal-info-table td:last-child {
  font-weight: 600;
  color: var(--text);
}

/* ─── Floating Buttons ───────────────────────────────────────────────────── */
.scroll-top-btn {
  position: fixed;
  left: 20px;
  bottom: 28px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  transform: translateY(12px);
}
.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.scroll-top-btn svg { width: 20px; height: 20px; }

/* ─── Language Switcher ──────────────────────────────────────────────────── */
/* ─── Globe Language Switcher ───────────────────────────────────────────── */
.site-lang-wrap {
  position: relative;
  flex-shrink: 0;
}
.site-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
}
.site-lang-globe {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  color: #fff;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 6px rgba(26,26,26,.35);
  letter-spacing: .04em;
}
.site-lang-btn:hover .site-lang-globe {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(26,26,26,.5);
}
.site-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}
.site-lang-menu.hidden { display: none; }
.site-lang-opt {
  width: 100%;
  border-radius: 8px;
  border: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  transition: opacity .15s, border-color .15s;
  white-space: nowrap;
}
.site-lang-opt[data-lang="fa"] { background: var(--primary); }
.site-lang-opt[data-lang="en"] { background: #2563eb; }
.site-lang-opt[data-lang="tr"] { background: #dc2626; }
.site-lang-opt:hover { opacity: .85; }
.site-lang-opt.active { border-color: rgba(255,255,255,.6); }
.site-lang-opt .opt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.7); flex-shrink: 0;
}
.site-lang-opt.active .opt-dot { background: #fff; }

/* Mobile lang in mobile menu */
.mobile-lang-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  justify-content: center;
}
.mobile-lang-opt {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}
.mobile-lang-opt[data-lang="fa"] { background: var(--primary); }
.mobile-lang-opt[data-lang="en"] { background: #2563eb; }
.mobile-lang-opt[data-lang="tr"] { background: #dc2626; }
.mobile-lang-opt:hover { transform: scale(1.1); }
.mobile-lang-opt.active { border-color: var(--dark); }

/* ─── Direction Cascade ──────────────────────────────────────────────────── */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="ltr"] body { direction: ltr; text-align: left;  }

/* ─── LTR Overrides (English & Turkish) ─────────────────────────────────── */
[dir="ltr"] .scroll-top-btn {
  left: auto;
  right: 20px;
}
[dir="ltr"] .product-tag {
  right: auto;
  left: 12px;
}
/* موبایل LTR: لوگو چپ، تاگل راست */
@media (max-width: 768px) {
  [dir="ltr"] .logo        { margin-left: 0; margin-right: 0; }
  [dir="ltr"] .menu-toggle { margin-right: 0; margin-left: auto; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* در موبایل سایدبار افقی می‌شه */
  .shop-layout { flex-direction: column; gap: 16px; }
  .sidebar-nav {
    width: 100%;
    position: static;
    overflow-x: auto;
    overflow-y: visible;
  }
  .sidebar-menu {
    display: flex;
    flex-direction: row;
    padding: 6px 8px;
    gap: 4px;
    min-width: max-content;
  }
  .sidebar-group { position: static; }
  .sidebar-item {
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 30px;
    border: 1.5px solid var(--border);
    font-size: 13px;
  }
  .sidebar-item.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }
  .sidebar-item:hover { background: var(--bg); }
  .sidebar-chevron { display: none; }
  /* dropdown در موبایل زیر آیتم باز می‌شه */
  .sidebar-dropdown {
    position: static;
    width: auto;
    border-radius: var(--radius-sm);
    box-shadow: none;
    border: 1px solid var(--border);
    margin-top: 4px;
    display: none;
  }
  .sidebar-group.open .sidebar-dropdown { display: block; }
}

@media (max-width: 768px) {
  .nav-links, .order-btn { display: none; }
  .menu-toggle { display: block; padding: 10px; }
  .logo { margin-left: auto; }
  .logo-img { height: 44px; max-width: 130px; }

  .hero { min-height: auto; }
  .hero-content { padding: 24px 0; }

  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .features-inner { gap: 24px; }

  .contact-card { padding: 36px 24px; }
  .channel-buttons { flex-direction: column; }
  .channel-btn { justify-content: center; }

  .footer-content { flex-direction: column; align-items: center; text-align: center; }
  .footer-links { justify-content: center; }
  .footer-col { align-items: center; }
  .legal-modal-box { padding: 28px 20px 24px; border-radius: 12px; }

  .scroll-top-btn { width: 40px; height: 40px; bottom: 20px; left: 16px; }

  /* cart panel full width */
  .cart-panel { width: 100% !important; }

  /* profile modal full width */
  .profile-modal-box { width: 100% !important; max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important; margin-top: auto; }

  /* orders table scroll */
  .orders-table-wrap, .order-items-table { display: block; overflow-x: auto; }

  /* return/order cards stack */
  .order-card-row { flex-direction: column; gap: 8px; }

  /* fav page */
  .fav-page { width: 100% !important; }

  /* filter drawer */
  .filter-drawer { width: 100% !important; }

  /* category subcategory sidebar */
  .cat-sidebar { width: 100% !important; }
}

@media (max-width: 420px) {
  .products-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 22px; }
  .logo-img { height: 38px; max-width: 110px; }
  .product-card { font-size: 13px; }
}

/* ─── Product Card — clickable ───────────────────────────────────────────── */
.product-card { cursor: pointer; }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.modal-panel {
  background: var(--card);
  border-radius: 22px;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(.96) translateY(24px);
  transition: transform .32s cubic-bezier(.34,1.4,.64,1);
  scrollbar-width: thin;
}
.modal-overlay.open .modal-panel {
  transform: scale(1) translateY(0);
}

/* Close */
.modal-close {
  position: sticky;
  top: 14px;
  float: right;
  margin: 14px 14px -48px 0;
  z-index: 20;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  border: none;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background .15s;
  font-family: inherit;
}
.modal-close:hover { background: rgba(0,0,0,.16); }
[dir="ltr"] .modal-close { left: auto; right: 14px; }

/* Body grid */
.modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
}

/* Gallery */
.modal-gallery {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--border);
}
[dir="ltr"] .modal-gallery { border-left: none; border-right: 1px solid var(--border); }

.modal-img-frame {
  position: relative;
  flex-shrink: 0;
}
.modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.38);
  border: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  padding: 0;
}
.modal-arrow:hover { background: rgba(0,0,0,.65); }
.modal-arrow-prev { left: 10px; }
.modal-arrow-next { right: 10px; }
.modal-main-img {
  border-radius: 14px;
  width: 100%;
  height: 310px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s ease;
  background: #f0f0f0;
}
.modal-main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.modal-main-img video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.modal-big-emoji {
  font-size: 100px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.3));
  user-select: none;
  transition: transform .3s ease;
}
.modal-main-img:hover .modal-big-emoji { transform: scale(1.06); }

.modal-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  border: 2.5px solid transparent;
  opacity: .65;
  transition: all .18s;
}
.modal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.modal-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.modal-thumb:hover { opacity: .85; transform: translateY(-2px); }
.modal-thumb.active { border-color: var(--primary); opacity: 1; }
.modal-thumb-video { background: #111; position: relative; }
.thumb-play-icon { font-size: 20px; color: #fff; opacity: .9; }

/* Info */
.modal-info {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.modal-name {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}
.modal-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  margin: 6px 0 4px;
  direction: ltr;
  text-align: right;
}
[dir="ltr"] .modal-price { text-align: left; }
.modal-price.price-has-discount { align-items: flex-end; }
.product-code-badge {
  display: inline-block;
  font-family: monospace;
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 8px;
  transition: background .15s, border-color .15s;
}
.product-code-badge.copyable {
  cursor: pointer;
  user-select: none;
}
.product-code-badge.copyable:hover {
  background: #e9eaec;
  border-color: #d1d5db;
}
.product-code-label {
  font-family: inherit;
  font-weight: 600;
  color: #9ca3af;
}
.modal-desc {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.6;
}
.modal-desc-more {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.6;
  cursor: pointer;
  padding: 0;
  display: inline;
}
.modal-desc-less {
  display: block;
  padding-top: 6px;
}

/* Size picker */
.modal-sizes-section { }
.modal-sizes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.modal-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-bottom: 0;
}
.modal-sizes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-size-chip {
  min-width: 58px; /* same width up to "2XL", see .size-chip */
  box-sizing: border-box;
  text-align: center;
  padding: 7px 10px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.modal-size-chip:hover   { border-color: var(--primary); color: var(--primary); }
.modal-size-chip.unavailable {
  color: var(--text-muted);
  border-color: var(--border);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: .5;
  position: relative;
}
.modal-size-chip.unavailable:hover { color: var(--text-muted); border-color: var(--border); }
.modal-size-chip.unavailable::after,
.modal-size-chip.out-of-stock::after {
  content: '✕';
  position: absolute;
  top: -7px;
  right: -7px;
  width: 14px;
  height: 14px;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
[dir="ltr"] .modal-size-chip.unavailable::after,
[dir="ltr"] .modal-size-chip.out-of-stock::after { right: auto; left: -7px; }
.modal-size-chip.out-of-stock {
  color: var(--text-muted);
  border-color: var(--border);
  opacity: .5;
  cursor: not-allowed;
  position: relative;
}
.modal-size-chip.out-of-stock:hover { color: var(--text-muted); border-color: var(--border); }
.modal-size-chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 3px 10px rgba(26,26,26,.3);
}

.modal-min-qty-note {
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--bg-soft, #f5f5f5);
  border-radius: 8px;
  padding: 7px 12px;
  margin-top: 10px;
  display: inline-block;
}

/* Buy section */
.modal-buy-section {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.modal-buy-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 13px;
  line-height: 1.65;
}
.modal-buy-btns {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.modal-btn {
  flex: 1;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  transition: opacity .2s, transform .15s;
}
.modal-btn:hover { opacity: .88; transform: translateY(-1px); }
.modal-wa-btn { background: var(--wa-green); }
.modal-tg-btn { background: var(--tg-blue); }

.modal-phone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.modal-or-call { font-size: 12.5px; color: var(--text-muted); }
.modal-phone {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  direction: ltr;
  display: inline-block;
  transition: color .2s;
}
.modal-phone:hover { color: var(--primary); }

/* Color Swatches */
.modal-colors-section { }
.modal-colors-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 1px 5px rgba(0,0,0,.25);
  flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.unavailable {
  cursor: not-allowed;
  opacity: .55;
  position: relative;
  overflow: hidden;
}
.color-swatch.unavailable::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1.5px),
    rgba(220,38,38,.9) calc(50% - 1.5px),
    rgba(220,38,38,.9) calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
}
.color-swatch.unavailable:hover { transform: none; }
.color-swatch.out-of-stock {
  cursor: not-allowed;
  opacity: .5;
  position: relative;
  overflow: visible;
}
.color-swatch.out-of-stock::after {
  content: '✕';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 13px;
  height: 13px;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 1.5px #fff;
}
.color-swatch.out-of-stock:hover { transform: none; }
.modal-stock-badge-wrap { min-height: 28px; margin: 6px 0 2px; }
.stock-badge {
  display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
}
.stock-in { background: #f0fdf4; color: #16a34a; border: 1.5px solid #bbf7d0; }
.stock-out { background: #fef2f2; color: #ef4444; border: 1.5px solid #fecaca; }
.color-swatch.selected {
  border-color: #fff;
  outline-color: var(--primary);
}
.color-selected-name {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
}

/* Add to Cart button in modal */
.modal-add-to-cart {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background .2s, transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.modal-add-to-cart:hover { background: var(--primary-dark); transform: translateY(-1px); }

.modal-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
  color: var(--text-muted);
  font-size: 11px;
}
.modal-divider::before,
.modal-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

/* ─── Favorites Full Page ─────────────────────────────────────────────────── */
.fav-page {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 95;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.fav-page.open { transform: translateY(0); }

.fav-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.fav-page-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  cursor: pointer;
  color: var(--dark);
  flex-shrink: 0;
  transition: border-color .2s, color .2s;
}
.fav-page-back:hover { border-color: var(--primary); color: var(--primary); }
[dir="ltr"] .fav-page-back svg { transform: scaleX(-1); }

.fav-page-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--dark);
  flex: 1;
}
.fav-page-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.fav-page-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* grid of fav items */
.fav-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.fav-panel-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.fav-panel-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.fav-panel-thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  cursor: pointer;
}

.fav-panel-info {
  padding: 12px 14px 10px;
  cursor: pointer;
}
.fav-panel-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav-panel-cat {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}
.fav-panel-code {
  display: block;
  font-size: 11px;
  font-family: monospace;
  color: #9ca3af;
}
.fav-panel-price {
  font-size: 13px;
  font-weight: 700;
  color: #ef4444;
}
.fav-panel-price-row { display: flex; flex-direction: row; align-items: center; gap: 5px; direction: ltr; margin-top: 2px; }
.fav-panel-price-original {
  font-size: 11px;
  color: #9ca3af;
  text-decoration: line-through;
}

.fav-panel-remove {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  backdrop-filter: blur(4px);
  transition: background .15s, transform .15s;
}
[dir="ltr"] .fav-panel-remove { left: auto; right: 8px; }
.fav-panel-remove:hover { background: #ef4444; color: #fff; transform: scale(1.1); }

@media (max-width: 600px) {
  .fav-page-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fav-panel-thumb { height: 110px; font-size: 36px; }
  .fav-page-body { padding: 16px; }
}

/* Favorites Button in Header */
.fav-header-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
  transition: all .2s;
  cursor: pointer;
}
.fav-header-btn:hover { border-color: #ef4444; color: #ef4444; }
.fav-header-btn.has-favs { color: #ef4444; border-color: #ef4444; }

.order-status-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
  transition: all .2s;
  cursor: pointer;
}
.order-status-btn:hover { border-color: var(--primary); color: var(--primary); }
.order-status-btn.has-order { border-color: var(--primary); color: var(--primary); }

.order-status-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: none;
}

.fav-header-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Cart Button in Header */
.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
  transition: all .2s;
  cursor: pointer;
}
.cart-btn:hover { border-color: var(--primary); color: var(--primary); }

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  direction: ltr;
}

/* Cart Overlay */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 450;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

/* Cart Panel */
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 380px;
  max-width: 100vw;
  background: var(--card);
  z-index: 500;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 32px rgba(0,0,0,.18);
  transform: translateX(110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.cart-panel.open { transform: translateX(0); }

[dir="rtl"] .cart-panel {
  right: auto;
  left: 0;
  box-shadow: 4px 0 32px rgba(0,0,0,.18);
  transform: translateX(-110%);
}
[dir="rtl"] .cart-panel.open { transform: translateX(0); }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-header h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.cart-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-light);
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.cart-close:hover { background: var(--border); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  scrollbar-width: thin;
}
.cart-empty { display: none; }

.cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }

.cart-item-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cart-item-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item-code {
  font-family: monospace;
  font-size: 11px;
  color: #9ca3af;
  display: block;
  cursor: pointer;
}
.cart-item-code:hover { color: var(--primary); }
.cart-item-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.cart-item-color-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  flex-shrink: 0;
  display: inline-block;
}
.cart-item-price, .cart-item-price-original {
  display: inline;
  direction: ltr;
}
.cart-item-price {
  font-size: 12px;
  font-weight: 700;
  color: #ef4444;
}
.cart-item-price-original {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  text-decoration: line-through;
  margin-inline-end: 4px;
}
.cart-item-price-wrap {
  margin-top: 2px;
  direction: ltr;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.cart-item-qty button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  font-family: inherit;
  line-height: 1;
}
.cart-item-qty button:hover { border-color: var(--primary); color: var(--primary); }
.cart-item-qty span {
  font-size: 14px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  color: var(--text);
  direction: ltr;
}

.cart-item-remove {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .15s;
  font-family: inherit;
}
.cart-item-remove:hover { color: #ef4444; }

.cart-footer {
  border-top: 1px solid var(--border);
  padding: 16px 20px 28px;
  flex-shrink: 0;
}
.cart-total {
  font-size: 13.5px;
  color: var(--text-light);
  margin-bottom: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-total-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  direction: ltr;
}
.cart-order-btns {
  display: flex;
  gap: 8px;
}
.cart-order-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 10px;
  border-radius: 12px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity .2s, transform .15s;
}
.cart-order-btn:hover { opacity: .9; transform: translateY(-1px); }
.cart-order-wa { background: var(--wa-green); }
.cart-order-tg { background: var(--tg-blue); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* ─── Quick Add Popup ────────────────────────────────────────────────────── */
.quick-add-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 350;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.quick-add-overlay.open { opacity: 1; visibility: visible; }

.quick-add-popup {
  position: fixed;
  z-index: 360;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%) scale(.95);
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
}
.quick-add-popup.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.qa-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.qa-product-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.qa-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.qa-product-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-product-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  direction: ltr;
}
.qa-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: inherit;
  transition: background .15s;
}
.qa-close:hover { background: var(--border); }

.qa-section { margin-bottom: 14px; }
.qa-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-bottom: 8px;
}
.qa-colors-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.qa-color-name {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  min-height: 16px;
}
.qa-sizes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.qa-confirm-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background .2s, transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.qa-confirm-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }

@media (max-width: 480px) {
  .quick-add-popup {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(30px);
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
  }
  .quick-add-popup.open { transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════════
   AUTH & PROFILE SYSTEM
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Auth header button ──────────────────────────────────────────────────── */
.auth-header-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.auth-header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
}
.auth-header-btn svg { border-radius: 50%; flex-shrink: 0; }
.auth-header-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ─── Modal Backdrop ──────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* ─── Auth Modal Box ──────────────────────────────────────────────────────── */
.auth-modal-box {
  background: var(--card);
  border-radius: 20px;
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 420px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.auth-modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0,0,0,.06);
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-light);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
[dir="ltr"] .auth-modal-close { left: auto; right: 14px; }
.auth-modal-close:hover { background: rgba(0,0,0,.12); color: var(--dark); }

.auth-modal-header { margin-bottom: 16px; }
.auth-modal-header h2 { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 2px; }
.auth-modal-header p  { color: var(--text-light); font-size: 13px; }
.form-field { margin-bottom: 10px; }
.signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* ─── Form Fields ─────────────────────────────────────────────────────────── */
.form-field { margin-bottom: 14px; }
.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--dark);
  background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,26,26,.12); }
.form-field textarea { height: 72px; resize: vertical; }

.pass-wrap { position: relative; }
.pass-wrap input { padding-left: 40px; }
[dir="ltr"] .pass-wrap input { padding-left: 14px; padding-right: 40px; }
.toggle-pass {
  position: absolute;
  top: 50%; left: 10px;
  transform: translateY(-50%);
  background: none; border: none;
  font-size: 15px; cursor: pointer;
  color: var(--text-muted);
  padding: 0; line-height: 1;
}
[dir="ltr"] .toggle-pass { left: auto; right: 10px; }

.auth-field-error {
  display: block; font-size: 12px; color: #ef4444;
  margin-top: 4px; min-height: 16px;
}
.auth-field-success {
  display: block; font-size: 13px; font-weight: 700;
  color: #22c55e; margin-bottom: 10px; min-height: 18px;
}
.form-hint {
  display: block; font-size: 11px;
  color: var(--text-muted); margin-top: 4px;
}

.auth-submit-btn {
  display: block; width: 100%; padding: 13px;
  background: var(--primary); color: #fff;
  border: none; border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 6px;
  transition: background .2s, transform .1s;
}
.auth-submit-btn:hover  { background: #e64e00; }
.auth-submit-btn:active { transform: scale(.98); }

.auth-link-btn {
  background: none; border: none;
  color: var(--primary); font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.auth-forgot-link { display: block; text-align: left; margin-bottom: 8px; }
[dir="ltr"] .auth-forgot-link { text-align: right; }

.auth-switch-text {
  text-align: center; font-size: 13px;
  color: var(--text-light); margin-top: 16px;
}

/* ─── Profile Full Page ───────────────────────────────────────────────────── */
.profile-page {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 900;
  display: flex;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.profile-page.open { transform: translateY(0); }

/* Sidebar */
.profile-page-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
[dir="ltr"] .profile-page-sidebar { border-left: none; border-right: 1px solid var(--border); }

/* Hero */
.profile-sidebar-hero {
  position: relative;
  background: linear-gradient(160deg, #1a1a1a 0%, #2d1a0e 60%, #3d2008 100%);
  padding: 52px 20px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.profile-sidebar-hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 32px;
  background: var(--card);
  border-radius: 20px 20px 0 0;
}
.profile-back-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
[dir="ltr"] .profile-back-btn { right: auto; left: 14px; }
[dir="ltr"] .profile-back-btn svg { transform: scaleX(-1); }
.profile-back-btn:hover { background: rgba(255,255,255,.22); }

.profile-avatar-wrap {
  position: relative;
  width: 82px; height: 82px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #ff8c42 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.25);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  cursor: pointer;
  z-index: 1;
  transition: opacity .15s;
  font-family: inherit;
}
.profile-avatar-wrap:hover { opacity: .88; }
.profile-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.profile-hero-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  z-index: 1;
  margin-top: 2px;
}
.profile-hero-contact {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-align: center;
  z-index: 1;
  direction: ltr;
}

/* Nav */
.profile-page-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 12px 12px;
  flex: 1;
}

/* ─── Info Tab ──────────────────────────────────────────────────────────────── */
.info-avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.info-avatar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.info-avatar-ring {
  width: 88px;
  height: 88px;
  min-width: 88px;
  border-radius: 50%;
  background: #e8f0fe;
  border: 2.5px solid #4a7fd4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.info-avatar-ring img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.info-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-avatar-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1.5px solid var(--border);
  color: var(--dark);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.info-avatar-upload-btn:hover { border-color: var(--primary); color: var(--primary); }
.info-avatar-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.info-avatar-remove-btn:hover { border-color: #ef4444; color: #ef4444; }
.info-avatar-remove-btn--disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

.profile-page-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  text-align: right;
  transition: background .15s, color .15s;
  width: 100%;
}
[dir="ltr"] .profile-page-nav-item { text-align: left; }
.profile-page-nav-item svg { flex-shrink: 0; opacity: .6; transition: opacity .15s; }
.profile-page-nav-item:hover  { background: var(--bg); color: var(--dark); }
.profile-page-nav-item:hover svg { opacity: .85; }
.profile-page-nav-item.active { background: rgba(26,26,26,.09); color: var(--primary); font-weight: 700; }
.profile-page-nav-item.active svg { opacity: 1; stroke: var(--primary); }

.profile-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 0 12px 16px;
  padding: 11px 14px;
  background: none;
  border: 1.5px solid #ef444430;
  border-radius: 10px;
  color: #ef4444;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.profile-logout-btn svg { flex-shrink: 0; stroke: #ef4444; }
.profile-logout-btn:hover { background: #ef44440f; border-color: #ef4444; }

/* Content area */
.profile-page-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 32px 32px;
}

.profile-empty {
  text-align: center; color: var(--text-muted);
  padding: 60px 0; font-size: 14px;
}

/* Mobile: stack vertically */
@media (max-width: 680px) {
  .profile-page { flex-direction: column; }
  .profile-page-sidebar {
    width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
    flex-shrink: 0;
  }
  .profile-sidebar-hero {
    padding: 14px 16px 36px;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    border-radius: 0;
  }
  .profile-sidebar-hero::after { display: none; }
  .profile-back-btn { position: static; background: rgba(255,255,255,.15); order: -1; }
  .profile-avatar-wrap { width: 52px; height: 52px; font-size: 24px; flex-shrink: 0; }
  .profile-hero-name { font-size: 14px; }
  .profile-hero-contact { font-size: 11px; }
  .profile-page-nav {
    flex-direction: row;
    padding: 0 8px 8px;
    gap: 4px;
    overflow-x: auto;
    flex: none;
  }
  .profile-page-nav-item { white-space: nowrap; padding: 8px 12px; font-size: 13px; }
  .profile-page-nav-item svg { display: none; }
  .profile-logout-btn { display: none; }
  .profile-page-content { padding: 16px; }
}

/* Remove old logout-btn */
.logout-btn { display: none; }

/* ─── Address Cards ───────────────────────────────────────────────────────── */
.address-card {
  display: flex; align-items: flex-start; justify-content: space-between;
  background: var(--card); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px; gap: 14px;
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .2s, border-color .2s;
}
.address-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10); }
.address-card--default {
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgba(26,26,26,.13);
}
.addr-default-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: #fff3ee; border-radius: 20px;
  padding: 2px 10px; width: fit-content;
  border: 1px solid rgba(26,26,26,.2);
}
.addr-default-btn { background: none; border: 1.5px solid var(--border); border-radius: 8px; color: #bbb; cursor: pointer; padding: 6px 8px; display: flex; align-items: center; transition: color .2s, border-color .2s, background .2s; }
.addr-default-btn:hover:not(:disabled) { color: #f59e0b; border-color: #f59e0b; background: #fffbeb; }
.addr-default-btn--active { color: #f59e0b; border-color: #fcd34d; background: #fffbeb; cursor: default; }
.address-info { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-light); flex: 1; }
.address-info strong { font-size: 15px; font-weight: 700; color: var(--dark); }
.address-info .addr-row { display: flex; align-items: center; gap: 6px; }
.address-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: center; }
.address-edit-btn { background: none; border: 1.5px solid var(--border); border-radius: 8px; color: var(--text-light); cursor: pointer; padding: 6px 8px; display: flex; align-items: center; transition: color .2s, border-color .2s, background .2s; }
.address-edit-btn:hover { color: var(--primary); border-color: var(--primary); background: #fff5ef; }
.address-remove-btn { background: none; border: 1.5px solid #fecaca; border-radius: 8px; color: #ef4444; cursor: pointer; padding: 6px 8px; display: flex; align-items: center; justify-content: center; transition: background .2s, opacity .2s; }
.address-remove-btn:hover { background: #fef2f2; opacity: .85; }

.addr-form-title { font-size: 14px; font-weight: 700; color: var(--dark); margin: 0 0 12px; }
.addr-form-actions { display: flex; gap: 10px; margin-top: 12px; }
.addr-form-actions .auth-submit-btn { flex: 1; width: auto; display: block; }
.addr-cancel-btn { flex: 1; padding: 10px; background: none; border: 1.5px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--text-light); cursor: pointer; transition: border-color .2s; }
.addr-cancel-btn:hover { border-color: var(--dark); color: var(--dark); }

.add-address-btn {
  display: block; width: 100%; padding: 10px;
  background: none; border: 1.5px dashed rgba(26,26,26,.4);
  border-radius: 10px; color: var(--primary);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-bottom: 16px;
  transition: background .2s, border-color .2s;
}
.add-address-btn:hover { background: rgba(26,26,26,.05); border-color: var(--primary); }

.address-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }

/* ─── Order Cards ─────────────────────────────────────────────────────────── */
.order-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; transition: box-shadow .2s; }
.order-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.order-toggle-arrow { font-size: 10px; }
.order-id   { font-size: 13px; font-weight: 700; color: var(--primary); }
.order-date { font-size: 12px; color: var(--text-muted); }
.order-total-badge { font-size: 12px; font-weight: 700; color: var(--primary); direction: ltr; }
.order-detail-btn {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1.5px solid var(--border); color: var(--text-light);
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s;
}
.order-detail-btn:hover { border-color: var(--primary); color: var(--primary); }
.order-item-product-link { color: var(--text-light); text-decoration: none; }
.order-item-product-link:hover { color: var(--primary); text-decoration: underline; }
.order-item-row {
  display: flex; gap: 10px; font-size: 13px;
  color: var(--text-light); padding: 3px 0; flex-wrap: wrap;
}
.order-item-row span:first-child { color: var(--dark); flex: 1; }

/* ─── Order Detail Area (expanded) ─────────────────────────────────────── */
.order-detail-area {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border);
  animation: fadeSlideDown .18s ease;
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.order-detail-hint { font-size: 13px; color: #555; margin-bottom: 8px; }
.order-addr-block {
  background: #f0f9ff; border-inline-start: 3px solid #38bdf8;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; font-size: 13px;
}
.order-addr-block-label { font-weight: 700; font-size: 12px; color: #0ea5e9; margin-bottom: 4px; }
.order-addr-block-body { display: flex; flex-direction: column; gap: 2px; color: #374151; line-height: 1.6; }
.order-note-block {
  background: #fffbeb; border-inline-start: 3px solid #f59e0b;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; font-size: 13px; color: #78350f;
}
.order-note-block-label { font-weight: 700; }
.order-detail-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; margin-bottom: 10px; border-bottom: 1px solid #f0f0f0; font-size: 14px;
}
/* Link-based pre-order request items (1-5 per order) */
.linkreq-order-item {
  background: #f5f3ff; border-inline-start: 3px solid #a855f7;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 13px; color: #4c1d95;
}
.linkreq-order-item a { color: #7c3aed; word-break: break-all; }
.linkreq-order-item-meta { color: #6b7280; margin-top: 3px; }
.linkreq-order-item-note { color: #6b7280; margin-top: 3px; font-style: italic; }
.linkreq-order-item-price { margin-top: 4px; font-weight: 700; color: #4c1d95; }
.order-rejection-box {
  background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px; color: #dc2626; font-size: 13px;
}
.order-payment-info-box {
  border-inline-start: 4px solid var(--primary); background: var(--soft);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 12px;
}
.order-payment-info-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.order-payment-row { display: flex; gap: 8px; font-size: 13px; margin-bottom: 4px; flex-wrap: wrap; }
.order-payment-row span { color: #888; min-width: 70px; }
.order-tracking-box {
  background: #f5f3ff; border: 1px solid #c4b5fd;
  border-radius: 8px; padding: 12px 16px; margin-bottom: 12px;
}
.order-upload-area { margin-bottom: 12px; }
.order-receipt-link {
  display: inline-block; font-size: 13px; color: #3b82f6;
  text-decoration: underline; margin-bottom: 10px;
}
.order-action-btn {
  display: block; width: 100%; padding: 10px 16px; border-radius: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: none; margin-bottom: 8px; transition: opacity .15s;
}
.order-action-btn:hover { opacity: .85; }
.order-action-upload { background: var(--primary); color: #fff; }
.order-action-cancel  { background: transparent; border: 1.5px solid #ef4444 !important; color: #ef4444; }

/* ─── Order Returns ──────────────────��─────────────────────────────────────── */
.order-return-section {
  margin-top: 14px;
  border-top: 1.5px solid var(--border);
  padding-top: 12px;
}
.order-return-title {
  font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 8px;
}
.return-policy-box {
  background: #fdf9f7; border: 1px solid #e5d8d0; border-radius: 10px;
  padding: 12px 14px; font-size: 13px;
}
.return-policy-text { color: #555; line-height: 1.6; font-size: 12px; }
.return-action-btn {
  padding: 8px 16px; border-radius: 8px; border: none;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.return-action-btn:hover { opacity: .85; }
.return-btn-primary   { background: var(--primary); color: #fff; }
.return-btn-secondary { background: transparent; border: 1.5px solid #d1d5db !important; color: #555; }
.return-btn-amber     { background: #f59e0b; color: #fff; }
.return-btn-success   { background: #16a34a; color: #fff; }

/* ─── Order Messages ──────────────��─────────────────────────────────────────── */
.order-messages-section {
  margin-top: 14px;
  border-top: 1.5px solid var(--border);
  padding-top: 12px;
}
.order-msgs-title {
  font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 8px;
}
.order-msgs-list {
  max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 10px;
}
.order-msg-row { display: flex; }
.order-msg-customer { justify-content: flex-end; }
.order-msg-admin    { justify-content: flex-start; }
.order-msg-bubble {
  max-width: 80%; padding: 8px 12px; border-radius: 12px;
  font-size: 13px; line-height: 1.5;
}
.order-msg-customer .order-msg-bubble {
  background: #fff3ec; border: 1px solid #f5d3be;
  border-bottom-right-radius: 4px;
}
.order-msg-admin .order-msg-bubble {
  background: #f0f4ff; border: 1px solid #c7d4f5;
  border-bottom-left-radius: 4px;
}
.order-msg-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 4px;
}
.order-msg-sender { font-weight: 700; font-size: 11px; color: #555; }
.order-msg-time   { font-size: 10px; color: #aaa; }
.order-msg-text   { color: #222; word-break: break-word; }
.order-msg-status { font-size: 10px; color: #aaa; margin-top: 4px; }
.order-msgs-compose { display: flex; gap: 6px; align-items: flex-end; }
.order-msg-input {
  flex: 1; padding: 8px 10px; border-radius: 8px;
  border: 1.5px solid var(--border); font-family: inherit; font-size: 13px;
  resize: none; background: #faf9f7;
  transition: border-color .15s;
}
.order-msg-input:focus { outline: none; border-color: var(--primary); }
.order-msg-send-btn {
  padding: 8px 14px; border-radius: 8px; border: none;
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: opacity .15s;
}
.order-msg-send-btn:hover { opacity: .85; }

/* ─── Favorites Grid ──────────────────────────────────────────────────────── */
.fav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fav-card {
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  background: #fff;
}
.fav-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fav-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.fav-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fav-card-body {
  padding: 6px 8px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.fav-name {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-code {
  font-size: 10px;
  font-family: monospace;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav-price {
  font-size: 10.5px; color: #ef4444; font-weight: 700;
  direction: ltr;
}
.fav-price-row { display: flex; flex-direction: row; align-items: center; gap: 4px; direction: ltr; }
.fav-price-original {
  font-size: 10px; color: #9ca3af; font-weight: 400;
  text-decoration: line-through;
}
.fav-card-remove {
  align-self: flex-end; margin-top: 1px;
  background: none; border: none; cursor: pointer;
  color: #9ca3af; padding: 2px;
  transition: color .15s;
}
.fav-card-remove:hover { color: #ef4444; }

/* ─── Favorite button on product card ────────────────────────────────────── */
.fav-btn {
  position: absolute; top: 10px; left: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.88); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #ccc; cursor: pointer; z-index: 2;
  backdrop-filter: blur(4px);
  transition: color .2s, transform .2s, background .2s;
}
[dir="ltr"] .fav-btn { left: auto; right: 10px; }
.fav-btn:hover   { color: #ef4444; transform: scale(1.15); }
.fav-btn.fav-active { color: #ef4444; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-modal-box  { padding: 28px 20px 24px; }
  .auth-header-btn { padding: 5px 10px; font-size: 12px; }
  .auth-btn-text { display: none; }
  .site-lang-wrap { display: none; }
  .header-inner { flex-wrap: nowrap; gap: 6px; }
  .fav-grid { grid-template-columns: repeat(2, 1fr); }
  .fav-thumb { aspect-ratio: 1 / 1; }
  .address-form-grid { grid-template-columns: 1fr; }
  .signup-grid { grid-template-columns: 1fr; }
  .color-swatch { width: 36px; height: 36px; }
  .filter-drawer-close { width: 40px; height: 40px; }
}

/* Safety net: let the header row wrap rather than overflow if the combined
   logo + auth/fav/cart buttons + hamburger don't fit a very narrow screen. */
@media (max-width: 380px) {
  .header-inner { flex-wrap: wrap; row-gap: 6px; }
}

/* ─── Mobile Modal ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-panel {
    border-radius: 22px 22px 0 0;
    max-height: 94vh;
    transform: translateY(60px);
  }
  .modal-overlay.open .modal-panel { transform: translateY(0); }
  .modal-body { grid-template-columns: 1fr; }
  .modal-gallery { border-left: none; border-right: none; border-bottom: 1px solid var(--border); padding: 16px; }
  .modal-main-img { height: 230px; }
  .modal-info { padding: 20px 16px 32px; }
  .modal-buy-btns { flex-direction: column; }
  .modal-btn { min-width: unset; }
}

/* ─── Toast ─────────────────────────────────────────────────────────────────── */
/* ─── Empty Banners ─────────────────────────────────────────────────────────── */
.empty-banner {
  position: relative;
  margin: 20px;
  border-radius: 20px;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-banner-bg {
  position: absolute;
  inset: 0;
  opacity: .13;
}
.empty-banner--addr  { background: linear-gradient(135deg, #fff5ef 0%, #ffe8d6 100%); color: var(--primary); }
.empty-banner--addr  .empty-banner-bg { background: radial-gradient(circle at 70% 30%, var(--primary) 0%, transparent 70%); opacity: .18; }
.empty-banner--orders { background: linear-gradient(135deg, #f0f4ff 0%, #dce8ff 100%); color: #3b6fd4; }
.empty-banner--orders .empty-banner-bg { background: radial-gradient(circle at 30% 60%, #3b6fd4 0%, transparent 70%); opacity: .14; }
.empty-banner--favs  { background: linear-gradient(135deg, #fff0f3 0%, #ffdce4 100%); color: #e0405a; }
.empty-banner--favs  .empty-banner-bg { background: radial-gradient(circle at 60% 40%, #e0405a 0%, transparent 70%); opacity: .15; }

.empty-banner-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 24px;
  text-align: center;
}
.empty-banner-svg {
  width: 72px;
  height: 72px;
  opacity: .85;
}
.empty-banner-title {
  font-size: 15px;
  font-weight: 700;
  color: inherit;
  opacity: .8;
  margin: 0;
}
.empty-banner-btn {
  margin-top: 4px;
  padding: 9px 22px;
  border-radius: 12px;
  border: 2px solid currentColor;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  opacity: .85;
  transition: background .18s, opacity .18s;
}
.empty-banner-btn:hover { background: rgba(0,0,0,.06); opacity: 1; }

/* ─── Toast Popup ───────────────────────────────────────────────────────────── */
#app-toast {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
#app-toast.show {
  display: flex;
}
.app-toast-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.22);
  animation: toast-in .22s ease;
  font-family: inherit;
  min-width: 200px;
  text-align: center;
}
.app-toast-check {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-toast-check.error {
  background: #ef4444;
}
#app-toast-msg {
  font-size: 15px;
  font-weight: 600;
  color: #111;
}
@keyframes toast-in {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ─── Code Copy Snackbar ─────────────────────────────────────────────────── */
#code-copy-toast {
  display: none;
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 999999;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  direction: ltr;
}
#code-copy-toast.show {
  display: flex;
  animation: cct-in .25s ease forwards;
}
@keyframes cct-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
#code-copy-toast svg { flex-shrink: 0; }
#code-copy-toast-code {
  font-family: monospace;
  font-size: 15px;
  color: #fb923c;
  letter-spacing: .04em;
}
#code-copy-toast-label {
  color: #ffffff;
}

/* ─── Confirm Popup ──────────────────────────────────────────────────────── */
#confirm-overlay { backdrop-filter: blur(2px); }
#confirm-box { animation: confirm-in .18s ease; }
@keyframes confirm-in {
  from { transform: scale(.9) translateY(8px); opacity: 0; }
  to   { transform: scale(1)  translateY(0);   opacity: 1; }
}
#confirm-yes:hover { opacity: .88; }
#confirm-no:hover  { background: #f9fafb; }

/* ─── Preorder / Order Status UI ──────────────────────────────────────────── */
.preorder-status-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  margin: 8px 0;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}

.payment-info-box {
  border-left: 4px solid var(--primary);
  background: var(--soft);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
}

[dir="rtl"] .payment-info-box {
  border-left: none;
  border-right: 4px solid var(--primary);
}

.receipt-upload-form {
  margin-bottom: 12px;
}

.rejection-reason {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: #dc2626;
  font-size: 13px;
}

.tracking-box {
  background: #f5f3ff;
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}


/* ─── Checkout Page ───────────────────────────────────────────────────────────── */
.checkout-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 410;
  background: var(--bg);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.checkout-overlay.open { display: flex; }

.checkout-page {
  display: flex; flex-direction: column;
  max-width: 780px; width: 100%; margin: 0 auto;
  height: 100%;
}

.checkout-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: #fff;
  border-bottom: 1.5px solid #eee; flex-shrink: 0;
  position: sticky; top: 0; z-index: 2;
}
.checkout-back-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--primary);
  background: none; border: none; cursor: pointer; padding: 6px 10px;
  border-radius: 8px; transition: background .15s;
}
.checkout-back-btn:hover { background: rgba(26,26,26,.07); }
.checkout-title {
  font-size: 17px; font-weight: 700; color: #111; margin: 0; flex: 1; text-align: center;
}

.checkout-body {
  flex: 1; overflow-y: auto; padding: 16px 18px 32px;
  display: flex; flex-direction: column; gap: 14px;
}

/* Note + Coupon side by side */
.checkout-note-coupon-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .checkout-note-coupon-row { grid-template-columns: 1fr; }
}

.checkout-section {
  background: #fff; border-radius: 14px; padding: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.checkout-section-title {
  font-size: 13px; font-weight: 700; color: #888;
  text-transform: uppercase; letter-spacing: .05em;
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
}

/* Items */
.checkout-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #f5f5f5;
}
.checkout-item:last-child { border-bottom: none; padding-bottom: 0; }
.checkout-item-thumb {
  width: 58px; height: 58px; border-radius: 10px;
  flex-shrink: 0; overflow: hidden; background: #f5f0eb;
  display: flex; align-items: center; justify-content: center;
}
.checkout-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.checkout-item-info { flex: 1; min-width: 0; }
.checkout-item-name {
  font-size: 14px; font-weight: 600; color: #111; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.checkout-item-code { font-size: 10px; color: #bbb; font-family: monospace; display: block; cursor: pointer; }
.checkout-item-code:hover { color: var(--primary); }
.checkout-item-meta { font-size: 12px; color: #888; display: block; margin-top: 3px; }
.checkout-item-right { text-align: end; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.checkout-item-price { font-size: 14px; font-weight: 700; color: var(--primary); direction: ltr; }
.checkout-item-price-orig { font-size: 11px; color: #bbb; text-decoration: line-through; direction: ltr; }
/* qty controls inside checkout */
.co-qty-ctrl { display: flex; align-items: center; gap: 4px; margin-top: 7px; direction: ltr; }
.co-qty-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--primary);
  background: #fff; color: var(--primary); font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0; transition: background .15s, color .15s;
}
.co-qty-btn:hover { background: var(--primary); color: #fff; }
.co-qty-num { font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; color: var(--text); }
.co-qty-remove {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #e0e0e0;
  background: #fff; color: #bbb; font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0; margin-right: 2px; transition: border-color .15s, color .15s;
}
.co-qty-remove:hover { border-color: #f55; color: #f55; }

/* Address cards */
.checkout-addr-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
  border: 2px solid #eee; margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.checkout-addr-card:last-of-type { margin-bottom: 0; }
.checkout-addr-card.selected { border-color: var(--primary); background: rgba(26,26,26,.04); }
.checkout-addr-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ccc;
  flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.checkout-addr-card.selected .checkout-addr-radio { border-color: var(--primary); }
.checkout-addr-radio-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  display: none;
}
.checkout-addr-card.selected .checkout-addr-radio-dot { display: block; }
.checkout-addr-info { flex: 1; }
.checkout-addr-name { font-size: 14px; font-weight: 600; color: #111; display: block; }
.checkout-addr-phone { font-size: 12px; color: #888; display: block; margin-top: 2px; }
.checkout-addr-detail { font-size: 12px; color: #666; display: block; margin-top: 2px; line-height: 1.5; }
.checkout-addr-default { font-size: 10px; color: var(--primary); font-weight: 600; margin-right: 6px; }
.checkout-no-addr { font-size: 13px; color: #aaa; text-align: center; padding: 16px 0; }
.checkout-add-addr-btn {
  margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--primary);
  background: none; border: 1.5px dashed var(--primary); width: 100%;
  padding: 10px; border-radius: 10px; cursor: pointer;
  transition: background .15s;
}
.checkout-add-addr-btn:hover { background: rgba(26,26,26,.05); }
.checkout-change-addr-btn {
  margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--primary);
  background: none; border: none; cursor: pointer; padding: 4px 0;
  font-family: inherit; text-decoration: underline; display: block;
}
.checkout-change-addr-btn:hover { color: var(--primary-dark); }

/* Bank Account */
.checkout-bank-card {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1.5px solid #eee; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .15s, background .15s; background: #fff;
}
.checkout-bank-card:last-of-type { margin-bottom: 0; }
.checkout-bank-card.selected { border-color: var(--primary); background: rgba(26,26,26,.04); }
.checkout-bank-card .checkout-addr-radio { flex-shrink: 0; margin-top: 2px; }
.checkout-bank-info { flex: 1; }
.checkout-bank-name { font-size: 14px; font-weight: 700; color: #111; display: block; }
.checkout-bank-holder { font-size: 12px; color: #888; display: block; margin-top: 2px; }
.checkout-bank-iban { font-size: 12px; color: #555; display: block; margin-top: 3px; direction: ltr; font-family: monospace; }
.checkout-bank-empty { font-size: 13px; color: #aaa; text-align: center; padding: 16px 0; }

/* Note */
.checkout-note-input {
  width: 100%; border: 1.5px solid #eee; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  resize: vertical; min-height: 72px; color: #333;
  transition: border-color .15s; box-sizing: border-box;
}
.checkout-note-input:focus { outline: none; border-color: var(--primary); }

/* Single-line input, same visual language as .checkout-note-input */
.checkout-text-input {
  width: 100%; border: 1.5px solid #eee; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  color: #333; transition: border-color .15s; box-sizing: border-box;
}
.checkout-text-input:focus { outline: none; border-color: var(--primary); }
.checkout-field-label {
  display: block; font-size: 12.5px; font-weight: 600; color: #666;
  margin-bottom: 6px;
}

/* Footer (coupon + total + submit — now a card inside right column) */
.checkout-footer {
  background: #fff; border-radius: 14px; padding: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.checkout-total-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  font-size: 15px; font-weight: 700; color: #111;
}
.checkout-total-price { font-size: 20px; font-weight: 800; color: var(--primary); direction: ltr; }
.checkout-submit-btn {
  width: 100%; padding: 15px; border-radius: 12px;
  background: var(--primary); color: #fff; font-size: 16px; font-weight: 700;
  border: none; cursor: pointer; font-family: inherit;
  transition: background .15s, transform .1s;
}
.checkout-submit-btn:hover { background: var(--primary-dark); }
.checkout-submit-btn:active { transform: scale(.98); }
.checkout-submit-btn:disabled { background: #ccc; cursor: not-allowed; }
.checkout-err {
  font-size: 13px; color: #ef4444; text-align: center;
  margin-top: 8px; min-height: 18px;
}

/* ─── Discount Banner ───────────────────────────────────────────────────────── */
@keyframes banner-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes banner-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .7; transform: scale(1.08); }
}
@keyframes banner-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%       { box-shadow: 0 0 12px 3px rgba(255,255,255,.35); }
}
#discount-banner {
  animation: banner-glow 2.4s ease-in-out infinite;
}
#discount-banner-code {
  animation: banner-pulse 1.8s ease-in-out infinite;
  display: inline-block;
}
.banner-exp {
  font-size: 11px;
  opacity: .85;
  background: rgba(0,0,0,.18);
  padding: 2px 8px;
  border-radius: 20px;
  margin-inline-start: 10px;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* ─── Loyalty Card ───────────────────────────────────────────────────────────── */
.lc-card {
  background: linear-gradient(140deg, #16082a 0%, #2a1045 45%, #0e1c38 100%);
  border-radius: 22px;
  padding: 22px 24px 18px;
  margin-bottom: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09);
}
/* Shine sweep */
.lc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);
  animation: lc-shine 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes lc-shine {
  0%,100% { transform: translateX(-120%) skewX(-15deg); opacity: 0; }
  5%       { opacity: 1; }
  45%      { transform: translateX(160%) skewX(-15deg); opacity: 0; }
}
/* Gold orb top-right */
.lc-card::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,184,0,.1) 0%, transparent 65%);
  top: -70px; right: -50px;
  pointer-events: none;
  z-index: 0;
}
.lc-card > * { position: relative; z-index: 1; }

.lc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.lc-brand {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,184,0,.55);
  margin-bottom: 4px;
}
.lc-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.lc-cycle-badge {
  background: rgba(255,184,0,.12);
  border: 1px solid rgba(255,184,0,.28);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 11px;
  color: #FFB800;
  font-weight: 600;
  white-space: nowrap;
}
.lc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 6px;
  min-height: 58px;
}
.lc-stamp {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all .3s;
}
.lc-stamp.lc-empty {
  border: 2px dashed rgba(255,255,255,.15);
  background: rgba(255,255,255,.03);
}
.lc-stamp.lc-filled {
  background: radial-gradient(circle at 35% 35%, #FFD34E, #FF8C00);
  border: 2px solid rgba(255,215,0,.5);
  box-shadow: 0 0 16px rgba(255,184,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.lc-stamp.lc-next {
  border: 2px solid rgba(26,26,26,.5);
  background: rgba(26,26,26,.07);
  animation: lc-next-ring 1.8s ease-in-out infinite;
}
@keyframes lc-next-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(26,26,26,0); border-color: rgba(26,26,26,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(26,26,26,.12); border-color: rgba(26,26,26,.85); }
}
.lc-stamp svg { width: 24px; height: 24px; flex-shrink: 0; transition: all .3s; }
.lc-stamp.lc-filled svg {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
}
.lc-stamp.lc-next svg {
  animation: lc-next-star 1.8s ease-in-out infinite;
}
@keyframes lc-next-star {
  0%,100% { transform: scale(1); opacity: .6; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.lc-dot-gap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 8px;
}
.lc-dot-gap span {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: block;
}
.lc-arrow-gap {
  color: rgba(255,255,255,.2);
  font-size: 14px;
  flex-shrink: 0;
  padding: 0 2px;
}
/* Prize box */
.lc-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  width: 62px;
  position: relative;
  cursor: default;
}
.lc-prize.lc-unlocked { cursor: pointer; }
.lc-prize-box {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .2s;
}
.lc-prize.lc-locked .lc-prize-box {
  background: rgba(255,255,255,.04);
  border: 1.5px dashed rgba(255,255,255,.14);
  animation: lc-float 3s ease-in-out infinite;
}
@keyframes lc-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-4px) rotate(-4deg); }
  70%      { transform: translateY(-4px) rotate(4deg); }
}
.lc-prize.lc-locked .lc-prize-box:hover {
  animation: none !important;
  transform: scale(1.16);
  background: rgba(26,26,26,.1);
  border-color: rgba(26,26,26,.5);
  border-style: solid;
}
.lc-prize.lc-unlocked .lc-prize-box {
  background: linear-gradient(140deg, rgba(255,184,0,.22), rgba(26,26,26,.12));
  border: 1.5px solid rgba(255,184,0,.45);
  box-shadow: 0 0 24px rgba(255,184,0,.3), inset 0 1px 0 rgba(255,255,255,.12);
  animation: lc-prize-tap 1.8s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes lc-prize-tap {
  0%,55%,100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 14px rgba(255,184,0,.3); }
  5%   { transform: scale(1.13) rotate(-9deg); box-shadow: 0 0 30px rgba(255,184,0,.65); }
  15%  { transform: scale(1.13) rotate(9deg); }
  25%  { transform: scale(1.09) rotate(-5deg); }
  35%  { transform: scale(1.06) rotate(5deg); }
  45%  { transform: scale(1.03) rotate(0deg); box-shadow: 0 0 20px rgba(255,184,0,.4); }
}
.lc-prize-icon { font-size: 28px; line-height: 1; display: block; }
.lc-prize-q {
  position: absolute;
  top: 5px; right: 5px;
  background: var(--primary);
  color: #fff;
  font-size: 9px; font-weight: 800;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.lc-prize-lbl {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.3);
  white-space: nowrap;
  text-align: center;
}
.lc-prize.lc-unlocked .lc-prize-lbl { color: #FFB800; }
/* Tooltip */
.lc-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%; transform: translateX(-50%);
  background: rgba(12,5,28,.96);
  color: #fff;
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  z-index: 20;
}
.lc-tip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(12,5,28,.96);
}
.lc-prize:hover .lc-tip { opacity: 1; }
/* Row divider */
.lc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 30%, rgba(255,255,255,.07) 70%, transparent);
  margin: 4px 0 8px;
}
/* Footer */
.lc-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  color: rgba(255,255,255,.35);
  text-align: center;
  line-height: 1.7;
}
.lc-footer strong { color: var(--primary); font-weight: 700; }
/* Active order highlight flash */
.order-card--highlighted {
  animation: order-highlight-flash 2s ease forwards;
}
@keyframes order-highlight-flash {
  0%   { box-shadow: 0 0 0 3px rgba(59,130,246,.7), 0 4px 20px rgba(59,130,246,.25); }
  60%  { box-shadow: 0 0 0 2px rgba(59,130,246,.3), 0 4px 12px rgba(59,130,246,.1); }
  100% { box-shadow: none; }
}
/* ─── Loyalty reward popup ─────────────────────────────────────────────────── */
.lp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.68);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: lp-fade-in .22s ease;
}
@keyframes lp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.lp-card {
  background: linear-gradient(145deg, #1a0a3a 0%, #0d0520 60%, #1a0838 100%);
  border: 1px solid rgba(255,184,0,.22);
  border-radius: 24px;
  padding: 36px 28px 28px;
  width: min(360px, 92vw);
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.75), 0 0 60px rgba(255,184,0,.1);
  position: relative;
  animation: lp-card-in .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lp-card-in {
  from { transform: scale(.88) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.lp-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none;
  color: rgba(255,255,255,.38); font-size: 22px;
  cursor: pointer; line-height: 1; padding: 4px 6px;
  transition: color .15s;
}
.lp-close:hover { color: rgba(255,255,255,.85); }
.lp-icon { font-size: 50px; margin-bottom: 10px; }
.lp-title { font-size: 18px; font-weight: 700; color: #FFD34E; margin-bottom: 6px; }
.lp-desc  { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 20px; line-height: 1.5; }

/* ─── Link-based pre-order request — trigger button (page itself reuses .checkout-* classes) ─ */
.link-req-open-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px dashed var(--primary);
  color: var(--primary); font-size: 12.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 10px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.link-req-open-btn:hover { background: rgba(26,26,26,.06); }

/* ─── Orders tab — manual refresh button ─── */
.orders-refresh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: none; border: 1px solid #e5e7eb; color: #6b7280;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.orders-refresh-btn:hover:not(:disabled) { background: rgba(59,130,246,.08); color: #3b82f6; border-color: #3b82f6; }
.orders-refresh-btn:disabled { cursor: default; opacity: .7; }
.orders-refresh-btn.spinning svg { animation: orders-refresh-spin .7s linear infinite; }
@keyframes orders-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.linkreq-item-remove {
  background: none; border: none; color: #bbb; font-size: 15px;
  cursor: pointer; padding: 2px 4px; line-height: 1; transition: color .15s;
}
.linkreq-item-remove:hover { color: #ef4444; }

/* ─── Link-request cards — accordion (collapse previous card on "add another") ─ */
.linkreq-item-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
/* Stacked (title above summary), not side-by-side — on narrow screens a
   long product link squeezed next to "ÜRÜN LİNKİ 1" on one line forced the
   title to wrap and the two overlapped/collided. */
.linkreq-item-header-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linkreq-item-summary {
  font-size: 12px; font-weight: 400; color: #9ca3af;
  direction: ltr; unicode-bidi: plaintext;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.linkreq-item-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.linkreq-item-chevron { display: flex; color: #9ca3af; transition: transform .18s; }
.linkreq-item-card.collapsed .linkreq-item-chevron { transform: rotate(-90deg); }
.linkreq-item-card.collapsed .linkreq-item-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.linkreq-item-card.collapsed .linkreq-item-body { display: none; }

.lp-code-box {
  background: rgba(255,184,0,.09);
  border: 1.5px dashed rgba(255,184,0,.5);
  border-radius: 14px;
  padding: 16px 20px 12px;
  cursor: pointer;
  transition: background .18s, transform .15s;
  margin-bottom: 10px;
  user-select: none;
}
.lp-code-box:hover  { background: rgba(255,184,0,.17); transform: scale(1.02); }
.lp-code-box:active { transform: scale(.97); }
.lp-code      { font-size: 28px; font-weight: 900; letter-spacing: 4px; color: #FFD34E; }
.lp-copy-hint { font-size: 11px; color: rgba(255,255,255,.32); margin-top: 6px; }
.lp-discount-val { font-size: 13px; color: rgba(255,255,255,.48); margin-top: 10px; }

/* ═══ Redesign A — minimal & clean (2026-10-07) ═══════════════════════════
   One block on top of the old styles so it can be reverted in one go (the
   previous design is git tag design-v1-before-redesign). Black for actions,
   orange only for discounts; text orange is the darker --accent-text so it
   stays readable on white. */
:root {
  --accent-text: #C2410C;
  --ink: #1a1a1a;
  --soft: #f4f4f4;
  /* Actions are black everywhere now (product page, cart, checkout,
     profile, filters); orange is kept for discounts via --accent-text. */
  --primary: #1a1a1a;
  --primary-dark: #000000;
}
body { background: #fff; }

/* Top bars: calm and dark instead of orange */
.announcement-bar { background: var(--ink); height: 38px; }
.ann-item { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.ann-sep { color: #8a8a8a; font-size: 12px; }
#discount-banner { background: var(--soft) !important; color: var(--ink) !important; }
#discount-banner-code { background: #fff !important; border-color: var(--ink) !important; color: var(--ink); }

/* Header */
.header { background: rgba(255,255,255,.97); border-bottom-color: #eee; }
.nav-link { font-weight: 500; color: var(--ink); }
.nav-link:hover, .nav-link.active { color: var(--ink); background: var(--soft); }
.site-lang-globe { background: var(--ink); box-shadow: none; }
.site-lang-btn:hover .site-lang-globe { box-shadow: none; }
.order-btn { background: var(--ink); border-radius: 999px; }
.order-btn:hover { background: #000; }

/* Hero: light, text beside the two biggest deals */
.hero { background: #fff; color: var(--ink); padding: 48px 0 32px; }
.hero::before, .hero::after { display: none; }
.hero-split { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; text-align: start; }
.hero-col { flex: 1 1 380px; align-items: flex-start; text-align: start; gap: 18px; padding: 0; }
.hero-title { font-size: clamp(34px, 5vw, 56px); line-height: 1.15; font-weight: 800; color: var(--ink); margin: 0; }
.hero-highlight { color: var(--ink); }
.hero-subtitle, .hero-link-note { color: #555; font-size: 17px; line-height: 1.8; margin: 0; max-width: 460px; }
.hero-col .hero-subtitle, .hero-col .hero-link-note { margin-inline: 0; }
.hero-link-note { font-size: 15px; color: #6b6b6b; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-col .hero-actions > a { margin-top: 0; }
.btn-hero-primary, .btn-hero-secondary {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px;
  border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none;
  box-shadow: none; transform: none;
}
.btn-hero-primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-hero-primary:hover { background: #000; color: #fff; }
.btn-hero-secondary { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn-hero-secondary:hover { background: var(--soft); color: var(--ink); }
.hero-divider { display: none; }
.hero-media { flex: 1 1 440px; display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hero-media-item { display: block; border-radius: 20px; overflow: hidden; background: var(--soft); }
.hero-media-item:nth-child(2) { margin-top: 48px; }
.hero-media-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .4s ease; }
.hero-media-item:hover img { transform: scale(1.03); }

/* Features: a quiet strip, no emoji */
.features-bar { background: var(--soft); border: 0; }
.feature-icon { display: none; }
.feature-item { color: var(--ink); font-weight: 600; }

/* Section heading + sidebar */
.shop-section { background: #fff; }
.section-header { text-align: start; }
.section-title { font-size: 28px; font-weight: 800; color: var(--ink); }
.section-title::after { display: none; }
.section-subtitle { color: #6b6b6b; }
.sidebar-nav { box-shadow: none; border: 1px solid #eee; }
.sidebar-item:hover, .sidebar-sub-item:hover { color: var(--ink); background: var(--soft); }
.sidebar-item.active, .sidebar-sub-item.active { color: var(--ink); background: var(--soft); font-weight: 800; }

/* Product grid + card */
.products-grid { gap: 32px 20px; }
.product-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.product-card:hover { transform: none; box-shadow: none; }
.product-card .product-image { aspect-ratio: 4 / 5; border-radius: 16px; background: var(--soft); }
.product-card .product-real-img { object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-real-img { transform: scale(1.04); }
.product-card.product-sold-out { filter: none; opacity: 1; }
.product-card.product-sold-out .product-real-img { filter: grayscale(1); opacity: .55; }
.product-card .product-body { padding: 12px 2px 0; gap: 4px; }
.card-brand { font-size: 13px; color: #767676; }
.product-card .product-name { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink); margin: 0; }
.product-card .product-price { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 10px; margin: 2px 0 0; }
.product-card .price-discounted { font-size: 18px; font-weight: 800; color: var(--ink); }
.product-card .price-original { font-size: 14px; color: #8a8a8a; text-decoration: line-through; }
.card-badge {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
  background: #fff; color: var(--accent-text); font-size: 13px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
}
.card-badge--soldout { color: var(--ink); }
.product-card .fav-btn {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; box-shadow: none;
}
/* Pagination in the same black */
#pagination-bar .pg-btn { border-radius: 999px; }
#pagination-bar .pg-btn:hover:not(:disabled), #pagination-bar .pg-btn.active { background: var(--ink); border-color: var(--ink); }

/* Phones: two cards a row, like most fashion shops */
@media (max-width: 420px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .product-card .product-name { font-size: 13px; }
  .product-card .price-discounted { font-size: 15px; }
  .hero { padding: 28px 0 16px; }
  .hero-media-item:nth-child(2) { margin-top: 24px; }
}
.scroll-top-btn { background: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
/* Price row follows the page direction (renderPriceHtml marks it ltr for the
   numbers): sale price first, then the struck old one. */
html[dir="rtl"] .product-card .product-price { direction: rtl; }
.product-card .product-price { justify-content: flex-end; }
.product-card .product-price > span { direction: ltr; unicode-bidi: isolate; }
.product-card .product-body { gap: 6px; }
@media (max-width: 900px) {
  .sidebar-item.active { background: var(--ink); color: #fff; border-color: var(--ink); }
}
/* Sale prices everywhere (cart, checkout, favourites) in ink, not red. */
.price-discounted { color: var(--ink); font-weight: 800; }
/* Profile header: plain ink instead of the brown/orange glow. */
.profile-sidebar-hero { background: var(--ink); }
.profile-avatar-wrap { background: #3a3a3a; }
/* Leftover hard-coded oranges (login button hover was orange, 2026-10-07). */
.auth-submit-btn:hover { background: #000; }
.auth-submit-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.address-edit-btn:hover { background: var(--soft); }
.empty-banner--addr { background: var(--soft); color: var(--ink); }
.empty-banner--addr .empty-banner-bg { display: none; }
.policy-card:hover { border-color: var(--ink); }

/* Contact + footer: light like the rest (2026-10-07). The dark versions'
   hovers used --primary, which is ink now, so links vanished on hover. */
.contact-section { background: var(--soft); padding: 40px 0; }
.contact-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.contact-text { flex: 1 1 320px; }
.contact-text h2 { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.contact-text p { color: #555; font-size: 15px; line-height: 1.7; margin: 0; max-width: 460px; }
.contact-text .working-hours { margin-top: 8px !important; font-size: 13px; color: #6b6b6b !important; }
.contact-actions { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
[dir="ltr"] .contact-actions { align-items: flex-end; }
.contact-lines { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; justify-content: flex-end; }
.contact-lines .phone-display, .contact-lines .contact-email-row { margin: 0; }
.phone-link { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: .02em; direction: ltr; }
.contact-email-link { font-size: 15px; font-weight: 600; color: #444; }
.phone-link:hover, .contact-email-link:hover { color: #555; text-decoration: underline; }
.contact-actions .channel-buttons { margin: 0; gap: 8px; justify-content: flex-end; }
.channel-btn { background: #fff; color: var(--ink); border: 1px solid #d6d6d6; padding: 10px 18px; font-size: 14px; gap: 8px; border-radius: 999px; }
.channel-btn:hover { transform: none; opacity: 1; border-color: var(--ink); }
.channel-btn .channel-icon { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .contact-section { padding: 32px 0; }
  .contact-actions, [dir="ltr"] .contact-actions { align-items: stretch; }
  .contact-lines, .contact-actions .channel-buttons { justify-content: flex-start; }
  .contact-actions .channel-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channel-btn { justify-content: center; }
}

.footer { background: #fff; border-top: 1px solid #eee; padding: 48px 0 28px; }
.footer-logo { color: var(--ink); }
.footer-tagline { color: #6b6b6b; }
.footer-col-title { color: #8a8a8a; }
.footer-links a, .footer-col a { color: #444; }
.footer-links a:hover, .footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-bottom { border-top-color: #eee; color: #8a8a8a; }

/* Loyalty Club (profile): ink card with gold, the logo's colour, instead of
   purple. Its accents used to be the old orange --primary; once that turned
   ink they vanished on the dark card (e.g. the "only N more orders" number). */
:root { --gold: #D4AF37; }
.lc-card { background: var(--ink); box-shadow: none; border: 1px solid #2a2a2a; }
.lc-card::after { background: radial-gradient(circle, rgba(212,175,55,.12) 0%, transparent 65%); }
.lc-stamp.lc-next { border-color: rgba(212,175,55,.55); background: rgba(212,175,55,.08); animation-name: lc-next-ring-gold; }
@keyframes lc-next-ring-gold {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); border-color: rgba(212,175,55,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(212,175,55,.15); border-color: rgba(212,175,55,.9); }
}
.lc-prize.lc-locked .lc-prize-box:hover { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.5); }
.lc-prize.lc-unlocked .lc-prize-box { background: linear-gradient(140deg, rgba(255,184,0,.22), rgba(212,175,55,.12)); }
.lc-prize-q { background: var(--gold); color: var(--ink); }
.lc-footer strong { color: var(--gold); }
.lp-card { background: var(--ink); }

/* Favourites in ink like the rest (was red: header button, badge, hearts). */
.fav-header-btn:hover, .fav-header-btn.has-favs { color: var(--ink); border-color: var(--ink); }
.fav-header-btn.has-favs svg path { fill: currentColor; }
.fav-header-badge { background: var(--ink); }
.fav-btn:hover, .fav-btn.fav-active { color: var(--ink); }
.fav-panel-remove:hover { background: var(--ink); }
.fav-card-remove:hover { color: var(--ink); }
.empty-banner--favs { background: var(--soft); color: var(--ink); }
.empty-banner--favs .empty-banner-bg { display: none; }

/* Toasts: one ink pill at the bottom, like the copy toast. The app toast
   used to be a white card in the middle of a darkened screen with a big
   green (or red) circle. Errors keep a small red mark so they read as errors. */
#app-toast { background: none; inset: auto 0 36px 0; pointer-events: none; }
.app-toast-card {
  flex-direction: row; gap: 10px; padding: 12px 22px; min-width: 0;
  background: var(--ink); border-radius: 999px; box-shadow: 0 8px 32px rgba(0,0,0,.25);
  animation: app-toast-up .22s ease;
}
@keyframes app-toast-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.app-toast-check { width: auto; height: auto; background: none; color: #fff; font-size: 15px; }
.app-toast-check.error { background: none; color: #f87171; }
#app-toast-msg { color: #fff; font-size: 14px; }
#code-copy-toast { background: var(--ink); }

/* Order flow (2026-10-07): the confirm popup was a red square button with
   inline styles; order/return buttons, the receipt link and the tracking/
   return boxes kept the old blue, red, purple and beige. All in the minimal
   look now: pill buttons, ink for the main action, outline for the rest. */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9000; align-items: center; justify-content: center; padding: 16px; }
.confirm-box { background: #fff; border-radius: 20px; padding: 28px 24px 22px; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.confirm-msg { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.6; margin: 0 0 20px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-yes, .confirm-no { flex: 1; min-height: 46px; padding: 0 16px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.confirm-yes { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.confirm-yes:hover { background: #000; }
.confirm-no { background: #fff; color: var(--ink); border: 1px solid #d6d6d6; }
.confirm-no:hover { border-color: var(--ink); }

.order-action-btn, .return-action-btn, .checkout-submit-btn, .checkout-add-addr-btn, .addr-cancel-btn, .auth-submit-btn, .qa-confirm-btn { border-radius: 999px; }
.order-action-cancel { border: 1px solid #d6d6d6 !important; color: var(--ink); }
.order-action-cancel:hover { border-color: var(--ink) !important; opacity: 1; }
.order-receipt-link { color: var(--ink); }
.order-tracking-box, .return-policy-box { background: var(--soft); border: 0; border-radius: 12px; }
.order-payment-info-box { border-inline-start-color: var(--ink); border-radius: 12px; }
.return-btn-secondary { border: 1px solid #d6d6d6 !important; color: var(--ink); }
.return-btn-amber, .return-btn-success { background: var(--ink); color: #fff; }
.profile-logout-btn { color: #555; border-color: #e5e5e5; }
.profile-logout-btn svg { stroke: currentColor; }
.profile-logout-btn:hover { background: var(--soft); border-color: var(--ink); color: var(--ink); }
/* The link-request page opened behind the profile panel (z-index 900 vs
   410), so "Request a Product by Link" in Orders seemed to do nothing. */
#linkreq-page-overlay { z-index: 950; }

/* Header between phone and wide desktop: the full menu plus language,
   login, favourites, cart and "Place Order" didn't fit below ~1150px
   (English below 1100), so the cart button was cut off on 13" laptops.
   1121–1199px: a tighter menu without "Place Order" (it's in the ☰ menu
   too); 1120px and below: the ☰ menu, as on phones. Checked in fa/en/tr. */
@media (max-width: 1199px) {
  .order-btn { display: none; }
  .nav-link { padding-inline: 7px; font-size: 13.5px; }
  .nav-links { margin-inline-start: 12px; }
}
@media (max-width: 1120px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; padding: 10px; }
}

/* Animated home banner (heroBanner.js): a 600x600 stage scaled to the box. */
.hero-media.hero-banner { display: block; position: relative; flex: 1 1 440px; max-width: 560px; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; background: #f5f5f2; cursor: pointer; }
.hb-stage { position: absolute; left: 0; top: 0; width: 600px; height: 600px; transform-origin: 0 0; overflow: hidden; }
.hb-cam { position: absolute; left: 0; top: 0; width: 600px; height: 600px; transform-origin: 0 0; }
.hb-tile, .hb-circle { position: absolute; overflow: hidden; background: #ececec; }
.hb-tile img, .hb-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-iris { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-chip { position: absolute; right: 10px; bottom: 10px; background: #fff; color: var(--accent-text, #C2410C); font-weight: 800; font-size: 15px; padding: 3px 10px; border-radius: 999px; direction: ltr; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.hb-pill { position: absolute; background: #1a1a1a; overflow: hidden; display: flex; align-items: center; justify-content: center; z-index: 3; }
.hb-pill span { color: #fff; font-weight: 800; font-size: 26px; white-space: nowrap; direction: rtl; }
.hb-card { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: #fff; border-radius: 26px 26px 0 0; padding: 22px 28px; direction: rtl; text-align: right; z-index: 4; box-shadow: 0 -10px 30px rgba(0,0,0,.08); }
.hb-brand { font-weight: 800; font-size: 15px; letter-spacing: .14em; color: #6b6b6b; direction: ltr; text-align: right; }
.hb-name { font-weight: 700; font-size: 24px; color: #1a1a1a; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 330px; }
.hb-row { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.hb-new { font-weight: 900; font-size: 32px; color: #1a1a1a; direction: ltr; }
.hb-old { font-size: 18px; color: #8a8a8a; text-decoration: line-through; direction: ltr; }
.hb-btn { position: absolute; left: 28px; bottom: 26px; background: #1a1a1a; color: #fff; font-weight: 800; font-size: 18px; padding: 12px 22px; border-radius: 999px; }
.hb-badge { position: absolute; left: 28px; top: 22px; background: #C2410C; color: #fff; font-weight: 900; font-size: 17px; padding: 5px 14px; border-radius: 999px; }
.hb-flood { position: absolute; border-radius: 50%; background: #1a1a1a; z-index: 5; }
.hb-card[dir="ltr"] { direction: ltr; text-align: left; }
.hb-card[dir="ltr"] .hb-brand { text-align: left; }
.hb-card[dir="ltr"] .hb-btn, .hb-card[dir="ltr"] .hb-badge { left: auto; right: 28px; }
.hero-media.hero-banner { width: 100%; }
@media (max-width: 768px) { .hero-media.hero-banner { flex-basis: auto; max-width: 520px; margin-inline: auto; } }