/* =========================================================
   مطبخ عبوره — Thème (charte des masterclass, décision Hamza 2026-11-05)
   Chargé APRÈS styles.css : les jetons :root ci-dessous remplacent ceux de la mécanique.
   Brun = boutons · or = prix et accents · crème = fond · lin = cartes · encre = texte ·
   rouge Jazan = touche seulement (compte à rebours, badges, motif tissé).
   Polices : Lifta (titres) · Typokar (signature « عبوره », une fois par page) · Alexandria (texte, boutons, formulaires).
   Lifta : éviter les mots finissant par ت / ف / ك / ب suivis d'un espace ou en fin de titre (traîne parasite).
   ========================================================= */

/* Fichiers de polices dans assets/fonts/ (fournis par Hamza le 05/11 ; licence web à vérifier : Typokar sans licence
   connue selon arfonts.net, Lifta sans mention de licence). Sans les fichiers, Alexandria (Google Fonts) prend le relais. */
@font-face { font-family: "Lifta"; src: url("../fonts/Lifta.otf?v=1") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Typokar"; src: url("../fonts/Typokar.ttf?v=1") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  /* Couleurs de la charte */
  --brown: #4A3220;
  --brown-2: #2E1F14;
  --gold: #B48A14;
  --gold-2: #8A6410;
  --gold-soft: #F3D9A4;
  --cream: #FBF6E6;
  --linen: #E9DFD1;
  --ink: #1C1412;
  --jazan: #9B1C2B;
  --jazan-2: #7A1522;

  /* Jetons de la mécanique (styles.css) remappés sur la charte */
  --bg: var(--cream);
  --bg-2: #FDF9EE;
  --card: rgba(255, 255, 255, .94);
  --card-solid: #FFFFFF;
  --card-line: var(--linen);
  --red: var(--brown);          /* titres, prix : brun */
  --red-btn: var(--brown);      /* boutons : brun */
  --red-btn-2: var(--brown-2);
  --red-2: var(--gold-2);       /* montants (.amt) : or foncé */
  --logo: var(--ink);
  --caramel: var(--gold);
  --ink-2: var(--ink);
  --text: var(--ink);
  --muted: #5A4A44;
  --muted-2: #5A4A44;
  --line: var(--linen);
  --sel-bg: #FFFFFF;
  --was: #7A6E62;
  --ok: #2E7D4F;
  --green: #2E7D4F;
  --green-bg: #E6F2EA;

  /* Polices : titres Lifta, texte Alexandria, signature Typokar, chiffres Alexandria */
  --serif: "Lifta", "Alexandria", sans-serif;
  --sans: "Alexandria", system-ui, sans-serif;
  --cta: "Alexandria", system-ui, sans-serif;
  --num: "Alexandria", system-ui, sans-serif;
  --sign: "Typokar", "Alexandria", sans-serif;
}
html[lang="ar"] {
  --serif: "Lifta", "Alexandria", sans-serif;
  --sans: "Alexandria", system-ui, sans-serif;
  --cta: "Alexandria", system-ui, sans-serif;
}

body { background: var(--linen); }
.page { box-shadow: 0 0 80px rgba(28, 20, 18, .10); }

/* Titres en Lifta : graisse normale (la police n'a qu'une graisse), lettrage non resserré */
.h, .hero__title, .features h3, .pricebox__label { font-weight: 400; letter-spacing: 0; }
html[lang="ar"] .hero__title { font-family: var(--serif); font-weight: 400; }

/* Signature « عبوره » : une fois par page */
.sign { font-family: var(--sign); font-weight: 400; color: var(--jazan); line-height: 1.2; }

