/* ========================================
   SNG Ayakkabı - Nişantaşı Style v3.0
   ======================================== */

/* ---- Variables ---- */
:root {
  --primary:    #111111;
  --primary-50: rgba(17,17,17,.05);
  --primary-10: rgba(17,17,17,.1);
  --accent:     #111111;        /* black as primary CTA */
  --accent-dark:#000000;
  --accent-light: #f5f5f5;
  --danger:     #c0392b;
  --success:    #27ae60;
  --bg:         #ffffff;
  --bg-light:   #f5f5f5;
  --bg-darker:  #eeeeee;
  --border:     #e0e0e0;
  --border-dark:#c8c8c8;
  --text:       #111111;
  --text-muted: #888888;
  --text-light: #cccccc;
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --shadow:     0 2px 16px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --radius-sm:  2px;
  --radius:     0px;
  --radius-lg:  0px;
  --ease:       cubic-bezier(.25,.46,.45,.94);
  --t:          .2s;
  --header-h:   56px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: auto;
  overflow-x: clip;           /* clip: scroll container oluşturmaz, sadece kırpar — wheel scroll çalışır */
  -webkit-overflow-scrolling: auto;
}
body {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;           /* clip: scroll container oluşturmaz */
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; transition: color var(--t) var(--ease); }
a:hover { color: var(--primary); }
img { max-width: 100%; height: auto; display: block; }

/* ========================================
   ANNOUNCEMENT BAR
   ======================================== */
.top-bar {
  background: var(--primary);
  color: #fff;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-height: 44px;
  white-space: nowrap;
}
.top-bar a { color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 2px; }
.top-bar a:hover { color: #fff; }
.top-bar .ann-close {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,.6);
  font-size: 16px; cursor: pointer; line-height: 1; padding: 0;
}
.top-bar .ann-close:hover { color: #fff; }

/* ========================================
   HEADER — Nişantaşı Minimal
   ======================================== */
.main-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;          /* bounce sırasında genişleme yapmasın */
  max-width: 100vw;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

/* ---- Hero Page: Transparent Fixed Header ---- */
body.hero-page {
  background: #111; /* prevent white flash before hero loads */
}
body.hero-page .main-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
}
body.hero-page .main-header.scrolled {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
/* White icons/logo when transparent */
body.hero-page .main-header:not(.scrolled) .header-logo-center,
body.hero-page .main-header:not(.scrolled) .header-nav-link,
body.hero-page .main-header:not(.scrolled) .header-icon,
body.hero-page .main-header:not(.scrolled) .hamburger-btn {
  color: #fff;
}
/* Mobilde header ikonları her zaman koyu — arka plan görselle karışmasın */
@media (max-width: 991px) {
  body.hero-page .main-header:not(.scrolled) .hamburger-btn,
  body.hero-page .main-header:not(.scrolled) .header-icon,
  body.hero-page .main-header:not(.scrolled) .header-logo-center {
    color: #111 !important;
  }
}
body.hero-page .main-header.scrolled .header-logo-center,
body.hero-page .main-header.scrolled .header-nav-link,
body.hero-page .main-header.scrolled .header-icon,
body.hero-page .main-header.scrolled .hamburger-btn {
  color: var(--primary);
}

/* ---- Desktop Nav Links ---- */
.header-desktop-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 100%;
}
.header-nav-item {
  display: flex;
  align-items: center;
  height: 100%;
  position: static; /* mega positions relative to header */
}
.header-nav-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  padding: 0 18px;
  height: 100%;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition: opacity .2s;
}
/* Hover underline animation */
.header-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 18px; right: 18px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.header-nav-link:hover::after,
.header-nav-item.has-mega:hover > .header-nav-link::after {
  transform: scaleX(1);
}
.header-nav-link:hover { opacity: .7; color: inherit; }
.header-nav-item.has-mega:hover > .header-nav-link { opacity: .7; }

/* ---- MEGA MENU ---- */
.mega-menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .22s ease, visibility .22s, transform .22s ease;
  z-index: 998;
}
.header-nav-item.has-mega:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}
.mega-menu-inner {
  display: flex;
  padding: 32px 40px 36px;
  gap: 0;
  overflow-x: auto;
}
.mega-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 32px 0 0;
  min-width: 130px;
  flex-shrink: 0;
}
.mega-col + .mega-col {
  padding-left: 32px;
  border-left: 1px solid var(--border);
}
.mega-cat-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  display: block;
}
.mega-sub-link {
  font-size: 12px;
  font-weight: 400;
  color: #666;
  text-decoration: none;
  line-height: 1.6;
  transition: color .15s;
}
.mega-sub-link:hover { color: var(--primary); }

/* Mega open on hero: force white header */
body.hero-page .main-header:has(.header-nav-item.has-mega:hover),
body.hero-page .main-header.mega-open {
  background: #fff !important;
  border-bottom-color: var(--border) !important;
}
body.hero-page .main-header:has(.header-nav-item.has-mega:hover) .header-logo-center,
body.hero-page .main-header:has(.header-nav-item.has-mega:hover) .header-nav-link,
body.hero-page .main-header:has(.header-nav-item.has-mega:hover) .header-icon,
body.hero-page .main-header:has(.header-nav-item.has-mega:hover) .hamburger-btn,
body.hero-page .main-header.mega-open .header-logo-center,
body.hero-page .main-header.mega-open .header-nav-link,
body.hero-page .main-header.mega-open .header-icon,
body.hero-page .main-header.mega-open .hamburger-btn {
  color: var(--primary) !important;
}


.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  height: var(--header-h);
  padding: 0 16px;
}
.header-left {
  display: flex;
  align-items: stretch;
}
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
/* Logo — always centered via grid */
.header-logo-center {
  font-family: 'Cormorant Garamond', 'Inter', serif;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--primary);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
}
.header-logo-center:hover { color: var(--primary); }

/* Hamburger */
.hamburger-btn {
  background: none; border: none;
  color: var(--primary); cursor: pointer;
  padding: 8px; line-height: 1;
  display: flex; align-items: center;
  align-self: center; /* stay vertically centered when header-left is stretch */
  transition: opacity var(--t);
}
.hamburger-btn:hover { opacity: .6; }

/* Header Icon (search, bag) */
.header-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  transition: opacity var(--t);
  position: relative;
  padding: 8px;
  border: none; background: none;
  cursor: pointer; line-height: 1;
  text-decoration: none;
}
.header-icon:hover { opacity: .6; color: var(--primary); text-decoration: none; }
.header-bag { position: relative; }

