/* Francis Klein Paris v4: lighter, rose-beige charter taken from the current francisklein.fr
   (Astra palette: #DA8A7F rose, #FEF1E4 cream, #E5D7D1 rose beige, #201E1E ink).
   Bottle green is kept only as a touch of contrast: secondary buttons, badges, the order summary, "Make it yours". */
:root {
  --rose: #DA8A7F;
  --rose-d: #A9564F;
  --rose-dd: #8A433D;
  --rose-l: #F0C3BA;
  --cream: #FEF1E4;
  --beige: #E5D7D1;
  --blush: #F6E6E0;
  --panel: #F3E4DD;
  --paper: #FCF8F5;
  --case: #F7EEE9;
  --case-2: #EEDFD8;
  --ink: #201E1E;
  --text-2: #594845;
  --muted: #8C7873;
  --muted-2: #957F79;
  --line: rgba(32,30,30,.12);
  --line-soft: rgba(32,30,30,.07);
  --green: #1D5747;
  --green-2: #234F43;
  --green-3: #2C6655;
  --gold: #C7A15A;
  --gold-d: #8E6F33;
  --gold-line: #E6D3B3;
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--rose); color: #fff; }

/* buttons */
.btn-primary { background: var(--rose-d); border-color: var(--rose-d); color: #fff; box-shadow: 0 10px 24px -14px rgba(169,86,79,.9); }
.btn-primary:hover { background: var(--rose-dd); border-color: var(--rose-dd); box-shadow: 0 16px 30px -14px rgba(169,86,79,.9); }
.btn-secondary { background: transparent; color: var(--green); border-color: var(--green); }
.btn-secondary:hover { background: var(--green); color: #fff; }
.btn-ghost, .on-dark .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(32,30,30,.35); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-gold { color: var(--gold-d); border-color: var(--gold); }
.accent, .nav-left a.accent { color: var(--green); }
.nav-left a:hover, .nav-right a:hover, [data-nav].is-active { color: var(--rose-d); }
.nav-left a::after, .nav-right a::after { background: var(--rose); }
:focus-visible { outline-color: var(--rose-d); }

/* the former green blocks become light rose-beige rooms */
.announce { background: var(--rose-d); color: #FFF7F3; }
.announce-track span::after { background: #FFE2D8; }
.dark { background: linear-gradient(180deg, var(--panel), var(--blush)); color: var(--ink); }
.on-dark .lead, .on-dark p { color: var(--text-2); }
.eyebrow.gold { color: var(--rose-d); }
.on-dark .link { color: var(--ink); border-color: var(--rose); }
.chip { color: var(--ink); border-color: rgba(32,30,30,.22); background: rgba(255,255,255,.55); }
.chip:hover, .chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hours div { border-color: var(--line); }
.finder { background: radial-gradient(70% 90% at 50% 0%, #FFFFFF, transparent 70%), linear-gradient(180deg, var(--cream), var(--blush)); }
.finder-box { box-shadow: 0 18px 44px -20px rgba(110,60,55,.45); border: 1px solid var(--line-soft); }
.finder .display-md { color: var(--ink); }
.look-closer { background: var(--beige); }
.media.cover { background: var(--beige); }
.media.deep, .media.hero-bg { background: radial-gradient(70% 70% at 50% 50%, #fff, var(--case-2)); --fk-outline: rgba(32,30,30,.45); }
.media.deep .ph-label { color: var(--muted); }
.config-preview { background: linear-gradient(180deg, var(--panel), var(--blush)); }
.config-preview .display-sm { color: var(--ink) !important; }
.config-views button { background: #fff; border-color: var(--line); color: var(--muted); }
.config-views button.is-on { border-color: var(--rose-d); color: var(--rose-d); }
.teaser-tiles a { background: #fff; border-color: var(--line-soft); }
.teaser-tiles .tile-art { background: var(--case); }
.teaser-tiles a:hover { border-color: var(--rose); }
.tryon-page.dark, .tryon-page.ink { background: var(--panel); }

/* green touches kept on purpose */
.card.feature { background: radial-gradient(80% 70% at 85% 0%, rgba(218,138,127,.45), transparent 70%), var(--green); }
.summary { background: var(--green); }
.badge-green { background: var(--green); }
.price { color: var(--green); }
.countup { color: var(--green); }
.f-color.is-on { border-color: var(--green); background: rgba(29,87,71,.08); }
.vswatch:hover, .vswatch.is-on, .vdots span.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rose-d); }
.pdp-variants .media.is-on { outline-color: var(--rose-d); }

/* header: solid (no blur while scrolling) */
.site-header { background: rgba(252,248,245,.97); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* cards and frames */
.media.white, .media.jewel { background:
  radial-gradient(60% 55% at 50% 52%, color-mix(in srgb, var(--glow) 22%, #fff) 0%, rgba(255,255,255,0) 70%),
  radial-gradient(120% 90% at 50% 40%, #FFFFFF 0%, var(--case) 72%, var(--case-2) 100%); }
.card:hover { box-shadow: 0 24px 46px -26px rgba(120,60,55,.45); }
.color-tile:hover, .store:hover { box-shadow: 0 20px 36px -24px rgba(120,60,55,.45); }

/* home hero: editorial, light, no floating frame */
.hero4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(40px, 6vw, 84px) var(--pad) clamp(50px, 6vw, 90px); background:
  radial-gradient(50% 60% at 0% 0%, #FFFFFF, transparent 70%),
  linear-gradient(160deg, var(--cream) 0%, var(--blush) 60%, var(--beige) 100%); overflow: hidden; }
.hero4-text { max-width: 560px; }
.hero4 .eyebrow { color: var(--rose-d); }
.hero4-title { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 5.4vw, 84px); line-height: .98; letter-spacing: -.02em; margin: 18px 0 0; color: var(--ink); }
.hero4-title .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero4-title .ln > span { display: inline-block; }
.hero4-lead { font-size: 17px; line-height: 1.8; color: var(--text-2); margin: 24px 0 0; max-width: 460px; font-weight: 300; }
.hero4 .btn-row { margin-top: 34px; }
.hero4-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.hero4-facts b { display: block; font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); }
.hero4-media { position: relative; }
.hero4-img { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: 0 40px 80px -40px rgba(110,55,50,.55); }
.hero4-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.hero4-tag { position: absolute; left: -28px; bottom: 28px; display: flex; gap: 14px; align-items: center; padding: 12px 18px 12px 12px; background: #fff; border-radius: 16px; box-shadow: 0 20px 40px -22px rgba(80,40,40,.5); }
.hero4-tag img { width: 92px; height: 40px; object-fit: contain; }
.hero4-tag span { display: block; font-size: 12.5px; color: var(--muted); }
.hero4-tag b { font-family: var(--serif); font-weight: 500; font-size: 18px; }
.hero4-tag em { font-style: normal; color: var(--rose-d); margin-left: 6px; }

.marquee { background: var(--beige); color: var(--ink); }
.marquee span::after { background: var(--rose); }
.avatar-img { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--rose); }
.profile-bar { background: var(--cream); }

.tryon-promo { background: linear-gradient(180deg, var(--blush), var(--panel)); color: var(--ink); }
.facts li { color: var(--text-2); }
.facts li::before { background: var(--rose); }
.device { background: linear-gradient(145deg, #3a2f2e, #1d1717); }

/* integrated try-on page */
.tryon3 { background: linear-gradient(180deg, var(--panel), var(--blush)); }
.tryon3 .display-sm { color: var(--ink) !important; }
.tryon3 .back { color: var(--text-2); border-color: var(--rose); }
.tryon3 .back:hover { color: var(--ink); }
.tryon3-note { color: var(--muted); }
.tryon3-frame { background: #fff; box-shadow: 0 40px 80px -44px rgba(110,55,50,.55), 0 0 0 1px var(--line); }
.tf-art { background: radial-gradient(closest-side, rgba(218,138,127,.35), transparent); }
.tf-art img { filter: drop-shadow(0 26px 22px rgba(80,40,40,.3)); }
.tryon3-wait .spinner .r1 { border-color: rgba(169,86,79,.3); border-top-color: var(--rose-d); }

/* concierge: light */
.concierge { background: var(--paper); color: var(--ink); box-shadow: -30px 0 70px rgba(80,40,40,.2); }
.cc-head, .cc-foot { border-color: var(--line); }
.cc-close { color: var(--muted); }
.msg.bot { background: #fff; border-color: var(--line-soft); }
.msg.me { background: var(--rose-d); color: #fff; }
.msg.saved { background: var(--cream); border-color: var(--gold-line); }
.msg.typing { color: var(--muted); }
.cc-chips button { color: var(--ink); border-color: var(--line); background: #fff; }
.cc-chips button:hover { background: var(--ink); color: var(--paper); }
.cc-rec { background: #fff; border: 1px solid var(--line-soft); }
.cc-input { border-color: var(--line); background: #fff; }
.cc-input input { color: var(--ink); }
.cc-input input::placeholder { color: var(--muted); }
.cc-input button { color: var(--rose-d); }
.cc-disclaimer { color: var(--muted); }
.avatar-dark { background: var(--cream); color: var(--rose-d); }
.bubble-label span { color: var(--rose-d); }
.bubble-avatar { border-color: var(--rose); box-shadow: 0 14px 34px rgba(169,86,79,.35), 0 0 0 2px var(--paper); }

/* footer: rose beige */
.site-footer { background: var(--beige); color: var(--ink); }
.footer-top { border-color: var(--line); }
.footer-top p { color: var(--text-2); }
.footer-bottom { color: var(--muted); }
.footer-links a:hover { color: var(--rose-d); }
.inline-form input { color: var(--ink); border-color: rgba(32,30,30,.25); background: #fff; }
.inline-form input::placeholder { color: var(--muted); }
.inline-form input:focus { border-color: var(--rose-d); }

.toast { background: var(--ink); box-shadow: none; }

@media (max-width: 900px) {
  .hero4 { grid-template-columns: 1fr; gap: 34px; padding-top: 30px; }
  .hero4-title { font-size: clamp(40px, 11vw, 54px); }
  .hero4 .btn-row { flex-direction: column; }
  .hero4 .btn-row .btn { width: 100%; }
  .hero4-facts { margin-top: 28px; gap: 8px 22px; }
  .hero4-facts b { font-size: 22px; }
  .hero4-img { border-radius: 22px; aspect-ratio: 4 / 4; }
  .hero4-tag { left: 12px; bottom: 12px; padding: 8px 12px 8px 8px; }
  .hero4-tag img { width: 70px; height: 32px; }
  .hero4-tag b { font-size: 16px; }
}

/* collections: light tinted cases instead of dark panels */
.collection-card .media.col-stage { background: radial-gradient(70% 70% at 50% 40%, #fff, #F2D9D3); }
.collection-card.col-1 .media.col-stage { background: radial-gradient(70% 70% at 50% 40%, #fff, #DCE7E0); }
.collection-card.col-2 .media.col-stage { background: radial-gradient(70% 70% at 50% 40%, #fff, #EEDFCB); }
.col-stage img { filter: drop-shadow(0 16px 14px rgba(80,40,40,.22)); }
.collection-card .arrow { color: var(--rose-d); }