/* ─── Vior Privé — Design-System ───────────────────────────────────────────── */

/* ─── FONTS — Self-Hosted ────────────────────────────────────────────────── */
@font-face {
  font-family: 'Flaviotte';
  src: url('fonts/Flaviotte.woff2') format('woff2'),
       url('fonts/Flaviotte.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── DESIGN TOKENS (Dolce Vita — Moderater Refresh 2026-06-22) ─────────── */
:root {
  /* Palette */
  --bg:        #E9E4D9;   /* Creme/Leinen — bleibt */
  --sf:        #F1ECE2;
  --sf2:       #DED7C9;
  --tx:        #2E2A24;   /* wärmere Tinte — kein Blaugrau mehr */
  --sub:       #6E6A60;
  --ac:        #3A4A35;   /* Estate-Grün/Oliv — bleibt */
  --ac2:       #BCCAD2;
  --gold:      #D1A96F;   /* nur als seltener Akzent — nicht für Buttons/Borders */
  --warm:      #C06B45;   /* Terrakotta — ersetzt Rosewood #A17E6E */
  --olive:     #6E7148;   /* neues Oliv-Akzent-Token */
  --bd:        rgba(46,42,36,0.13); /* passt zu neuem --tx */
  /* Fonts */
  --ff-d: 'Flaviotte', serif;
  --ff-b: 'Flaviotte', serif;
  --ff-m: 'Flaviotte', serif;
  --ff-h: 'Flaviotte', serif;   /* Alias — bestellung-erfolg.html */
  /* Easing */
  --ease-expo:   cubic-bezier(.16,1,.3,1);
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-pdp:    cubic-bezier(.31,0,.13,1); /* Dior-Signatur-Easing — alle PDP-Transitions */
  /* Timing */
  --t-hover:   200ms;
  --t-ui-in:   250ms;
  --t-ui-out:  180ms;
  --t-toast:   300ms;
  /* Status */
  --ok:       var(--ac);
  --err:      #B5544E;
  /* Spacing */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-7: 56px; --sp-8: 64px;
}

/* Scent-Family Tokens — shared by Featured (fs-), Shop-Grid, Familien-Index */
[data-family="Oud"]          { --scent-core:#382040; --scent-mid:#1E1426; --scent-glow:rgba(180,140,100,.18); --scent-bg:url("img/scent/scent-oud.jpg"); }
[data-family="Amber"]        { --scent-core:#5A3D14; --scent-mid:#2A1D0C; --scent-glow:rgba(209,169,111,.30); --scent-bg:url("img/scent/scent-amber.jpg"); }
[data-family="Floral"]       { --scent-core:#4A2433; --scent-mid:#241218; --scent-glow:rgba(200,160,130,.22); --scent-bg:url("img/scent/scent-floral.jpg"); }
[data-family="Holzig"]       { --scent-core:#3A2A1A; --scent-mid:#1E150D; --scent-glow:rgba(165,120,75,.20); --scent-bg:url("img/scent/scent-holzig.jpg"); }
[data-family="Orientalisch"] { --scent-core:#58200F; --scent-mid:#2A120A; --scent-glow:rgba(210,140,80,.25); --scent-bg:url("img/scent/scent-orientalisch.jpg"); }
[data-family="Frisch"]       { --scent-core:#163A40; --scent-mid:#0E2226; --scent-glow:rgba(150,190,200,.18); --scent-bg:url("img/scent/scent-frisch.jpg"); }

/* ─── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: auto; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--ff-b);
  font-weight: 400;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
/* Placeholder contrast: --sub (#A89070) on --sf (#221608) = 5.6:1, passes WCAG AA */
input::placeholder, textarea::placeholder { color: var(--sub); opacity: 1; }

/* ─── GRAIN OVERLAY ──────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.045;
  pointer-events: none;
  z-index: 9997;
  mix-blend-mode: multiply;
}

/* ─── PRELOADER ──────────────────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s var(--ease-expo);
}
#preloader.exit { clip-path: inset(100% 0 0 0); pointer-events: none; }
#prePct {
  font-family: var(--ff-m);
  font-size: clamp(40px, 8vw, 80px);
  color: var(--ac);
  line-height: 1;
}
#preFill {
  width: 160px;
  height: 1px;
  background: var(--bd);
  position: relative;
  overflow: hidden;
}
#preFill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ac);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s linear;
}
.pre-brand {
  font-family: var(--ff-m);
  font-size: 12px;
  letter-spacing: .25em;
  color: var(--sub);
  text-transform: uppercase;
}

/* ─── NAV ────────────────────────────────────────────────────────────────── */
.v2-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  background: transparent;
  transition: background .4s var(--ease-out), border-bottom-color .4s;
  border-bottom: 1px solid transparent;
}
.v2-nav.is-scrolled {
  background: rgba(241,236,226,0.85);
  border-bottom-color: var(--bd);
  backdrop-filter: blur(12px);
  color: var(--tx);
}
.v2-nav-logo {
  font-family: var(--ff-d);
  font-size: 20px;
  font-style: italic;
  color: #F2ECE0;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color .4s var(--ease-out);
}
.v2-nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-family: var(--ff-b);
  font-size: 14px;
  font-weight: 400;
  color: rgba(242,236,224,0.8);
  transition: color .4s var(--ease-out);
}
.v2-nav-links a:hover { color: #F2ECE0; }
.nav-cart {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(242,236,224,0.85);
  color: rgba(242,236,224,0.85);
  padding: 8px 18px;
  cursor: pointer;
  font-family: var(--ff-b);
  font-size: 13px;
  border-radius: 2px;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
  min-height: 44px;
}
.nav-cart:hover { background: rgba(242,236,224,0.85); color: var(--bg); }
.v2-nav.is-scrolled .v2-nav-logo { color: var(--tx); }
.v2-nav.is-scrolled .v2-nav-links { color: var(--sub); }
.v2-nav.is-scrolled .v2-nav-links a:hover { color: var(--tx); }
.v2-nav.is-scrolled .nav-cart { border-color: var(--ac); color: var(--ac); }
.v2-nav.is-scrolled .nav-cart:hover { background: var(--ac); color: var(--bg); }
.nav-cart.fx-pop { animation: pop 0.35s var(--ease-spring); }
@keyframes pop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* ─── AUDIO TOGGLE ───────────────────────────────────────────────────────── */
.audio-toggle {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 800;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(51,61,71,0.18);
  background: rgba(233,228,217,0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
  color: var(--sub);
}
.audio-toggle:hover { background: rgba(233,228,217,0.97); border-color: var(--ac); color: var(--ac); }
.audio-toggle.is-playing { border-color: var(--ac); color: var(--ac); background: rgba(233,228,217,0.95); }
.audio-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.audio-toggle .icon-pause { display: none; }
.audio-toggle.is-playing .icon-play { display: none; }
.audio-toggle.is-playing .icon-pause { display: block; }


/* ─── KONTAKT V2 ──────────────────────────────────────────────────────────── */
.kontakt-v2-section {
  padding: 140px 48px 100px;
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: 80px;
  align-items: start;
  max-width: 1200px;
}
.kontakt-v2-eyebrow {
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ac);
  text-transform: uppercase;
  display: block;
  margin-bottom: 24px;
}
.kontakt-v2-title {
  font-family: var(--ff-d);
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 400;
  color: var(--tx);
  line-height: 1.05;
  margin-bottom: 24px;
}
.kontakt-v2-sub {
  font-family: var(--ff-b);
  font-size: 15px;
  font-weight: 300;
  color: var(--sub);
  line-height: 1.75;
}
.kontakt-mail-v2 {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kontakt-mail-label {
  font-family: var(--ff-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ac, #C8923D);
  margin-bottom: 20px;
}
.kontakt-mail-link {
  font-family: var(--ff-d);
  font-size: clamp(26px, 3.2vw, 44px);
  color: var(--tx, #EDE8E0);
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(51,61,71,0.35);
  text-decoration: none;
  transition: color .25s, border-color .25s;
  word-break: break-all;
  min-height: 44px;
}
.kontakt-mail-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.kontakt-mail-copy {
  margin-top: 24px;
  padding: 12px 24px;
  background: none;
  border: 1px solid var(--bd, rgba(237,232,224,.12));
  color: var(--ac, #C8923D);
  font-family: var(--ff-b);
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
  width: fit-content;
  transition: border-color 300ms var(--ease-pdp), color 300ms var(--ease-pdp);
}
.kontakt-mail-copy:hover {
  border-color: var(--ac);
  color: var(--gold);
}
.kontakt-mail-copy:active {
  transform: scale(0.97);
}
.kontakt-mail-meta {
  margin-top: 48px;
  list-style: none;
  padding: 0;
}
.kontakt-mail-meta li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd, rgba(237,232,224,.12));
  font-size: 14px;
}
.kontakt-mail-meta em {
  font-family: var(--ff-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ac, #C8923D);
  font-style: normal;
  align-self: center;
}
.kontakt-mail-meta span {
  color: var(--tx);
}

/* ─── FX TOAST ────────────────────────────────────────────────────────────── */
.fx-toast-region {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 9998;
  pointer-events: none;
}
.fx-toast {
  background: var(--sf2);
  border: 1px solid var(--bd);
  color: var(--tx);
  font-family: var(--ff-b);
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-toast) var(--ease-out), transform var(--t-toast) var(--ease-out);
}
.fx-toast--in { opacity: 1; transform: none; }
.fx-toast--out { opacity: 0; transform: translateY(-8px); }
.fx-toast[data-type="success"] { border-color: var(--ok); color: var(--ok); }
.fx-toast[data-type="error"] { border-color: var(--err); color: var(--err); }

/* ─── FX BUTTON MORPH ─────────────────────────────────────────────────────── */
.fx-btn-label { transition: opacity .15s; }
.fx-check {
  display: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fx-check--draw { display: inline-block; }
.fx-check polyline {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset .4s var(--ease-expo) .1s;
}
.fx-check--draw polyline { stroke-dashoffset: 0; }
.fx-shake { animation: shake 0.35s var(--ease-expo); }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* ─── NAV SCROLL BEHAVIOR ─────────────────────────────────────────────────── */
/* JS adds .is-scrolled on scroll > 60px */

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .story-split { grid-template-columns: 1fr; gap: 48px; }
  .story-img { max-width: 500px; }
  .pdp-v2-inner { grid-template-columns: 1fr; }
  .pdp-v2-img-col { position: static; height: 60vh; }
  .pdp-v2-info-col { padding: 40px; }
  .kontakt-v2-section { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .v2-nav { padding: 20px 24px; }
  .hero-v2-content { padding: 0 24px 80px; }
  .hero-scroll-cue { display: none; }
  #intro-story { padding: 80px 24px; }
  .featured-v2-header { padding: 0 24px 48px; }
  .shop-v2-header { padding: 100px 24px 56px; }
  .shop-v2-body { padding: 40px 24px 80px; }
  #shop-grid-v2 { grid-template-columns: 1fr; gap: 48px; }
  .cta-band-v2-content { padding: 0 24px; }
  .v2-footer { padding: 32px 24px; }
  .kontakt-v2-section { padding: 100px 24px 60px; }
  .pdp-v2-info-col { padding: 32px 24px; }
  .pdp-v2-img-col { height: 50vh; }
}
@media (max-width: 480px) {
  .v2-nav-links a:not(.nav-cart) { font-size: 11px; letter-spacing: .03em; }
  .hero-v2-title { font-size: clamp(40px, 11vw, 80px); }
  #shop-grid-v2 { grid-template-columns: 1fr; }
  .shop-card-v2-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .shop-card-v2-cart { width: 100%; }
}

/* ═══════ CART DRAWER ═══════════════════════════════════════════════════ */
.cart-backdrop{position:fixed;inset:0;background:rgba(8,8,12,.75);z-index:999;opacity:0;pointer-events:none;transition:opacity var(--t-ui-in) var(--ease-out)}
.cart-backdrop.is-open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);background:var(--sf);border-left:1px solid var(--bd);z-index:1000;display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--t-ui-in) var(--ease-out)}
.cart-drawer.is-open{transform:translateX(0)}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--bd);flex-shrink:0}
.cart-drawer-title{font-family:var(--ff-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx)}
.cart-drawer-close{background:none;border:none;cursor:pointer;color:var(--sub);font-size:20px;line-height:1;padding:4px;transition:color var(--t-hover)}
.cart-drawer-close:hover{color:var(--tx)}
.cart-drawer-body{flex:1;overflow-y:auto;padding:16px 24px;overscroll-behavior:contain}
.cart-empty{padding:48px 0;text-align:center;font-family:var(--ff-b);font-size:14px;color:var(--sub)}
.cart-item{display:grid;grid-template-columns:76px 1fr auto auto auto;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--bd)}
.cart-item:last-child{border-bottom:none}
.cart-item-img{width:76px;height:76px;object-fit:contain;background:var(--sf2);border-radius:2px}
.cart-item-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.cart-item-name{font-family:var(--ff-b);font-size:14px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-meta{font-family:var(--ff-m);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--sub)}
.cart-item-qty{display:flex;align-items:center;gap:6px}
.cart-item-qty button{background:none;border:1px solid var(--bd);border-radius:2px;color:var(--ac);width:22px;height:22px;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color var(--t-hover)}
.cart-item-qty button:hover{border-color:var(--ac)}
.cart-item-qty span{font-family:var(--ff-m);font-size:12px;color:var(--tx);min-width:14px;text-align:center}
.cart-item-price{font-family:var(--ff-b);font-size:13px;color:var(--gold);white-space:nowrap}
.cart-item-remove{background:none;border:none;cursor:pointer;color:var(--sub);font-size:16px;line-height:1;padding:4px;transition:color var(--t-hover)}
.cart-item-remove:hover{color:var(--err)}
.cart-drawer-foot{padding:20px 24px;border-top:1px solid var(--bd);flex-shrink:0}
.cart-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cart-total-label{font-family:var(--ff-m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.cart-total-price{font-family:var(--ff-b);font-size:20px;font-weight:500;color:var(--tx)}
.cart-tax-note{font-family:var(--ff-m);font-size:12px;letter-spacing:.04em;color:var(--sub);margin-bottom:16px}
.cart-checkout-btn{width:100%;padding:14px;background:var(--ac);color:var(--bg);border:none;border-radius:6px;cursor:pointer;font-family:var(--ff-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:opacity 300ms var(--ease-pdp)}
.cart-checkout-btn:hover{opacity:.85}
.cart-checkout-btn:disabled{cursor:not-allowed;opacity:.4}
.cart-checkout-btn.is-loading{opacity:.6;pointer-events:none}
html.cart-open, html.cart-open body, html.nav-open, html.nav-open body { overflow: hidden; overscroll-behavior: none; touch-action: none; }
/* ── Cart-Drawer: kompaktes Grid auf kleinen Screens ─────────────────────── */
@media (max-width: 600px) {
  .cart-drawer { width: 100vw; }
  .cart-item {
    grid-template-columns: 64px 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 10px;
  }
  .cart-item-qty { grid-column: 2; grid-row: 2; }
  .cart-item-price { grid-column: 3; grid-row: 2; align-self: end; }
  .cart-item-remove { grid-column: 3; grid-row: 1; align-self: start; }
  .cart-item-img { grid-row: 1 / 3; width: 64px; height: 64px; }
}