/* Cart Badge */
.cart-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--primary); color: #fff;
  font-size: 9px; font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ========================================
   SEARCH OVERLAY
   ======================================== */
.search-overlay {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 16px 24px; z-index: 998;
  box-shadow: var(--shadow);
}
.search-overlay.show { display: block; }
.search-overlay-inner { position: relative; max-width: 600px; margin: 0 auto; }
.search-overlay-form { display: flex; align-items: center; gap: 10px; }
.search-overlay-icon { color: var(--text-muted); flex-shrink: 0; }
.search-overlay-input {
  flex: 1; border: none; outline: none;
  font-size: 14px; color: var(--text); background: none;
  font-family: inherit; letter-spacing: 0.3px;
}
.search-overlay-input::placeholder { color: var(--text-muted); }
.search-overlay-close {
  background: none; border: none; font-size: 16px;
  color: var(--text-muted); cursor: pointer; padding: 4px; line-height: 1;
}
.search-overlay-close:hover { color: var(--primary); }
.search-dropdown {
  position: absolute; top: calc(100% + 12px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); z-index: 999;
  display: none; padding: 16px;
  border-radius: var(--radius);
}
.search-dropdown.show { display: block; }

/* Kart ızgarası */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
@media (max-width: 480px) {
  .search-results-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* Tek kart */
.search-result-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--text);
  border: 1px solid var(--border);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
}
.search-result-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: var(--text);
}
.search-result-card-img {
  width: 100%; aspect-ratio: 3/4;
  object-fit: cover; display: block;
  background: var(--bg-light);
}
.search-result-card-body {
  padding: 7px 8px 9px;
  display: flex; flex-direction: column; gap: 2px;
}
.search-result-card-name {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result-card-price {
  font-size: 11px; font-weight: 700; margin-top: 2px;
}
.search-result-card-oldprice {
  font-size: 10px; color: var(--text-muted);
  text-decoration: line-through; margin-top: 1px;
}

/* Alt footer: tüm sonuçlar linki */
.search-results-footer {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.search-results-count {
  font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px;
}
.search-results-all-link {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--primary);
  text-decoration: none; display: flex; align-items: center; gap: 4px;
}
.search-results-all-link:hover { opacity: .7; color: var(--primary); }

/* Boş durum */
.search-empty {
  text-align: center; padding: 24px 0;
  color: var(--text-muted); font-size: 12px; letter-spacing: 0.5px;
}

/* ========================================
   OFF-CANVAS MENÜ — Nişantaşı Stili
   ======================================== */
.site-offcanvas {
  width: 310px !important;
  border-right: none !important;
  overflow: clip; /* clip: transform taşmalarını da keser, hidden'ın yapamadığını yapar */
  box-shadow: 4px 0 24px rgba(0,0,0,.08);
}
.site-offcanvas .offcanvas-body { padding: 0 !important; }

/* Close button row */
.oc-header {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 20px;
  flex-shrink: 0;
}
.oc-close-btn {
  background: none; border: none;
  font-size: 16px; color: var(--primary);
  cursor: pointer; padding: 4px; line-height: 1;
  transition: opacity var(--t);
}
.oc-close-btn:hover { opacity: .5; }

/* Panel sliding container */
.oc-panel {
  position: absolute;
  top: 52px; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  background: #fff;
  transition: transform .28s var(--ease);
  overflow-y: auto;
  overflow-x: hidden;
}
/* Offcanvas KAPALI iken sub-paneller tamamen gizle
   (Bootstrap offcanvas translateX(-100%) + sub-panel translateX(100%)
    birbirini iptal ederek viewport'ta görünür hale geliyordu) */
#siteMenu:not(.show):not(.showing) .oc-sub-panel {
  display: none;
}
.oc-sub-panel {
  transform: translateX(100%);
}
.oc-sub-panel.oc-panel-active {
  transform: translateX(0);
}

