/* ─── İZ PARFÜM — Main Stylesheet ─── */

/* ── TOKENS ── */
:root {
  --dark:       #0A0806;
  --white:      #FFFFFF;
  --off-white:  #F8F7F4;
  --surface:    #F2F1EE;
  --border:     #E4E2DC;
  --border-mid: #D0CEC7;
  --text:       #181716;
  --text-sec:   #6A6762;
  --text-muted: #A09D97;
  --accent:     #B5915A;
  --accent-lt:  #F3EBE0;
  --danger:     #C0392B;
  --success:    #2D6A4F;
  --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --radius:     4px;
  --radius-md:  8px;
  --shadow:     0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --shadow-lg:  0 4px 24px rgba(0,0,0,.10);
  --transition: .18s ease;
  --max-w:      1280px;
  --header-h:   64px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.5;
  min-height: 100vh;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ── UTILITIES ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.text-sm { font-size: .8125rem; } .text-xs { font-size: .75rem; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; }
.text-muted { color: var(--text-muted); }
.text-sec { color: var(--text-sec); }
.text-accent { color: var(--accent); }
.mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px} .mt-4{margin-top:32px}
.mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:24px}

/* ── TYPOGRAPHY ── */
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: clamp(1.25rem, 3vw, 1.875rem); font-weight: 400; letter-spacing: -.015em; }
h3 { font-size: 1.125rem; font-weight: 500; }
h4 { font-size: 1rem; font-weight: 500; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 24px;
  font-size: .875rem; font-weight: 500; letter-spacing: .04em;
  border-radius: var(--radius); transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--text); color: var(--white);
}
.btn-primary:hover { background: #333; }
.btn-outline {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border-mid);
}
.btn-outline:hover { border-color: var(--text); background: var(--off-white); }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { background: #9e7a47; }
.btn-sm { padding: 8px 16px; font-size: .8125rem; }
.btn-lg { padding: 15px 32px; font-size: .9375rem; }
.btn-full { width: 100%; }
.btn-icon { padding: 10px; border-radius: var(--radius); position: relative; }
.btn-icon:hover { background: var(--off-white); }

/* ── HEADER ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow); }
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  gap: 16px;
}
.header-logo {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.header-logo span { color: var(--accent); }
.header-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  padding: 6px 10px;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .025em;
  color: var(--text-sec);
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--text); background: var(--off-white); }
.nav-link.highlight { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.cart-badge {
  position: absolute; top: 4px; right: 4px;
  width: 16px; height: 16px;
  background: var(--text); color: var(--white);
  border-radius: 50%; font-size: .625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* ── MOBILE HEADER ── */
.mobile-header {
  display: none;
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: 56px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
}
.mobile-header-logo {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.mobile-actions { display: flex; gap: 4px; align-items: center; }

/* ── MOBILE MENU ── */
.mobile-menu-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.5);
}
.mobile-menu-overlay.open { display: block; }
.mobile-menu {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(85vw, 360px);
  background: var(--white);
  z-index: 201;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .25s ease;
  display: flex; flex-direction: column;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu-header .logo {
  font-size: 1rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
}
.mobile-menu-items { flex: 1; padding: 8px 0; }
.mobile-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  font-size: .9375rem; font-weight: 500;
  border-bottom: 1px solid var(--off-white);
  cursor: pointer;
  transition: background var(--transition);
}
.mobile-menu-item:hover { background: var(--off-white); }
.mobile-menu-item.highlight { color: var(--accent); }
.mobile-submenu { display: none; background: var(--off-white); }
.mobile-submenu.open { display: block; }
.mobile-submenu a {
  display: block; padding: 11px 20px 11px 32px;
  font-size: .875rem; color: var(--text-sec);
  border-bottom: 1px solid var(--border);
}
.mobile-menu-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* ── SEARCH OVERLAY ── */
.search-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: var(--white);
  flex-direction: column;
}
.search-overlay.open { display: flex; }
.search-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.search-input {
  flex: 1;
  font-size: 1.125rem;
  border: none; outline: none;
  color: var(--text);
  background: transparent;
}
.search-input::placeholder { color: var(--text-muted); }
.search-results {
  flex: 1; overflow-y: auto; padding: 24px;
}
.search-result-item {
  display: flex; gap: 16px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.search-result-item:hover { opacity: .7; }
.search-result-img {
  width: 52px; height: 52px;
  object-fit: contain; background: var(--off-white);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.search-result-info { flex: 1; }
.search-result-name { font-weight: 500; font-size: .9375rem; }
.search-result-price { font-size: .8125rem; color: var(--text-sec); margin-top: 2px; }
.search-empty {
  text-align: center; padding: 48px 24px;
  color: var(--text-muted); font-size: .9375rem;
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 560px;
  display: flex; align-items: center;
  background: var(--off-white);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: .12;
}
.hero-content {
  position: relative; z-index: 1;
  padding: 80px 0;
  max-width: 600px;
}
.hero-eyebrow {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.hero h1 { margin-bottom: 16px; }
.hero p {
  font-size: 1.0625rem; color: var(--text-sec);
  max-width: 420px; margin-bottom: 32px;
  line-height: 1.65;
}
.hero-media {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 45%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-media img { height: 100%; width: 100%; object-fit: cover; }

/* ── TRUST BAR ── */
.trust-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.trust-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  font-size: .8125rem; color: var(--text-sec);
  border-right: 1px solid var(--border);
}
.trust-item:last-child { border-right: none; }
.trust-item svg { flex-shrink: 0; opacity: .6; }

/* ── SECTION ── */
.section { padding: 64px 0; }
.section-sm { padding: 40px 0; }
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
}
.section-title { }
.section-desc {
  font-size: .9375rem; color: var(--text-sec);
  margin-top: 6px;
  max-width: 480px;
}
.view-all {
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-sec);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  transition: color var(--transition);
}
.view-all:hover { color: var(--text); }

/* ── PRODUCT GRID ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* ── HOMEPAGE PRODUCT CAROUSELS ── */
.product-carousel {
  position: relative;
  width: 100%;
}
.product-carousel-track {
  display: flex !important;
  flex-flow: row nowrap !important;
  grid-template-columns: none !important;
  gap: 1px !important;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  background: var(--border);
}
.product-carousel-track::-webkit-scrollbar { display: none; }

.product-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-mid);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: 30px;
  line-height: 1;
  transition: opacity .2s, transform .2s, background .2s;
}
.product-carousel.has-overflow .product-carousel-arrow { display: flex; }
.product-carousel-arrow:hover:not(:disabled) {
  background: var(--text);
  color: var(--white);
  transform: translateY(-50%) scale(1.04);
}
.product-carousel-arrow:disabled { opacity: .25; pointer-events: none; }
.product-carousel-prev { left: -18px; }
.product-carousel-next { right: -18px; }
.product-carousel-arrow span { margin-top: -3px; }

/* ── PRODUCT CARD ── */

.badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: 2px;
}
.badge-new { background: var(--text); color: var(--white); }
.badge-sale { background: var(--danger); color: var(--white); }
.badge-hot { background: var(--accent); color: var(--white); }
.badge-feat { background: var(--surface); color: var(--text); }

.product-info {
  padding: 14px 16px;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 4px;
}
.product-gender {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ── QUICK VIEW MODAL ── */
.quick-view-overlay {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.5);
  align-items: center; justify-content: center;
  padding: 24px;
}
.quick-view-overlay.open { display: flex; }
.quick-view-modal {
  background: var(--white);
  width: 100%; max-width: 820px;
  max-height: 90vh; overflow-y: auto;
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.quick-view-gallery { background: var(--off-white); padding: 32px; display: flex; align-items: center; }
.quick-view-gallery img { width: 100%; object-fit: contain; max-height: 400px; }
.quick-view-info { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.quick-view-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: var(--white); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.25rem;
  box-shadow: var(--shadow);
}

/* ── CATEGORY PAGE ── */
.page-header {
  background: var(--off-white);
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}
.breadcrumb {
  display: flex; gap: 8px; align-items: center;
  font-size: .8125rem; color: var(--text-muted);
  margin-bottom: 12px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { opacity: .4; }
.page-header h1 { margin-bottom: 6px; }
.page-header p { color: var(--text-sec); font-size: .9375rem; }
.category-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  align-items: start;
}
.filter-sidebar {
  border-right: 1px solid var(--border);
  padding: 24px 0;
  position: sticky;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.filter-section { padding: 0 20px; margin-bottom: 24px; }
.filter-title {
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-sec); margin-bottom: 12px;
  display: flex; justify-content: space-between;
  cursor: pointer;
}
.filter-option {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; cursor: pointer;
  font-size: .875rem; color: var(--text-sec);
}
.filter-option input { cursor: pointer; }
.filter-option:hover { color: var(--text); }
.price-range { display: flex; gap: 8px; margin-top: 8px; }
.price-input {
  flex: 1; padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
}
.filter-divider { height: 1px; background: var(--border); margin: 0 20px 24px; }
.category-content { padding: 24px; }
.content-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px;
}
.product-count { font-size: .875rem; color: var(--text-sec); }
.sort-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
  background: var(--white);
  cursor: pointer;
  min-width: 200px;
}
.sort-select:focus { outline: none; border-color: var(--text); }
.mobile-filter-bar {
  display: none;
  gap: 8px; margin-bottom: 16px;
}
.mobile-filter-btn {
  flex: 1; padding: 10px 16px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius);
  font-size: .875rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--white); cursor: pointer;
}
.mobile-filter-btn:hover { border-color: var(--text); }

/* ── MOBILE FILTER SHEET ── */
.filter-sheet-overlay {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.5);
}
.filter-sheet-overlay.open { display: block; }
.filter-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-radius: 12px 12px 0 0;
  padding: 20px;
  max-height: 85vh; overflow-y: auto;
  z-index: 401;
  transform: translateY(100%);
  transition: transform .25s ease;
}
.filter-sheet.open { transform: translateY(0); }
.filter-sheet-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.filter-sheet h3 { font-size: 1.0625rem; }

/* ── PRODUCT DETAIL ── */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 48px 0;
  align-items: start;
}
.product-gallery { position: sticky; top: calc(var(--header-h) + 24px); }
.gallery-main {
  aspect-ratio: 1;
  background: var(--off-white);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
}
.gallery-main img {
  max-height: 100%; max-width: 100%;
  object-fit: contain; padding: 24px;
}
.gallery-thumbs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.gallery-thumb {
  width: 68px; height: 68px;
  background: var(--off-white);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: border-color var(--transition);
}
.gallery-thumb.active { border-color: var(--text); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.product-detail-info {
  display: flex; flex-direction: column; gap: 20px;
}
.product-sku { font-size: .8125rem; color: var(--text-muted); }
.product-detail-name {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400; line-height: 1.25;
}
.product-detail-pricing {
  display: flex; align-items: center; gap: 12px;
}
.product-detail-price {
  font-size: 1.5rem; font-weight: 600;
}
.product-detail-price.sale { color: var(--danger); }
.product-detail-original {
  font-size: 1rem; color: var(--text-muted);
  text-decoration: line-through;
}
.volume-selector h4 { margin-bottom: 10px; font-size: .9rem; color: var(--text-sec); }
.volume-options { display: flex; gap: 8px; flex-wrap: wrap; }
.volume-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius);
  font-size: .875rem; cursor: pointer;
  transition: var(--transition);
  background: var(--white);
}
.volume-btn:hover { border-color: var(--text); }
.volume-btn.active { background: var(--text); color: var(--white); border-color: var(--text); }
.volume-btn > span { font-size: .98rem; font-weight: 600; line-height: 1.2; }
.volume-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:92px}
.volume-btn small{font-size:.72rem;opacity:.75;line-height:1.15}
.volume-btn.active small{opacity:.88}
.volume-btn.disabled{background:#f1f1f1;color:#9a9a9a;border-color:#ddd;opacity:1}
.volume-btn.disabled small{color:#888}
.essence-selector {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--off-white);
}
.essence-selector h4 {
  font-size: .875rem; font-weight: 600;
  margin-bottom: 12px; color: var(--text-sec);
  letter-spacing: .04em; text-transform: uppercase;
}
.essence-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer; background: var(--white);
  margin-bottom: 6px; transition: var(--transition);
}
.essence-option.active { border-color: var(--text); }
.essence-option-left { display: flex; align-items: center; gap: 10px; }
.essence-radio {
  width: 16px; height: 16px;
  border: 2px solid var(--border-mid);
  border-radius: 50%; transition: var(--transition);
  flex-shrink: 0;
  position: relative;
}
.essence-option.active .essence-radio {
  border-color: var(--text);
}
.essence-option.active .essence-radio::after {
  content: ""; position: absolute;
  inset: 3px; background: var(--text); border-radius: 50%;
}
.stock-status {
  display: flex; align-items: center; gap: 6px;
  font-size: .875rem;
}
.stock-dot { width: 8px; height: 8px; border-radius: 50%; }
.stock-dot.in { background: var(--success); }
.stock-dot.out { background: var(--danger); }
.stock-dot.soon { background: var(--accent); }
.detail-actions { display: flex; flex-direction: column; gap: 10px; }
.product-detail-desc {
  border-top: 1px solid var(--border); padding-top: 20px;
  font-size: .9375rem; color: var(--text-sec);
  line-height: 1.7;
}

/* ── FRAGRANCE PYRAMID ── */
.frag-pyramid { margin-top: 8px; }
.frag-pyramid-title {
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-sec); margin-bottom: 16px;
}
.frag-note-group { margin-bottom: 14px; }
.frag-note-label {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.frag-notes { display: flex; gap: 6px; flex-wrap: wrap; }
.frag-note-tag {
  padding: 4px 10px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .8125rem; color: var(--text-sec);
}
.frag-info-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 16px;
}
.frag-info-item {
  padding: 12px;
  background: var(--off-white);
  border-radius: var(--radius);
}
.frag-info-label {
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 4px;
}
.frag-info-value { font-size: .875rem; font-weight: 500; }

/* ── TABS ── */
.tabs-nav {
  display: flex; border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  gap: 0;
  overflow-x: auto;
}
.tab-btn {
  padding: 12px 20px;
  font-size: .875rem; font-weight: 500;
  color: var(--text-sec); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--transition);
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--text); }
.tab-btn:hover { color: var(--text); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── STICKY BUY BAR (mobile product page) ── */
.sticky-buy-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  z-index: 50;
  gap: 10px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}

/* ── CART ── */
.cart-page {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  padding: 48px 0;
  align-items: start;
}
.cart-items { }
.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.cart-item-img {
  width: 96px; height: 96px;
  background: var(--off-white);
  object-fit: contain; padding: 8px;
}
.cart-item-name { font-weight: 500; margin-bottom: 4px; }
.cart-item-meta { font-size: .8125rem; color: var(--text-sec); }
.cart-item-price { font-weight: 600; font-size: 1.0625rem; white-space: nowrap; }
.cart-item-product-link { display: flex; align-items: center; gap: 14px; min-width: 0; color: inherit; text-decoration: none; }
.cart-item-product-link:hover .cart-item-name { text-decoration: underline; text-underline-offset: 3px; }
.cart-item-product-copy { min-width: 0; }
.cart-item-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.qty-control {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-top: 10px; width: fit-content;
}
.qty-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); cursor: pointer;
  font-size: 1.125rem; line-height: 1;
  border: none; transition: background var(--transition);
}
.qty-btn:hover { background: var(--off-white); }
.qty-num {
  width: 36px; text-align: center;
  font-size: .875rem; font-weight: 500;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  line-height: 32px;
}
.cart-remove {
  font-size: .75rem; color: var(--text-muted);
  cursor: pointer; text-decoration: underline;
  margin-top: 8px; display: block;
}
.cart-remove:hover { color: var(--danger); }
.cart-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  position: sticky; top: calc(var(--header-h) + 24px);
}
.cart-summary h3 { margin-bottom: 20px; font-size: 1.0625rem; }
.summary-row {
  display: flex; justify-content: space-between;
  padding: 10px 0; font-size: .9375rem;
  border-bottom: 1px solid var(--border);
}
.summary-row:last-of-type { border-bottom: none; }
.summary-total {
  font-weight: 700; font-size: 1.0625rem;
}
.cart-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.cart-empty {
  text-align: center; padding: 80px 24px;
}
.cart-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: .3; }
.cart-empty h2 { font-weight: 400; margin-bottom: 8px; }
.cart-empty p { color: var(--text-sec); margin-bottom: 24px; }

/* ── BLOG ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.blog-card { display: flex; flex-direction: column; }
.blog-card-img {
  aspect-ratio: 16/9;
  background: var(--off-white);
  overflow: hidden; margin-bottom: 16px;
  border-radius: var(--radius);
}
.blog-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.03); }
.blog-card-cat {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.blog-card-title {
  font-size: 1.0625rem; font-weight: 500;
  line-height: 1.4; margin-bottom: 8px;
}
.blog-card-title a:hover { color: var(--accent); }
.blog-card-desc {
  font-size: .875rem; color: var(--text-sec);
  line-height: 1.6; flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; color: var(--text-muted);
  margin-top: 12px;
}
.blog-article-header { max-width: 720px; margin: 0 auto 48px; text-align: center; padding-top: 48px; }
.blog-article-header h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: 16px; }
.blog-article-body {
  max-width: 720px; margin: 0 auto;
  font-size: 1.0625rem; line-height: 1.8; color: var(--text-sec);
}
.blog-article-body h2 { color: var(--text); font-size: 1.375rem; margin: 32px 0 12px; }
.blog-article-body p { margin-bottom: 20px; }

/* ── FOOTER ── */
/* Keep the site footer at the actual end of the page:
   one version is shown per viewport, never both at once. */
.site-footer {
  display: block !important;
  width: 100%;
  background: var(--text);
  color: rgba(255,255,255,.75);
  margin-top: 80px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  padding: 56px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand .logo {
  font-size: 1rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--white); margin-bottom: 12px;
}
.footer-brand p {
  font-size: .875rem; line-height: 1.7;
  max-width: 260px;
}
.footer-newsletter { margin-top: 20px; }
.footer-newsletter p {
  font-size: .8125rem; margin-bottom: 10px;
  color: rgba(255,255,255,.55);
}
.newsletter-form { display: flex; gap: 0; }
.newsletter-input {
  flex: 1; padding: 10px 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  color: var(--white); font-size: .875rem;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.35); }
.newsletter-input:focus { outline: none; border-color: rgba(255,255,255,.4); }
.newsletter-btn {
  padding: 10px 16px;
  background: var(--accent); color: var(--white);
  border: none; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .8125rem; font-weight: 500; cursor: pointer;
}
.footer-col h4 {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); margin-bottom: 16px;
}
.footer-col a {
  display: block; margin-bottom: 8px;
  font-size: .875rem; color: rgba(255,255,255,.6);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--white); }
.footer-social {
  display: flex; gap: 10px; margin-top: 6px;
}
.social-btn {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: var(--transition);
}
.social-btn:hover { background: rgba(255,255,255,.2); color: var(--white); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
  font-size: .8125rem; color: rgba(255,255,255,.35);
  gap: 16px; flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255,255,255,.35); }
.footer-bottom a:hover { color: rgba(255,255,255,.7); }

/* ── COOKIE BANNER ── */
.cookie-banner {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--text); color: var(--white);
  padding: 16px 24px;
  z-index: 500;
  align-items: center; gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-banner.show { display: flex; }
.cookie-text { font-size: .875rem; line-height: 1.5; opacity: .8; }
.cookie-text a { color: var(--accent); }
.cookie-btns { display: flex; gap: 8px; flex-shrink: 0; }

/* ── TOAST ── */
.toast-container {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 600; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--text); color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: .875rem;
  box-shadow: var(--shadow-lg);
  animation: toastIn .2s ease;
  display: flex; align-items: center; gap: 10px;
}
.toast.success { background: var(--success); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ── ADMIN ── */
.admin-layout {
  display: grid; grid-template-columns: 220px 1fr; min-height: 100vh;
}
.admin-sidebar {
  background: var(--text);
  color: var(--white);
  padding: 0;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.admin-logo {
  padding: 24px 20px;
  font-size: .875rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.admin-logo span { display: block; font-size: .625rem; opacity: .4; margin-top: 2px; font-weight: 400; letter-spacing: .05em; }
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font-size: .875rem; color: rgba(255,255,255,.6);
  cursor: pointer; transition: var(--transition);
  border-left: 3px solid transparent;
}
.admin-nav-item:hover { color: var(--white); background: rgba(255,255,255,.05); }
.admin-nav-item.active { color: var(--white); border-left-color: var(--accent); background: rgba(255,255,255,.07); }
.admin-nav-section {
  padding: 20px 20px 6px;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.25);
}
.admin-content { padding: 32px; overflow: auto; }
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
}
.admin-header h1 { font-size: 1.375rem; font-weight: 600; }
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 32px;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.stat-label {
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 8px;
}
.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text); }
.stat-sub { font-size: .8125rem; color: var(--text-muted); margin-top: 4px; }
.admin-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 24px;
}
.admin-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.admin-card-header h3 { font-size: 1rem; font-weight: 600; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left; padding: 10px 16px;
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .875rem; vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--off-white); }
.admin-table img {
  width: 40px; height: 40px;
  object-fit: contain; background: var(--off-white);
  border-radius: var(--radius);
}
.table-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer; background: var(--white);
  color: var(--text-sec); font-size: .8125rem;
  transition: var(--transition);
}
.icon-btn:hover { background: var(--off-white); color: var(--text); }
.icon-btn.danger:hover { background: #fee; color: var(--danger); border-color: var(--danger); }
.status-pill {
  display: inline-block; padding: 3px 8px;
  border-radius: 20px; font-size: .75rem; font-weight: 600;
}
.status-pill.active { background: #e8f5e9; color: var(--success); }
.status-pill.inactive { background: var(--surface); color: var(--text-muted); }
.status-pill.stock { background: #e8f5e9; color: var(--success); }
.status-pill.no-stock { background: #fee; color: var(--danger); }

/* ── FORM ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-group { margin-bottom: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-label {
  display: block; margin-bottom: 6px;
  font-size: .8125rem; font-weight: 600;
  color: var(--text-sec);
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--white); color: var(--text);
  transition: border-color var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--text);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }
.form-row { display: flex; gap: 12px; align-items: flex-end; }
.toggle-group { display: flex; align-items: center; gap: 10px; }
.toggle {
  width: 40px; height: 22px;
  background: var(--border-mid);
  border-radius: 11px;
  cursor: pointer; position: relative;
  transition: background var(--transition);
  flex-shrink: 0;
}
.toggle.on { background: var(--text); }
.toggle::after {
  content: ""; position: absolute;
  width: 16px; height: 16px;
  background: var(--white); border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform var(--transition);
}
.toggle.on::after { transform: translateX(18px); }
.tag-input-wrap {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  min-height: 44px;
  cursor: text;
}
.tag {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--off-white); border: 1px solid var(--border);
  border-radius: 20px; font-size: .8125rem;
}
.tag-remove { cursor: pointer; opacity: .5; }
.tag-remove:hover { opacity: 1; }
.tag-input {
  flex: 1; border: none; outline: none;
  font-size: .875rem; min-width: 100px;
  background: transparent;
}
.image-upload-area {
  border: 2px dashed var(--border-mid);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.image-upload-area:hover { border-color: var(--text); background: var(--off-white); }
.image-upload-area p { font-size: .875rem; color: var(--text-muted); margin-top: 8px; }
.image-preview-grid {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.img-preview-item {
  width: 80px; height: 80px;
  background: var(--off-white);
  border-radius: var(--radius);
  overflow: hidden; position: relative;
  border: 1px solid var(--border);
}
.img-preview-item img { width: 100%; height: 100%; object-fit: contain; }
.img-remove {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,.6); color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6875rem; cursor: pointer;
}

/* ── MODAL ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 400;
  align-items: center; justify-content: center;
  padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white);
  border-radius: var(--radius-md);
  width: 100%; max-width: 800px;
  max-height: 90vh; overflow-y: auto;
  position: relative;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.modal-header h2 { font-size: 1.125rem; font-weight: 600; }
.modal-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--radius);
  font-size: 1.25rem; color: var(--text-sec);
}
.modal-close:hover { background: var(--off-white); }
.modal-body { padding: 24px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--off-white);
  position: sticky; bottom: 0;
}

/* ── PAGES ── */
.static-page { max-width: 800px; margin: 0 auto; padding: 48px 24px; }
.static-page h1 { margin-bottom: 32px; }
.static-page h2 { font-size: 1.125rem; font-weight: 600; margin: 28px 0 10px; }
.static-page p { font-size: .9375rem; color: var(--text-sec); line-height: 1.75; margin-bottom: 16px; }
.faq-item {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; cursor: pointer;
  font-size: .9375rem; font-weight: 500;
  gap: 16px;
}
.faq-question .icon { flex-shrink: 0; font-size: 1.25rem; transition: transform var(--transition); }
.faq-item.open .faq-question .icon { transform: rotate(45deg); }
.faq-answer {
  display: none;
  padding-bottom: 16px;
  font-size: .9375rem; color: var(--text-sec); line-height: 1.7;
}
.faq-item.open .faq-answer { display: block; }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 64px 0;
}
.contact-info h2 { margin-bottom: 20px; }
.contact-info p { color: var(--text-sec); font-size: .9375rem; line-height: 1.7; margin-bottom: 24px; }
.contact-detail {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 16px; font-size: .9375rem; color: var(--text-sec);
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }

/* ── CATEGORY FILTER NAVIGATION + NOTE SEARCH ── */
.category-filter-group { display:flex; flex-direction:column; }
.category-filter-link {
  display:block; padding:6px 0; color:var(--text-sec); text-decoration:none;
  font-size:.875rem; line-height:1.35; transition:color .15s ease, padding-left .15s ease;
}
.category-filter-link:hover, .category-filter-link.active { color:var(--text); }
.category-filter-link.active { font-weight:600; padding-left:4px; }
.category-filter-link.category-filter-all {
  font-weight:600; color:var(--text); padding:8px 10px; margin:0 -10px 9px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--off-white, #faf9f6);
}
.category-filter-subtitle {
  margin:5px 0 4px; font-size:.69rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-muted);
}
.category-filter-other-title { margin-top:13px; padding-top:13px; border-top:1px solid var(--border); }
.note-search-wrap { position:relative; margin:0 0 10px; }
.note-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.note-search-input {
  width:100%; box-sizing:border-box; padding:9px 10px 9px 32px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--white);
  color:var(--text); font:inherit; font-size:.82rem; outline:none;
}
.note-search-input:focus { border-color:var(--border-mid); }
.mobile-category-filter-list { display:flex; flex-direction:column; }
.mobile-category-filter-list .category-filter-link { padding:7px 0; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .site-header { display: none; }
  .mobile-header { display: flex; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .category-layout { grid-template-columns: 1fr; }
  .filter-sidebar { display: none; }
  .mobile-filter-bar { display: flex; }
  .hero-media { display: none; }
  .hero { min-height: auto; }
  .hero-content { padding: 48px 0; }
  .trust-items { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: none; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .cart-page { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .quick-view-modal { grid-template-columns: 1fr; }
  .quick-view-gallery { display: none; }
}

/* v270 — Product mobile sticky purchase actions are available on every product page. */
@media (max-width: 768px) {
  body.page-template-page-urun .sticky-buy-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 120 !important;
  }
}

@media (max-width: 768px) {
  :root { --header-h: 56px; }
  .container { padding: 0 16px; }
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1px; }
  .section { padding: 40px 0; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-content { padding: 32px 0; }
  .hero h1 { font-size: 1.625rem; }
  .hero p { font-size: .9375rem; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .trust-items { grid-template-columns: 1fr 1fr; }
  .trust-item { border-right: none !important; border-bottom: 1px solid var(--border); padding: 12px 16px; }
  .trust-item:nth-child(even) { border-right: none; }
  .trust-items > :nth-child(2n) { border-right: none; }
  .trust-items > :nth-child(odd) { border-right: 1px solid var(--border); }
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .sticky-buy-bar { display: flex; }
  .product-detail .detail-actions { display: none; }
  .footer-col { }
  .cart-item {
  cursor: pointer; grid-template-columns: 72px 1fr; }
  .cart-item-product-link { grid-column: 1 / -1; }
  .cart-item-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .cart-item > .cart-item-price { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; }
  .mobile-footer .footer-col { border-bottom: 1px solid rgba(255,255,255,.1); }
  .mobile-footer .footer-col h4 { cursor: pointer; padding: 14px 0; margin-bottom: 0; display: flex; justify-content: space-between; }
  .mobile-footer .footer-col .footer-links { display: none; padding-bottom: 8px; }
  .mobile-footer .footer-col.open .footer-links { display: block; }
}

@media (max-width: 480px) {
  .product-info { padding: 10px 12px; }
  
  
  .product-detail-price { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   İZ PARFÜM — UI ENHANCEMENTS
   1. Hero Slider
   2. Compact / Scroll-Aware Header (desktop + mobile)
   3. Mobile Category Filter Dedup
═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO SLIDER ─────────────────────────────────────────── */
.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--off-white);
  /* Desktop: roughly 16:6 feel */
  height: clamp(300px, 48vw, 640px);
  display: block;
  flex-shrink: 0;
}
.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.4,0,.2,1);
  display: block;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
}
.hero-slider.is-dragging { cursor: grabbing; }
.hero-slider.is-dragging .hero-slide-img { cursor: grabbing; }
/* Nav dots */
.hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 1.5px solid rgba(255,255,255,.75);
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.hero-dot.active {
  background: #fff;
  transform: scale(1.3);
}
/* Mobile hero: taller/more portrait */
@media (max-width: 1024px) {
  .hero-slider { height: clamp(240px, 60vw, 520px); }
  .hero-slide-img { object-position: center 20%; }
}
@media (max-width: 600px) {
  .hero-slider { height: clamp(200px, 78vw, 420px); }
  .hero-slide-img { object-position: center 15%; }
}

/* ── 2. COMPACT / SCROLL-AWARE HEADER — desktop ─────────────── */

/* Allow absolute child inside the inner grid */
.header-inner { position: relative; }

/* Nav fades out when header is compact */
.header-nav {
  transition: opacity .22s ease, transform .22s ease;
}
.site-header.compact .header-nav {
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
}

/* Compact search pill — injected via JS, hidden by default */
.header-compact-search {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%) scale(.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;

  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--off-white);
  border: 1.5px solid var(--border-mid);
  border-radius: 999px;
  padding: 9px 20px 9px 16px;
  width: min(400px, 36vw);
  color: var(--text-sec);
  cursor: text;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
  white-space: nowrap;
}
.header-compact-search:hover { border-color: var(--text); }

.header-compact-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: .875rem;
  color: var(--text);
  font-family: var(--font);
  min-width: 0;
  cursor: text;
}
.header-compact-input::placeholder { color: var(--text-muted); }

/* Show pill when compact */
.site-header.compact .header-compact-search {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* ── 2. COMPACT / SCROLL-AWARE HEADER — mobile ──────────────── */

.mobile-header .mobile-header-logo {
  transition: opacity .2s ease, max-width .26s ease, padding .26s ease, margin .26s ease;
  overflow: hidden;
  white-space: nowrap;
  max-width: 200px;
}
.mobile-header.compact .mobile-header-logo {
  opacity: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

/* Mobile compact search — injected via JS */
.mobile-compact-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--text-muted);
  font-size: .8125rem;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;

  /* Hidden initial state */
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, max-width .26s ease;
}
.mobile-header.compact .mobile-compact-search {
  opacity: 1;
  max-width: 260px;
  pointer-events: auto;
}
.mobile-compact-placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* ── 3. MOBILE CATEGORY FILTER — remove duplicate sort select ── */
/* On mobile (≤1024px) the sidebar hides and the mobile-filter-bar shows.
   The .content-toolbar's sort select is a duplicate of the mobile bar's
   select — hide only the select widget; keep the product count visible. */
@media (max-width: 1024px) {
  .content-toolbar .sort-select { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   İZ PARFÜM — BATCH 2 ENHANCEMENTS
   1. Hero progress bar + arrow navigation
   2. Product image 1:1 square ratio
   3. Koleksiyon marquee section
═══════════════════════════════════════════════════════════════ */

/* ── 1a. HERO PROGRESS BAR ──────────────────────────────────── */
.hero-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.18);
  z-index: 10;
  overflow: hidden;
}
.hero-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--accent, #B5915A);
  transform-origin: left;
  /* Animation applied via JS class toggle */
}
.hero-progress-fill.animating {
  animation: heroCountdown 5s linear forwards;
}
@keyframes heroCountdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── 1b. HERO ARROW NAVIGATION — compact desktop controls ───── */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 30px; height: 30px;
  background: rgba(0,0,0,.24);
  border: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  outline: none;
  padding: 0;
}
.hero-arrow:hover {
  background: rgba(0,0,0,.38);
  transform: translateY(-50%) scale(1.04);
}
.hero-arrow-prev { left: 12px; }
.hero-arrow-next { right: 12px; }
/* Shift dots up slightly so they don't overlap the progress bar */
.hero-dots { bottom: 22px; }
@media (max-width: 600px) {
  .hero-arrow { width: 34px; height: 34px; }
  .hero-arrow-prev { left: 10px; }
  .hero-arrow-next { right: 10px; }
  .hero-dots { bottom: 16px; }
}

/* ── 2. PRODUCT IMAGE — 1:1 SQUARE RATIO ──────────────────────── */
/* Overrides the existing 3:4 ratio. Applies sitewide. */

/* ── 3. KOLEKSİYON MARQUEE ───────────────────────────────────── */
.koleksiyon-section { padding-bottom: 48px; }
.koleksiyon-section .section-header { margin-bottom: 24px; }

/* Full-width overflow container — clips to its own bounds, no page overflow */
.koleksiyon-wrap {
  width: 100%;
  overflow: hidden;          /* contains the marquee, never leaks horizontally */
  position: relative;
  padding: 8px 0 4px;
  /* Soft fade edges for premium look */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%
  );
}

/* Marquee track — width is set by content; animation translates by -50% */
.koleksiyon-track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: max-content;
  /* duration set via JS once item count is known */
  animation: koleksiyonScroll linear infinite;
  will-change: transform;
}
.koleksiyon-wrap:hover .koleksiyon-track {
  animation-play-state: paused;
}
@keyframes koleksiyonScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Individual product card inside the marquee */
.koleksiyon-item {
  flex-shrink: 0;
  width: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.koleksiyon-item-img {
  width: 148px; height: 148px;
  background: var(--off-white);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #E4E2DC);
  transition: box-shadow .25s ease;
}
.koleksiyon-item:hover .koleksiyon-item-img {
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
}
.koleksiyon-item-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: transform .3s ease;
}
.koleksiyon-item:hover .koleksiyon-item-img img { transform: scale(1.06); }
.koleksiyon-item-name {
  font-size: .75rem;
  font-weight: 500;
  text-align: center;
  color: var(--text, #181716);
  line-height: 1.3;
  max-width: 140px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.koleksiyon-item-gender {
  font-size: .6875rem;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: .07em;
}
@media (max-width: 600px) {
  .koleksiyon-item { width: 126px; }
  .koleksiyon-item-img { width: 126px; height: 126px; }
  .koleksiyon-track { gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   İZ PARFÜM Enhancement Styles  — smart search, kokunu bul, reco cards
═══════════════════════════════════════════════════════════════════════ */

/* ── Smart Search results ───────────────────────────────────────────── */
.sr-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; text-decoration:none; color:inherit;
  transition:background var(--transition);
  border-bottom:1px solid var(--border);
}
.sr-item:last-child { border-bottom:none; }
.sr-item:hover { background:var(--off-white); }
.sr-img {
  width:52px; height:52px; object-fit:contain;
  background:var(--off-white); border-radius:4px; flex-shrink:0;
}
.sr-body { flex:1; min-width:0; }
.sr-name { font-size:.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-tag {
  display:inline-block; font-size:.7rem; color:var(--text-sec);
  background:var(--border); border-radius:99px; padding:1px 7px;
  margin:2px 0; letter-spacing:.01em;
}
.sr-price { font-size:.8125rem; font-weight:700; color:var(--accent); margin-top:2px; }
.search-empty { padding:20px 16px; font-size:.875rem; color:var(--text-sec); text-align:center; }

/* ── Product card fragrance tags ─────────────────────────────────────── */

/* ── Kokunu Bul section ─────────────────────────────────────────────── */
.kokunu-bul-section {
  /* Sitein ana içerik genişliğiyle sınırlı, ortalanmış özel bölüm */
  width: calc(100% - 48px);
  max-width: var(--max-w);
  margin: 0 auto;
  box-sizing: border-box;
  background: #2A211C;
  color: #F5EFE8;
  padding: 64px 0;
  border-radius: 2px;
}
.kokunu-bul-section .section-header h2 {
  color: #F5EFE8;
}
.kokunu-bul-section .section-desc {
  color: #C9BDB1;
  opacity: 1;
}
.kokunu-bul-section .kb-question {
  color: #F5EFE8;
}
.kokunu-bul-section .kb-step-lbl {
  color: rgba(245,239,232,.52);
}
.kokunu-bul-section .kb-opt {
  border-color: rgba(245,239,232,.24);
  color: #F5EFE8;
}
.kokunu-bul-section .kb-opt:hover {
  border-color: #B8915A;
  color: #D8B887;
}
.kokunu-bul-section .kb-selected {
  border-color: #B8915A !important;
  background: rgba(184,145,90,.18) !important;
  color: #D8B887 !important;
}
.kokunu-bul-section .kb-prog-track {
  background: rgba(245,239,232,.16);
}

#kbWizard {
  max-width:640px; margin:40px auto 0;
}
.kb-head { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.kb-prog-track {
  flex:1; height:2px; background:rgba(255,255,255,.18); border-radius:2px; overflow:hidden;
}
.kb-prog-fill {
  height:100%; background:var(--accent);
  transition:width .4s ease;
}
.kb-step-lbl { font-size:.75rem; color:rgba(255,255,255,.45); white-space:nowrap; }
.kb-question {
  font-size:1.25rem; font-weight:600; letter-spacing:-.01em;
  text-align:center; margin:0 0 28px; line-height:1.4;
}
.kb-opts {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-bottom:28px;
}
.kb-opt {
  display:flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:99px;
  border:1px solid rgba(255,255,255,.22);
  background:transparent; color:#fff;
  font-size:.875rem; cursor:pointer;
  transition:all .18s ease;
  font-family:inherit;
}
.kb-opt:hover { border-color:var(--accent); color:var(--accent); }
.kb-selected { border-color:var(--accent) !important; background:rgba(181,145,90,.18) !important; color:var(--accent) !important; }
.kb-ic { font-size:1rem; }
.kb-actions {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:8px;
}
.kb-back {
  background:transparent; border:none; color:rgba(255,255,255,.5);
  font-size:.875rem; cursor:pointer; padding:8px 0;
  font-family:inherit; transition:color .15s;
}
.kb-back:hover { color:#fff; }
.kb-next {
  background:var(--accent); color:#fff;
  border:none; border-radius:99px; padding:10px 28px;
  font-size:.875rem; font-weight:600; cursor:pointer;
  font-family:inherit; transition:opacity .15s;
  margin-left:auto;
}
.kb-next:hover { opacity:.85; }
/* Results */
.kb-res-header { text-align:center; margin-bottom:28px; }
.kb-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:8px; }
.kb-chip {
  font-size:.75rem; border:1px solid rgba(255,255,255,.25);
  border-radius:99px; padding:3px 12px; color:rgba(255,255,255,.7);
}
.kb-res-sub { font-size:.875rem; color:rgba(255,255,255,.5); margin:4px 0 0; }
.kb-res-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:16px; margin-bottom:32px;
}
.kb-card {
  text-decoration:none; color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px; overflow:hidden;
  transition:transform .2s, border-color .2s;
  display:block;
}
.kb-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.kb-card-img {
  width:100%; aspect-ratio:1/1;
  background:rgba(255,255,255,.05); overflow:hidden;
}
.kb-card-img img { width:100%; height:100%; object-fit:contain; padding:10px; }
.kb-card-body { padding:10px 12px 12px; }
.kb-card-name { font-size:.875rem; font-weight:600; margin-bottom:4px; line-height:1.3; }
.kb-card-fam { font-size:.7rem; color:rgba(255,255,255,.45); margin-bottom:6px; }
.kb-card-reason { font-size:.75rem; color:rgba(255,255,255,.55); line-height:1.45; margin-bottom:8px; }
.kb-card-price { font-size:.875rem; font-weight:700; color:var(--accent); }
.kb-restart-btn {
  display:block; margin:0 auto;
  background:transparent; border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.6); border-radius:99px;
  padding:9px 28px; font-size:.8125rem; cursor:pointer;
  font-family:inherit; transition:border-color .15s, color .15s;
}
.kb-restart-btn:hover { border-color:var(--accent); color:var(--accent); }
.kb-empty { text-align:center; padding:32px 0; color:rgba(255,255,255,.5); }
@media(max-width:600px) {
  .kb-res-grid { grid-template-columns:repeat(2, 1fr); }
  .kb-question { font-size:1.0625rem; }
  .kb-opt { padding:9px 16px; font-size:.8125rem; }
}

/* ── Recommendation cards (benzer / yakışan / cross-sell) ─────────────── */
.reco-section { padding:48px 0; }
.reco-section + .reco-section { padding-top:0; }
.reco-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:20px; margin-top:24px;
}
.reco-card {
  text-decoration:none; color:inherit;
  border:1px solid var(--border); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.reco-card:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border-color:var(--accent);
}
.reco-img {
  aspect-ratio:1/1; width:100%;
  background:var(--off-white); overflow:hidden;
}
.reco-img img { width:100%; height:100%; object-fit:contain; padding:10px; }
.reco-body { padding:12px 14px 14px; flex:1; display:flex; flex-direction:column; }
.reco-name { font-size:.875rem; font-weight:600; margin-bottom:3px; line-height:1.3; }
.reco-fam { font-size:.7rem; color:var(--text-sec); margin-bottom:6px; }
.reco-reason { font-size:.75rem; color:var(--text-sec); line-height:1.45; flex:1; margin-bottom:8px; }
.reco-price { font-size:.875rem; font-weight:700; color:var(--accent); }
.reco-empty { font-size:.875rem; color:var(--text-sec); padding:16px 0; }
@media(max-width:768px) {
  .reco-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
}
@media(max-width:480px) {
  .reco-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
}

/* ── Cart cross-sell section ─────────────────────────────────────────── */
#cartCrossSell {
  margin-top:40px; padding-top:40px;
  border-top:1px solid var(--border);
}
.cs-title { font-size:1.125rem; font-weight:700; margin-bottom:4px; }
.cs-sub { font-size:.875rem; color:var(--text-sec); margin-bottom:20px; }
.cs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:16px;
}
@media(max-width:480px) { .cs-grid { grid-template-columns:repeat(2,1fr); } }

/* ── Improved fragrance pyramid ──────────────────────────────────────── */
.frag-pyramid {
  padding:28px 0 8px;
}
.frag-pyramid-title {
  font-size:.6875rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-sec);
  margin-bottom:24px;
}
.frag-note-group {
  display:flex; gap:16px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--border);
  position:relative;
}
.frag-note-group:last-of-type { border-bottom:none; }
.frag-note-label {
  font-size:.6875rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-sec);
  min-width:90px; flex-shrink:0;
}
.frag-notes { display:flex; flex-wrap:wrap; gap:6px; }
.frag-note-tag {
  font-size:.8125rem; padding:4px 12px;
  border:1px solid var(--border); border-radius:99px;
  color:var(--text-main); letter-spacing:.01em;
  transition:border-color .15s, color .15s;
}
.frag-note-tag:hover { border-color:var(--accent); color:var(--accent); }
.frag-note-group[data-tier="top"] .frag-note-label { color:var(--accent); }
.frag-note-group[data-tier="top"] .frag-note-tag {
  border-color:rgba(181,145,90,.35);
  background:rgba(181,145,90,.05);
}
.frag-info-grid {
  display:flex; gap:32px; flex-wrap:wrap;
  padding-top:20px; margin-top:8px;
}
.frag-info-item { display:flex; flex-direction:column; gap:4px; }
.frag-info-label {
  font-size:.6875rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-sec);
}
.frag-info-value { font-size:.9375rem; font-weight:600; }

/* ── Brand / About section ────────────────────────────────────────────── */
.brand-section {
  padding:80px 0; text-align:center;
  background:var(--off-white);
}
.brand-eyebrow {
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:16px;
}
.brand-headline {
  font-size:clamp(1.5rem, 3vw, 2.5rem); font-weight:700;
  letter-spacing:-.02em; line-height:1.2;
  max-width:560px; margin:0 auto 20px;
}
.brand-body {
  font-size:.9375rem; color:var(--text-sec); line-height:1.8;
  max-width:520px; margin:0 auto 32px;
}
.brand-stats {
  display:flex; justify-content:center; gap:48px;
  flex-wrap:wrap; margin-top:40px;
}
.brand-stat-num { font-size:2rem; font-weight:700; letter-spacing:-.03em; color:var(--accent); }
.brand-stat-lbl { font-size:.75rem; color:var(--text-sec); margin-top:2px; letter-spacing:.06em; text-transform:uppercase; }
@media(max-width:480px) { .brand-stats { gap:28px; } }

/* ── AI teaser section ───────────────────────────────────────────────── */
.ai-teaser-section { padding:64px 0; }
.ai-teaser-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.ai-teaser-text { flex:1; min-width:260px; }
.ai-teaser-eyebrow {
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:10px;
}
.ai-teaser-title { font-size:1.375rem; font-weight:700; letter-spacing:-.015em; margin-bottom:10px; }
.ai-teaser-desc { font-size:.9375rem; color:var(--text-sec); line-height:1.7; max-width:440px; }
.ai-teaser-cta { margin-top:24px; }
@media(max-width:640px) { .ai-teaser-inner { flex-direction:column; } }

/* ==========================================================
   IZ PARFUM v8/v9 — Spacing fix
   ========================================================== */

/* --- Boş kbWizard boşluğu azalt --- */
#kbWizard:empty {
  display: none;
}
.kokunu-bul-section:has(#kbWizard:empty) {
  padding-bottom: 32px;
}

/* --- Koleksiyon seksiyon kaldırıldı güvenlik --- */
.koleksiyon-section {
  display: none;
}

/* ==========================================================
   IZ PARFUM v9 — Auth + Favorites styles
   ========================================================== */

/* Hesap butonu giriş yapıldığında vurgu */
[data-auth-link].logged-in svg { stroke: var(--accent); }

/* Favori (kalp) butonu */

[data-fav-btn].active svg path            { fill: currentColor; }
[data-fav-btn] svg path                   { transition: fill .15s; }

/* Favori badge animasyon */
.cart-badge { transition: transform .15s; }
.cart-badge.bump { transform: scale(1.35); }

/* Ürün kalp butonu hover */

/* Favorilerim sayfası — boş durum butonu */
.btn-primary {
  display: inline-block;
  background: var(--text);
  color: #fff;
  padding: 14px 32px;
  text-decoration: none;
  font-size: .875rem;
  letter-spacing: 1px;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.btn-primary:hover { opacity: .85; }

/* Ürün detay kalp butonu */
.pd-wish-btn { transition: color .15s; }
.pd-wish-btn.active,
.pd-wish-btn[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
.pd-wish-btn.active svg path,
.pd-wish-btn[aria-pressed="true"] svg path { fill: currentColor; }

/* section-label */
.section-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

/* Favorilerim & Hesabım mobil iyileştirme */
@media (max-width: 768px) {
  .favs-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .fav-recs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== CATEGORY BANNERS ===== */
.cat-banners-section {
  padding: 32px 0 0;
  background: var(--bg);
}
.cat-banners-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}
.cat-banner {
  position: relative;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  height: 340px;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease;
}
.cat-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(0,0,0,.18);
}
.cat-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity .3s ease;
}
.cat-banner--kadin {
  background: linear-gradient(140deg, #d4a57a 0%, #9b6e45 35%, #4a2e1e 100%);
}
.cat-banner--kadin .cat-banner-overlay {
  background: linear-gradient(160deg, rgba(10,10,10,.60) 0%, rgba(10,10,10,.20) 50%, rgba(10,10,10,.50) 100%);
}
.cat-banner--kadin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 25%, rgba(255,210,160,.30) 0%, transparent 55%);
  z-index: 0;
}
.cat-banner--erkek {
  background: linear-gradient(140deg, #1b2a4a 0%, #0d1f3c 45%, #060e1f 100%);
}
.cat-banner--erkek .cat-banner-overlay {
  background: linear-gradient(160deg, rgba(5,5,5,.65) 0%, rgba(5,5,5,.20) 50%, rgba(5,5,5,.55) 100%);
}
.cat-banner--erkek::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 70%, rgba(80,130,220,.20) 0%, transparent 55%);
  z-index: 0;
}
.cat-banner--set {
  background: linear-gradient(140deg, #2a2a2a 0%, #1a1a1a 45%, #080808 100%);
}
.cat-banner--set .cat-banner-overlay {
  background: linear-gradient(160deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.55) 100%);
}
.cat-banner--set::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 20%, rgba(212,175,55,.22) 0%, transparent 55%);
  z-index: 0;
}
 .cat-banner--unisex {
  background: linear-gradient(140deg, #4a403d 0%, #292522 45%, #11100f 100%);
}
.cat-banner--unisex .cat-banner-overlay {
  background: linear-gradient(160deg, rgba(8,8,8,.58) 0%, rgba(8,8,8,.18) 50%, rgba(8,8,8,.52) 100%);
}
.cat-banner--unisex::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 22%, rgba(198,178,154,.24) 0%, transparent 56%);
  z-index: 0;
}
.cat-banner-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 28px;
  z-index: 2;
  gap: 6px;
}
.cat-banner-eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.50);
}
.cat-banner-title {
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -.01em;
  margin: 0;
}
.cat-banner-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.30);
  padding-bottom: 3px;
  width: fit-content;
  transition: color .2s, border-color .2s, gap .2s;
}
.cat-banner:hover .cat-banner-cta {
  color: #fff;
  border-color: rgba(255,255,255,.65);
  gap: 10px;
}
@media (max-width: 768px) {
  /* Mobile: one large category banner per view, swipe right/left with snap. */
  .cat-banners-section {
    overflow: hidden;
  }
  .cat-banners-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding: 0 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .cat-banners-grid::-webkit-scrollbar {
    display: none;
  }
  .cat-banner {
    flex: 0 0 calc(100% - 28px);
    width: calc(100% - 28px);
    height: 270px;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 4px;
  }
  .cat-banner-title { font-size: 1.6rem; }
  .cat-banner-content { padding: 24px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .cat-banners-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cat-banner { height: 260px; }
}

/* ===== CATEGORY CAROUSEL ===== */
.cat-carousel-section { padding-bottom: 0; }
.cat-carousel-wrapper {
  width: calc(100% - 48px);
  max-width: var(--max-w);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  border: 1px solid var(--border);
  background: var(--off-white);
}
.cat-carousel-wrapper:active { cursor: grabbing; }
.cat-carousel-wrapper::-webkit-scrollbar { display: none; }
.cat-carousel-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  justify-content: center;
}
.cat-carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  padding: 28px 36px;
  border-right: 1px solid var(--border);
  min-width: 150px;
  text-align: center;
  background: var(--off-white);
  transition: background .2s;
  user-select: none;
}
.cat-carousel-item:first-child { border-left: 1px solid var(--border); }
.cat-carousel-item:hover { background: var(--surface); }
.cat-carousel-icon { font-size: 1.5rem; line-height: 1; }
.cat-carousel-name {
  font-weight: 600;
  font-size: .875rem;
  white-space: nowrap;
  color: var(--text);
}
.cat-carousel-sub {
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.cat-carousel-item--highlight .cat-carousel-name { color: var(--accent); }
@media (max-width: 768px) {
  .kokunu-bul-section,
  .cat-carousel-wrapper {
    width: calc(100% - 32px);
  }
  .cat-carousel-item { padding: 20px 22px; min-width: 120px; }
  .cat-carousel-icon { font-size: 1.25rem; }
  .cat-carousel-name { font-size: .8125rem; }
}

/* Homepage product carousel responsive sizing */
@media (max-width: 900px) {
  
  .product-carousel-prev { left: 6px; }
  .product-carousel-next { right: 6px; }
}
@media (max-width: 600px) {
  
  .product-carousel-arrow { width: 36px; height: 36px; font-size: 26px; }
}

/* ===== HOMEPAGE: NON-PERFUME CATEGORY MENU ===== */
.category-menu-section{padding-top:48px;padding-bottom:28px}
.category-menu-header{margin-bottom:20px}
.category-menu-carousel{position:relative;width:100%}
.category-menu-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:2px 2px 10px}
.category-menu-viewport::-webkit-scrollbar{display:none}
.category-menu-track{display:flex;flex-wrap:nowrap;gap:14px;width:max-content}
.category-menu-card{position:relative;display:flex;flex:0 0 196px;flex-direction:column;overflow:hidden;min-height:218px;border:1px solid rgba(70,53,43,.16);border-radius:8px;background:#f6f1eb;color:var(--text);text-decoration:none;scroll-snap-align:start;box-shadow:0 7px 22px rgba(47,34,27,.07);transition:transform .35s ease,box-shadow .35s ease}
.category-menu-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(47,34,27,.14)}
.category-menu-image{position:relative;height:150px;overflow:hidden;background:#e9e1d8}
.category-menu-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(26,19,15,.18));pointer-events:none}
.category-menu-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.category-menu-card:hover .category-menu-image img{transform:scale(1.045)}
.category-menu-content{display:flex;flex:1;flex-direction:column;justify-content:center;gap:5px;padding:13px 15px 15px;background:#fbf8f4}
.category-menu-content strong{font-size:.9rem;font-weight:600;line-height:1.2}
.category-menu-content span{font-size:.72rem;color:var(--text-muted)}
.category-menu-arrow{position:absolute;top:50%;z-index:5;display:none;width:42px;height:42px;align-items:center;justify-content:center;padding:0;border:1px solid rgba(67,49,39,.18);border-radius:50%;background:rgba(251,248,244,.97);color:#35271f;box-shadow:0 7px 20px rgba(34,24,19,.15);font-size:28px;line-height:1;transform:translateY(-50%);cursor:pointer;transition:opacity .2s ease,transform .2s ease,background .2s ease}
.category-menu-arrow:hover:not(:disabled){background:#2a211c;color:#fff;transform:translateY(-50%) scale(1.04)}
.category-menu-arrow:disabled{opacity:.22;pointer-events:none}
.category-menu-carousel.has-overflow .category-menu-arrow{display:flex}
.category-menu-prev{left:-21px}.category-menu-next{right:-21px}
@media(max-width:1100px){.category-menu-card{flex-basis:180px}}
@media(max-width:768px){
 .category-menu-section{padding-top:38px}
 .category-menu-track{gap:10px}
 .category-menu-card{flex-basis:160px;min-height:196px}
 .category-menu-image{height:132px}
 .category-menu-content{padding:11px 12px 13px}
 .category-menu-content strong{font-size:.84rem}
 .category-menu-content span{font-size:.68rem}
 .category-menu-arrow{width:36px;height:36px;font-size:24px}
 .category-menu-prev{left:-7px}.category-menu-next{right:-7px}
}

/* ─��� Dynamic fragrance-note filters ── */
.note-filter-list{
  max-height: 390px;
  overflow-y: auto;
  padding-right: 6px;
}
.note-filter-list .filter-option{margin-bottom:9px}
.note-filter-list::-webkit-scrollbar{width:5px}
.note-filter-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
@media (max-width:1024px){
  .filter-sheet .note-filter-list{max-height:260px;overflow-y:auto}
}

/* ── CAMPAIGN MARQUEE ── */



@keyframes izCampaignScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .campaign-marquee { height: 30px; }
  .campaign-marquee-track { font-size: .64rem; gap: 22px; animation-duration: 22s; }
}

/* ── FINAL CAMPAIGN / CART OVERRIDES ── */

.site-header, .mobile-header { top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   V14 — HARD FIXES: recommendation CTA + homepage search
════════��══════════════════════════════════════════════════════════ */


@keyframes izCampaignCenteredScroll {
  0%, 4% { transform: translateX(calc(50vw - 50%)); }
  100% { transform: translateX(calc(-50% - 100vw)); }
}

/* Recommendation cards: the CTA is structurally outside the link and pinned to the card bottom. */
.reco-card { min-height: 100%; display:flex !important; flex-direction:column !important; }






/* Homepage compact animated search */










/* ═══════════════════════════════════════════════════════════════════
   V16 — SEARCH TYPEWRITER + TRUE BOTTOM-ANCHORED CART CTA
   The homepage search is open immediately; compact sticky search
   types automatically whenever the header becomes compact.
═══════════════════════════════════════════════════════════════════ */

/* Sticky compact search input — replaces the passive placeholder span. */





/* Homepage: search field is visible from the first paint. */






/* V17 — Ana sayfa araması: kaydırmada ilk arama alanını gizle.
   Kompakt/kaydırma araması görünmeye devam eder. */


/* V18 — Scroll search interaction + reliable overlay close */




/* V19 — Scroll compact search is a fully functional inline search.
   Results stay attached to the field; Enter opens the existing full-screen search. */







/* V21 — Scroll-safe recommendation autoplay: 3 seconds, container-only */


/* Product-page recommendation rows: one horizontal line, one card advances every second. */






/* v23 — Recommendation cards use 3-note tags instead of fragrance family. */







/* V24 — All recommendation cards use the shared homepage product-card renderer. */



/* V24 — Desktop compact search is centered to the viewport, not the inner grid. */


/* V24 FINAL — recommendation areas inherit the exact shared product-card design. */

/* V25 — Product card metadata: 3 notes + mandatory intensity + optional +Esans. */

/* Keep card metadata/icons anchored to the left edge of their frame. */

/* V25 — Homepage category/product carousels advance every 3 seconds. */


/* V26 — Card metadata: always exactly two rows, with color-coded intensity. */

/* If there are only four metadata items, keep the same two-row structure. */

/* V26 — Homepage product carousels must autoplay on mobile as well. */


/* V27 — Metadata is always a clean two-row block, aligned to the card content edge. */

/* V27 — Non-home product cards keep the same framed treatment as homepage cards. */



/* V27 — Subtle price treatment, keeping the price area visually distinct. */

/* V27 — Homepage product/category carousels: dependable 3-second autoplay. */


/* V28 — Unified product-card metadata layout.
   Intensity is outline-only; all card information shares one left edge. */


/* V31 — Intensity badge uses the EXACT same visual component as +Esans.
   Only text/border color changes by intensity. Interior is always transparent. */

/* V32 — Cart cross-sell alignment + compact header controls */




/* Keep the cart immediately to the left of the centered compact search on desktop. */


/* On mobile, keep the category menu at far left and the cart directly left of
   the centered compact search. */


/* Mobile cross-sell: preserve centered heading while keeping cards usable. */







/* V35 — FINAL scroll cart controls + homepage card parity */





/* Homepage product cards: same framed treatment as category/recommendation cards. */



/* V36 — Compact header visual alignment (desktop)
   When the header becomes compact, keep the logo, category control,
   search and cart on one exact horizontal center line. The logo is
   gently lowered so it visually matches the search pill. */


/* V37 — FIX: use the existing header cart; keep category control inside header row.
   This removes the duplicate mobile scroll cart and prevents the desktop category
   button from escaping below the actual top menu. */




/* V38 — FINAL homepage scroll-search + desktop category alignment fix
   1) The homepage has its own search inside header-actions. When compact mode
      starts, hide only that homepage search box — keep the cart visible.
   2) Desktop compact category button uses the same fixed viewport coordinate
      system as the compact search/cart, so it cannot drop below the header row. */




/* V40 — Kokunu Bul: center the complete section content. */







/* V39 — Homepage category banners: 4 categories + mobile swipe carousel.
   Desktop/tablet: four adjacent tiles. Mobile: one large tile per view with
   native horizontal scrolling and CSS scroll-snap. */



/* V42 — Mobile-only slow scroll reveal. Desktop/tablet remain unchanged. */




/* V43 — Mobile category carousel progress timeline + gentle rounded cards. */




/* All visual card surfaces use a subtle, consistent radius. */

/* V44 — Homepage hero is a single campaign visual; product category sections removed. */

/* Homepage category headers: title + small “Tümünü Gör” on one line; slogans hidden. */








/* v45 — Homepage Tester Setleri: single-row horizontal product carousel */



/* V46 — Non-perfume product cards use a cleaner 1–2 tag metadata row. */

/* ═══════════════════════════════════════════════════════════════════
   İZ PARFÜM — REFERENCE DESIGN OVERRIDE
   Visual direction follows the supplied luxury homepage reference.
   Existing content/data/functions remain intact.
═══════════════════════════════════════════════════════════════════ */









/* Header — airy, editorial */












/* Hero — supplied campaign artwork */





/* Reference category row: seven equal tiles */












/* Tester/category menu is represented in the same visual language */


/* Homepage product rows — six calm editorial cards */








/* All non-homepage product grids get the same softer cards */


/* Category/product pages */





/* Brand section becomes the dark closing editorial panel from the reference */











/* Blog and footer */





/* Mobile adaptation */




/* IZ PARFUM — supplied reference design */



























































/* ═══════════════════════════════════════════════════════════════
   V58 — Final homepage interaction fixes
═══════════════════════════════════════════════════════════════ */

/* 1 — Moderate campaign hero. Keep the complete artwork visible so
   its typography does not get cropped or overflow on mobile. */




/* 2 — Campaign ticker: the HTML contains two identical sequences.
   Moving exactly one sequence makes the loop restart seamlessly. */


@keyframes izCampaignContinuous {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 3 — At the top of the homepage search is icon-only. The existing
   compact search that appears after scrolling remains unchanged. */
.site-header:not(.compact) .home-search-box,
.mobile-header:not(.compact) .home-search-box { display: none !important; }


/* 5 — Add-to-cart CTA stays visible and clickable on every product card. */

/* 4 — Only the first four homepage category banners are shown. */



/* 6 — Give Kokunu Bul a clearly separate panel with readable contrast. */




/* ═══════════════════════════════════════════════════════════════
   V59 — HOMEPAGE / HEADER / TYPOGRAPHY FINAL POLISH
═══════════════════════════════════════════════════════════════ */

/* 1 — Mobile category banners: all four fit comfortably in the viewport. */



/* 2 + 6 — Homepage headings left aligned, and one consistent sans font.
   The catalog navigation's font is the site's master font. */






/* 3 — Tester cards use exactly the same compact card proportions as the
   other homepage product carousels. */

/* 4 — All product pricing starts at the same left edge as product text. */

/* 5 — Top search remains only the icon. It opens the existing full search
   overlay on every page. Do not touch the scroll/compact search. */




/* 7 — Two-line IZ PARFÜM brand mark, everywhere. */





/* Keep price/button rows visually stable on every card size. */

/* ═══════════════════════════════════════════════════════════════
   V60 — SAFE CODE VISUALS + LOW-JANK INFINITE PRODUCT MARQUEES
   These overrides intentionally sit last so they win over older revisions.
═══════════════════════════════════════════════════════════════ */

/* Raster artwork is replaced by SVG/data-URI illustrations. */



/* The product track is animated only with transform. No scrollLeft writes
   happen every frame, which removes the main source of mobile jank. */






/* Keep tester and every homepage product carousel on one consistent card
   sizing system. Mobile shows two cards at a time. */


/* Category/campaign SVG visuals are safe inside the existing overlay stack. */



/* Exact two-group ticker: each group has the same width, so -50% is a true
   seamless loop. It never reaches a blank/end state. */




@keyframes izCampaignGroups {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(-50%,0,0); }
}
@media (max-width:768px) {
  .campaign-marquee-group { gap:22px; padding-right:22px; }
  .campaign-marquee-track { animation-duration:22s !important; }
}

/* Do not pause either product marquee on hover/touch. */


/* Keep the top header controls centered vertically while preserving the
   existing scroll/compact search behavior. */


/* ── V60 final layout corrections ─────────────────────────────────── */
/* Mobile homepage: four collection tiles remain compact and the section
   header keeps the same title / Tümünü Gör baseline. */


/* Kokunu Bul is deliberately a contrasting panel and all its visible copy
   is centered, including the wizard options and actions. */




/* Larger, centered top navigation. Scroll-compact behavior is untouched. */








/* Code-generated campaign artwork is never allowed to overflow its hero. */


/* V61 — stability + scale pass
   Homepage product rows stay inside their viewport and use smaller cards.
   The track itself may be wider than the viewport, but the wrapper clips it. */





/* Smaller homepage product cards: more products visible at once. */

/* Desktop category/menu control is visible in the initial header as well as
   the compact header, aligned to the same left content edge. */


/* Continuous campaign ticker: faster, with two identical groups and no end gap. */


@media (max-width: 768px) {
  .campaign-marquee-track { animation-duration: 12s !important; }
  .campaign-marquee-group { gap: 20px !important; padding-right: 20px !important; }
}

/* Keep the mobile logo exactly centered before scrolling. */


/* V62 — unified homepage product card size
   Every homepage product carousel uses the same compact card dimensions. */

/* V63 — static homepage products: equal cards, no duplication, no movement. */





/* V64 — uniform, wider homepage cards with aligned content. */








/* V65 — homepage category carousels: clean, equal cards and device-specific motion. */











/* V66 — homepage section heading/description spacing */


/* V66 — stable homepage carousel cards and controls */





/* ═══════════════════════════════════════════════════════════════
   V67 — Homepage product cards: wide + square, hover-pause, arrows
═══════════════════════════════════════════════════════════════ */



/* Arrows for the recommendation / related product rows. */






/* ════════════════════════════════════════════════════════════
   V68 — unified compact cards, white canvas, bigger nav, round categories
════════════════════════════════════════════════════════════ */

/* ── 1. Pure white canvas ────────────────────────────────────── */



/* ── 2. Top campaign bar: starts centred, repeats forever ─────────── */




/* ── 3. Main menu: larger labels, categories button first ────────── */





/* ── 4. Hero campaign visual ──────────────────────────────── */
/* Desktop: noticeably taller, but always proportional to the screen. */

/* Mobile: narrower and much taller portrait visual. */



/* ── 5. One single card design everywhere ────────────────────── */

/* Near-square image area (not an exact square). */

/* Compact information block — no large empty gaps. */

/* ── 6. Info chips: up to six items, exactly two rows, no overlap ── */

/* ── 7. Homepage carousel cards follow the shared design ─────────── */


/* Grid pages get the same compact card, just laid out in a grid. */



/* ── 8. Round non-perfume category shortcuts ─────────────────── */















/* ═══ V68b — final overrides (nav size, hero, ghost chips) ═══ */

/* Larger main-menu labels, beating the older !important rules. */





/* Categories button aligned inside the menu row, at its far left. */


/* Hero campaign visual: tall on desktop, portrait on mobile, always scaled. */





/* Placeholder chips keep the two-row block identical on every card. */

/* ════════════════════════════════════════════════════════════
   V69 — compact header icon, expanding banners, tighter cards, tinted sections
════════════════════════════════════════════════════════════ */

/* ── 1. Categories icon stays visible in the sticky/compact header ──── */



/* ── 2. Category banners expand sideways on desktop hover ────────── */


/* ── 3-5. One shorter, tightly aligned card design across the site ── */

/* Chips: left aligned, two tight rows, no wasted vertical space. */

/* ── 6. Round category row: white surrounds, smooth arrows ──────── */




/* ── 7. “Kokunu Bul” — tinted panel, fully centered copy ────────── */












/* ── 8. “İz Parfüm Hakkında” — deep warm panel ──────────────── */







/* The white-canvas rule from V68 must not flatten these two panels. */


/* ════════════════════════════════════════════════════════════
   V72 — price/button alignment, static rows with "Daha fazla",
         bigger round menu, one black logo, sticky campaign bar
════════════════════════════════════════════════════════════ */

/* ── 1. Price sits with equal breathing room above and below ──────── */

/* ── 2. "Sepete Ekle": text left aligned, vertically centred in the button ─ */

/* ── 3-5. Static rows + "Daha fazla" ─────────────────────────── */






/* Recommendation rows are a plain grid now — same cards, no sliding. */




/* ── 6. Bigger four-up round menu, edge to edge inside the container ── */






/* ── 7. One single black logo — only the size differs ───────────── */







/* ── 8. Campaign marquee stays pinned to the top while scrolling ───── */




/* ═══ V72b — exact price centring + tighter homepage card width ══════ */



/* ════════════════════════════════════════════════════════════
   V73 — site boundaries, campaign bar above compact search, card redesign
════════════════════════════════════════════════════════════ */



/* ── 1. Product rows never spill outside the site container ──────── */



/* v203 — campaign ticker scrolls away; headers remain sticky at viewport top.
   This removes the initial blank area and restores the compact search after scroll. */

.site-header, .mobile-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
}
.site-header:not(.compact), .mobile-header:not(.compact) {
  top: 0 !important;
}
@media (max-width: 1024px) {
  .mobile-header { top: 0 !important; }
}

/* 3. The compact bar shrinks to the height its own content needs and every
      element inside is centred on the same vertical axis. Positioning is
      relative to the bar itself, so it can never cover the campaign text. */




/* ── 5. Product card — premium, balanced, near-square ───────────── */

/* Image: wide, prominent, top of the card. */

/* "YENİ" badge: small, crisp, pinned top left. */

/* Text block: one vertical rhythm, equal side padding. */

/* "Yaz" / "Erkek" chips: side by side, right under the category line. */

/* Price: bigger, bolder, separated by a hairline rule. */

/* Add-to-cart: full width at the very bottom, flush with the inner edges. */

/* Compact scale on small screens — same structure, smaller type. */

/* ═══ V73b — card structure guards (image link + info column) ══════ */

/* Extra chips ("Yoğun", "+Esans") sit on the same row as the note chips. */

/* ═══ V73c — cards fill their grid column; identical proportions everywhere ═══ */

/* Same tight rhythm on the homepage rows as on every other grid. */

/* Any product grid: cards always stretch, never shrink to their content. */

/* === V73d - homepage rows flow as real rows, cards fill their column === */


/* === V74 - wider site, compact-bar logo, uniform card height === */

/* 2. Slightly wider site boundaries so five cards fit side by side. */



/* 1. Compact scroll bar (desktop): logo pinned far left, everything centred
      on the same horizontal axis as the search pill. */


/* 5. Compact scroll bar (mobile): cart icon at the far right, centred. */


/* 4. One fixed card height everywhere; width keeps following the grid. */

/* "Ürünlere Git" button shares the "Daha fazla" pill styling. */



/* === V74b - uniform fixed card height wins over legacy row rules === */

/* === V74c - mobile compact bar: cart pinned right, vertically centred === */


/* === V74d - mobile compact bar: cart flows at the right, flex-centred === */


/* === V74e - mobile compact bar: clear legacy translate on the actions === */


/* === V75 - 2-row chips, matching card proportions, no tap glow === */






/* === V75b - mobile: tall, edge-to-edge category tiles with tap expansion === */



/* === V75c - card proportions per breakpoint === */


/* ── 1) TÜM SİTEDE TEK KART YAPISI ─────────────────────────────── */

/* Görsel alanı: sabit oran, taşma yok */

/* Bilgi alanı: kalan yükseklik, içerik hiçbir zaman üst üste binmez */

/* Ürün adı: en fazla 2 satır, taşan kısım kesilir */

/* ── 3) BİLGİ İKONLARI (etiketler): küçük, sola hizalı, eşit boy ── */

/* Fiyat satırı */

/* Sepete ekle: her zaman en altta, sabit yükseklik, görünür */

/* Rozet ve favori ikonu görselin üstünde, yazılarla çakışmaz */

/* Mobil ölçek — aynı yapı, sabit ve biraz artırılmış boy */

/* ── 4) MOBİL: header sonrası 4'lü menü tek satır, bitişik ─────── */


/* ── 6) SEPETTEKİ ÜRÜNLER: SEPETE EKLE BUTONU YEŞİL ────────────── */

/* ── 7) SEPET SAYFASI: KOMPAKT / GENİŞ GÖRÜNÜM ─────────────────── */





/* Kompakt: her ürün tek satır — küçük resim, isim, fiyat */










/* Geniş görünüm: klasik satır (adet + kaldır görünür) */



/* ── 5) MASAÜSTÜ: ana menü her sayfada aynı hizada ─────────────── */


/* Masaüstü: kart boyu her grid'de sabit (önceki auto-height kurallarını ezer) */

/* 1–4) Every product card uses one geometry and one information rhythm. */

/* Title and first descriptive line sit close together. */

/* Info chips: text-sized borders, exactly two rows, consistent box height. */

/* Ghost slots preserve the 2-row geometry without drawing a frame. */

/* Cart CTA is inset from the card edge, never flush with the outer frame. */

/* 5) Mobile: four category tiles are tall and expand sideways on first tap. */


/* 6) Search overlay must sit above the sticky campaign ticker. */




/* Product name + first descriptive line: ALWAYS one line with ellipsis. */

/* Exactly 2 visible metadata rows on every card. */

/* Ghost slots occupy the missing cells without drawing a box. */

/* Discount percentage stays fully inside its own frame. */

/* Same metadata proportions on narrow mobile cards. */

/* Product card CTA: visually independent from the outer frame with
   proportional horizontal inset and a deliberate bottom breathing space. */

/* Product name + secondary line are always single-line and never stretch the card. */

/* Discount badge stays inside its own box without forcing the price row wider. */

/* Mobile: four category visuals touch edge-to-edge, stay tall, and the
   clicked tile expands. Exactly one "Ürünlere Git" CTA is shown. */





















/* === V81 — mobile category tiles: taller, edge-to-edge, one CTA, toggle open/close === */


/* V82 — mobile homepage category tiles: flush, tall, single-tap expand/collapse */


/* V83 — menu logo below campaign bar + mobile category content-only update */


/* The opened category/menu panel starts below the sticky campaign strip,
   so its IZ PARFÜM logo can never sit behind the moving campaign text. */





/* V86 — four-slide hero + clean mobile category visuals */








/* Mobile keeps the existing tall portrait ratio. */



/* Mobile category banners: visuals only in the closed state.
   Keep the established expand/collapse animation untouched. */


/* V88 — mobile round category carousel: 2.5 large items, native touch scroll only. */


/* V88 — make the fourth hero artwork clearly distinct from the other three. */


/* V89 — Hero aspect-ratio lock: desktop 1.91:1, mobile 9:16 */





/* V90 — final hero sizing + reliable pointer navigation */










/* V91 — mobile round category carousel: exactly 2.5 visible, touch-drag only. */


/* V92 — desktop/mobile homepage header + round category sizing */




/* Keep all four header slides real on every viewport; only the active one is visible. */





/* V93 — FINAL HERO + DESKTOP CATEGORY FIXES */







/* V95 — definitive responsive hero sizing + desktop pointer navigation */




/* Desktop category circles: one row, four items only, never wrap. */


/* V95 — final hero dimensions + dependable desktop mouse drag/swipe */




/* V105 — SINGLE HERO DESIGN */












/* Live Shopier stock state */





/* v116 product options */








/* v122 — 100 ml gift label */




/* v123: 100 ml gift label sits above the volume button, not inside it. */





/* v123: six product-card metadata chips maximum, 3 columns x 2 rows. */

/* v126 — perfume card info chips: up to 6 items, max 2 rows, no overlap/overflow. */

/* V28 — Product card info tags: sequential flow, max 2 rows, no fixed table columns. */

/* Gentle, low-saturation intensity colors. */

/* V129 — Product card metadata flows naturally left-to-right.
   No fixed grid/column placement: pills use available width and wrap to a
   maximum of two rows without reserving blank cells. */

/* Remove all legacy grid placement rules that can create blank cells. */

/* v130 — Recommendation cards: exactly the same geometry as all other product cards. */

/* v130 — recommendation metadata uses the same sequential two-row flow as all product cards. */

/* v131 — Recommendation cards follow the exact homepage row geometry. */







/* v132 — Product-page recommendation cards: fixed homepage-like card width.
   Prevent a single recommendation from stretching across the entire row.
   Cards pack from left to right, then wrap naturally to the next row. */


















/* Keep the two-row metadata area on cards that have fewer than six tags too. */

/* Every card gets exactly the same two-row metadata footprint, even when
   there are fewer than six tags or no tags at all. */

/* Category pages use the same card proportions and spacing as the homepage. */




/* The metadata area is ALWAYS two rows, even when empty or only partially filled. */





/* V147 — Canonical site-wide navigation + collapsible category groups */























/* v148 — hide the Parfümler dropdown from the compact scroll header */


/* V151 — Site-wide fire marker for Shopier top-20 best sellers. */

/* v154 — Mobile product sticky bar: show the pending cart total. */


/* HERO: desktop/mobile assets are resolved by filename only.
   Put hero-1, hero-2, hero-3, hero-4 in both folders; extension can be
   .svg, .jpg, .jpeg, .png, .webp, .gif, .avif or a supported video format. */




/* V157 — Hero alan oranları kesin sabit */






/* V159 — Four homepage category tiles use the supplied category artwork.
   Desktop and mobile use the same fixed 3:4 tile ratio. */





/* V159 — Category artwork already contains its own typography and visual treatment.
   Keep the cards clickable, but do not duplicate the old text/gradient layer. */


/* V160 — FINAL HEADER + CATEGORY MENU DIMENSIONS / DESKTOP HOVER */




/* The four category images keep their original 3:4 portrait ratio at rest. */






/* V161 FIX — Desktop category hover: keep the original menu height fixed.
   The hovered card overlays to the right instead of changing the grid height. */


/* V164 — Desktop 4'lü kategori menüsü: bitişik kartlar + yavaş siyah hover karartma */


/* V165 — Desktop 4'lü menü: sabit 3:4 menü yüksekliği + sağa açılma.
   Grid'in yüksekliği hiçbir hover durumunda değişmez. Görsel object-fit: cover ile
   gerilmeden korunur; yalnızca hover edilen kart sağa doğru genişler. */


/* V166 — Desktop 4'lü menü: HOVERDA YAKINLAŞTIRMA / GENİŞLEME YOK.
   Menü ölçüleri ve 3:4 oranı tamamen sabit kalır. Sadece aktif kart gölgelidir,
   diğer kartlar yavaş siyah perdeyle kararır. */


/* V167 — Desktop 4'lü menü hover: çok hafif yaklaşma + siyah çerçeve.
   Kartın gerçek ölçüsü ve 3:4 oranı değişmez; sadece görsel olarak çok az ölçeklenir. */


/* V171 — Desktop 4'lü kategori menüsü: hover efektleri tamamen yeniden kuruldu.
   Kart ölçüsü, 3:4 oranı ve grid yerleşimi sabittir. Hiçbir scale/width/height animasyonu yoktur. */


/* V172 — Mobile 4'lü kategori menüsü: açılan kart + altta CTA + yumuşak karartma.
   Desktop hover kuralları ve mevcut mobil açılma animasyonu korunur. */


/* V174 — Desktop header: native görsel sürükleme kapalı; tut-çek yalnızca header geçişidir. */


/* V175 — Desktop header: the slide itself physically follows the pointer. */


/* v179 — During manual drag, keep the two neighboring headers rendered above
   the campaign slider's legacy opacity rules. They move as one continuous strip
   with the active header, so the slider background is never exposed between them. */







/* Remove the old framed-card separators so the card content reaches the
   complete former frame area without an artificial boundary. */

/* Keep typography slightly larger while preserving the existing hierarchy. */

/* ================================================================
/* V214 — CARD TITLE / MOBILE CATEGORY HEADER / INLINE MOBILE FILTERS */




/* Mobile note search suggestions */



/* Desktop must never show the mobile filter sheet/overlay. The desktop
   sidebar remains the only category filter UI at these widths. */



/* ─────────────────────────────────────────
   SELECTED FRAGRANCE SPOTLIGHT
   ───────────────────────────────────────── */
/* Selected fragrance carousel: image-only 9:16 visual frames. Product cards remain below. */



/* Demo spotlight visuals — self-contained examples, independent of /img */






























/* V180-FIX — standalone selected fragrance examples */





















/* V184 — mobile fragrance spotlight: reliable centering + smaller footprint */


/* ================================================================


/* ================================================================
   CANONICAL PRODUCT CARD SYSTEM
   Reference: homepage "Yeni Ürünler" card.
   All product cards across the site intentionally share this exact
   visual structure. Section-specific card overrides must not be added.
   ================================================================ */






















































/* V195 — Homepage metadata cards use the same colored framed treatment as all other product-card metadata. */












/* Mobile tap feedback: remove browser's default blue highlight. */


/* Desktop: suppress the browser's mouse-focus blue flash while preserving
   visible keyboard focus via :focus-visible. */



/* Category pages: keep only the breadcrumb line; remove the large page title
   and description block. */




/* ── MOBILE CATEGORY FILTER QUICK ROWS ── */









/* v180 targeted fixes */
@media (max-width: 1024px){.mobile-filter-bar{display:flex;}}



/* v182 — mobile category filters: explicit two-row controls + expandable note search */
@media (max-width: 1024px){
  .mobile-filter-bar{display:flex !important;}
}

@media (max-width: 768px){
  .filter-sheet-overlay{display:none !important;}
  .filter-sheet{
    display:none !important;
    position:static !important;
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    overflow:visible !important;
    margin:10px 0 14px !important;
    padding:0 !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    background:var(--white) !important;
    box-shadow:0 6px 22px rgba(0,0,0,.08) !important;
    transform:none !important;
  }
  .filter-sheet.open{display:block !important;}
  .filter-sheet-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:48px !important;
    padding:0 14px !important;
    border-bottom:1px solid var(--border) !important;
  }
  .filter-sheet-header h3{margin:0 !important; font-size:.92rem !important; font-weight:700 !important;}
  .mobile-filter-panel{padding:12px !important;}
  .mobile-filter-row{display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; width:100% !important; margin:0 0 9px !important;}
  .mobile-filter-chip{
    display:flex !important; align-items:center !important; justify-content:center !important;
    min-width:0 !important; min-height:40px !important; padding:7px 4px !important;
    box-sizing:border-box !important; border:1px solid var(--border) !important;
    border-radius:10px !important; background:var(--white) !important; color:var(--text-sec) !important;
    font-size:.72rem !important; line-height:1.15 !important; text-align:center !important; cursor:pointer !important;
  }
  .mobile-filter-chip input{position:absolute !important; opacity:0 !important; pointer-events:none !important;}
  .mobile-filter-chip:has(input:checked){border-color:var(--text) !important; background:var(--text) !important; color:var(--white) !important;}
  .mobile-filter-row-gender{padding-bottom:2px !important;}
  .mobile-filter-row-title{font-size:.72rem !important; font-weight:700 !important; color:var(--text-muted) !important; margin:3px 0 7px !important;}
  .mobile-filter-notes-block{padding-top:2px !important;}
  .mobile-note-search .note-search-wrap{width:100% !important; box-sizing:border-box !important;}
  .mobile-note-search-results{
    display:none !important;
    margin-top:8px !important; padding:9px !important;
    border:1px solid var(--border) !important; border-radius:10px !important; background:var(--white) !important;
  }
  .mobile-note-search.is-open .mobile-note-search-results{display:block !important;}
  .mobile-note-search .note-search-suggestions{
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important; max-height:122px !important; overflow-y:auto !important;
    overscroll-behavior:contain !important; padding-right:2px !important;
  }
  .mobile-note-search .note-search-suggestions:empty{display:none !important;}
  .mobile-note-search .note-suggestion{
    min-width:0 !important; width:100% !important; min-height:38px !important;
    padding:7px 8px !important; border:1px solid var(--border) !important; border-radius:8px !important;
    background:var(--white) !important; color:var(--text) !important; font:inherit !important;
    font-size:.72rem !important; line-height:1.15 !important; text-align:center !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; cursor:pointer !important;
  }
  .mobile-note-search .note-suggestion.is-selected,
  .mobile-note-search .note-suggestion[aria-pressed="true"]{background:var(--text) !important; color:var(--white) !important; border-color:var(--text) !important;}
  .mobile-note-search .note-filter-list{display:none !important;}
  .mobile-filter-reset{
    width:100% !important; min-height:38px !important; margin-top:10px !important;
    border:1px solid var(--border) !important; border-radius:10px !important;
    background:var(--white) !important; color:var(--text-sec) !important; font:inherit !important; font-size:.73rem !important; cursor:pointer !important;
  }
}

.product-card .best-seller-fire{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}

/* v184 — mobile category filters: robust inline panel */
@media (max-width: 1024px){
  .mobile-filter-bar{display:flex !important;}
  .category-content{width:100% !important; min-width:0 !important;}
  .filter-sheet{
    display:none !important;
    position:static !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin:10px 0 14px !important;
    padding:0 !important;
    max-height:none !important;
    overflow:visible !important;
    transform:none !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    background:var(--white) !important;
    box-shadow:0 6px 22px rgba(0,0,0,.08) !important;
    z-index:5 !important;
  }
  .filter-sheet.open{
    display:block !important;
  }
  .filter-sheet-overlay{
    display:none !important;
  }
  .filter-sheet-header{
    display:flex !important;
    min-height:48px !important;
    padding:0 14px !important;
    box-sizing:border-box !important;
  }
  .mobile-filter-panel{
    display:block !important;
    padding:12px !important;
    box-sizing:border-box !important;
  }
  .mobile-filter-row{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    margin:0 0 9px !important;
  }
  .mobile-filter-chip{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:0 !important;
    min-height:40px !important;
    box-sizing:border-box !important;
    padding:7px 4px !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    background:var(--white) !important;
    color:var(--text-sec) !important;
    cursor:pointer !important;
  }
  .mobile-filter-chip input{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    margin:0 !important;
    pointer-events:none !important;
  }
  .mobile-filter-chip:has(input:checked){
    border-color:var(--text) !important;
    background:var(--text) !important;
    color:var(--white) !important;
  }
  .mobile-filter-notes-block{display:block !important; padding-top:2px !important;}
  .mobile-filter-row-title{display:block !important;}
  .mobile-note-search{display:block !important;}
  .mobile-note-search .note-search-wrap{
    display:flex !important;
    width:100% !important;
    min-height:42px !important;
    box-sizing:border-box !important;
    align-items:center !important;
    cursor:text !important;
  }
  .mobile-note-search-results{
    display:none !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .mobile-note-search.is-open .mobile-note-search-results{
    display:block !important;
  }
  .mobile-note-search .note-search-suggestions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    max-height:180px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .mobile-note-search .note-filter-list{display:none !important;}
  .mobile-filter-reset{
    display:block !important;
  }
}

/* V186 — 3D çok satan alev işareti. Native emoji korunur; katmanlı gölgeyle 3D görünüm verilir. */
.product-card .best-seller-fire.best-seller-fire-3d{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:25px;
  line-height:1;
  cursor:default;
  transform:translateZ(0);
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.28)) drop-shadow(0 0 5px rgba(255,120,0,.18));
  text-shadow:1px 1px 0 rgba(120,35,0,.22), 2px 2px 0 rgba(120,35,0,.14);
  -webkit-font-smoothing:antialiased;
}
.product-card .best-seller-fire.best-seller-fire-3d::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,185,0,.18),rgba(255,90,0,0) 70%);
  z-index:-1;
}


/* === v187: configurable best-seller image + cart improvements === */
.best-seller-fire-image{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:34px;height:34px;z-index:4;background:transparent!important;border:0!important;box-shadow:none!important;pointer-events:none}
.best-seller-fire-image img{display:block;width:100%;height:100%;object-fit:contain;background:transparent!important;border:0!important}
.best-seller-fire-3d{background:transparent!important;border:0!important;box-shadow:none!important}


.cart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 14px}
.cart-toolbar-group{display:flex;gap:8px;align-items:center}
.cart-view-btn,.cart-clear-all{appearance:none;border:1px solid var(--border);background:var(--white);color:var(--text);border-radius:8px;padding:9px 12px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.cart-view-btn.is-active{background:var(--text);color:var(--white);border-color:var(--text)}
.cart-clear-all{color:#9a2f24;border-color:#e4c7c3;background:#fff8f7}
.cart-clear-all:hover{background:#fbeeea}
.cart-item-product-link{min-width:0;display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none}
.cart-item-product-copy{min-width:0}
.cart-item-name{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}
.cart-page.cart-view-compact .cart-item-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-page.cart-view-wide .cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px}
.cart-page.cart-view-wide .cart-item-product-link{min-width:0}
.cart-page.cart-view-wide .cart-item-actions{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.cart-page.cart-view-wide .qty-control{display:flex;align-items:center}
.cart-page.cart-view-wide .cart-remove{display:inline-flex}
.cart-page.cart-view-compact .cart-remove,.cart-page.cart-view-compact .qty-control{display:none!important}
.cart-page.cart-view-compact .cart-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px}
.cart-page.cart-view-compact .cart-item > .cart-item-actions{display:flex;align-items:center}
.cart-page.cart-view-compact .cart-item-product-link{display:contents}
.cart-page.cart-view-compact .cart-item-product-copy{min-width:0}
@media(max-width:768px){
 .cart-toolbar{padding-bottom:10px}
 .cart-toolbar-group{flex:1}
 .cart-view-btn{flex:1}
 .cart-clear-all{white-space:nowrap}
 .cart-page.cart-view-wide .cart-item{grid-template-columns:minmax(0,1fr) auto;gap:10px}
 .cart-page.cart-view-wide .cart-item-price{grid-column:2;grid-row:1;align-self:center}
 .cart-page.cart-view-wide .cart-item-actions{grid-column:1/-1;justify-content:space-between}
 .cart-page.cart-view-wide .cart-item-product-link{min-width:0}
 .cart-item-name{font-size:.9rem}
}

/* v188: discount-aware cart pricing */
.cart-item-price .cart-price-sale{font-weight:700;color:var(--text);line-height:1.15}
.cart-item-price .cart-price-original{display:block;margin-top:3px;text-decoration:line-through;color:var(--text-muted);font-size:.74rem;line-height:1.15}
.cart-item-price .cart-price-current{font-weight:700}
.cart-summary .summary-total{font-weight:700}
nn/* v189 — custom 3D flame SVG and compact/accurate category filters */n.product-card .best-seller-fire.best-seller-fire-3d{n  width:34px!important; height:34px!important;n  display:inline-flex!important; align-items:center!important; justify-content:center!important;n  background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important;n  filter:drop-shadow(0 2px 2px rgba(0,0,0,.20));n}n.product-card .best-seller-fire.best-seller-fire-3d svg{display:block;width:32px;height:32px;}n.product-card .product-price.sale{font-weight:800!important;color:#c62828!important;}n.product-card .product-discount{font-weight:800!important;color:#c62828!important;font-size:.7rem!important;}nn@media (max-width:768px){n  .filter-sheet-header{min-height:40px!important;padding:0 10px!important;}n  .filter-sheet-header h3{font-size:.82rem!important;}n  .mobile-filter-panel{padding:8px!important;}n  .mobile-filter-row{gap:5px!important;margin:0 0 6px!important;}n  .mobile-filter-chip{min-height:32px!important;padding:5px 3px!important;border-radius:8px!important;font-size:.68rem!important;}n  .mobile-filter-row-title{font-size:.66rem!important;margin:2px 0 5px!important;}n  .mobile-note-search .note-search-wrap{min-height:34px!important;}n  .mobile-note-search .note-search-icon{width:14px!important;height:14px!important;}n  .mobile-note-search-results{margin-top:5px!important;padding:6px!important;}n  .mobile-note-search .note-search-suggestions{gap:5px!important;max-height:132px!important;}n  .mobile-note-search .note-suggestion{min-height:32px!important;padding:5px 6px!important;border-radius:7px!important;font-size:.66rem!important;}n  .mobile-filter-reset{min-height:32px!important;margin-top:6px!important;font-size:.68rem!important;border-radius:8px!important;}n}n

/* v190 — editable content pages, vehicle-menu removal, discount parity */
.iz-editable-content{line-height:1.8;color:var(--text);margin:0 0 28px;}
.iz-editable-content h1,.iz-editable-content h2,.iz-editable-content h3{margin:1.4em 0 .55em;line-height:1.3;}
.iz-editable-content h1:first-child,.iz-editable-content h2:first-child{margin-top:0;}
.iz-editable-content p{margin:.75em 0;}
.iz-editable-content img{max-width:100%;height:auto;border-radius:8px;}
.iz-editable-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.cart-item .cart-price-discount{display:block;color:#c62828!important;font-size:.72rem!important;font-weight:800!important;line-height:1.15;margin-top:3px;}
.product-card .product-discount{color:#c62828!important;font-weight:800!important;}
@media(max-width:768px){.iz-editable-content{line-height:1.7;font-size:.94rem;}.category-filter-link[href*="cat=arac"]{display:none!important;}}
.nav-link[href*="cat=arac"],.mobile-menu-item[href*="cat=arac"]{display:none!important;}

/* v191 — WordPress page content is the editable source for populated information pages. */
.iz-page-custom-content,.iz-editable-content{max-width:100%;line-height:1.75}.iz-page-custom-content h2,.iz-editable-content h2{margin-top:0.9em}.iz-page-custom-content h3,.iz-editable-content h3{margin-top:1.1em}.iz-page-custom-content p,.iz-editable-content p{margin:0 0 1em}.iz-page-custom-content ul,.iz-editable-content ul{margin:0 0 1.1em 1.4em}.iz-editable-content a{color:var(--accent);text-decoration:underline}


/* Generic editable WP pages */
.iz-editable-page{padding:48px 0 72px}
.iz-editable-page__content{max-width:920px;margin:0 auto;background:#fff;border:1px solid var(--border,#e4e2dc);border-radius:14px;padding:40px}
.iz-editable-page__header h1{margin:0 0 28px;font-size:clamp(28px,4vw,42px);font-weight:600;color:var(--text,#1f1f1f)}
.iz-editable-page__body{font-size:16px;line-height:1.8;color:var(--text,#2a2a2a)}
.iz-editable-page__body h2,.iz-editable-page__body h3{margin:30px 0 12px;line-height:1.25}
.iz-editable-page__body p{margin:0 0 16px}
.iz-editable-page__body ul,.iz-editable-page__body ol{padding-left:24px;margin:0 0 18px}
.iz-editable-page__body img{max-width:100%;height:auto;border-radius:10px}
.iz-editable-page__body a{color:inherit;text-decoration:underline}
@media(max-width:768px){.iz-editable-page{padding:24px 0 44px}.iz-editable-page__content{padding:22px 18px;border-radius:10px}.iz-editable-page__body{font-size:15px;line-height:1.7}}



/* v193 — live homepage settings, dynamic circle menu, hide homepage blog preview */
.category-circles-carousel{position:relative;display:flex;align-items:center;gap:8px;}
.category-circles-viewport{min-width:0;flex:1;overflow:hidden;}
.category-circles-track{display:flex;gap:18px;overflow:visible;scroll-behavior:smooth;}
.category-circles-track .category-circle{flex:0 0 calc((100% - 54px)/4);min-width:140px;}
.category-circles-arrow{display:none;width:36px;height:36px;border:1px solid var(--border,#ddd);background:#fff;border-radius:50%;align-items:center;justify-content:center;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);z-index:2;}
.category-circles-arrow:disabled{opacity:.35;cursor:default;}
.category-circles-carousel.has-overflow .category-circles-arrow{display:flex;}
.iz-circle-editor-item .button-link-delete{display:inline-block;margin-top:10px;color:#b32d2e;}
.iz-circle-add-wrap{margin-top:12px;}
@media(max-width:768px){
  .category-circles-track{gap:12px;overflow:visible!important;}
  .category-circles-track .category-circle{flex:0 0 calc((100vw - 72px)/3);min-width:92px;}
  .category-circles-carousel.has-overflow .category-circles-arrow{display:flex;width:30px;height:30px;font-size:18px;}
  .category-circles-viewport{overflow:hidden!important;}
}

/* v195 — tester selections: code + fragrance name, summary/copy when full */
.tester-code-option .tester-code-name{font-weight:400;color:var(--text-sec);}
.tester-selection-summary{margin-top:10px;padding:10px 11px;border:1px solid var(--border);border-radius:8px;background:var(--off-white);}
.tester-selected-codes{font-weight:700;letter-spacing:.01em;word-break:break-word;}
.tester-summary-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;}
.tester-copy-btn,.tester-reopen-btn{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:7px;padding:7px 10px;cursor:pointer;font-size:.78rem;font-weight:600;}
.tester-copy-btn:hover,.tester-reopen-btn:hover{background:var(--surface);}
@media(max-width:640px){.tester-selection-summary{padding:8px}.tester-summary-actions{margin-top:7px}.tester-copy-btn,.tester-reopen-btn{padding:6px 9px;font-size:.74rem;}}


/* v197 — Tester selection / search / product metadata refinements */
.tester-gender-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px;}
.tester-gender-group{min-width:0;padding:10px 9px;border:1px solid var(--border,#e3ddd4);border-radius:10px;background:var(--white,#fff);}
.tester-gender-title{font-weight:700;font-size:.78rem;margin-bottom:7px;color:var(--text,#222);}
.tester-gender-list{display:grid;gap:5px;max-height:290px;overflow:auto;padding-right:2px;}
.tester-code-option{display:flex;align-items:flex-start;gap:7px;padding:5px 3px;border-radius:6px;cursor:pointer;font-size:.76rem;line-height:1.25;}
.tester-code-option:hover{background:var(--off-white,#faf8f4);}
.tester-code-option input{margin-top:2px;flex:0 0 auto;}
.tester-code-option .tester-code-name{display:inline!important;font-weight:400;color:var(--text-sec,#666);}
.pd-family{font-weight:400!important;}

/* Top-of-page search opens as a slow dropdown, not a full-screen overlay. */
html body .search-overlay{position:absolute!important;inset:auto 0 auto 0!important;top:var(--search-drop-top,68px)!important;display:flex!important;visibility:hidden;opacity:0;transform:translateY(-14px);max-height:0;overflow:hidden;background:var(--white,#fff);border-top:1px solid transparent;border-bottom:1px solid var(--border,#e4e1da);box-shadow:0 14px 35px rgba(0,0,0,.10);transition:opacity .34s ease,transform .42s ease,max-height .42s ease,visibility 0s linear .42s;z-index:150!important;}
html body .search-overlay.open{visibility:visible;opacity:1;transform:translateY(0);max-height:min(78vh,680px);transition:opacity .34s ease,transform .42s ease,max-height .42s ease,visibility 0s linear 0s;}
html body .search-overlay .search-bar{max-width:1180px;width:100%;margin:0 auto;padding:15px 24px;border-bottom:1px solid var(--border,#e4e1da);background:var(--white,#fff);}
html body .search-overlay .search-results{width:100%;max-width:1180px;margin:0 auto;flex:1;overflow:auto;padding:12px 24px 22px;background:var(--white,#fff);}
html body .search-overlay .search-result-item{background:var(--white,#fff);}
@media(min-width:769px){:root{--search-drop-top:68px}.header-logo{font-size:1.3rem!important}.header-logo .logo-line-top{font-size:1.15em!important}.header-logo .logo-line-bottom{font-size:.58em!important;}}
@media(max-width:768px){:root{--search-drop-top:56px}.mobile-header-logo{font-size:1.08rem!important}.tester-gender-columns{gap:9px}.tester-gender-group{padding:8px 6px}.tester-gender-list{gap:4px;max-height:240px}.tester-code-option{padding:4px 1px;font-size:.7rem;gap:5px}.tester-selection-help{font-size:.72rem}.search-overlay{top:56px!important}.search-overlay .search-bar{padding:11px 14px}.search-overlay .search-results{padding:8px 14px 18px;}}

/* Four-up circles by default; overflow uses the existing manual arrows. */
@media(min-width:769px){
  .category-circles-track{display:flex!important;gap:18px!important;overflow:visible!important;}
  .category-circles-track .category-circle{flex:0 0 calc((100% - 54px)/4)!important;min-width:0!important;}
  .category-circles-carousel.has-overflow .category-circles-track .category-circle{flex-basis:196px!important;}
  .category-circles-carousel.has-overflow .category-circles-viewport{overflow:hidden!important;}
}
.cart-view-btn{background:#000!important;color:#fff!important;border-color:#000!important;}
.cart-view-btn.is-active{background:#fff!important;color:#000!important;border-color:#000!important;}

/* v201 — category circles: drag affordance + frontend protection hardening */
.category-circles-viewport{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.category-circles-viewport.is-dragging{cursor:grabbing;scroll-behavior:auto!important;}
.category-circles-track,.category-circles-track *{-webkit-user-drag:none;}

/* Hide the WordPress admin bar on the public storefront so it cannot create the
   campaign/header gap while the admin is logged in. The dashboard remains unchanged. */
html.wp-toolbar, html.admin-bar, body.admin-bar{margin-top:0!important;padding-top:0!important;}
#wpadminbar{display:none!important;}
@media(max-width:1024px){
  html,body{margin-top:0!important;padding-top:0!important;}
  .campaign-marquee{margin-top:0!important;}
  .mobile-header{top:0!important;margin-top:0!important;padding-top:0!important;}
}

/* Best-effort no-select UX protection outside editable controls. */
body:not(input):not(textarea){-webkit-user-select:none;user-select:none;}
input,textarea,select,[contenteditable="true"]{user-select:text!important;-webkit-user-select:text!important;}


/* v203 FINAL HEADER POSITION — campaign ticker is in normal flow. */

.site-header, .mobile-header { position: sticky !important; top: 0 !important; }
@media (min-width: 1025px) {
  .site-header:not(.compact) { top: 0 !important; }
}
@media (max-width: 1024px) {
  .mobile-header:not(.compact) { top: 0 !important; }
  .mobile-header.compact { top: 0 !important; }
  .mobile-header.compact .mobile-compact-search {
    opacity: 1 !important; pointer-events: auto !important; visibility: visible !important;
  }
}


/* V212 — mobile compact search: viewport-safe results + stable scroll header. */
@media (max-width: 1024px) {
  .mobile-header.compact {
    position: sticky !important;
    top: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    isolation: isolate !important;
  }
  .mobile-header.compact #menuBtn {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 1501 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-header.compact .mobile-compact-search {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: 132px !important;
    max-width: 132px !important;
    min-width: 132px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1500 !important;
    overflow: hidden !important;
    flex: none !important;
    white-space: nowrap !important;
    transition: none !important;
  }
  .mobile-header.compact .mobile-compact-search .mobile-compact-input {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: .75rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
  .mobile-header.compact .mobile-actions {
    position: absolute !important;
    right: 8px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 36px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: auto !important;
    z-index: 1501 !important;
  }
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  .mobile-header.compact .mobile-actions a[href*="sepet"] {
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  .mobile-header.compact .mobile-actions > [data-search-open] { display: none !important; }

  html body #mobileCompactResults.compact-search-results-mobile {
    position: fixed !important;
    left: 10px !important;
    top: 0 !important;
    width: 280px !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(56vh, 360px) !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    border: 1px solid var(--border,#d9d4cc) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.15) !important;
    z-index: 4000 !important;
    display: none !important;
  }
  html body #mobileCompactResults.compact-search-results-mobile.show { display: block !important; }
  html body #mobileCompactResults.compact-search-results-mobile .search-result-item,
  html body #mobileCompactResults.compact-search-results-mobile .sr-item {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 11px !important;
  }
  html body #mobileCompactResults.compact-search-results-mobile .search-empty {
    margin: 0 !important;
    padding: 14px !important;
  }
}

/* V215 — non-homepage mobile product cards: wider and shorter while fitting exactly inside the site. */
@media (max-width:768px){
  .product-grid:not(.homepage-product-track) > .product-card,
  .reco-grid > .product-card,
  .favs-grid > .product-card,
  .cs-grid > .product-card{
    height:300px !important; min-height:300px !important; max-height:300px !important;
  }
  .product-grid:not(.homepage-product-track) > .product-card > .product-card-inner,
  .reco-grid > .product-card > .product-card-inner,
  .favs-grid > .product-card > .product-card-inner,
  .cs-grid > .product-card > .product-card-inner{
    aspect-ratio: 1.15 / 1 !important;
  }
  .product-grid:not(.homepage-product-track),
  .reco-grid, .favs-grid, .cs-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .product-grid:not(.homepage-product-track) > .product-card .product-info,
  .reco-grid > .product-card .product-info,
  .favs-grid > .product-card .product-info,
  .cs-grid > .product-card .product-info{
    padding:7px 7px 8px !important;
  }
  .product-grid:not(.homepage-product-track) > .product-card .product-name,
  .reco-grid > .product-card .product-name,
  .favs-grid > .product-card .product-name,
  .cs-grid > .product-card .product-name{
    min-height:2.18em !important; max-height:2.18em !important;
  }
  .product-grid:not(.homepage-product-track) > .product-card .product-quick,
  .reco-grid > .product-card .product-quick,
  .favs-grid > .product-card .product-quick,
  .cs-grid > .product-card .product-quick{
    height:30px !important; min-height:30px !important; max-height:30px !important; margin-top:6px !important;
  }
}

/* V221: compact inner-page headers for campaign, blog and room-fragrance pages. */

body.iz-campaign-page .page-header,
body.iz-blog-page .page-header,
body.iz-oda-page .page-header { padding: 12px 0 10px !important; background: transparent !important; border: 0 !important; }
body.iz-campaign-page .page-header h1,
body.iz-campaign-page .page-header p,
body.iz-blog-page .page-header h1,
body.iz-blog-page .page-header p,
body.iz-oda-page .page-header h1,
body.iz-oda-page .page-header p { display:none !important; }
body.iz-campaign-page .page-header .breadcrumb,
body.iz-blog-page .page-header .breadcrumb,
body.iz-oda-page .page-header .breadcrumb { margin-bottom:0 !important; }


/* V224 — category pages wider on mobile; keep a small, contained outer gutter. */
@media (max-width: 768px){
  body:has(.category-content) .container{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  body:has(.category-content) .category-layout,
  body:has(.category-content) .category-content,
  body:has(.category-content) .content-toolbar,
  body:has(.category-content) .mobile-filter-bar{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }
  body:has(.category-content) .product-grid:not(.homepage-product-track){
    width:100% !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  /* Compact cart: narrower and fully inside the mobile viewport. */
  .cart-page.cart-view-compact .cart-item{
    grid-template-columns:42px minmax(0,1fr) auto !important;
    gap:7px !important;
    width:calc(100% - 12px) !important;
    max-width:520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:7px !important;
    padding-right:7px !important;
    box-sizing:border-box !important;
  }
  .cart-page.cart-view-compact .cart-item-img{
    width:42px !important;
    height:42px !important;
  }
  .cart-page.cart-view-compact .cart-item-name{
    font-size:.78rem !important;
  }
  .cart-page.cart-view-compact .cart-item-meta{
    font-size:.64rem !important;
  }
  .cart-page.cart-view-compact .cart-item-price{
    font-size:.76rem !important;
  }
}


/* V242 — mobile simple cart: name + quantity + remove only */
@media (max-width: 768px){
  .cart-page.cart-view-compact .cart-item{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:9px 6px !important;
    box-sizing:border-box !important;
  }
  .cart-page.cart-view-compact .cart-item-product-link{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    width:100% !important;
  }
  .cart-page.cart-view-compact .cart-item-img,
  .cart-page.cart-view-compact .cart-item-meta,
  .cart-page.cart-view-compact .cart-item-price{
    display:none !important;
  }
  .cart-page.cart-view-compact .cart-item-product-copy{
    min-width:0 !important;
    width:100% !important;
  }
  .cart-page.cart-view-compact .cart-item-name{
    font-size:.84rem !important;
    line-height:1.25 !important;
    font-weight:500 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .cart-page.cart-view-compact .cart-item-actions{
    grid-column:auto !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
    width:auto !important;
    white-space:nowrap !important;
  }
  .cart-page.cart-view-compact .cart-qty-text{
    display:inline-flex !important;
    font-size:.76rem !important;
    color:var(--text-sec) !important;
  }
  .cart-page.cart-view-compact .cart-remove{
    display:inline-flex !important;
    font-size:.76rem !important;
    color:var(--text) !important;
    padding:0 !important;
    margin:0 !important;
  }
  .cart-page.cart-view-compact .qty-control{display:none !important;}
}

/* V225 — targeted category / bestseller / mobile refinements */
.best-seller-fire{display:flex!important;align-items:center;justify-content:center;position:absolute;right:8px;top:8px;width:30px;height:30px;z-index:3;}
.best-seller-fire svg{display:block;width:28px;height:28px;}
@media(max-width:768px){
  .category-layout,.category-content{width:100%!important;max-width:none!important;}
  .category-content{padding-left:8px!important;padding-right:8px!important;}
  .category-layout{padding-left:0!important;padding-right:0!important;}
  .cart-simple .cart-item,.cart-page .simple-view .cart-item{max-width:92%!important;margin-left:auto!important;margin-right:auto!important;}
  .cart-simple .cart-item-inner,.cart-page .simple-view .cart-item-inner{padding:7px 9px!important;}
  .cart-simple .cart-item-image,.cart-page .simple-view .cart-item-image{width:46px!important;height:54px!important;}
}


/* Final cart view buttons — minimal text-only style */
.cart-toolbar .cart-view-btn {
  appearance:none !important;
  border:1px solid var(--border,#ddd) !important;
  background:var(--white,#fff) !important;
  color:var(--text,#222) !important;
  padding:9px 12px !important;
  margin:0 !important;
  border-radius:8px !important;
  font:inherit !important;
  font-size:.8rem !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  min-height:34px !important;
  box-shadow:none !important;
  transition:background-color .15s ease, border-color .15s ease !important;
}
.cart-toolbar .cart-view-btn .cart-view-icon { display:none !important; }
.cart-toolbar .cart-view-btn:hover {
  background:#f6f2ec !important;
}
.cart-toolbar .cart-view-btn.is-active {
  background:#f1eee9 !important;
  border-color:#d8d0c6 !important;
}

/* Remove legacy tester search field completely. */
.tester-search-wrap, .tester-code-search { display:none !important; }
/* v254 — Mobile compact controls aligned to the search field. */
@media (max-width: 1024px) {
  .mobile-header.compact #menuBtn,
  .mobile-header.compact .mobile-compact-search,
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    top: 50% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .mobile-header.compact #menuBtn,
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) !important;
  }
  .mobile-header.compact #menuBtn svg,
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }
  .mobile-header.compact .mobile-compact-search {
    height: 34px !important;
    min-height: 34px !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* v255 — Mobile compact header: lower controls to align their bottom edge
   with the compact search field, which remains centered in the header. */
@media (max-width: 1024px) {
  .mobile-header.compact #menuBtn,
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    top: auto !important;
    bottom: 9px !important;
    transform: none !important;
  }
}


/* V256 — mobile compact header controls bottom-aligned within the opened bar.
   The menu and cart intentionally sit on the lower edge rather than vertically centered. */
@media (max-width: 1024px) {
  .mobile-header.compact #menuBtn {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    margin-bottom: 0 !important;
  }
  .mobile-header.compact .mobile-actions {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    align-items: flex-end !important;
  }
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    margin-bottom: 0 !important;
    align-self: flex-end !important;
  }
}

/* V258 — FINAL MOBILE COMPACT BAR: one stable geometry, no legacy overrides fighting each other. */
@media (max-width: 1024px) {
  :root {
    --compact-mobile-h: 48px;
    --compact-mobile-control: 34px;
    --compact-mobile-side: 10px;
    --compact-mobile-bottom: 7px;
  }

  /* The compact bar is only as tall as its controls need, with a small breathing
     area above them. This prevents the controls from floating in the middle or
     colliding with nearby content. */
  html body .mobile-header.compact {
    position: sticky !important;
    top: 0 !important;
    height: var(--compact-mobile-h) !important;
    min-height: var(--compact-mobile-h) !important;
    max-height: var(--compact-mobile-h) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 0 var(--compact-mobile-bottom) !important;
    overflow: visible !important;
    isolation: isolate !important;
    z-index: 2100 !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.06) !important;
  }

  /* Left menu button and right cart share the exact same bottom baseline. */
  html body .mobile-header.compact #menuBtn {
    position: absolute !important;
    left: var(--compact-mobile-side) !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--compact-mobile-bottom) !important;
    transform: none !important;
    width: var(--compact-mobile-control) !important;
    height: var(--compact-mobile-control) !important;
    min-width: var(--compact-mobile-control) !important;
    min-height: var(--compact-mobile-control) !important;
    max-width: var(--compact-mobile-control) !important;
    max-height: var(--compact-mobile-control) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  html body .mobile-header.compact .mobile-actions {
    position: absolute !important;
    left: auto !important;
    right: var(--compact-mobile-side) !important;
    top: auto !important;
    bottom: var(--compact-mobile-bottom) !important;
    width: var(--compact-mobile-control) !important;
    height: var(--compact-mobile-control) !important;
    min-width: var(--compact-mobile-control) !important;
    min-height: var(--compact-mobile-control) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  html body .mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  html body .mobile-header.compact .mobile-actions a[href*="/sepet/"] {
    position: static !important;
    width: var(--compact-mobile-control) !important;
    height: var(--compact-mobile-control) !important;
    min-width: var(--compact-mobile-control) !important;
    min-height: var(--compact-mobile-control) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  html body .mobile-header.compact #menuBtn svg,
  html body .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] svg,
  html body .mobile-header.compact .mobile-actions a[href*="/sepet/"] svg {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Search uses the same bottom baseline. Width scales with the viewport while
     preserving clear space for both side controls. */
  html body .mobile-header.compact .mobile-compact-search {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--compact-mobile-bottom) !important;
    transform: translateX(-50%) !important;
    width: min(210px, calc(100vw - 112px)) !important;
    max-width: min(210px, calc(100vw - 112px)) !important;
    min-width: 0 !important;
    height: var(--compact-mobile-control) !important;
    min-height: var(--compact-mobile-control) !important;
    max-height: var(--compact-mobile-control) !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
    border-radius: calc(var(--compact-mobile-control) / 2) !important;
    z-index: 1 !important;
  }

  html body .mobile-header.compact .mobile-compact-search .mobile-compact-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: .76rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  /* Search results must start below the complete compact bar rather than inside it. */
  html body #mobileCompactResults.compact-search-results-mobile {
    margin-top: 0 !important;
  }
}


/* V263 — Mobile scroll-compact menu removed. Keep the normal mobile header only. */
@media (max-width:1024px){
  html body .mobile-header.compact {
    position: sticky !important;
    top: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 0 !important;
    align-items: center !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border,#eee) !important;
  }
  html body .mobile-header.compact .mobile-compact-search,
  html body #mobileCompactResults.compact-search-results-mobile {
    display: none !important;
  }
  html body .mobile-header.compact #menuBtn,
  html body .mobile-header.compact .mobile-actions,
  html body .mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  html body .mobile-header.compact .mobile-actions a[href*="/sepet/"] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }
  body.has-compact-mobile-header { padding-top: 0 !important; }
}

/* V263 — 100 ml gift badge sits above the 100 ml button without changing
   the height or baseline of the volume row. */
.volume-options {
  align-items: flex-start !important;
  overflow: visible !important;
}
.volume-option-wrap {
  position: relative !important;
  display: block !important;
  width: 92px !important;
  min-width: 92px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
.volume-option-wrap.has-gift {
  padding-top: 0 !important;
}
.volume-option-wrap .volume-btn {
  width: 100% !important;
  min-width: 92px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.volume-option-gift {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  transform: translate(-50%, calc(-100% - 8px)) !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  min-width: 112px !important;
  max-width: 180px !important;
  min-height: 24px !important;
  padding: 5px 9px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: #e53935 !important;
  color: #fff !important;
  font-size: .67rem !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(229,57,53,.20) !important;
}
.volume-option-gift::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -6px !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid #e53935 !important;
}
@media (max-width:480px){
  .volume-option-wrap { width: 88px !important; min-width: 88px !important; }
  .volume-option-wrap .volume-btn { min-width: 88px !important; }
  .volume-option-gift { min-width: 106px !important; font-size: .62rem !important; }
}


/* V-search-fix — mobile scrolled search stays anchored to the current viewport.
   The sticky mobile header owns the inline search; the document scroll position
   is never changed and the results remain directly below the header. */
@media (max-width: 900px) {
  .mobile-header {
    position: sticky !important;
    overflow: visible !important;
  }
  .mobile-header .header-inline-search {
    display: none;
  }
  .mobile-header.is-searching .header-inline-search {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10050 !important;
    background: var(--white) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.10) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .mobile-header.is-searching .header-inline-search .search-bar {
    width: 100% !important;
    min-height: 56px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    background: var(--white) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .mobile-header.is-searching .header-inline-search .search-input {
    min-width: 0 !important;
    font-size: 16px !important;
  }
  .mobile-header.is-searching .header-inline-search .search-results {
    display: block !important;
    max-height: min(52vh, 420px) !important;
    overflow-y: auto !important;
    padding: 0 14px 12px !important;
    background: var(--white) !important;
    box-sizing: border-box !important;
  }
  body.iz-mobile-scroll-search-open {
    overflow: visible !important;
  }
}


/* v272 — product detail consistency: all standard perfume volume rows use
   the same two-button baseline and never collapse because of stale flags. */
@media (min-width: 769px) {
  body.page-template-page-urun .volume-options {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    min-height: 58px !important;
  }
}
@media (max-width: 768px) {
  body.page-template-page-urun .volume-options {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    min-height: 54px !important;
  }
}
body.page-template-page-urun .volume-option-wrap {
  flex: 0 0 92px !important;
  align-self: flex-start !important;
}
body.page-template-page-urun .volume-option-wrap .volume-btn {
  align-self: flex-start !important;
}

/* v273 — Product description isolation.
   Shopier descriptions must never be able to shrink the product-page wrappers.
   This class is added only when the runtime detects a legacy/narrow product view. */
body.iz-product-width-repair .container {
  width: 100% !important;
  max-width: var(--max-w) !important;
  box-sizing: border-box !important;
}
body.iz-product-width-repair .product-detail {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body.iz-product-width-repair .product-detail {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 768px) {
  body.iz-product-width-repair .container {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.iz-product-width-repair .product-detail {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  body.iz-product-width-repair .sticky-buy-bar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}


/* === İZ PARFÜM — merged legacy theme overrides (v275 canonical CSS) === */
100% { transform: translateX(calc(-50% - 100vw)); }
}

/* Recommendation cards: the CTA is structurally outside the link and pinned to the card bottom. */
.reco-card { min-height: 100%; display:flex !important; flex-direction:column !important; }
.reco-card-link { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; color:inherit; text-decoration:none; }
.reco-body { flex:1 1 auto !important; display:flex !important; flex-direction:column !important; }
.reco-reason { flex:1 1 auto !important; }
.reco-cart-btn {
  margin-top:auto !important;
  flex:0 0 auto !important;
  width:calc(100% - 28px);
  margin-left:14px !important;
  margin-right:14px !important;
  margin-bottom:14px !important;
  min-height:40px;
  border:1px solid var(--text);
  border-radius:6px;
  background:var(--text);
  color:var(--white);
  font:inherit;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  cursor:pointer;
  transition:.2s ease;
}
.reco-cart-btn:hover { background:transparent; color:var(--text); }

/* Homepage compact animated search */
.home-search-host { position:relative; display:flex; align-items:center; }
.home-search-box { width:0; opacity:0; overflow:visible; transition:width .28s ease, opacity .2s ease; position:relative; }
.home-search-box.open { width:190px; opacity:1; }
.home-search-input {
  width:100%; height:36px; border:1px solid var(--border-mid); border-radius:18px;
  padding:0 14px; outline:none; background:var(--white); color:var(--text); font:inherit; font-size:.8rem;
  box-shadow:var(--shadow);
}
.home-search-input::placeholder { color:var(--text-muted); opacity:1; }
.home-search-results {
  display:none; position:absolute; top:44px; right:0; width:300px; max-height:360px; overflow:auto;
  padding:8px 14px; background:var(--white); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-lg); z-index:500;
}
.home-search-results.show { display:block; }
.home-search-results .search-result-item { padding:9px 0; }
@media(max-width:768px){
  .home-search-box.open { width:150px; }
  .home-search-results { width:260px; right:-30px; }
}

/* ═══════════════════════════════════════════════════════════════════
   V16 — SEARCH TYPEWRITER + TRUE BOTTOM-ANCHORED CART CTA
   The homepage search is open immediately; compact sticky search
   types automatically whenever the header becomes compact.
═══════════════════════════════════════════════════════════════════ */

/* Sticky compact search input — replaces the passive placeholder span. */
.mobile-compact-search {
  max-width: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width .28s ease, width .28s ease, opacity .22s ease, padding .28s ease, border-width .28s ease;
}
.mobile-header.compact .mobile-compact-search {
  max-width: 190px;
  width: 190px;
  padding: 7px 12px;
  border-width: 1.5px;
  opacity: 1;
  pointer-events: auto;
  flex: 0 1 190px;
}
.mobile-compact-input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .78rem;
}
.mobile-compact-input::placeholder { color: var(--text-muted); opacity: 1; }

/* Homepage: search field is visible from the first paint. */
.home-search-host { flex: 0 0 auto; }
.home-search-box { width: 190px !important; opacity: 1 !important; overflow: visible !important; }
.home-search-input { box-shadow: none; background: var(--off-white); }
.home-search-host > [data-search-open] { display: none; }
@media (max-width: 768px) {
  .home-search-box { width: 150px !important; }
  .home-search-host > [data-search-open] { display: none; }
  .mobile-header .home-search-host { min-width: 0; }
  .mobile-header .home-search-input { height: 36px; }
}

/* V17 — Ana sayfa araması: kaydırmada ilk arama alanını gizle.
   Kompakt/kaydırma araması görünmeye devam eder. */
.site-header.compact .home-search-host,
.mobile-header.compact .home-search-host {
  display: none !important;
}

/* V18 — Scroll search interaction + reliable overlay close */
.header-compact-search,
.mobile-compact-search { z-index: 40; }
.header-compact-input,
.mobile-compact-input { cursor: text; }
.search-bar #searchClose {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
}

/* V19 — Scroll compact search is a fully functional inline search.
   Results stay attached to the field; Enter opens the existing full-screen search. */
.header-compact-search,
.mobile-compact-search {
  position: relative;
  overflow: visible;
}
.compact-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(380px, 42vw);
  max-height: min(420px, 70vh);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 500;
  padding: 4px 0;
  white-space: normal;
}
.compact-search-results.show { display: block; }
.compact-search-results .sr-item { padding: 9px 12px; }
.compact-search-results .search-empty { padding: 16px 12px; }
@media (max-width: 768px) {
  .mobile-header.compact .mobile-compact-search { overflow: visible; }
  .compact-search-results-mobile {
    left: 50%;
    transform: translateX(-50%);
    width: min(290px, 78vw);
    max-height: 60vh;
  }
}

/* V21 — Scroll-safe recommendation autoplay: 3 seconds, container-only */
@media (max-width: 1024px) {
  .mobile-header.compact .mobile-compact-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    max-width: 190px;
    flex: 0 0 190px;
    z-index: 120;
  }
}

/* Product-page recommendation rows: one horizontal line, one card advances every second. */
.reco-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 2px 10px;
  margin-top: 24px;
}
.reco-grid::-webkit-scrollbar { display: none; }
.reco-grid .reco-card {
  flex: 0 0 calc((100% - 60px) / 4) !important;
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .reco-grid .reco-card { flex-basis: calc((100% - 20px) / 2) !important; }
}
@media (max-width: 480px) {
  .reco-grid { gap: 10px !important; }
  .reco-grid .reco-card { flex-basis: calc((100% - 10px) / 2) !important; }
}

/* v23 — Recommendation cards use 3-note tags instead of fragrance family. */
.reco-notes { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 7px; }
.reco-note { display:inline-flex; align-items:center; padding:4px 7px; border:1px solid var(--border, #e5e5e5); border-radius:999px; font-size:.68rem; line-height:1; color:var(--text-sec, #666); background:var(--surface, #fff); }
.reco-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin:0 0 7px; }
.reco-intensity, .reco-extra { display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px; font-size:.68rem; line-height:1; }
.reco-intensity { border:1px solid var(--border, #e5e5e5); color:var(--text-sec, #666); background:var(--surface, #fff); }
.reco-extra { border:1px solid var(--border, #e5e5e5); color:var(--text, #222); background:var(--surface, #fff); }

/* V24 — All recommendation cards use the shared homepage product-card renderer. */

@media (max-width: 480px) {
  .reco-grid { gap: 10px !important; }
  
}

/* V24 — Desktop compact search is centered to the viewport, not the inner grid. */
@media (min-width: 1025px) {
  .site-header.compact .header-compact-search {
    position: fixed !important;
    left: 50vw !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) scale(1) !important;
    z-index: 1200 !important;
  }
}

/* V24 FINAL — recommendation areas inherit the exact shared product-card design. */

/* V25 — Product card metadata: 3 notes + mandatory intensity + optional +Esans. */

/* Keep card metadata/icons anchored to the left edge of their frame. */

/* V25 — Homepage category/product carousels advance every 3 seconds. */
.homepage .product-carousel-track,
#bestSellersGrid, #newArrivalsGrid, #erkekSectionGrid, #kadinSectionGrid, #unisexSectionGrid,
#odaSectionGrid, #setSectionGrid {
  scroll-behavior: smooth;
}

/* V26 — Card metadata: always exactly two rows, with color-coded intensity. */

/* If there are only four metadata items, keep the same two-row structure. */

/* V26 — Homepage product carousels must autoplay on mobile as well. */
@media (max-width: 768px) {
  .product-carousel-track {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
}

/* V27 — Metadata is always a clean two-row block, aligned to the card content edge. */

/* V27 — Non-home product cards keep the same framed treatment as homepage cards. */

.product-grid {
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
}

/* V27 — Subtle price treatment, keeping the price area visually distinct. */

/* V27 — Homepage product/category carousels: dependable 3-second autoplay. */
.homepage .product-carousel-track,
.homepage .category-menu-viewport,
.homepage #bestSellersGrid,
.homepage #newArrivalsGrid,
.homepage #erkekSectionGrid,
.homepage #kadinSectionGrid,
.homepage #unisexSectionGrid,
.homepage #odaSectionGrid,
.homepage #setSectionGrid {
  scroll-behavior: smooth !important;
}

/* V28 — Unified product-card metadata layout.
   Intensity is outline-only; all card information shares one left edge. */
.product-info { text-align:left !important; align-items:stretch !important; }

/* V31 — Intensity badge uses the EXACT same visual component as +Esans.
   Only text/border color changes by intensity. Interior is always transparent. */

/* V32 — Cart cross-sell alignment + compact header controls */
#cartCrossSell {
  width: min(100% - 32px, 1200px);
  margin: 40px auto 0;
  padding-top: 40px;
  text-align: center;
}
#cartCrossSell .cs-title,
#cartCrossSell .cs-sub {
  text-align: center;
}
#cartCrossSell .cs-grid {
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

/* Keep the cart immediately to the left of the centered compact search on desktop. */
@media (min-width: 1025px) {
  .site-header.compact .header-actions {
    position: fixed;
    left: calc(50vw - 220px);
    top: calc(var(--header-h) / 2);
    transform: translate(-50%, -50%);
    z-index: 1201;
  }
  .site-header.compact .header-actions > [data-search-open] {
    display: none;
  }
}

/* On mobile, keep the category menu at far left and the cart directly left of
   the centered compact search. */
@media (max-width: 1024px) {
  .mobile-header.compact .mobile-actions {
    position: absolute;
    left: calc(50% - 125px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1201;
  }
  .mobile-header.compact .mobile-compact-search {
    z-index: 1200;
  }
}

/* Mobile cross-sell: preserve centered heading while keeping cards usable. */
@media (max-width: 480px) {
  #cartCrossSell {
    width: calc(100% - 24px);
    margin-top: 32px;
    padding-top: 32px;
  }
}

@media (max-width: 1024px) {
  .mobile-header.compact .mobile-compact-search {
    width: 170px;
    max-width: 170px;
    flex-basis: 170px;
  }
}
nn/* V29 — Compact scroll header alignment: desktop and mobile. */n.desktop-compact-menu {n  position: fixed !important;n  left: 12px !important;n  top: calc(var(--header-h) / 2) !important;n  transform: translateY(-50%) !important;n  z-index: 1201 !important;n  display: none;n}n@media (min-width: 1025px) {n  .site-header.compact .desktop-compact-menu { display: inline-flex !important; }n  .site-header.compact .header-compact-search {n    left: 50vw !important;n  }n  .site-header.compact .header-actions {n    position: fixed !important;n    right: 12px !important;n    left: auto !important;n    top: calc(var(--header-h) / 2) !important;n    transform: translateY(-50%) !important;n    z-index: 1201 !important;n  }n  .site-header.compact .header-actions > [data-search-open],n  .site-header.compact .header-actions > [data-auth-link] { display: none !important; }n}n@media (max-width: 1024px) {n  .mobile-header.compact #menuBtn {n    position: absolute !important; left: 12px !important; top: 50%; transform: translateY(-50%); z-index: 1201;n  }n  .mobile-header.compact .mobile-actions {n    position: static !important;n    display: block !important;n  }n  .mobile-header.compact .mobile-actions > [data-search-open] { display: none !important; }n  .mobile-header.compact .mobile-actions > a[aria-label=\"Sepet\"] {n    position: absolute !important;n    right: 12px !important;n    top: 50% !important;n    transform: translateY(-50%) !important;n    z-index: 1201 !important;n  }n  .mobile-header.compact .mobile-compact-search {n    position: absolute !important;n    left: 50% !important;n    top: 50% !important;n    transform: translate(-50%, -50%) !important;n    width: 170px !important;n    max-width: 170px !important;n    flex: none !important;n    z-index: 1200 !important;n  }n}n
/* V30 — FINAL compact scroll header alignment
   One coordinate system for desktop and mobile:
   category = far left, search = exact viewport center, cart = far right. */
@media (min-width: 1025px) {
  .site-header.compact .desktop-compact-menu {
    display: inline-flex !important;
    position: fixed !important;
    left: 12px !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1202 !important;
  }

  .site-header.compact .header-compact-search {
    display: flex !important;
    position: fixed !important;
    left: 50vw !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) !important;
    width: min(400px, 36vw) !important;
    z-index: 1201 !important;
  }

  .site-header.compact .header-actions {
    position: fixed !important;
    left: auto !important;
    right: 12px !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1202 !important;
    display: flex !important;
    align-items: center !important;
  }

  .site-header.compact .header-actions > [data-search-open],
  .site-header.compact .header-actions > [data-auth-link] {
    display: none !important;
  }

  .site-header.compact .header-actions > a[aria-label="Sepet"] {
    display: inline-flex !important;
  }
}

@media (max-width: 1024px) {
  .mobile-header.compact #menuBtn {
    display: inline-flex !important;
    position: fixed !important;
    left: 12px !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1202 !important;
  }

  .mobile-header.compact .mobile-compact-search {
    display: flex !important;
    position: fixed !important;
    left: 50vw !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) !important;
    width: min(170px, calc(100vw - 96px)) !important;
    max-width: min(170px, calc(100vw - 96px)) !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    z-index: 1201 !important;
  }

  .mobile-header.compact .mobile-actions {
    position: fixed !important;
    left: auto !important;
    right: 12px !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    z-index: 1202 !important;
    display: flex !important;
    align-items: center !important;
  }

  .mobile-header.compact .mobile-actions > [data-search-open] {
    display: none !important;
  }

  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
  }
}

/* V35 — FINAL scroll cart controls + homepage card parity */
.desktop-compact-cart,
.mobile-compact-cart {
  position: fixed !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 1300 !important;
  transition: opacity .2s ease, visibility .2s ease !important;
}
.desktop-compact-cart.is-visible,
.mobile-compact-cart.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
@media (min-width: 1025px) {
  .site-header.compact .desktop-compact-cart {
    right: 8px !important; left: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
  }
  .site-header.compact .header-actions > a[aria-label="Sepet"] { display:none !important; }
  .site-header.compact .desktop-compact-menu { left:8px !important; right:auto !important; }
}
@media (max-width: 1024px) {
  .mobile-header.compact .mobile-compact-cart {
    right: 8px !important; left:auto !important;
    top:50% !important; transform:translateY(-50%) !important;
  }
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] { display:none !important; }
  .mobile-header.compact #menuBtn { left:8px !important; }
}

/* Homepage product cards: same framed treatment as category/recommendation cards. */
#bestSellersGrid.product-grid,
#newArrivalsGrid.product-grid,
#erkekSectionGrid.product-grid,
#kadinSectionGrid.product-grid,
#unisexSectionGrid.product-grid,
#odaSectionGrid.product-grid,
#setSectionGrid.product-grid {
  gap:12px !important;
  background:transparent !important;
  border:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  padding:0 !important;
}
#bestSellersGrid.product-grid::-webkit-scrollbar,
#newArrivalsGrid.product-grid::-webkit-scrollbar,
#erkekSectionGrid.product-grid::-webkit-scrollbar,
#kadinSectionGrid.product-grid::-webkit-scrollbar,
#unisexSectionGrid.product-grid::-webkit-scrollbar { display:none !important; }

/* V36 — Compact header visual alignment (desktop)
   When the header becomes compact, keep the logo, category control,
   search and cart on one exact horizontal center line. The logo is
   gently lowered so it visually matches the search pill. */
@media (min-width: 1025px) {
  .site-header.compact .header-logo {
    position: fixed !important;
    left: max(24px, calc((100vw - var(--max-w)) / 2 + 24px)) !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(calc(-50% + 4px)) !important;
    z-index: 1202 !important;
    transition: transform .28s ease !important;
    pointer-events: auto !important;
  }

  .site-header.compact .desktop-compact-menu {
    left: 8px !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1203 !important;
  }

  .site-header.compact .header-compact-search {
    left: 50vw !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .site-header.compact .desktop-compact-cart {
    right: 8px !important;
    left: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    height: 40px !important;
    z-index: 1203 !important;
  }
}

/* V37 — FIX: use the existing header cart; keep category control inside header row.
   This removes the duplicate mobile scroll cart and prevents the desktop category
   button from escaping below the actual top menu. */
@media (min-width: 1025px) {
  .site-header.compact .header-inner { position: relative !important; }
  .site-header.compact .desktop-compact-menu {
    display: inline-flex !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 1203 !important;
  }
  .site-header.compact .header-compact-search {
    position: fixed !important;
    left: 50vw !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1201 !important;
  }
  .site-header.compact .header-actions {
    position: fixed !important;
    left: auto !important;
    right: 12px !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1202 !important;
    display: flex !important;
    align-items: center !important;
  }
  .site-header.compact .header-actions > [data-search-open],
  .site-header.compact .header-actions > [data-auth-link] {
    display: none !important;
  }
  .site-header.compact .header-actions > a[aria-label="Sepet"] {
    display: inline-flex !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

@media (max-width: 1024px) {
  /* Only the original mobile header cart is used. No extra fixed cart is created. */
  .mobile-header.compact .mobile-compact-cart {
    display: none !important;
  }
  .mobile-header.compact #menuBtn {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1203 !important;
  }
  .mobile-header.compact .mobile-compact-search {
    position: fixed !important;
    left: 50vw !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) !important;
    width: min(170px, calc(100vw - 96px)) !important;
    max-width: min(170px, calc(100vw - 96px)) !important;
    z-index: 1201 !important;
  }
  .mobile-header.compact .mobile-actions {
    position: fixed !important;
    left: auto !important;
    right: 12px !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    z-index: 1202 !important;
    display: flex !important;
    align-items: center !important;
  }
  .mobile-header.compact .mobile-actions > [data-search-open] {
    display: none !important;
  }
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    display: inline-flex !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

/* V38 — FINAL homepage scroll-search + desktop category alignment fix
   1) The homepage has its own search inside header-actions. When compact mode
      starts, hide only that homepage search box — keep the cart visible.
   2) Desktop compact category button uses the same fixed viewport coordinate
      system as the compact search/cart, so it cannot drop below the header row. */
.home-search-host .home-search-box { display: flex; }
@media (min-width: 1025px) {
  .site-header.compact .header-actions .home-search-box {
    display: none !important;
  }

  .site-header.compact .desktop-compact-menu {
    position: fixed !important;
    display: inline-flex !important;
    left: 12px !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    bottom: auto !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 10px !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1303 !important;
  }
}
@media (max-width: 1024px) {
  .mobile-header.compact .mobile-actions .home-search-box {
    display: none !important;
  }
}

/* V40 — Kokunu Bul: center the complete section content. */
.kokunu-bul-section .section-header {
  justify-content: center !important;
  text-align: center !important;
}
.kokunu-bul-section .section-header > div {
  width: 100%;
  text-align: center !important;
}
.kokunu-bul-section #kbWizard {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.kokunu-bul-section .kb-prog-track {
  flex: 0 1 520px;
}
.kokunu-bul-section .kb-actions {
  justify-content: center !important;
  gap: 24px;
}

/* V39 — Homepage category banners: 4 categories + mobile swipe carousel.
   Desktop/tablet: four adjacent tiles. Mobile: one large tile per view with
   native horizontal scrolling and CSS scroll-snap. */
@media (min-width: 769px) {
  .cat-banners-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
}
@media (max-width: 768px) {
  .cat-banners-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .cat-banners-grid::-webkit-scrollbar { display: none !important; }
  .cat-banners-grid .cat-banner {
    flex: 0 0 calc(100% - 28px) !important;
    width: calc(100% - 28px) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    height: 270px !important;
  }
}

/* V42 — Mobile-only slow scroll reveal. Desktop/tablet remain unchanged. */
@media (max-width: 768px) {
  .mobile-scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms ease, transform 900ms cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
  }
  .mobile-scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mobile-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* V43 — Mobile category carousel progress timeline + gentle rounded cards. */
@media (max-width: 768px) {
  .cat-banners-progress {
    display: block;
    width: min(100% - 28px, 520px);
    height: 2px;
    margin: 14px auto 0;
    background: rgba(70,53,43,.14);
    border-radius: 999px;
    overflow: hidden;
  }
  .cat-banners-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--text);
  }
  .cat-banners-progress-fill.is-filling {
    animation: catBannerProgress 3s linear forwards;
  }
}
@keyframes catBannerProgress {
  from { width: 0; }
  to { width: 100%; }
}
@media (min-width: 769px) {
  .cat-banners-progress { display: none !important; }
}

/* All visual card surfaces use a subtle, consistent radius. */

/* V44 — Homepage hero is a single campaign visual; product category sections removed. */

/* Homepage category headers: title + small “Tümünü Gör” on one line; slogans hidden. */
#bestSellers .section-header,
#newArrivals .section-header {
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}
#bestSellers .section-header > div,
#newArrivals .section-header > div {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#bestSellers .section-desc,
#newArrivals .section-desc { display: none !important; }
#bestSellers .view-all,
#newArrivals .view-all {
  font-size: .68rem !important;
  letter-spacing: .02em !important;
  font-weight: 500 !important;
  text-transform: none !important;
  gap: 2px !important;
}
#bestSellers .view-all svg,
#newArrivals .view-all svg { width: 11px !important; height: 11px !important; }

@media (max-width: 768px) {
  #bestSellers .section-header,
  #newArrivals .section-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  #bestSellers .section-header > div,
  #newArrivals .section-header > div {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  #bestSellers .section-header h2,
  #newArrivals .section-header h2 {
    white-space: nowrap !important;
  }
}

/* v45 — Homepage Tester Setleri: single-row horizontal product carousel */
#testerSetsGrid.product-grid {
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  padding: 0 !important;
}
#testerSetsGrid.product-grid::-webkit-scrollbar { display: none !important; }

/* V46 — Non-perfume product cards use a cleaner 1–2 tag metadata row. */

/* ═══════════════════════════════════════════════════════════════════
   İZ PARFÜM — REFERENCE DESIGN OVERRIDE
   Visual direction follows the supplied luxury homepage reference.
   Existing content/data/functions remain intact.
═══════════════════════════════════════════════════════════════════ */
:root{
  --ref-bg:#faf8f4;
  --ref-surface:#f4f0ea;
  --ref-line:#e7e0d7;
  --ref-gold:#b88a45;
  --ref-ink:#151312;
  --max-w:1180px;
}








/* Header — airy, editorial */


.site-header{
  height:68px;background:#fbfaf7;border:0;border-bottom:1px solid #eee9e2;
  box-shadow:none;position:sticky
}





.nav-link.highlight{color:#9b6c2f}

.btn-icon{color:#181614}

/* Hero — supplied campaign artwork */
.hero-slider.hero-campaign{
  height:min(41.5vw,520px);
  min-height:320px;
  background:#17120e;
}
.hero-campaign .hero-slide-img{
  width:100%;height:100%;object-fit:cover;object-position:center center
}

.hero-campaign .hero-slide.active{opacity:1}

/* Reference category row: seven equal tiles */

.iz-reference-category-grid{
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;
  overflow:visible;
}
.iz-reference-category-grid .cat-banner{
  height:258px;
  border-radius:3px;
  box-shadow:none;
  transform:none!important;
  background:#ddd;
}
.iz-reference-category-grid .cat-reference-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  display:block;
}
.iz-reference-category-grid .cat-banner-overlay{
  z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.67) 100%);
}
.iz-reference-category-grid .cat-banner-content{
  z-index:2;left:15px;right:12px;bottom:16px;top:auto;
}

.iz-reference-category-grid .cat-banner-title{
  font-family:Georgia,"Times New Roman",serif;font-size:1rem;font-weight:400;line-height:1.08;
  letter-spacing:-.015em
}
.iz-reference-category-grid .cat-banner-cta{
  margin-top:9px;font-size:.62rem;letter-spacing:.03em
}

.cat-banners-progress{display:none}

/* Tester/category menu is represented in the same visual language */


/* Homepage product rows — six calm editorial cards */

.product-carousel{padding:0 0}
.product-carousel-track{
  border:0!important;background:transparent!important;
  gap:16px!important;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:none!important
}


.product-carousel-arrow{
  width:34px;height:34px;font-size:23px;background:rgba(255,255,255,.96);
  border:1px solid #d9d1c7;box-shadow:0 3px 12px rgba(0,0,0,.08)
}


/* All non-homepage product grids get the same softer cards */


/* Category/product pages */


.btn-primary{
  background:#c59a5c;border-color:#c59a5c;color:#17130f;
  border-radius:24px;letter-spacing:.08em;text-transform:uppercase;font-size:.67rem
}


/* Brand section becomes the dark closing editorial panel from the reference */
.brand-section{
  margin-top:0!important;padding:70px 0 74px!important;
  background:#0e0d0c!important;color:#fff!important;position:relative;overflow:hidden
}
.brand-section:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 78% 45%,rgba(160,120,65,.18),transparent 32%);
  pointer-events:none
}


.brand-headline{
  font-family:Georgia,"Times New Roman",serif!important;font-size:2.3rem!important;font-weight:400!important;
  margin-top:8px
}






/* Blog and footer */



.footer-top{border-bottom-color:rgba(255,255,255,.1)}

/* Mobile adaptation */
@media(max-width:900px){
  .header-inner{grid-template-columns:150px 1fr 110px}
  .header-nav{gap:0}
  .nav-link{padding-left:6px;padding-right:6px;font-size:.61rem}
  .iz-reference-category-grid{grid-template-columns:repeat(4,1fr)}
  .iz-reference-category-grid .cat-banner{height:230px}
  
}
@media(max-width:768px){
  .campaign-marquee{height:26px}
  .site-header{display:none}
  .mobile-header{display:flex;height:58px;background:#fbfaf7;border:0;border-bottom:1px solid #eee9e2}
  .hero-slider.hero-campaign{height:56vw;min-height:220px}
  .cat-banners-section{padding:14px 0 28px}
  .iz-reference-category-grid{
    display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:0 2px
  }
  .iz-reference-category-grid::-webkit-scrollbar{display:none}
  .iz-reference-category-grid .cat-banner{
    flex:0 0 31.5vw;width:31.5vw;height:47vw;max-height:235px
  }
  .iz-reference-category-grid .cat-banner-content{left:11px;bottom:12px}
  .iz-reference-category-grid .cat-banner-title{font-size:.86rem}
  .section{padding:42px 0}
  .section-header{margin-bottom:20px}
  .section-header h2{font-size:1.65rem}
  .product-carousel-track{gap:10px!important;padding:0 1px}
  
  
    
  .product-carousel-arrow{display:none!important}
  .brand-headline{font-size:1.85rem!important}
}
@media(max-width:480px){
  .container{padding-left:14px;padding-right:14px}
  .hero-slider.hero-campaign{height:62vw;min-height:205px}
  .iz-reference-category-grid .cat-banner{flex-basis:36vw;width:36vw;height:54vw}
  
}

/* IZ PARFUM — supplied reference design */
:root{--ref-bg:#faf8f4;--ref-line:#e7e0d7;--ref-gold:#b88a45;--ref-ink:#151312;--max-w:1180px}
body{background:var(--ref-bg);color:var(--ref-ink)}
.container{max-width:1180px;padding-left:22px;padding-right:22px}
.section{padding:58px 0;background:var(--ref-bg)}
.section-header{margin-bottom:26px;align-items:flex-end}
.section-header h2{font-family:Georgia,"Times New Roman",serif;font-size:2rem;font-weight:400;letter-spacing:-.02em}
.section-desc{font-size:.84rem;color:#77716a}
.view-all{font-size:.68rem;letter-spacing:.08em;color:#3e3a36;text-transform:none}


.site-header{height:68px;background:#fbfaf7;border:0;border-bottom:1px solid #eee9e2;box-shadow:none}
.header-inner{grid-template-columns:190px 1fr 130px;gap:12px}
.header-logo{font-family:Georgia,"Times New Roman",serif;font-size:1.18rem;font-weight:400;letter-spacing:.18em}
.header-nav{justify-content:center;gap:1px}
.nav-link{padding:5px 9px;font-size:.68rem;font-weight:400;color:#252321;border-radius:0;letter-spacing:0}
.nav-link:hover,.nav-link.active{background:transparent;color:#111}
.header-actions{gap:8px}
.hero-slider.hero-campaign{height:min(41.5vw,520px);min-height:320px;background:#17120e}
.hero-campaign .hero-slide-img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-campaign .hero-slide{transition:none}
.iz-reference-category-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;overflow:visible}
.cat-banners-section{padding:24px 0 38px;background:var(--ref-bg)}
.iz-reference-category-grid .cat-banner{height:258px;border-radius:3px;box-shadow:none;transform:none!important;background:#ddd}
.iz-reference-category-grid .cat-reference-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.iz-reference-category-grid .cat-banner-overlay{z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.67) 100%)}
.iz-reference-category-grid .cat-banner-content{z-index:2;left:15px;right:12px;bottom:16px;top:auto}
.iz-reference-category-grid .cat-banner-eyebrow{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;opacity:.72;margin-bottom:4px}
.iz-reference-category-grid .cat-banner-title{font-family:Georgia,"Times New Roman",serif;font-size:1rem;font-weight:400;line-height:1.08}
.iz-reference-category-grid .cat-banner-cta{margin-top:9px;font-size:.62rem}
.iz-reference-category-grid .cat-banner:hover{box-shadow:0 12px 28px rgba(34,24,17,.12)}
.iz-legacy-category-menu{display:none}
#bestSellersGrid,#testerSetsGrid,#newArrivalsGrid{border:0!important;background:transparent!important}
.product-carousel-track{border:0!important;background:transparent!important;gap:16px!important;scroll-snap-type:none!important}


.product-carousel-arrow{width:34px;height:34px;font-size:23px;background:rgba(255,255,255,.96);border:1px solid #d9d1c7;box-shadow:0 3px 12px rgba(0,0,0,.08)}
.product-carousel-prev{left:-10px}.product-carousel-next{right:-10px}
.product-grid{gap:12px;background:transparent;border:0}

.page-header,.category-header,.product-page-header{background:var(--ref-bg)!important;border:0!important}
.page-title,.category-title,.product-title{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.btn-primary{background:#c59a5c;border-color:#c59a5c;color:#17130f;border-radius:24px;letter-spacing:.08em;text-transform:uppercase;font-size:.67rem}
.btn-outline{border-color:#cfc6ba;border-radius:24px}
.brand-section{margin-top:0!important;padding:70px 0 74px!important;background:#0e0d0c!important;color:#fff!important;position:relative;overflow:hidden}
.brand-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 45%,rgba(160,120,65,.18),transparent 32%);pointer-events:none}
.brand-section .container{position:relative;z-index:1}
.brand-eyebrow{color:#c59a5c!important;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.brand-headline{font-family:Georgia,"Times New Roman",serif!important;font-size:2.3rem!important;font-weight:400!important;margin-top:8px}
.brand-body{max-width:450px;color:rgba(255,255,255,.72)!important;font-size:.9rem}
.brand-section .btn-outline{color:#16120e;background:#d1aa70;border-color:#d1aa70}
.brand-stats{margin-top:48px;border-top:1px solid rgba(255,255,255,.13);padding-top:28px}
.brand-stat-num{font-family:Georgia,"Times New Roman",serif;color:#d1aa70}
.brand-stat-lbl{color:rgba(255,255,255,.6)}
.blog-grid{gap:16px}.blog-card{background:#f7f3ed;border:1px solid var(--ref-line);box-shadow:none}
.site-footer{margin-top:0;background:#171411}
@media(max-width:900px){
.header-inner{grid-template-columns:150px 1fr 110px}.header-nav{gap:0}.nav-link{padding-left:6px;padding-right:6px;font-size:.61rem}
.iz-reference-category-grid{grid-template-columns:repeat(4,1fr)}.iz-reference-category-grid .cat-banner{height:230px}
}
@media(max-width:768px){
.campaign-marquee{height:26px}.site-header{display:none}.mobile-header{display:flex;height:58px;background:#fbfaf7;border:0;border-bottom:1px solid #eee9e2}
.hero-slider.hero-campaign{height:56vw;min-height:220px}.cat-banners-section{padding:14px 0 28px}
.iz-reference-category-grid{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:0 2px}
.iz-reference-category-grid::-webkit-scrollbar{display:none}.iz-reference-category-grid .cat-banner{flex:0 0 31.5vw;width:31.5vw;height:47vw;max-height:235px}
.iz-reference-category-grid .cat-banner-content{left:11px;bottom:12px}.iz-reference-category-grid .cat-banner-title{font-size:.86rem}
.section{padding:42px 0}.section-header{margin-bottom:20px}.section-header h2{font-size:1.65rem}
.product-carousel-track{gap:10px!important;padding:0 1px}
.brand-headline{font-size:1.85rem!important}}
@media(max-width:480px){
.container{padding-left:14px;padding-right:14px}.hero-slider.hero-campaign{height:62vw;min-height:205px}
.iz-reference-category-grid .cat-banner{flex-basis:36vw;width:36vw;height:54vw}}

/* ═══════════════════════════════════════════════════════════════
   V58 — Final homepage interaction fixes
═══════════════════════════════════════════════════════════════ */

/* 1 — Moderate campaign hero. Keep the complete artwork visible so
   its typography does not get cropped or overflow on mobile. */
.hero-slider.hero-campaign {
  height: clamp(300px, 34vw, 460px) !important;
  min-height: 0 !important;
  background: #17120e;
  overflow: hidden;
}
.hero-campaign .hero-slide-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #17120e;
}
@media (max-width: 768px) {
  .hero-slider.hero-campaign {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1920 / 798;
  }
  .hero-campaign .hero-slide-img { object-fit: contain !important; }
}

/* 2 — Campaign ticker: the HTML contains two identical sequences.
   Moving exactly one sequence makes the loop restart seamlessly. */

.campaign-marquee-track {
  padding-left: 0 !important;
  width: max-content !important;
  will-change: transform;
}
to   { transform: translateX(-50%); }
}

/* 3 — At the top of the homepage search is icon-only. The existing
   compact search that appears after scrolling remains unchanged. */
.site-header:not(.compact) .home-search-box,
.mobile-header:not(.compact) .home-search-box { display: none !important; }
.site-header:not(.compact) .home-search-host > [data-search-open],
.mobile-header:not(.compact) .home-search-host > [data-search-open] {
  display: inline-flex !important;
}

/* 5 — Add-to-cart CTA stays visible and clickable on every product card. */

/* 4 — Only the first four homepage category banners are shown. */
.iz-reference-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 768px) {
  .iz-reference-category-grid { display: flex !important; grid-template-columns: none !important; }
}

/* 6 — Give Kokunu Bul a clearly separate panel with readable contrast. */
.kokunu-bul-section {
  background: #25201c !important;
  color: #f6f1ea !important;
  border-radius: 4px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.kokunu-bul-section .section-header h2,
.kokunu-bul-section .kb-question,
.kokunu-bul-section .kb-opt,
.kokunu-bul-section .kb-actions,
.kokunu-bul-section .kb-step-lbl { color: #f6f1ea !important; }
.kokunu-bul-section .section-desc { color: #cfc3b7 !important; }

/* ═══════════════════════════════════════════════════════════════
   V59 — HOMEPAGE / HEADER / TYPOGRAPHY FINAL POLISH
═══════════════════════════════════════════════════════════════ */

/* 1 — Mobile category banners: all four fit comfortably in the viewport. */
@media (max-width: 768px) {
  .iz-reference-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .iz-reference-category-grid .cat-banner {
    width: auto !important;
    flex: none !important;
    height: clamp(120px, 30vw, 170px) !important;
    min-width: 0 !important;
  }
  .iz-reference-category-grid .cat-banner-content {
    left: 7px !important;
    right: 5px !important;
    bottom: 8px !important;
  }
  .iz-reference-category-grid .cat-banner-eyebrow { font-size: .42rem !important; margin-bottom: 2px !important; }
  .iz-reference-category-grid .cat-banner-title { font-size: .67rem !important; line-height: 1.05 !important; }
  .iz-reference-category-grid .cat-banner-cta { font-size: .47rem !important; margin-top: 5px !important; }
}
@media (max-width: 480px) {
  .iz-reference-category-grid { gap: 6px !important; }
  .iz-reference-category-grid .cat-banner { height: 29vw !important; }
  .iz-reference-category-grid .cat-banner-title { font-size: .62rem !important; }
}

/* 2 + 6 — Homepage headings left aligned, and one consistent sans font.
   The catalog navigation's font is the site's master font. */
:root { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
body,
body * {
  font-family: var(--font) !important;
}
.homepage .section-header,
.homepage .section-header > div,
.homepage .section-header h1,
.homepage .section-header h2,
.homepage .section-header h3,
.homepage .section-header p,
.homepage .view-all {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.homepage .section-header {
  align-items: flex-start !important;
}
.homepage .view-all { margin-left: auto; align-self: center !important; }

/* 3 — Tester cards use exactly the same compact card proportions as the
   other homepage product carousels. */

/* 4 — All product pricing starts at the same left edge as product text. */

/* 5 — Top search remains only the icon. It opens the existing full search
   overlay on every page. Do not touch the scroll/compact search. */
.site-header:not(.compact) .header-actions > [data-search-open],
.mobile-header:not(.compact) .mobile-actions > [data-search-open] {
  display: inline-flex !important;
}
.home-search-host { display: contents !important; }
.home-search-box { display: none !important; }

/* 7 — Two-line IZ PARFÜM brand mark, everywhere. */
.header-logo,
.mobile-header-logo,
.mobile-menu-header .logo,
.footer-brand .logo {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: .92 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  font-family: var(--font) !important;
}
.header-logo .logo-line-top,
.mobile-header-logo .logo-line-top,
.mobile-menu-header .logo .logo-line-top,
.footer-brand .logo .logo-line-top {
  display: block !important;
  font-size: 1.08em !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
}
.header-logo .logo-line-bottom,
.mobile-header-logo .logo-line-bottom,
.mobile-menu-header .logo .logo-line-bottom,
.footer-brand .logo .logo-line-bottom {
  display: block !important;
  font-size: .52em !important;
  font-weight: 500 !important;
  letter-spacing: .31em !important;
  margin-top: 3px !important;
}
.header-logo > span:not(.logo-line-top):not(.logo-line-bottom),
.mobile-header-logo > span:not(.logo-line-top):not(.logo-line-bottom) { color: inherit !important; }

/* Keep price/button rows visually stable on every card size. */

/* ═══════════════════════════════════════════════════════════════
   V60 — SAFE CODE VISUALS + LOW-JANK INFINITE PRODUCT MARQUEES
   These overrides intentionally sit last so they win over older revisions.
═══════════════════════════════════════════════════════════════ */

/* Raster artwork is replaced by SVG/data-URI illustrations. */
.hero-code-visual {
  display:block !important;
  width:100% !important;
  height:100% !important;
  background-color:#1b1511;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.cat-code-visual {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  z-index:0 !important;
}

/* The product track is animated only with transform. No scrollLeft writes
   happen every frame, which removes the main source of mobile jank. */
.product-carousel-track.is-transform-marquee,
.koleksiyon-track {
  overflow:hidden !important;
  width:max-content !important;
  max-width:none !important;
  display:flex !important;
  flex-flow:row nowrap !important;
  will-change:transform;
  transform:translate3d(0,0,0);
  touch-action:pan-y;
  scroll-behavior:auto !important;
  scroll-snap-type:none !important;
  -webkit-overflow-scrolling:auto !important;
}
.product-carousel-track.is-transform-marquee::-webkit-scrollbar { display:none; }

.product-carousel-track.is-transform-marquee.is-dragging,
.koleksiyon-track.is-dragging {
  cursor:grabbing !important;
}
.product-carousel-track.is-transform-marquee,
.koleksiyon-track { cursor:grab; }

/* Keep tester and every homepage product carousel on one consistent card
   sizing system. Mobile shows two cards at a time. */
@media (max-width:768px) {
  
  .product-carousel-track.is-transform-marquee {
    gap:1px !important;
  }
}

/* Category/campaign SVG visuals are safe inside the existing overlay stack. */
.iz-reference-category-grid .cat-banner { overflow:hidden; }
.iz-reference-category-grid .cat-code-visual + .cat-banner-overlay { position:absolute; }

/* Exact two-group ticker: each group has the same width, so -50% is a true
   seamless loop. It never reaches a blank/end state. */
.campaign-marquee-track {
  width:max-content !important;
  padding-left:0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  will-change:transform;
}



to { transform:translate3d(-50%,0,0); }
}
@media (max-width:768px) {
  .campaign-marquee-group { gap:22px; padding-right:22px; }
  .campaign-marquee-track { }
}

/* Do not pause either product marquee on hover/touch. */
.product-carousel:hover .product-carousel-track.is-transform-marquee,
.koleksiyon-wrap:hover .koleksiyon-track {
  animation-play-state:running !important;
}

/* Keep the top header controls centered vertically while preserving the
   existing scroll/compact search behavior. */
.site-header .header-inner,
.mobile-header { align-items:center !important; }

/* ── V60 final layout corrections ─────────────────────────────────── */
/* Mobile homepage: four collection tiles remain compact and the section
   header keeps the same title / Tümünü Gör baseline. */
@media (max-width:768px) {
  .homepage .section-header {
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }
  .homepage .section-header > div { min-width:0; }
  .homepage .section-header h2 { margin:0 !important; }
  .homepage .section-header .view-all {
    margin-left:auto !important;
    align-self:center !important;
    flex:0 0 auto !important;
  }
  .homepage .tester-sets-section .section-header { align-items:center !important; }

  /* Smaller four-up collection tiles. */
  .iz-reference-category-grid { gap:5px !important; }
  .iz-reference-category-grid .cat-banner { height:25vw !important; min-height:92px !important; max-height:130px !important; }
  .iz-reference-category-grid .cat-banner-content { left:5px !important; right:4px !important; bottom:6px !important; }
  .iz-reference-category-grid .cat-banner-eyebrow { display:none !important; }
  .iz-reference-category-grid .cat-banner-title { font-size:.57rem !important; line-height:1.04 !important; }
  .iz-reference-category-grid .cat-banner-cta { font-size:.45rem !important; margin-top:3px !important; }

  /* The tester carousel uses the exact same two-card mobile width as the
     other homepage product rows. */
  
}

/* Kokunu Bul is deliberately a contrasting panel and all its visible copy
   is centered, including the wizard options and actions. */
.kokunu-bul-section { text-align:center !important; }
.kokunu-bul-section .section-header,
.kokunu-bul-section .section-header > div,
.kokunu-bul-section .kb-head,
.kokunu-bul-section .kb-question,
.kokunu-bul-section .kb-step-lbl,
.kokunu-bul-section .kb-opt,
.kokunu-bul-section .kb-actions,
.kokunu-bul-section .kb-actions > * { text-align:center !important; justify-content:center !important; }
.kokunu-bul-section .section-desc { margin-left:auto !important; margin-right:auto !important; }

/* Larger, centered top navigation. Scroll-compact behavior is untouched. */
.site-header { height:76px !important; }
.site-header .header-inner { align-items:center !important; }
.site-header .header-nav { justify-content:center !important; align-items:center !important; gap:4px !important; }
.site-header .nav-link { font-size:.76rem !important; padding:9px 11px !important; }
.site-header .header-logo { align-self:center !important; }
.site-header .header-actions { align-items:center !important; }
@media (max-width:1024px) {
  .mobile-header { height:62px !important; align-items:center !important; }
}

/* Code-generated campaign artwork is never allowed to overflow its hero. */
.hero-slider.hero-campaign { overflow:hidden !important; }

/* V61 — stability + scale pass
   Homepage product rows stay inside their viewport and use smaller cards.
   The track itself may be wider than the viewport, but the wrapper clips it. */
.product-carousel {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}
.product-carousel-track.is-transform-marquee {
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  transform: translate3d(0,0,0);
  touch-action: pan-y !important;
  will-change: transform;
  border: 0 !important;
}

.product-carousel-track.is-dragging { cursor: grabbing !important; }

/* Smaller homepage product cards: more products visible at once. */

/* Desktop category/menu control is visible in the initial header as well as
   the compact header, aligned to the same left content edge. */
@media (min-width: 1025px) {
  .site-header .desktop-compact-menu {
    display: inline-flex !important;
    position: fixed !important;
    left: max(12px, calc((100vw - var(--max-w)) / 2 + 22px)) !important;
    top: calc(var(--header-h) / 2) !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 9px !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1303 !important;
  }
  .site-header:not(.compact) .desktop-compact-menu { opacity: 1 !important; pointer-events: auto !important; }
}

/* Keep the mobile logo exactly centered before scrolling. */
@media (max-width: 1024px) {
  .mobile-header { position: sticky !important; }
  .mobile-header:not(.compact) .mobile-header-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: none !important;
  }
}

/* V62 — unified homepage product card size
   Every homepage product carousel uses the same compact card dimensions. */

/* V63 — static homepage products: equal cards, no duplication, no movement. */
.homepage-product-grid-static {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 18px !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .homepage-product-grid-static {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  .homepage-product-grid-static {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 12px !important;
  }
  
  
}

/* V64 — uniform, wider homepage cards with aligned content. */
.homepage-product-track {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

.homepage-product-track .product-info {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (min-width: 769px) {
  .homepage-product-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow: visible !important;
  }
  .homepage-products-viewport { overflow: hidden !important; }
}

@media (max-width: 768px) {
  .homepage-product-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow: hidden !important;
    transform: translate3d(0,0,0);
    touch-action: pan-y !important;
    will-change: transform;
  }
  
  
}

/* V65 — homepage category carousels: clean, equal cards and device-specific motion. */
.homepage-products-viewport {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.homepage-product-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: max-content !important;
  max-width: none !important;
  gap: 20px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.homepage-product-track .product-info {
  flex: 1 1 auto !important; min-height:0 !important;
  display:flex !important; flex-direction:column !important;
}

.homepage-carousel-controls {
  position:absolute !important; right:0; top:-52px; display:none; gap:8px; z-index:5;
}
.homepage-carousel-arrow {
  width:38px; height:38px; border:1px solid var(--border); background:var(--white);
  border-radius:50%; font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.homepage-carousel-arrow:hover { transform:translateY(-1px); }
.homepage-product-track.is-dragging { cursor:grabbing !important; }
@media (max-width:768px) {
  .homepage-products-viewport { overflow:hidden !important; }
  .homepage-carousel-controls { display:none !important; }
  .homepage-product-track { gap:12px !important; touch-action:pan-y !important; }
  
  
}

/* V66 — homepage section heading/description spacing */
.homepage-page .section-header .section-desc { margin-top: 3px !important; }

/* V66 — stable homepage carousel cards and controls */
.homepage-products-viewport { overflow: hidden !important; }

.homepage-carousel-controls { display: flex !important; pointer-events: auto; }
@media (max-width: 768px) {
  .homepage-carousel-controls { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   V67 — Homepage product cards: wide + square, hover-pause, arrows
═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  /* Wide cards — width is computed in JS and published as --hp-card-w. */
  

  /* Perfectly square product visual. */
  
  

  /* Side arrows overlaying the row for fast navigation. */
  .homepage-carousel-controls {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 6 !important;
  }
  .homepage-carousel-arrow {
    position: absolute !important;
    top: calc(var(--hp-card-w, 268px) / 2) !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid var(--border-mid, #d9d5cc) !important;
    background: rgba(255, 255, 255, .96) !important;
    color: var(--text, #181716) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14) !important;
    font-size: 26px !important;
    line-height: 1 !important;
    transition: background .2s ease, transform .2s ease !important;
  }
  .homepage-carousel-prev { left: 8px !important; }
  .homepage-carousel-next { right: 8px !important; }
  .homepage-carousel-arrow:hover {
    background: var(--text, #181716) !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.05) !important;
  }
}

/* Arrows for the recommendation / related product rows. */
.iz-row-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 6;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-mid, #d9d5cc);
  background: rgba(255, 255, 255, .96);
  color: var(--text, #181716);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iz-row-prev { left: -14px; }
.iz-row-next { right: -14px; }
.iz-row-arrow:hover { background: var(--text, #181716); color: #fff; }
@media (max-width: 768px) {
  .iz-row-arrow { display: none; }
}

/* ════════════════════════════════════════════════════════════
   V68 — unified compact cards, white canvas, bigger nav, round categories
════════════════════════════════════════════════════════════ */

/* ── 1. Pure white canvas ────────────────────────────────────── */
html, body { background: #fff !important; }
body > section,
body > main,
.section,
.tester-sets-section,
.cat-banners-section,
.kokunu-bul-section,
.category-circles-section,
.ai-teaser-section,
.brand-section,
.hero-slider,
.category-menu-section { background: #fff !important; }

/* ── 2. Top campaign bar: starts centred, repeats forever ─────────── */
.campaign-marquee-track {
  padding-left: 0 !important;
}

@keyframes izCampaignEndless {
  from { transform: translateX(var(--mq-start, 50vw)); }
  to   { transform: translateX(calc(var(--mq-start, 50vw) - var(--mq-group, 100vw))); }
}

/* ── 3. Main menu: larger labels, categories button first ────────── */
.header-nav { gap: 6px !important; }
.nav-link {
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  padding: 8px 11px !important;
}
@media (min-width: 1025px) {
  /* Sits inside the menu row, at its far left, on the same baseline. */
  .site-header:not(.compact) .desktop-compact-menu {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    order: -1 !important;
    align-self: center !important;
    margin-right: 8px !important;
    width: 36px; height: 36px;
  }
}
@media (max-width: 1240px) {
  .nav-link { font-size: .95rem !important; padding: 8px 8px !important; }
}

/* ── 4. Hero campaign visual ──────────────────────────────── */
/* Desktop: noticeably taller, but always proportional to the screen. */
@media (min-width: 1025px) {
  .hero-slider {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 88vh !important;
  }
  .hero-slide, .hero-slide-img { height: 100% !important; }
  .hero-slide-img { background-size: cover !important; background-position: center center !important; }
}
/* Mobile: narrower and much taller portrait visual. */
@media (max-width: 1024px) {
  .hero-slider {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-height: 92vh !important;
  }
  .hero-slide-img { background-size: cover !important; background-position: center 30% !important; }
}
@media (max-width: 600px) {
  .hero-slider { aspect-ratio: 4 / 6 !important; }
}

/* ── 5. One single card design everywhere ────────────────────── */

/* Near-square image area (not an exact square). */

/* Compact information block — no large empty gaps. */

/* ── 6. Info chips: up to six items, exactly two rows, no overlap ── */

/* ── 7. Homepage carousel cards follow the shared design ─────────── */
@media (min-width: 769px) {
  
  
  .homepage-carousel-arrow { top: calc(var(--hp-img-h, 222px) / 2) !important; }
}

/* Grid pages get the same compact card, just laid out in a grid. */
.product-grid { gap: 14px !important; }
@media (min-width: 1200px) {
  .product-grid:not(.homepage-product-track) { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ── 8. Round non-perfume category shortcuts ─────────────────── */
.category-circles-section { padding: 26px 0 34px !important; }
.category-circles-carousel { position: relative; width: 100%; }
.category-circles-viewport { width: 100%; overflow: hidden; }
.category-circles-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 28px;
  width: max-content;
  will-change: transform;
}
.category-circle {
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.category-circle-img {
  width: 132px; height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.category-circle-img img { width: 100%; height: 100%; object-fit: cover; }
.category-circle:hover .category-circle-img { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.category-circle-name {
  font-size: .8rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  max-width: 132px;
}
.category-circles-arrow {
  position: absolute; top: 66px; transform: translateY(-50%);
  z-index: 5; width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-mid, #d9d5cc);
  background: rgba(255,255,255,.96);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.category-circles-arrow:hover { background: var(--text); color: #fff; }
.category-circles-prev { left: -8px; }
.category-circles-next { right: -8px; }
@media (max-width: 768px) {
  .category-circles-track { gap: 18px; }
  .category-circle, .category-circle-img, .category-circle-name { width: 96px; }
  .category-circle-img { height: 96px; }
  .category-circles-arrow { display: none; }
}

/* ═══ V68b — final overrides (nav size, hero, ghost chips) ═══ */

/* Larger main-menu labels, beating the older !important rules. */
.site-header .header-inner .header-nav .nav-link,
.site-header .nav-link {
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  padding: 8px 11px !important;
  letter-spacing: 0 !important;
}
@media (max-width: 1240px) {
  .site-header .header-inner .header-nav .nav-link,
  .site-header .nav-link { font-size: .92rem !important; padding: 8px 7px !important; }
}
@media (max-width: 1024px) {
  .site-header .header-inner .header-nav .nav-link,
  .site-header .nav-link { font-size: .86rem !important; }
}
.site-header .header-inner { grid-template-columns: 150px 1fr 130px !important; }

/* Categories button aligned inside the menu row, at its far left. */
@media (min-width: 1025px) {
  body .site-header:not(.compact) .header-nav > .desktop-compact-menu,
  body .site-header .header-nav > #desktopCompactMenu {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    order: -1 !important;
    align-self: center !important;
    margin: 0 10px 0 0 !important;
    width: 34px !important;
    height: 34px !important;
  }
}

/* Hero campaign visual: tall on desktop, portrait on mobile, always scaled. */
body .hero-slider.hero-campaign,
body #heroSlider.hero-slider {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 8 !important;
  background: #17120e !important;
  overflow: hidden !important;
}
body .hero-campaign .hero-slide-img,
body #heroSlider .hero-slide-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background-size: cover !important;
  background-position: center center !important;
}
@media (max-width: 1024px) {
  body .hero-slider.hero-campaign,
  body #heroSlider.hero-slider { aspect-ratio: 4 / 5 !important; }
}
@media (max-width: 600px) {
  body .hero-slider.hero-campaign,
  body #heroSlider.hero-slider { aspect-ratio: 3 / 4.2 !important; }
  body #heroSlider .hero-slide-img { background-position: center 35% !important; }
}

/* Placeholder chips keep the two-row block identical on every card. */

/* ════════════════════════════════════════════════════════════
   V69 — compact header icon, expanding banners, tighter cards, tinted sections
════════════════════════════════════════════════════════════ */

/* ── 1. Categories icon stays visible in the sticky/compact header ──── */
@media (min-width: 1025px) {
  /* The nav row collapses in compact mode, so the button leaves the flow
     and returns to its fixed spot on the far left of the sticky bar. */
  /* The nav row fades out in compact mode; keeping it fully transparent would
     also hide the categories button and its transform would break position:fixed. */
  body .site-header.compact .header-nav {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
  }
  body .site-header.compact .header-nav > .nav-link { display: none !important; }
  body .site-header.compact .header-nav > .nav-dropdown { display: none !important; }
  body .site-header.compact .header-nav > #desktopCompactMenu,
  body .site-header.compact .header-nav > .desktop-compact-menu,
  body .site-header.compact .desktop-compact-menu,
  body .site-header.compact #desktopCompactMenu {
    display: inline-flex !important;
    position: fixed !important;
    left: 14px !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    padding: 9px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    color: var(--text) !important;
    z-index: 1400 !important;
  }
  body .site-header .desktop-compact-menu svg,
  body .site-header .desktop-compact-menu span {
    display: block !important;
    opacity: 1 !important;
    color: currentColor !important;
  }
}
@media (max-width: 1024px) {
  .site-header .desktop-compact-menu, .site-header #desktopCompactMenu { display: none !important; }
}

/* ── 2. Category banners expand sideways on desktop hover ────────── */
@media (min-width: 1025px) {
  .cat-banners-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  .cat-banners-grid .cat-banner {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 320px !important;
    transition: flex-grow .55s cubic-bezier(.22,.61,.36,1),
                box-shadow .35s ease !important;
    transform: none !important;
    will-change: flex-grow;
  }
  /* Hovered tile opens up, the others give away their space. */
  .cat-banners-grid:hover .cat-banner { flex-grow: .78 !important; }
  .cat-banners-grid .cat-banner:hover {
    flex-grow: 2 !important;
    box-shadow: 0 20px 56px rgba(0,0,0,.20) !important;
  }
  .cat-banners-grid .cat-banner img,
  .cat-banners-grid .cat-banner .cat-banner-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .55s cubic-bezier(.22,.61,.36,1) !important;
  }
  .cat-banners-grid .cat-banner:hover img { transform: scale(1.04) !important; }
  .cat-banner-content { transition: opacity .35s ease; }
}

/* ── 3-5. One shorter, tightly aligned card design across the site ── */

/* Chips: left aligned, two tight rows, no wasted vertical space. */

/* ── 6. Round category row: white surrounds, smooth arrows ──────── */
.category-circles-track { backface-visibility: hidden; transform: translateZ(0); }
.category-circle-img { will-change: transform; }
@media (max-width: 768px) {
  /* Lighter compositing keeps the mobile loop from stuttering. */
  .category-circle:hover .category-circle-img { transform: none; box-shadow: none; }
  .category-circle-img { transition: none; }
}

/* ── 7. “Kokunu Bul” — tinted panel, fully centered copy ────────── */
.kokunu-bul-section {
  background: linear-gradient(180deg, #1b1512 0%, #241c16 100%) !important;
  color: #fff !important;
  padding: 56px 0 62px !important;
}
.kokunu-bul-section .section-header {
  display: block !important;
  text-align: center !important;
}
.kokunu-bul-section .section-header h2 { color: #fff !important; text-align: center !important; }
.kokunu-bul-section .section-desc { color: rgba(255,255,255,.68) !important; text-align: center !important; }
.kokunu-bul-section,
.kokunu-bul-section .kb-question,
.kokunu-bul-section .kb-step-lbl,
.kokunu-bul-section .kb-res-header,
.kokunu-bul-section .kb-card-body,
.kokunu-bul-section .kb-res-sub { text-align: center !important; }
.kokunu-bul-section .kb-head { justify-content: center !important; }
.kokunu-bul-section .kb-opts { justify-content: center !important; }
.kokunu-bul-section .kb-opt { justify-content: center !important; }
.kokunu-bul-section .kb-actions { justify-content: center !important; }
.kokunu-bul-section .kb-card { background: rgba(255,255,255,.04) !important; }
.kokunu-bul-section .kb-card-img { background: #fff !important; }

/* ── 8. “İz Parfüm Hakkında” — deep warm panel ──────────────── */
.brand-section {
  background: linear-gradient(135deg, #14100c 0%, #211a13 100%) !important;
  color: #fff !important;
}
.brand-headline { color: #fff !important; }
.brand-body { color: rgba(255,255,255,.76) !important; }
.brand-eyebrow { color: #d1aa70 !important; }
.brand-stat-num { color: #d1aa70 !important; }
.brand-stat-lbl { color: rgba(255,255,255,.62) !important; }

/* The white-canvas rule from V68 must not flatten these two panels. */
.kokunu-bul-section, .brand-section { background-color: transparent; }

/* ════════════════════════════════════════════════════════════
   V72 — price/button alignment, static rows with "Daha fazla",
         bigger round menu, one black logo, sticky campaign bar
════════════════════════════════════════════════════════════ */

/* ── 1. Price sits with equal breathing room above and below ──────── */

/* ── 2. "Sepete Ekle": text left aligned, vertically centred in the button ─ */

/* ── 3-5. Static rows + "Daha fazla" ─────────────────────────── */
@media (min-width: 769px) {
  .homepage-products-viewport { overflow: visible !important; }
  .homepage-products-viewport .homepage-product-track {
    display: flex !important;
    flex-wrap: wrap !important;
    transform: none !important;
    transition: none !important;
    row-gap: 26px !important;
  }
}
.hp-more-wrap,
.reco-more-wrap {
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}
.hp-more-btn,
.reco-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 26px;
  border: 1px solid var(--border-mid, #d9d4cc);
  border-radius: 99px;
  background: #fff;
  color: #16120e;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hp-more-btn:hover,
.reco-more-btn:hover { background: #16120e; color: #fff; border-color: #16120e; }
.homepage-carousel-arrow[disabled] { opacity: .3 !important; pointer-events: none !important; }

/* Recommendation rows are a plain grid now — same cards, no sliding. */
.reco-grid.reco-grid-static {
  display: grid !important;
  grid-template-columns: repeat(var(--reco-cols, 4), minmax(0, 1fr)) !important;
  gap: 26px 20px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  transform: none !important;
}

.reco-grid-static ~ .iz-row-arrow,
.reco-grid-static .iz-row-arrow { display: none !important; }

/* ── 6. Bigger four-up round menu, edge to edge inside the container ── */
.category-circles-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(12px, 3vw, 40px) !important;
  align-items: start !important;
  justify-content: stretch !important;
  transform: none !important;
}
.category-circles-row .category-circle {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}
.category-circles-row .category-circle-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: none !important;
  max-height: none !important;
}
.category-circles-row .category-circle-name {
  width: 100% !important;
  font-size: clamp(.72rem, 1.1vw, .95rem) !important;
  margin-top: 12px !important;
}
@media (max-width: 600px) {
  .category-circles-row .category-circle,
  .category-circles-row .category-circle-img,
  .category-circles-row .category-circle-name { width: 100% !important; }
  .category-circles-row .category-circle-img { height: auto !important; }
  .category-circles-row .category-circle-name { font-size: .68rem !important; margin-top: 8px !important; }
}

/* ── 7. One single black logo — only the size differs ───────────── */
.header-logo,
.mobile-header-logo,
.header-logo *,
.mobile-header-logo * {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
.header-logo,
.mobile-header-logo {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.02 !important;
  gap: 1px !important;
}
.header-logo { font-size: 1.18rem !important; }
.mobile-header-logo { font-size: .98rem !important; }
.header-logo .logo-line-top,
.mobile-header-logo .logo-line-top {
  font-size: 1em !important;
  letter-spacing: .18em !important;
  font-weight: 400 !important;
}
.header-logo .logo-line-bottom,
.mobile-header-logo .logo-line-bottom {
  font-size: .52em !important;
  letter-spacing: .34em !important;
  font-weight: 400 !important;
}

/* ── 8. Campaign marquee stays pinned to the top while scrolling ───── */

.site-header { top: 34px !important; z-index: 120 !important; }
@media (max-width: 1024px) {
  .mobile-header { top: 30px !important; z-index: 120 !important; }
}

/* ═══ V72b — exact price centring + tighter homepage card width ══════ */

@media (min-width: 769px) {
  .homepage-products-viewport .homepage-product-track { justify-content: flex-start !important; }
}

/* ════════════════════════════════════════════════════════════
   V73 — site boundaries, campaign bar above compact search, card redesign
════════════════════════════════════════════════════════════ */

:root { --mq-h: 34px; }

/* ── 1. Product rows never spill outside the site container ──────── */
@media (min-width: 769px) {
  .homepage-products-viewport {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .homepage-products-viewport .homepage-product-track {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    transition: none !important;
  }
  
}
.homepage-product-track,
.product-grid,
.reco-grid { box-sizing: border-box !important; }

/* ── 2-4. Campaign marquee on top, compact search bar right below it ── */
.campaign-marquee {
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important;
  height: var(--mq-h) !important;
  min-height: var(--mq-h) !important;
}
.site-header { top: var(--mq-h) !important; z-index: 120 !important; }
@media (max-width: 1024px) {
  .mobile-header { top: var(--mq-h) !important; z-index: 120 !important; }
}

/* 3. The compact bar shrinks to the height its own content needs and every
      element inside is centred on the same vertical axis. Positioning is
      relative to the bar itself, so it can never cover the campaign text. */
.site-header.compact { height: 56px !important; }
@media (min-width: 1025px) {
  body .site-header.compact .header-inner {
    height: 56px !important;
    min-height: 56px !important;
    align-items: center !important;
  }
  body .site-header.compact .header-nav > #desktopCompactMenu,
  body .site-header.compact .desktop-compact-menu {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    z-index: 130 !important;
  }
  body .site-header.compact .header-compact-search {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    height: 38px !important;
    min-height: 38px !important;
    z-index: 130 !important;
  }
  body .site-header.compact .header-actions,
  body .site-header.compact .desktop-compact-cart {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 130 !important;
  }
}
@media (max-width: 1024px) {
  .mobile-header.compact { height: 52px !important; }
  .mobile-header.compact #menuBtn,
  .mobile-header.compact .mobile-compact-search,
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    position: absolute !important;
    top: 50% !important;
    z-index: 130 !important;
  }
  .mobile-header.compact .mobile-compact-search { height: 34px !important; min-height: 34px !important; }
}

/* ── 5. Product card — premium, balanced, near-square ───────────── */

/* Image: wide, prominent, top of the card. */

/* "YENİ" badge: small, crisp, pinned top left. */

/* Text block: one vertical rhythm, equal side padding. */

/* "Yaz" / "Erkek" chips: side by side, right under the category line. */

/* Price: bigger, bolder, separated by a hairline rule. */

/* Add-to-cart: full width at the very bottom, flush with the inner edges. */

/* Compact scale on small screens — same structure, smaller type. */

/* ═══ V73b — card structure guards (image link + info column) ══════ */

/* Extra chips ("Yoğun", "+Esans") sit on the same row as the note chips. */

/* ═══ V73c — cards fill their grid column; identical proportions everywhere ═══ */

/* Same tight rhythm on the homepage rows as on every other grid. */

/* Any product grid: cards always stretch, never shrink to their content. */

/* === V73d - homepage rows flow as real rows, cards fill their column === */
@media (min-width: 769px) {
  .homepage-products-viewport .homepage-product-track {
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    justify-content: stretch !important;
  }
  
}

/* === V74 - wider site, compact-bar logo, uniform card height === */

/* 2. Slightly wider site boundaries so five cards fit side by side. */
:root { --max-w: 1360px; }
.container { max-width: 1360px !important; }

/* 1. Compact scroll bar (desktop): logo pinned far left, everything centred
      on the same horizontal axis as the search pill. */
@media (min-width: 1025px) {
  body .site-header.compact .header-logo {
    position: absolute !important;
    left: 22px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 135 !important;
  }
  body .site-header.compact .header-logo .logo-line-top { font-size: 1.02rem !important; line-height: 1.05 !important; }
  body .site-header.compact .header-logo .logo-line-bottom { font-size: .5em !important; line-height: 1.05 !important; }

  /* Categories button sits right after the logo. */
  body .site-header.compact .header-nav > #desktopCompactMenu,
  body .site-header.compact .desktop-compact-menu {
    left: 108px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* 5. Compact scroll bar (mobile): cart icon at the far right, centred. */
@media (max-width: 1024px) {
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  .mobile-header.compact .mobile-actions a[href="sepet.html"] {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 135 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .mobile-header.compact .mobile-compact-search {
    width: 170px !important;
    max-width: 170px !important;
  }
}

/* 4. One fixed card height everywhere; width keeps following the grid. */

/* "Ürünlere Git" button shares the "Daha fazla" pill styling. */
.hp-goto-btn {
  display: none;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 22px;
  border: 1px solid #16120e;
  background: #16120e;
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background .2s ease, color .2s ease;
}
.hp-goto-btn:hover { background: #fff; color: #16120e; }

/* === V74b - uniform fixed card height wins over legacy row rules === */

/* === V74c - mobile compact bar: cart pinned right, vertically centred === */
@media (max-width: 1024px) {
  .mobile-header.compact .mobile-actions {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    z-index: 135 !important;
  }
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  .mobile-header.compact .mobile-actions a[href="sepet.html"] {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* === V74d - mobile compact bar: cart flows at the right, flex-centred === */
@media (max-width: 1024px) {
  .mobile-header.compact .mobile-actions {
    position: static !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    inset: auto !important;
    z-index: 135 !important;
  }
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  .mobile-header.compact .mobile-actions a[href="sepet.html"] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* === V74e - mobile compact bar: clear legacy translate on the actions === */
@media (max-width: 1024px) {
  .mobile-header.compact .mobile-actions,
  .mobile-header.compact .mobile-actions * {
    transform: none !important;
  }
  .mobile-header.compact .mobile-actions {
    margin-left: auto !important;
    align-self: center !important;
  }
}

/* === V75 - 2-row chips, matching card proportions, no tap glow === */

@media (min-width: 1025px) {
  .product-grid:not(.homepage-product-track),
  .favs-grid,
  .cs-grid,
  .reco-grid.reco-grid-static {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 26px 20px !important;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .product-grid:not(.homepage-product-track),
  .favs-grid,
  .cs-grid,
  .reco-grid.reco-grid-static {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px 16px !important;
  }
}

img, svg { -webkit-user-drag: none; }

/* === V75b - mobile: tall, edge-to-edge category tiles with tap expansion === */
@media (max-width: 1024px) {
  .cat-banners-grid,
  .cat-banners-grid.iz-reference-category-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    width: 100% !important;
  }
  .cat-banners-grid .cat-banner,
  .iz-reference-category-grid .cat-banner {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 62vw !important;
    min-height: 240px !important;
    max-height: 320px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .28) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: flex-grow .38s ease !important;
  }
  .cat-banners-grid .cat-banner:last-child { border-right: 0 !important; }
  .cat-banners-grid.has-open .cat-banner { flex-grow: .62 !important; }
  .cat-banners-grid .cat-banner.is-open { flex-grow: 3.2 !important; }

  .iz-reference-category-grid .cat-banner-content,
  .cat-banners-grid .cat-banner-content {
    left: 8px !important;
    right: 8px !important;
    bottom: 10px !important;
  }
  .iz-reference-category-grid .cat-banner-eyebrow { display: none !important; }
  .iz-reference-category-grid .cat-banner-title,
  .cat-banners-grid .cat-banner-title {
    font-size: .72rem !important;
    line-height: 1.08 !important;
  }
  .cat-banners-grid .cat-banner.is-open .cat-banner-title { font-size: .95rem !important; }
  .cat-banners-grid .cat-banner-cta { display: none !important; }

  .cat-banner-see {
    display: none;
    margin-top: 9px;
    padding: 8px 14px;
    background: #fff;
    color: #16120e;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 999px;
    white-space: nowrap;
    align-self: flex-start;
  }
  .cat-banners-grid .cat-banner.is-open .cat-banner-see {
    display: inline-block !important;
  }
}
@media (min-width: 1025px) {
  .cat-banner-see { display: none !important; }
}

/* === V75c - card proportions per breakpoint === */
@media (min-width: 1025px) {
  /* Category page grid sits next to a sidebar, so 4 columns keeps the card
     width close to the homepage card (~245px) for an identical proportion. */
  #categoryGrid.product-grid,
  .category-layout .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 26px 20px !important;
  }
}

/* ── 1) TÜM SİTEDE TEK KART YAPISI ─────────────────────────────── */

/* Görsel alanı: sabit oran, taşma yok */

/* Bilgi alanı: kalan yükseklik, içerik hiçbir zaman üst üste binmez */

/* Ürün adı: en fazla 2 satır, taşan kısım kesilir */

/* ── 3) BİLGİ İKONLARI (etiketler): küçük, sola hizalı, eşit boy ── */

/* Fiyat satırı */

/* Sepete ekle: her zaman en altta, sabit yükseklik, görünür */

/* Rozet ve favori ikonu görselin üstünde, yazılarla çakışmaz */

/* Mobil ölçek — aynı yapı, sabit ve biraz artırılmış boy */

/* ── 4) MOBİL: header sonrası 4'lü menü tek satır, bitişik ─────── */
@media (max-width: 768px) {
  html body .cat-banners-section .container { padding-left: 0 !important; padding-right: 0 !important; }
  html body .cat-banners-grid,
  html body .cat-banners-grid.iz-reference-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html body .cat-banners-grid .cat-banner,
  html body .iz-reference-category-grid .cat-banner {
    flex: none !important;
    flex-grow: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 96px !important;
    min-height: 96px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255,255,255,.18) !important;
    overflow: hidden !important;
  }
  html body .cat-banners-grid .cat-banner:last-child { border-right: 0 !important; }
  html body .cat-banners-grid .cat-banner-content {
    padding: 6px 4px !important;
    text-align: center !important;
    align-items: center !important;
  }
  html body .cat-banners-grid .cat-banner-eyebrow,
  html body .cat-banners-grid .cat-banner-cta,
  html body .cat-banners-grid .cat-banner-see { display: none !important; }
  html body .cat-banners-grid .cat-banner-title {
    font-size: .62rem !important;
    line-height: 1.15 !important;
    letter-spacing: .01em !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body .cat-banners-progress { display: none !important; }
}

/* ── 6) SEPETTEKİ ÜRÜNLER: SEPETE EKLE BUTONU YEŞİL ────────────── */

/* ── 7) SEPET SAYFASI: KOMPAKT / GENİŞ GÖRÜNÜM ─────────────────── */
.cart-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 0;
}
.cart-view-label { font-size: .95rem; font-weight: 600; }
.cart-view-btn {
  border: 1px solid var(--border, #e3ddd4);
  background: #fff;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
}
.cart-view-btn:hover { background: #f6f2ec; }

.cart-view-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-width:92px; min-height:38px; border:0; border-radius:7px;
  background:#171513; color:#fff;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.cart-view-btn .cart-view-icon { width:17px; height:17px; flex:0 0 17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cart-view-btn.is-active { background:#fff; color:#111; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.cart-view-btn:not(.is-active) { color:#fff; }
.cart-view-btn:hover:not(.is-active) { background:#2a2724; color:#fff; }
.cart-view-btn:hover.is-active { background:#fff; color:#111; }
.cart-toolbar-group { display:inline-flex; align-items:center; gap:4px; padding:4px; background:#171513; border-radius:8px; }


/* Kompakt: her ürün tek satır — küçük resim, isim, fiyat */
.cart-page.cart-view-compact .cart-item {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 0 !important;
}
.cart-page.cart-view-compact .cart-item > div:nth-child(2) {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.cart-page.cart-view-compact .cart-item-img {
  width: 48px !important;
  height: 48px !important;
  padding: 4px !important;
  object-fit: cover !important;
}
.cart-page.cart-view-compact .cart-item-name {
  font-size: .85rem !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.cart-page.cart-view-compact .cart-item-meta { font-size: .7rem !important; margin: 2px 0 0 !important; }
.cart-page.cart-view-compact .qty-control { display: none !important; }
.cart-page.cart-view-compact .cart-remove { display: none !important; }
.cart-page.cart-view-compact .cart-item-price {
  font-size: .9rem !important;
  grid-column: auto !important;
  display: block !important;
  text-align: right !important;
}
@media (max-width: 768px) {
  .cart-page.cart-view-compact .cart-item > :last-child {
    grid-column: auto !important;
    display: block !important;
  }
}

/* Geniş görünüm: klasik satır (adet + kaldır görünür) */
.cart-page.cart-view-wide .qty-control,
.cart-page.cart-view-wide .cart-remove { display: flex !important; }
.cart-page.cart-view-wide .cart-remove { display: block !important; }

/* ── 5) MASAÜSTÜ: ana menü her sayfada aynı hizada ─────────────── */
@media (min-width: 1025px) {
  html body .site-header .header-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    white-space: nowrap !important;
  }
  html body .site-header .header-nav .nav-link {
    font-size: .78rem !important;
    white-space: nowrap !important;
  }
}

/* Masaüstü: kart boyu her grid'de sabit (önceki auto-height kurallarını ezer) */

/* 1–4) Every product card uses one geometry and one information rhythm. */

/* Title and first descriptive line sit close together. */

/* Info chips: text-sized borders, exactly two rows, consistent box height. */

/* Ghost slots preserve the 2-row geometry without drawing a frame. */

/* Cart CTA is inset from the card edge, never flush with the outer frame. */

/* 5) Mobile: four category tiles are tall and expand sideways on first tap. */
@media (max-width: 768px) {
  html body .cat-banners-section .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  html body .cat-banners-grid,
  html body .cat-banners-grid.iz-reference-category-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  html body .cat-banners-grid .cat-banner,
  html body .iz-reference-category-grid .cat-banner {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
    border-radius: 7px !important;
    border: 0 !important;
    transition: flex-grow .28s ease, flex-basis .28s ease, box-shadow .28s ease !important;
  }
  html body .cat-banners-grid .cat-banner.is-expanded,
  html body .iz-reference-category-grid .cat-banner.is-expanded {
    flex-grow: 2.35 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
  }
  html body .cat-banners-grid .cat-banner-content {
    left: 9px !important;
    right: 9px !important;
    bottom: 10px !important;
    padding: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
    z-index: 2 !important;
  }
  html body .cat-banners-grid .cat-banner-title {
    font-size: .72rem !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }
  html body .cat-banners-grid .cat-banner-eyebrow,
  html body .cat-banners-grid .cat-banner-cta,
  html body .cat-banners-grid .cat-banner-see { display: none !important; }
  html body .cat-banners-grid .cat-banner-product-btn {
    display: none !important;
    margin-top: 7px !important;
    padding: 6px 9px !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(0,0,0,.22) !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    backdrop-filter: blur(4px) !important;
  }
  html body .cat-banners-grid .cat-banner.is-expanded .cat-banner-product-btn {
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Same card geometry on mobile, only smaller image/header scale. */
  
  
  
  
  
  
  
  
  
}

/* 6) Search overlay must sit above the sticky campaign ticker. */
html body .search-overlay {
  z-index: 10000 !important;
}
html body .search-overlay.open {
  z-index: 10000 !important;
}
html body:has(.search-overlay.open) .campaign-marquee {
  z-index: 0 !important;
}

/* Product name + first descriptive line: ALWAYS one line with ellipsis. */

/* Exactly 2 visible metadata rows on every card. */

/* Ghost slots occupy the missing cells without drawing a box. */

/* Discount percentage stays fully inside its own frame. */

/* Same metadata proportions on narrow mobile cards. */

/* Product card CTA: visually independent from the outer frame with
   proportional horizontal inset and a deliberate bottom breathing space. */

/* Product name + secondary line are always single-line and never stretch the card. */

/* Discount badge stays inside its own box without forcing the price row wider. */

/* Mobile: four category visuals touch edge-to-edge, stay tall, and the
   clicked tile expands. Exactly one "Ürünlere Git" CTA is shown. */
@media (max-width:768px) {
  html body .cat-banners-section > .container {
    width:100% !important;
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  html body .cat-banners-grid,
  html body .cat-banners-grid.iz-reference-category-grid {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:0 !important;
  }
  html body .cat-banners-grid .cat-banner,
  html body .iz-reference-category-grid .cat-banner {
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    height:58vw !important;
    min-height:220px !important;
    max-height:360px !important;
    margin:0 !important;
    border:0 !important;
    border-right:1px solid rgba(255,255,255,.25) !important;
    border-radius:0 !important;
    transition:flex-grow .35s ease, flex-basis .35s ease !important;
  }
  html body .cat-banners-grid .cat-banner:last-child { border-right:0 !important; }
  html body .cat-banners-grid.has-open .cat-banner { flex-grow:.55 !important; }
  html body .cat-banners-grid .cat-banner.is-open { flex-grow:3.25 !important; }
  html body .cat-banners-grid .cat-banner-product-btn { display:none !important; }
  html body .cat-banners-grid .cat-banner-cta { display:none !important; }
  html body .cat-banners-grid .cat-banner-see {
    display:none !important;
    margin-top:8px !important;
    padding:7px 12px !important;
    border:1px solid rgba(255,255,255,.7) !important;
    border-radius:999px !important;
    background:rgba(20,16,13,.42) !important;
    color:#fff !important;
    font-size:.62rem !important;
    line-height:1 !important;
    font-weight:600 !important;
    white-space:nowrap !important;
    backdrop-filter:blur(5px) !important;
  }
  html body .cat-banners-grid .cat-banner.is-open .cat-banner-see { display:inline-flex !important; }
  html body .cat-banners-grid .cat-banner-content {
    left:9px !important;
    right:9px !important;
    bottom:11px !important;
  }
  html body .cat-banners-grid .cat-banner-title {
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }
}

.cart-item-main { min-width: 0; }
.cart-item-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cart-qty-text { display:none; font-size:.72rem; color:var(--text-sec); white-space:nowrap; }
.cart-price-sale { color:var(--text); font-weight:700; }
.cart-price-original { margin-left:7px; color:var(--text-muted); font-size:.72rem; text-decoration:line-through; white-space:nowrap; }
.cart-price-current { font-weight:600; }

.cart-page.cart-view-compact .cart-item-controls { gap:10px !important; }
.cart-page.cart-view-compact .cart-qty-text,
.cart-page.cart-view-compact .cart-remove { display:inline-flex !important; }
.cart-page.cart-view-compact .cart-remove {
  margin:0 !important;
  font-size:.72rem !important;
  text-decoration:none !important;
  color:var(--text) !important;
  white-space:nowrap !important;
}
.cart-page.cart-view-compact .qty-control { display:none !important; }
.cart-page.cart-view-compact .cart-item-price { min-width:max-content; }

.cart-page.cart-view-wide .cart-qty-text { display:none !important; }
.cart-page.cart-view-wide .cart-remove { display:block !important; }
.cart-page.cart-view-wide .cart-item-controls { gap:12px; }

@media (max-width:768px) {
  .cart-page.cart-view-compact .cart-item {
    grid-template-columns:48px minmax(0,1fr) auto !important;
    gap:10px !important;
  }
  .cart-page.cart-view-compact .cart-item-controls { gap:8px !important; }
  .cart-page.cart-view-compact .cart-item-price { font-size:.82rem !important; }
  .cart-page.cart-view-compact .cart-price-original { display:block; margin:2px 0 0 !important; font-size:.62rem !important; }
}

/* === V81 — mobile category tiles: taller, edge-to-edge, one CTA, toggle open/close === */
@media (max-width: 768px) {
  html body .cat-banners-section,
  html body .cat-banners-section > .container {
    width: 100% !important;
    max-width: none !important;
  }
  html body .cat-banners-section > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .cat-banners-grid,
  html body .cat-banners-grid.iz-reference-category-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  html body .cat-banners-grid .cat-banner,
  html body .cat-banners-grid.iz-reference-category-grid .cat-banner {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 70vw !important;
    min-height: 250px !important;
    max-height: 390px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: flex-grow .35s ease, flex-basis .35s ease !important;
  }
  html body .cat-banners-grid .cat-banner:last-child { border-right: 0 !important; }

  /* Open one card; all other cards remain visible but narrower. */
  html body .cat-banners-grid.has-open .cat-banner { flex-grow: .55 !important; }
  html body .cat-banners-grid .cat-banner.is-expanded { flex-grow: 3.25 !important; }

  /* Hide every other CTA system on mobile. */
  html body .cat-banners-grid .cat-banner-see,
  html body .cat-banners-grid .cat-banner-cta,
  html body .cat-banners-grid .cat-banner-eyebrow { display: none !important; }

  /* The single existing CTA appears only on the expanded tile. */
  html body .cat-banners-grid .cat-banner-product-btn { display: none !important; }
  html body .cat-banners-grid .cat-banner.is-expanded .cat-banner-product-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 8px !important;
    padding: 7px 12px !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(0,0,0,.24) !important;
    font-size: .62rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    backdrop-filter: blur(4px) !important;
  }

  html body .cat-banners-grid .cat-banner-content {
    left: 9px !important;
    right: 9px !important;
    bottom: 11px !important;
    padding: 0 !important;
  }
  html body .cat-banners-grid .cat-banner-title {
    font-size: .72rem !important;
    line-height: 1.06 !important;
  }
  html body .cat-banners-grid .cat-banner.is-expanded .cat-banner-title {
    font-size: .94rem !important;
  }
}

/* V82 — mobile homepage category tiles: flush, tall, single-tap expand/collapse */
@media (max-width: 768px) {
  html body .cat-banners-section {
    padding: 14px 0 28px !important;
    overflow: hidden !important;
  }
  html body .cat-banners-section .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .cat-banners-grid,
  html body .cat-banners-grid.iz-reference-category-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html body .cat-banners-grid .cat-banner,
  html body .cat-banners-grid.iz-reference-category-grid .cat-banner {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 82vw !important;
    min-height: 300px !important;
    max-height: 430px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: flex-grow .32s ease, flex-basis .32s ease, box-shadow .32s ease !important;
    touch-action: manipulation !important;
  }
  html body .cat-banners-grid .cat-banner + .cat-banner {
    border-left: 0 !important;
  }
  html body .cat-banners-grid.has-open .cat-banner {
    flex-grow: .55 !important;
  }
  html body .cat-banners-grid .cat-banner.is-expanded {
    flex-grow: 3.25 !important;
    z-index: 3 !important;
  }
  html body .cat-banners-grid .cat-banner-product-btn {
    display: none !important;
  }
  html body .cat-banners-grid .cat-banner.is-expanded .cat-banner-product-btn {
    display: inline-flex !important;
  }
}

/* V83 — menu logo below campaign bar + mobile category content-only update */
:root { --iz-campaign-offset: var(--mq-h, 34px); }

/* The opened category/menu panel starts below the sticky campaign strip,
   so its IZ PARFÜM logo can never sit behind the moving campaign text. */
.mobile-menu-overlay {
  top: var(--iz-campaign-offset) !important;
  z-index: 2001 !important;
}
.mobile-menu {
  top: var(--iz-campaign-offset) !important;
  height: calc(100dvh - var(--iz-campaign-offset)) !important;
  bottom: auto !important;
  z-index: 2002 !important;
}

@media (max-width: 768px) {
  /* Closed state: only the visual is shown; no category text is visible. */
  html body .cat-banners-grid .cat-banner-content {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }
  html body .cat-banners-grid .cat-banner-content > .cat-banner-eyebrow,
  html body .cat-banners-grid .cat-banner-content > .cat-banner-title,
  html body .cat-banners-grid .cat-banner-content > .cat-banner-cta {
    display: none !important;
  }
  html body .cat-banners-grid .cat-banner-product-btn {
    display: none !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(78%, 260px) !important;
    min-width: 180px !important;
    height: 52px !important;
    padding: 0 24px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.92) !important;
    border-radius: 4px !important;
    background: rgba(18,14,11,.84) !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    backdrop-filter: blur(6px) !important;
    z-index: 8 !important;
  }
  /* JS uses .is-expanded; preserve the existing flex-grow animation. */
  html body .cat-banners-grid.has-open .cat-banner.is-expanded {
    flex-grow: 3.25 !important;
  }
  html body .cat-banners-grid.has-open .cat-banner:not(.is-expanded) {
    flex-grow: .55 !important;
  }
  html body .cat-banners-grid .cat-banner.is-expanded .cat-banner-product-btn {
    display: inline-flex !important;
  }
}

/* V86 — four-slide hero + clean mobile category visuals */
.hero-slider.hero-campaign {
  height: clamp(300px, 38vw, 470px) !important;
}
.hero-campaign .hero-slides,
.hero-campaign .hero-slide { height: 100% !important; }
.hero-campaign .hero-slide-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.hero-campaign .hero-slide-img.hero-code-visual {
  background-size: cover !important;
  background-position: center !important;
}
.hero-campaign .hero-arrow { z-index: 20 !important; }
.hero-campaign .hero-dots { z-index: 21 !important; }
.hero-campaign .hero-progress { z-index: 22 !important; }

/* Mobile keeps the existing tall portrait ratio. */
@media (max-width: 768px) {
  .hero-slider.hero-campaign {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .hero-campaign .hero-slide-img {
    object-fit: cover !important;
    object-position: center center !important;
  }
}
@media (max-width: 600px) {
  .hero-slider.hero-campaign { aspect-ratio: 4 / 5 !important; }
}

/* Mobile category banners: visuals only in the closed state.
   Keep the established expand/collapse animation untouched. */
@media (max-width: 768px) {
  html body .iz-reference-category-grid .cat-banner-overlay,
  html body .iz-reference-category-grid .cat-banner-content > .cat-banner-eyebrow,
  html body .iz-reference-category-grid .cat-banner-content > .cat-banner-title,
  html body .iz-reference-category-grid .cat-banner-content > .cat-banner-cta {
    display: none !important;
  }
  html body .iz-reference-category-grid .cat-banner-overlay {
    background: none !important;
    opacity: 0 !important;
  }
  html body .iz-reference-category-grid .cat-banner::before {
    display: none !important;
  }
  html body .iz-reference-category-grid .cat-banner-product-btn {
    display: none !important;
  }
  html body .iz-reference-category-grid .cat-banner.is-expanded .cat-banner-product-btn {
    display: inline-flex !important;
  }
}

/* V88 — mobile round category carousel: 2.5 large items, native touch scroll only. */
@media (max-width: 768px) {
  .category-circles-section > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .category-circles-viewport {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .category-circles-viewport::-webkit-scrollbar { display: none; }
  .category-circles-track {
    gap: 14px !important;
    width: max-content !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    padding: 0 14px !important;
  }
  .category-circle {
    width: calc((100vw - 28px - 28px) / 2.5) !important;
    min-width: calc((100vw - 28px - 28px) / 2.5) !important;
    max-width: calc((100vw - 28px - 28px) / 2.5) !important;
    gap: 8px !important;
  }
  .category-circle-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  .category-circle-name {
    width: 100% !important;
    max-width: none !important;
    font-size: .76rem !important;
    margin-top: 2px !important;
  }
  .category-circles-arrow { display: none !important; }
}

/* V88 — make the fourth hero artwork clearly distinct from the other three. */
.hero-campaign .hero-slide:nth-child(4) .hero-code-visual {
  background-color: #17352f !important;
}

/* V89 — Hero aspect-ratio lock: desktop 1.91:1, mobile 9:16 */
.hero-slider.hero-campaign{
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  height:auto !important;
  aspect-ratio:1.91 / 1;
  min-height:0 !important;
  max-height:none !important;
}
.hero-slider.hero-campaign .hero-slides,
.hero-slider.hero-campaign .hero-slide,
.hero-slider.hero-campaign .hero-slide-img{
  width:100%;
  height:100%;
}

@media (max-width:768px){
  .hero-slider.hero-campaign{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    aspect-ratio:9 / 16;
    height:auto !important;
    min-height:0 !important;
  }
}

/* V90 — final hero sizing + reliable pointer navigation */
body .hero-slider.hero-campaign {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
  height: auto !important;
  aspect-ratio: 1.91 / 1 !important;
  min-height: 0 !important;
  max-height: none !important;
}
body .hero-campaign .hero-slides,
body .hero-campaign .hero-slide,
body .hero-campaign .hero-slide-img {
  width: 100% !important;
  height: 100% !important;
}
body .hero-campaign .hero-slide-img {
  object-fit: cover !important;
  display: block !important;
}
body .hero-campaign .hero-arrow,
body .hero-campaign .hero-dots,
body .hero-campaign .hero-progress {
  pointer-events: auto !important;
}
body .hero-campaign .hero-arrow { z-index: 100 !important; }
body .hero-campaign .hero-dots { z-index: 101 !important; }
body .hero-campaign .hero-progress { z-index: 102 !important; }

@media (max-width: 768px) {
  body .hero-slider.hero-campaign {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    aspect-ratio: 9 / 17 !important;
  }
}

/* V91 — mobile round category carousel: exactly 2.5 visible, touch-drag only. */
@media (max-width: 768px) {
  .category-circles-section > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .category-circles-carousel,
  .category-circles-viewport {
    width: 100% !important;
    max-width: none !important;
  }
  .category-circles-viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }
  .category-circles-viewport::-webkit-scrollbar { display: none !important; }
  .category-circles-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .category-circles-track .category-circle {
    flex: 0 0 calc((100vw - 24px) / 2.5) !important;
    width: calc((100vw - 24px) / 2.5) !important;
    min-width: calc((100vw - 24px) / 2.5) !important;
    max-width: calc((100vw - 24px) / 2.5) !important;
  }
  .category-circles-track .category-circle-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  .category-circles-track .category-circle-name {
    width: 100% !important;
    margin-top: 8px !important;
    font-size: .76rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .category-circles-arrow,
  .category-circles-prev,
  .category-circles-next {
    display: none !important;
  }
  .category-circles-track img {
    -webkit-user-drag: none;
    user-select: none;
  }
}

/* V92 — desktop/mobile homepage header + round category sizing */
@media (min-width: 1025px) {
  /* Desktop header: shorter bar, same horizontal content structure. */
  :root { --header-h: 60px; }
  .site-header { height: 60px !important; }
  .site-header .header-inner { height: 60px !important; }
  .site-header .nav-link { padding-top: 6px !important; padding-bottom: 6px !important; }
  .site-header .header-logo { font-size: 1.02rem !important; }

  /* Desktop hero: full site/screen width, shorter in height. */
  body .hero-slider.hero-campaign {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    aspect-ratio: 2.2 / 1 !important;
    height: auto !important;
    max-height: none !important;
  }
  body .hero-campaign .hero-slides,
  body .hero-campaign .hero-slide,
  body .hero-campaign .hero-slide-img { width: 100% !important; height: 100% !important; }

  /* Desktop round categories: exactly four on one line inside site bounds. */
  .category-circles-section > .container {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .category-circles-viewport,
  .category-circles-carousel { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  .category-circles-track,
  .category-circles-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2.5vw, 32px) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  .category-circles-track .category-circle,
  .category-circles-row .category-circle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .category-circles-track .category-circle-img,
  .category-circles-row .category-circle-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  .category-circles-arrow { display: none !important; }
}

@media (max-width: 1024px) {
  /* Mobile hero: taller while keeping the established portrait layout. */
  body .hero-slider.hero-campaign {
    width: 100vw !important;
    max-width: 100vw !important;
    aspect-ratio: 9 / 18 !important;
    height: auto !important;
  }
  body .hero-campaign .hero-slides,
  body .hero-campaign .hero-slide,
  body .hero-campaign .hero-slide-img { width: 100% !important; height: 100% !important; }
}

/* Keep all four header slides real on every viewport; only the active one is visible. */
.hero-campaign .hero-slide:nth-child(1) .hero-slide-img { object-position: center center !important; }
.hero-campaign .hero-slide:nth-child(2) .hero-slide-img { object-position: center center !important; }
.hero-campaign .hero-slide:nth-child(3) .hero-slide-img { object-position: center center !important; }
.hero-campaign .hero-slide:nth-child(4) .hero-slide-img { object-position: center center !important; }

/* V93 — FINAL HERO + DESKTOP CATEGORY FIXES */
.hero-campaign .hero-slide { opacity: 0 !important; pointer-events: none !important; }
.hero-campaign .hero-slide.active { opacity: 1 !important; pointer-events: auto !important; }

@media (min-width: 1025px) {
  body .hero-slider.hero-campaign {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 2.2 / 1 !important;
    height: auto !important;
  }
  .category-circles-section > .container {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .category-circles-viewport { overflow: hidden !important; width: 100% !important; }
  .category-circles-track, .category-circles-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 28px) !important;
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    transition: none !important;
  }
  .category-circles-track .category-circle, .category-circles-row .category-circle {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
  }
  .category-circles-arrow { display: none !important; }
}

@media (max-width: 768px) {
  body .hero-slider.hero-campaign {
    width: 100vw !important; max-width: 100vw !important;
    margin-left: 50% !important; transform: translateX(-50%) !important;
    aspect-ratio: 9 / 17 !important; height: auto !important;
  }
}

/* V95 — definitive responsive hero sizing + desktop pointer navigation */
@media (min-width: 1025px) {
  body .hero-slider.hero-campaign {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    height: clamp(300px, 34vw, 460px) !important;
    aspect-ratio: auto !important;
    min-height: 300px !important;
    max-height: 460px !important;
    overflow: hidden !important;
  }
  body .hero-campaign .hero-slides,
  body .hero-campaign .hero-slide,
  body .hero-campaign .hero-slide-img {
    width: 100% !important;
    height: 100% !important;
  }
  body .hero-campaign .hero-slide-img {
    object-fit: cover !important;
    object-position: center center !important;
  }
  body .hero-campaign .hero-arrow {
    display: flex !important;
    pointer-events: auto !important;
    z-index: 999 !important;
  }
}

@media (max-width: 768px) {
  body .hero-slider.hero-campaign {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    height: auto !important;
    aspect-ratio: 9 / 17 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body .hero-campaign .hero-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body .hero-campaign .hero-arrow {
    display: none !important;
    pointer-events: none !important;
  }
}

/* Desktop category circles: one row, four items only, never wrap. */
@media (min-width: 1025px) {
  body .category-circles-section .category-circles-viewport {
    overflow: hidden !important;
  }
  body .category-circles-section .category-circles-track {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 24px !important;
    transform: none !important;
    transition: none !important;
  }
  body .category-circles-section .category-circle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* V95 — final hero dimensions + dependable desktop mouse drag/swipe */
@media (min-width: 1025px) {
  body .hero-slider.hero-campaign {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    aspect-ratio: 2.2 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body .hero-campaign .hero-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }
  body .hero-campaign.is-dragging {
    cursor: grabbing !important;
  }
}

@media (max-width: 768px) {
  body .hero-slider.hero-campaign {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    aspect-ratio: 9 / 19 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body .hero-campaign .hero-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* V105 — SINGLE HERO DESIGN */
#heroSlider.hero-slider{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  height:calc(100vw * 5 / 16) !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
}

#heroSlider .hero-slides,
#heroSlider .hero-slide{
  width:100% !important;
  height:100% !important;
}
#heroSlider .hero-slide{
  position:absolute !important;
  inset:0 !important;
}
#heroSlider .hero-slide-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}
#heroSlider .hero-slide-cta{
  width:var(--hero-cta-width,170px) !important;
  height:var(--hero-cta-height,42px) !important;
  font-size:var(--hero-cta-font,12px) !important;

  position:absolute !important;
  left:var(--hero-cta-x,50%) !important;
  top:var(--hero-cta-y,89%) !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  z-index:100 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:180px !important;
  padding:13px 26px !important;
  border-radius:999px !important;
  background:rgba(248,247,243,.97) !important;
  color:#111 !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  box-shadow:0 3px 12px rgba(0,0,0,.10) !important;
  transition:box-shadow .2s ease, transform .2s ease !important;
}
#heroSlider .hero-slide-cta:hover{
  box-shadow:0 10px 28px rgba(0,0,0,.22) !important;
  transform:translate(-50%,-50%) translateY(-1px) !important;
}

@media (min-width:768px){
  #heroSlider.hero-slider{
    cursor:grab !important;
    touch-action:pan-y !important;
  }
  #heroSlider.hero-slider.is-dragging{
    cursor:grabbing !important;
  }
}

@media (max-width:767px){
  #heroSlider.hero-slider{
    height:calc(100vw * 15 / 9) !important;
    touch-action:pan-y !important;
  }
  #heroSlider .hero-arrow,
  #heroSlider #heroPrev,
  #heroSlider #heroNext{
    display:none !important;
  }
  #heroSlider .hero-slide-cta{
    width:var(--hero-cta-width-mobile,150px) !important;
    height:var(--hero-cta-height-mobile,40px) !important;
    font-size:var(--hero-cta-font-mobile,11px) !important;

    left:var(--hero-cta-x-mobile,50%) !important;
    top:var(--hero-cta-y-mobile,90%) !important;
    bottom:auto !important;
    transform:translate(-50%,-50%) !important;
    min-width:180px !important;
    padding:13px 26px !important;
  }
}

/* Live Shopier stock state */

.volume-btn.disabled { opacity:.5; cursor:not-allowed; }
.product-quantity button:disabled { opacity:.4; cursor:not-allowed !important; }
.product-quantity input:disabled { opacity:.5; cursor:not-allowed; }

/* v116 product options */
.product-quantity{display:flex;align-items:center;gap:10px;margin:16px 0 18px}
.product-quantity .qty-wrap{display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.product-quantity .qty-btn{width:42px;height:40px;border:0;background:transparent;font-size:1.2rem;cursor:pointer}
.product-quantity .qty-btn:disabled{opacity:.35;cursor:not-allowed!important}
.product-quantity .qty-num-input{width:56px;height:40px;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);text-align:center;background:transparent;font-weight:600}
.product-quantity .qty-num-input:disabled{opacity:.45;cursor:not-allowed}
.essence-option.is-10ml .essence-option-left span{font-weight:600}

/* v122 — 100 ml gift label */
.volume-btn{position:relative;}
.volume-gift-label{display:block;margin:-2px -2px 4px;padding:3px 5px;border-radius:4px;background:#c62828;color:#fff;font-size:.58rem;font-style:normal;font-weight:700;line-height:1.15;text-align:center;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.volume-btn.disabled .volume-gift-label{display:none;}

/* v123: 100 ml gift label sits above the volume button, not inside it. */
.volume-option-wrap{display:flex;flex-direction:column;align-items:stretch;min-width:0;}
.volume-gift-label{display:block;width:100%;box-sizing:border-box;margin:0 0 5px;padding:4px 7px;border-radius:5px;background:#c62828;color:#fff;font-size:.62rem;font-style:normal;font-weight:700;line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.volume-option-wrap .volume-btn{width:100%;}
.volume-option-wrap .volume-btn.disabled + *{display:none;}

/* v123: six product-card metadata chips maximum, 3 columns x 2 rows. */

/* v126 — perfume card info chips: up to 6 items, max 2 rows, no overlap/overflow. */

/* V28 — Product card info tags: sequential flow, max 2 rows, no fixed table columns. */

/* Gentle, low-saturation intensity colors. */

/* V129 — Product card metadata flows naturally left-to-right.
   No fixed grid/column placement: pills use available width and wrap to a
   maximum of two rows without reserving blank cells. */

/* Remove all legacy grid placement rules that can create blank cells. */

/* v130 — Recommendation cards: exactly the same geometry as all other product cards. */

/* v130 — recommendation metadata uses the same sequential two-row flow as all product cards. */

/* v131 — Recommendation cards follow the exact homepage row geometry. */
html body .reco-grid.reco-grid-static {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
  margin-top: 24px !important;
  scroll-snap-type: none !important;
}

html body .reco-grid.reco-grid-static + .reco-more-wrap {
  display: none !important;
}
@media (min-width: 769px) and (max-width: 1100px) {
  html body .reco-grid.reco-grid-static {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  html body .reco-grid.reco-grid-static {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width: 480px) {
  html body .reco-grid.reco-grid-static {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* v132 — Product-page recommendation cards: fixed homepage-like card width.
   Prevent a single recommendation from stretching across the entire row.
   Cards pack from left to right, then wrap naturally to the next row. */
html body .reco-grid.reco-grid-static,
html body .reco-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 245px) !important;
  justify-content: start !important;
  align-items: start !important;
  column-gap: 16px !important;
  row-gap: 18px !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) and (min-width: 769px) {
  html body .reco-grid.reco-grid-static,
  html body .reco-grid {
    grid-template-columns: repeat(auto-fill, 235px) !important;
  }
  
}
@media (max-width: 768px) {
  html body .reco-grid.reco-grid-static,
  html body .reco-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
  
}
@media (max-width: 480px) {
  html body .reco-grid.reco-grid-static,
  html body .reco-grid {
    column-gap: 10px !important;
    row-gap: 10px !important;
  }
}

.volume-options{
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  overflow:visible !important;
}
.volume-option-wrap{
  position:relative !important;
  display:block !important;
  min-width:92px !important;
  width:92px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
.volume-option-wrap .volume-btn{
  display:flex !important;
  width:100% !important;
  min-width:92px !important;
  box-sizing:border-box !important;
  margin:0 !important;
  position:relative !important;
}
.volume-gift-label{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:calc(100% + 5px) !important;
  width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
  z-index:3 !important;
  display:block !important;
  padding:4px 6px !important;
  border-radius:5px !important;
  background:#c62828 !important;
  color:#fff !important;
  font-size:.60rem !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.volume-option-wrap .volume-btn.disabled ~ .volume-gift-label,
.volume-option-wrap .volume-btn.disabled + .volume-gift-label{
  display:none !important;
}

.volume-option-wrap:has(.volume-gift-label){
  position:relative !important;
  overflow:visible !important;
}
.volume-option-wrap .volume-gift-label{
  left:50% !important;
  right:auto !important;
  bottom:calc(100% + 5px) !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:none !important;
  transform:translateX(-50%) !important;
  padding:5px 9px !important;
  font-size:.78rem !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:center !important;
}

.volume-options .volume-option-wrap:has(.volume-gift-label) .volume-gift-label{
  position:absolute !important;
  left:calc(100% + 8px) !important;
  right:auto !important;
  bottom:10px !important;
  top:auto !important;
  width:max-content !important;
  min-width:max-content !important;
  max-width:none !important;
  transform:none !important;
  box-sizing:border-box !important;
  display:block !important;
  margin:0 !important;
  padding:5px 9px !important;
  border-radius:6px !important;
  background:#c62828 !important;
  color:#fff !important;
  font-size:.80rem !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  z-index:10 !important;
}
.volume-options .volume-option-wrap:has(.volume-gift-label) .volume-gift-label::before{
  content:"" !important;
  position:absolute !important;
  left:-6px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:0 !important;
  height:0 !important;
  border-top:6px solid transparent !important;
  border-bottom:6px solid transparent !important;
  border-right:6px solid #c62828 !important;
}

/* Keep the two-row metadata area on cards that have fewer than six tags too. */

/* Every card gets exactly the same two-row metadata footprint, even when
   there are fewer than six tags or no tags at all. */

/* Category pages use the same card proportions and spacing as the homepage. */
#categoryGrid.product-grid {
  align-items: start !important;
}

#categoryGrid.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  overflow: visible !important;
}

/* The metadata area is ALWAYS two rows, even when empty or only partially filled. */

@media (max-width: 1024px) {
  #categoryGrid.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  #categoryGrid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  
  
  
  
}

/* V147 — Canonical site-wide navigation + collapsible category groups */
.header-nav { align-items: center; }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { border: 0; background: transparent; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-chevron, .mobile-menu-chevron, .category-filter-chevron { font-size: .78em; transition: transform .2s ease; }
.nav-dropdown:hover .nav-chevron, .nav-dropdown:focus-within .nav-chevron,
.mobile-menu-dropdown[open] .mobile-menu-chevron, .category-filter-collapsible[open] .category-filter-chevron { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: calc(100% + 7px); left: 0; min-width: 150px; padding: 7px; background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 500; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-item { display: block; padding: 9px 11px; color: var(--text-sec); font-size: .9rem; border-radius: var(--radius); white-space: nowrap; }
.nav-dropdown-item:hover { color: var(--text); background: var(--off-white); }
.mobile-menu-dropdown { border: 0; margin: 0; padding: 0; }
.mobile-menu-dropdown > summary { list-style: none; }
.mobile-menu-dropdown > summary::-webkit-details-marker { display: none; }
.mobile-menu-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; cursor: pointer; width: 100%; box-sizing: border-box; }
.mobile-menu-subitems { padding-left: 14px; border-left: 1px solid var(--border); margin: 0 0 4px 10px; }
.category-filter-collapsible { margin: 0; }
.category-filter-collapsible > summary { list-style: none; cursor: pointer; user-select: none; }
.category-filter-collapsible > summary::-webkit-details-marker { display: none; }
.category-filter-other-title { display: flex; align-items: center; justify-content: space-between; }
.category-filter-other-list { display: flex; flex-direction: column; }
.category-filter-other-list .category-filter-link { padding: 7px 0; }
.mobile-category-collapsible { margin-top: 0; }
@media (max-width: 1024px) {
  .header-nav { display: none; }
}

/* v148 — hide the Parfümler dropdown from the compact scroll header */
@media (min-width: 1025px) {
  body .site-header.compact .header-nav > .nav-dropdown { display: none !important; }
}

/* V151 — Site-wide fire marker for Shopier top-20 best sellers. */

/* v154 — Mobile product sticky bar: show the pending cart total. */
@media (max-width: 767px) {
  .sticky-buy-bar #stickyPrice {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 72px !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    white-space: nowrap !important;
  }
}

/* HERO: desktop/mobile assets are resolved by filename only.
   Put hero-1, hero-2, hero-3, hero-4 in both folders; extension can be
   .svg, .jpg, .jpeg, .png, .webp, .gif, .avif or a supported video format. */
.hero-slide-media {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-slide-media > img,
.hero-slide-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide-media > video {
  pointer-events: none;
}

/* V157 — Hero alan oranları kesin sabit */
.hero-slider.hero-campaign,
body #heroSlider.hero-slider {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 19.1 / 1 !important;
  overflow: hidden !important;
}



@media (max-width: 768px) {
  .hero-slider.hero-campaign,
  body #heroSlider.hero-slider {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 9 / 14 !important;
    overflow: hidden !important;
  }
}

/* V159 — Four homepage category tiles use the supplied category artwork.
   Desktop and mobile use the same fixed 3:4 tile ratio. */
.iz-reference-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.iz-reference-category-grid .cat-banner {
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.iz-reference-category-grid .cat-reference-bg {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
}
@media (max-width: 768px) {
  .iz-reference-category-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
  }
  .iz-reference-category-grid .cat-banner {
    flex: 0 0 calc(100% - 28px) !important;
    width: calc(100% - 28px) !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
  }
}

/* V159 — Category artwork already contains its own typography and visual treatment.
   Keep the cards clickable, but do not duplicate the old text/gradient layer. */
.iz-reference-category-grid .cat-banner-overlay,
.iz-reference-category-grid .cat-banner-content {
  display: none !important;
}

/* V160 — FINAL HEADER + CATEGORY MENU DIMENSIONS / DESKTOP HOVER */
.hero-slider.hero-campaign,
body #heroSlider.hero-slider {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 3 / 1 !important;
  overflow: hidden !important;
}

.hero-slider.hero-campaign .hero-slide,
.hero-slider.hero-campaign .hero-slide-media,
.hero-slider.hero-campaign .hero-slide-media > img,
.hero-slider.hero-campaign .hero-slide-media > video {
  width: 100% !important;
  height: 100% !important;
}

/* The four category images keep their original 3:4 portrait ratio at rest. */
.iz-reference-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}
.iz-reference-category-grid .cat-banner {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  min-height: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  transition: width .8s ease, box-shadow .5s ease !important;
  transform-origin: left center !important;
  z-index: 1;
}
.iz-reference-category-grid .cat-banner:hover {
  width: calc(100% + 70px) !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  z-index: 10 !important;
  box-shadow: 0 14px 32px rgba(34,24,17,.16) !important;
}

@media (max-width: 768px) {
  .hero-slider.hero-campaign,
  body #heroSlider.hero-slider {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 9 / 15 !important;
    overflow: hidden !important;
  }

  /* Mobile keeps each category image at its original 3:4 ratio; no hover expansion. */
  .iz-reference-category-grid .cat-banner {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }
  .iz-reference-category-grid .cat-banner:hover {
    width: 100% !important;
  }
}

/* V161 FIX — Desktop category hover: keep the original menu height fixed.
   The hovered card overlays to the right instead of changing the grid height. */
@media (min-width: 769px) {
  .iz-reference-category-grid {
    position: relative !important;
    display: grid !important;
    container-type: inline-size !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    overflow: visible !important;
  }

  .iz-reference-category-grid .cat-banner {
    width: 100% !important;
    height: calc((100cqw - 36px) / 4 * 1.3333333333) !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    transition: width .75s ease, box-shadow .75s ease !important;
    transform-origin: left center !important;
    z-index: 1 !important;
  }

  /* Expand only the hovered item to the right. The grid itself never grows. */
  .iz-reference-category-grid .cat-banner:hover {
    width: calc(100% + 70px) !important;
    height: calc((100cqw - 36px) / 4 * 1.3333333333) !important;
    aspect-ratio: auto !important;
    transform: none !important;
    z-index: 20 !important;
    box-shadow: 0 14px 32px rgba(34,24,17,.16) !important;
  }
}

/* V164 — Desktop 4'lü kategori menüsü: bitişik kartlar + yavaş siyah hover karartma */
@media (min-width: 769px) {
  .iz-reference-category-grid {
    gap: 0 !important;
    overflow: visible !important;
  }

  .iz-reference-category-grid .cat-banner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    transform: none !important;
    box-shadow: none !important;
    z-index: 1 !important;
    transition: box-shadow .9s ease !important;
  }

  /* Mouse menünün üzerindeyken tüm kartların üstüne yumuşak siyah perde gelir. */
  .iz-reference-category-grid .cat-banner::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, .58) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 3 !important;
    transition: opacity .9s ease !important;
  }

  /* Sadece üzerine gelinen seçenek aydınlık kalır. Boyut/oran kesinlikle değişmez. */
  .iz-reference-category-grid:hover .cat-banner::after {
    opacity: 1 !important;
  }

  .iz-reference-category-grid .cat-banner:hover::after {
    opacity: 0 !important;
  }

  .iz-reference-category-grid .cat-banner:hover {
    z-index: 5 !important;
    box-shadow: 0 10px 28px rgba(34, 24, 17, .14) !important;
  }
}

/* V165 — Desktop 4'lü menü: sabit 3:4 menü yüksekliği + sağa açılma.
   Grid'in yüksekliği hiçbir hover durumunda değişmez. Görsel object-fit: cover ile
   gerilmeden korunur; yalnızca hover edilen kart sağa doğru genişler. */
@media (min-width: 769px) {
  .iz-reference-category-grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    height: calc(100cqw / 3) !important;
    min-height: 0 !important;
    max-height: calc(100cqw / 3) !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .iz-reference-category-grid .cat-banner {
    position: relative !important;
    width: 100% !important;
    height: calc(100cqw / 3) !important;
    min-height: calc(100cqw / 3) !important;
    max-height: calc(100cqw / 3) !important;
    aspect-ratio: 3 / 4 !important;
    flex: none !important;
    transform: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: width 1.35s ease, box-shadow 1.35s ease !important;
  }

  .iz-reference-category-grid .cat-banner .cat-reference-bg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* Menü kutusunun oranı sabit; yalnız hover edilen kutu sağa taşarak genişler. */
  .iz-reference-category-grid .cat-banner:hover {
    width: calc(100% + 70px) !important;
    height: calc(100cqw / 3) !important;
    min-height: calc(100cqw / 3) !important;
    max-height: calc(100cqw / 3) !important;
    aspect-ratio: 3 / 4 !important;
    z-index: 20 !important;
    box-shadow: 0 12px 30px rgba(34,24,17,.12) !important;
  }

  /* Hover edilen dışındaki üç seçeneği yavaş siyah perdeyle karart. */
  .iz-reference-category-grid .cat-banner::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.62) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transition: opacity 1.35s ease !important;
  }

  .iz-reference-category-grid:hover .cat-banner:not(:hover)::after {
    opacity: 1 !important;
  }

  .iz-reference-category-grid .cat-banner:hover::after {
    opacity: 0 !important;
  }
}

/* V166 — Desktop 4'lü menü: HOVERDA YAKINLAŞTIRMA / GENİŞLEME YOK.
   Menü ölçüleri ve 3:4 oranı tamamen sabit kalır. Sadece aktif kart gölgelidir,
   diğer kartlar yavaş siyah perdeyle kararır. */
@media (min-width: 769px) {
  .iz-reference-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .iz-reference-category-grid .cat-banner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 4 !important;
    transform: none !important;
    z-index: 1 !important;
    overflow: hidden !important;
    transition: box-shadow 1.2s ease !important;
  }

  .iz-reference-category-grid .cat-banner .cat-reference-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    transition: none !important;
  }

  /* Hiçbir şekilde genişleme/yakınlaşma olmasın. */
  .iz-reference-category-grid .cat-banner:hover {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 4 !important;
    transform: none !important;
    z-index: 5 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .24) !important;
  }

  /* Menüye girildiğinde her kartın üzerine siyah perde hazır gelir. */
  .iz-reference-category-grid .cat-banner::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, .62) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transition: opacity 1.2s ease !important;
  }

  /* Sadece mouse'un bulunduğu kart aydınlık kalır. */
  .iz-reference-category-grid:hover .cat-banner:not(:hover)::after {
    opacity: 1 !important;
  }

  .iz-reference-category-grid .cat-banner:hover::after {
    opacity: 0 !important;
  }
}

/* V167 — Desktop 4'lü menü hover: çok hafif yaklaşma + siyah çerçeve.
   Kartın gerçek ölçüsü ve 3:4 oranı değişmez; sadece görsel olarak çok az ölçeklenir. */
@media (min-width: 769px) {
  .iz-reference-category-grid .cat-banner {
    transition: transform 1.6s cubic-bezier(.4, 0, .2, 1), box-shadow 1.35s cubic-bezier(.4, 0, .2, 1) !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
  }

  .iz-reference-category-grid .cat-banner .cat-reference-bg {
    transform: none !important;
    transition: none !important;
  }

  .iz-reference-category-grid .cat-banner:hover {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    transform: scale(1.003) !important;
    box-shadow: inset 0 0 0 4px #000, 0 8px 22px rgba(0,0,0,.18) !important;
    z-index: 20 !important;
  }

  /* Hover edilen dışındaki seçenekler yumuşak siyah kararmayla geri planda kalır. */
  .iz-reference-category-grid .cat-banner::after {
    background: rgba(0,0,0,.32) !important;
    opacity: 0 !important;
    transition: opacity 1.35s cubic-bezier(.4, 0, .2, 1) !important;
  }

  .iz-reference-category-grid:hover .cat-banner:not(:hover)::after {
    opacity: 1 !important;
  }

  .iz-reference-category-grid .cat-banner:hover::after {
    opacity: 0 !important;
  }
}

/* V171 — Desktop 4'lü kategori menüsü: hover efektleri tamamen yeniden kuruldu.
   Kart ölçüsü, 3:4 oranı ve grid yerleşimi sabittir. Hiçbir scale/width/height animasyonu yoktur. */
@media (min-width: 769px) {
  .iz-reference-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .iz-reference-category-grid .cat-banner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 4 !important;
    transform: none !important;
    z-index: 1 !important;
    overflow: hidden !important;
    transition: box-shadow 1.4s ease, filter 1.4s ease !important;
  }

  .iz-reference-category-grid .cat-banner .cat-reference-bg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    transition: none !important;
  }

  /* Siyah kararma katmanı — sadece diğer üç kartta görünür. */
  .iz-reference-category-grid .cat-banner::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, .24) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 5 !important;
    transition: opacity 1.4s ease !important;
  }

  /* Menüye girildiğinde hover edilmeyen kartlar yavaşça kararır. */
  .iz-reference-category-grid:hover .cat-banner:not(:hover)::after {
    opacity: 1 !important;
  }

  /* Hover edilen kart büyümez; yalnızca siyah çerçeve/gölge yavaşça belirir. */
  .iz-reference-category-grid .cat-banner:hover {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    transform: none !important;
    z-index: 20 !important;
    box-shadow: inset 0 0 0 3px #000, 0 8px 24px rgba(0, 0, 0, .20) !important;
  }
}

/* V172 — Mobile 4'lü kategori menüsü: açılan kart + altta CTA + yumuşak karartma.
   Desktop hover kuralları ve mevcut mobil açılma animasyonu korunur. */
@media (max-width: 768px) {
  html body .iz-reference-category-grid .cat-banner {
    position: relative !important;
    overflow: hidden !important;
  }

  /* Açılan seçenek dışındakiler yavaşça hafif kararır. */
  html body .iz-reference-category-grid .cat-banner::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, .22) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 6 !important;
    transition: opacity 1.1s ease !important;
  }

  html body .iz-reference-category-grid.has-open .cat-banner:not(.is-expanded)::after {
    opacity: 1 !important;
  }

  html body .iz-reference-category-grid .cat-banner.is-expanded::after {
    opacity: 0 !important;
  }

  /* Açılan kartın butonu görselin alt tarafına alınır. */
  html body .iz-reference-category-grid .cat-banner.is-expanded .cat-banner-product-btn {
    display: inline-flex !important;
    position: absolute !important;
    left: 50% !important;
    top: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    z-index: 12 !important;
    margin: 0 !important;
    transition: opacity 1.1s ease, transform 1.1s ease !important;
  }

  html body .iz-reference-category-grid .cat-banner:not(.is-expanded) .cat-banner-product-btn {
    display: none !important;
  }
}

/* V174 — Desktop header: native görsel sürükleme kapalı; tut-çek yalnızca header geçişidir. */
@media (min-width: 768px) {
  body #heroSlider.hero-slider {
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: pan-y !important;
  }
  body #heroSlider.hero-slider.is-dragging {
    cursor: grabbing !important;
  }
  body #heroSlider.hero-slider .hero-slide,
  body #heroSlider.hero-slider .hero-slide-media,
  body #heroSlider.hero-slider .hero-slide-media > img,
  body #heroSlider.hero-slider .hero-slide-media > video {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
  }
  body #heroSlider.hero-slider .hero-slide-media,
  body #heroSlider.hero-slider .hero-slide-media > img,
  body #heroSlider.hero-slider .hero-slide-media > video {
    pointer-events: none !important;
  }
}

/* V175 — Desktop header: the slide itself physically follows the pointer. */
@media (min-width: 768px) {
  body #heroSlider.hero-slider.is-dragging .hero-slide {
    transition: none !important;
    will-change: transform;
  }
  body #heroSlider.hero-slider.is-settling .hero-slide {
    transition: transform .32s cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform;
  }
}

/* v179 — During manual drag, keep the two neighboring headers rendered above
   the campaign slider's legacy opacity rules. They move as one continuous strip
   with the active header, so the slider background is never exposed between them. */
.hero-slider.is-dragging .hero-slide.drag-hidden,
.hero-slider.is-settling .hero-slide.drag-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
.hero-slider.is-dragging .hero-slide.drag-neighbor,
.hero-slider.is-settling .hero-slide.drag-neighbor {
  opacity: 1 !important;
  pointer-events: none !important;
}
.hero-slider.is-dragging .hero-slide.active,
.hero-slider.is-settling .hero-slide.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.blog-card-title { font-size: 1.05rem !important; }
.blog-card-desc { font-size: .9rem !important; }

/* Remove the old framed-card separators so the card content reaches the
   complete former frame area without an artificial boundary. */

/* Keep typography slightly larger while preserving the existing hierarchy. */

/* ================================================================
/* V214 — CARD TITLE / MOBILE CATEGORY HEADER / INLINE MOBILE FILTERS */
@media (min-width: 769px) {
  .product-card .product-name {
    height: 2.36rem !important;
    min-height: 2.36rem !important;
    max-height: 2.36rem !important;
    overflow: hidden !important;
  }
}

@media (max-width: 768px) {
  body.mobile-category-clean-header #catTitle,
  body.mobile-category-clean-header #catDesc { display: none !important; }
  body.mobile-category-clean-header .page-header { padding-top: 8px !important; padding-bottom: 8px !important; }
  body.mobile-category-clean-header .breadcrumb { margin-bottom: 0 !important; }
  body.mobile-inline-filters .mobile-filter-bar { display: none !important; }
  body.mobile-inline-filters .filter-sheet-overlay,
  body.mobile-inline-filters .filter-sheet .mobile-category-filter-list,
  body.mobile-inline-filters .filter-sheet > div:last-child { display: none !important; }
  body.mobile-inline-filters .filter-sheet > div[style*="padding:20px"] > p:first-child { display: none !important; }
  body.mobile-inline-filters .filter-sheet {
    position: static !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
    border: 0 !important; box-shadow: none !important; z-index: auto !important;
  }
  body.mobile-inline-filters .filter-sheet-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    width: 100% !important; padding: 0 0 12px !important; margin: 0 !important;
    border: 0 !important; background: transparent !important;
  }
  body.mobile-inline-filters #filterSheetClose { display: none !important; }
  body.mobile-inline-filters .filter-sheet-header h3 {
    display: block !important; margin: 0 !important; padding: 0 !important;
    font-size: 1rem !important; line-height: 1.2 !important; font-weight: 700 !important;
    color: var(--text) !important;
  }
  body.mobile-inline-filters .filter-sheet > div[style*="padding:20px"] { padding: 0 !important; }
  body.mobile-inline-filters .filter-sheet > div[style*="padding:20px"] > div[style*="border-top"] {
    margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important;
  }
  body.mobile-inline-filters .filter-sheet > div[style*="padding:20px"] > div[style*="border-top"] + div[style*="border-top"] {
    margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important;
  }
  body.mobile-inline-filters .filter-sheet .note-search-wrap {
    margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important;
  }
  body.mobile-inline-filters .filter-sheet .filter-option {
    display: inline-flex !important; width: auto !important; margin: 0 6px 8px 0 !important;
    padding: 7px 10px !important; border: 1px solid var(--border) !important; border-radius: 999px !important;
    background: var(--white) !important; font-size: .78rem !important;
  }
  body.mobile-inline-filters .filter-sheet .filter-option:has(input:checked) {
    background: var(--text) !important; color: var(--white) !important; border-color: var(--text) !important;
  }
  body.mobile-inline-filters .filter-sheet .note-search-wrap { width: 100% !important; margin-bottom: 10px !important; }
  body.mobile-inline-filters .filter-sheet .note-filter-list { display: none !important; }
  body.mobile-inline-filters .filter-sheet > div[style*="padding:20px"] > div[style*="border-top"] > p:first-child { display: none !important; }
  body.mobile-inline-filters .filter-sheet > div:last-child { display: none !important; }
  body.mobile-inline-filters .filter-sheet button#filterApply,
  body.mobile-inline-filters .filter-sheet button[onclick*="filter-sheet input"] { display: none !important; }
}

/* Mobile note search suggestions */
@media (max-width: 767px){
  .mobile-note-search{margin-top:0;}
  .mobile-note-search .note-search-wrap{cursor:text;}
  .mobile-note-search.is-open .note-search-wrap{border-color:var(--text) !important;}
  .mobile-note-search-results{
    display:none;
    margin-top:8px;
    padding:9px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--white);
  }
  .mobile-note-search.is-open .mobile-note-search-results{display:block;}
  .mobile-note-search .note-search-suggestions{
    display:none !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin:0;
  }
  .mobile-note-search .note-search-suggestions.is-visible{display:grid !important;}
  .mobile-note-search .note-suggestion{
    min-width:0;
    width:100%;
    min-height:34px;
    padding:7px 8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--white);
    color:var(--text);
    font:inherit;
    font-size:.74rem;
    line-height:1.15;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
  }
  .mobile-note-search .note-suggestion.is-selected,
  .mobile-note-search .note-suggestion[aria-pressed="true"]{
    background:var(--text);
    color:var(--white);
    border-color:var(--text);
  }

  .mobile-note-search .note-filter-list:empty{display:none;}
  .mobile-note-search.has-query .note-filter-list{display:none;}
}


/* Desktop must never show the mobile filter sheet/overlay. The desktop
   sidebar remains the only category filter UI at these widths. */
@media (min-width: 769px) {
  .filter-sheet,
  .filter-sheet-overlay {
    display: none !important;
  }
}


/* ─────────────────────────────────────────
   SELECTED FRAGRANCE SPOTLIGHT
   ───────────────────────────────────────── */
/* Selected fragrance carousel: image-only 9:16 visual frames. Product cards remain below. */
.fragrance-spotlight-kicker,
.fragrance-spotlight-visual-copy,
.fragrance-spotlight-glow { display: none !important; }
.fragrance-spotlight-visual { aspect-ratio: 9 / 16; }

/* Demo spotlight visuals — self-contained examples, independent of /img */
.fragrance-spotlight-visual img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.fragrance-spotlight-section {
  padding: 22px 0 54px;
  overflow: hidden;
}
.fragrance-spotlight-header {
  margin-bottom: 24px;
}
.fragrance-spotlight-carousel {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fragrance-spotlight-viewport {
  width: 100%;
  overflow: hidden;
  padding: 12px 0 28px;
}
.fragrance-spotlight-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(260px, 1fr));
  gap: 18px;
  align-items: start;
}
.fragrance-spotlight-slide {
  min-width: 0;
  transform: translateY(34px) scale(.93);
  transform-origin: center top;
  opacity: .66;
  filter: saturate(.88);
  transition: transform .42s ease, opacity .42s ease, filter .42s ease;
}
.fragrance-spotlight-slide[data-position="0"] {
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: none;
  z-index: 3;
}
.fragrance-spotlight-visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  min-height: 520px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.82), transparent 34%),
    linear-gradient(145deg, var(--spot-c), var(--spot-a) 48%, #fff 150%);
  box-shadow: 0 18px 46px rgba(36,31,25,.12);
  isolation: isolate;
}
.fragrance-spotlight-slide[data-position="0"] .fragrance-spotlight-visual {
  box-shadow: 0 26px 58px rgba(36,31,25,.18);
}
.fragrance-spotlight-glow {
  position: absolute;
  width: 76%;
  height: 40%;
  left: 12%;
  top: 14%;
  border-radius: 50%;
  background: var(--spot-b);
  opacity: .12;
  filter: blur(34px);
}
.fragrance-spotlight-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 46%, rgba(25,20,15,.08));
  pointer-events: none;
}
.fragrance-spotlight-kicker {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(40,35,30,.68);
}
.fragrance-spotlight-visual img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 64%;
  height: 58%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 28px 24px rgba(25,20,15,.16));
}
.fragrance-spotlight-visual-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: grid;
  gap: 5px;
}
.fragrance-spotlight-visual-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1;
  color: #27231f;
}
.fragrance-spotlight-visual-copy span {
  font-size: .67rem;
  line-height: 1.35;
  color: rgba(39,35,31,.72);
}
.fragrance-spotlight-card {
  margin-top: 14px;
}
.fragrance-spotlight-card .product-card {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}
.fragrance-spotlight-card .product-img-wrap {
  aspect-ratio: 1 / .95;
}
.fragrance-spotlight-arrow {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #ddd7ce;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.fragrance-spotlight-arrow:hover {
  transform: translateY(-1px);
  background: var(--text);
  color: #fff;
}

@media (min-width: 1200px) {
  .fragrance-spotlight-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fragrance-spotlight-slide {
    display: none;
  }
  .fragrance-spotlight-slide[data-position="-1"],
  .fragrance-spotlight-slide[data-position="0"],
  .fragrance-spotlight-slide[data-position="1"] {
    display: block;
  }
  .fragrance-spotlight-slide[data-position="-1"],
  .fragrance-spotlight-slide[data-position="1"] {
    transform: translateY(58px) scale(.88);
    opacity: .72;
  }
  .fragrance-spotlight-slide[data-position="0"] .fragrance-spotlight-visual {
    min-height: 690px;
  }
  .fragrance-spotlight-slide[data-position="-1"] .fragrance-spotlight-visual,
  .fragrance-spotlight-slide[data-position="1"] .fragrance-spotlight-visual {
    min-height: 520px;
  }
}

@media (max-width: 1199px) and (min-width: 769px) {
  .fragrance-spotlight-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fragrance-spotlight-slide { display: none; }
  .fragrance-spotlight-slide[data-position="-1"],
  .fragrance-spotlight-slide[data-position="0"],
  .fragrance-spotlight-slide[data-position="1"] { display: block; }
  .fragrance-spotlight-slide[data-position="0"] .fragrance-spotlight-visual { min-height: 620px; }
  .fragrance-spotlight-slide[data-position="-1"] .fragrance-spotlight-visual,
  .fragrance-spotlight-slide[data-position="1"] .fragrance-spotlight-visual { min-height: 470px; }
}

@media (max-width: 768px) {
  .fragrance-spotlight-section { padding: 18px 0 40px; }
  .fragrance-spotlight-header { padding-inline: 4px; }
  .fragrance-spotlight-carousel { gap: 0; }
  .fragrance-spotlight-arrow { display: none; }
  .fragrance-spotlight-viewport { padding: 8px 0 22px; overflow: hidden; }
  .fragrance-spotlight-track {
    display: flex;
    width: 100%;
    gap: 16px;
    align-items: flex-start;
    transition: transform .42s ease;
    will-change: transform;
  }
  .fragrance-spotlight-slide {
    flex: 0 0 calc(100% - 46px);
    display: block !important;
    transform: translateY(22px) scale(.94);
    opacity: .58;
  }
  .fragrance-spotlight-slide[data-position="0"] {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .fragrance-spotlight-slide[data-position="0"] .fragrance-spotlight-visual {
    min-height: 0;
    aspect-ratio: 9 / 16;
  }
}


/* V180-FIX — standalone selected fragrance examples */
.fragrance-spotlight-section{padding:34px 0 58px;overflow:hidden;}
.fragrance-spotlight-carousel{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:12px;}
.fragrance-spotlight-viewport{min-width:0;overflow:hidden;padding:18px 0 28px;}
.fragrance-spotlight-track{display:flex;gap:18px;align-items:flex-start;transition:transform .42s ease;will-change:transform;}
.fragrance-spotlight-slide{display:none;flex:0 0 calc((100% - 36px)/3);min-width:0;transform:translateY(38px) scale(.9);opacity:.62;filter:saturate(.88);transition:transform .42s ease,opacity .42s ease,filter .42s ease;}
.fragrance-spotlight-slide[data-position="-1"],.fragrance-spotlight-slide[data-position="0"],.fragrance-spotlight-slide[data-position="1"]{display:block;}
.fragrance-spotlight-slide[data-position="-1"],.fragrance-spotlight-slide[data-position="1"]{transform:translateY(52px) scale(.88);opacity:.7;}
.fragrance-spotlight-slide[data-position="0"]{transform:translateY(0) scale(1);opacity:1;filter:none;z-index:2;}
.fragrance-spotlight-visual{display:block;position:relative;width:100%;aspect-ratio:9/16;min-height:0;border-radius:22px;overflow:hidden;background:#eee;box-shadow:0 16px 38px rgba(30,25,20,.12);text-decoration:none;}
.fragrance-spotlight-slide[data-position="0"] .fragrance-spotlight-visual{box-shadow:0 24px 52px rgba(30,25,20,.18);}
.fragrance-spotlight-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important;display:block;}
.fragrance-spotlight-card{margin-top:12px;}
.spotlight-demo-card{display:flex;flex-direction:column;gap:5px;text-decoration:none;background:#fff;border:1px solid #e1dbd2;border-radius:14px;padding:14px 15px;box-shadow:0 8px 24px rgba(28,24,20,.07);color:var(--text);}
.spotlight-demo-card strong{font-family:Georgia,"Times New Roman",serif;font-size:1.02rem;line-height:1.1;font-weight:600;}
.spotlight-demo-card span{font-size:.74rem;color:#7d756c;line-height:1.35;}
.spotlight-demo-card b{font-size:.9rem;font-weight:700;margin-top:2px;}
.fragrance-spotlight-arrow{display:flex!important;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #ddd7ce;border-radius:50%;background:#fff;color:var(--text);font-size:1.8rem;line-height:1;cursor:pointer;z-index:5;box-shadow:0 8px 22px rgba(0,0,0,.08);}
@media (min-width:1200px){.fragrance-spotlight-slide[data-position="0"] .fragrance-spotlight-visual{min-height:690px}.fragrance-spotlight-slide[data-position="-1"] .fragrance-spotlight-visual,.fragrance-spotlight-slide[data-position="1"] .fragrance-spotlight-visual{min-height:520px}}
@media (max-width:1199px) and (min-width:769px){.fragrance-spotlight-slide[data-position="0"] .fragrance-spotlight-visual{min-height:610px}.fragrance-spotlight-slide[data-position="-1"] .fragrance-spotlight-visual,.fragrance-spotlight-slide[data-position="1"] .fragrance-spotlight-visual{min-height:470px}}
@media (max-width:768px){.fragrance-spotlight-carousel{display:block}.fragrance-spotlight-arrow{display:none!important}.fragrance-spotlight-viewport{padding:8px 0 24px;overflow:hidden}.fragrance-spotlight-track{gap:16px;touch-action:pan-y;cursor:grab}.fragrance-spotlight-track.is-dragging{cursor:grabbing}.fragrance-spotlight-slide{display:block!important;flex:0 0 calc(100% - 52px);transform:translateY(22px) scale(.94);opacity:.58}.fragrance-spotlight-slide[data-position="0"]{transform:translateY(0) scale(1);opacity:1}.fragrance-spotlight-slide[data-position="0"] .fragrance-spotlight-visual{min-height:0}}

/* V184 — mobile fragrance spotlight: reliable centering + smaller footprint */
@media (max-width:768px){
  .fragrance-spotlight-section{padding:16px 0 30px;}
  .fragrance-spotlight-viewport{padding:4px 0 18px;}
  .fragrance-spotlight-track{gap:14px;}
  .fragrance-spotlight-slide{flex:0 0 min(68vw, 300px);transform:translateY(14px) scale(.92);}
  .fragrance-spotlight-slide[data-position="0"]{transform:translateY(0) scale(1);}
  .fragrance-spotlight-slide[data-position="0"] .fragrance-spotlight-visual{min-height:0;}
  .fragrance-spotlight-card{margin-top:9px;}
  .spotlight-demo-card{padding:11px 12px;border-radius:12px;gap:4px;}
  .spotlight-demo-card strong{font-size:.94rem;}
  .spotlight-demo-card span{font-size:.68rem;}
  .spotlight-demo-card b{font-size:.82rem;}
}

/* ================================================================


/* ================================================================
   CANONICAL PRODUCT CARD SYSTEM
   Reference: homepage "Yeni Ürünler" card.
   All product cards across the site intentionally share this exact
   visual structure. Section-specific card overrides must not be added.
   ================================================================ */
.product-card,
.product-grid > .product-card,
.reco-grid > .product-card,
.cs-grid > .product-card,
.favs-grid > .product-card,
.homepage-product-track > .product-card,
.product-carousel-track > .product-card,
.fragrance-spotlight-card .product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 450px !important;
  min-height: 450px !important;
  max-height: 450px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #ddd8d0 !important;
  outline: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.product-card .product-wish {
  display: none !important;
}

.product-card .best-seller-fire {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid #ddd8d0 !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.product-card > .product-card-inner {
  display: block !important;
  width: 100% !important;
  height: 56% !important;
  flex: 0 0 56% !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #f5f2ec !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.product-card .product-img-wrap,
.product-card .product-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  background: #f5f2ec !important;
}

.product-card .product-img-wrap {
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.product-card .product-img-wrap img {
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform .28s ease !important;
}

.product-card:hover .product-img-wrap img { transform: scale(1.01) !important; }

.product-card .product-badges {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.product-card > .product-info {
  width: 100% !important;
  min-width: 0 !important;
  height: 44% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 13px 14px 14px !important;
  margin: 0 !important;
  background: #fff !important;
  text-align: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.product-card .product-info > a {
  width: 100% !important;
  min-width: 0 !important;
  order: 1 !important;
  text-align: center !important;
}

.product-card .product-name {
  display: -webkit-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2.5em !important;
  max-height: 2.5em !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #171615 !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

.product-card .product-category-volume {
  order: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 18px !important;
  max-height: 20px !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: #77736d !important;
  font-size: .68rem !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.product-card .pc-tags,
.product-card .pc-tags.new-arrival-info {
  order: 3 !important;
  width: 100% !important;
  min-height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 8px 0 0 !important;
  overflow: hidden !important;
}

.product-card .pc-tags > * {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 50% !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: .62rem !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  border: 1px solid #d8d2c9 !important;
  background: #fff !important;
}

.product-card .pc-tag-concentration {
  background: #f5f3ef !important;
  color: #262421 !important;
}
.product-card .pc-tag-intensity-light {
  background: #edf4ed !important;
  color: #437348 !important;
}
.product-card .pc-tag-intensity-medium {
  background: #f5f1df !important;
  color: #7a6f26 !important;
}
.product-card .pc-tag-intensity-strong {
  background: #f4e7e7 !important;
  color: #8b3c3c !important;
}
.product-card .pc-tag-ghost { display: none !important; }

.product-card .product-pricing {
  order: 4 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 24px !important;
  max-height: 30px !important;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.product-card .product-pricing::before { display: none !important; }
.product-card .product-price { color: #111 !important; font-size: .94rem !important; font-weight: 700 !important; letter-spacing: .01em !important; }
.product-card .product-price-original { color: #9b968e !important; font-size: .68rem !important; }
.product-card .product-discount { color: #8b837a !important; font-size: .64rem !important; }

.product-card .product-quick {
  order: 5 !important;
  width: min(76%, 208px) !important;
  min-width: 0 !important;
  max-width: 208px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 12px auto 0 !important;
  padding: 0 16px !important;
  border: 1px solid #171615 !important;
  border-radius: 0 !important;
  background: #171615 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 0 !important;
  transform: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
  box-sizing: border-box !important;
}

.product-card .product-quick::after {
  content: "SEPETE EKLE" !important;
  font-size: .67rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  line-height: 1 !important;
}
.product-card .product-quick:hover,
.product-card .product-quick:focus-visible {
  background: #fff !important;
  color: #171615 !important;
  border-color: #171615 !important;
  transform: none !important;
  box-shadow: none !important;
}
.product-card .product-quick.in-cart,
.product-card .product-quick.in-cart:hover,
.product-card .product-quick.in-cart:focus-visible {
  background: #2f8f57 !important;
  color: #fff !important;
  border-color: #2f8f57 !important;
}
.product-card .product-quick.in-cart::after { content: "SEPETTE ✓" !important; letter-spacing: .12em !important; }
.product-card .product-quick.disabled,
.product-card .product-quick.disabled:hover,
.product-card .product-quick.disabled:focus-visible {
  background: #bdbdbd !important;
  color: #fff !important;
  border-color: #bdbdbd !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
.product-card .product-quick.disabled::after { content: "STOK YOK" !important; letter-spacing: .12em !important; }

@media (max-width: 768px) {
  .product-card,
  .product-grid > .product-card,
  .reco-grid > .product-card,
  .cs-grid > .product-card,
  .favs-grid > .product-card,
  .homepage-product-track > .product-card,
  .product-carousel-track > .product-card,
  .fragrance-spotlight-card .product-card {
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
  }

  .product-card > .product-card-inner {
    height: auto !important;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    max-height: none !important;
  }

  .product-card .product-img-wrap,
  .product-card .product-img-wrap img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .product-card > .product-info {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 9px 9px 10px !important;
  }

  .product-card .product-name {
    min-height: 2.32em !important;
    max-height: 2.32em !important;
    font-size: .79rem !important;
    line-height: 1.16 !important;
    letter-spacing: .01em !important;
  }

  .product-card .product-category-volume {
    margin-top: 4px !important;
    font-size: .60rem !important;
    max-height: 20px !important;
    min-height: 17px !important;
  }

  .product-card .pc-tags { gap: 4px !important; margin-top: 6px !important; }
  .product-card .pc-tags > * { font-size: .60rem !important; padding: 0 5px !important; }
  .product-card .product-pricing { margin-top: 7px !important; min-height: 22px !important; max-height: 26px !important; }
  .product-card .product-price { font-size: .82rem !important; }
  .product-card .product-price-original { font-size: .62rem !important; }
  .product-card .product-discount { font-size: .58rem !important; }
  .product-card .product-quick {
    width: 84% !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin-top: 8px !important;
    padding: 0 8px !important;
  }
  .product-card .product-quick::after { font-size: .58rem !important; letter-spacing: .14em !important; }
}

/* V195 — Homepage metadata cards use the same colored framed treatment as all other product-card metadata. */
.product-card .pc-tags.new-arrival-info .new-arrival-info-item {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 50% !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: .62rem !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  border: 1px solid #d8d2c9 !important;
  background: #fff !important;
}
.product-card .pc-tags.new-arrival-info .new-arrival-info-item svg {
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px !important;
  fill: currentColor !important;
}
.product-card .pc-tags.new-arrival-info .new-arrival-concentration {
  background: #f5f3ef !important;
  border-color: #d8d2c9 !important;
  color: #262421 !important;
}
.product-card .pc-tags.new-arrival-info .new-arrival-intensity.is-light {
  background: #edf4ed !important;
  border-color: #c7dcc8 !important;
  color: #437348 !important;
}
.product-card .pc-tags.new-arrival-info .new-arrival-intensity.is-medium {
  background: #f5f1df !important;
  border-color: #ddd4a5 !important;
  color: #7a6f26 !important;
}
.product-card .pc-tags.new-arrival-info .new-arrival-intensity.is-strong {
  background: #f4e7e7 !important;
  border-color: #dfc0c0 !important;
  color: #8b3c3c !important;
}
@media (max-width: 768px) {
  .product-card .pc-tags.new-arrival-info .new-arrival-info-item {
    font-size: .60rem !important;
    padding: 0 5px !important;
  }
}

.cart-item-link { display:block; color:inherit; text-decoration:none; min-width:0; }
.cart-item-link:hover .cart-item-name { text-decoration:underline; text-underline-offset:3px; }
.cart-item[data-product-url]:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

/* Mobile tap feedback: remove browser's default blue highlight. */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    -webkit-tap-highlight-color: transparent !important;
  }
  a, button, [role="button"], input, select, textarea, summary {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Desktop: suppress the browser's mouse-focus blue flash while preserving
   visible keyboard focus via :focus-visible. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}


/* Category pages: keep only the breadcrumb line; remove the large page title
   and description block. */
body:has(.category-content) .page-header {
  padding: 14px 0 10px !important;
  background: transparent !important;
  border-bottom: 0 !important;
}
body:has(.category-content) .page-header #catTitle,
body:has(.category-content) .page-header #catDesc {
  display: none !important;
}
body:has(.category-content) .page-header .breadcrumb {
  margin-bottom: 0 !important;
}

/* ── MOBILE CATEGORY FILTER QUICK ROWS ── */
.mobile-filter-quick-section,
.mobile-filter-notes-section,
.mobile-filter-categories-section {
  margin-bottom: 18px;
}
.mobile-filter-section-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.mobile-filter-three-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}
.mobile-filter-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 6px 4px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-sec);
  font-size: .74rem;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.mobile-filter-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mobile-filter-chip:has(input:checked) {
  border-color: var(--text);
  background: var(--text);
  color: var(--white);
}
.mobile-filter-notes-section {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.mobile-filter-categories-section {
  padding-top: 2px;
}


/* v196 — Tester seçimleri: açıklamanın altında 3 sütun */
.tester-selection{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.tester-selection-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.tester-selection-head h4{margin:0;font-size:.95rem;font-weight:700;}
.tester-selection-count{font-size:.76rem;font-weight:700;color:var(--text-muted);white-space:nowrap;}
.tester-selection-help{margin:0 0 12px;font-size:.78rem;color:var(--text-muted);}
.tester-gender-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;}
.tester-gender-group{min-width:0;}
.tester-gender-title{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.tester-gender-list{display:grid;gap:7px;max-height:340px;overflow:auto;padding-right:2px;}
.tester-code-option{display:flex;align-items:flex-start;gap:7px;font-size:.8rem;line-height:1.35;cursor:pointer;padding:4px 5px;border:1px solid transparent;border-radius:8px;}
.tester-code-option:hover{background:var(--bg-soft,#f6f5f2);}
.tester-code-option input{margin-top:2px;accent-color:var(--accent);}
.tester-code-label{display:block;min-width:0;overflow:visible;white-space:normal;overflow-wrap:anywhere;}
.tester-code-name{display:inline!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important;}
.tester-code-name{color:var(--text-sec);}
.tester-selection-summary{margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-soft,#f6f5f2);}
.tester-selected-codes{font-weight:800;word-break:break-word;letter-spacing:.02em;}
.tester-summary-actions{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap;}
.tester-summary-actions button{border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:7px 10px;cursor:pointer;font-size:.75rem;font-weight:700;}
@media (max-width: 700px){
  .tester-gender-columns{grid-template-columns:1fr;gap:12px;}
  .tester-gender-list{max-height:220px;}
}

/* v196 — Arama: tam ekran overlay yerine header'ı kaplayan geçiş kutusu */
.search-overlay{position:fixed;inset:0 0 auto 0;height:72px;display:none;align-items:center;background:var(--bg);z-index:10001;border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.06);padding:0 16px;}
.search-overlay.open{display:flex;}
.search-overlay .search-bar{width:100%;max-width:none;margin:0;display:flex;align-items:center;gap:10px;}
.search-overlay .search-input{width:100%;height:44px;border:1px solid var(--border);border-radius:10px;background:var(--bg-soft,#f6f5f2);padding:0 12px;font-size:1rem;}
.search-overlay .search-results{position:absolute;left:0;right:0;top:72px;max-height:calc(100vh - 72px);overflow:auto;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 16px 30px rgba(0,0,0,.08);padding:12px 16px 24px;}
body.iz-inline-search-open .site-header .header-nav{visibility:hidden;}
body.iz-inline-search-open .site-header .header-actions > *:not([data-search-open]){visibility:hidden;}
@media (max-width: 900px){
  .search-overlay{height:60px;padding:0 10px;}
  .search-overlay .search-results{top:60px;max-height:calc(100vh - 60px);}
  body.iz-inline-search-open .mobile-header .mobile-header-logo{visibility:hidden;}
}

/* v196 — Koku ailesi/kalıcılık/ kullanım bilgisi vurgusu */
.pd-family,.pd-longevity,.pd-usage{font-weight:800 !important;}


/* v199 — Reliable top-of-page header search: opaque panel, scoped to the actual header. */
.header-inline-search{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  min-height:var(--header-h,68px) !important;
  z-index:3000 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:0 !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
  background:var(--white,#fff) !important;
  border:1px solid var(--border,#e4e1da) !important;
  border-radius:0 !important;
  box-shadow:0 10px 28px rgba(0,0,0,.12) !important;
  overflow:visible !important;
  animation:izHeaderSearchDrop .34s cubic-bezier(.22,.61,.36,1) both !important;
}
.header-inline-search .search-bar{
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}
.header-inline-search .search-input{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  height:44px !important;
  background:#fff !important;
  border:1px solid var(--border-mid,#cfc9c0) !important;
  color:var(--text,#1a1a18) !important;
  box-shadow:none !important;
}
.header-inline-search .search-results{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:calc(var(--header-h,68px)) !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:12px 16px 20px !important;
  background:#fff !important;
  border:1px solid var(--border,#e4e1da) !important;
  border-top:0 !important;
  box-shadow:0 16px 30px rgba(0,0,0,.13) !important;
  max-height:min(72vh,620px) !important;
  overflow:auto !important;
  box-sizing:border-box !important;
  z-index:2999 !important;
}
.header-inline-search .search-result-item{background:#fff !important; color:var(--text,#1a1a18) !important;}
.header-inline-search .search-empty{background:#fff !important; color:var(--text-sec,#777) !important;}
@keyframes izHeaderSearchDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:900px){
  .mobile-header{position:relative !important;}
  .mobile-header .header-inline-search{
    min-height:60px !important;
    padding:0 10px !important;
    animation:izHeaderSearchSlide .34s cubic-bezier(.22,.61,.36,1) both !important;
  }
  .mobile-header .header-inline-search .search-input{height:40px !important;font-size:.95rem !important;}
  .mobile-header .header-inline-search .search-results{top:60px !important;max-height:calc(100vh - 60px) !important;}
  body.iz-mobile-inline-search-open .mobile-header > *:not(.header-inline-search){visibility:hidden !important;}
  body.iz-mobile-inline-search-open .mobile-header{z-index:3001 !important;}
  @keyframes izHeaderSearchSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
}

/* v199 — Checkout page: contain every field and summary within viewport on phones. */
.checkout-layout{width:100%;max-width:100%;box-sizing:border-box;}
.checkout-layout > *, .checkout-form-card, .order-summary-card{min-width:0;max-width:100%;box-sizing:border-box;}
.checkout-form-card,.order-summary-card{overflow:hidden;}
.form-row,.form-field,.form-input{min-width:0;max-width:100%;box-sizing:border-box;}
.odeme-cart-row{min-width:0;}
.odeme-cart-name{white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.odeme-cart-price{flex:0 0 auto;white-space:nowrap;}
@media(max-width:768px){
  .container{width:100%;max-width:100%;box-sizing:border-box;padding-left:12px;padding-right:12px;}
  .checkout-layout{grid-template-columns:minmax(0,1fr) !important;gap:14px !important;padding:18px 0 36px !important;}
  .checkout-form-card{padding:16px !important;border-radius:10px !important;}
  .order-summary-card{position:static !important;width:100% !important;padding:16px !important;border-radius:10px !important;}
  .form-row{grid-template-columns:minmax(0,1fr) !important;gap:0 !important;}
  .form-input{font-size:16px !important;}
  .pay-btn{width:100% !important;max-width:100% !important;box-sizing:border-box !important;}
  .odeme-cart-row{gap:8px !important;}
  .odeme-cart-img{width:48px !important;height:48px !important;}
  .odeme-cart-info{min-width:0 !important;overflow:hidden !important;}
  .odeme-cart-name{font-size:.82rem !important;}
  .odeme-cart-meta{font-size:.70rem !important;}
  .odeme-cart-price{font-size:.80rem !important;}
}

/* v200 mobile header cleanup + compact detail volume */
@media (max-width: 768px){
  html{margin-top:0 !important;}
  body.admin-bar{margin-top:0 !important;}
  #wpadminbar{display:none !important;}
}

/* V202 — remove the extra mobile gap between campaign ticker and header. */
@media (max-width: 1024px) {
  html body .campaign-marquee {
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .mobile-header {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
  }
  html body.admin-bar .mobile-header {
    top: 0 !important;
    margin-top: 0 !important;
  }
  html body {
    padding-top: 0 !important;
  }
}


/* ═══ V207 — FINAL HEADER / TOP-GAP / MOBILE COMPACT SEARCH FIX ═══ */
/* Canonical front-end stylesheet. Historical rules are kept in cascade order here
   so the former split CSS files no longer compete on the live site. */
html, body, html.admin-bar, html.wp-toolbar, body.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#wpadminbar { display: none !important; }

/* Keep the campaign ticker in normal document flow. The main header then
   sticks to the viewport top only after the ticker has scrolled away. */
html body .campaign-marquee {
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
}
html body .site-header,
html body .mobile-header {
  position: sticky !important;
  top: 0 !important;
}

@media (min-width: 1025px) {
  html body .site-header:not(.compact) { top: 0 !important; }
}

@media (max-width: 1024px) {
  html body .mobile-header,
  html body .mobile-header:not(.compact),
  html body .mobile-header.compact {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* The search element is created by main.js after the mobile logo. It must be
     visible only in compact state, centered between menu and cart. */
  html body .mobile-header.compact .mobile-compact-search {
    display: flex !important;
    position: absolute !important;
    left: 42px !important;
    right: 42px !important;
    top: 50% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid #d9d4cc !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
    z-index: 1300 !important;
  }
  html body .mobile-header.compact .mobile-compact-search .mobile-compact-input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .mobile-header.compact .mobile-actions > [data-search-open] {
    display: none !important;
  }
  html body .mobile-header.compact #menuBtn,
  html body .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    z-index: 1301 !important;
    visibility: visible !important;
  }
  html body .mobile-header.compact .mobile-header-logo {
    visibility: hidden !important;
  }
  html body .mobile-header.compact .compact-search-results-mobile {
    display: none;
    position: absolute !important;
    left: -1px !important;
    right: -1px !important;
    top: calc(100% + 4px) !important;
    max-height: min(60vh, 380px) !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid #d9d4cc !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
    z-index: 1400 !important;
  }
  html body .mobile-header.compact .compact-search-results-mobile.show {
    display: block !important;
  }
}
/* V209 — Mobile compact scroll search narrowed and kept clear of menu/cart icons. */
@media (max-width: 1024px) {
  .mobile-header.compact .mobile-compact-search {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 150px !important;
    max-width: 150px !important;
    min-width: 0 !important;
    flex: 0 0 150px !important;
    margin: 0 !important;
  }
  .mobile-header.compact #menuBtn {
    left: 6px !important;
  }
  .mobile-header.compact .mobile-actions {
    right: 6px !important;
  }
}
@media (max-width: 360px) {
  .mobile-header.compact .mobile-compact-search {
    width: 135px !important;
    max-width: 135px !important;
    flex-basis: 135px !important;
  }
}

/* V210 — FINAL scroll header stabilization
   Mobile: narrow search, viewport-centered results, no layout/scroll jitter.
   Desktop: compact logo stays locked to the same position while scrolling. */
@media (max-width: 1024px) {
  /* Keep the compact control out of the header's flex/grid calculations. */
  html body .mobile-header.compact .mobile-compact-search {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: 26px !important;
    width: 132px !important;
    max-width: 132px !important;
    min-width: 132px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    transform: translate(-50%, -50%) !important;
    flex: none !important;
    box-sizing: border-box !important;
    contain: layout paint !important;
    touch-action: manipulation !important;
    overflow: visible !important;
  }

  /* Search results are centered against the viewport, not the narrow pill. */
  html body .mobile-header.compact .mobile-compact-search .compact-search-results-mobile {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: 48px !important;
    width: min(320px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(55vh, 360px) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    overflow-anchor: none !important;
    touch-action: pan-y !important;
  }

  html body .mobile-header.compact .mobile-compact-search .mobile-compact-input {
    font-size: 16px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    touch-action: manipulation !important;
    -webkit-appearance: none !important;
  }

  html body .mobile-header.compact .mobile-actions {
    right: 8px !important;
    transform: translateY(-50%) !important;
  }
  html body .mobile-header.compact #menuBtn {
    left: 8px !important;
    transform: translateY(-50%) !important;
  }

  /* Do not let the invisible/original logo participate in compact layout. */
  html body .mobile-header.compact .mobile-header-logo {
    display: none !important;
  }
}

@media (max-width: 360px) {
  html body .mobile-header.compact .mobile-compact-search {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }
}

@media (min-width: 1025px) {
  /* Freeze the compact desktop logo. Earlier rules changed position/transform
     during the scroll transition, which made the logo visibly jump. */
  html body .site-header.compact {
    height: 56px !important;
    min-height: 56px !important;
  }
  html body .site-header.compact .header-inner {
    position: relative !important;
    height: 56px !important;
    min-height: 56px !important;
    align-items: center !important;
    transform: none !important;
  }
  html body .site-header.compact .header-logo,
  html body .site-header.compact .header-logo:hover,
  html body .site-header.compact .header-logo:focus {
    position: absolute !important;
    left: 22px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    scale: 1 !important;
    rotate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1400 !important;
  }
  html body .site-header.compact .header-logo .logo-line-top,
  html body .site-header.compact .header-logo .logo-line-bottom {
    transform: none !important;
    transition: none !important;
  }
}


/* V211 — Mobile compact-search result portal + cart vertical alignment
   Results are moved to <body> by main.js, so they stay visible while the page
   is scrolled and are centered against the viewport. The compact cart uses the
   same fixed center line as the menu icon. */
@media (max-width: 1024px) {
  html body #mobileCompactResults.compact-search-results-mobile {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: 62px !important;
    width: min(320px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(55vh, 360px) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 2005 !important;
  }

  html body #mobileCompactResults.compact-search-results-mobile.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Keep menu + cart on the exact same vertical center line. */
  html body .mobile-header.compact #menuBtn {
    position: fixed !important;
    left: 8px !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  html body .mobile-header.compact .mobile-actions {
    position: fixed !important;
    left: auto !important;
    right: 8px !important;
    top: calc(var(--header-h) / 2) !important;
    bottom: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    z-index: 2006 !important;
  }

  html body .mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  html body .mobile-header.compact .mobile-actions a[href="sepet.html"] {
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    transform: none !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* V216 — Mobile product listing width/height balance. */
@media (max-width: 768px) {
  body:not(.homepage) .container { padding-left: var(--iz-mobile-category-padding,8px) !important; padding-right: var(--iz-mobile-category-padding,8px) !important; }
  body:not(.homepage) .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--iz-mobile-grid-gap,6px) !important; width: 100% !important; }
  body:not(.homepage) .product-card { width: 100% !important; min-width: 0 !important; }
  body:not(.homepage) .product-card > .product-card-inner,
  body:not(.homepage) .product-card .product-img-wrap,
  body:not(.homepage) .product-card .product-img-wrap img { aspect-ratio: auto !important; }
}


/* V223 — Oda Kokuları özel ürün seçim alanı */
.oda-choice-panel{margin:18px 0 20px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface,#fff)}
.oda-choice-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.oda-choice-head h4{margin:0;font-size:.98rem}.oda-choice-count{font-size:.78rem;color:var(--text-muted)}
.oda-choice-help{margin:0 0 10px;color:var(--text-sec);font-size:.84rem}
.oda-choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:330px;overflow:auto}
.oda-choice-item{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid var(--border);border-radius:8px;font-size:.83rem;cursor:pointer;background:var(--surface,#fff)}
.oda-choice-item input{margin:0}.oda-choice-item:has(input:checked){border-color:var(--accent);background:rgba(0,0,0,.025)}
.oda-choice-empty{padding:10px;color:var(--text-muted);font-size:.84rem}
@media(max-width:768px){.oda-choice-list{grid-template-columns:1fr}.oda-choice-panel{padding:13px;border-radius:10px}}

/* V227 — Oda kokusu seçim listesi */
.oda-choice-subtitle{grid-column:1/-1;font-weight:700;margin:14px 0 4px;padding-top:10px;border-top:1px solid #ddd6ce;}
.oda-choice-copy{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.25;}
.oda-choice-copy b{font-size:13px;font-weight:700;}
.oda-choice-copy em{font-style:normal;font-weight:700;white-space:nowrap;}
.oda-choice-copy small{font-size:11px;color:#777;line-height:1.3;}
@media (max-width:600px){.oda-choice-subtitle{font-size:13px}.oda-choice-copy b{font-size:12px}.oda-choice-copy small{font-size:10.5px}}

/* V239 — Desktop four-category menu: restore reliable click targets.
   The legacy category-banner CSS contains several overlapping overlay/stacking
   layers. Keep the visual layers non-interactive and put the anchor itself
   above them so desktop clicks always reach the destination. */
@media (min-width: 769px) {
  html body .iz-reference-category-grid {
    position: relative !important;
    z-index: 30 !important;
  }
  html body .iz-reference-category-grid .cat-banner {
    position: relative !important;
    z-index: 31 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  html body .iz-reference-category-grid .cat-banner .cat-reference-bg,
  html body .iz-reference-category-grid .cat-banner .cat-banner-overlay,
  html body .iz-reference-category-grid .cat-banner .cat-banner-content,
  html body .iz-reference-category-grid .cat-banner::before,
  html body .iz-reference-category-grid .cat-banner::after {
    pointer-events: none !important;
  }
  html body .iz-reference-category-grid .cat-banner-overlay {
    display: none !important;
  }
  html body .iz-reference-category-grid .cat-banner-content {
    display: none !important;
  }
}

/* V241 — Desktop homepage round category shortcuts must remain clickable after dynamic product rendering.
   Put the shortcut section in its own stacking context and above subsequent carousel/content layers. */
@media (min-width: 769px) {
  body.homepage .category-circles-section {
    position: relative !important;
    z-index: 200 !important;
    isolation: isolate !important;
  }
  body.homepage .category-circles-carousel,
  body.homepage .category-circles-viewport,
  body.homepage .category-circles-track {
    position: relative !important;
    z-index: 201 !important;
  }
  body.homepage .category-circles-track .category-circle {
    position: relative !important;
    z-index: 202 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  body.homepage .category-circles-track .category-circle-img,
  body.homepage .category-circles-track .category-circle-img img,
  body.homepage .category-circles-track .category-circle-name {
    pointer-events: none !important;
  }
  body.homepage .category-circles-section .category-circles-arrow { z-index: 203 !important; }
}

/* V283 — Homepage Çok Satanlar tester cards use the same two empty metadata
   slots as every other tester card. Keep the space and outlines visible even
   when the carousel/grid applies its own card rules. */
body.homepage #bestSellersGrid .product-card.tester-product .pc-tags.pc-tags-empty {
  display:flex !important;
  min-height:20px !important;
  height:20px !important;
  width:100% !important;
  margin:8px 0 0 !important;
  gap:5px !important;
  align-items:center !important;
  justify-content:center !important;
  visibility:visible !important;
}
body.homepage #bestSellersGrid .product-card.tester-product .pc-tags.pc-tags-empty .pc-tag {
  display:inline-flex !important;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:20px !important;
  min-height:20px !important;
  padding:0 !important;
  border:1px solid #d8d2c9 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:1 !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
@media(max-width:768px){
  body.homepage #bestSellersGrid .product-card.tester-product .pc-tags.pc-tags-empty{
    min-height:20px !important; height:20px !important; margin:6px 0 0 !important; gap:4px !important;
  }
  body.homepage #bestSellersGrid .product-card.tester-product .pc-tags.pc-tags-empty .pc-tag{
    width:38px !important; min-width:38px !important; max-width:38px !important; height:17px !important; min-height:17px !important;
  }
}

/* V282 — Tester cards keep the same two metadata slots as normal cards,
   but the boxes stay intentionally blank. */
.product-card.tester-product .pc-tags.pc-tags-empty {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  min-height: 20px !important;
  height: 20px !important;
  margin-top: 8px !important;
  visibility: visible !important;
  overflow: hidden !important;
}
.product-card.tester-product .pc-tags.pc-tags-empty .pc-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 18px !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  color: transparent !important;
  font-size: .60rem !important;
  line-height: 1 !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
@media (max-width:768px) {
  .product-card.tester-product .pc-tags.pc-tags-empty {
    min-height: 20px !important;
    height: 20px !important;
    margin-top: 6px !important;
  }
  .product-card.tester-product .pc-tags.pc-tags-empty .pc-tag {
    min-width: 38px !important;
    height: 17px !important;
  }
}

/* V241 — Discount presentation: old price struck through and discount percentage red. */
.product-card .product-price-original {
  text-decoration: line-through !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: currentColor !important;
}
.product-card .product-discount {
  color: #c62828 !important;
  font-weight: 700 !important;
}

/* V249 — FINAL CART VIEW + STICKY CAMPAIGN FIX */
/* Root style.css is enqueued after css/style.css, so these final rules must
   live here to override the legacy cart-view styles loaded earlier. */
.cart-toolbar-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.cart-toolbar .cart-view-btn,
.cart-toolbar .cart-view-btn:not(.is-active),
.cart-toolbar .cart-view-btn:hover,
.cart-toolbar .cart-view-btn:hover:not(.is-active),
.cart-toolbar .cart-view-btn.is-active,
.cart-toolbar .cart-view-btn:hover.is-active {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #7a756e !important;
  font: inherit !important;
  font-size: .74rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color .15s ease !important;
}
.cart-toolbar .cart-view-btn.is-active {
  color: #171513 !important;
  font-weight: 700 !important;
}
.cart-toolbar .cart-view-btn:hover:not(.is-active) {
  color: #4f4a44 !important;
}
.cart-toolbar .cart-view-btn:hover.is-active {
  color: #171513 !important;
}
.cart-toolbar .cart-view-btn .cart-view-icon {
  display: none !important;
}

/* V253 — one campaign ticker animation source. The JS initializer measures the
   text width and adjusts only the duration; the animation itself is defined here. */
html body .campaign-marquee-track {
  animation-name: izCampaignEndless !important;
  animation-duration: 28s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  will-change: transform;
}

/* V251/V252 — fixed campaign bar + mobile compact header placement. */
html body .campaign-marquee {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 5000 !important;
  margin: 0 !important;
}
html body .site-header {
  position: sticky !important;
  top: var(--mq-h, 34px) !important;
  margin-top: var(--mq-h, 34px) !important;
  z-index: 1200 !important;
}

@media (max-width: 1024px) {
  html body .mobile-header,
  html body .mobile-header:not(.compact) {
    position: sticky !important;
    top: var(--mq-h, 34px) !important;
    margin-top: var(--mq-h, 34px) !important;
    height: 58px !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    z-index: 1200 !important;
  }

  /* Scroll header: immediately below the campaign strip, with a natural
     height that matches its 36px icons plus vertical breathing room. */
  html body .mobile-header.compact {
    position: sticky !important;
    top: var(--mq-h, 34px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    z-index: 6000 !important;
  }

  html body .mobile-header.compact #menuBtn,
  html body .mobile-header.compact .mobile-compact-search,
  html body .mobile-header.compact .mobile-actions {
    z-index: 6001 !important;
  }

  html body .mobile-header.compact .mobile-compact-search {
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Its result panel starts after the campaign + mobile header stack. */
  html body #mobileCompactResults.compact-search-results-mobile {
    top: calc(var(--mq-h, 34px) + 58px + 4px) !important;
    z-index: 6002 !important;
  }
}

/* One campaign animation only: keep the slower original timing. */
html body .campaign-marquee-track {
  will-change: transform;
}
@media (max-width: 768px) {
  html body .campaign-marquee-track { }
}


/* V257 — shared mobile menu + content-sized compact scroll bar. */
@media (max-width: 1024px) {
  html body .mobile-header.compact {
    height: auto !important;
    min-height: 50px !important;
    padding: 7px 0 !important;
    box-sizing: border-box !important;
    align-items: flex-end !important;
  }
  html body .mobile-header.compact #menuBtn {
    top: auto !important;
    bottom: 7px !important;
    transform: none !important;
    height: 36px !important;
    width: 36px !important;
  }
  html body .mobile-header.compact .mobile-compact-search {
    top: auto !important;
    bottom: 7px !important;
    transform: none !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  html body .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    top: auto !important;
    bottom: 7px !important;
    transform: none !important;
    height: 36px !important;
    width: 36px !important;
  }
}

/* v259 — v240 campaign marquee + mobile compact search settings restored from source package */
/* IZ Parfüm — v240 kaynaklı ayrıştırılmış başlık ayarları
 * Yalnızca:
 * 1) Üst kayan kampanya yazısı
 * 2) Mobilde sayfa aşağı kayınca açılan kompakt arama menüsü
 *
 * Kaynak: izparfum-wp-theme-v240(1).zip
 * Not: Bu dosya tam tema CSS'i değildir; ilgili ayarların temizlenmiş aktarım paketidir.
 */

.campaign-marquee {
  width: 100%;
  height: 34px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--text);
  color: var(--white);
  position: relative;
  z-index: 101;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.campaign-marquee-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  white-space: nowrap;
  padding-left: 100%;
  animation: izCampaignScroll 26s linear infinite;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
}

.campaign-marquee-track span:nth-child(even) {
  opacity: .45;
}

.campaign-marquee { height: 30px; }

.campaign-marquee-track { font-size: .64rem; gap: 22px; animation-duration: 22s; }

.campaign-marquee {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto;
  min-height: 34px;
}

.campaign-marquee { position: relative !important; overflow: hidden !important; }

.campaign-marquee-track {
  padding-left: 0 !important;
  animation-name: izCampaignCenteredScroll !important;
  animation-duration: 24s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

.campaign-marquee{height:28px;background:#15120f;border:0}

.campaign-marquee-track{font-size:.62rem;letter-spacing:.14em;gap:28px}

.campaign-marquee{height:26px}

.campaign-marquee { overflow: hidden !important; }

.campaign-marquee-track {
  padding-left: 0 !important;
  animation: izCampaignContinuous 28s linear infinite !important;
  animation-delay: 0s !important;
  animation-iteration-count: infinite !important;
  width: max-content !important;
  will-change: transform;
}

.campaign-marquee-track {
  width:max-content !important;
  padding-left:0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  animation:izCampaignGroups 24s linear infinite !important;
  will-change:transform;
}

.campaign-marquee-group {
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center;
  gap:28px;
  padding-right:28px;
  white-space:nowrap;
}

.campaign-marquee-group span { flex:0 0 auto; }

.campaign-marquee-group span:nth-child(even) { opacity:.45; }

.campaign-marquee-group { gap:22px; padding-right:22px; }

.campaign-marquee-track { animation-duration:22s !important; }

.campaign-marquee-track {
  gap: 0 !important;
  animation-duration: 15s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  will-change: transform;
}

.campaign-marquee-group {
  gap: 28px !important;
  padding-right: 28px !important;
}

.campaign-marquee-track { animation-duration: 12s !important; }

.campaign-marquee-group { gap: 20px !important; padding-right: 20px !important; }

.campaign-marquee-track {
  padding-left: 0 !important;
  animation-name: izCampaignEndless !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

.campaign-marquee-group { display: flex; align-items: center; gap: 34px; flex: 0 0 auto; }

.campaign-marquee {
  position: sticky !important;
  top: 0 !important;
  z-index: 1500 !important;
}

.campaign-marquee {
  position: relative !important;
  top: auto !important;
  z-index: 2000 !important;
  height: var(--mq-h) !important;
  min-height: var(--mq-h) !important;
}

.campaign-marquee {
  z-index: 0 !important;
}

.campaign-marquee{margin-top:0!important;}

.campaign-marquee { position: relative !important; top: auto !important; }

@keyframes izCampaignScroll {
  from { transform: translateX(0); }

@keyframes izCampaignCenteredScroll {
  0%, 4% { transform: translateX(calc(50vw - 50%)); }

@keyframes izCampaignGroups {
  from { transform:translate3d(0,0,0); }

.mobile-compact-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--text-muted);
  font-size: .8125rem;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;

  /* Hidden initial state */
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, max-width .26s ease;
}

.mobile-compact-search {
  opacity: 1;
  max-width: 260px;
  pointer-events: auto;
}

.mobile-compact-search {
  max-width: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width .28s ease, width .28s ease, opacity .22s ease, padding .28s ease, border-width .28s ease;
}

.mobile-compact-search {
  max-width: 190px;
  width: 190px;
  padding: 7px 12px;
  border-width: 1.5px;
  opacity: 1;
  pointer-events: auto;
  flex: 0 1 190px;
}

.mobile-compact-search { z-index: 40; }

.mobile-compact-search {
  position: relative;
  overflow: visible;
}

.mobile-compact-search { overflow: visible; }

.mobile-compact-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    max-width: 190px;
    flex: 0 0 190px;
    z-index: 120;
  }

.mobile-compact-search {
    z-index: 1200;
  }

.mobile-compact-search {
    width: 170px;
    max-width: 170px;
    flex-basis: 170px;
  }

.mobile-compact-search {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 170px !important;
    max-width: 170px !important;
    flex: none !important;
    z-index: 1200 !important;
  }

.mobile-compact-search {
    display: flex !important;
    position: fixed !important;
    left: 50vw !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) !important;
    width: min(170px, calc(100vw - 96px)) !important;
    max-width: min(170px, calc(100vw - 96px)) !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    z-index: 1201 !important;
  }

.mobile-compact-search {
    position: fixed !important;
    left: 50vw !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) !important;
    width: min(170px, calc(100vw - 96px)) !important;
    max-width: min(170px, calc(100vw - 96px)) !important;
    z-index: 1201 !important;
  }

.mobile-compact-search,
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    position: absolute !important;
    top: 50% !important;
    z-index: 130 !important;
  }

.mobile-compact-search { height: 34px !important; min-height: 34px !important; }

.mobile-compact-search {
    width: 170px !important;
    max-width: 170px !important;
  }

.mobile-compact-search {
    opacity: 1 !important; pointer-events: auto !important; visibility: visible !important;
  }

.mobile-compact-search {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: 132px !important;
    max-width: 132px !important;
    min-width: 132px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1500 !important;
    overflow: hidden !important;
    flex: none !important;
    white-space: nowrap !important;
    transition: none !important;
  }

.mobile-compact-search .mobile-compact-input {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: .75rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

.mobile-header.compact .mobile-compact-search {
  opacity: 1;
  max-width: 260px;
  pointer-events: auto;
}

.mobile-header.compact .mobile-compact-search {
  max-width: 190px;
  width: 190px;
  padding: 7px 12px;
  border-width: 1.5px;
  opacity: 1;
  pointer-events: auto;
  flex: 0 1 190px;
}

.mobile-header.compact .mobile-compact-search { overflow: visible; }

.mobile-header.compact .mobile-compact-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    max-width: 190px;
    flex: 0 0 190px;
    z-index: 120;
  }

.mobile-header.compact .mobile-compact-search {
    z-index: 1200;
  }

.mobile-header.compact .mobile-compact-search {
    width: 170px;
    max-width: 170px;
    flex-basis: 170px;
  }

.mobile-header.compact .mobile-compact-search {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 170px !important;
    max-width: 170px !important;
    flex: none !important;
    z-index: 1200 !important;
  }

.mobile-header.compact .mobile-compact-search {
    display: flex !important;
    position: fixed !important;
    left: 50vw !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) !important;
    width: min(170px, calc(100vw - 96px)) !important;
    max-width: min(170px, calc(100vw - 96px)) !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    z-index: 1201 !important;
  }

.mobile-header.compact .mobile-compact-search {
    position: fixed !important;
    left: 50vw !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) !important;
    width: min(170px, calc(100vw - 96px)) !important;
    max-width: min(170px, calc(100vw - 96px)) !important;
    z-index: 1201 !important;
  }

.mobile-header.compact .mobile-compact-search,
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    position: absolute !important;
    top: 50% !important;
    z-index: 130 !important;
  }

.mobile-header.compact .mobile-compact-search { height: 34px !important; min-height: 34px !important; }

.mobile-header.compact .mobile-compact-search {
    width: 170px !important;
    max-width: 170px !important;
  }

.mobile-header.compact .mobile-compact-search {
    opacity: 1 !important; pointer-events: auto !important; visibility: visible !important;
  }

.mobile-header.compact .mobile-compact-search {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: 132px !important;
    max-width: 132px !important;
    min-width: 132px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1500 !important;
    overflow: hidden !important;
    flex: none !important;
    white-space: nowrap !important;
    transition: none !important;
  }

.mobile-header.compact .mobile-compact-search .mobile-compact-input {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: .75rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

.mobile-compact-input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .78rem;
}

.mobile-compact-input::placeholder { color: var(--text-muted); opacity: 1; }

.mobile-compact-input { cursor: text; }

.mobile-compact-input {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: .75rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

.compact-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(380px, 42vw);
  max-height: min(420px, 70vh);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 500;
  padding: 4px 0;
  white-space: normal;
}

.compact-search-results.show { display: block; }

.compact-search-results .sr-item { padding: 9px 12px; }

.compact-search-results .search-empty { padding: 16px 12px; }

.compact-search-results-mobile {
    left: 50%;
    transform: translateX(-50%);
    width: min(290px, 78vw);
    max-height: 60vh;
  }

.compact-search-results-mobile {
    position: fixed !important;
    left: 10px !important;
    top: 0 !important;
    width: 280px !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(56vh, 360px) !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    border: 1px solid var(--border,#d9d4cc) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.15) !important;
    z-index: 4000 !important;
    display: none !important;
  }

.compact-search-results-mobile.show { display: block !important; }

.compact-search-results-mobile .search-result-item,
  html body #mobileCompactResults.compact-search-results-mobile .sr-item {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 11px !important;
  }

.compact-search-results-mobile .search-empty {
    margin: 0 !important;
    padding: 14px !important;
  }

.mobile-header.compact .mobile-header-logo {
  opacity: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.mobile-header.compact .home-search-host {
  display: none !important;
}

.mobile-header.compact .mobile-actions {
    position: absolute;
    left: calc(50% - 125px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1201;
  }

.mobile-header.compact #menuBtn {
    position: absolute !important; left: 12px !important; top: 50%; transform: translateY(-50%); z-index: 1201;
 }

.mobile-header.compact .mobile-actions {
    position: static !important;
    display: block !important;
  }

.mobile-header.compact .mobile-actions > [data-search-open] { display: none !important; }

.mobile-header.compact .mobile-actions > a[aria-label=\"Sepet\"] {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1201 !important;
  }

.mobile-header.compact #menuBtn {
    display: inline-flex !important;
    position: fixed !important;
    left: 12px !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1202 !important;
  }

.mobile-header.compact .mobile-actions {
    position: fixed !important;
    left: auto !important;
    right: 12px !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    z-index: 1202 !important;
    display: flex !important;
    align-items: center !important;
  }

.mobile-header.compact .mobile-actions > [data-search-open] {
    display: none !important;
  }

.mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
  }

.mobile-header.compact .mobile-compact-cart {
    right: 8px !important; left:auto !important;
    top:50% !important; transform:translateY(-50%) !important;
  }

.mobile-header.compact .mobile-actions > a[aria-label="Sepet"] { display:none !important; }

.mobile-header.compact #menuBtn { left:8px !important; }

.mobile-header.compact .mobile-compact-cart {
    display: none !important;
  }

.mobile-header.compact #menuBtn {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1203 !important;
  }

.mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    display: inline-flex !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

.mobile-header.compact .mobile-actions .home-search-box {
    display: none !important;
  }

.mobile-header.compact { height: 52px !important; }

.mobile-header.compact #menuBtn,
  .mobile-header.compact .mobile-compact-search,
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    position: absolute !important;
    top: 50% !important;
    z-index: 130 !important;
  }

.mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  .mobile-header.compact .mobile-actions a[href="sepet.html"] {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 135 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

.mobile-header.compact .mobile-actions {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    z-index: 135 !important;
  }

.mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  .mobile-header.compact .mobile-actions a[href="sepet.html"] {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

.mobile-header.compact .mobile-actions {
    position: static !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    inset: auto !important;
    z-index: 135 !important;
  }

.mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  .mobile-header.compact .mobile-actions a[href="sepet.html"] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

.mobile-header.compact .mobile-actions,
  .mobile-header.compact .mobile-actions * {
    transform: none !important;
  }

.mobile-header.compact .mobile-actions {
    margin-left: auto !important;
    align-self: center !important;
  }

.mobile-header.compact { top: 0 !important; }

.mobile-header.compact {
    position: sticky !important;
    top: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

.mobile-header.compact #menuBtn {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 1501 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

.mobile-header.compact .mobile-actions {
    position: absolute !important;
    right: 8px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 36px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: auto !important;
    z-index: 1501 !important;
  }

.mobile-header.compact .mobile-actions > a[aria-label="Sepet"],
  .mobile-header.compact .mobile-actions a[href*="sepet"] {
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
/* --- v240 mobil compact arama çekirdeği --- */
@media (max-width: 768px) {
  .mobile-header.compact {
    display: flex;
    align-items: center;
  }

  .mobile-header.compact .mobile-compact-search {
    max-width: 190px;
    width: 190px;
    padding: 7px 12px;
    border-width: 1.5px;
    opacity: 1;
    pointer-events: auto;
    flex: 0 1 190px;
  }

  .mobile-compact-search {
    min-width: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    box-sizing: border-box;
    transition: max-width .28s ease, width .28s ease, opacity .22s ease, padding .28s ease, border-width .28s ease;
  }
}


/* V260 — Mobile scroll header mirrors desktop compact header geometry.
   Campaign ticker stays pinned at top; compact search sits directly below it. */
@media (max-width: 1024px) {
  .campaign-marquee {
    position: sticky !important;
    top: 0 !important;
    height: var(--mq-h, 34px) !important;
    min-height: var(--mq-h, 34px) !important;
    z-index: 2000 !important;
  }

  .mobile-header.compact {
    position: sticky !important;
    top: var(--mq-h, 34px) !important;
    height: 56px !important;
    min-height: 56px !important;
    z-index: 120 !important;
    background: #fbfaf7 !important;
  }

  .mobile-header.compact #menuBtn,
  .mobile-header.compact .mobile-compact-search,
  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 135 !important;
    box-sizing: border-box !important;
  }

  .mobile-header.compact #menuBtn {
    left: 14px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-header.compact .mobile-compact-search {
    left: 50% !important;
    width: min(190px, calc(100vw - 136px)) !important;
    max-width: min(190px, calc(100vw - 136px)) !important;
    min-width: 120px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 7px 12px !important;
    flex: none !important;
    transform: translate(-50%, -50%) !important;
    border-width: 1.5px !important;
  }

  .mobile-header.compact .mobile-actions > a[aria-label="Sepet"] {
    right: 14px !important;
    left: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-header.compact .mobile-header-logo {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .mobile-header.compact .mobile-actions > [data-search-open] {
    display: none !important;
  }
}

/* V262 — Mobile scroll header uses the exact desktop compact header structure.
   The old mobile compact search/header is fully hidden; when compact mode is
   active the real .site-header.compact is shown on mobile. */
@media (max-width: 1024px) {
  /* Normal mobile state: keep the original mobile header. */
  body .site-header {
    display: none !important;
  }

  /* Scrolled state: replace the old mobile compact bar with the desktop
     compact header itself. */
  body .site-header.compact {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    z-index: 1200 !important;
    background: #fbfaf7 !important;
    border-bottom: 1px solid #eee9e2 !important;
  }

  body .site-header.compact > .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 10px !important;
    margin: 0 !important;
  }

  body .site-header.compact .header-inner {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
  }

  /* Keep the same compact desktop logo, scaled for mobile. */
  body .site-header.compact .header-logo {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 54px !important;
    height: auto !important;
    min-width: 54px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1304 !important;
  }

  body .site-header.compact .header-logo .logo-line-top {
    font-size: .86rem !important;
    line-height: 1.02 !important;
  }

  body .site-header.compact .header-logo .logo-line-bottom {
    font-size: .43em !important;
    line-height: 1.02 !important;
  }

  /* Keep only the exact desktop compact menu trigger from the nav. */
  body .site-header.compact .header-nav {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .site-header.compact .header-nav > .nav-link,
  body .site-header.compact .header-nav > .nav-dropdown {
    display: none !important;
  }

  body .site-header.compact .header-nav > #desktopCompactMenu,
  body .site-header.compact .header-nav > .desktop-compact-menu {
    display: inline-flex !important;
    position: absolute !important;
    left: 72px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1305 !important;
  }

  body .site-header.compact .header-nav > #desktopCompactMenu svg,
  body .site-header.compact .header-nav > .desktop-compact-menu svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  /* Use the same desktop compact search field, centered in the viewport. */
  body .site-header.compact .header-compact-search {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(190px, calc(100vw - 160px)) !important;
    max-width: min(190px, calc(100vw - 160px)) !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 1302 !important;
  }

  /* Re-use the normal desktop header cart. */
  body .site-header.compact .header-actions {
    position: absolute !important;
    left: auto !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1305 !important;
  }

  body .site-header.compact .header-actions > [data-search-open],
  body .site-header.compact .header-actions > [data-auth-link] {
    display: none !important;
  }

  body .site-header.compact .header-actions > a[aria-label="Sepet"] {
    display: inline-flex !important;
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body .site-header.compact .header-actions > a[aria-label="Sepet"] svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  /* Remove the previous mobile compact menu completely from the visual tree. */
  body .mobile-header.compact {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body .mobile-header.compact .mobile-compact-search,
  body .mobile-header.compact .mobile-actions,
  body .mobile-header.compact #menuBtn {
    display: none !important;
  }
}

/* V262 — 100 ml gift label stays outside the volume-option flow so every
   volume button starts on exactly the same horizontal line. */
.volume-options {
  align-items: flex-start !important;
}
.volume-option-wrap {
  position: relative !important;
  flex: 0 0 92px !important;
  width: 92px !important;
  min-width: 92px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
.volume-option-wrap .volume-btn {
  position: relative !important;
  width: 100% !important;
  min-width: 92px !important;
  min-height: 56px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.volume-option-wrap.has-gift .volume-option-gift,
.volume-option-wrap:has(.volume-option-gift) .volume-option-gift {
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 5px) !important;
  transform: translateX(-50%) !important;
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  background: #c62828 !important;
  color: #fff !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
@media (max-width: 520px) {
  .volume-option-wrap {
    flex-basis: 88px !important;
    width: 88px !important;
    min-width: 88px !important;
  }
  .volume-option-wrap .volume-btn {
    min-width: 88px !important;
    min-height: 54px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .volume-option-wrap.has-gift .volume-option-gift,
  .volume-option-wrap:has(.volume-option-gift) .volume-option-gift {
    font-size: .60rem !important;
    padding: 4px 7px !important;
  }
}

/* v279 — Product 38267897 (İZ - Ev, Ofis Kokuları): no 100 ml gift bubble. */
body.iz-product-page .volume-option-wrap[data-product-id="38267897"] .volume-option-gift {
  display: none !important;
}

}}}
/* ================================================================
   V280 — CANONICAL PRODUCT PAGE MOBILE LAYOUT
   This is the final mobile product-page layer. Earlier duplicate rules
   have been removed; this block is the only mobile spacing authority.
   ================================================================ */
@media (max-width: 800px) {
  body.iz-product-page .container.product-page-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 18px !important;
  }

  body.iz-product-page > .container[style*="padding-top"] {
    padding-top: 7px !important;
    padding-bottom: 0 !important;
  }

  body.iz-product-page .product-detail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 10px 0 18px !important;
  }

  body.iz-product-page .product-gallery {
    position: static !important;
    margin: 0 0 9px !important;
  }

  body.iz-product-page .gallery-main {
    margin: 0 0 6px !important;
  }

  body.iz-product-page .gallery-main img {
    padding: 14px !important;
  }

  body.iz-product-page .gallery-thumbs {
    gap: 5px !important;
    margin: 0 !important;
  }

  body.iz-product-page .gallery-thumb {
    width: 50px !important;
    height: 50px !important;
  }

  body.iz-product-page .product-detail-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 0 !important;
  }

  body.iz-product-page .product-info-cat {
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  body.iz-product-page .product-detail-name {
    margin: 0 !important;
    line-height: 1.18 !important;
  }

  body.iz-product-page .product-sku {
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  body.iz-product-page .product-detail-pricing {
    margin: 0 !important;
    gap: 7px !important;
    line-height: 1.15 !important;
  }

  body.iz-product-page .product-detail-price,
  body.iz-product-page .product-detail-original {
    line-height: 1.15 !important;
  }

  body.iz-product-page .volume-selector {
    margin: 2px 0 0 !important;
  }

  body.iz-product-page .volume-selector h4 {
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
  }

  body.iz-product-page .volume-options {
    gap: 7px !important;
    margin: 0 !important;
  }

  body.iz-product-page .volume-option-wrap {
    margin: 0 !important;
  }

  body.iz-product-page .volume-btn {
    min-height: 50px !important;
    padding: 7px 10px !important;
  }

  body.iz-product-page #essenceSection {
    margin: 1px 0 0 !important;
  }

  body.iz-product-page .essence-selector {
    padding: 10px !important;
  }

  body.iz-product-page .essence-selector h4 {
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
  }

  body.iz-product-page .essence-option {
    margin: 0 0 4px !important;
    padding: 7px 9px !important;
    min-height: 42px !important;
  }

  body.iz-product-page .essence-option:last-child {
    margin-bottom: 0 !important;
  }

  body.iz-product-page .stock-status {
    margin: 1px 0 0 !important;
    gap: 5px !important;
    min-height: 16px !important;
    line-height: 1.2 !important;
  }

  body.iz-product-page .product-quantity {
    margin: 1px 0 2px !important;
    gap: 8px !important;
  }

  body.iz-product-page .detail-actions {
    margin: 0 !important;
    gap: 7px !important;
  }

  body.iz-product-page .detail-actions .btn {
    min-height: 44px !important;
  }

  body.iz-product-page .product-tabs-wrap {
    margin: 2px 0 0 !important;
    padding: 0 0 14px !important;
  }

  body.iz-product-page .tabs-nav {
    margin: 0 0 8px !important;
  }

  body.iz-product-page .tab-btn {
    padding: 8px 12px !important;
    line-height: 1.15 !important;
  }

  body.iz-product-page .tab-panel {
    padding: 0 !important;
  }

  body.iz-product-page #tabDesc {
    margin: 0 !important;
    font-size: .9rem !important;
    line-height: 1.55 !important;
  }

  /* Shopier description HTML can contain its own headings/paragraph spacing. */
  body.iz-product-page #tabDesc p,
  body.iz-product-page #tabDesc h1,
  body.iz-product-page #tabDesc h2,
  body.iz-product-page #tabDesc h3,
  body.iz-product-page #tabDesc h4,
  body.iz-product-page #tabDesc ul,
  body.iz-product-page #tabDesc ol {
    margin-top: 0 !important;
    margin-bottom: 7px !important;
  }

  body.iz-product-page #tabDesc > *:last-child {
    margin-bottom: 0 !important;
  }

  body.iz-product-page .frag-pyramid {
    padding: 8px 0 0 !important;
    margin: 0 !important;
  }

  body.iz-product-page .frag-pyramid-title {
    margin: 0 0 10px !important;
  }

  body.iz-product-page .frag-note-group {
    gap: 8px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
  }

  body.iz-product-page .frag-note-label {
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  body.iz-product-page .frag-notes {
    gap: 5px !important;
  }

  body.iz-product-page .frag-info-grid {
    gap: 7px !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
  }

  body.iz-product-page .frag-info-item {
    padding: 8px !important;
  }

  body.iz-product-page .reco-section {
    margin: 0 !important;
    padding: 18px 0 !important;
  }

  body.iz-product-page .reco-section + .reco-section {
    padding-top: 2px !important;
  }

  body.iz-product-page .reco-section h2 {
    margin: 0 0 4px !important;
    line-height: 1.2 !important;
  }

  body.iz-product-page .reco-section > p {
    margin: 0 0 9px !important;
    line-height: 1.35 !important;
  }

  body.iz-product-page .reco-grid {
    margin-top: 0 !important;
    row-gap: 9px !important;
  }

  body.iz-product-page .sticky-buy-bar {
    padding: 8px 10px !important;
    gap: 7px !important;
  }

  body.iz-product-page .sticky-buy-bar .btn {
    min-height: 42px !important;
    padding: 9px 12px !important;
    font-size: .78rem !important;
  }
}

/* 38267897 — oda kokusu: no 100 ml gift bubble. */
body.iz-product-page .volume-option-wrap:has(.volume-option-gift)[data-product-id="38267897"] .volume-option-gift,
body.iz-product-page .volume-option-wrap[data-product-id="38267897"] .volume-option-gift {
  display: none !important;
}

/* V285 — Desktop compact search: never allow the scroll-search field to
   reflow/reposition while it is being hidden at the top of the page.
   The previous setup animated opacity/transform while removing .compact,
   which made the fixed search briefly fall back to its non-compact position.
   Keep the element out of the render tree when not compact and use one fixed
   coordinate system while compact. */
@media (min-width: 1025px) {
  body .site-header:not(.compact) .header-compact-search {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
    animation: none !important;
  }

  body .site-header.compact .header-compact-search {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    left: 50vw !important;
    right: auto !important;
    top: calc(var(--header-h) / 2) !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
    animation: none !important;
    z-index: 1301 !important;
  }
}

/* v296 — Tester kartlarının iki bilgi rozeti tüm sayfalarda aynı: Tester / Setler. */
.product-card .pc-tags.tester-card-labels {
  min-height: 20px !important;
  gap: 5px !important;
}
.product-card .pc-tags.tester-card-labels .tester-label {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 44px !important;
  max-width: 50% !important;
}

/* Legal pages — no WordPress page-title band; document headings live inside the content card. */
.iz-legal-page{padding-top:40px;padding-bottom:64px}
.legal-page{max-width:980px}
.legal-card{background:var(--surface,#fff);border:1px solid var(--border,#e7e3df);border-radius:14px;padding:44px 52px;margin:0 auto;box-shadow:0 8px 28px rgba(0,0,0,.04)}
.legal-card h1{margin:0 0 6px;font-size:1.1rem;font-weight:700;letter-spacing:.02em}
.legal-card h2{margin:0 0 8px;font-size:1.8rem;font-weight:600;line-height:1.25}
.legal-card .legal-meta{margin:0 0 28px;color:var(--text-muted,#777);font-size:.88rem}
.legal-card section{margin:0 0 22px}
.legal-card h3{margin:0 0 8px;font-size:1.02rem;font-weight:650;line-height:1.35}
.legal-card p{margin:0;color:var(--text-sec,#555);font-size:.94rem;line-height:1.75}
@media(max-width:768px){.iz-legal-page{padding-top:20px;padding-bottom:40px}.legal-card{padding:26px 20px;border-radius:12px}.legal-card h2{font-size:1.35rem}.legal-card h3{font-size:.98rem}.legal-card p{font-size:.9rem;line-height:1.68}}
/* İZ Blog Yönetimi / Frontend */
.iz-blog-heading{text-align:center;max-width:760px;margin:0 auto 26px}.iz-blog-heading h1{margin:0 0 10px}.iz-blog-heading p{margin:0;color:var(--text-sec)}.iz-blog-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 28px}.iz-blog-filters button{border:1px solid var(--border);background:transparent;padding:8px 14px;border-radius:999px;cursor:pointer}.iz-blog-filters button.active{background:var(--text);color:#fff}.iz-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.iz-blog-grid .blog-card{border:1px solid var(--border);background:var(--surface);padding:0 0 18px;overflow:hidden}.iz-blog-grid .blog-card-img{display:block;aspect-ratio:16/9;overflow:hidden}.iz-blog-grid .blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}.iz-blog-grid .blog-card-cat,.iz-blog-grid .blog-card-title,.iz-blog-grid .blog-card-desc,.iz-blog-grid .blog-card-meta{margin-left:18px;margin-right:18px}.iz-blog-grid .blog-card-cat{margin-top:16px}.iz-blog-grid .blog-card-title{margin-top:8px}.iz-blog-grid .blog-card-title a{text-decoration:none}.iz-blog-single-inner{max-width:860px;margin:0 auto}.iz-blog-single .blog-post-title{margin:10px 0 10px}.iz-blog-single .blog-card-meta{margin-bottom:24px}.blog-post-hero{display:block;width:100%;max-height:560px;object-fit:cover;margin:0 auto 28px;border-radius:8px}.blog-post-content{font-size:17px;line-height:1.8}.blog-post-content h2{margin:30px 0 10px}.blog-post-content h3{margin:24px 0 8px}.blog-post-content p,.blog-post-content ul,.blog-post-content ol{margin:0 0 16px}.iz-blog-custom-html{margin-top:28px}.iz-blog-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.iz-blog-admin-grid p:nth-child(4),.iz-blog-admin-grid p:nth-child(5),.iz-blog-admin-grid p:nth-child(6){grid-column:1/-1}@media(max-width:768px){.iz-blog-grid{grid-template-columns:1fr 1fr;gap:16px}.iz-blog-grid .blog-card-cat,.iz-blog-grid .blog-card-title,.iz-blog-grid .blog-card-desc,.iz-blog-grid .blog-card-meta{margin-left:12px;margin-right:12px}.blog-post-content{font-size:16px}.iz-blog-admin-grid{grid-template-columns:1fr}}@media(max-width:520px){.iz-blog-grid{grid-template-columns:1fr}}

/* v299 — Blog page content editor parity with other editable content pages */
.iz-blog-admin-wrap .iz-content-card { max-width: 1100px; }
.iz-blog-admin-wrap .iz-content-card + .iz-content-card { margin-top: 16px; }
.iz-blog-page-copy { max-width: 900px; margin: 0 auto 24px; }
.iz-blog-page-copy > :first-child { margin-top: 0; }
.iz-blog-page-copy > :last-child { margin-bottom: 0; }

/* v305 — Desktop compact search must stay inside the visible header below the fixed campaign bar.
   The search is fixed to the viewport, while the campaign strip occupies the first 34px.
   Keep menu/cart geometry unchanged and move only the compact search field down by that strip height. */
@media (min-width: 1025px) {
  html body .site-header.compact .header-compact-search {
    top: calc(var(--mq-h, 34px) + 28px) !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}


/* v310 — İletişim formu mobil genişlik düzeltmesi */
.contact-layout {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:64px;
  align-items:start;
}
.contact-layout > div:first-child { min-width:0; }
@media (max-width:1024px) {
  .contact-layout { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:768px) {
  .contact-layout { width:100%; margin:0; }
  .contact-layout > div:first-child { width:100%; max-width:none; }
  .contact-layout #contactForm { width:100%; max-width:none; }
  .contact-layout #contactForm > div:first-child { grid-template-columns:1fr; gap:12px; }
}

/* v314: checkout footer hidden */


/* Dynamic homepage campaign areas — fully centered content */
.iz-home-campaign-area{width:100%;background:var(--iz-campaign-bg,#f4f1eb);padding:42px 0;overflow:hidden;text-align:center}
.iz-home-campaign-area .iz-home-campaign-heading{display:flex!important;align-items:center!important;justify-content:var(--iz-campaign-title-align,center)!important;text-align:var(--iz-campaign-title-align,center)!important;width:100%!important}
.iz-home-campaign-area .iz-home-campaign-heading>div{display:flex!important;align-items:center!important;justify-content:var(--iz-campaign-title-align,center)!important;text-align:var(--iz-campaign-title-align,center)!important;width:100%!important}
.iz-home-campaign-area .iz-home-campaign-heading h2{display:block!important;width:auto!important;margin:0!important;text-align:var(--iz-campaign-title-align,center)!important}
.iz-home-campaign-inner{width:100%;text-align:center;margin-left:auto!important;margin-right:auto!important}
.iz-home-campaign-heading{margin:0 0 20px!important;justify-content:center!important;text-align:center!important;width:100%!important}
.iz-home-campaign-heading>div{width:100%!important;text-align:center!important;display:flex!important;justify-content:center!important}
.iz-home-campaign-heading h2{margin:0;text-align:center!important;display:block!important;font-size:var(--iz-campaign-title-size,20px)!important;font-weight:var(--iz-campaign-title-weight,700)!important;line-height:1.2!important;color:var(--iz-campaign-title-color,#171615)!important}.iz-home-campaign-heading h2 a{color:inherit!important;text-decoration:none}.iz-home-campaign-heading h2 a:hover{text-decoration:none}
/* Kampanya alanlarındaki ürünler ortak kategori kartı bileşenini aynen kullanır; yalnızca kart grubu ortalanır. */
.iz-home-campaign-products{margin-left:auto!important;margin-right:auto!important;justify-content:center!important}
.iz-home-campaign-products[data-count="1"]{grid-template-columns:minmax(0,280px)!important;justify-content:center!important}
.iz-home-campaign-products[data-count="2"]{grid-template-columns:repeat(2,minmax(0,280px))!important;justify-content:center!important}
.iz-home-campaign-products[data-count="3"]{grid-template-columns:repeat(3,minmax(0,280px))!important;justify-content:center!important}
.iz-home-campaign-products[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))!important;justify-content:center!important}
@media(max-width:768px){.iz-home-campaign-area{padding:28px 0;min-height:var(--iz-campaign-mobile-area-height,380px)!important;height:auto!important;box-sizing:border-box}.iz-home-campaign-heading{margin-bottom:14px!important}.iz-home-campaign-inner{padding-left:16px;padding-right:16px}.iz-home-campaign-heading>div{display:flex!important;justify-content:var(--iz-campaign-title-align,center)!important}.iz-home-campaign-heading h2{font-size:var(--iz-campaign-title-size-mobile,18px)!important;font-weight:var(--iz-campaign-title-weight-mobile,700)!important}.iz-home-campaign-products[data-count="1"]{grid-template-columns:minmax(0,1fr)!important}.iz-home-campaign-products[data-count="2"],.iz-home-campaign-products[data-count="3"],.iz-home-campaign-products[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:center!important}.iz-home-campaign-products .product-card{height:var(--iz-campaign-mobile-card-height,380px)!important;min-height:var(--iz-campaign-mobile-card-height,380px)!important;max-height:none!important;box-sizing:border-box!important}.iz-home-campaign-products .product-card .product-card-inner{height:auto!important;min-height:var(--iz-campaign-mobile-card-image-height,165px)!important}.iz-home-campaign-products .product-card .product-img-wrap{height:var(--iz-campaign-mobile-card-image-height,165px)!important;min-height:var(--iz-campaign-mobile-card-image-height,165px)!important;max-height:none!important;box-sizing:border-box!important}.iz-home-campaign-products .product-card .product-img-wrap img{height:100%!important;width:100%!important;object-fit:contain!important}}

/* v324 campaign areas: independent desktop/mobile product sets. */
.iz-home-campaign-area .iz-campaign-products-mobile{display:none!important}
@media(max-width:768px){
  .iz-home-campaign-area .iz-campaign-products-desktop{display:none!important}
  .iz-home-campaign-area .iz-campaign-products-mobile{display:grid!important}
}


/* v327 — Ana Sayfa bölüm sırası: canonical frontend rule. Root style.css is metadata-only and is not enqueued. */
body.homepage-page .iz-home-section-stack{display:flex!important;flex-direction:column!important;min-width:0;width:100%;}
body.homepage-page .iz-home-section-stack > [data-home-section],
body.homepage-page .iz-home-section-stack > .iz-home-campaign-area{flex:0 0 auto!important;}
body.homepage-page .iz-home-section-stack > [data-home-section]{position:relative;}
/* v328: Ana Sayfa Kampanya Alanları başlık hizalaması */
.iz-home-campaign-heading{justify-content:var(--iz-campaign-title-align,center)!important;text-align:var(--iz-campaign-title-align,center)!important}
.iz-home-campaign-heading>div{justify-content:var(--iz-campaign-title-align,center)!important;text-align:var(--iz-campaign-title-align,center)!important}
.iz-home-campaign-heading h2{text-align:var(--iz-campaign-title-align,center)!important}
@media(max-width:768px){
  .iz-home-campaign-heading{justify-content:var(--iz-campaign-title-align,center)!important;text-align:var(--iz-campaign-title-align,center)!important}
  .iz-home-campaign-heading>div{justify-content:var(--iz-campaign-title-align,center)!important;text-align:var(--iz-campaign-title-align,center)!important}
  .iz-home-campaign-heading h2{text-align:var(--iz-campaign-title-align,center)!important}
}

/* v342: mobile campaign dimensions are driven only by per-area saved values. */
@media(max-width:768px){
  .iz-home-campaign-area{box-sizing:border-box!important;min-height:var(--iz-campaign-mobile-area-height,380px)!important;}
  .iz-home-campaign-area .iz-campaign-products-mobile{align-items:start!important;}
  .iz-home-campaign-area .iz-campaign-products-mobile .product-card{height:var(--iz-campaign-mobile-card-height,380px)!important;min-height:var(--iz-campaign-mobile-card-height,380px)!important;max-height:var(--iz-campaign-mobile-card-height,380px)!important;box-sizing:border-box!important;}
  .iz-home-campaign-area .iz-campaign-products-mobile .product-card .product-card-inner{height:var(--iz-campaign-mobile-card-image-height,165px)!important;min-height:var(--iz-campaign-mobile-card-image-height,165px)!important;max-height:var(--iz-campaign-mobile-card-image-height,165px)!important;box-sizing:border-box!important;}
  .iz-home-campaign-area .iz-campaign-products-mobile .product-card .product-img-wrap{height:var(--iz-campaign-mobile-card-image-height,165px)!important;min-height:var(--iz-campaign-mobile-card-image-height,165px)!important;max-height:var(--iz-campaign-mobile-card-image-height,165px)!important;box-sizing:border-box!important;}
  .iz-home-campaign-area .iz-campaign-products-mobile .product-card .product-img-wrap img{height:100%!important;width:100%!important;object-fit:contain!important;}
}