/* ==========================================================================
   L'Avent d'oublier — thème « Le sapin »
   Ciel d'hiver bleu nuit, neige, un grand sapin : 23 boules + l'étoile du 24.
   ========================================================================== */
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-600.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/lora-italic.woff') format('woff'); font-style: italic; font-weight: 400 700; font-display: swap; }

:root {
  --night: #13284a; --night-2: #1d3a66; --snow: #f5f8fb; --cream: #f5f8fb; --paper: #ffffff;
  --ink: #1d2433; --muted: #5f6b7d; --line: #dfe6ef;
  --red: #c8102e; --red-dark: #8f0b20; --pine: #1f6b4a; --pine-dark: #144a33; --gold: #f2b632; --gold-dark: #b9811a;
  --title: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --script: 'Lora', 'Iowan Old Style', Georgia, serif;
  --round: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow: 0 1px 2px rgba(19,40,74,.06), 0 6px 18px -6px rgba(19,40,74,.18);
}

/* ---------- Fond : neige claire, lisible ---------- */
body { background: linear-gradient(180deg, #e9f0f7 0, var(--snow) 340px) no-repeat, var(--snow); color: var(--ink); font-family: var(--round); }
.snowfall { z-index: 0; }
.snowfall i { color: #b9cde3; opacity: .9 !important; text-shadow: none; }
.wrap { position: relative; z-index: 1; }

/* ---------- Typographie ---------- */
h1, h2, h3, .q-title, .version-title, .sheet-head h2, .cheer { font-family: var(--title); font-weight: 700; letter-spacing: -.01em; }
.question, .reveal-text { font-family: var(--title); font-weight: 600; }
.tagline, .aud-pitch, .film-caption.written { font-family: var(--script); font-style: italic; }
.wrap > h1 { font-size: 30px; color: var(--night); }

/* ---------- En-tête : ciel d'hiver ---------- */
.hero-card.night { position: relative; overflow: hidden; min-height: 0; margin: 4px 0 8px; padding: 0; border-radius: 26px; transform: none; filter: none;
  background: radial-gradient(120% 80% at 50% 0%, #2d5592 0%, var(--night-2) 45%, var(--night) 100%); box-shadow: 0 16px 34px -14px rgba(19,40,74,.6); text-align: center; }
.hero-card.night::after, .hero-card.night::before { display: none; }
.hero-card.night .night-deco { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 96px; pointer-events: none; }
.hero-card.night .hero-content { position: relative; z-index: 1; padding: 26px 22px 84px; color: #fff; }
.hero-card.night h1 { font-family: var(--title); color: #fff; font-size: clamp(32px, 9vw, 44px); line-height: 1.05; margin: 8px 0 6px; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.hero-card.night .tagline { color: #dbe6f5; font-size: 17px; max-width: 30ch; margin: 0 auto; text-shadow: none; font-weight: 400 !important; }
.hero-card.night .brand { color: var(--gold); font: 700 12px var(--round); letter-spacing: .18em; text-transform: uppercase; margin: 0; text-shadow: none; }
.hero-card.night .logo { font-size: 42px; margin: 2px auto 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.hero-card.night .pill-xmas { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.25) !important; box-shadow: none !important; transform: none !important; border-radius: 999px; font: 700 13px var(--round); padding: 5px 12px; }
.hero-scene, .garland { display: none !important; }

/* ---------- Choix de la catégorie ---------- */
.q-title { font-size: 23px; color: var(--night); margin: 24px 0 12px; }
.stickers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sticker { position: relative; transform: none !important; background: var(--paper); border: 2px solid transparent; border-radius: 18px; padding: 12px; min-height: 66px; box-shadow: var(--shadow); font: 600 15px var(--round); color: var(--ink); }
.sticker::after { display: none; }
.sticker.on { border-color: var(--red); background: #fff5f6; color: var(--red-dark); box-shadow: 0 0 0 4px rgba(200,16,46,.12), var(--shadow); }
.sticker .tick { background: var(--red); }
.aud-pitch { color: var(--muted); font-size: 16px; }

/* ---------- Le gros bouton : une boule rouge ---------- */
.bigdrop { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 18px; color: #fff; border: none;
  background: radial-gradient(90% 120% at 30% 10%, #ff5a6e 0%, var(--red) 45%, var(--red-dark) 100%);
  box-shadow: 0 12px 26px -10px rgba(143,11,32,.7); }
.bigdrop::before { display: none !important; }
.bigdrop::after { content: ''; position: absolute; top: 10px; left: 18px; width: 70px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.25); transform: rotate(-14deg); pointer-events: none; }
.bigdrop:active { transform: scale(.98); }
.bigdrop strong { font-family: var(--title); font-size: 22px; }
.door::before, .cta-today::before { display: none !important; }

/* ---------- Boutons ---------- */
.btn { border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); box-shadow: none; font-weight: 700; color: var(--ink); }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 14px -6px rgba(143,11,32,.6) !important; }
.btn-pine { background: var(--pine); border-color: var(--pine); color: #fff; box-shadow: 0 6px 14px -6px rgba(20,74,51,.6) !important; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--night-2); }
.btn-small { border-radius: 999px; }

/* ---------- Cartes ---------- */
.card, .install-card, .anim-card { background: var(--paper); border: none; border-radius: 20px; box-shadow: var(--shadow); }
.card::before, .install-card::before { display: none; }
.trust { color: var(--muted); }
.how div { background: var(--paper); border: none; border-radius: 16px; box-shadow: var(--shadow); }
.how i { color: var(--red); }
.mix-tile { background: var(--paper); border: none; border-radius: 14px; box-shadow: var(--shadow); }
.mix-tile b { color: var(--red); }
.banner-info { background: #eef4fb; border: 1px solid #cfdcec; }
.pill-xmas { background: var(--pine); box-shadow: none; }
.pill-count { background: var(--paper); color: var(--red); border: 1.5px solid #f3c3cb; box-shadow: none; }
.progress { background: #dfe7f1; }

/* ==========================================================================
   LE SAPIN (calendrier reçu)
   ========================================================================== */
.tree { position: relative; width: 100%; max-width: 420px; aspect-ratio: 100 / 110; margin: 18px auto 6px; }
.tree-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 12px 16px rgba(19,40,74,.25)); }
.tree .door { position: absolute; transform: translate(-50%, -50%); padding: 0; border: none; cursor: pointer; overflow: visible; background: none !important; box-shadow: none !important; font-family: var(--title); animation: none; }
/* Boule */
.tree .ball { width: 10.8%; aspect-ratio: 1; border-radius: 50%; color: #fff; font-size: clamp(13px, 3.9vw, 17px); --c1: #ff5a6e; --c2: #c8102e; --c3: #7d0a1c;
  background: radial-gradient(circle at 32% 28%, #fff 0 6%, var(--c1) 18%, var(--c2) 55%, var(--c3) 100%) !important;
  box-shadow: 0 4px 8px -2px rgba(0,0,0,.4) !important; transform-origin: 50% -30%; }
.tree .ball.c1 { --c1: #ffe08a; --c2: #f2b632; --c3: #a8700f; color: #5a3a05; }
.tree .ball.c2 { --c1: #ffffff; --c2: #d9e3ee; --c3: #8ea3bb; color: var(--night); }
.tree .ball.c3 { --c1: #7fb0ff; --c2: #2f63c4; --c3: #173a7a; }
.tree .ball.c4 { --c1: #ff9fc4; --c2: #e0457f; --c3: #8c1a46; }
.tree .ball::before { content: ''; display: block !important; position: absolute; left: 50%; top: -9%; width: 28%; height: 16%; margin-left: -14%; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, #b9811a, #ffe08a, #b9811a); }
.tree .ball .shine { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 78%, rgba(255,255,255,.25), transparent 35%); pointer-events: none; }
.tree .ball span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: none !important; box-shadow: none; border-radius: 50%; text-shadow: 0 1px 2px rgba(0,0,0,.35); font-weight: 700; }
.tree .ball.c1 span, .tree .ball.c2 span { text-shadow: none; }
/* Pas encore le jour : boule givrée */
.tree .ball.locked { filter: saturate(.55) brightness(.92); opacity: .9; }
.tree .ball.locked::after { content: none; }
/* Boule du jour : elle brille et se balance */
.tree .ball.today { filter: none; animation: swing 2.4s ease-in-out infinite; z-index: 3; }
.tree .ball.today::after { content: ''; position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(circle, rgba(255,224,120,.95), rgba(255,224,120,0) 68%); z-index: -1; animation: halo 1.6s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); } 50% { transform: translate(-50%, -50%) rotate(8deg); } }
@keyframes halo { 50% { opacity: .45; transform: scale(.85); } }
/* Boule déjà ouverte : la photo dans la boule */
.tree .ball.opened img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 1; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
.tree .ball.opened::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.55) 0 8%, transparent 30%); box-shadow: 0 0 0 2.5px var(--gold); }
.tree .ball.opened span { position: absolute; left: 50%; bottom: -8%; width: auto; height: auto; transform: translateX(-50%); font: 700 11px var(--round); color: var(--night); background: #fff !important; border-radius: 999px; padding: 1px 6px; text-shadow: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.tree .ball.empty { opacity: .35; }
.tree .ball:active { transform: translate(-50%, -50%) scale(.92); }
.tree .ball.shake { animation: ballShake .45s; }
@keyframes ballShake { 25% { transform: translate(-50%, -50%) rotate(-14deg); } 75% { transform: translate(-50%, -50%) rotate(14deg); } }
.tree .ball.opening { animation: ballOpen .42s ease-in forwards; }
@keyframes ballOpen { to { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
/* L'étoile du 24 */
.tree .star { left: 50%; top: 6.5%; width: 19%; aspect-ratio: 1; color: #6b4300; font-size: clamp(15px, 4.6vw, 20px);
  background: radial-gradient(circle at 40% 35%, #fff6c9, #f2b632 55%, #c98a12) !important;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 10px rgba(255,214,100,.9)); }
.tree .star span { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding-top: 8%; background: none !important; box-shadow: none; text-shadow: none; font-weight: 800; }
.tree .star .shine { display: none; }
.tree .star.locked { filter: drop-shadow(0 0 4px rgba(255,214,100,.5)) saturate(.7); }
.tree .star.today { animation: starGlow 1.6s ease-in-out infinite; }
@keyframes starGlow { 50% { filter: drop-shadow(0 0 18px rgba(255,214,100,1)); } }
.tree .star.opened img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tree .star.opened span { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tree .star:active, .tree .star.opening { transform: translate(-50%, -50%) scale(.92); }
.cta-today { border-radius: 999px; animation: none; min-height: 58px; font-size: 18px; }

/* Ancienne grille de cases (non utilisée sur le sapin) */
.doors { display: none; }

/* ---------- Aperçu « C'est prêt » : des boules-photos ---------- */
.bgrid { gap: 10px; }
.bdoor { border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 2px var(--gold), 0 4px 8px -2px rgba(19,40,74,.35); overflow: visible; }
.bdoor::before { content: ''; position: absolute; left: 50%; top: -8px; width: 10px; height: 6px; margin-left: -5px; border-radius: 2px; background: linear-gradient(90deg, #b9811a, #ffe08a, #b9811a); }
.bdoor span { font-size: 13px; }
.thumbs img { border-radius: 50%; }

/* ---------- Fenêtres (cases ouvertes, réglages) ---------- */
.sheet { background: var(--snow); }
.sheet-head { background: var(--night); color: #fff; border-radius: 0 0 22px 22px; border-bottom: none; box-shadow: 0 6px 16px -8px rgba(19,40,74,.6); }
.sheet-head h2 { color: #fff; }
.sheet-head .btn { background: rgba(255,255,255,.14); color: #fff; border: none; }
.stage { border-radius: 20px; box-shadow: 0 10px 24px -10px rgba(19,40,74,.5); }
input[type=text], textarea, select { border-radius: 12px; border: 1.5px solid var(--line); background: #fff; }
input:focus, textarea:focus, select:focus, .btn:focus-visible { outline: 3px solid rgba(47,99,196,.3); }

@media (display-mode: standalone) { .wrap { padding-top: calc(16px + env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { .tree .ball.today, .tree .star.today { animation: none; } }

/* Calendrier reçu : en-tête plus compact pour voir le sapin tout de suite */
.wrap > .hero-card.night:has(.brand) .logo { display: none; }
.wrap > .hero-card.night:has(.brand) .hero-content { padding: 20px 20px 70px; }
.wrap > .hero-card.night:has(.brand) h1 { font-size: clamp(28px, 8vw, 38px); }
.tree-hint { text-align: center; color: var(--muted); font: italic 16px var(--script); margin: 0 0 4px; }

/* ==========================================================================
   ACCUEIL : la lettre au Père Noël
   ========================================================================== */
body.page-lettre { background: radial-gradient(120% 60% at 50% 0%, #e0283f 0%, #c8102e 40%, #9c0c22 100%) fixed, #b30e27; }
body.page-lettre .snowfall i { color: #fff; opacity: .55 !important; }
.lettre-home { color: #fff; }
.letter-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 8px; }
.letter-brand { margin: 0; font: italic 700 22px var(--script); color: #ffe3a1; }
.letter-top .pill-xmas { background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.3); color: #fff; box-shadow: none; font-size: 13px; padding: 5px 11px; }
.letter-title { font-family: var(--title); color: #fff; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.12; margin: 14px 2px 18px; text-shadow: 0 2px 12px rgba(0,0,0,.18); }
.word-measure { position: absolute; visibility: hidden; white-space: nowrap; font: italic 700 19px var(--script); }

/* La feuille */
.letter { position: relative; color: var(--ink); padding: 26px 20px 22px; border-radius: 6px; transform: rotate(-.6deg);
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(47,99,196,.13) 33px 34px) 0 92px / 100% calc(100% - 110px) no-repeat, #fffaf0;
  box-shadow: 0 2px 0 #f1e6d2, 0 22px 40px -16px rgba(60,0,10,.6); transition: transform .9s cubic-bezier(.5,-0.3,.6,1), opacity .9s; }
.letter::before { content: ''; position: absolute; top: 0; bottom: 0; left: 46px; width: 1.5px; background: rgba(200,16,46,.22); }
.letter > * { position: relative; }
.stamp { position: absolute; top: 14px; right: 14px; width: 54px; height: 64px; background: #fff; padding: 4px; transform: rotate(5deg);
  -webkit-mask: radial-gradient(circle 3.2px at 3.2px 3.2px, transparent 98%, #000) -3.2px -3.2px / 9px 9px; mask: radial-gradient(circle 3.2px at 3.2px 3.2px, transparent 98%, #000) -3.2px -3.2px / 9px 9px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); z-index: 2; }
.stamp span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(160deg, #1f6b4a, #144a33); font-size: 26px; }
.postmark { position: absolute; top: 34px; right: 46px; width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(143,11,32,.4); color: rgba(143,11,32,.5); font: 800 9px var(--round); letter-spacing: .08em; display: flex; align-items: center; justify-content: center; transform: rotate(-16deg); z-index: 3; pointer-events: none; }
.letter-hello { font: italic 700 26px var(--script); color: var(--red-dark); margin: 4px 0 18px; padding-right: 96px; }
.letter-line { font: italic 400 19px/34px var(--script); color: #2b2f3a; margin: 0 0 6px; }
.letter-hint { font: 500 13.5px var(--round); color: var(--muted); margin: 2px 0 12px; }
/* Les mots à toucher */
.word { -webkit-appearance: none; appearance: none; display: inline-block; vertical-align: baseline; font: italic 700 19px var(--script); color: var(--red-dark); background: #ffe4e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238f0b20' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center no-repeat;
  border: none; border-bottom: 2px solid var(--red); border-radius: 8px 8px 2px 2px; padding: 1px 26px 1px 9px; margin: 0 2px; min-height: 0; height: 32px; line-height: 30px; cursor: pointer; max-width: 100%; }
.word:focus { outline: 3px solid rgba(200,16,46,.25); }
.word.sign { background: transparent; border-radius: 0; padding: 0 4px; width: 9.5em; border-bottom: 2px dashed rgba(143,11,32,.5); color: var(--red-dark); }
.word.sign::placeholder { color: rgba(143,11,32,.45); font-weight: 400; }
.sign-line { margin-top: 10px; text-align: right; }
/* Les photos glissées dans la lettre */
.snaps { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; align-items: center; }
.snap { width: 58px; height: 58px; object-fit: cover; background: #fff; padding: 3px 3px 9px; box-shadow: 0 3px 8px -2px rgba(0,0,0,.35); transform: rotate(var(--r, 0deg)); animation: snapIn .35s cubic-bezier(.3,1.6,.6,1) both; }
@keyframes snapIn { from { transform: scale(.3) rotate(25deg); opacity: 0; } }
.snap.more { display: inline-flex; align-items: center; justify-content: center; font: 800 15px var(--round); color: var(--red-dark); background: #fff; }
.snap.add { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: rgba(200,16,46,.06); border: 2px dashed rgba(200,16,46,.5); border-radius: 6px; box-shadow: none; transform: none; cursor: pointer; animation: none; }
.snap.add span { font: 300 34px/1 var(--round); color: var(--red); }
.snap.add input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.snap-info { font: 500 13px var(--round); color: var(--muted); margin: 0 0 6px; }
.letter.dragover, .letter.drag { outline: 3px dashed #ffe3a1; outline-offset: 6px; }
/* L'envoi : la lettre s'envole vers le Pôle Nord */
.letter.sending { transform: translateY(-140vh) rotate(-24deg) scale(.4); opacity: 0; }
/* Le bouton */
.letter-send { margin-top: 22px; width: 100%; border-radius: 999px; min-height: 62px; font: 800 19px var(--round); color: var(--red-dark); background: #fffaf0; border: none; box-shadow: 0 6px 0 #e9d5b0, 0 18px 30px -12px rgba(60,0,10,.7) !important; }
.letter-send.ready { background: #ffd35c; color: #5a3500; box-shadow: 0 6px 0 #c99a1e, 0 18px 30px -12px rgba(60,0,10,.7) !important; animation: sendPulse 2.2s ease-in-out infinite; }
@keyframes sendPulse { 50% { transform: scale(1.025); } }
.letter-send:active { transform: translateY(3px); }
/* Sous la lettre */
.letter-after { color: #ffe9ec; font-size: 15px; line-height: 1.5; text-align: center; margin: 18px 6px 0; }
.letter-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.letter-links .btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.letter-advanced { width: 100%; margin-top: 8px; color: #ffe3a1 !important; }
.lettre-home .card, .lettre-home .install-card { color: var(--ink); }
.letter-list { margin-top: 22px; }
.letter-list h3 { color: #fff; }
.letter-trust { text-align: center; color: #ffd9de; font: 600 13px var(--round); margin-top: 22px; }
.lettre-home .legal, .lettre-home .legal a { color: #ffd9de; }
.lettre-home .banner { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .letter-send.ready { animation: none; } }
.lettre-home .letter-title { color: #fff !important; }
.letter { background: #fffaf0; }
.stamp { -webkit-mask: none; mask: none; filter: none; padding: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25); outline: 2px dotted #e8d6b8; outline-offset: -2px; width: 50px; height: 60px; top: 16px; right: 16px; }
.postmark { top: 14px; right: 58px; width: 50px; height: 50px; font-size: 8px; }
.letter-hello { padding-right: 110px; }
.lettre-home input.word.sign { border: none !important; border-bottom: 2px dashed rgba(143,11,32,.5) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; height: 34px; padding: 0 4px !important; font: italic 700 19px var(--script); }
.snap { width: 50px; height: 50px; }
.lettre-home input.word.sign:focus { outline: none; border-bottom-color: var(--red) !important; }

/* ---------- Le calendrier en vrai (devis) ---------- */
.quote-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; text-align: left; padding: 18px 18px 16px; border: none; border-radius: 22px; cursor: pointer; color: #fff;
  background: radial-gradient(120% 120% at 100% 0%, #2d5592 0%, var(--night-2) 45%, var(--night) 100%); box-shadow: 0 14px 28px -14px rgba(19,40,74,.7); font-family: var(--round); }
.quote-card .qc-icons { display: flex; gap: 6px; font-size: 26px; }
.quote-card b { font: 700 19px/1.25 var(--title); }
.quote-card .qc-cta { margin-top: 4px; background: var(--gold); color: #3d2700; font: 800 15px var(--round); padding: 9px 16px; border-radius: 999px; }
.quote-card:active { transform: scale(.98); }
.lettre-home .letter-print { font-weight: 600; color: #fff; }
.quote-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; }
.quote-strip img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.quote-formats { display: flex; flex-direction: column; gap: 10px; }
.qf { background: #fff; border: 2px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .15s; }
.qf.on { border-color: var(--red); box-shadow: 0 0 0 4px rgba(200,16,46,.1); }
.qf-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; background: none; border: none; text-align: left; cursor: pointer; font-family: var(--round); color: var(--ink); }
.qf-ico { font-size: 32px; }
.qf-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.qf-txt b { font-size: 17px; }
.qf-txt small { color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.qf-check { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 18px var(--round); background: #eef2f7; color: var(--night-2); }
.qf.on .qf-check { background: var(--red); color: #fff; }
.qf-opts { display: flex; gap: 10px; align-items: center; padding: 0 14px 14px; }
.qf-opts select { flex: 1; min-width: 0; }
.qf-opts .qty { display: flex; align-items: center; gap: 8px; flex: none; }
.contact-mail a { color: inherit; font-weight: 700; }