/* Nav links */
.oc-nav {
  flex: 1;
  padding: 4px 0;
}
.oc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t);
  background: none; border-left: none; border-right: none;
  width: 100%; text-align: left;
  text-transform: uppercase;
}
.oc-link:hover { background: transparent; color: #555; }
.oc-link .bi-chevron-right { font-size: 10px; color: #aaa; flex-shrink: 0; font-family: 'bootstrap-icons'; }
/* Featured links: YENİ SEZON, OUTLET */
.oc-link-featured {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: #b07d4a;
  text-transform: uppercase;
}
.oc-link-featured:hover { color: #8a5f35; }
.oc-link-sale {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: #b07d4a;
  text-transform: uppercase;
}
.oc-link-all {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
}

/* Back button in sub-panel */
.oc-back-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 1.8px;
  color: var(--text-muted); cursor: pointer; width: 100%; text-align: left;
  text-transform: uppercase;
}
.oc-back-btn .bi-chevron-left { font-size: 11px; font-family: 'bootstrap-icons'; }
.oc-back-btn:hover { color: var(--primary); }

/* Bottom account/tracking links */
.oc-bottom {
  border-top: 1px solid var(--border);
  padding: 4px 0;
  margin-top: auto;
}
.oc-bottom-link {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #b07d4a; text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.oc-bottom-link:last-child { border-bottom: none; }
.oc-bottom-link .bi { font-size: 15px; color: #b07d4a; font-family: 'bootstrap-icons'; }
.oc-bottom-link:hover { color: #8a5f35; }

/* ========================================
   LOGO (logo-text for admin/other)
   ======================================== */
.logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600;
  letter-spacing: 3px; color: var(--primary);
  text-transform: uppercase; line-height: 1;
}

/* ========================================
   SECTION TITLE
   ======================================== */
.section-title {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; gap: 12px;
}
.section-title h2 {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 0; color: var(--primary);
}
.section-title .see-all {
  font-size: 11px; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap; letter-spacing: 0.5px;
  transition: color var(--t);
}
.section-title .see-all:hover { color: var(--primary); }
.section-title.center {
  flex-direction: column; align-items: center; text-align: center;
}
.section-title p { color: var(--text-muted); font-size: 13px; max-width: 480px; margin: 6px 0 0; }
.title-line { width: 28px; height: 1px; background: var(--primary); margin: 10px 0 0; }

/* ========================================
   PRODUCT CARD — Nişantaşı Stili
   ======================================== */
.product-card {
  background: #fff;
  position: relative;
  border: none;
}
.product-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2/3;
  background: var(--bg-light);
}
.product-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
  display: block;
}
.product-card:hover .product-image-wrap img,
.product-card:hover .product-image-link img { transform: scale(1.04); }
/* Görsel anchor tam kaplar, butonların üstüne geçmemesi için z-index 1 */
.product-image-link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-image-link img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

/* Badges */
.product-badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 4px; z-index: 2;
}
.product-badge {
  display: inline-block; padding: 2px 8px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
}
.badge-new      { background: #111; color: #fff; }
.badge-sale     { background: var(--danger); color: #fff; }
.badge-hot      { background: #111; color: #fff; }
.badge-son-stok { background: #e65c00; color: #fff; }
.badge-stok-yok { background: #999; color: #fff; }

/* Quick Add "+" button — bottom right */
.pcard-quick-add {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 32px; height: 32px;
  background: #fff;
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 300;
  color: var(--primary); cursor: pointer; z-index: 3;
  transition: background var(--t), color var(--t);
  line-height: 1;
}
.pcard-quick-add:hover {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* Wishlist btn — keep hidden, show on hover */
.pcard-wishlist-btn {
  position: absolute; right: 10px; top: 10px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.9);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--primary); cursor: pointer; z-index: 3;
  opacity: 0; transition: opacity var(--t), background var(--t);
}
.product-card:hover .pcard-wishlist-btn { opacity: 1; }
.pcard-wishlist-btn.active,
.pcard-wishlist-btn:hover { background: #fff; color: var(--danger); }

/* Compare btn */
.pcard-compare-btn {
  position: absolute; bottom: 50px; right: 10px;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.85);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-muted); cursor: pointer; z-index: 3;
  opacity: 0; transition: opacity var(--t);
}
.product-card:hover .pcard-compare-btn { opacity: 1; }
.pcard-compare-btn:hover { color: var(--primary); }

/* Hide old overlay actions */
.pcard-overlay-actions { display: none; }

/* Product Info */
.product-info { padding: 10px 10px 14px; }
.product-brand {
  font-size: 9px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 3px; font-weight: 500;
}
.product-name {
  font-size: 12px; font-weight: 400;
  color: var(--primary); margin-bottom: 5px;
  line-height: 1.4; letter-spacing: 0.2px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  text-transform: uppercase;
}
.product-price {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.price-current {
  font-size: 13px; font-weight: 500; color: var(--primary);
}
.price-original {
  font-size: 11px; color: var(--text-muted); text-decoration: line-through;
}
.price-sale { color: var(--danger); }
.product-sizes { display: none; } /* hide on listing */

/* ========================================
   FILTER TOP BAR — Nişantaşı Stili
   ======================================== */
.filter-topbar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  margin-bottom: 0;
  background: #fff;
  position: sticky;
  top: var(--header-h);
  z-index: 100;
}
.filter-topbar-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: none; border: none; border-right: 1px solid var(--border);
  font-size: 11px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; color: var(--primary);
  white-space: nowrap;
}
.filter-topbar-btn:hover { background: var(--bg-light); }
.filter-topbar-btn svg { width: 14px; height: 14px; }

.filter-topbar-sort {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 16px; border-right: 1px solid var(--border);
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; color: var(--primary); white-space: nowrap;
}
.filter-topbar-sort select {
  border: none; outline: none; background: none;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  font-family: inherit; color: var(--primary); cursor: pointer;
  padding: 0; appearance: none; -webkit-appearance: none;
}

.filter-topbar-spacer { flex: 1; }

.filter-topbar-views {
  display: flex; align-items: center;
  border-left: 1px solid var(--border);
}
.view-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: none; border-left: 1px solid var(--border);
  cursor: pointer; color: var(--text-muted);
  transition: color var(--t);
}
.view-btn:first-child { border-left: none; }
.view-btn.active, .view-btn:hover { color: var(--primary); }
.view-btn svg { width: 14px; height: 14px; }

/* Filter count badge */
.filter-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; background: var(--primary); color: #fff;
  font-size: 9px; border-radius: 50%; font-weight: 700;
}

/* Filter Drawer (slide from left) */
.filter-drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 1050;
}
.filter-drawer-overlay.show { display: block; }
.filter-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 300px; background: #fff; z-index: 1051;
  transform: translateX(-100%); transition: transform .28s var(--ease);
  overflow-y: auto; padding: 0;
  display: flex; flex-direction: column;
}
.filter-drawer.show { transform: translateX(0); }
.filter-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.filter-drawer-title {
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.filter-drawer-close {
  background: none; border: none; font-size: 18px;
  color: var(--text-muted); cursor: pointer;
}
.filter-drawer-body { flex: 1; padding: 0; overflow-y: auto; }
.filter-group {
  border-bottom: 1px solid var(--border); padding: 16px 20px;
}
.filter-group:last-child { border-bottom: 0; }
.filter-title {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--primary);
  margin-bottom: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.filter-options { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-option {
  border: 1px solid var(--border); padding: 5px 12px;
  font-size: 11px; cursor: pointer;
  transition: all var(--t); font-weight: 400; letter-spacing: 0.3px;
}
.filter-option:hover, .filter-option.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.filter-drawer-footer {
  padding: 16px 20px; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: #fff; display: flex; gap: 8px;
}
.filter-apply-btn {
  flex: 1; background: var(--primary); color: #fff;
  border: none; padding: 12px; font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  transition: opacity var(--t);
}
.filter-apply-btn:hover { opacity: .8; }
.filter-clear-btn {
  background: none; border: 1px solid var(--border); padding: 12px 16px;
  font-size: 11px; letter-spacing: 1px; cursor: pointer; color: var(--text-muted);
}
.filter-clear-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Old filter sidebar (desktop) */
.filter-sidebar { position: sticky; top: 80px; }

/* ========================================
   PRODUCT GRID
   ======================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: transparent;
  padding: 8px;
}
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .product-grid { grid-template-columns: repeat(5, 1fr); }
  .product-image-wrap { aspect-ratio: 3/4; }
}
/* cols-1: büyük liste */
.product-grid.cols-1 { grid-template-columns: repeat(1, 1fr); gap: 8px; }
/* cols-2: 2 sütun */
.product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 992px) {
  .product-grid.cols-2 .product-image-wrap { aspect-ratio: 4/3; }
}
/* cols-3: mobil 3 sütun (kompakt) */
.product-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
}
.product-grid.cols-3 .product-image-wrap { aspect-ratio: 3/4; }
.product-grid.cols-3 .product-name { font-size: 10px; }
.product-grid.cols-3 .price-current { font-size: 11px; }
.product-grid.cols-3 .product-info { padding: 6px 8px 10px; }
/* cols-4: desktop 4 sütun */
.product-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 8px;
}
.product-grid.cols-4 .product-image-wrap { aspect-ratio: 3/4; }
/* cols-6: desktop 6 sütun */
.product-grid.cols-6 {
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 6px;
}
.product-grid.cols-6 .product-image-wrap { aspect-ratio: 1/1; }
.product-grid.cols-6 .product-name { font-size: 10px; }
.product-grid.cols-6 .price-current { font-size: 11px; }
.product-grid.cols-6 .product-info { padding: 6px 8px 10px; }