/* Boutons bruns : même dégradé partout (accueil, checkout, merci, téléchargement), ombre brune */
.btn--red { background: linear-gradient(180deg, #5C4030 0%, var(--brown) 55%, var(--brown-2) 100%); }
.btn--red:hover { filter: brightness(1.06); }
.btn { box-shadow: 0 calc(12 * var(--px)) calc(26 * var(--px)) rgba(74, 50, 32, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn--ghost { color: var(--brown); border-color: rgba(74, 50, 32, .45); }
.lang-switch button { color: var(--brown); }
.lang-switch button[aria-pressed="true"] { background: var(--brown); }

/* Prix et accents en or */
.price, .offer__price { color: var(--gold-2); }
.pricebox__label, .offer__badge { color: var(--brown); }
.offer__badge { background: linear-gradient(180deg, #F3D9A4, #D9B45A); box-shadow: 0 calc(6 * var(--px)) calc(16 * var(--px)) rgba(74, 50, 32, .2); }
.dot { background: var(--gold); }

/* Rouge Jazan en touche : compte à rebours, bandeau, sceau de remise */
.cd, .cd-bar { background: var(--jazan); color: #FFFFFF; }
.offer__seal-bg path { fill: var(--jazan); stroke: var(--jazan-2); }

/* Motif tissé rouge / noir / blanc (stories et bande de signature) */
.weave { height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='22' height='22' fill='%23FFFFFF'/%3E%3Cpolygon points='11,1 21,11 11,21 1,11' fill='%239B1C2B'/%3E%3Cpolygon points='11,5 17,11 11,17 5,11' fill='%23FFFFFF'/%3E%3Cpolygon points='11,8 14,11 11,14 8,11' fill='%231C1412'/%3E%3C/svg%3E"); background-size: 11px 11px; }

/* ---------- Marque : emblème A (assets/img/brand/embleme-220.png, fourni le 05/11) et nom ---------- */
.brand--hero { flex-direction: column; gap: calc(8 * var(--px)); margin-top: calc(10 * var(--px)); text-decoration: none; }
/* L'emblème (PNG transparent, anneau rouge Jazan dans l'image) : ni fond ni bordure ajoutés, seulement une ombre */
.brand__emblem { display: block; width: calc(150 * var(--px)); height: calc(150 * var(--px)); border-radius: 50%; background: url("../img/brand/embleme-220.png?v=2") center / cover no-repeat; box-shadow: 0 calc(8 * var(--px)) calc(18 * var(--px)) rgba(28, 20, 18, .14); }
.brand__emblem--sm { width: calc(87 * var(--px)); height: calc(87 * var(--px)); min-width: 36px; min-height: 36px; flex: none; }
.brand__kitchen { font-family: var(--serif); font-size: max(18px, calc(40 * var(--px))); color: var(--ink); }
.brand--flow .brand__word.sign { font-family: var(--sign); font-size: max(20px, calc(48 * var(--px))); color: var(--jazan); line-height: 1; }

/* ---------- Accueil : 3 écrans 9:16 (maquette V3 : photo plein écran, voile crème dégradé, textes) ---------- */
.scr { position: relative; min-height: calc(1672 * var(--px)); overflow: hidden; display: flex; flex-direction: column; background: var(--cream); }
.scr__bg, .scr__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scr__bg img { object-fit: cover; object-position: center bottom; }
.scr__veil { position: absolute; inset: 0; }
.scr__veil--hero { background: linear-gradient(rgba(251, 246, 230, .62) 0%, rgba(251, 246, 230, .42) 62%, rgba(251, 246, 230, 0) 84%); }
.scr__veil--who { background: linear-gradient(rgba(251, 246, 230, .92) 0%, rgba(251, 246, 230, .62) 30%, rgba(251, 246, 230, 0) 44%); }
.scr__veil--final { background: linear-gradient(rgba(251, 246, 230, .74) 0%, rgba(251, 246, 230, .5) 52%, rgba(251, 246, 230, 0) 66%); }
.scr__content { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(16 * var(--px)); padding: calc(30 * var(--px)) calc(44 * var(--px)) 0; }
.scr .lang-switch { position: absolute; z-index: 2; }
.scr__note { font-size: max(12px, calc(26 * var(--px))); color: var(--brown); line-height: 1.5; }
.scr__note--chip { padding: calc(6 * var(--px)) calc(20 * var(--px)); border-radius: 999px; background: rgba(251, 246, 230, .9); }

/* Écran 1 : structure du site de référence (.hero, .offer…) habillée à la charte ; photo de fond générée (hero-bg) */
.hero {
  padding-bottom: calc(160 * var(--px)); background-color: var(--cream);
  background-image: url("../img/hero-bg.jpg?v=2");
  background-image: image-set(url("../img/hero-bg.webp?v=2") type("image/webp") 1x, url("../img/hero-bg.jpg?v=2") type("image/jpeg") 1x);
  background-size: cover; background-position: center top; background-repeat: no-repeat;
}
.brand--hero { margin: 0; }
.hero .brand__emblem { width: calc(130 * var(--px)); height: calc(130 * var(--px)); }
/* Haut du hero resserré : la carte d'offre s'arrête au-dessus du rouleau (photo : produit dans le tiers inférieur) */
.hero__content { margin-top: calc(6 * var(--px)); }
.hero__kicker { margin-top: calc(16 * var(--px)); }
.hero__promise { margin-top: calc(14 * var(--px)); }
.hero .offer { margin-top: calc(40 * var(--px) + 15px); padding: calc(52 * var(--px)) calc(30 * var(--px)) calc(34 * var(--px)); }
.hero .offer__price .price__num { font-size: calc(160 * var(--px)); }
.hero .offer__was { margin-top: calc(16 * var(--px)); }
.offer__btn { margin-top: calc(28 * var(--px)); }
.offer__note { margin-top: calc(20 * var(--px)); }
.hero__kicker { background: #FFFFFF; color: var(--ink); box-shadow: 0 2px 10px rgba(28, 20, 18, .06); }
.hero .offer { background: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .95); box-shadow: 0 calc(18 * var(--px)) calc(44 * var(--px)) rgba(28, 20, 18, .14); }
.offer__badge { background: linear-gradient(180deg, #F3D9A4, #D9B45A); color: var(--brown); box-shadow: 0 calc(6 * var(--px)) calc(16 * var(--px)) rgba(74, 50, 32, .22); }
.hero .offer__price { color: var(--gold-2); }
/* Sceau « خصم 40% » sur le coin haut gauche de la carte (Hamza, 05/11) : inset-inline-end = gauche en arabe */
.hero .offer__seal { top: calc(-56 * var(--px)); inset-inline-end: calc(-48 * var(--px)); width: calc(210 * var(--px)); height: calc(210 * var(--px)); transform: rotate(-12deg); }
.offer__seal-k { font-family: var(--sans); }
.offer__seal-pct { filter: drop-shadow(0 1px 0 #6E1220) drop-shadow(0 2px 2px rgba(60, 0, 8, .45)); }
.hero .offer__was { background: var(--linen); color: var(--muted); }
.hero .offer__was .amt--was, .hero .offer__was .amt--was > span { color: var(--ink); }
.hero .offer__was .amt--was::after { background: var(--jazan); }
.hero__btn { background: linear-gradient(180deg, #5C4030 0%, var(--brown) 55%, var(--brown-2) 100%); box-shadow: 0 calc(12 * var(--px)) calc(26 * var(--px)) rgba(74, 50, 32, .32), inset 0 1px 0 rgba(255, 255, 255, .12); }
.hero__btn::after { border-color: rgba(74, 50, 32, .55); }
.offer__ico { color: var(--brown); }
.offer__note { color: var(--muted); font-size: max(11px, calc(22 * var(--px))); }
.offer__note .i { color: var(--gold-2); }
.hero__hand { color: var(--jazan); }
html[lang="ar"] .hero__hand { font-family: var(--sign); font-weight: 400; font-size: max(13px, calc(32 * var(--px))); line-height: 1.35; }
/* Phrase manuscrite plus petite, calée dans le coin bas gauche sous le rouleau (Hamza, 05/11) */
.hero__hand { left: calc(6 * var(--px)); bottom: calc(8 * var(--px)); max-width: calc(245 * var(--px)); gap: calc(4 * var(--px)); transform: rotate(-4deg); }
.hero__hand .i { width: calc(24 * var(--px)); height: calc(24 * var(--px)); min-width: 11px; min-height: 11px; }
.hero__hand .i { color: var(--jazan); }
.pill { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); padding: calc(10 * var(--px)) calc(28 * var(--px)); border-radius: 999px; background: #FFFFFF; font-weight: 700; font-size: max(12px, calc(27 * var(--px))); color: var(--ink); box-shadow: 0 2px 10px rgba(28, 20, 18, .06); }
.hero__title { margin-top: calc(14 * var(--px)); font-family: var(--serif); font-weight: 400; font-size: calc(90 * var(--px)); line-height: 1.2; letter-spacing: 0; color: var(--ink); text-wrap: balance; }
html[lang="ar"] .hero__title { font-family: var(--serif); font-weight: 400; font-size: calc(90 * var(--px)); line-height: 1.2; letter-spacing: 0; }
.hero__accent { color: var(--gold); }
.hero__promise { color: var(--ink); }
.hero__promise .sign { font-size: 1.35em; }
.scr .cd { width: 100%; margin: 0; }
.priceline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: calc(6 * var(--px)) calc(20 * var(--px)); }
.priceline__label { font-weight: 700; font-size: max(13px, calc(28 * var(--px))); color: var(--brown); }
.price--line { color: var(--gold-2); }
.price--line .price__num { font-size: calc(96 * var(--px)); }
.priceline__was { font-size: max(14px, calc(30 * var(--px))); color: var(--was); }
.badge { display: inline-flex; align-items: baseline; gap: .3em; padding: calc(6 * var(--px)) calc(18 * var(--px)); border-radius: 999px; background: var(--jazan); color: #FFFFFF; font-weight: 700; font-size: max(12px, calc(24 * var(--px))); }
.scr .hero__btn { width: 100%; margin: 0; }

/* Écran 2 */
/* Écran 2 : bloc de texte descendu pour aérer le haut (Hamza, 05/11) */
.scr--who .scr__content { padding-top: calc(70 * var(--px)); }
.who__kicker { margin: 0; font-weight: 700; font-size: max(13px, calc(28 * var(--px))); color: var(--gold); }
.who__sign { margin: 0; font-size: calc(96 * var(--px)); line-height: 1.1; }
.who__text { margin: 0; font-size: max(14px, calc(30 * var(--px))); line-height: 1.85; color: var(--ink); text-wrap: pretty; }
.feats { position: absolute; right: calc(34 * var(--px)); left: calc(34 * var(--px)); bottom: calc(34 * var(--px)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--px)); margin: 0; }
.feats li { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--px)); padding: calc(22 * var(--px)) calc(10 * var(--px)); background: rgba(251, 246, 230, .94); border-radius: calc(30 * var(--px)); font-weight: 700; font-size: max(12px, calc(26 * var(--px))); text-align: center; box-shadow: 0 4px 16px rgba(28, 20, 18, .08); }
.feats__n { font-family: var(--serif); font-size: calc(58 * var(--px)); line-height: 1.1; color: var(--gold); }

/* Écran 3 : bloc abaissé et aéré, sans couvrir le rouleau (Hamza, 05/11) */
.scr--final .scr__content { padding-top: calc(64 * var(--px)); gap: calc(26 * var(--px)); }
.scr--final .priceline { margin-top: calc(6 * var(--px)); }
.final__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: calc(76 * var(--px)); line-height: 1.3; color: var(--ink); }
.checks--grid { grid-template-columns: repeat(2, 1fr); width: 100%; margin: 0; gap: calc(16 * var(--px)); }
.checks--grid li { min-height: 0; padding: calc(16 * var(--px)) calc(20 * var(--px)); background: rgba(255, 255, 255, .92); font-size: max(12px, calc(25 * var(--px))); font-weight: 700; }
.checks--grid .dot { width: calc(40 * var(--px)); height: calc(40 * var(--px)); min-width: 18px; min-height: 18px; }

/* ---------- Checkout : bandeau récapitulatif (structure du site de référence) à la charte ---------- */
.summary__feats li { background: var(--linen); }
.summary__feats .i { color: var(--brown); }
.summary__feats span { color: var(--brown); }
.summary__price .price { color: var(--gold-2); }
.summary__seal .offer__seal-k { font-family: var(--sans); }

/* ---------- Checkout : réassurance, pays bloqués ---------- */
.summary__ph { width: calc(170 * var(--px)); flex: none; }
.summary__ph span { font-size: max(10px, calc(20 * var(--px))); }
.field-note--warn { color: var(--jazan); font-weight: 600; }

/* ---------- Téléchargement : carte cadeau « مكتبة الرسم » ---------- */
.dl-gift { grid-column: 1 / -1; display: flex; flex-direction: column; gap: calc(10 * var(--px)); padding: calc(36 * var(--px)); border-radius: calc(30 * var(--px)); background: var(--brown); color: var(--cream); }
.dl-gift__from { font-weight: 700; font-size: max(12px, calc(25 * var(--px))); color: var(--gold-soft); }
.dl-gift__title { font-family: var(--serif); font-weight: 400; font-size: calc(54 * var(--px)); line-height: 1.2; color: var(--cream); }
.dl-gift__x { font-size: max(13px, calc(26 * var(--px))); line-height: 1.7; }
.dl-gift__go { margin-top: calc(8 * var(--px)); background: var(--cream); color: var(--brown); box-shadow: none; }

/* ---------- Page cadeau (hadiya.html) ---------- */
.gift__hero { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--px)); padding: calc(20 * var(--px)) calc(40 * var(--px)) 0; text-align: center; }
.gift__from { font-weight: 700; font-size: max(13px, calc(26 * var(--px))); color: var(--gold); }
.gift__hero .weave { width: 100%; max-width: calc(600 * var(--px)); margin-top: calc(10 * var(--px)); }
.gift__steps { counter-reset: none; display: grid; gap: calc(12 * var(--px)); margin: calc(30 * var(--px)) calc(40 * var(--px)) 0; padding: 0; }
.gift__steps li { display: flex; align-items: flex-start; gap: calc(16 * var(--px)); padding: calc(18 * var(--px)) calc(20 * var(--px)); background: #FFFFFF; border-radius: calc(20 * var(--px)); font-size: max(13px, calc(26 * var(--px))); line-height: 1.6; }
.gift__steps b { flex: none; display: grid; place-items: center; width: calc(52 * var(--px)); height: calc(52 * var(--px)); min-width: 24px; min-height: 24px; border-radius: 50%; background: var(--jazan); color: #FFFFFF; font-size: max(12px, calc(26 * var(--px))); }
.gift__section { display: flex; flex-direction: column; gap: calc(14 * var(--px)); padding: calc(40 * var(--px)) calc(40 * var(--px)) 0; }
.gift__section .h { margin: 0; }
.gift__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(12 * var(--px)); }
.gift__grid li { display: flex; flex-direction: column; gap: calc(4 * var(--px)); padding: calc(18 * var(--px)); background: #FFFFFF; border-radius: calc(18 * var(--px)); border: 1px solid var(--linen); font-size: max(13px, calc(26 * var(--px))); }
.gift__grid small { font-size: max(11px, calc(21 * var(--px))); color: var(--muted); }
.gift__group { margin-top: calc(10 * var(--px)); font-family: var(--serif); font-weight: 400; font-size: calc(40 * var(--px)); color: var(--brown); }
.gift__group-x { font-size: max(12px, calc(24 * var(--px))); color: var(--muted); margin-top: calc(-8 * var(--px)); }
.gift__videos { display: grid; gap: calc(10 * var(--px)); }
.gift__videos a { display: flex; align-items: center; gap: calc(16 * var(--px)); padding: calc(16 * var(--px)) calc(18 * var(--px)); background: #FFFFFF; border-radius: calc(18 * var(--px)); text-decoration: none; color: var(--ink); }
.gift__dur { flex: none; padding: calc(4 * var(--px)) calc(12 * var(--px)); border-radius: 999px; background: var(--linen); font-size: max(11px, calc(21 * var(--px))); font-weight: 700; }
.gift__vt { flex: 1; display: flex; flex-direction: column; gap: calc(2 * var(--px)); font-size: max(13px, calc(25 * var(--px))); }
.gift__vt small { font-size: max(11px, calc(21 * var(--px))); color: var(--muted); }
.gift__go { flex: none; font-size: max(11px, calc(21 * var(--px))); font-weight: 700; color: var(--jazan); white-space: nowrap; }

/* ---------- Bureau (≥ 1024 px) : version bureau de la page de vente à concevoir ; d'ici là, colonne mobile centrée ---------- */
@media (min-width: 1024px) {
  body[data-page="sales"] { background: var(--linen); }
  body[data-page="sales"] .page { width: min(100%, 620px); margin: 0 auto; box-shadow: 0 0 80px rgba(28, 20, 18, .10); }
  body[data-page="sales"] .cd-bar { display: none; }
}

/* ---------- Checkout : notes sous le paiement, plus petites (Hamza, 05/11) ---------- */
.pay--order .note--whop, .pay--order .note--after, .pay--order .note--refund { font-size: 10px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay--order .note--after + .note--after, .pay--order .note--refund { margin-top: calc(8 * var(--px)); }

/* ---------- Page merci (maquette du 06/11) : carte produit principale, bloc cadeau compact, « قبل ما تبدين » ---------- */
.ty__head { display: flex; align-items: center; justify-content: space-between; }
.ty__status { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); font-size: max(12px, calc(26 * var(--px))); font-weight: 700; color: var(--brown); }
.ty__dot { width: calc(18 * var(--px)); height: calc(18 * var(--px)); min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--ok); }
.ty__intro { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--px)); margin: calc(20 * var(--px)) calc(40 * var(--px)) 0; text-align: center; }
.ty__kicker { font-weight: 700; font-size: max(14px, calc(30 * var(--px))); color: var(--gold-2); }
.ty__title { font-family: var(--serif); font-weight: 400; font-size: calc(90 * var(--px)); line-height: 1.2; color: var(--ink); }
.ty__text { font-size: max(13px, calc(28 * var(--px))); line-height: 1.75; color: var(--ink); overflow-wrap: anywhere; }
.buy { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--px)); margin: calc(44 * var(--px)) calc(40 * var(--px)) 0; padding: calc(40 * var(--px)) calc(30 * var(--px)) calc(34 * var(--px)); background: #FFFFFF; border: 2px solid var(--gold); border-radius: calc(36 * var(--px)); box-shadow: 0 12px 28px rgba(74, 50, 32, .16); }
.buy__tag { position: absolute; top: 0; inset-inline-end: calc(30 * var(--px)); transform: translateY(-55%); padding: calc(8 * var(--px)) calc(26 * var(--px)); border-radius: 999px; background: var(--gold); color: #FFFFFF; font-weight: 700; font-size: max(12px, calc(26 * var(--px))); }
.buy__banner { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(22 * var(--px)); background: var(--linen); }
.buy__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.buy__kicker { margin-top: calc(6 * var(--px)); font-weight: 700; font-size: max(13px, calc(27 * var(--px))); color: var(--gold-2); }
.buy__title { font-family: var(--serif); font-weight: 400; font-size: calc(58 * var(--px)); line-height: 1.25; color: var(--ink); text-align: center; }
.buy__accent { color: var(--gold); }
.buy__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--px)); }
.buy__chips li { padding: calc(6 * var(--px)) calc(20 * var(--px)); border-radius: 999px; background: var(--cream); font-size: max(11px, calc(24 * var(--px))); font-weight: 600; color: var(--ink); }
.buy__btn { width: 100%; margin-top: calc(10 * var(--px)); }
.buy__btn .i { transform: none; }
.buy__state { margin-top: calc(6 * var(--px)); }
.buy__mail { margin: 0; }
.gift-box { display: flex; flex-direction: column; gap: calc(14 * var(--px)); margin: calc(44 * var(--px)) calc(40 * var(--px)) 0; }
.gift-box__sup { font-weight: 700; font-size: max(13px, calc(28 * var(--px))); color: var(--muted); }
.gift-card { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(28 * var(--px)); background: var(--gold-soft); box-shadow: 0 8px 20px rgba(74, 50, 32, .12); }
.gift-card__bg, .gift-card__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gift-card__bg img { object-fit: cover; }
.gift-card__txt { position: absolute; inset: 0 0 0 46%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(6 * var(--px)); padding: calc(26 * var(--px)) calc(30 * var(--px)) calc(26 * var(--px)) 0; text-align: start; }
.gift-card__from { font-family: var(--serif); font-weight: 400; font-size: max(16px, calc(44 * var(--px))); line-height: 1.2; color: var(--jazan); }
.gift-card__name { font-weight: 800; font-size: max(13px, calc(30 * var(--px))); color: var(--ink); }
.gift-card__x { font-size: max(11px, calc(22 * var(--px))); line-height: 1.5; color: var(--ink); }
.gift-card__go { display: inline-flex; align-items: center; gap: calc(8 * var(--px)); margin-top: calc(8 * var(--px)); padding: calc(12 * var(--px)) calc(26 * var(--px)); border-radius: 999px; background: var(--jazan); color: #FFFFFF; font-weight: 700; font-size: max(12px, calc(24 * var(--px))); text-decoration: none; }
.gift-card__go .i { width: 1.1em; height: 1.1em; }
.before { margin: calc(44 * var(--px)) calc(40 * var(--px)) 0; }
.before__title { font-family: var(--serif); font-weight: 400; font-size: calc(44 * var(--px)); color: var(--ink); margin-bottom: calc(10 * var(--px)); }
.before__list { display: flex; flex-direction: column; }
.before__list li { display: flex; align-items: flex-start; gap: calc(20 * var(--px)); padding: calc(20 * var(--px)) 0; border-bottom: 1px solid var(--linen); font-size: max(13px, calc(27 * var(--px))); line-height: 1.7; color: var(--ink); }
.before__list li:last-child { border-bottom: 0; }
.before__list b { flex: none; font-family: var(--serif); font-weight: 400; font-size: calc(44 * var(--px)); line-height: 1; color: var(--gold); }
.ty__help { margin: calc(30 * var(--px)) calc(40 * var(--px)) 0; }