/* ==========================================================================
   MERT GÜMÜŞ — Design tokens
   ========================================================================== */
:root{
  --bg:            #FAF7F3;
  --bg-secondary:  #F3EBE4;
  --header:        #E6D1C0;
  --text:          #35231D;
  --text-secondary:#74665F;
  --cta:           #4A2D21;
  --cta-text:      #FFFAF5;
  --silver:        #D9DDE1;
  --champagne:     #CDB89F;

  /* Champagne Mocha — dark-surface palette (hero + footer only) */
  --mocha-deep:    #3B2A23;
  --mocha-medium:  #8B6F56;
  --champagne-soft:#DCC7B1;
  --ivory-warm:    #F5EFE8;
  --taupe-accent:  #B89C82;
  --footer-muted:  #C5AD99;
  --copyright-tone:#BFA793;

  /* Header nav — second row */
  --nav-secondary-light:  #5A3C31;

  /* Inner pages — warm champagne/mocha surfaces (inner pages only, never
     referenced by homepage rules). Deliberately NOT near-white: these are
     the actual jewelry-boutique tones, not a paler "light mode" of them.
     Canonical role assignment (each tone has exactly one job, so no two
     sections on the same page ever read as the same surface by accident):
       --inner-base      page base
       --inner-alt       alternate/vurgulu section
       --inner-surface   light premium surface (reserved accent tone)
       --inner-card      card / form surface
       --inner-warn      info / warning box
       --inner-editorial deep dark editorial section — NOT the footer's
                         #4A2D21, so a dark content section never visually
                         fuses with the footer beneath it
     --inner-deep is unrelated to this role list — it's a muted icon color
     (empty states, placeholder art), left as-is. */
  --inner-base:     #F1E2D6;
  --inner-alt:      #E5CFBE;
  --inner-surface:  #F6E8DC;
  --inner-deep:     #D5B8A1;
  --inner-editorial:#593728;
  --inner-card:     #F8EEE6;
  --inner-warn:     #DFC5B1;
  --inner-input:    #F3E3D6;
  --inner-mocha:    #6A4A3B;
  --inner-text:     #35231D;
  --inner-body:     #59453D;
  --inner-muted:    #78645A;
  --inner-border:   rgba(74,45,33,.13);

  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:'Sacramento', cursive;

  --fs-hero:  clamp(2.6rem, 5.2vw + 1rem, 5.4rem);
  --fs-h2:    clamp(1.9rem, 2.4vw + 1rem, 3.1rem);
  --fs-h3:    clamp(1.3rem, 1vw + 1rem, 1.7rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --container-max: 1400px;
  --pad-inline: clamp(20px, 4.5vw, 64px);
  --section-pad: clamp(64px, 9vw, 140px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: 350ms;
  --dur-m: 550ms;
  --dur-l: 700ms;

  --radius-sm: 3px;
  --radius-md: 4px;
}

/* ==========================================================================
   Local brand font — header logo wordmark only
   Richmond is a licensed script/calligraphy face and is NOT bundled with
   this project (no font file ships here). Drop the licensed
   Richmond.woff2/.woff files into /fonts/ and this activates automatically
   — no other change needed. Until then, @font-face simply fails to find
   the file and every browser falls back to --font-serif (Cormorant
   Garamond, already loaded), so .logo-script never breaks or shows a
   missing-font glyph; font-display:swap avoids a layout-shifting flash
   once the real file is added.
   ========================================================================== */
@font-face{
  font-family: 'Richmond';
  src: url('../fonts/Richmond.woff2') format('woff2'),
       url('../fonts/Richmond.woff') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
/* Guarantee the native [hidden] attribute always hides an element, even when
   a component also sets its own `display` (e.g. .product-grid{display:grid})
   — without this, an equal-specificity author rule can silently beat the
   browser's default [hidden]{display:none}. */
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input{ font: inherit; }
.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link{
  position: absolute; left: 12px; top: -60px;
  background: var(--cta); color: var(--cta-text);
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: var(--fs-small); z-index: 1000;
  transition: top var(--dur-s) var(--ease);
}
.skip-link:focus{ top: 12px; }

:focus-visible{ outline: 2px solid var(--cta); outline-offset: 3px; }

.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.eyebrow{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.section-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--text);
  margin-top: 10px;
  letter-spacing: .002em;
}
.section-head{ max-width: 620px; margin-bottom: clamp(36px, 5vw, 64px); }
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* "Neden [Mert Gümüş]?" heading only — a refined script accent on the
   brand name while "Neden" and "?" stay in the normal section-title
   serif. Sized in em (relative to the parent h2's own clamp()) so it
   scales with the heading at every breakpoint without separate media
   queries; nudged up slightly and given a touch of extra tracking since
   script faces read visually smaller than a serif at the same size. */
.script-name{
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.3em;
  letter-spacing: .01em;
  line-height: 1;
  color: inherit;
}
.section-head--left{ margin-bottom: clamp(28px, 4vw, 44px); }

.text-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--champagne);
  transition: gap var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.text-link svg{ transition: transform var(--dur-s) var(--ease); }
.text-link:hover{ color: var(--cta); gap: 12px; }
.text-link:hover svg{ transform: translateX(2px); }
.text-link:disabled{ color: var(--text-secondary); border-color: transparent; cursor: not-allowed; opacity: .55; }
.text-link:disabled:hover{ gap: 8px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 17px 40px;
  border-radius: var(--radius-md);
  transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  white-space: nowrap;
}
/* A disabled action (e.g. "Tükendi", or a submit gated by MG_CONFIG until
   its real backend exists) must read as inert, not merely an ordinary
   button that silently does nothing when clicked. */
.btn:disabled{
  background: rgba(53,35,29,.14);
  color: rgba(53,35,29,.5);
  border-color: transparent;
  cursor: not-allowed;
  transform: none !important;
}
.btn-primary{
  background: var(--cta);
  color: var(--cta-text);
}
.btn-primary:hover{
  background: var(--text);
  transform: translateY(-2px);
}
.btn-light{
  background: var(--champagne-soft);
  color: var(--mocha-deep);
}
.btn-light:hover{
  background: var(--ivory-warm);
  transform: translateY(-2px);
}
.btn-outline{
  background: transparent;
  color: var(--cta);
  border: 1px solid rgba(53,35,29,.28);
}
.btn-outline:hover{
  background: var(--cta);
  color: var(--cta-text);
  border-color: var(--cta);
  transform: translateY(-2px);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{
  /* Visible by default: reveal-on-scroll is an optional enhancement.
     JS opts an element into the animated hidden state via .reveal-armed
     only once it has also set up the observer that will reveal it, so
     missing/delayed/disabled JS or a full-page screenshot never leaves
     content stuck invisible. */
  opacity: 1;
  transform: none;
}
[data-reveal].reveal-armed{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].reveal-armed.is-visible{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  /* .home-ribbon-track is exempt: the trust-strip marquee is decorative
     and must keep scrolling continuously even with reduced motion on. */
  *:not(.home-ribbon-track){ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Media placeholder system
   (Stand-ins for real product / campaign photography — swap the .category-media,
   .hero-media, .seasonal-media etc. backgrounds for <img>/<video> in production.)
   ========================================================================== */
.featured-media, .gallery-main, .gallery-sub, .hero-media{
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bg-secondary) 0%, var(--bg) 62%, var(--silver) 130%);
  isolation: isolate;
}
.featured-media::after, .gallery-main::after, .gallery-sub::after, .hero-media::after{
  content: '';
  position: absolute; inset: 0;
  opacity: .05; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.featured-motif{
  color: var(--champagne);
  width: 34%;
  transition: transform var(--dur-m) var(--ease);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 500;
  /* Same treatment as body.home's header (rgba mocha + blur, see below) —
     inner pages have no hero to scroll past, so this is simply their
     header's only state. body.home's own rule is more specific and keeps
     winning on the homepage untouched. */
  background: rgba(74,45,33,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
/* Belt-and-suspenders: guarantees every inner page's header matches the
   homepage's mocha header pixel-for-pixel regardless of any future
   .is-light-style override, without touching body.home at all. */
body:not(.home) .site-header{
  background: #4A2D21 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
body:not(.home) .site-header .logo-script,
body:not(.home) .site-header .nav-list a,
body:not(.home) .site-header .icon-btn{
  color: #F4EDE6 !important;
}
body:not(.home) .site-header .logo-subtitle{
  color: rgba(244,237,230,.76) !important;
}
/* Root fix, not a one-off patch: the rule above targets ".nav-list a",
   which — since the Kadın/Erkek dropdown panel's links live inside
   .nav-list too — was also forcing the dropdown's own links to this same
   light cream !important, making them unreadable against the dropdown's
   light panel background. Same specificity + !important, declared after,
   so this wins back only for links actually inside .nav-dropdown; the
   header's own light-on-dark nav text above is untouched. */
body:not(.home) .site-header .nav-dropdown a{
  color: #4A2D21 !important;
}
body:not(.home) .site-header .nav-dropdown a:hover,
body:not(.home) .site-header .nav-dropdown a:focus-visible{
  color: #35231D !important;
  background: rgba(74,45,33,.07);
}
body:not(.home) .site-header .nav-dropdown a:active{
  color: #35231D !important;
  font-weight: 600;
}
.site-header.is-light{
  background: var(--header);
  border-bottom-color: rgba(53,35,29,.08);
}
.header-inner{
  display: grid;
  grid-template-columns: 220px 1fr 180px;
  align-items: center;
  gap: 24px;
  height: 67px;
  transition: height var(--dur-s) var(--ease);
}
.site-header.is-scrolled .header-inner{ height: 55px; }

.logo{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text);
  white-space: nowrap;
  line-height: 1;
}
.logo-script{
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 28.22px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  color: #F4EDE6;
}
.logo-subtitle{
  display: block;
  margin-top: 2.85px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(244,237,230,.78);
}
.site-header .logo{ color: var(--ivory-warm); transition: color var(--dur-m) var(--ease); }
.site-header.is-light .logo{ color: var(--text); }
.site-header.is-light .logo-script{ color: var(--text); }
.site-header.is-light .logo-subtitle{ color: rgba(53,35,29,.68); }

.nav{
  flex: 1; min-width: 0; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.nav-list{
  display: flex; align-items: center; gap: clamp(24px, calc(1.8vw + 8px), 36px);
  justify-content: center;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
.nav-list a{
  font-size: 13.48px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  color: var(--ivory-warm);
  transition: border-color var(--dur-s) var(--ease), color var(--dur-m) var(--ease);
}
.nav-list a:hover{ border-color: var(--champagne-soft); }
.site-header.is-light .nav-list a{ color: var(--text); }
.site-header.is-light .nav-list a:hover{ border-color: var(--champagne); }

/* Kadın / Erkek dropdowns */
.nav-has-dropdown{
  position: relative;
  padding-bottom: 14px;
  margin-bottom: -14px;
}
.nav-has-dropdown > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  height: 100%;
}
.nav-caret{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: rgba(255,255,255,.78);
  opacity: .75;
  transform: rotate(180deg);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.site-header.is-light .nav-caret{ color: rgba(53,35,29,.78); }
.nav-has-dropdown:hover .nav-caret,
.nav-has-dropdown:focus-within .nav-caret{
  opacity: 1;
  transform: rotate(0deg);
}
.nav-dropdown{
  position: absolute; top: 100%; left: 50%; translate: -50% 0;
  width: 182px;
  background: #F3E3D6;
  border: 1px solid rgba(74,45,33,.08);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  padding: 8px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
  z-index: 20;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.nav-has-dropdown:hover > a,
.nav-has-dropdown:focus-within > a{
  border-color: var(--champagne-soft);
}
.site-header.is-light .nav-has-dropdown:hover > a,
.site-header.is-light .nav-has-dropdown:focus-within > a{
  border-color: var(--champagne);
}
.nav-dropdown a{
  display: block;
  padding: 11px 16px;
  font-family: var(--font-sans);
  font-size: 12.6px; font-weight: 500;
  letter-spacing: .02em; text-transform: none;
  line-height: 1.4;
  white-space: nowrap;
  color: #4A2D21;
  opacity: 1;
  border-bottom: 0;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible{
  background: rgba(74,45,33,.07);
  color: #35231D;
}
.nav-dropdown a:active{
  color: #35231D;
  font-weight: 600;
}

.header-actions{ display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-shrink: 0; }
.header-actions .icon-btn svg{ width: 21.6px; height: 21.6px; }
.icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 41px; height: 41px; border-radius: 50%;
  color: var(--text);
  transition: background var(--dur-s) var(--ease);
}
.icon-btn:hover{ background: rgba(53,35,29,.08); }
.nav-toggle{ display: none; }
.site-header .icon-btn{ color: var(--ivory-warm); transition: color var(--dur-m) var(--ease), background var(--dur-s) var(--ease); }
.site-header .icon-btn:hover{ background: rgba(220,199,177,.16); }
.site-header.is-light .icon-btn{ color: var(--text); }
.site-header.is-light .icon-btn:hover{ background: rgba(53,35,29,.08); }

.search-bar{
  border-top: 1px solid rgba(220,199,177,.16);
  background: var(--mocha-deep);
  overflow: hidden;
  transition: background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.search-bar-inner{
  display: flex; align-items: center; gap: 14px;
  padding-block: 16px;
  color: var(--ivory-warm);
}
.search-bar-inner input{
  flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--ivory-warm);
  padding: 6px 2px; font-size: 1rem; color: var(--ivory-warm);
}
.search-bar-inner input::placeholder{ color: var(--taupe-accent); }
.search-bar-inner input:focus{ outline: none; border-color: var(--champagne-soft); }
.site-header.is-light .search-bar{ background: var(--header); border-top-color: rgba(53,35,29,.1); }
.site-header.is-light .search-bar-inner{ color: var(--text); }
.site-header.is-light .search-bar-inner input{ border-bottom-color: var(--text); color: var(--text); }
.site-header.is-light .search-bar-inner input::placeholder{ color: var(--text-secondary); }
.site-header.is-light .search-bar-inner input:focus{ border-color: var(--cta); }

/* Collapse the horizontal nav into the hamburger below the width where the
   full link row (Yeni Sezon / Tüm Ürünler / Çok Satanlar / Kadın / Erkek /
   Kişiye Özel / ONLINE ÖZEL) stops fitting next to the logo and icons —
   without this the two rows overlapped instead of the mobile drawer
   taking over. */
@media (max-width: 1024px){
  .nav{ display: none; }
  .nav-toggle{ display: inline-flex; }

  /* .header-inner's desktop grid (220px 1fr 180px) assumed the middle nav
     column was always present to absorb the remaining width. With .nav
     hidden above, the two fixed side columns (220+180=400px) no longer fit
     inside a narrow viewport on their own — this is what was causing
     horizontal overflow on mobile. Collapsing to a 2-column grid (fluid
     logo + auto-sized actions) fixes that at its source instead of hiding
     symptoms. */
  .header-inner{
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    height: 60px;
  }
  /* justify-self:start alone would size the box to the logo's natural
     content width (~138px) instead of its actual grid column, so at
     ≤375px it visually overlapped .header-actions instead of properly
     shrinking — measured with real iframe widths (320/360/375/390/430),
     not assumed. min-width:0 lets the flex box shrink below that content
     width, overflow:hidden + ellipsis on its two lines clip gracefully
     instead of spilling into the icons. */
  .logo{
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;
  }
  .logo-script,
  .logo-subtitle{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-actions{
    justify-self: end;
    gap: 4px;
  }
  .header-actions .icon-btn{
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 640px){
  .header-inner{
    height: 58px;
    gap: 5px;
  }
  .logo-script{
    font-size: 23px;
  }
  .logo-subtitle{
    font-size: 8px;
    letter-spacing: 1.6px;
  }

  /* Hesabım / Favoriler stay reachable from the mobile drawer's
     .mobile-nav-foot (already present in the markup) — hiding them here
     only reduces header icon density, it doesn't remove the destination. */
  .header-actions .icon-btn--secondary{
    display: none;
  }
}

/* Mobile nav */
.mobile-nav-backdrop{
  position: fixed; inset: 0; background: rgba(53,35,29,.28);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease);
  z-index: 600; border: 0; padding: 0;
}
.mobile-nav{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 86vw);
  background: var(--bg);
  z-index: 601;
  transform: translateX(100%);
  transition: transform var(--dur-m) var(--ease);
  display: flex; flex-direction: column;
  padding: 22px clamp(20px, 5vw, 32px) 32px;
  overflow-y: auto;
}
body.nav-open .mobile-nav{ transform: translateX(0); }
body.nav-open .mobile-nav-backdrop{ opacity: 1; pointer-events: auto; }
body.nav-open{ overflow: hidden; }

.mobile-nav-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mobile-nav-list{ display: flex; flex-direction: column; }
.mobile-nav-list a{
  display: block; padding: 15px 2px;
  font-family: var(--font-serif); font-size: 1.35rem;
  border-bottom: 1px solid rgba(53,35,29,.08);
}

.mobile-nav-toggle-item{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 15px 2px;
  font-family: var(--font-serif); font-size: 1.35rem; text-align: left;
  color: inherit; background: none; border: 0;
  border-bottom: 1px solid rgba(53,35,29,.08);
  cursor: pointer;
}
.accordion-chevron{
  flex-shrink: 0; margin-left: 12px; color: var(--text-secondary);
  transform: rotate(180deg);
  transition: transform var(--dur-s) var(--ease);
}
.mobile-nav-toggle-item[aria-expanded="true"] .accordion-chevron{ transform: rotate(0deg); }

.mobile-submenu{
  max-height: 0; overflow: hidden;
  transition: max-height 340ms var(--ease);
}
.mobile-submenu.is-open{ max-height: 400px; }
.mobile-submenu a{
  display: block;
  padding: 12px 2px 12px 16px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(53,35,29,.06);
}
.mobile-submenu li:last-child a{ border-bottom: 0; padding-bottom: 18px; }
.mobile-nav-foot{ margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mobile-nav-foot a{ display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: min(92vh, 920px);
  overflow: hidden;
}
.hero-track{
  position: absolute; inset: 0;
  display: flex;
  width: 100%; height: 100%;
  transition: transform 720ms var(--ease);
}
.hero-track.no-transition{ transition: none; }
.hero-slide{
  flex: 0 0 100%;
  min-width: 0;
  width: 100%; height: 100%;
  max-width: 100%;
  display: flex; align-items: center;
  position: relative;
}
.hero-media{
  position: absolute; inset: 0;
  background: linear-gradient(125deg, var(--mocha-deep) 0%, #2E2019 45%, var(--mocha-deep) 100%);
}
.hero-media-glow{
  position: absolute; right: -10%; top: 50%; translate: 0 -50%;
  width: min(60vw, 900px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(184,156,130,.4) 0%, rgba(184,156,130,0) 68%);
  pointer-events: none;
}
/* Cartier-style restraint: one real product photo per slide (never a
   placeholder illustration or an oversized ghost-text watermark),
   populated by initHomepageProductVisuals() in catalog.js from
   data-visual-product — same mechanism the category strip and campaign
   banner use, so there is one image-injection system for the whole
   homepage. Sizing/position lives in the body.home section below (after
   the generic [data-visual-product]{position:relative} rule, which this
   must win over at equal specificity — see the note there). */
.hero-visual{ display: block; }

.hero-content{ position: relative; z-index: 2; max-width: 620px; }
.hero-content .eyebrow{ margin-bottom: 20px; color: var(--taupe-accent); }
.hero-title{
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-hero); line-height: 1.04;
  color: var(--ivory-warm); margin-bottom: 22px;
}
.hero-sub{
  font-size: 1.1rem; color: var(--champagne-soft);
  max-width: 420px; margin-bottom: 34px;
}

/* Keyboard focus needs to stay visible against the dark hero — the site-wide
   default outline is a dark brown that would disappear on this background. */
.hero :focus-visible{ outline-color: var(--champagne-soft); }

/* ---- Carousel arrows ---- */
.hero-arrow{
  position: absolute; top: 50%; translate: 0 -50%;
  z-index: 6;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--champagne-soft);
  background: transparent;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.hero-arrow:hover{ background: rgba(245,239,232,.1); color: var(--ivory-warm); }
.hero-arrow--prev{ left: clamp(10px, 2.6vw, 28px); }
.hero-arrow--next{ right: clamp(10px, 2.6vw, 28px); }

/* ---- Carousel pagination — clean capsule-dot cluster, in a soft dark
   pill so it reads at consistent contrast whether the slide behind it is
   the dark brown media (slides 2–4) or a light campaign photo (slide 1). ---- */
.hero-pagination{
  position: absolute; left: 50%; bottom: 30px; translate: -50% 0;
  z-index: 6;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(30,18,12,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.hero-dot{
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.hero-dot::after{
  content: '';
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(245,239,232,.5);
  transition: width var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.hero-dot:hover::after{ background: rgba(245,239,232,.8); }
.hero-dot:focus-visible{ outline: 2px solid var(--champagne-soft); outline-offset: 2px; }
.hero-dot.is-active::after{ width: 22px; background: var(--champagne-soft); }

/* ==========================================================================
   Sections — shared
   ========================================================================== */
.section{ padding-block: var(--section-pad); }
.section--alt{ background: var(--bg-secondary); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--mocha-deep); color: var(--footer-muted); position: relative; border-top: 1px solid rgba(255,248,240,.10); }
/* Footer content is capped narrower than the site's default container so
   five columns of copy stay compact and readable instead of stretching
   thin across an ultra-wide viewport. */
.site-footer .container{ max-width: 1320px; margin-inline: auto; }

/* ---- Footer top: intro + nav columns ----
   Single, consolidated color/type system for the whole footer-top area —
   intro block + all four nav columns. Every value below is literal (not a
   themed custom property), on purpose: it's the same premium palette on
   every page, homepage included, so no body.home-scoped or bolt-on global
   duplicate of these rules is needed anymore (see the two override blocks
   further down, which now only carry footer-lower/payment/security colors
   — the one part of the footer this redesign intentionally leaves alone). */
.footer-top{
  display: grid;
  grid-template-columns:
    minmax(250px, 270px)
    minmax(190px, 215px)
    minmax(175px, 195px)
    minmax(210px, 230px)
    minmax(250px, 280px);
  justify-content: space-between;
  align-items: start;
  column-gap: 40px;
  padding: 40px 0 28px;
}
.footer-top{ align-items: start !important; }
.footer-intro,
.footer-col{
  margin-top: 0;
  padding-top: 0;
  align-self: start !important;
}
.footer-intro{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  width: 270px !important;
  max-width: 270px !important;

  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  position: relative !important;

  align-self: start !important;
  justify-self: start !important;
}
/* Above 1400px the footer's own 1320px container no longer spans the
   viewport, so the real empty space to its left (between the viewport/
   footer edge and the container) is not part of the brand block's grid
   track. Pulling the block left by a fixed offset here centers it in
   that outer gap without touching the grid (Kurumsal's track, and
   therefore its x position, is untouched by a transform on a sibling). */
@media (min-width: 1400px){
  .footer-intro{
    transform: translateX(-127.5px) !important;
  }
}
.footer-intro > *{
  margin-left: 0 !important;
  transform: none !important;
}
.footer-intro .eyebrow{
  display: block;
  width: 100%;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  color: rgba(247,237,227,.75);
  font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: 1.8px;
  text-align: left !important;
}
.footer-heading{
  width: 100%;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px;
  line-height: 1.2; color: #FFF8F0;
  text-align: left !important;
}
.footer-intro-text{
  width: 245px !important;
  max-width: 245px !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  color: rgba(243,231,220,.72); font-size: 13px; font-weight: 400; line-height: 1.6;
  text-align: left !important;
}
.footer-cta{
  margin: 0 !important;
  align-self: flex-start !important;

  height: auto; box-sizing: border-box; overflow: visible;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255,248,240,.24); border-radius: 999px;
  background: transparent;
  color: #FFF8F0;
  padding: 12px 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .22s ease, border-color .22s ease;
}
.footer-cta-label{ flex: none; white-space: nowrap; line-height: 1; }
.footer-cta svg{
  width: 14px; height: 14px; padding: 0; border-left: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.footer-cta:hover{ background: rgba(255,248,240,.08); border-color: rgba(255,248,240,.42); }
/* The decorative rule under the intro heading and the small diamond rule
   under each column heading are removed from this page's markup; this
   kill-switch keeps them from ever rendering (unstyled) on any other page
   that still has the old .footer-ornament / .col-rule markup, without
   having to edit every one of those files. */
.footer-ornament, .col-rule{ display: none; }

.footer-col h3{
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
  color: #F7EDE3;
  margin: 0 0 18px;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 7px; }
/* Text link rows carry a tiny hairline mark instead of a bullet/icon —
   flex row so it and the label sit on one baseline; the mark brightens
   and widens on hover alongside the row's own translateX, giving a quiet
   sense of motion without turning into an icon list. */
.footer-col a, .footer-col span{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; line-height: 1.55; color: #F3E7DC; opacity: 1;
  transition: color .22s ease, transform .22s ease;
}
.footer-col a::before{
  content: "";
  width: 10px; height: 1px; flex: none;
  background: rgba(243,231,220,.35);
  transition: width .22s ease, background .22s ease;
}
.footer-col a:hover{ color: #FFFFFF; transform: translateX(3px); }
.footer-col a:hover::before{ width: 16px; background: rgba(255,255,255,.75); }
.footer-col--contact{ width: 100%; min-width: 0; }
.footer-col--contact ul{ width: 100%; gap: 7px; }
.footer-col--contact li{ width: 100%; }
/* A fixed 20px icon column + a flexible text column, instead of the old
   inline-flex row — every row's text now starts at the exact same X
   regardless of how wide its own icon glyph happens to be. The hairline
   mark from the text columns is dropped here — the icon already reads as
   the row's indicator, so keeping both would read as clutter. */
.footer-col--contact a,
.footer-col--contact span{
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 11px;
  align-items: center;
}
.footer-col--contact a{
  display: grid;
  width: 100%;
}
.footer-col--contact a::before{ display: none; }
.footer-col--contact svg{
  width: 20px !important; height: 20px !important;
  min-width: 20px; min-height: 20px;
  display: block;
  justify-self: center; align-self: center;
  flex: none;
  stroke-width: 1.6 !important;
  opacity: 1 !important;
  color: rgba(247,237,227,.82);
  transition: color .22s ease;
}
.footer-col--contact a:hover svg{ color: #FFFFFF; }

/* ---- Trust strip ---- */
.footer-trust{ border-top: 1px solid rgba(184,156,130,.2); }
.footer-trust-inner{
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-block: 28px;
}
.trust-item{
  display: flex; align-items: center; gap: 14px;
  padding-inline: clamp(10px, 1.6vw, 22px);
  border-left: 1px solid rgba(184,156,130,.2);
}
.trust-item:first-child{ border-left: 0; padding-left: 0; }
.trust-item svg{ color: var(--champagne-soft); flex-shrink: 0; }
.trust-item strong{ display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ivory-warm); margin-bottom: 4px; }
.trust-item span{ font-size: 12px; color: var(--footer-muted); }

/* ---- Lower footer: payment logos + brand + security, ONE row, ONE background ---- */
.footer-lower{
  background: var(--mocha-deep);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 0;
}

.footer-lower-inner{
  display: grid;
  grid-template-columns: 1fr 190px 1fr;
  align-items: center;
  gap: 30px;
  min-height: 84px;
  padding: 10px 0;
}
.footer-lower-inner > *{ min-width: 0; }

.footer-payment-area{
  justify-self: start;
  align-self: center;
  display: flex;
  align-items: center;
  min-width: 0;
}
.footer-payment-area .payment-icons{
  margin: 0;
  padding: 0;
  max-width: 300px;
  align-content: center;
}

.payment-icons{
  display: flex; flex-direction: column;
  gap: 9px;
}
.payment-row{
  display: flex; align-items: center; flex-wrap: nowrap;
  min-height: 24px;
  gap: 9px;
}
.payment-row li{ display: flex; align-items: center; }
.payment-icons img{ display: block; width: auto; object-fit: contain; }

/* Explicit per-logo heights — each logo's own aspect ratio (via
   width:auto) keeps proportions intact; Troy/Axess/Bankkart stay
   intentionally smaller since their wordmarks read visually heavier than
   Visa/Mastercard/World at an equal height. All sit on the row's shared
   align-items:center line, so every logo's vertical center matches
   regardless of its own height. */
.pay-visa{ height: 22px; }
.pay-mastercard{ height: 21px; }
.pay-troy{ height: 21px; }
.pay-bonus{ height: 18px; }
.pay-world{ height: 17px; }
.pay-axess{ height: 18px; }
.pay-paraf{ height: 18px; }
.pay-bankkart{ height: 17px; }

.payment-row li.pay-chip{
  display: flex; align-items: center; justify-content: center;
  min-height: 26px;
  background: rgba(245,239,232,.92);
  padding: 1px 3px;
  border-radius: 3px;
}

/* No more absolute-centering hack — the monogram is a real grid item in
   the middle 190px column, so it lines up on the same horizontal center
   as the payment logos (left) and security badges (right) for real. */
.footer-monogram{
  position: static;
  transform: none;
  justify-self: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #F3E9DF;
}

.footer-monogram .mg{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -.04em;
  line-height: 1;
  color: #F3E9DF;
}
.footer-monogram .mg::before,
.footer-monogram .mg::after{
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: rgba(243,233,223,.22);
}

.footer-monogram .since{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  color: #D7B98B;
  white-space: nowrap;
}
.footer-monogram .since::before,
.footer-monogram .since::after{
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(215,185,139,.65);
}

.footer-copyright{
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  font-size: 8.5px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: rgba(243,233,223,.62);
}

.footer-security{
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 22px;
  color: #F3E9DF;
}

.footer-security-item{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.footer-security-item > svg{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #D7B98B;
}
.footer-security-item--guarantee > svg{ color: #D7B98B; }

.footer-security .fs-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  color: rgba(243,233,223,.66);
  font-size: 9.5px;
  line-height: 1.3;
  white-space: normal;
}
.footer-security .fs-text em{
  color: #F3E9DF;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.footer-security-divider{
  display: block;
  width: 1px;
  height: 26px;
  background: rgba(243,233,223,.20);
}

/* ---- Footer responsive: 5 cols desktop → 2-3 cols tablet → 1 col mobile.
   The lower row (payment / MG / security) is a real 3-column grid now
   (see .footer-lower-inner above) — mobile just collapses it to one
   column and lets each item's own `order` stack them payment → MG →
   security, per spec. ---- */
@media (max-width: 1024px){
  .footer-top{ grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  .footer-intro{ grid-column: 1 / -1; padding-right: 0; }
  .footer-intro-text{ max-width: 420px; }
}
@media (max-width: 640px){
  .footer-top{ grid-template-columns: 1fr; gap: 26px; padding: 40px 0 10px; }
  .footer-intro{ grid-column: auto; }
  .footer-intro-text{ max-width: none; }
  /* Comfortable ~40px tap targets without changing the visible row rhythm:
     padding expands the hit area, the matching negative margin cancels it
     back out visually so the 12px gap between links still reads as-is. */
  .footer-col a, .footer-col--contact a{ padding-block: 7px; margin-block: -7px; }

  .footer-lower-inner{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    padding: 20px 0 22px;
  }
  .footer-payment-area{ justify-self: center; order: 1; }
  .footer-payment-area .payment-icons{ max-width: none; align-items: center; gap: 6px; }
  .payment-row{ justify-content: center; gap: 8px; }
  .payment-row img{ max-height: 24px; max-width: 76px; width: auto; }
  .footer-monogram{ order: 2; }
  .footer-monogram .mg{ font-size: 30px; }
  .footer-monogram .since{ margin-top: 2px; }
  .footer-copyright{ margin-top: 6px; font-size: 10px; }
  .footer-security{
    justify-self: center; order: 3;
    flex-direction: column; gap: 10px;
  }
  .footer-security-item{ justify-content: center; gap: 10px; }
  .footer-security-item > svg{ width: 21px; height: 21px; }
  .footer-security .fs-text{ align-items: flex-start; }
  .footer-security .fs-text em{ font-size: 11px; }
  .footer-security .fs-text span{ font-size: 10px; }
  .footer-security-divider{ width: 110px; height: 1px; }
}

/* ==========================================================================
   RECONSTRUCTED BASE — product card / image / badges / favorite button
   (2026-08-19h). This shared component renders on every catalog context —
   shop grids, cart, search, favorites, related products, and (via the
   optional variantClass hook) the homepage — see js/catalog.js
   renderProductCard(). Homepage-specific overrides live in the body.home
   -scoped block right below this one and win the cascade by source order.
   Reconstructed after an accidental truncation removed the original rules;
   written fresh against only the CSS custom properties confirmed present
   in :root above, matching the site's existing warm/champagne/mocha
   language rather than guessing at exact prior pixel values.
   ========================================================================== */
.product-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid rgba(53,35,29,.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(58,36,28,.08);
  transition: box-shadow var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.product-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(58,36,28,.12); }

.product-card-media-link{ display: block; }

.product-image{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bg-secondary) 0%, var(--bg) 62%, var(--silver) 130%);
  display: flex; align-items: center; justify-content: center;
}
.product-image-fallback{ width: 34%; color: var(--champagne); }
/* object-fit:contain everywhere a product photo renders — never crop a
   jewelry detail. Padding keeps the photo off the container edges so
   "contain" still reads as a considered canvas, not a shrunken thumbnail. */
.product-image-photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: contain; object-position: center;
  padding: 14px; box-sizing: border-box;
  transition: transform var(--dur-m) var(--ease);
}
/* Subtle hover only: a light image scale + the existing -3px card lift
   below — no dramatic zoom, no glow, no heavy shadow. */
.product-card:hover .product-image-photo{ transform: scale(1.02); }
.product-image-hover{ opacity: 0; transition: opacity var(--dur-s) var(--ease); }
.product-card:hover .product-image-hover{ opacity: 1; }

.product-card-badges{
  position: absolute; top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; z-index: 4;
}
.product-badge{
  display: inline-block;
  background: var(--cta); color: var(--cta-text);
  font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 7px; border-radius: var(--radius-sm);
}

/* ---- Favorite toggle — fixed-size circular button. Root cause of the
   earlier oversized-heart bug: with this rule missing, the bare
   <svg viewBox="0 0 24 24"> inside .card-fav-icon had no CSS size
   constraint and rendered at a large intrinsic default. ---- */
.card-fav-btn{
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cta-text);
  color: var(--cta);
  border: 1px solid rgba(53,35,29,.12);
  z-index: 5;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.card-fav-btn:hover{ transform: scale(1.06); }
.card-fav-icon{
  width: 16px; height: 16px; max-width: 16px; max-height: 16px;
  display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.card-fav-btn.is-active{ color: #A63A2E; }
.card-fav-btn.is-active .card-fav-icon{ fill: currentColor; }

.product-card-caption{
  display: block;
  padding: 16px 18px 18px;
  background: var(--bg-secondary);
  color: var(--text);
}
.product-card-caption h3{
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--text);
}
.product-card-material{
  display: block; margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary);
}
.price-row{ display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.price{ font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--text); }
.price-old{ font-size: 12px; font-weight: 500; color: var(--text-secondary); text-decoration: line-through; }
.price-tba{ font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.stock-out{
  display: inline-block; margin-top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary);
}

.container--narrow{ max-width: 1440px; padding-inline: clamp(20px, 2.2vw, 32px); }

/* ==========================================================================
   SHOP / COLLECTION PAGES — one authoritative system for every inner page
   built on the shared .page-header / .content-section / .product-grid
   markup: every category page, tum-urunler, yeni-sezon, cok-satanlar,
   online-ozel, kisiye-ozel. None of this had ANY rules anywhere in this
   file before now — .content-section, .product-grid, .filter-chip,
   .page-header etc. were completely unstyled, so these pages rendered as
   plain stacked blocks. Built on the --inner-* tokens already declared in
   :root for exactly this ("inner pages only, never referenced by the
   homepage") but never previously used.
   ========================================================================== */
/* Belt-and-suspenders, same reasoning as the header fix above: guarantees
   every non-homepage page sits on the warm inner palette even before
   .inner-main's own background paints, and can never inherit the sitewide
   --bg (a paler, homepage-adjacent token this rule deliberately avoids
   touching). */
body:not(.home){ background: var(--inner-base); color: var(--inner-text); }
.inner-main{ background: var(--inner-base); }
/* .section--alt's own rule uses the sitewide --bg-secondary token (shared
   with non-inner-page consumers this task must not touch) — on inner
   pages specifically it needs the warm --inner-alt instead, or it's the
   exact near-white leftover this task is about. */
.inner-main .section--alt{ background: var(--inner-alt); }
/* Inner pages read too empty at the sitewide 1400px container — a
   narrower, still-generous width keeps copy/cards from stranding in a
   small strip of a wide screen. Header/footer sit outside .inner-main and
   keep the sitewide .container width untouched. */
.inner-main .container{ max-width: 1220px; }

/* ---- Breadcrumb ---- */
.breadcrumb{
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
}
.breadcrumb a{ color: var(--text-secondary); transition: color var(--dur-s) var(--ease); }
.breadcrumb a:hover{ color: var(--cta); }
.breadcrumb span:last-child{ color: var(--text); }
.crumb-sep{ opacity: .5; }

/* ---- Collection hero — compact, not a full second hero ---- */
.page-header{
  padding: 42px 0 44px;
  background: linear-gradient(180deg, var(--inner-alt) 0%, var(--inner-base) 100%);
  border-bottom: 1px solid rgba(74,45,33,.08);
}
.page-header .eyebrow{ color: var(--inner-mocha); margin-top: 18px; }
.page-title{
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(2rem, 2.6vw + 1rem, 3.2rem); line-height: 1.05;
  color: var(--text); margin-top: 8px;
}
.page-intro{
  margin-top: 14px; max-width: 560px;
  font-size: 15px; line-height: 1.7; color: var(--inner-body); font-weight: 500;
}
.page-header--slim{ padding: 22px 0; background: var(--inner-base); border-bottom: 0; }

/* ---- Kişiye Özel Kolye hero: stronger contrast/weight than the default
   .page-header — scoped so no other page's header is affected. Tighter
   bottom padding + .content-section--pn's own reduced top padding
   (below) keep the hand-off into the product grid from feeling like two
   separate sections. ---- */
.page-header--pn{ padding-bottom: 30px; border-bottom-color: rgba(74,45,33,.18); }
.page-header--pn .breadcrumb{ font-size: 13px; color: #4A342B; }
.page-header--pn .breadcrumb a{ color: #4A342B; }
.page-header--pn .breadcrumb span:last-child{ color: #2A1B14; }
.page-header--pn .eyebrow{ color: #3D2415; font-weight: 700; }
.page-header--pn .page-title{
  font-weight: 700; line-height: 1.1; color: #2A1B14;
  font-size: clamp(2.2rem, 2vw + 1.6rem, 3rem);
  margin-top: 10px;
}
.page-header--pn .page-intro{ color: #5A4034; font-weight: 500; font-size: 16px; margin-top: 14px; }
.content-section--pn{ padding-top: 34px; }
@media (max-width: 1023px){
  .content-section--pn{ padding-top: 30px; }
}

/* ---- Hakkımızda hero: a touch more presence than the plain text-only
   hero used elsewhere — a slightly wider/stronger intro line and one tiny
   decorative rule+label beneath it. No image, no box; scoped to this one
   page's hero so every other page's .page-header is untouched. ---- */
.page-header--about .page-intro{ max-width: 620px; font-size: 16px; }
.page-header-meta{ display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.page-header-meta-rule{ display: block; width: 40px; height: 1px; background: rgba(74,45,33,.35); }
.page-header-meta-label{
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #6A4A3B;
}

/* Collection hero with a representative visual — used only on the pages
   where a real, verified product photo exists for that category. Pages
   with no inventory yet keep the plain text-only .page-header above
   rather than invent a product image. */
.page-header--visual .container{
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr);
  align-items: center; gap: 40px;
}
.page-header-visual{
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 8px; overflow: hidden; background: var(--inner-card);
}
.page-header-visual svg{
  position: absolute; inset: 0; margin: auto; width: 38%; height: 38%; color: var(--inner-deep);
}
.page-header-visual .product-image-photo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; padding: 22px; box-sizing: border-box;
}

/* ---- Vertical rhythm ---- */
.content-section{ padding-block: 58px; }
.content-section--tight{ padding-block: 22px; }
.content-section--deep{ padding-block: 58px; }
.content-section--catalog-pad{ padding-top: 4px; }
@media (max-width: 1023px){
  .content-section{ padding-block: 48px; }
  .content-section--deep{ padding-block: 48px; }
}
@media (max-width: 640px){
  .content-section{ padding-block: 36px; }
  .content-section--deep{ padding-block: 36px; }
}

/* ---- Toolbar: result count + filter chips + sort, one compact row —
   no heavy sidebar. ---- */
.category-toolbar{
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px;
  padding-bottom: 22px; border-bottom: 1px solid var(--inner-border);
}
.category-count{
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-secondary); white-space: nowrap;
}
.category-filters{ display: flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
.filter-chip{
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 100px;
  background: var(--inner-card); border: 1px solid var(--inner-border); color: var(--text-secondary);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.filter-chip:hover{ border-color: var(--inner-mocha); color: var(--text); }
.filter-chip.is-active,
.filter-chip[aria-pressed="true"]{
  background: var(--inner-mocha); border-color: var(--inner-mocha); color: var(--cta-text);
}
.sort-select{
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: var(--radius-md);
  padding: 9px 14px; cursor: pointer;
}

/* ---- Product grid: spacious editorial density, never a cramped catalog.
   3 columns is the desktop default; 4 only opens up once there's enough
   width for cards to stay generous rather than narrow. ---- */
.product-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px;
}
@media (min-width: 1440px){
  .product-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
}
@media (max-width: 1024px){
  .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 420px){
  .product-grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Empty / informational states: no inventory yet in a category, no
   filter matches, product not found, "catalog expanding" note. ---- */
.empty-state{
  text-align: center; max-width: 480px; margin-inline: auto;
  padding: 56px 32px; background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 10px;
}
.empty-state svg{ width: 56px; height: 56px; margin: 0 auto 18px; color: var(--inner-deep); }
.empty-state h3{ font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--text); }
.empty-state p{ margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.catalog-note{ margin-top: 40px; }
/* Demoted to a quiet secondary strip the moment real product cards exist
   above it (toggled in js/catalog.js), so it never outweighs the grid. */
.catalog-note.is-compact{
  padding: 20px 26px; max-width: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  text-align: left; background: transparent; border: 0; border-top: 1px solid var(--inner-border); border-radius: 0;
}
.catalog-note.is-compact h3{ font-size: 15px; }
.catalog-note.is-compact p{ margin-top: 4px; font-size: 13px; }

/* ---- Reassurance strip ---- */
.reassurance-row{
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 28px;
  padding-top: 22px; border-top: 1px solid var(--inner-border);
}
.reassurance-item{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.reassurance-item svg{ color: var(--inner-mocha); flex-shrink: 0; }
a.reassurance-item:hover{ color: var(--text); }

/* ==========================================================================
   PRODUCT DETAIL — urun.html: large gallery left, information right
   ========================================================================== */
.split-layout{
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,1fr);
  gap: 56px; align-items: start;
}
.product-gallery{ position: relative; }
.product-gallery-main{ border-radius: 8px; overflow: hidden; }
.product-gallery-main .product-image{ aspect-ratio: 4 / 5; background: var(--inner-card); }
.product-gallery-main .product-image-photo{ padding: 28px; box-sizing: border-box; }
.gallery-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--inner-card); color: var(--text);
  border: 1px solid var(--inner-border);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.gallery-arrow:hover{ background: var(--cta); color: var(--cta-text); }
.gallery-arrow--prev{ left: 14px; }
.gallery-arrow--next{ right: 14px; }
.product-gallery-thumbs{ display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.gallery-thumb{
  flex: 0 0 72px; width: 72px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--inner-border); opacity: .7;
  transition: opacity var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.gallery-thumb .product-image{ aspect-ratio: 4 / 5; background: var(--inner-card); }
.gallery-thumb .product-image-photo{ padding: 8px; box-sizing: border-box; }
.gallery-thumb:hover{ opacity: 1; }
.gallery-thumb.is-active{ opacity: 1; border-color: var(--inner-mocha); }

.product-info{ padding-top: 4px; }
.product-info > .eyebrow{ color: var(--inner-mocha); }
.product-title{
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.8rem, 1.6vw + 1.2rem, 2.6rem); line-height: 1.12;
  color: var(--text); margin-top: 10px;
}
.product-info > .product-card-material{ display: block; margin-top: 10px; font-size: 12px; }
.product-price-row{ margin-top: 16px; }
.product-price-row .price{ font-size: 26px; font-weight: 700; }
.product-price-row .price-old{ font-size: 14px; margin-left: 4px; }
/* Resets the card-context absolute badge positioning (top-left overlay
   on a photo) back to a normal inline row for the detail page. */
.product-badges .product-card-badges{ position: static; flex-direction: row; flex-wrap: wrap; margin-top: 14px; }
.product-description{ margin-top: 20px; max-width: 46ch; font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.product-details-list{ margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.product-details-list li{ position: relative; padding-left: 16px; font-size: 13px; color: var(--text-secondary); }
.product-details-list li::before{
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--inner-mocha);
}
.product-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.product-actions .btn{ padding: 15px 28px; }
.qty-control{ display: flex; align-items: center; border: 1px solid var(--inner-border); border-radius: var(--radius-md); overflow: hidden; }
.qty-control button{
  width: 38px; height: 44px; font-size: 16px; font-weight: 600;
  background: var(--inner-card); color: var(--text);
  transition: background var(--dur-s) var(--ease);
}
.qty-control button:hover{ background: var(--inner-alt); }
.qty-control input{
  width: 44px; height: 44px; border: 0; border-left: 1px solid var(--inner-border); border-right: 1px solid var(--inner-border);
  text-align: center; background: var(--inner-input); color: var(--text); font-weight: 600;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.product-status{ display: none; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--inner-mocha); }
.product-status.is-visible{ display: block; }

@media (max-width: 900px){
  .split-layout{ grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px){
  .page-header{ padding: 32px 0 28px; }
  .page-header--visual .container{ grid-template-columns: 1fr; gap: 20px; }
  .page-header-visual{ aspect-ratio: 16 / 10; order: -1; }
  .content-section{ padding-block: 40px; }
  .content-section--tight{ padding-block: 18px; }
  .category-toolbar{ gap: 12px; }
  .category-filters{ margin-right: 0; width: 100%; }
  .sort-select{ width: 100%; }
  .reassurance-row{ gap: 16px 22px; }
}

/* ==========================================================================
   HOMEPAGE BODY — single authoritative system (image-system normalization
   2026-08-19i). This is the ONLY place homepage `.home-*` selectors are
   defined anywhere in this file. No !important anywhere below: since there
   is exactly one definition per selector, none is needed. Deliberately
   placed at the end of the file — after every shared/global rule, including
   the generic mobile `.section{padding-block:...}` override — so the
   mobile rules here always win on source order without having to
   out-specificity anything. Scoped by `body.home` (set only on
   index.html); no inner page, shop page, cart, search, or product-detail
   page is affected.

   ONE homepage image treatment: object-fit:contain, object-position:center,
   width/height 100%, everywhere — nothing on this page ever crops a
   product photo. Editorial/banner panels (Gift, Baget Koleksiyonu) use the
   4:5 `<id>-home.webp` derivative (see resolveHomeVisualSrc in
   catalog.js) instead of the raw 941×1672 portrait, since a 4:5 photo
   letterboxes far less inside a landscape panel. Ordinary product cards
   (Featured, Bestsellers, Recommend) use the raw catalog photo and rely on
   `contain` + generous, IDENTICAL padding within each section — no
   per-product exceptions.
   ========================================================================== */

/* Homepage palette — self-contained token set, deliberately decoupled from
   the site's global --bg/--bg-secondary/--header/--mg-surface tokens (those
   must never be referenced directly by a body.home rule — this is the only
   place the homepage's own colors are defined):
     --home-brown        #4A2D21  — hero, Why Mert Gümüş, both footer layers,
                                     the header (solid, no scroll switching)
     --home-beige         #E6D1C0  — every middle section's outer background;
                                     also body.home's own base background, so
                                     no #F7F1EA gap can ever show between
                                     sections
     --home-beige-strong  #E7D0BF  — product/image surfaces. Exact sampled
                                     pixel color of the homepage product
                                     photos' own backdrop — matching this
                                     exactly (not an approximate champagne
                                     token) is what stops a visible seam from
                                     appearing wherever object-fit:contain
                                     leaves a gap around a photo
     --home-card-text     #F3E6DB  — product/card text surfaces needing
                                     separation from their image/section:
                                     a soft warm beige, never white
     --home-text          #35231D  — primary text
     --home-text-muted    #74665F  — secondary text
   --mg-dark/--mg-text alias --home-brown/--home-text so every existing
   var(--mg-dark) / var(--mg-text) consumer picks up the homepage-local
   values automatically. */
body.home{
  --home-brown: #4A2D21;
  --home-beige: #E6D1C0;
  --home-beige-strong: #E7D0BF;
  --home-card-text: #EAD8C8;
  --home-text: #35231D;
  --home-text-muted: #74665F;
  --mg-light: #F7F1EA;
  --mg-dark: var(--home-brown);
  --mg-text: var(--home-text);
  --mg-text-light: #FFF6EE;
  --mg-text-sub: rgba(53,35,29,.85);
  --mg-text-light-sub: rgba(255,246,238,.8);
  --mg-border: rgba(74,45,33,.14);
  background: var(--home-beige);
  color: var(--mg-text);
}

/* ---- Shared homepage type ---- */
body.home .home-section-head{ margin-bottom: 26px; }
body.home .home-section-head--row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
/* Right-side section CTA (e.g. "Tümünü Gör →") — makes a collection
   section read as a real commerce homepage row rather than a plain
   heading. Reused wherever a section links out to its full listing. */
body.home .home-section-cta{
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding-bottom: 4px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--mg-text); border-bottom: 1px solid var(--mg-border);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
body.home .home-section-cta svg{ transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine){
  body.home .home-section-cta:hover{ border-color: var(--mg-text); }
  body.home .home-section-cta:hover svg{ transform: translateX(3px); }
}
body.home .home-eyebrow{
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mg-text-sub); margin: 0; background: none; border: 0; padding: 0;
}
/* Defined after `.home-eyebrow` on purpose: an eyebrow that also carries
   this class sits on a dark surface and needs the light color to win —
   letting a later, section-specific dark-text rule land after this one
   would silently make it unreadable again. */
body.home .home-eyebrow--light{ color: var(--mg-text-light-sub); }
body.home .home-h2{
  font-family: var(--font-serif); font-size: clamp(30px, 2.6vw, 40px); font-weight: 650; letter-spacing: -.012em; line-height: 1.08;
  color: var(--mg-text); margin: 6px 0 0;
}
body.home .home-h2--light{ color: var(--mg-text-light); }
/* "Neden [Mert Gümüş]?" signature accent — Allura, not Sacramento, sized
   relative to the parent h2 so it scales at every breakpoint. */
body.home .brand-script{
  font-family: 'Allura', cursive;
  font-size: 1.45em; font-weight: 400; letter-spacing: .01em; line-height: 1;
}

/* ---- Homepage header: solid --home-brown at all times — no .is-light /
   .is-scrolled background switching. Logo/nav/icon colors stay light to
   match, regardless of scroll state. ---- */
body.home .site-header{
  background: rgba(74,45,33,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body.home .site-header .logo,
body.home .site-header .nav-list a,
body.home .site-header .icon-btn{ color: var(--mg-text-light); }
body.home .nav-list a{ font-weight: 700; letter-spacing: .025em; }
body.home .site-header .nav-dropdown a{ color: #4A2D21; font-weight: 500; letter-spacing: .02em; }
body.home .site-header .nav-dropdown a:hover,
body.home .site-header .nav-dropdown a:focus-visible{ color: #35231D; }
body.home .search-bar{ background: var(--home-beige-strong); border-top-color: var(--mg-border); }
body.home .search-bar-inner{ color: var(--mg-text); }
body.home .search-bar-inner input{ border-bottom-color: var(--mg-text); color: var(--mg-text); }
body.home .search-bar-inner input::placeholder{ color: var(--mg-text-sub); }
body.home .search-bar-inner input:focus{ border-color: var(--mg-dark); }

/* ---- Hero: solid --home-brown, exactly matching the header/Why Us
   strip/footer — no gradient. Slide structure/behavior (autoplay, arrows,
   pagination, swipe, reduced-motion) is untouched. ---- */
body.home .hero-media{
  background: var(--home-brown);
}
body.home .hero-media-glow{ display: none; }
body.home .hero{ min-height: 620px; }
body.home .hero-title{ font-size: clamp(3rem, 5vw, 58px); }
body.home .hero-content{ max-width: 460px; }
body.home .hero-sub{ max-width: 360px; }
body.home .hero-pagination{ bottom: 12px; }

/* ---- ONE homepage product-image treatment: never crop, never stretch,
   never force a per-product scale. Wrapper is flex-centered, overflow
   hidden (see the shared .product-image rule); the photo itself is
   width/height 100%, object-fit:contain, object-position:center,
   box-sizing:border-box. Every homepage visual (hero, category strip,
   campaign banner, story cards, discovery module) renders the same
   '<id>-home.webp' 1000×1250 derivative, so identical containers with
   identical padding already produce identical relative scale — no
   transform:scale correction needed or applied. ---- */
body.home .product-image,
body.home [data-visual-product]{ position: relative; overflow: hidden; }
body.home .product-image-photo{
  display: block; width: 100%; height: 100%; max-width: none; margin: 0; box-sizing: border-box;
  object-fit: contain; object-position: center center;
}
body.home .product-image:has(.product-image-photo) .product-image-fallback,
body.home [data-visual-product]:has(.product-image-photo) svg{ display: none; }

/* Hero visual sizing — must come after the generic [data-visual-product]
   rule above so position:absolute wins the cascade at equal specificity.
   No hard frame — no border, no boxed background, no heavy box-shadow,
   no vignette/mask — the photo's own warm studio background is the only
   backdrop; object-fit:contain (set globally above) keeps it uncropped. */
body.home .hero-visual{
  position: absolute; right: 9%; top: 50%; translate: 0 -50%;
  width: min(40vw, 430px); aspect-ratio: 4 / 5;
  overflow: visible;
}

/* ---- Hero slide 1 — %10 campaign photo: a real background image (never
   a placeholder) filling the whole slide, with real HTML copy overlaid
   into the photo's empty middle band (product flat-lay sits ~0–28% from
   the left, the model's face/hand sit from ~61% on) so neither ever gets
   covered. Height is pinned close to the photo's own 3:1 ratio so
   object-fit:cover only trims the far outer edges, keeping that band
   clear at ordinary desktop widths. ---- */
body.home .hero{ height: clamp(620px, 33vw, 640px); min-height: 0; }
body.home .hero-campaign-img{
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
body.home .hero-campaign-content{
  position: absolute; z-index: 2; top: 50%; left: 50%; translate: -50% -50%;
  width: 390px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0;
}
body.home .hero-campaign-eyebrow{
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: .22em;
  color: var(--mg-dark); margin: 0 0 8px;
}
/* %10 is two separately-sized glyphs (the % mark reads smaller and sits
   higher than the digits in the reference), so it is built as two spans
   baseline-aligned on a flex row rather than one text node. */
body.home .hero-campaign-percent{
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  margin: 0 0 4px; line-height: 1;
}
body.home .hero-campaign-symbol{
  font-family: "Cormorant Garamond", serif; font-size: 82px; line-height: .9; font-weight: 500;
  color: #B4875D; transform: translateY(-8px);
}
/* Cormorant Garamond's lining "1" reads as a capital I at this size —
   Georgia's oldstyle "1" has a clear top serif/foot, so only the "10"
   numeral (not the % symbol) switches face here. */
body.home .hero-campaign-number{
  font-family: Georgia, "Times New Roman", serif; font-size: 150px; line-height: .82; font-weight: 500;
  color: #B4875D; letter-spacing: -0.02em; display: inline-block;
}
body.home .hero-campaign-discount{
  font-family: var(--font-serif); font-weight: 500; font-size: 64px;
  line-height: .95; letter-spacing: .12em; color: #4A2D21; margin: 4px 0 12px;
}
body.home .hero-campaign-rule{
  display: block; width: 48px; height: 1px; background: #b4875d;
  margin: 0 auto 18px;
}
body.home .hero-campaign-note{
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: .08em;
  color: #8C755F; margin: 0 0 16px;
}
body.home .hero-campaign-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 265px; height: 50px; margin-bottom: 0;
  border-radius: 2px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: #4A2D21; color: #fff;
  box-shadow: 0 10px 26px rgba(74,45,33,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), gap .25s var(--ease), background .25s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  body.home .hero-campaign-cta:hover{ transform: translateY(-3px); gap: 14px; box-shadow: 0 14px 32px rgba(74,45,33,.36); }
}
body.home .hero-campaign-fine{
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 1.35;
  color: #5F4B3F; text-align: center; margin: 14px 0 0; max-width: 280px;
}
body.home .hero-campaign-disclaimer{
  position: absolute; right: clamp(12px, 2vw, 24px); bottom: 14px; z-index: 3;
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  color: var(--mg-text-sub); letter-spacing: .01em;
}
@media (max-width: 1024px){
  body.home .hero-campaign-content{ width: 320px; }
  body.home .hero-campaign-eyebrow{ font-size: 14px; margin-bottom: 8px; }
  body.home .hero-campaign-symbol{ font-size: 61px; transform: translateY(-6px); }
  body.home .hero-campaign-number{ font-size: 111px; }
  body.home .hero-campaign-discount{ font-size: 48px; }
  body.home .hero-campaign-note{ font-size: 12px; margin-bottom: 12px; }
  body.home .hero-campaign-cta{ width: 240px; height: 46px; font-size: 14px; }
  body.home .hero-campaign-fine{ font-size: 12px; }
}
@media (max-width: 768px){
  /* Dedicated portrait mobile hero photos (images/hero-mobile/*, 941x1672,
     ratio ~0.5628) replace the desktop crops below this width — see the
     <picture><source media="(max-width:768px)"> in each slide's markup.
     Height tracks that same ratio (177.68vw) so object-fit:cover on
     body.home .hero-*-img only trims the far top/bottom edges instead of
     cropping into the product, and stays uniform across all 3 slides
     since they share identical dimensions. The clamp's max exists only
     for the wide end of this range (tablet-portrait, ~700-768px) where
     the ratio math alone would otherwise make the hero taller than is
     reasonable for a banner. */
  body.home .hero{ height: clamp(460px, 177.68vw, 620px); }
  body.home .hero-campaign-content{
    left: 0; right: 0; width: 100%; top: auto; bottom: 0; translate: 0 0;
    align-items: center; text-align: center;
    padding: 22px 20px 58px;
    background: linear-gradient(0deg, rgba(255,248,240,.92) 0%, rgba(255,248,240,.66) 55%, rgba(255,248,240,0) 100%);
  }
  body.home .hero-campaign-eyebrow{ font-size: 12px; letter-spacing: .2em; margin-bottom: 6px; }
  body.home .hero-campaign-symbol{ font-size: 37px; transform: translateY(-4px); }
  body.home .hero-campaign-number{ font-size: 68px; }
  body.home .hero-campaign-discount{ font-size: 30px; letter-spacing: .08em; margin: 2px 0 8px; }
  body.home .hero-campaign-rule{ width: 40px; margin: 0 auto 8px; }
  body.home .hero-campaign-note{ font-size: 10px; margin-bottom: 8px; }
  body.home .hero-campaign-cta{ width: 230px; height: 46px; font-size: 13px; }
  body.home .hero-campaign-fine{ font-size: 12px; margin-top: 10px; }
  body.home .hero-campaign-disclaimer{ right: 10px; bottom: 6px; font-size: 9px; }
  body.home .hero-pagination{ bottom: 12px; padding: 8px 10px; gap: 7px; }
}

/* ---- Hero slide 2 — Ferrucci 2026 watch photo: real background image,
   the two watches sit in the left ~half of the frame with a dark silk
   drape filling the right half, so copy is anchored to the right and
   never touches them. Light/gold tokens (shared with the site's
   non-home dark hero) are reused here since the backdrop is a dark
   brown photo, not the light campaign beige slide 1 sits on. ---- */
body.home .hero-ferrucci-img{
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
body.home .hero-ferrucci-content{
  position: absolute; z-index: 2; top: 50%; right: calc(clamp(48px, 6vw, 110px) + 118px);
  translate: 0 calc(-50% - 24px);
  width: min(34vw, 380px);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
body.home .hero-ferrucci-brand{
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .32em;
  color: var(--champagne-soft); margin: 0 0 5px;
}
body.home .hero-ferrucci-title{
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(39px, 3.7vw, 60px);
  line-height: 1.08; color: var(--ivory-warm); margin: 0 0 4px;
}
body.home .hero-ferrucci-sub{
  font-family: var(--font-sans); font-size: 18px; font-weight: 500; line-height: 1.5;
  color: rgba(245,239,232,.78); margin: 0 0 3px; max-width: 340px;
}
body.home .hero-ferrucci-content .btn{
  width: 265px; height: 52px; border-radius: 4px;
  background: #F3E3D2; color: #4A2D21; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transform: translateY(14px);
}
body.home .hero-ferrucci-content .btn:hover{ background: #FFF7F0; color: #4A2D21; transform: translateY(13px); }
@media (max-width: 1024px){
  body.home .hero-ferrucci-content{ right: calc(clamp(32px, 5vw, 64px) + 63px); width: min(38vw, 330px); }
  body.home .hero-ferrucci-title{ font-size: clamp(32px, 4.6vw, 46px); }
  body.home .hero-ferrucci-sub{ font-size: 16px; margin-bottom: 1px; max-width: 280px; }
}
@media (max-width: 768px){
  /* Top-left safe zone: the watches sit lower/center on the mobile crop,
     so copy anchors to the top instead of vertical-centering over them. */
  body.home .hero-ferrucci-content{
    top: 22px; left: 20px; right: auto; width: min(72%, 300px);
    translate: 0 0; align-items: flex-start; text-align: left;
  }
  body.home .hero-ferrucci-brand{ font-size: 11px; letter-spacing: .2em; margin-bottom: 8px; }
  body.home .hero-ferrucci-title{ font-size: clamp(19px, 5.6vw, 25px); line-height: 1.14; margin-bottom: 8px; }
  body.home .hero-ferrucci-sub{ font-size: 12px; line-height: 1.4; margin-bottom: 14px; max-width: none; }
  body.home .hero-ferrucci-content .btn{
    width: auto; height: 40px; padding: 0 20px; font-size: 11px; transform: none;
  }
  body.home .hero-ferrucci-content .btn:hover{ transform: none; }
}

/* ---- Hero slide 3 — Kişiye özel isimli kolye photo: real background
   image, the open gift box and name necklace sit in the right ~55% of
   the frame on warm satin, with an empty band on the left (soft shadow
   foliage only), so copy is anchored to the left and never touches the
   box/necklace. Dark-photo tokens reused from slide 2 for the same
   reason: the backdrop is a warm brown/beige photo, not the light
   campaign beige of slide 1. ---- */
body.home .hero-personal-img{
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
body.home .hero-personal-content{
  position: absolute; z-index: 2; top: 50%; left: calc(clamp(48px, 6vw, 110px) + 43px);
  translate: 0 -50%;
  width: min(30vw, 360px);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
body.home .hero-personal-eyebrow{
  font-family: var(--font-sans); font-size: 14.3px; font-weight: 600; letter-spacing: .28em;
  color: #D8B58C; opacity: 1; margin: 0 0 14px;
}
body.home .hero-personal-title{
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(36px, 3.61vw, 55px);
  line-height: 1.1; margin: 0 0 14px; color: var(--ivory-warm);
}
body.home .hero-personal-title span{ color: #D6B184; }
body.home .hero-personal-sub{
  font-family: var(--font-sans); font-size: 17.3px; font-weight: 500; line-height: 1.65;
  color: rgba(245,239,232,.88); margin: 0 0 20px; max-width: 320px;
}
body.home .hero-personal-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 275px; height: 52px; margin-top: 10px;
  border-radius: 999px; border: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: #E6D4C1; color: #4A2D21;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), gap .25s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  body.home .hero-personal-cta:hover{ transform: translateY(-3px); gap: 14px; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
}
@media (max-width: 1024px){
  body.home .hero-personal-content{ width: min(38vw, 320px); }
  body.home .hero-personal-title{ font-size: clamp(28px, 4.2vw, 42px); }
  body.home .hero-personal-sub{ font-size: 14px; max-width: 280px; }
  body.home .hero-personal-cta{ width: 255px; height: 48px; font-size: 12px; }
}
@media (max-width: 768px){
  /* Top-left safe zone: the gift box/necklace and nameplate sit lower and
     right of center on the mobile crop, so copy anchors to the top-left
     corner and stays clear of them. The photo is light/warm there, so a
     dark scrim + text-shadow are added purely for contrast. */
  body.home .hero-personal-content{
    top: 20px; left: 18px; right: auto; width: min(64%, 270px);
    translate: 0 0; align-items: flex-start; text-align: left;
    padding: 14px 16px 16px; border-radius: 14px;
    background: linear-gradient(160deg, rgba(38,24,16,.6) 0%, rgba(38,24,16,.36) 65%, rgba(38,24,16,0) 100%);
  }
  body.home .hero-personal-eyebrow{
    font-size: 10.5px; letter-spacing: .18em; margin-bottom: 8px;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
  }
  body.home .hero-personal-title{
    font-size: clamp(20px, 5.8vw, 27px); line-height: 1.16; margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
  }
  body.home .hero-personal-sub{
    font-size: 12px; line-height: 1.42; margin-bottom: 14px; max-width: none;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
  }
  body.home .hero-personal-cta{ width: auto; height: 42px; padding: 0 18px; font-size: 11.5px; margin-top: 2px; }
}

/* ---- The one homepage catalog card, base typography ----
   Product names: 600 weight, 14px+. Prices: 700 weight, 16px+. Material/
   category metadata: 12px minimum, 600 weight — readable, not hairline.
   Names are line-clamped to 2 lines so a long product name can never
   spill under or outside a fixed-height card. */
body.home .home-product-card{ border: 1px solid var(--mg-border); border-radius: 2px; box-shadow: none; }
body.home .home-product-card .product-card-caption{ background: #FBF7F1; padding: 14px 16px 16px; }
body.home .home-product-card .product-card-caption h3{
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #35231D;
  height: 34px; margin: 0; text-align: left;
}
body.home .home-product-card .product-card-material{
  display: block; margin-top: 5px;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; line-height: 1.25; letter-spacing: .04em;
  text-transform: uppercase; color: #74665F; opacity: 1; text-align: left;
}
body.home .home-product-card .price-row{ margin-top: 8px; }
body.home .home-product-card .price-row .price,
body.home .home-product-card .product-card-caption .price{
  font-family: var(--font-sans); font-size: 17px; font-weight: 700; color: #35231D; text-align: left;
}
body.home .home-product-card .price-row .price-old,
body.home .home-product-card .product-card-caption .price-old{
  font-size: 12px; color: var(--home-text-muted); text-decoration: line-through;
}
/* Soft champagne surface for the photo band — gives it a hair of
   separation from the off-white caption below without introducing an
   unrelated third color. */
body.home .home-product-card .product-image{ background: #F2E3D2; }
body.home .card-fav-btn{
  width: 30px; height: 30px; min-width: 30px; min-height: 30px; max-width: 30px; max-height: 30px;
  top: 10px; right: 10px;
  background: #fff; color: var(--mg-dark); border-color: var(--mg-border);
  box-shadow: 0 2px 8px rgba(74,45,33,.08);
}
body.home .card-fav-btn:hover{ background: #fff; }
body.home .card-fav-icon{ width: 14px; height: 14px; max-width: 14px; max-height: 14px; }
body.home .home-bestsellers-grid .product-badge{ font-size: 10px; padding: 5px 8px; }

#collections{ scroll-margin-top: 80px; } /* hero "Keşfet" jump-target vs. the sticky header */

/* ==================================================
   MIDDLE HOMEPAGE — one authoritative system for Category Navigation and
   Best Sellers (Why Mert Gümüş and the Koleksiyonları Keşfet editorial
   index below have their own blocks further down). All sections share
   the same .container--narrow for identical left/right alignment. Every
   image in this system is normal flow — centered with flexbox and a
   plain max-width/max-height — never position:absolute, so nothing can
   float outside its card or collapse to zero size the way earlier passes
   did. Every card is one unified box (image + copy inside the same
   overflow:hidden container) — never a detached box.
   ================================================== */

/* 2 — Homepage product rows (Çok Satanlar / Yeni Sezon / Editörün
   Seçimi): each is its own .home-bestsellers section sharing this one
   static grid — a fixed 10-slot grid, 5 cols × 2 rows desktop (real
   products + "coming soon" placeholders, see js/catalog.js). No
   horizontal slider, no arrows — the grid sits inline in normal page
   flow, width-matched to the same .container--narrow every other
   homepage section uses. */
body.home .home-bestsellers{ background: var(--home-beige); padding: 20px 0 32px; border-top: 1px solid var(--mg-border); }
/* Widened just for these three product rows (desktop only) so the 5-col
   grid uses more of the screen instead of sitting narrow with a huge
   auto-centered margin outside it — the section head and CTA line up on
   the same edges automatically since they share this container. */
@media (min-width: 1025px){
  body.home .home-bestsellers .container--narrow{
    max-width: 1680px;
    padding-inline: 48px;
  }
}
body.home .home-bestsellers-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
body.home .home-bestsellers-grid .home-product-card{
  display: flex; flex-direction: column;
  height: 352px; background: #F6ECDF;
  border: 1px solid rgba(74,45,33,.10); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(74,45,33,.06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  body.home .home-bestsellers-grid .home-product-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(74,45,33,.10);
  }
}
body.home .home-bestsellers-grid .product-card-media-link{ display: block; width: 100%; height: 230px; flex: 0 0 230px; overflow: hidden; background: #F2E3D2; border-radius: 14px 14px 0 0; }
body.home .home-bestsellers-grid .product-image{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
body.home .home-bestsellers-grid .product-image-photo{ padding: 8px; }
body.home .home-bestsellers-grid .product-card-caption{ flex: 1; min-height: 0; overflow: visible; border-radius: 0 0 14px 14px; }
/* Same image system for all four — object-fit:contain, object-position:
   center, no crop, no per-product transform:scale hack — but the four
   source photos were shot at different scales within their own frame
   (silver set spread thin across a mostly-empty frame; the Ferrucci
   watch fills its frame edge to edge), so a single uniform padding makes
   them read as wildly different sizes. Padding — never transform — is
   the lever tuned per photo so all four occupy a comparable perceived
   area: less padding lets the sparse set read larger, more padding pulls
   the dominant watch down; the gold combo and clover bracelet (already
   comparable) share the same middle value. Values pulled in further so
   every photo reads ~15-20% larger in its frame than the previous pass. */
body.home .home-bestsellers-grid .home-product-card[data-product-id="MG001"] .product-image-photo{ padding: 0px; }
body.home .home-bestsellers-grid .home-product-card[data-product-id="MG002"] .product-image-photo{ padding: 8px; }
body.home .home-bestsellers-grid .home-product-card[data-product-id="MG003"] .product-image-photo{ padding: 20px; }
body.home .home-bestsellers-grid .home-product-card[data-product-id="MG004"] .product-image-photo{ padding: 8px; }

/* Trailing "coming soon" placeholder card — same box as a real card
   (width/height/radius/border/spacing all inherited from .home-product-card
   above), not clickable and not lifted on hover so it never reads as an
   interactive product tile. Photo band reads as soft champagne silk
   (subtle diagonal gradient) rather than a flat empty box; caption band
   matches real cards exactly (off-white), just with muted mocha copy and
   a decorative, non-functional "Haber Ver" pill instead of a price. */
body.home .home-product-placeholder{ cursor: default; }
body.home .home-bestsellers-grid .home-product-placeholder .product-card-media-link{
  background: linear-gradient(135deg, #F3E7DB 0%, #EFDCC8 55%, #F6ECDF 100%);
}
@media (hover: hover) and (pointer: fine){
  body.home .home-bestsellers-grid .home-product-placeholder:hover{
    transform: none;
    box-shadow: 0 8px 24px rgba(74,45,33,.06);
  }
}
body.home .home-product-placeholder .placeholder-visual{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
body.home .home-product-placeholder .placeholder-icon{
  color: #6B4A3A;
  fill: none; stroke: currentColor;
  opacity: 1;
}
body.home .home-product-placeholder .placeholder-tag{
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #6B4A3A; opacity: 1;
}
body.home .home-product-placeholder .product-card-caption h3{
  color: var(--home-text-muted); font-weight: 600;
}
body.home .home-product-placeholder .product-card-material{
  text-transform: none;
}
body.home .home-product-placeholder .placeholder-notify{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 30px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #F3E7DB; color: #4A2D21;
  border: 1px solid rgba(74,45,33,.16); border-radius: 999px;
}

/* 3 — Promotional campaign bands: four full-width editorial banners
   (Baget Koleksiyonu / Yeni Sezon / Saat Koleksiyonu / Zarafetin Tanımı)
   replacing the old 3-column text index. Each band is a 48/52 two-track
   grid — a real product photo on one side, headline + pill CTA on the
   other — order-swapped per slide via --flip so every slide reads as a
   different composition while the two tracks keep the same width ratio.
   Only the two existing homepage surfaces (--home-beige /
   --home-beige-strong) and --mg-dark/--mg-text/--mg-text-light are used;
   no new color is introduced. */
body.home .home-promo{ background: var(--home-beige); padding: 20px 0; }
body.home .home-promo--tint{ background: var(--home-beige-strong); }
body.home .home-promo-band{
  display: grid; grid-template-columns: 48% 52%; grid-template-rows: 360px; align-items: stretch;
  border-radius: 6px; overflow: hidden;
}
body.home .home-promo-media{
  order: 1; display: block; min-height: 100%;
  background: var(--home-beige-strong);
}
body.home .home-promo--tint .home-promo-media{ background: var(--home-beige); }
body.home .home-promo-media .product-image-photo{
  width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 22px; box-sizing: border-box;
}
body.home .home-promo-text{
  order: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 20px clamp(28px, 4vw, 56px); text-align: left;
}
body.home .home-promo-band--flip .home-promo-media{ order: 2; }
body.home .home-promo-band--flip .home-promo-text{ order: 1; }
body.home .home-promo-title{
  font-family: var(--font-serif); font-size: clamp(30px, 3vw, 42px); font-weight: 650;
  letter-spacing: -.012em; line-height: 1.08; color: var(--mg-text); margin: 6px 0 0;
}
body.home .home-promo-sub{
  margin-top: 12px; max-width: 380px; font-family: var(--font-sans); font-size: 15px;
  font-weight: 500; line-height: 1.55; color: var(--home-text-muted);
}
body.home .home-promo-cta{
  display: inline-flex; align-items: center; gap: 8px; height: 50px; margin-top: 24px;
  padding: 0 32px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  background: var(--mg-dark); color: var(--mg-text-light);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
/* Dark text panel (Saat Koleksiyonu slide): inverted onto --mg-dark, so
   the eyebrow/heading/sub switch to the light tokens and the pill flips
   to an outline instead of a second solid dark block. */
body.home .home-promo-text--dark{ background: var(--mg-dark); }
body.home .home-promo-text--dark .home-promo-title{ color: var(--mg-text-light); }
body.home .home-promo-text--dark .home-promo-sub{ color: var(--mg-text-light-sub); }
body.home .home-promo-text--dark .home-promo-cta{
  background: transparent; color: var(--mg-text-light); border-color: rgba(255,246,238,.75);
}
@media (hover: hover) and (pointer: fine){
  body.home .home-promo-cta:hover{ gap: 12px; }
  body.home .home-promo-text:not(.home-promo-text--dark) .home-promo-cta:hover{ background: var(--home-text); }
  body.home .home-promo-text--dark .home-promo-cta:hover{ background: var(--mg-text-light); color: var(--mg-dark); }
}

/* ==================================================
   4 — Two single-row premium typographic marquee strips, one under Çok
   Satanlar (loops left→right, 32s) and one under Yeni Sezon (loops
   right→left, 36s). No cards, icons, badges, or heavy borders — just
   letter-spaced serif type and small diamond separators on a thin
   champagne/satin strip. Each track holds the same word set twice
   back-to-back (see markup) so animating exactly -50%/0% loops with no
   seam, gap, or jump; hover never pauses it per spec. A soft multi-stop
   diagonal gradient stands in for a woven-silk sheen without an image
   asset or any glow/neon effect. */
body.home .home-strip{
  position: relative;
  /* Pulls up out of the preceding product section's 32px bottom padding
     so the visible gap above reads as ~18px (16-20px target) without
     touching that shared section rule; the following section's own 20px
     top padding alone already lands the gap below at 20px (20-24px
     target), so no bottom margin is needed here. */
  margin-top: -14px;
}
body.home .home-ribbon-row{
  position: relative; overflow: hidden;
  height: 56px; display: flex; align-items: center;
  background: linear-gradient(115deg, #EFE3D7 0%, #F4ECE3 22%, #EFE3D7 46%, #F2E8DD 70%, #EFE3D7 100%);
}
/* The mask lives on this fixed-width, transparent viewport — not on the
   row (which owns the solid champagne background, left unmasked so it
   stays full-bleed) and not on the track (which is far wider than the
   viewport once scrolled, so a mask there would fade relative to its own
   huge width instead of the visible edges). Fades only the scrolling
   text at the row's visible left/right edges. */
body.home .home-ribbon-viewport{
  width: 100%; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
body.home .home-ribbon-track{
  display: flex; flex-wrap: nowrap; align-items: center; width: max-content; height: 100%;
  will-change: transform;
  animation: mgRibbonRight 32s linear infinite;
}
body.home .home-ribbon-track--reverse{ animation-name: mgRibbonLeft; animation-duration: 36s; }
body.home .home-strip-track--right{ animation-duration: 32s; }
body.home .home-strip-track--left{ animation-duration: 36s; }
@keyframes mgRibbonRight{
  from{ transform: translate3d(-50%,0,0); }
  to{ transform: translate3d(0,0,0); }
}
@keyframes mgRibbonLeft{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}
body.home .home-ribbon-set{ display: flex; flex-wrap: nowrap; align-items: center; flex-shrink: 0; }
body.home .home-ribbon-item{
  font-family: var(--font-serif); font-weight: 400; font-size: 16px; letter-spacing: 2.5px;
  color: #5A4034; white-space: nowrap; line-height: 1;
}
body.home .home-ribbon-sep{
  font-size: 12px; color: rgba(90,64,52,.5); margin: 0 22px; line-height: 1;
}
@media (max-width: 640px){
  body.home .home-ribbon-row{ height: 46px; }
  body.home .home-ribbon-item{ font-size: 12.5px; letter-spacing: 2px; }
  body.home .home-ribbon-sep{ font-size: 10px; margin: 0 14px; }
}
/* ==================================================
   5 — Footer surface lock + readability (homepage only)
   The footer markup is shared across every page; on index.html both the
   main footer and the lower payment/security strip are forced to the same
   --mg-dark (#4A2D21) as the hero — one single brown across all three dark
   anchors of the page, deliberately kept to one tone, not a family of them.
   Footer-top (intro + nav columns) no longer needs a homepage-specific
   override here — its colors are literal in the base .footer-top rules
   above, identical on every page including this one. Only footer-lower
   (payment/monogram/security) is still handled here. */
body.home .site-footer{ background: var(--mg-dark); }
body.home .footer-lower{ background: var(--mg-dark); }
body.home .footer-trust{ border-top-color: rgba(255,246,238,.14); }
body.home .trust-item{ border-left-color: rgba(255,246,238,.14); }
body.home .trust-item svg{ color: rgba(255,246,238,.82); }
body.home .trust-item strong{ color: var(--mg-text-light); }
body.home .trust-item span{ color: rgba(255,246,238,.82); }
body.home .footer-lower{ border-top-color: rgba(255,255,255,.08); }
body.home .footer-monogram,
body.home .footer-monogram .mg{ color: var(--mg-text-light); }
body.home .footer-monogram .mg::before,
body.home .footer-monogram .mg::after{ background: rgba(255,246,238,.14); }
body.home .footer-monogram .since{ color: rgba(255,246,238,.82); }
body.home .footer-monogram .since::before,
body.home .footer-monogram .since::after{ background: rgba(255,246,238,.3); }
body.home .footer-copyright{ color: rgba(255,246,238,.8); }
body.home .footer-security{ color: var(--mg-text-light); }
body.home .footer-security-item > svg{ color: rgba(255,246,238,.82); }
body.home .footer-security .fs-text{ color: rgba(255,246,238,.82); }
body.home .footer-security .fs-text em{ color: var(--mg-text-light); }
body.home .footer-security-divider{ background: rgba(255,246,238,.14); }

/* Same footer color/text/icon tone on every page, not just the homepage.
   Literal values below mirror body.home's --mg-dark/--mg-text-light since
   those custom properties only exist inside body.home. Pure addition —
   the body.home rules above are untouched and still win there via
   specificity, so the visual result stays identical on the homepage too.
   Footer-top is excluded here for the same reason noted in the body.home
   block above — it's already literal/unified in the base .footer-top
   rules, so only footer-lower (payment/monogram/security) needs this. */
.site-footer{ background: #4A2D21 !important; }
.footer-lower{ background: #4A2D21 !important; }
.footer-trust{ border-top-color: rgba(255,246,238,.14); }
.trust-item{ border-left-color: rgba(255,246,238,.14); }
.trust-item svg{ color: rgba(255,246,238,.82); }
.trust-item strong{ color: #FFF6EE; }
.trust-item span{ color: rgba(255,246,238,.82); }
.footer-monogram,
.footer-monogram .mg{ color: #FFF6EE; }
.footer-monogram .mg::before,
.footer-monogram .mg::after{ background: rgba(255,246,238,.14); }
.footer-monogram .since{ color: rgba(255,246,238,.82); }
.footer-monogram .since::before,
.footer-monogram .since::after{ background: rgba(255,246,238,.3); }
.footer-copyright{ color: rgba(255,246,238,.8); }
.footer-security{ color: #FFF6EE; }
.footer-security-item > svg{ color: rgba(255,246,238,.82); }
.footer-security .fs-text{ color: rgba(255,246,238,.82); }
.footer-security .fs-text em{ color: #FFF6EE; }
.footer-security-divider{ background: rgba(255,246,238,.14); }

/* ==================================================
   Tablet ≤1024px
   ================================================== */
@media (max-width: 1024px){
  body.home .home-bestsellers-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body.home .home-bestsellers-grid .home-product-card{ height: 346px; }
  body.home .home-bestsellers-grid .product-card-media-link{ height: 230px; flex: 0 0 230px; }

  body.home .home-promo-band{ grid-template-columns: 44% 56%; grid-template-rows: 300px; }
  body.home .home-promo-text{ padding: 18px clamp(22px, 3vw, 36px); }
  body.home .home-promo-title{ font-size: clamp(26px, 3.4vw, 34px); }
  body.home .home-promo-sub{ font-size: 14px; }
}

/* ==================================================
   Mobile ≤640px — placed after the generic `.section` mobile rule
   above so these always win the cascade tie without !important.
   ================================================== */
@media (max-width: 640px){
  body.home .home-bestsellers,
  body.home .home-promo{
    padding-block: 32px;
  }

  body.home .home-bestsellers-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.home .home-bestsellers-grid .home-product-card{ height: 323px; }
  body.home .home-bestsellers-grid .product-card-media-link{ height: 207px; flex: 0 0 207px; }

  body.home .home-promo{ padding-block: 18px; }
  body.home .home-promo-band,
  body.home .home-promo-band--flip{
    grid-template-columns: 1fr; grid-template-rows: 220px auto;
  }
  body.home .home-promo-band .home-promo-media,
  body.home .home-promo-band--flip .home-promo-media{ order: 1; }
  body.home .home-promo-band .home-promo-text,
  body.home .home-promo-band--flip .home-promo-text{ order: 2; }
  body.home .home-promo-text{
    align-items: center; text-align: center; padding: 22px 20px;
  }
  body.home .home-promo-sub{ max-width: none; }
  body.home .home-promo-title{ font-size: clamp(24px, 6vw, 30px); }
}

/* Narrowest phones (≤380px): even the 2-col layout gets too cramped for a
   real card (image + heading + material + price/notify pill) — drop to a
   single column so each card keeps breathing room instead of shrinking
   further. Same rule applies to all three homepage product rows since
   they all share .home-bestsellers-grid. */
@media (max-width: 380px){
  body.home .home-bestsellers-grid{ grid-template-columns: 1fr; gap: 12px; }
  body.home .home-bestsellers-grid .home-product-card{ height: auto; min-height: 340px; }
  body.home .home-bestsellers-grid .product-card-media-link{ height: 220px; flex-basis: 220px; }
}


/* ==================================================
   Homepage campaign banners — full-bleed editorial photo with the
   headline/CTA overlaid on top of it (not beside it). Each card's
   `.container--narrow` is widened/near-flush just for this section
   (scoped selector below) so the banner reads near full page width
   without touching the shared container used by other homepage
   sections. The image fills the card as a true background
   (object-fit: cover, its own real aspect ratio, never stretched);
   a soft directional scrim behind the text is the only thing between
   photo and headline — no card surface, border or shadow. */
body.home .home-campaigns{
  background: var(--home-beige);
  padding: clamp(14px, 1.6vw, 20px) 0 0;
}
body.home .home-campaigns .container--narrow{
  max-width: 2040px;
  padding-inline: clamp(6px, 1vw, 18px);
}
body.home .home-campaign-stack{
  display: grid;
  gap: clamp(8px, 0.9vw, 12px);
}
body.home .home-campaign-card{
  position: relative;
  display: block;
  height: clamp(336px, 32.5vw, 382px);
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
}
body.home .home-campaign-card--ondark{
  height: clamp(352px, 34vw, 400px);
}
body.home .home-campaign-media{ position: absolute; inset: 0; z-index: 0; }
body.home .home-campaign-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition: transform .7s var(--ease);
}
body.home .home-campaign-card::before{
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(255,248,240,.6) 0%, rgba(255,248,240,.26) 34%, rgba(255,248,240,0) 58%);
}
body.home .home-campaign-card--ondark::before{
  background: linear-gradient(100deg, rgba(35,20,13,.62) 0%, rgba(35,20,13,.3) 34%, rgba(35,20,13,0) 58%);
}
body.home .home-campaign-content{
  position: relative; z-index: 2; height: 100%; max-width: 620px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding-inline: clamp(28px, 5vw, 72px); text-align: left;
}
body.home .home-campaign-eyebrow{
  font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--mg-text-sub); margin: 0 0 10px;
}
body.home .home-campaign-title{
  font-family: var(--font-serif); font-size: clamp(38px, 4.6vw, 58px); font-weight: 650;
  letter-spacing: -.014em; line-height: 1.04; color: var(--mg-text); margin: 0 0 14px;
}
body.home .home-campaign-sub{
  max-width: 440px; font-family: var(--font-sans); font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 500; line-height: 1.55; color: var(--home-text-muted); margin: 0 0 26px;
}
body.home .home-campaign-cta{
  display: inline-flex; align-items: center; gap: 10px; height: 56px;
  padding: 0 38px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--mg-dark); color: var(--mg-text-light);
  box-shadow: 0 10px 26px rgba(74,45,33,.3);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), gap .25s var(--ease);
}
body.home .home-campaign-card--ondark .home-campaign-eyebrow{ color: var(--mg-text-light-sub); }
body.home .home-campaign-card--ondark .home-campaign-title{ color: var(--mg-text-light); }
body.home .home-campaign-card--ondark .home-campaign-sub{ color: var(--mg-text-light-sub); }
body.home .home-campaign-card--ondark .home-campaign-cta{
  background: var(--mg-text-light); color: var(--mg-dark); box-shadow: 0 10px 26px rgba(0,0,0,.32);
}
@media (hover:hover) and (pointer:fine){
  body.home .home-campaign-card:hover .home-campaign-media img{ transform: scale(1.045); }
  body.home .home-campaign-cta:hover{ transform: translateY(-3px); gap: 14px; box-shadow: 0 14px 32px rgba(74,45,33,.36); }
  body.home .home-campaign-card--ondark .home-campaign-cta:hover{ box-shadow: 0 14px 32px rgba(0,0,0,.4); }
}
@media (max-width: 900px){
  body.home .home-campaign-content{ max-width: 78%; }
}
@media (max-width: 760px){
  body.home .home-campaigns{ padding-block: 14px 0; }
  body.home .home-campaigns .container--narrow{ padding-inline: 6px; }
  body.home .home-campaign-stack{ gap: 10px; }
  body.home .home-campaign-card{ height: clamp(280px, 78vw, 340px); border-radius: 2px; }
  body.home .home-campaign-card--ondark{ height: clamp(292px, 81vw, 356px); }
  body.home .home-campaign-content{ max-width: 100%; padding-inline: 22px; }
  body.home .home-campaign-title{ font-size: clamp(26px, 7vw, 34px); }
  body.home .home-campaign-sub{ max-width: none; font-size: 14px; margin-bottom: 20px; }
  body.home .home-campaign-cta{ height: 48px; padding: 0 26px; font-size: 12px; }
}

/* ==========================================================================
   "İlk Sipariş %10 İndirim" — side tab + drawer (homepage only) and the
   İndirim Kodu widget + pricing rows it feeds on the cart/checkout
   summaries. Palette is the same premium mocha/cream set used sitewide
   (#4A2D21 / #FBF6F0 / #35231D / #74665F) — no campaign red, no glow.
   ========================================================================== */

/* ---- Closed state: fixed side tab ---- */
.discount-tab{
  position: fixed;
  left: 0;
  top: 58%;
  transform: translateY(-50%);
  width: 42px;
  height: 155px;
  z-index: 650;
  background: #4A2D21;
  color: #FFF8F0;
  border: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 8px 24px rgba(53,35,29,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: width .22s var(--ease), opacity .22s var(--ease), transform .22s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .discount-tab:hover{ width: 46px; }
}
.discount-tab-label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.discount-tab-line{
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.discount-tab-percent{
  font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: .02em;
}

/* ---- Overlay + drawer ---- */
.discount-overlay{
  position: fixed; inset: 0;
  background: rgba(53,35,29,.12);
  z-index: 890;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.discount-overlay.is-open{ opacity: 1; pointer-events: auto; }

.discount-drawer{
  position: fixed;
  top: 0; left: 0;
  width: 340px;
  height: 100vh;
  height: 100dvh;
  z-index: 900;
  background: #FBF6F0;
  border-right: 1px solid rgba(74,45,33,.10);
  box-shadow: 18px 0 50px rgba(53,35,29,.14);
  transform: translateX(-100%);
  transition: transform .36s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
}
.discount-drawer.is-open{ transform: translateX(0); }

.discount-drawer-close{
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #4A2D21;
  transition: background .2s var(--ease);
}
.discount-drawer-close:hover{ background: rgba(74,45,33,.08); }

.discount-drawer-inner{ padding: 64px 32px 40px; }

.discount-drawer-eyebrow{
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #8B6F56;
  margin: 0 0 14px;
}
.discount-drawer-title{
  font-family: var(--font-serif); font-weight: 500; font-size: 34px; line-height: 1.15;
  color: #35231D; margin: 0 0 14px;
}
.discount-drawer-sub{
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: #74665F;
  max-width: 270px; margin: 0 0 22px;
}
.discount-drawer-rule{ display: block; width: 44px; height: 1px; background: rgba(74,45,33,.22); margin: 0 0 26px; }

/* ---- Form ---- */
.discount-field{ display: block; margin-bottom: 12px; }
.discount-field input{
  width: 100%; height: 48px; box-sizing: border-box;
  background: #F3E7DB;
  border: 1px solid rgba(74,45,33,.28);
  border-radius: 8px;
  padding: 0 16px;
  font-family: var(--font-sans); font-size: 14px; color: #35231D;
  transition: border-color .2s var(--ease);
}
.discount-field input::placeholder{ color: #9C8776; }
.discount-field input:focus{ outline: none; border-color: #4A2D21; }
.discount-field input[aria-invalid="true"]{ border-color: #8B3A2A; }
.discount-error{ margin: 0 0 14px; font-size: 12.5px; color: #8B3A2A; }
.discount-submit{
  width: 100%; height: 48px; border-radius: 8px;
  background: #4A2D21; color: #FFF8F0;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  transition: background .2s var(--ease);
}
.discount-submit:hover{ background: #3A2119; }

/* ---- Success state ---- */
.discount-success-eyebrow{
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #8B6F56; margin: 0 0 10px;
}
.discount-success-title{
  font-family: var(--font-serif); font-weight: 500; font-size: 24px; color: #35231D; margin: 0 0 20px;
}
.discount-code-box{
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 8px 0 18px;
  background: #F3E7DB; border: 1px dashed rgba(74,45,33,.35); border-radius: 8px;
  margin: 0 0 16px;
}
.discount-code{
  font-family: var(--font-sans); font-size: 16px; font-weight: 800; letter-spacing: .08em; color: #35231D;
}
.discount-copy-btn{
  height: 36px; padding: 0 14px; border-radius: 6px; white-space: nowrap;
  background: #4A2D21; color: #FFF8F0;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  transition: background .2s var(--ease);
}
.discount-copy-btn:hover{ background: #3A2119; }
.discount-copy-btn.is-copied{ background: #4A5D3A; }
.discount-copy-btn.is-copy-failed{ background: #8B3A2A; }
.discount-success-note{ font-size: 12.5px; line-height: 1.6; color: #74665F; margin: 0; }

@media (max-width: 640px){
  .discount-tab{ width: 38px; height: 130px; }
  .discount-drawer{ width: calc(100vw - 20px); max-width: 360px; }
  .discount-drawer-inner{ padding: 56px 24px 32px; }
  .discount-drawer-title{ font-size: 28px; }
}

/* ---- İndirim Kodu widget — shared by the cart and checkout summaries ---- */
.discount-code-field{ margin: 4px 0 18px; }
.discount-code-form{ display: flex; gap: 8px; }
.discount-code-form input{
  flex: 1; min-width: 0; height: 44px; box-sizing: border-box;
  background: var(--inner-alt); border: 1px solid rgba(74,45,33,.22); border-radius: 8px;
  padding: 0 14px; font-family: var(--font-sans); font-size: 13.5px; color: #35231D;
  transition: border-color .2s var(--ease);
}
.discount-code-form input:focus{ outline: none; border-color: #4A2D21; }
.discount-code-form button{
  height: 44px; padding: 0 18px; border-radius: 8px; white-space: nowrap;
  background: #4A2D21; color: #FFF8F0;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transition: background .2s var(--ease);
}
.discount-code-form button:hover{ background: #3A2119; }
.discount-code-error{ margin: 8px 0 0; font-size: 12.5px; color: #8B3A2A; }
.discount-code-applied{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--inner-alt); border: 1px solid rgba(74,45,33,.18); border-radius: 8px;
  font-size: 13px; color: #35231D;
}
.discount-code-applied svg{ flex: 0 0 14px; color: #8B6F56; }

/* ---- Cart summary rows ---- */
.cart-summary{
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 12px;
  padding: 24px 26px;
}
@media (min-width: 1024px){
  .cart-summary{ position: sticky; top: 96px; }
}
.cart-summary-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; font-size: 14px; color: #35231D;
  border-bottom: 1px solid rgba(74,45,33,.08);
}
.cart-summary-row--discount span:last-child{ color: #4A2D21; font-weight: 700; }
.cart-summary-row--total{
  border-bottom: 0; border-top: 1px solid rgba(74,45,33,.16);
  margin-top: 4px; padding-top: 14px;
  font-size: 16px; font-weight: 700;
}
.cart-summary-actions{ display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.cart-continue-link{
  text-align: center; font-size: 13px; font-weight: 600; color: #4A2D21;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Checkout summary rows ---- */
.checkout-subtotal-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; font-size: 14px; color: #35231D;
  border-bottom: 1px solid rgba(74,45,33,.08);
}
.checkout-subtotal-row--discount span:last-child{ color: #4A2D21; font-weight: 700; }
.checkout-subtotal-row--total{
  border-bottom: 0; border-top: 1px solid rgba(74,45,33,.16);
  margin-top: 4px; padding-top: 14px;
  font-size: 16px; font-weight: 700;
}

/* ==========================================================================
   INNER PAGES — premium UI/UX pass (Hesabım, Sepet, Ödeme, Sipariş Takibi,
   Hakkımızda, İletişim, SSS, Kargo, İade, Ödeme ve Güvenlik, legal pages).
   Every rule below is scoped to .inner-main (or a class that only exists
   inside it) — index.html's <main> deliberately has no .inner-main class,
   so none of this can ever reach the homepage hero/product sections, and
   the header markup sits outside <main> entirely, so desktop header is
   untouched too.
   ========================================================================== */

/* ---- 12) Global form fields ---- */
.inner-main input:not([type="checkbox"]):not([type="radio"]),
.inner-main select,
.inner-main textarea{
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  border: 1px solid rgba(74,45,33,.20);
  background: #F8EFE8;
  color: #35231D;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.inner-main input:not([type="checkbox"]):not([type="radio"]),
.inner-main select{ height: 48px; padding: 0 14px; }
.inner-main textarea{ padding: 12px 14px; min-height: 120px; line-height: 1.5; resize: vertical; }
.inner-main input::placeholder,
.inner-main textarea::placeholder{ color: rgba(53,35,29,.42); }
.inner-main input:focus,
.inner-main select:focus,
.inner-main textarea:focus{
  outline: none;
  border-color: #4A2D21;
  box-shadow: 0 0 0 3px rgba(74,45,33,.06);
}
.inner-main input:disabled,
.inner-main select:disabled,
.inner-main textarea:disabled{
  background: rgba(74,45,33,.05); color: rgba(53,35,29,.4); cursor: not-allowed;
}
.inner-main label{ display: block; font-size: 13px; font-weight: 600; color: #35231D; margin-bottom: 6px; }

/* ---- form-card / form-field / form-row (auth, contact, checkout, tracking) ---- */
.form-card{
  background: var(--inner-card);
  border: 1px solid rgba(74,45,33,.12);
  border-radius: 12px;
  padding: 28px 30px;
}
.form-field{ margin-bottom: 18px; }
.form-field:last-of-type{ margin-bottom: 0; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-card > .btn{ width: 100%; margin-top: 6px; }
/* Hesabım auth card: compact, not a full-bleed panel */
.auth-card{ max-width: 480px; }
/* Sipariş Takibi: a wide, near full-width query form reads oversized —
   cap it and give the submit button a normal button width instead of
   stretching edge to edge. */
.track-card{ max-width: 760px; }
.track-card > .btn{ width: auto; min-width: 230px; }
.form-note{ margin-top: 14px; font-size: 12.5px; color: var(--text-secondary); text-align: center; }
.form-status{ margin-top: 14px; font-size: 13px; line-height: 1.6; color: #35231D; display: none; }
.form-status.is-visible{ display: block; }
.auth-secondary-action{ margin-top: 10px; text-align: right; }
.auth-secondary-action .text-link{ border-bottom: 0; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; }

.form-gate-notice,
.checkout-payment-gate{
  display: flex; gap: 14px;
  background: var(--inner-alt);
  border: 1px solid rgba(74,45,33,.16);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.form-gate-notice svg,
.checkout-payment-gate svg{ flex: 0 0 20px; color: #4A2D21; margin-top: 2px; }
.form-gate-notice h3,
.checkout-payment-gate h3{ font-size: 14px; font-weight: 700; color: #35231D; margin: 0 0 4px; }
.form-gate-notice p,
.checkout-payment-gate p{ font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.form-gate-notice-actions,
.checkout-payment-gate-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.form-gate-notice-actions .btn,
.checkout-payment-gate-actions .btn{ padding: 9px 16px; font-size: 11px; height: auto; }
.checkout-payment-gate{ max-width: 720px; }

/* ---- Auth tabs (Hesabım): segmented control built on the existing
   .filter-chip pill, restyled only inside this track so category-page
   filter chips are untouched. ---- */
.auth-tabs{
  display: inline-flex; gap: 4px;
  background: var(--inner-alt); padding: 4px; border-radius: 999px;
  margin-bottom: 22px;
}
.auth-tabs .filter-chip{
  background: transparent; border-color: transparent; color: var(--text-secondary);
  padding: 9px 22px;
}
.auth-tabs .filter-chip.is-active,
.auth-tabs .filter-chip[aria-pressed="true"]{
  background: #4A2D21; border-color: #4A2D21; color: #FFF8F0;
}

/* ---- Benefits panel (Hesabım, right column) ---- */
.benefits-panel{
  background: #4A2D21; color: #FFF8F0;
  border-radius: 12px; padding: 32px 30px;
}
.benefits-panel h2{
  font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2;
  color: #FFF8F0; margin: 8px 0 22px;
}
.benefits-list{ display: flex; flex-direction: column; gap: 18px; }
.benefits-list li{
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 14px; line-height: 1.5; color: rgba(255,248,240,.88);
}
.benefits-list li svg{ flex: 0 0 22px; color: #DCC7B1; margin-top: 1px; }

/* ---- Consent checkbox (Ödeme) ---- */
.consent-check{ display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 20px; }
.consent-check input[type="checkbox"]{
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px;
  accent-color: #4A2D21; cursor: pointer;
}
.consent-check span{ font-size: 13px; line-height: 1.5; color: #35231D; }
.consent-link{
  display: inline-block; margin-top: 6px;
  font-size: 12px; font-weight: 600; color: #4A2D21;
  text-decoration: underline; text-underline-offset: 2px;
}
.checkout-payment-note{ display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--text-secondary); }
.checkout-payment-note svg{ flex: 0 0 16px; color: #4A2D21; }

/* ---- İletişim: contact detail list ---- */
.contact-intro-panel{ margin-bottom: 28px; }
.contact-intro-panel p{ color: var(--inner-body); font-weight: 500; font-size: 14.5px; line-height: 1.7; max-width: 480px; }
.contact-detail-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
.contact-detail{ display: flex; align-items: flex-start; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(74,45,33,.10); }
.contact-detail svg{ flex: 0 0 22px; color: #4A2D21; margin-top: 2px; }
.contact-detail h3{ font-size: 11px; font-weight: 700; color: #6A4A3B; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .16em; }
.contact-detail p{ font-size: 14.5px; color: var(--inner-body); font-weight: 500; line-height: 1.5; }
.contact-detail p a{ color: #35231D; transition: color .2s var(--ease); }
.contact-detail p a:hover{ color: #4A2D21; }

/* ---- Accordion (SSS / FAQ) — main.js toggles aria-expanded and sets
   panel.style.maxHeight directly; the CSS only needs to supply the closed
   default (max-height:0, overflow hidden) and the open/close transition. ---- */
.accordion-wrap{ max-width: 820px; }
.accordion-item{ border-bottom: 1px solid rgba(74,45,33,.12); }
.accordion-item:first-child{ border-top: 1px solid rgba(74,45,33,.12); }
.accordion-item-btn{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 4px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; text-align: left;
  color: #35231D;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.accordion-item-btn:hover{ color: #4A2D21; background: rgba(74,45,33,.045); }
.accordion-plus{ position: relative; flex: 0 0 15px; width: 15px; height: 15px; }
.accordion-plus span{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #4A2D21; transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.accordion-plus span:first-child{ width: 13px; height: 1px; }
.accordion-plus span:last-child{ width: 1px; height: 13px; }
.accordion-item-btn[aria-expanded="true"] .accordion-plus span:last-child{ transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.accordion-panel{ max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.accordion-panel-inner{ padding: 0 4px 20px; }
.accordion-panel-inner p{ font-size: 14.5px; font-weight: 500; line-height: 1.7; color: var(--inner-body); max-width: 720px; }

/* ---- Process / stepper cards (Kargo, Sipariş Takibi) — numbered via CSS
   counters so the existing HTML (h3 + p, no icon markup) doesn't need to
   change. ---- */
.process-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 10px;
  counter-reset: process-step;
}
.process-grid--four{ grid-template-columns: repeat(4, 1fr); }
.process-card{
  padding: 26px 24px;
  border-right: 1px solid rgba(74,45,33,.10);
  counter-increment: process-step;
}
.process-card:last-child{ border-right: 0; }
@media (max-width: 900px){
  .process-grid,
  .process-grid--four{ grid-template-columns: 1fr; }
  .process-card{ border-right: 0; border-bottom: 1px solid rgba(74,45,33,.10); }
  .process-card:last-child{ border-bottom: 0; }
}
.process-card::before{
  content: counter(process-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif); font-weight: 600; font-size: 26px;
  line-height: 1; color: #8C6B57;
  margin-bottom: 14px;
}
.process-card h3{ font-size: 15px; font-weight: 700; color: #35231D; margin: 0 0 8px; }
.process-card p{ font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--inner-body); margin: 0; }

/* ---- Trust / value cards (Ödeme ve Güvenlik, Hakkımızda, Kargo özel
   durumlar) — auto-fit so the same rule works whether a page has 2 or 4
   cards, without per-page column overrides. ---- */
.block-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.block-card{
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 12px;
  padding: 26px 22px;
}
.block-card svg{ color: #4A2D21; margin-bottom: 14px; }
.block-card h3{ font-size: 15px; font-weight: 700; color: #35231D; margin: 0 0 8px; }
/* Ödeme ve Güvenlik: one bordered surface with dividers between the 4
   trust items instead of 4 separate floating boxes. */
.block-grid--surface{
  gap: 0;
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 10px;
}
.block-grid--surface .block-card{
  background: transparent; border: 0; border-radius: 0;
  border-right: 1px solid rgba(74,45,33,.10);
}
.block-grid--surface .block-card:last-child{ border-right: 0; }
@media (max-width: 900px){
  .block-grid--surface{ grid-template-columns: 1fr; }
  .block-grid--surface .block-card{ border-right: 0; border-bottom: 1px solid rgba(74,45,33,.10); }
  .block-grid--surface .block-card:last-child{ border-bottom: 0; }
}
.block-card p{ font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--inner-body); margin: 0; }

/* ---- Shared small accent rule under a .section-head title — used across
   Hakkımızda's sections without touching the shared .section-head/
   .section-title rules that render on every other page. ---- */
.section-head-rule{ display: block; width: 48px; height: 2px; background: #4A2D21; margin-top: 20px; }

/* ---- Value blocks (Hakkımızda: "Bizi Biz Yapan Değerler") — a light
   card-tint + top rule gives each block enough presence to fill its column
   without becoming a heavy bordered/shadowed card. Exclusive to this page. ---- */
.value-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.value-block{
  padding: 20px 18px 18px;
  background: #F7E9DE;
  border: 1px solid rgba(74,45,33,.10);
  border-radius: 8px;
}
.value-block .value-num{
  display: block; font-family: var(--font-serif); font-weight: 600; font-size: 22px;
  line-height: 1; color: rgba(74,45,33,.35); margin-bottom: 10px;
}
.value-block h3{ font-size: 16px; font-weight: 700; color: #35231D; margin: 0 0 6px; }
.value-block p{ font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--inner-body); margin: 0; }

/* ---- Hakkımızda: "Markamız" — small label/title column beside the copy,
   with a very small, deliberately-not-dominant "MG" signature above the
   eyebrow (13px, low-opacity serif — nowhere near the old full-size MG
   panel this page used to carry). ---- */
.about-brand-grid{ display: grid; grid-template-columns: minmax(200px,34%) minmax(0,1fr); gap: 40px; align-items: start; }
.about-mini-mark{
  display: block; font-family: var(--font-serif); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; color: rgba(74,45,33,.4); margin-bottom: 10px;
}
@media (max-width: 900px){
  .about-brand-grid{ grid-template-columns: 1fr; gap: 20px; }
}

/* ---- Hakkımızda: "Sadelikte Zarafet" — text column + a small pull-quote
   panel instead of the old full-size MG mark. Quote panel uses the same
   card tone/accent language as the rest of the page (var(--inner-card),
   #4A2D21 accent), so it reads as part of the same system, not a one-off
   decoration. ---- */
.elegance-section{ background: var(--inner-alt); }
.elegance-section .content-copy p{ max-width: 600px; }
.about-design-grid{ display: grid; grid-template-columns: minmax(0,1.5fr) minmax(200px,.85fr); gap: 48px; align-items: center; }
.about-quote{
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 28px 25px;
  background: var(--inner-card);
  border-left: 3px solid #4A2D21;
  border-radius: 0 10px 10px 0;
}
.about-quote-mark{ font-family: var(--font-serif); font-size: 42px; line-height: .6; color: rgba(74,45,33,.32); }
.about-quote-text{ font-family: var(--font-serif); font-weight: 500; font-style: italic; font-size: 21px; line-height: 1.3; color: #35231D; }
.about-quote-rule{ display: block; width: 36px; height: 1px; background: rgba(74,45,33,.35); }
@media (max-width: 900px){
  .about-design-grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---- Hakkımızda: "Kişiye Özel Tasarım" — copy column + a short list of
   plain, undecorated info rows (numbered, hairline-divided) instead of
   bordered/shadowed boxes, so the section fills out without reading as a
   product-feature grid. ---- */
.about-custom-grid{ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(230px,.9fr); gap: 56px; align-items: start; }
/* A little extra breathing room before the footer — this is the page's
   last section, and 58px of shared .content-section bottom padding alone
   read as glued to the footer beneath it. */
.content-section.about-custom-section{ padding-bottom: 108px; }
@media (max-width: 1023px){
  .content-section.about-custom-section{ padding-bottom: 96px; }
}
@media (max-width: 640px){
  .content-section.about-custom-section{ padding-bottom: 82px; }
}
.about-custom-list{ display: flex; flex-direction: column; gap: 4px; }
.about-custom-item{ display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(74,45,33,.14); }
.about-custom-item:first-child{ border-top: 0; padding-top: 0; }
.about-custom-num{ flex: 0 0 auto; font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: rgba(74,45,33,.4); }
.about-custom-item h3{ font-size: 14.5px; font-weight: 700; color: #35231D; margin: 0 0 4px; }
.about-custom-item p{ font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--inner-body); margin: 0; }
@media (max-width: 900px){
  .about-custom-grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---- İade ve Değişim: trust summary strip + info box ---- */
.trust-strip{
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 10px;
  margin-block: 28px;
}
.trust-strip-item{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center;
  padding: 20px 16px;
  border-right: 1px solid rgba(74,45,33,.10);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #35231D;
}
.trust-strip-item:last-child{ border-right: 0; }
.trust-strip-item em{
  font-style: normal; font-family: var(--font-serif); font-weight: 600;
  font-size: 20px; letter-spacing: 0; text-transform: none; color: #4A2D21;
}
@media (max-width: 640px){
  .trust-strip{ grid-template-columns: 1fr; }
  .trust-strip-item{ border-right: 0; border-bottom: 1px solid rgba(74,45,33,.10); }
  .trust-strip-item:last-child{ border-bottom: 0; }
}
.info-box{
  background: var(--inner-warn);
  border-left: 3px solid #4A2D21;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-top: 12px;
}
.info-box p{ margin-top: 0 !important; }

/* ---- Compare cards (İade ve Değişim: standart vs. kişiye özel) ---- */
.compare-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.compare-card{ background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 12px; padding: 26px 24px; }
.compare-card--accent{ background: var(--inner-alt); border-color: rgba(74,45,33,.18); }
.compare-card h3{ display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: #35231D; margin: 0 0 10px; }
.compare-card h3 svg{ color: #4A2D21; flex: 0 0 20px; }
.compare-card > p{ font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--inner-body); margin: 0 0 14px; }
.compare-card ul{ display: flex; flex-direction: column; gap: 8px; }
.compare-card li{ position: relative; padding-left: 18px; font-size: 13px; line-height: 1.5; color: #35231D; }
.compare-card li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #4A2D21; }

/* ---- Legal pages (Gizlilik, KVKK, Üyelik, Mesafeli Satış) — readability
   only, content untouched. Targets the exact `.container.content-copy`
   pattern these four pages share. Kargo/İade/Ödeme/Sipariş Takibi also use
   this markup pattern for their own plain-paragraph sections, but get
   their section coloring from .content-section/.section--alt as normal —
   see the .legal-flat-scoped rule further below for the legal-only part
   of this treatment. ---- */
.content-copy{ max-width: 980px; }
.container.content-copy{ margin-inline: auto; }
.content-copy h2{ font-family: var(--font-serif); font-weight: 600; font-size: 27px; color: #35231D; margin-bottom: 14px; }
.content-copy p{ margin-top: 12px; font-size: 14.5px; font-weight: 500; line-height: 1.7; color: var(--inner-body); max-width: 760px; }
.content-copy p strong{ color: #35231D; }
.legal-placeholder{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--inner-alt); color: #4A2D21;
  padding: 3px 10px; border-radius: 5px;
  font-weight: 700; font-style: normal;
  border: 1px solid rgba(74,45,33,.18);
}

/* ---- Legal pages (Gizlilik, KVKK, Üyelik, Mesafeli Satış) — single calm
   background, no alternating strips; sections are separated by a hairline
   instead, per the "legal pages stay sade/serious" rule. Scoped to
   .legal-flat (set on these four pages' <main>) specifically because
   Kargo/İade/Ödeme/Sipariş Takibi use this exact same `.container.content-
   copy` markup pattern for their own plain-paragraph sections too — but
   those pages need their .section--alt/.content-section--deep classes to
   actually show through as visible section separation, which an unscoped
   `background:transparent !important` here was silently cancelling. */
.legal-flat .content-section:has(> .container.content-copy){
  padding-block: 30px;
  background: transparent !important;
  border-bottom: 1px solid rgba(74,45,33,.10);
}
.legal-flat .content-section:has(> .container.content-copy):last-of-type{ border-bottom: 0; }

/* ---- End-of-page CTA strip (FAQ/Kargo/İade: "Aradığınız Yanıtı Bulamadınız
   mı?" etc.) — previously unstyled, so it rendered with no spacing of its
   own and read as glued to the footer. Now its own compact, transparent
   block with real breathing room on both sides. .page-cta--alt is for the
   one case (FAQ) where the section right above it is already the page's
   base tone, so the CTA needs its own tone to still read as a separate
   block instead of a continuation of that section. ---- */
.page-cta{ background: transparent; padding: 28px 0 40px; border-top: 1px solid rgba(74,45,33,.10); }
.page-cta--alt{ background: var(--inner-alt); }
.page-cta h2{
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(22px, 1.4vw + 16px, 24px);
  color: #35231D;
  margin-bottom: 20px;
}

/* Hairline seam for two content sections that sit back to back on the same
   base background (no .section--alt/--dark between them to mark the
   change) — added only on the specific sections that actually have this
   adjacency, not a blanket sibling rule that would also land on inner
   pages outside this pass. */
.section-seam{ border-top: 1px solid rgba(74,45,33,.10); }

/* ---- Cart page (Sepetim) ---- */
.container--cart{ max-width: 1280px; }
.cart-page-grid{ display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.cart-list{ display: flex; flex-direction: column; gap: 16px; }
.cart-line{
  position: relative;
  display: grid; grid-template-columns: 160px 1fr auto auto auto; align-items: center; gap: 20px;
  background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 12px;
  padding: 16px;
}
.cart-line-media{ display: block; width: 160px; height: 160px; border-radius: 8px; overflow: hidden; background: #F2E3D2; }
.cart-line-media .product-image{ width: 100%; height: 100%; aspect-ratio: auto; }
.cart-line-info{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-line-name{ font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: #35231D; }
.cart-line-material{ font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.cart-line-variation{ display: block; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.cart-line-price{ font-size: 13px; font-weight: 700; color: #4A2D21; margin-top: 2px; }
.cart-line-price.price-tba{ color: var(--text-secondary); font-weight: 500; }

/* Scoped to .cart-line so this never collides with the pre-existing
   product-detail-page .qty-control (urun.html) defined earlier in this
   file — same class name, deliberately different (smaller, pill) look
   only inside a cart row. */
.cart-line .qty-control{ display: flex; align-items: center; border: 1px solid rgba(74,45,33,.20); border-radius: 999px; overflow: hidden; }
.cart-line .qty-control button{
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #4A2D21; transition: background .2s var(--ease);
}
.cart-line .qty-control button:hover{ background: rgba(74,45,33,.08); }
.cart-line .qty-control input{
  width: 40px !important; height: 32px !important; border: 0 !important; text-align: center;
  padding: 0 !important; font-size: 14px; font-weight: 600;
}
.cart-line .qty-control input:focus{ box-shadow: none !important; }

.cart-line-total{ font-size: 15px; font-weight: 700; color: #35231D; white-space: nowrap; }
.cart-line-remove{
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text-secondary);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cart-line-remove:hover{ background: rgba(139,58,42,.1); color: #8B3A2A; }

@media (max-width: 1023px){
  .cart-page-grid{ grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px){
  .cart-line{
    grid-template-columns: 96px 1fr; grid-template-rows: auto auto auto;
    gap: 10px 14px;
  }
  .cart-line-media{ width: 96px; height: 96px; grid-row: 1 / 3; }
  .cart-line-info{ grid-column: 2; grid-row: 1; }
  .cart-line-qty{ grid-column: 2; grid-row: 2; }
  .cart-line-total{ grid-column: 1 / -1; grid-row: 3; text-align: right; }
  .cart-line-remove{ position: absolute; top: 10px; right: 10px; }
}

/* ---- Checkout page (Ödeme) ---- */
.checkout-layout{ display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.checkout-main{ display: flex; flex-direction: column; gap: 24px; }
.checkout-section-title{ font-family: var(--font-serif); font-weight: 600; font-size: 19px; color: #35231D; margin: 0 0 20px; }
.checkout-summary{ background: var(--inner-card); border: 1px solid var(--inner-border); border-radius: 12px; padding: 26px 24px; }
@media (min-width: 1024px){
  .checkout-summary{ position: sticky; top: 96px; }
}
.checkout-line-list{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.checkout-line{ display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; }
.checkout-line-image{ width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #F2E3D2; flex-shrink: 0; }
.checkout-line-image .product-image{ width: 100%; height: 100%; aspect-ratio: auto; }
.checkout-line-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkout-line-name{ font-size: 13px; font-weight: 700; color: #35231D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-line-qty{ font-size: 11.5px; color: var(--text-secondary); }
.checkout-line-variation{ display: block; font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.checkout-line-price{ font-size: 13px; font-weight: 700; color: #35231D; white-space: nowrap; }

@media (max-width: 1023px){
  .checkout-layout{ grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px){
  .form-row{ grid-template-columns: 1fr; }
  .form-card{ padding: 22px 18px; }
  .checkout-summary{ padding: 20px 18px; }
  .benefits-panel{ padding: 24px 22px; }
}

/* ==========================================================================
   Kişiye Özel: "İsimli Kolye Tasarla" (kisiye-ozel-kolye.html)
   Preview column (left) + .form-card personalization panel (right, reusing
   the same card/label/input/qty-control components as every other form on
   the site — see js/personalized-necklace.js for the behaviour).
   ========================================================================== */
.pn-layout{
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 768px){
  .pn-layout{ grid-template-columns: 1fr; gap: 28px; }
}

/* Fixed real product photo (images/personalized/necklace-base.png, a real
   925 silver chain + two jump rings shot on silk) as the base layer; the
   name is the only dynamic part, drawn on a transparent canvas stacked
   exactly on top. The card is forced to the photo's own 1:1 aspect ratio
   so object-fit:cover never has to crop it — which matters here because
   a crop would throw off the fixed ring coordinates js/personalized-
   necklace.js draws the name against. */
.pn-preview-card{
  position: relative;
  aspect-ratio: 1 / 1;
  background: #EEE1D5;
  border: 1px solid rgba(74,45,33,.14);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(74,45,33,.08), inset 0 1px 0 rgba(255,255,255,.55);
}
.pn-necklace-photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pn-necklace-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.pn-preview-note{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  margin:0; padding:7px 12px; border-radius:999px;
  background:rgba(255,250,245,.84); border:1px solid rgba(74,45,33,.08);
  box-shadow:0 5px 18px rgba(74,45,33,.08);
  backdrop-filter:blur(8px);
  font-size:10px; letter-spacing:.02em; color:var(--text-secondary);
  text-align:center; white-space:nowrap;
}

.pn-label{ display: block; font-size: 14px; font-weight: 600; color: #2F2018; margin-bottom: 8px; }
.pn-field-hint{ margin-top: 6px; font-size: 12.5px; color: #7B665A; line-height: 1.5; }
.pn-field-error{ margin-top: 6px; font-size: 13px; font-weight: 600; color: #8B3A2F; }

/* Panel-scoped overrides of the site's generic .inner-main form-field
   styling (left untouched globally — every other form on the site keeps
   the default sizing) so this page's inputs/select/labels read larger
   and higher-contrast without affecting auth/contact/checkout forms. One
   shared radius (12px) and one shared border tone (rgba(74,45,33,.15))
   run through every control in this panel — inputs, color cards, the
   Ölçü Rehberi row, the price/info blocks — so it all reads as one
   design system instead of a pile of separately-tuned components. */
.pn-panel label{ font-size: 14px; font-weight: 600; color: #2F2018; margin-bottom: 8px; }
.pn-panel .form-field{ margin-bottom: 22px; }
.pn-panel input:not([type="checkbox"]):not([type="radio"]),
.pn-panel select{
  height: 52px;
  font-size: 15.5px;
  border-radius: 12px;
  border-color: rgba(74,45,33,.15);
}
.pn-panel input::placeholder{ color: rgba(53,35,29,.48); }
.pn-panel input:focus,
.pn-panel select:focus{
  border-color: #4A2D21;
  box-shadow: 0 0 0 3px rgba(74,45,33,.08);
}
/* Zincir Ölçüsü gets a bit more room than Adet in their shared row, and
   both fields' controls line up at the exact same height. */
.pn-panel .form-row{ grid-template-columns: 1.25fr 1fr; }
.pn-panel .qty-control{ height: 52px; border-color: rgba(74,45,33,.15); border-radius: 12px; }
.pn-panel .qty-control button{ width: 34px; height: 52px; background: transparent; font-weight: 500; }
.pn-panel .qty-control input{ height: 52px; }

/* Color-card grid and price row: see the consolidated
   "COLOR + PRICE SINGLE SOURCE OF TRUTH" block further down this file --
   deliberately not duplicated here. */


/* A touch more premium than the generic .form-card: visibly lighter/
   cleaner than the page's own bej background (so the two don't blend
   together), a barely-there border, a soft-but-present lift shadow, and
   balanced desktop padding — plus a bigger, bolder submit button, since
   this page's form is the whole product purchase decision and earns
   more visual weight than a compact sidebar form elsewhere on the site. */
.pn-panel{
  border-radius: 16px;
  padding: 30px;
  background: #FFF8F2;
  border-color: rgba(74,45,33,.10);
  box-shadow: 0 16px 38px rgba(74,45,33,.09), inset 0 1px 0 rgba(255,255,255,.6);
}
.pn-submit{
  height: 56px; border-radius: 12px;
  font-size: 15.5px; font-weight: 700; letter-spacing: .07em;
  margin-top: 14px;
}

/* Scoped over the generic .info-box (used elsewhere on the site as-is)
   so only this page's warning box gets darker text, more breathing room,
   and a softer accent line — the base rule forces every <p> margin-top
   to 0 with !important, so the gap between lines is added as margin-
   BOTTOM on the first line instead of fighting that specificity. Kept
   visibly distinct from .pn-price-row's tint (fainter background) even
   though both are warm/mocha-toned. */
.pn-panel .info-box{
  background: rgba(74,45,33,.035);
  border-left-width: 1.5px; border-left-color: rgba(74,45,33,.4);
  border-radius: 0 12px 12px 0;
  padding: 18px 20px;
}
.pn-panel .info-box p{ color: #4A382F; font-size: 14px; line-height: 1.68; }
.pn-panel .info-box p:first-child{ margin-bottom: 6px; }

@media (max-width: 640px){
  
  
  .pn-panel{ padding: 26px 20px; }
}

.pn-toast{
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  background: #4A2D21; color: #FFF8F0;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 1000;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.pn-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

@media (max-width: 640px){
  .pn-preview-note{ bottom:12px; font-size:9px; padding:6px 10px; }
}

/* ---- Kişiye Özel landing page (kisiye-ozel.html): compact promo card
   linking to the new configurator, reusing existing card/button tokens. ---- */
.pn-promo-card{
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 32px;
  background: var(--inner-card);
  border: 1px solid var(--inner-border);
  border-radius: 12px;
}
.pn-promo-card .btn{ flex: none; }

/* ==========================================================================
   Ölçü Rehberi — shared size-guide modal (js/size-guide.js injects the
   markup once; every page that wants it just includes the script and adds
   a [data-size-guide-trigger] button — see that file's header comment).
   Visual language: same overlay/backdrop pattern as .mobile-nav-backdrop,
   same segmented-pill tabs as .auth-tabs (built on the existing
   .filter-chip), same card surface as the rest of the inner pages.
   ========================================================================== */
.size-guide-trigger{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  color: var(--inner-mocha); letter-spacing: .01em;
  border-bottom: 1px solid rgba(74,45,33,.3);
  padding-bottom: 1px;
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.size-guide-trigger svg{ color: var(--inner-mocha); flex-shrink: 0; }
.size-guide-trigger:hover{ color: var(--text); border-color: var(--text); }

/* Kişiye Özel Kolye panel only: the plain underlined-text trigger becomes
   a full premium interaction row (icon + label + trailing arrow) here —
   scoped to .pn-panel so the compact text-link version used in every
   category-page toolbar and on urun.html is completely untouched. */
.pn-panel .size-guide-trigger{
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 46px; margin-top: 10px;
  padding: 0 15px;
  background: rgba(74,45,33,.03);
  border: 1px solid rgba(74,45,33,.12);
  border-radius: 12px;
  font-size: 14px;
}
.pn-panel .size-guide-trigger-label{ flex: 1; text-align: left; }
.pn-panel .size-guide-trigger-arrow{ color: var(--inner-mocha); transition: transform var(--dur-s) var(--ease); }
.pn-panel .size-guide-trigger:hover{
  background: rgba(74,45,33,.06); border-color: rgba(74,45,33,.22);
}
.pn-panel .size-guide-trigger:hover .size-guide-trigger-arrow{ transform: translateX(3px); }

.size-guide-backdrop{
  position: absolute; inset: 0; background: rgba(53,35,29,.4);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-m) var(--ease);
  border: 0; padding: 0;
}
.size-guide-overlay{
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.size-guide-modal{
  /* Stacks above .size-guide-backdrop purely by DOM order (both are
     z-index:auto) — comes second in the markup, so it paints on top.
     Do NOT give the backdrop an explicit z-index: that would make IT
     paint above this modal regardless of DOM order and silently eat
     every click meant for the tabs/content underneath. */
  position: relative;
  width: min(560px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--inner-card);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 24px 64px rgba(53,35,29,.28);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.size-guide-overlay.is-open .size-guide-backdrop{ opacity: 1; pointer-events: auto; }
.size-guide-overlay.is-open .size-guide-modal{ opacity: 1; transform: translateY(0) scale(1); }
body.size-guide-open{ overflow: hidden; }

.size-guide-head{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.size-guide-head h2{
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(20px, 2.6vw, 26px);
  color: var(--text);
}
.size-guide-close{
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.size-guide-close:hover{ background: var(--inner-alt); color: var(--text); }

.size-guide-tabs{
  display: inline-flex; gap: 4px; flex-wrap: wrap;
  background: var(--inner-alt); padding: 4px; border-radius: 999px;
  margin-bottom: 22px;
}
.size-guide-tabs .filter-chip{
  background: transparent; border-color: transparent; color: var(--text-secondary);
  padding: 8px 16px; font-size: 12.5px;
}
.size-guide-tabs .filter-chip.is-active,
.size-guide-tabs .filter-chip[aria-selected="true"]{
  background: #4A2D21; border-color: #4A2D21; color: #FFF8F0;
}

.size-guide-panel h3{
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; color: var(--text);
  margin-bottom: 6px;
}
.size-guide-panel p{ font-size: 13.5px; color: var(--inner-body); line-height: 1.65; margin: 0 0 14px; }
.size-guide-methods{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }

.size-guide-steps{
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 18px; padding: 0; counter-reset: sg-step;
}
.size-guide-steps li{
  list-style: none; counter-increment: sg-step;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px; color: var(--inner-body); line-height: 1.55;
}
.size-guide-steps li::before{
  content: counter(sg-step);
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--inner-mocha); color: #FFF8F0;
  font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

.size-guide-example{
  background: var(--inner-warn); border-radius: 10px;
  padding: 12px 16px; font-size: 13px; color: var(--text);
  margin-bottom: 16px;
}
.size-guide-example strong{ font-weight: 700; }

.size-guide-table{
  width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 13px;
}
.size-guide-table th, .size-guide-table td{
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--inner-border);
}
.size-guide-table th{ font-weight: 700; color: var(--text); font-size: 12px; letter-spacing: .02em; }
.size-guide-table td{ color: var(--inner-body); }

.size-guide-note{
  font-size: 12px; color: var(--text-secondary); line-height: 1.6;
  padding-top: 4px; border-top: 1px dashed var(--inner-border);
}

.size-guide-necklace-list{ display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 0; }
.size-guide-necklace-list li{
  list-style: none; display: flex; align-items: baseline; gap: 14px;
  font-size: 13.5px; color: var(--inner-body); line-height: 1.5;
  padding-bottom: 10px; border-bottom: 1px solid var(--inner-border);
}
.size-guide-necklace-list li:last-child{ border-bottom: 0; padding-bottom: 0; }
.size-guide-cm{
  flex-shrink: 0; width: 52px;
  font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--text);
}

@media (max-width: 640px){
  .size-guide-overlay{ padding: 12px; }
  .size-guide-modal{ width: 100%; max-height: 90vh; padding: 22px 18px; }
  .size-guide-tabs{ width: 100%; }
  .size-guide-tabs .filter-chip{ flex: 1; text-align: center; padding: 8px 10px; }
}

/* ========================================================================== 
   PN FINAL UI READABILITY OVERRIDE — 2026-08-25
   Intentionally last in the cascade. Preview/name rendering untouched.
   ========================================================================== */
.page-header--pn{
  padding: 42px 0 38px !important;
  background: #F5E5D8 !important;
  border-bottom: 1px solid rgba(74,45,33,.20) !important;
}
.page-header--pn .breadcrumb{
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #5A4438 !important;
}
.page-header--pn .breadcrumb a{ color:#5A4438 !important; }
.page-header--pn .breadcrumb span:last-child{ color:#2A1B14 !important; font-weight:600 !important; }
.page-header--pn .eyebrow{
  margin-top: 20px !important;
  color:#4A2D21 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}
.page-header--pn .page-title{
  margin-top: 10px !important;
  color:#24160F !important;
  font-size: clamp(38px,4vw,54px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
}
.page-header--pn .page-intro{
  margin-top: 14px !important;
  max-width: 760px !important;
  color:#4A3328 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

.pn-panel{
  background:#FFF9F4 !important;
  border:1px solid rgba(74,45,33,.24) !important;
  border-radius:18px !important;
  padding:38px !important;
  box-shadow:0 20px 52px rgba(74,45,33,.13), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.pn-panel .form-field{ margin-bottom: 22px !important; }
.pn-panel label,
.pn-label{
  color:#24160F !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  margin-bottom:8px !important;
}
.pn-field-hint{
  margin-top:7px !important;
  color:#5E493F !important;
  font-size:13.5px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
}
.pn-panel input:not([type="checkbox"]):not([type="radio"]),
.pn-panel select{
  min-height:54px !important;
  height:54px !important;
  padding:0 15px !important;
  border:1px solid rgba(74,45,33,.30) !important;
  border-radius:10px !important;
  background:#FFFDF9 !important;
  color:#2A1B14 !important;
  font-size:16px !important;
  font-weight:500 !important;
}
.pn-panel input:focus,
.pn-panel select:focus{
  border-color:#4A2D21 !important;
  box-shadow:0 0 0 3px rgba(74,45,33,.11) !important;
}





.pn-qty-control{ height:54px !important; }
.pn-qty-control button,
.pn-qty-control input{ font-size:15px !important; }
.pn-panel .size-guide-trigger{
  min-height:50px !important;
  margin-top:10px !important;
  padding:0 15px !important;
  border:1px solid rgba(74,45,33,.20) !important;
  background:#FFFDF9 !important;
  border-radius:10px !important;
  color:#3B261D !important;
  font-size:14px !important;
  font-weight:750 !important;
  text-decoration:none !important;
}



.pn-panel .info-box{
  margin-top:0 !important;
  padding:18px 20px !important;
  background:#F7ECE4 !important;
  border-left:3px solid #4A2D21 !important;
  border-radius:0 10px 10px 0 !important;
}
.pn-panel .info-box p{
  color:#3A261D !important;
  font-size:14px !important;
  line-height:1.72 !important;
  font-weight:500 !important;
}
.pn-submit{
  width:100% !important;
  min-height:60px !important;
  height:60px !important;
  margin-top:14px !important;
  border-radius:8px !important;
  background:#4A2D21 !important;
  color:#FFF8F2 !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
}
.pn-submit:hover{ background:#382017 !important; }
.pn-prep-note{
  margin-top:12px !important;
  color:#60493D !important;
  font-size:13px !important;
  line-height:1.5 !important;
  font-weight:500 !important;
}

@media (max-width: 900px){
  .page-header--pn{ padding:30px 0 28px !important; }
  .page-header--pn .page-title{ font-size:clamp(32px,7.5vw,44px) !important; }
  .page-header--pn .page-intro{ font-size:15px !important; }
  .pn-panel{ padding:28px 24px !important; }
}
@media (max-width: 640px){
  .page-header--pn{ padding:24px 0 22px !important; }
  .page-header--pn .breadcrumb{ font-size:11.5px !important; }
  .page-header--pn .eyebrow{ font-size:10.5px !important; margin-top:14px !important; }
  .page-header--pn .page-title{ font-size:clamp(30px,9vw,38px) !important; line-height:1.08 !important; }
  .page-header--pn .page-intro{ font-size:14px !important; line-height:1.55 !important; }
  .pn-panel{ padding:24px 18px !important; border-radius:14px !important; }
  .pn-panel .form-field{ margin-bottom:18px !important; }
  
  
  
  .pn-submit{ min-height:54px !important; height:54px !important; }
}

/* ================================================================
   PERSONALIZED NECKLACE — COLOR + PRICE SINGLE SOURCE OF TRUTH
   Keep these selectors unique. Do not duplicate elsewhere.
   ================================================================ */
.pn-color-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.pn-color-option{
  /* This is a <label> (for the hidden radio inside it), and the site's
     global .inner-main label{display:block} rule outranks a single class
     selector on specificity (type+class beats class alone) — without
     !important here that global rule silently wins, collapsing this
     back to block flow and squashing the swatch's grid cell to ~0 width.
     Everything else in this rule is safe from that global label rule. */
  display:grid !important;
  position:relative;
  min-width:0;
  height:68px;
  padding:10px 12px;
  grid-template-columns:22px 1fr;
  grid-template-rows:1fr;
  align-items:center;
  column-gap:10px;
  background:#FFFDFC;
  border:1px solid rgba(74,45,33,.14);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pn-color-option input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.pn-color-option:hover{
  border-color:rgba(74,45,33,.28);
  background:#FFF9F5;
}
.pn-color-option:has(input:checked){
  border-color:#7A5542;
  background:#F7EEE8;
  box-shadow:0 4px 12px rgba(74,45,33,.06);
}
.pn-color-option:has(input:focus-visible){
  outline:2px solid rgba(74,45,33,.55);
  outline-offset:2px;
}
.pn-color-option::after{
  content:'✓';
  position:absolute;
  top:7px;
  right:7px;
  width:16px;
  height:16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#5A392B;
  color:#FFF9F4;
  font-size:9px;
  font-weight:700;
  opacity:0;
  transform:scale(.8);
  transition:.18s ease;
}
.pn-color-option:has(input:checked)::after{
  opacity:1;
  transform:scale(1);
}
.pn-color-swatch{
  display:block;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(74,45,33,.16);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), inset 0 -1px 2px rgba(74,45,33,.12);
}
.pn-color-swatch::after{ content:none; }
.pn-color-swatch--beyaz{ background:linear-gradient(145deg,#fff 0%,#ece9e2 48%,#cfc8bd 100%); }
.pn-color-swatch--rose{ background:linear-gradient(145deg,#f8ddd4 0%,#e7b39f 52%,#c98c77 100%); }
.pn-color-swatch--sari{ background:linear-gradient(145deg,#f6e4b0 0%,#dfb765 52%,#b98b3e 100%); }
.pn-color-name{
  min-width:0;
  font-size:13.5px;
  line-height:1.2;
  font-weight:600;
  color:#2D201A;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pn-price-row{
  min-height:72px;
  margin:10px 0 18px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#F8F1EC;
  border:1px solid rgba(74,45,33,.10);
  border-radius:12px;
}
.pn-price-label{
  font-family:var(--font-sans);
  font-size:12.5px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#6B5145;
  white-space:nowrap;
}
.pn-price-value{
  font-family:var(--font-sans);
  font-size:27px;
  line-height:1;
  font-weight:650;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums lining-nums;
  color:#2A1B14;
  white-space:nowrap;
}

@media (max-width:640px){
  .pn-color-grid{ gap:8px; }
  .pn-color-option{
    height:62px;
    padding:9px 9px;
    grid-template-columns:20px 1fr;
    column-gap:7px;
  }
  .pn-color-swatch{ width:20px; height:20px; }
  .pn-color-name{ font-size:12.5px; }
  .pn-price-row{ min-height:66px; padding:14px 15px; gap:12px; }
  .pn-price-label{ font-size:11.5px; }
  .pn-price-value{ font-size:24px; }
}

/* ========================================================================
   MOBILE CONSOLIDATION PASS — 2026-08-25
   One authoritative late-source block for the issues verified on real iPhone
   screenshots: homepage product density, promo tab overlap, mobile footer,
   drawer density, and inner-page account/favorites compaction.
   ======================================================================== */
@media (max-width: 640px){
  html, body{ max-width:100%; }
  body{ overflow-x: clip; }
  .container, .container--narrow{ padding-inline:16px; }

  /* Header: keep the current visual language, just reduce density. */
  .header-inner{ height:56px; }
  .logo-script{ font-size:21px; }
  .logo-subtitle{ font-size:7.5px; letter-spacing:1.5px; }
  .header-actions{ gap:2px; }
  .header-actions .icon-btn{ width:36px; height:36px; }
  .header-actions .icon-btn svg{ width:20px; height:20px; }

  /* Mobile drawer: less whitespace, more useful content above the fold. */
  .mobile-nav{ width:min(350px, 88vw); padding:18px 20px max(24px, env(safe-area-inset-bottom)); }
  .mobile-nav-head{ margin-bottom:14px; }
  .mobile-nav-list a,
  .mobile-nav-toggle-item{ padding:13px 2px; font-size:1.18rem; line-height:1.2; }
  .mobile-submenu a{ padding:10px 2px 10px 14px; font-size:13.5px; }
  .mobile-submenu li:last-child a{ padding-bottom:12px; }
  .mobile-nav-foot{ margin-top:22px; padding-top:18px; gap:11px; }
  .mobile-nav-foot a{ min-height:42px; font-size:13px; }

  /* Homepage hero sizing/copy lives entirely in the dedicated hero-slide
     media queries above (now max-width:768px) — do not duplicate it here. */

  /* Homepage product grids: two useful columns even on narrow phones, with
     a substantially shorter placeholder/media band. */
  body.home .home-bestsellers{ padding-block:24px; }
  body.home .home-bestsellers-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
  }
  body.home .home-bestsellers-grid .home-product-card{
    height:268px;
    min-height:0;
    border-radius:12px;
  }
  body.home .home-bestsellers-grid .product-card-media-link{
    height:165px;
    flex:0 0 165px;
    border-radius:12px 12px 0 0;
  }
  body.home .home-bestsellers-grid .home-product-card .product-card-caption{
    padding:11px 12px 12px;
  }
  body.home .home-product-card .product-card-caption h3{
    height:auto;
    min-height:0;
    -webkit-line-clamp:1;
    font-size:12.5px;
    line-height:1.3;
  }
  body.home .home-product-card .product-card-material{
    margin-top:5px;
    font-size:10px;
    line-height:1.25;
    letter-spacing:.025em;
  }
  body.home .home-product-placeholder .placeholder-visual{ gap:8px; }
  body.home .home-product-placeholder .placeholder-icon{ width:22px; height:22px; }
  body.home .home-product-placeholder .placeholder-tag{
    font-size:12.5px;
    letter-spacing:.085em;
  }
  body.home .home-product-placeholder .placeholder-notify{
    height:28px;
    font-size:10.5px;
  }

  /* Homepage editorial campaign cards: safer text inset and slightly tighter
     vertical rhythm on narrow screens. */
  body.home .home-campaigns .container--narrow{ padding-inline:8px; }
  body.home .home-campaign-band,
  body.home .home-campaign-band--flip{ min-height:0; }
  body.home .home-campaign-content,
  body.home .home-promo-text{ padding-inline:24px; }
  body.home .home-campaign-title,
  body.home .home-promo-title{ overflow-wrap:anywhere; }

  /* Moving benefit ribbon: clip only its own track, never the page. */
  body.home .home-ribbon-row{ overflow:hidden; }
  body.home .home-ribbon-track{ width:max-content; }

  /* Discount affordance: mobile chip instead of the tall vertical tab that
     obscured product copy/footer links in the screenshots. */
  .discount-tab{
    left:10px;
    top:auto;
    bottom:calc(18px + env(safe-area-inset-bottom));
    width:auto;
    height:36px;
    padding:0 13px;
    border-radius:999px;
    transform:none;
    box-shadow:0 7px 20px rgba(53,35,29,.18);
  }
  .discount-tab-label{
    writing-mode:horizontal-tb;
    transform:none;
    flex-direction:row;
    gap:7px;
  }
  .discount-tab-line{ font-size:9px; letter-spacing:.12em; }
  .discount-tab-percent{ font-size:15px; }
  /* Fires when .site-footer scrolls into view (js/main.js IntersectionObserver,
     mobile-only) so the fixed bottom-left chip never sits on top of footer
     content instead of fighting z-index. */
  .discount-tab.is-footer-near{
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
  }

  /* Footer intro becomes a compact brand preface. */
  .footer-top{ display:block; padding:28px 0 8px; }
  .footer-intro{ margin-bottom:18px; }
  .footer-intro .eyebrow{ margin-bottom:8px; font-size:10px; }
  .footer-heading{ font-size:27px; line-height:1.13; margin-bottom:10px; }
  .footer-intro-text{ font-size:12.5px; line-height:1.55; max-width:34em; }
  .footer-cta{ margin-top:16px; min-height:44px; padding-inline:16px; }

  /* Footer columns become true mobile accordions. main.js adds aria/state. */
  .footer-col{
    width:100%;
    border-top:1px solid rgba(255,248,240,.13);
  }
  .footer-col:last-child{ border-bottom:1px solid rgba(255,248,240,.13); }
  .footer-col h3{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:52px;
    margin:0;
    padding:0 28px 0 0;
    cursor:pointer;
    user-select:none;
    font-size:12px;
    letter-spacing:.1em;
  }
  .footer-col h3::after{
    content:'+';
    position:absolute;
    right:2px;
    top:50%;
    transform:translateY(-50%);
    font-family:var(--font-sans);
    font-size:20px;
    font-weight:300;
    color:rgba(255,248,240,.82);
  }
  .footer-col.is-open h3::after{ content:'−'; }
  .footer-col > ul{
    display:flex;
    max-height:0;
    overflow:hidden;
    opacity:0;
    gap:0;
    transition:max-height .28s var(--ease), opacity .18s var(--ease), padding .28s var(--ease);
    padding:0;
  }
  .footer-col.is-open > ul{
    max-height:520px;
    opacity:1;
    padding:0 0 14px;
  }
  .footer-col a,
  .footer-col--contact a,
  .footer-col--contact span{
    font-size:13px;
    line-height:1.35;
  }
  .footer-col a,
  .footer-col--contact a{
    min-height:40px;
    padding:10px 0;
    margin:0;
  }

  /* Footer lower (payment/monogram/security) mobile compaction now lives
     solely in the max-width:640px block above — do not duplicate it here. */

  /* Account page: reduce dead space while retaining readable touch targets. */
  .auth-tabs{ margin-bottom:16px; }
  .auth-tabs .filter-chip{ padding:8px 16px; font-size:12.5px; }
  .auth-card{ max-width:none; }
  .form-card{ padding:18px 16px; }
  .form-field{ margin-bottom:14px; }
  .inner-main input:not([type="checkbox"]):not([type="radio"]),
  .inner-main select{ height:46px; }
  .form-gate-notice{ padding:14px; margin-bottom:16px; }
  .form-gate-notice-actions{ gap:7px; }
  .benefits-panel{ padding:22px 18px; }
  .benefits-panel h2{ font-size:21px; margin:6px 0 16px; }
  .benefits-list{ gap:13px; }
  .benefits-list li{ gap:11px; font-size:13px; }
  .benefits-list li svg{ flex-basis:19px; width:19px; height:19px; }

  /* Favorites / generic empty states: much less oversized on phones. */
  .empty-state{
    padding:34px 20px;
    border-radius:12px;
  }
  .empty-state svg{ width:44px; height:44px; margin-bottom:13px; }
  .empty-state h3{ font-size:20px; line-height:1.25; }
  .empty-state p{ margin-top:8px; font-size:13.5px; }
  .catalog-note{ margin-top:26px; }
}

/* Keep the useful two-column home product density on the smallest phones too. */
@media (max-width: 380px){
  body.home .home-bestsellers-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  body.home .home-bestsellers-grid .home-product-card{ height:254px; min-height:0; }
  body.home .home-bestsellers-grid .product-card-media-link{ height:154px; flex-basis:154px; }
  body.home .home-bestsellers-grid .home-product-card .product-card-caption{ padding:10px; }
  body.home .home-product-placeholder .placeholder-tag{ font-size:11.5px; }
  body.home .home-product-placeholder .placeholder-notify{ font-size:10px; }
}