/* ========================================
   HERO DUO BANNER — Hero alanında 2 yan yana tam ekran görsel
   ======================================== */
/* Desktop 2'li Swiper sarmalayıcı */
.hero-duo-swiper-wrap { position: relative; height: 100vh; background: #111; }
.hero-duo-desktop-swiper { height: 100%; }
.hero-duo-desktop-swiper .swiper-slide { height: 100%; }
.hero-duo-desktop-swiper .hero-duo-item { height: 100%; display: block; }
/* Sabit içerik — görsellerin ortasında, pointer-events: none ile linklere engel olmaz */
.hero-duo-fixed-content {
  position: absolute;
  bottom: 10%;
  left: 0; right: 0;
  z-index: 10;
  pointer-events: none;
}
.hero-duo-fixed-content .btn-primary-custom { pointer-events: auto; }
/* Eski static grid (2 banner için fallback, kullanılmıyor ama CSS korunur) */
.hero-duo-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  background: #111;
}
.hero-duo-item {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: #111;
}
.hero-duo-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}
.hero-duo-item:hover img { transform: scale(1.04); }
/* Dikey orta çizgi */
.hero-duo-section .hero-duo-item:first-child::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.15);
  z-index: 2;
}
.hero-duo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, transparent 50%);
  display: flex; align-items: flex-end;
  padding: 48px 40px;
  pointer-events: none;
}
.hero-duo-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px; font-weight: 500;
  color: #fff; letter-spacing: 1px; line-height: 1.15;
}
@media (max-width: 1024px) {
  .hero-duo-title { font-size: 26px; }
  .hero-duo-overlay { padding: 32px 24px; }
}

/* DUO BANNER — tek banner geniş, ikili yan yana */
.duo-banner-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
/* Tek banner: tam genişlik */
.duo-banner-section.duo-count-1 {
  grid-template-columns: 1fr;
}
.duo-banner-section.duo-count-1 .duo-banner-item {
  aspect-ratio: 16/7;
}
.duo-banner-item {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 3/4;
  background: var(--bg-light);
  text-decoration: none;
}
.duo-banner-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
  display: block;
}
.duo-banner-item:hover img { transform: scale(1.04); }
.duo-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.38) 0%, transparent 55%);
  display: flex; align-items: flex-end;
  padding: 28px 24px;
  pointer-events: none;
}
.duo-banner-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 500;
  color: #fff; letter-spacing: 1px; line-height: 1.2;
}
@media (max-width: 768px) {
  .duo-banner-title { font-size: 20px; }
}
@media (max-width: 767px) {
  .duo-banner-section { grid-template-columns: 1fr; }
  .duo-banner-item { aspect-ratio: 4/3; }
  .duo-banner-section.duo-count-1 .duo-banner-item { aspect-ratio: 4/3; }
}
.duo-banner-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
  display: block;
}
.duo-banner-item:hover img { transform: scale(1.04); }
.duo-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.38) 0%, transparent 55%);
  display: flex; align-items: flex-end;
  padding: 28px 24px;
  pointer-events: none;
}
.duo-banner-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 500;
  color: #fff; letter-spacing: 1px; line-height: 1.2;
}
@media (max-width: 768px) {
  .duo-banner-title { font-size: 20px; }
}

/* ========================================
   MARQUEE ŞERİT
   ======================================== */
.marquee-strip {
  background: var(--primary);
  color: #fff;
  overflow: hidden;
  padding: 12px 0;
  white-space: nowrap;
  user-select: none;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  animation: marquee-scroll 30s linear infinite;
  white-space: nowrap;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-size: 10px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase;
}
.marquee-diamond { opacity: .5; font-size: 8px; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ========================================
   HOME PRODUCTS — Tab Sekme + Grid
   ======================================== */
.home-products-section {
  padding: 0;
  overflow: hidden; /* sol/sağ kenar grid çizgilerini gizle */
}
.home-tabs-header {
  display: flex;
  align-items: center;
  padding: 28px 20px 16px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.home-tabs-header::-webkit-scrollbar { display: none; }
.home-tabs-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap; margin: 0; flex-shrink: 0;
}
.home-tabs-nav {
  display: flex; gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}
.home-tabs-nav::-webkit-scrollbar { display: none; }
.home-tab-btn {
  background: none; border: none; cursor: pointer; text-decoration: none;
  font-size: 11px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 16px;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}
.home-tab-btn:hover,
.home-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

@media (max-width: 768px) {
  .home-tabs-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .home-tabs-nav {
    width: 100%;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .home-tab-btn:first-child {
    padding-left: 0;
  }
}

/* ========================================
   FEATURES STRIP (sadece footer üstü küçük)
   ======================================== */

.features-strip {
  background: #fff; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 20px 0;
}
.feature-item { display: flex; align-items: center; gap: 12px; }
.feature-icon {
  width: 36px; height: 36px; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.feature-text strong { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; display: block; text-transform: uppercase; }
.feature-text small { color: var(--text-muted); font-size: 10px; }

/* ========================================
   HERO SLIDER
   ======================================== */
.hero-slider { position: relative; overflow: hidden; background: #111; }
.hero-slide { position: relative; height: 100vh; overflow: hidden; background: #111; }
@media (max-width: 768px) { .hero-slide { height: 100svh; } }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Hero Duo: mobil swiper sadece <992px göster, desktop yan yana sadece >=992px */
@media (min-width: 992px) {
  .hero-duo-mobile-swiper { display: none !important; }
}
@media (max-width: 991px) {
  .hero-duo-desktop-only { display: none !important; }
}
/* Duo ve Multi Swiper kapsayıcı yükseklikleri */
.hero-multi-swiper { height: 100vh; }
@media (max-width: 768px) {
  .hero-multi-swiper { height: 100svh; }
}
.hero-multi-swiper .swiper-slide { height: 100%; }
/* Hero arka plan fade (2-3 banner, mobil): içerik sabit, görseller geçiş yapar */
.hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  display: block;
}
.hero-bg-img.active { opacity: 1; }
.hero-slide-content {
  position: absolute; bottom: 10%; left: 0; right: 0;
  z-index: 2; text-align: center;
}
.hero-slide::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, transparent 60%);
  z-index: 1;
}
.hero-tag {
  display: inline-block; background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: #fff; font-size: 9px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  padding: 5px 18px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.3);
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px; font-weight: 600;
  color: #fff; line-height: 1.05;
  margin-bottom: 20px; letter-spacing: 2px;
}
@media (max-width: 768px) { .hero-title { font-size: 32px; } }
.hero-subtitle {
  font-size: 12px; color: rgba(255,255,255,.8);
  margin-bottom: 24px; line-height: 1.6;
  letter-spacing: 1px; text-transform: uppercase;
}
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  color: #fff; background: none; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.4);
  transition: background var(--t);
}
.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover { background: rgba(255,255,255,.15); }
.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after { font-size: 13px; font-weight: 700; }
.hero-slider .swiper-pagination-bullet { background: rgba(255,255,255,.5); width: 5px; height: 5px; }
.hero-slider .swiper-pagination-bullet-active { background: #fff; width: 24px; border-radius: 3px; }

/* ========================================
   CTA BUTTONS
   ======================================== */
.btn-primary-custom {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--primary);
  padding: 12px 36px; font-size: 11px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  border: none; cursor: pointer; text-decoration: none;
  transition: background var(--t), color var(--t);
}
.btn-primary-custom:hover { background: var(--primary); color: #fff; }
.btn-primary-custom.dark {
  background: var(--primary); color: #fff;
}
.btn-primary-custom.dark:hover { background: #333; }

/* ========================================
   CATEGORY CARDS
   ======================================== */
.category-card {
  position: relative; overflow: hidden; cursor: pointer; display: block;
  aspect-ratio: 3/4;
}
.category-card img {
  width: 100%; height: 100%;
  object-fit: cover; transition: transform .7s var(--ease);
}
.category-card:hover img { transform: scale(1.04); }
.category-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.4) 0%, transparent 50%);
  display: flex; align-items: flex-end; padding: 18px;
}
.category-card-title {
  color: #fff; font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 500; letter-spacing: 1px; line-height: 1.2;
}
.category-card-sub { color: rgba(255,255,255,.65); font-size: 11px; margin-top: 3px; letter-spacing: 0.5px; }
.category-card-btn {
  display: inline-block; margin-top: 10px; padding: 6px 18px;
  background: rgba(255,255,255,.9); color: var(--primary);
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
}

/* ========================================
   PRODUCT DETAIL
   ======================================== */
.product-gallery .main-img-wrap {
  aspect-ratio: 3/4; overflow: hidden;
  background: var(--bg-light); cursor: zoom-in;
}
.product-gallery .main-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease);
}
.product-gallery .main-img-wrap:hover img { transform: scale(1.04); }
.thumb-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.thumb-item {
  width: 64px; height: 80px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer;
  transition: border-color var(--t); background: var(--bg-light);
}
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.thumb-item.active, .thumb-item:hover { border-color: var(--primary); }

.product-detail-brand {
  font-size: 10px; letter-spacing: 2px; color: var(--text-muted);
  font-weight: 500; text-transform: uppercase; margin-bottom: 6px;
}
.product-detail-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 500;
  line-height: 1.2; margin-bottom: 14px; letter-spacing: 0.5px;
}
.product-detail-price {
  font-size: 22px; font-weight: 500; color: var(--primary); margin-bottom: 20px;
}
.product-detail-price .original {
  font-size: 15px; color: var(--text-muted); text-decoration: line-through;
  margin-right: 8px; font-weight: 400;
}
.product-detail-price .sale { color: var(--danger); }
.discount-badge {
  display: inline-block; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 600; padding: 2px 8px; margin-left: 8px;
}
.size-selector-title {
  font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
}
.size-guide-link { font-size: 11px; color: var(--text-muted); text-decoration: underline; }
.size-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.size-btn {
  min-width: 44px; height: 44px;
  border: 1px solid var(--border); background: #fff;
  font-size: 12px; font-weight: 400; cursor: pointer;
  transition: all var(--t); display: flex; align-items: center; justify-content: center;
  padding: 0 10px; font-family: inherit;
}
.size-btn:hover { border-color: var(--primary); }
.size-btn.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.size-btn.out-of-stock {
  color: var(--text-light); border-color: var(--border);
  cursor: not-allowed; opacity: .4; position: relative;
}
.size-btn.out-of-stock::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 60%; height: 1px; background: var(--text-light);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.rv-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.renk-varyant {
  display: inline-flex; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; outline: 2px solid transparent;
  cursor: pointer; transition: transform .18s, outline-color .18s;
  text-decoration: none; flex-shrink: 0; padding: 0;
}
.renk-varyant:hover { transform: scale(1.12); border-color: #bbb; }
.renk-varyant-aktif { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); }
.rv-label {
  font-size: 10px; color: var(--text-muted);
  white-space: nowrap; text-align: center;
  max-width: 52px; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2; letter-spacing: 0.3px;
}
/* Eski tooltip sınıfı — geriye dönük uyumluluk */
.rv-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); background: rgba(0,0,0,.8); color: #fff;
  font-size: 10px; padding: 3px 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 10;
}
.rv-wrap:hover .rv-tooltip { opacity: 1; }

/* ========================================
   ANASAYFA KATEGORİ SECTIONLARı
   ======================================== */
.home-cat-section {
  padding: 40px 0 0;
}
.home-cat-section-alt {
  background: var(--bg-light);
  padding-bottom: 40px;
  margin-bottom: -40px;
}
.home-cat-header {
  display: flex; align-items: baseline;
  justify-content: space-between;
  padding: 0 16px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.home-cat-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  margin: 0; color: var(--primary);
}
.home-cat-all {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--t);
}
.home-cat-all:hover { color: var(--primary); }
.home-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
}
@media (min-width: 768px) {
  .home-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .home-cat-header { padding: 0 20px 16px; }
}
@media (min-width: 1200px) {
  .home-cat-grid { grid-template-columns: repeat(5, 1fr); }
}
.qty-selector { display: flex; align-items: center; border: 1px solid var(--border); width: fit-content; }
.qty-btn {
  background: none; border: 0; width: 40px; height: 46px;
  font-size: 18px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-family: inherit; font-weight: 300;
}
.qty-btn:hover { background: var(--bg-light); }
.qty-input {
  width: 48px; text-align: center; border: 0;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  font-size: 14px; font-weight: 500; padding: 0; height: 46px;
  outline: none; font-family: inherit;
}
.btn-add-cart {
  background: var(--primary); color: #fff; border: none;
  padding: 15px 32px; font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; flex: 1;
  transition: opacity var(--t); cursor: pointer;
}
.btn-add-cart:hover { opacity: .8; }
.btn-add-cart:disabled { opacity: .4; cursor: not-allowed; }
.btn-wishlist {
  width: 48px; height: 48px; border: 1px solid var(--border);
  background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: all var(--t); flex-shrink: 0;
}
.btn-wishlist:hover,
.btn-wishlist.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ========================================
   BREADCRUMB
   ======================================== */
.breadcrumb-wrap {
  padding: 10px 0; border-bottom: 1px solid var(--border);
  background: #fff;
}
.breadcrumb { font-size: 11px; margin-bottom: 0; letter-spacing: 0.3px; }
.breadcrumb-item + .breadcrumb-item::before { content: '—'; color: var(--text-muted); font-size: 10px; }
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item.active { color: var(--primary); }

/* ========================================
   FOOTER
   ======================================== */
.site-footer { background: #fff; border-top: 1px solid var(--border); }
.footer-top { padding: 48px 0 32px; }
.footer-widget {}
.footer-title {
  font-size: 10px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; margin-bottom: 16px; color: var(--primary);
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px; transition: color var(--t); }
.footer-links a:hover { color: var(--primary); }
/* Footer logo */
.footer-logo { text-decoration: none; display: inline-block; }
.footer-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--primary);
}
.footer-logo-sub { font-size: 10px; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; }
.social-links { display: flex; gap: 12px; margin-top: 12px; }
.social-link {
  width: 32px; height: 32px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-muted); transition: all var(--t);
}
.social-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.newsletter-form .input-group { border: 1px solid var(--border); }
.newsletter-form .form-control {
  border: none; border-radius: 0; font-size: 12px;
  padding: 10px 14px; background: #fff;
}
.newsletter-form .form-control:focus { box-shadow: none; outline: none; }
.newsletter-form .btn {
  background: var(--primary); color: #fff; border: none;
  border-radius: 0; padding: 10px 16px;
}
.newsletter-form .btn:hover { background: #333; }
.payment-badges { margin-top: 16px; }
.footer-bottom {
  border-top: 1px solid var(--border); padding: 16px 0;
  background: #fff;
}
.footer-bottom small, .footer-bottom a { font-size: 10px; letter-spacing: 0.3px; }

/* ========================================
   CART / CHECKOUT
   ======================================== */
.cart-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-item-img { width: 80px; height: 100px; object-fit: cover; background: var(--bg-light); flex-shrink: 0; }
.cart-item-body { flex: 1; }
.cart-item-name { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3px; }
.cart-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.cart-item-price { font-size: 14px; font-weight: 500; margin-top: 6px; }

/* ========================================
   FORMS / AUTH
   ======================================== */
.form-control, .form-select {
  border: 1px solid var(--border); border-radius: 0;
  font-size: 13px; padding: 10px 14px; font-family: inherit;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary); box-shadow: none; outline: none;
}
.btn-dark { border-radius: 0; letter-spacing: 0.5px; }

/* ========================================
   SCROLL TO TOP
   ======================================== */
.scroll-top-btn {
  position: fixed; bottom: 24px; right: 24px;
  width: 40px; height: 40px;
  background: var(--primary); color: #fff;
  border: none; cursor: pointer; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; opacity: 0; pointer-events: none;
  transition: opacity var(--t);
}
.scroll-top-btn.show { opacity: 1; pointer-events: auto; }
.scroll-top-btn:hover { background: #333; }

/* ========================================
   QUICK VIEW MODAL
   ======================================== */
.qv-modal-content { border: none; border-radius: 0; }
.qv-close-btn {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: #fff; border: 1px solid var(--border); width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer;
}
.qv-close-btn:hover { background: var(--primary); color: #fff; }
.qv-gallery-col { background: var(--bg-light); }
.qv-main-img-wrap { aspect-ratio: 3/4; overflow: hidden; }
.qv-main-img { width: 100%; height: 100%; object-fit: cover; }
.qv-thumbs { display: flex; gap: 4px; padding: 8px; }
.qv-thumb { width: 56px; height: 70px; object-fit: cover; cursor: pointer; border: 2px solid transparent; }
.qv-thumb.active { border-color: var(--primary); }
.qv-info-col {}
.qv-info-inner { padding: 24px 28px; }
.qv-brand { font-size: 9px; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; }
.qv-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; margin-bottom: 12px; }
.qv-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.qv-price-current { font-size: 20px; font-weight: 500; }
.qv-price-original { font-size: 14px; color: var(--text-muted); text-decoration: line-through; }
.qv-size-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.qv-sizes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.qv-size-btn {
  min-width: 40px; height: 40px; border: 1px solid var(--border);
  background: #fff; font-size: 12px; cursor: pointer; padding: 0 8px;
  transition: all var(--t);
}
.qv-size-btn:hover, .qv-size-btn.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.qv-qty-row { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.qv-qty-selector { display: flex; border: 1px solid var(--border); }
.qv-qty-btn { width: 36px; height: 44px; background: none; border: none; font-size: 16px; cursor: pointer; font-weight: 300; }
.qv-qty-input { width: 44px; text-align: center; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 13px; outline: none; }
.qv-add-btn { flex: 1; background: var(--primary); color: #fff; border: none; padding: 12px; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.qv-wish-btn { width: 44px; height: 44px; border: 1px solid var(--border); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.qv-wish-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.qv-detail-link { font-size: 11px; letter-spacing: 1px; text-decoration: underline; text-underline-offset: 2px; color: var(--text-muted); }
.qv-detail-link:hover { color: var(--primary); }
.qv-loading { padding: 60px 0; }

/* ========================================
   COMPARE BAR
   ======================================== */
.compare-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1060;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 12px 24px;
  transform: translateY(100%); transition: transform .3s var(--ease);
}
.compare-bar.show { transform: translateY(0); }
.compare-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.compare-item img { width: 36px; height: 44px; object-fit: cover; background: #444; }
.compare-item-name { max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.compare-bar-btn {
  background: #fff; color: var(--primary); border: none;
  padding: 8px 20px; font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
}
.compare-bar-btn:hover { background: #ddd; }
.compare-bar-clear {
  background: none; border: 1px solid rgba(255,255,255,.4); color: #fff;
  padding: 8px 16px; font-size: 11px; cursor: pointer; letter-spacing: 1px;
}
.compare-bar-clear:hover { border-color: #fff; }

/* ========================================
   TOAST / FLASH MESSAGES
   ======================================== */
.toast { border-radius: 0; font-size: 12px; }
.alert { border-radius: 0; font-size: 13px; border: 1px solid; }
.alert-success { background: #f0faf4; border-color: #c3e6cb; color: #155724; }
.alert-danger  { background: #fdf0f0; border-color: #f5c6cb; color: #721c24; }
.alert-warning { background: #fffbf0; border-color: #ffeeba; color: #856404; }
.alert-info    { background: #f0f7ff; border-color: #b8daff; color: #004085; }

/* ========================================
   PAGE LOADER
   ======================================== */
.page-loader {
  position: fixed; inset: 0; background: #fff; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s, visibility .25s;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring {
  width: 32px; height: 32px; border: 2px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   INFINITE SCROLL LOADER
   ======================================== */
.infinite-loader {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 0; gap: 10px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted);
}
.infinite-loader .loader-ring { width: 20px; height: 20px; border-width: 1.5px; }
.infinite-sentinel { height: 1px; }
.infinite-end {
  text-align: center; padding: 32px 0;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);
  border-top: 1px solid var(--border); margin-top: 4px;
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state { text-align: center; padding: 64px 20px; }
.empty-state-icon { font-size: 40px; color: var(--text-muted); margin-bottom: 16px; }
.empty-state h4 { font-size: 16px; font-weight: 500; margin-bottom: 8px; letter-spacing: 0.5px; }
.empty-state p { color: var(--text-muted); font-size: 12px; }

/* ========================================
   PAGINATION
   ======================================== */
.page-link { border-radius: 0 !important; font-size: 12px; color: var(--primary); border-color: var(--border); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* ========================================
   STOK BİLDİRİM / SOSYAL
   ======================================== */
.stok-bildirim-wrap { margin-top: 12px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--border);
  font-size: 11px; cursor: pointer; transition: all var(--t);
  background: none; color: var(--text-muted);
}
.share-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ========================================
   POPUP — İlk Ziyaret
   ======================================== */
.popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
}
.popup-overlay.open { display: flex; }
.popup-box {
  background: #fff;
  display: flex;
  max-width: 820px;
  width: 92%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
}
.popup-img-side {
  width: 42%;
  flex-shrink: 0;
}
.popup-img-side img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.popup-content-side {
  flex: 1;
  padding: 48px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.popup-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none;
  font-size: 22px; cursor: pointer; color: #aaa;
  line-height: 1; z-index: 2; padding: 0;
}
.popup-close:hover { color: #111; }
.popup-body { display: flex; flex-direction: column; flex: 1; }
.popup-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 500;
  margin-bottom: 10px; line-height: 1.15;
}
.popup-text { font-size: 13px; color: #666; line-height: 1.65; margin-bottom: 20px; }
.popup-code-wrap { margin-bottom: 18px; }
.popup-code-label {
  font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: #aaa;
  display: block; margin-bottom: 6px;
}
.popup-code-box {
  font-family: 'Courier New', monospace;
  font-size: 18px; font-weight: 700;
  letter-spacing: 5px;
  border: 2px dashed #111;
  padding: 8px 20px;
  display: inline-block;
  cursor: pointer;
  user-select: all;
}
.popup-form { display: flex; flex-direction: column; gap: 10px; }
.popup-email-input {
  border: 1px solid var(--border); padding: 11px 14px;
  font-size: 13px; font-family: inherit; outline: none;
  transition: border-color .2s;
}
.popup-email-input:focus { border-color: #111; }
.popup-checkbox-label {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 11px; color: #999; cursor: pointer; line-height: 1.4;
}
.popup-submit {
  background: #111; color: #fff; border: none;
  padding: 13px; font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: opacity .2s;
}
.popup-submit:hover { opacity: .8; }
.popup-skip {
  background: none; border: none;
  font-size: 11px; color: #bbb; cursor: pointer;
  text-decoration: underline; margin-top: 8px;
  text-align: center; padding: 0;
}
.popup-skip:hover { color: #111; }
.popup-success { text-align: center; padding: 24px 0; }
.popup-success .bi { font-size: 36px; color: var(--success); display: block; margin-bottom: 12px; }
.popup-success p { font-size: 13px; color: #555; }
@media (max-width: 600px) {
  .popup-box { flex-direction: column; max-height: 95vh; }
  .popup-img-side { width: 100%; height: 180px; }
  .popup-content-side { padding: 28px 20px; }
  .popup-title { font-size: 22px; }
}

/* ========================================
   WHATSAPP FLOATING BUTONU
   ======================================== */
.whatsapp-float {
  position: fixed;
  bottom: 80px; right: 22px;
  z-index: 1000;
}
.whatsapp-float a {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: #25D366; border-radius: 50%;
  color: #fff; font-size: 26px;
  box-shadow: 0 4px 16px rgba(37,211,102,.35);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.whatsapp-float a:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37,211,102,.5);
  color: #fff;
}

/* ========================================
   ÇEREZ BİLDİRİMİ (KVKK)
   ======================================== */
.cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 1070;
  background: #111; color: #fff;
  padding: 14px 24px;
  display: none;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-bar.show { display: flex; }
.cookie-bar-text {
  flex: 1; font-size: 12px;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}
.cookie-bar-text a { color: #fff; text-decoration: underline; }
.cookie-bar-btn {
  background: #fff; color: #111; border: none;
  padding: 9px 24px; font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer; flex-shrink: 0; transition: opacity .2s;
}
.cookie-bar-btn:hover { opacity: .85; }
@media (max-width: 576px) {
  .cookie-bar { padding: 14px 16px; gap: 12px; }
  .cookie-bar-text { font-size: 11px; }
}

/* ========================================
   RESPONSIVE HELPERS
   ======================================== */
@media (max-width: 991px) {
  .desktop-nav { display: none !important; }
  body { padding-bottom: 0; }
}
@media (max-width: 575px) {
  .hero-title { font-size: 26px; }
  .header-logo-center { font-size: 16px; letter-spacing: 2px; }
}

/* ========================================
   KARGO TAKİP, HESABIM, vs.
   ======================================== */
.account-sidebar .list-group-item {
  border-radius: 0 !important; border-left: none; border-right: none;
  font-size: 12px; letter-spacing: 0.3px;
}
.account-sidebar .list-group-item.active {
  background: var(--primary); border-color: var(--primary);
}

/* ========================================
   ADMIN (keep existing, override basics)
   ======================================== */
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; color: var(--text-muted);
  font-size: 13px; text-decoration: none; transition: all var(--t);
  border-radius: 0;
}
.admin-nav-item:hover, .admin-nav-item.active {
  background: var(--primary); color: #fff;
}

/* ========================================
   HIZLI SATIN AL MODALİ
   ======================================== */
.quick-buy-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10000;
  display: none;
}
.quick-buy-overlay.show { display: block; }

/* Mobil: alt çekme (varsayılan) */
.quick-buy-modal {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 10001;
  display: none;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
}
.quick-buy-modal.show {
  display: block;
  animation: qb-slide-up .32s cubic-bezier(.4,0,.2,1) both;
}
@keyframes qb-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes qb-fade-in {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Kapat butonu */
.qb-close {
  position: absolute; right: 16px; top: 16px; z-index: 2;
  background: none; border: none; cursor: pointer;
  color: var(--primary); padding: 6px;
  display: flex; align-items: center; line-height: 1;
}

/* İki kolon */
.qb-cols { display: flex; flex-direction: column; }
.qb-col-img { position: relative; flex-shrink: 0; }

.qb-image-wrap {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--bg-light);
  overflow: hidden;
}
.qb-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .2s;
}
.qb-img-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.85); border: none; border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.qb-img-prev { left: 8px; }
.qb-img-next { right: 8px; }

/* Nokta göstergeler */
.qb-img-dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 8px 0;
}
.qb-img-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d0d0d0; border: none; cursor: default; padding: 0;
  transition: background .2s;
}
.qb-img-dot.active { background: var(--primary); }

/* Bilgi kolonu */
.qb-col-info {
  padding: 14px 20px 4px;
  display: flex; flex-direction: column;
}
.qb-product-name {
  font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--primary);
  margin-bottom: 6px; line-height: 1.45;
}
.qb-product-price {
  font-size: 15px; font-weight: 500;
  color: var(--primary);
  margin-bottom: 16px;
}
.qb-size-section { margin-bottom: 12px; }
.qb-size-label {
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--text-muted); margin-bottom: 8px;
}
.qb-size-label span { color: var(--primary); }
.qb-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-size-btn {
  min-width: 42px; height: 36px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-dark);
  background: #fff; cursor: pointer;
  font-size: 12px; color: var(--primary); font-family: inherit;
  transition: all var(--t);
}
.qb-size-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.qb-size-btn.stok-yok { color: #ccc; border-color: #e0e0e0; cursor: not-allowed; text-decoration: line-through; }

.qb-qty-wrap {
  display: flex; align-items: center;
  border: 1px solid var(--border-dark);
  width: fit-content; margin-bottom: 14px; margin-top: 6px;
}
.qb-qty-btn {
  width: 36px; height: 36px;
  background: none; border: none;
  font-size: 20px; font-weight: 300;
  color: var(--primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.qb-qty-val {
  min-width: 36px; text-align: center;
  font-size: 13px; color: var(--primary);
  border-left: 1px solid var(--border-dark);
  border-right: 1px solid var(--border-dark);
  height: 36px; display: flex; align-items: center; justify-content: center;
}
.qb-footer {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0 20px;
}
.qb-btn-cart {
  width: 100%; height: 48px;
  background: #fff; border: 1px solid var(--primary);
  font-size: 11px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; color: var(--primary);
  cursor: pointer; font-family: inherit;
  transition: all var(--t);
}
.qb-btn-cart:hover { background: var(--bg-light); }
.qb-btn-buy {
  width: 100%; height: 48px;
  background: #2c2c2c; border: 1px solid #2c2c2c;
  font-size: 11px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; color: #fff;
  cursor: pointer; font-family: inherit;
  transition: all var(--t);
}
.qb-btn-buy:hover { background: #111; }
.qb-detail-link {
  text-align: center; font-size: 12px;
  color: var(--text-muted); text-decoration: underline;
  padding: 4px 0; cursor: pointer;
}
.qb-detail-link:hover { color: var(--primary); }

/* Desktop: ortalanmış modal */
@media (min-width: 768px) {
  .quick-buy-modal {
    top: 50%; left: 50%;
    bottom: auto; right: auto;
    transform: translate(-50%, -50%);
    width: 860px; max-width: 94vw;
    max-height: 88vh;
    border-radius: 0;
    overflow: hidden;
  }
  .quick-buy-modal.show {
    display: block;
    animation: qb-fade-in .22s ease both;
  }
  .qb-close { right: 20px; top: 20px; }
  .qb-cols {
    flex-direction: row;
    height: 560px;
  }
  .qb-col-img { width: 46%; }
  .qb-image-wrap {
    aspect-ratio: unset;
    height: calc(100% - 36px);
  }
  .qb-img-dots { height: 36px; align-items: center; }
  .qb-col-info {
    flex: 1;
    padding: 48px 52px 32px;
    overflow-y: auto;
  }
  .qb-product-name {
    font-size: 13px; letter-spacing: 0.8px;
    margin-bottom: 10px;
  }
  .qb-product-price { font-size: 20px; margin-bottom: 28px; }
  .qb-size-section { margin-bottom: 22px; }
  .qb-size-label { letter-spacing: 1px; margin-bottom: 10px; }
  .qb-size-btn { min-width: 48px; height: 40px; font-size: 13px; }
  .qb-qty-wrap { margin-bottom: 24px; margin-top: 8px; }
  .qb-footer { gap: 10px; padding-bottom: 0; }
}