/* ============================================================
   HOMÉOSPIRITS — Accueil (refonte 2026)
   Effets uniques à la page : pied de vigne masqué, lianes,
   carte des chapitres (swap au survol), moulure dorée du
   portrait, mise en scène produit mystère.
   Le layout/typo/couleurs sont en Tailwind dans index.html.
   ============================================================ */

/* ---- HERO : pied de vigne détouré, fondu par masque ---- */
.hero-vine {
  position: absolute;
  right: -3%;
  bottom: -2%;
  width: min(58vw, 820px);
  z-index: -1;
  transform-origin: 70% 100%;
  filter: drop-shadow(0 28px 40px rgba(35, 29, 23, 0.14));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 76%, transparent 99%), linear-gradient(to left, #000 78%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, #000 76%, transparent 99%), linear-gradient(to left, #000 78%, transparent 99%);
  mask-composite: intersect;
}
.hero-vine img { width: 100%; height: auto; transform: scaleX(-1); }
/* Desktop : la vigne prend toute la hauteur du hero (dimensionnée en hauteur, plus grande) */
@media (min-width: 1024px) {
  .hero-vine { width: auto; height: 108%; bottom: -4%; right: -5%; }
  .hero-vine img { width: auto; height: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-vine { animation: vineReveal 1.7s var(--ease) both; }
}
@keyframes vineReveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023px) { .hero-vine { width: 56vw; opacity: 0.92; } }
@media (max-width: 767px) {
  /* Mobile : la vigne reste en décor ancré bas-droite (comme desktop),
     derrière le contenu centré — elle déborde légèrement à droite. */
  .hero-vine {
    position: absolute;
    right: -14%;
    bottom: -1%;
    width: 62vw;
    max-width: 330px;
    z-index: -1;
    opacity: 0.85;
    filter: drop-shadow(0 16px 24px rgba(35, 29, 23, 0.12));
  }
}

/* ---- MANIFESTE : lianes de vigne (rappel du pied de vigne) ---- */
.veg { position: absolute; z-index: 0; pointer-events: none; width: clamp(220px, 24vw, 400px); }
.veg img { width: 100%; height: auto; transform-origin: 60% 0; }
@media (prefers-reduced-motion: no-preference) {
  .veg img { animation: lianeSway 9s ease-in-out infinite alternate; }
  .veg--r img { animation-duration: 11s; animation-delay: -3s; }
  .veg--b img { animation-duration: 12.5s; animation-delay: -1.5s; }
}
@keyframes lianeSway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
.veg--l {
  top: -2.5rem; left: -3rem;
  -webkit-mask-image: radial-gradient(120% 120% at 18% 22%, #000 52%, transparent 80%);
  mask-image: radial-gradient(120% 120% at 18% 22%, #000 52%, transparent 80%);
}
.veg--r {
  top: -3.5rem; right: -3rem; transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(120% 120% at 18% 22%, #000 52%, transparent 80%);
  mask-image: radial-gradient(120% 120% at 18% 22%, #000 52%, transparent 80%);
}
.veg--b {
  bottom: 4rem; left: -3.5rem; width: clamp(180px, 18vw, 300px);
  transform: scaleY(-1) rotate(-8deg); opacity: 0.8;
  -webkit-mask-image: radial-gradient(120% 120% at 22% 28%, #000 50%, transparent 78%);
  mask-image: radial-gradient(120% 120% at 22% 28%, #000 50%, transparent 78%);
}
@media (max-width: 1023px) { .veg--b { display: none; } }
@media (max-width: 920px)  { .veg { width: 200px; opacity: 0.65; } }
@media (max-width: 720px)  { .veg--l, .veg--r { display: none; } }

/* ---- CARTE DES CHAPITRES : ligne avec image + swap de texte au survol ---- */
.cru {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.7rem 1rem;
  border-bottom: 1px solid rgba(38, 52, 42, 0.16);
  overflow: hidden;
  isolation: isolate;
  transition: padding-left 0.5s var(--ease);
}
.cru:hover { padding-left: 1.5rem; }
.cru__media { position: absolute; inset: 0 0 0 auto; width: 52%; z-index: -1; overflow: hidden; }
.cru__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.cru__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--hs-cream) 10%, rgba(246, 242, 234, 0.78) 46%, rgba(246, 242, 234, 0.42) 90%);
}
.cru:hover .cru__media img { opacity: 0.26; transform: scale(1); }

.cru__swap {
  position: relative;
  display: inline-grid;
  width: fit-content;
  overflow: hidden;
  line-height: 1.18;
  padding: 0.04em 0.02em;
  margin: -0.04em -0.02em;
}
.cru__swap > span {
  grid-area: 1 / 1;
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  color: var(--hs-ink);
  transition: transform 0.34s var(--ease), opacity 0.34s var(--ease);
}
.cru__swap .alt { color: var(--hs-gold-deep); transform: translateY(-100%); opacity: 0; }
.cru:hover .cru__swap .primary { transform: translateY(100%); opacity: 0; }
.cru:hover .cru__swap .alt { transform: translateY(0); opacity: 1; }

.cru .go-line { transition: color 0.4s var(--ease); }
.cru:hover .go-line { color: var(--hs-ink); }
.cru:hover .go-line .ln { width: 2.8rem; }

@media (max-width: 767px) {
  .cru { grid-template-columns: 1fr; gap: 0.7rem; padding: 1.4rem 0.3rem; }
  .cru__media { width: 100%; }
}

/* ---- DUO : portes de redirection (ligne-flèche qui s'étire) ---- */
.door:hover .go-line .ln { width: 2.6rem; }

/* ---- DUO : moulure dorée + enluminures de coin du portrait ---- */
.orn {
  position: absolute; z-index: 3;
  width: 50px; height: 50px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23CBA56B'%3E%3Cpath d='M5 44 V14 Q5 5 14 5 H44' stroke-width='1.5'/%3E%3Cpath d='M15 32 V21 Q15 15 21 15 H32' stroke-width='1' opacity='0.75'/%3E%3Cpath d='M44 5 q10 0 11 9' stroke-width='1.2'/%3E%3Cpath d='M5 44 q0 10 9 11' stroke-width='1.2'/%3E%3Cpath d='M21 15 q-4 -8 -13 -9 q7 5 5 12' stroke-width='1' opacity='0.85'/%3E%3Ccircle cx='9' cy='9' r='1.9' fill='%23CBA56B' stroke='none'/%3E%3C/svg%3E");
}
.orn--tl { top: -20px; left: -20px; }
.orn--tr { top: -20px; right: -20px; transform: scaleX(-1); }
.orn--bl { bottom: -20px; left: -20px; transform: scaleY(-1); }
.orn--br { bottom: -20px; right: -20px; transform: scale(-1, -1); }

/* ---- PRODUIT MYSTÈRE : badge pulsant + silhouette floutée flottante ---- */
.prod-pulse { position: relative; }
.prod-pulse::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid var(--hs-lichen);
  opacity: 0.6;
  animation: prodPulse 2.4s ease-out infinite;
}
@keyframes prodPulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .prod-pulse::after { animation: none; } }

.prod-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 46%, transparent 40%, rgba(246, 242, 234, 0.55) 74%, var(--hs-cream) 96%);
}
.prod-bottle {
  position: absolute; inset: 0; margin: auto;
  height: 100%; width: auto; object-fit: contain;
  filter: blur(17px) brightness(1.42) contrast(0.74) saturate(0.82);
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(56% 64% at 50% 46%, #000 38%, transparent 82%);
  mask-image: radial-gradient(56% 64% at 50% 46%, #000 38%, transparent 82%);
}
@media (prefers-reduced-motion: no-preference) {
  .prod-bottle { animation: prodFloat 8s ease-in-out infinite alternate; }
}
@keyframes prodFloat { from { transform: translateY(0); } to { transform: translateY(-12px); } }

/* ============================================================
   HOMÉOJUICES — le duo pétillant (teaser boutique)
   Scènes alternées gauche/droite : la photo du produit est la
   star, encadrée d'or et posée sur le papier de la maison.
   Plus d'aplats de couleur : le fond reste neutre, l'or encadre,
   le vert profond signe. La robe du jus ne vit que dans la photo.
   ============================================================ */

/* -- intro centrée sur papier -- */
.hj-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.hj-intro .prod-pulse { display: inline-flex; }

/* Le nom de la gamme EST le titre : grand, gravé, souligné d'un filet qui va
   de l'or du Blanc au carmin du Rouge — les deux robes en une seule ligne. */
.hj-wordmark {
  position: relative; display: inline-block;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2.9rem, 7.4vw, 5.6rem); line-height: 1.02;
  letter-spacing: -0.012em; color: var(--hs-ink); margin-bottom: 0.55em;
}
.hj-wordmark::after {
  content: ''; position: absolute; left: 50%; bottom: -0.3em;
  width: 46%; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #DFC270 22%, #DB0028 78%, transparent);
}
@media (max-width: 640px) { .hj-wordmark { font-size: clamp(2.4rem, 12vw, 3.4rem); } }

/* -- suite de scènes produit -- */
.hj-scenes {
  /* Pas de clip ici : la section #creation (pleine largeur) porte déjà
     overflow-hidden. Clipper au conteneur trancherait le filigrane net. */
  position: relative; overflow: visible;
  max-width: 1120px; margin: 0 auto;
  padding: clamp(0.5rem, 1.4vw, 1.2rem) 1.5rem clamp(2.4rem, 4vw, 3.6rem);
  display: flex; flex-direction: column; gap: clamp(2.8rem, 4.6vw, 4.4rem);
}
@media (min-width: 768px) { .hj-scenes { padding-left: 2.5rem; padding-right: 2.5rem; } }

.hj-scene { position: relative; isolation: isolate; display: grid; grid-template-columns: 0.94fr 1fr; align-items: center; gap: clamp(2rem, 4.2vw, 3.8rem); }
@media (max-width: 900px) { .hj-scene { grid-template-columns: 1fr; gap: 2.2rem; } }

/* la bande duo : plus large côté photo, sans vignette secondaire */
.hj-scene--duo { grid-template-columns: 1.12fr 1fr; }
@media (max-width: 900px) { .hj-scene--duo { grid-template-columns: 1fr; } }

/* Couleur d'étiquette de la cuvée — relevée sur les vraies étiquettes.
   Ne sert QUE pour du trait et des points : jamais de fond plein. */
.hj-scene--blanc {
  --hj-label: #DFC270;
  --hj-label-soft: rgba(223, 194, 112, 0.62);
  --hj-label-glow: rgba(223, 194, 112, 0.5);
}
.hj-scene--rouge {
  --hj-label: #DB0028;
  --hj-label-soft: rgba(219, 0, 40, 0.34);
  --hj-label-glow: rgba(219, 0, 40, 0.28);
  --hj-ghost-fill: rgba(219, 0, 40, 0.20);
  --hj-ghost-line: rgba(219, 0, 40, 0.26);
}
.hj-scene--blanc { --hj-ghost-fill: rgba(223, 194, 112, 0.46); --hj-ghost-line: rgba(146, 110, 60, 0.30); }

/* -- FILIGRANE EN TIRAGE DÉCALÉ ---------------------------------------------
   Le nom de la robe, écrit grand derrière la scène. Même famille et mêmes
   couleurs que le filigrane de la boutique, mais l'effet change : ici deux
   plaques d'impression légèrement hors-registre. La première est un aplat
   dégradé qui se dissout vers le bas (masque), la seconde une copie fantôme
   en trait d'un cheveu, décalée — le tirage typographique mal calé.
   Ancré côté texte (l'inverse de la boutique, qui l'ancre côté photo). */
.hj-ghost {
  /* PADDING OBLIGATOIRE : `background-clip: text` et `mask-image` découpent au
     ras de la border box, or l'italique déborde de sa boîte à droite — sans
     marge intérieure la dernière lettre est tranchée. `top`/`right` compensent. */
  position: absolute; z-index: 0;
  padding: 0.18em 0.44em 0.34em 0.32em;
  top: -0.48em; right: -0.48em;
  font-family: var(--f-display), 'Playfair Display', serif;
  font-weight: 600; font-style: italic;
  font-size: clamp(5rem, 13.5vw, 11.5rem); line-height: 0.74; letter-spacing: -0.03em;
  white-space: nowrap; pointer-events: none; user-select: none;
  /* plaque 1 — l'aplat dégradé qui se dissout dans le papier */
  color: transparent;
  background: linear-gradient(168deg, var(--hj-ghost-fill) 8%, transparent 82%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 96%);
}
/* plaque 2 — la copie hors-registre, en trait seul. Elle épouse la boîte du
   parent (`inset: 0` + même padding) pour se caler sur son texte ; le décalage
   se fait au `transform`, jamais au positionnement. */
.hj-ghost::after {
  content: attr(data-word);
  position: absolute; inset: 0; padding: inherit;
  transform: translate(0.055em, 0.045em);
  color: transparent; -webkit-text-stroke: 1px var(--hj-ghost-line);
  -webkit-mask-image: linear-gradient(180deg, #000 12%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 12%, transparent 88%);
}
/* scène retournée (Rouge) : la photo passe à droite, le mot part à gauche */
.hj-scene--flip .hj-ghost { right: auto; left: -0.36em; }
.hj-scene--flip .hj-ghost::after { transform: translate(-0.055em, 0.045em); }

/* le duo porte les deux robes dans un seul mot : or → carmin */
.hj-ghost--duo {
  background: linear-gradient(104deg, rgba(223, 194, 112, 0.50) 6%, rgba(219, 0, 40, 0.20) 72%, transparent 96%);
  -webkit-background-clip: text; background-clip: text;
  --hj-ghost-line: rgba(146, 110, 60, 0.26);
}

@media (max-width: 900px) {
  .hj-ghost { font-size: clamp(4.2rem, 21vw, 7.5rem); top: -0.42em; opacity: 0.7; }
}

/* -- la mise en scène photo (cadre or + halo, langage du « Duo découverte ») -- */
.hj-stage { position: relative; z-index: 2; width: 100%; max-width: 430px; justify-self: center; }
.hj-scene--duo .hj-stage { max-width: 560px; }

/* -- ORFÈVRERIE DE ROBE : équerres ciselées + liserés ------------------------
   La couleur réelle de l'étiquette ne s'étale jamais : elle ne vit que dans
   des traits d'un pixel. Quatre équerres d'angle encadrent la photo comme une
   monture de joaillier, un liseré double borde le cadre, un filet signe le
   titre. Au survol, la monture s'ouvre et la couleur passe sous le bouton. */

/* les quatre équerres — deux dégradés par coin, aucun markup superflu */
.hj-corners {
  position: absolute; inset: -0.7rem; z-index: 4; pointer-events: none;
  --c: var(--hj-label, var(--hs-gold));
  --l: 30px;
  background:
    linear-gradient(var(--c), var(--c)) left    top    / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left    top    / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right   top    / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right   top    / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left    bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left    bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right   bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right   bottom / var(--l) 1px no-repeat;
  opacity: 0.75;
  transition: inset 0.6s var(--ease), opacity 0.6s var(--ease);
}
.hj-scene:hover .hj-corners { inset: -1.05rem; opacity: 1; }
@media (max-width: 640px) { .hj-corners { inset: -0.5rem; --l: 22px; } }

/* le liseré interne du cadre prend la teinte de la robe */
.hj-frame::before { border-color: var(--hj-label-soft, rgba(179, 139, 83, 0.55)); }

/* filet de signature sous le nom de la cuvée */
.hj-rule {
  display: block; width: 68px; height: 1px; margin-top: 1rem;
  background: linear-gradient(90deg, var(--hj-label, var(--hs-gold)) 0%, transparent 100%);
  transition: width 0.6s var(--ease);
}
.hj-scene:hover .hj-rule { width: 108px; }
.hj-scene--flip .hj-stage { order: 2; }
@media (max-width: 900px) { .hj-scene--flip .hj-stage { order: 0; } }

.hj-halo {
  position: absolute; inset: -14% -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 52% at 50% 46%, rgba(203, 165, 107, 0.4), transparent 70%),
    radial-gradient(64% 64% at 50% 50%, var(--hj-label-glow, transparent), transparent 72%);
}
.hj-frame {
  position: relative; z-index: 2; padding: 0.9rem;
  background: rgba(253, 250, 245, 0.65);
  box-shadow: 0 42px 80px -34px rgba(84, 58, 22, 0.5);
}
.hj-frame::before {
  content: ''; position: absolute; inset: 0.32rem; z-index: 3; pointer-events: none;
  border: 1px solid rgba(179, 139, 83, 0.55);
}
.hj-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.hj-frame--wide img { aspect-ratio: 16 / 11; }

/* étiquette gravée, posée en débord (rappel du chai) */
.hj-cap {
  position: absolute; z-index: 4; left: -0.5rem; bottom: 1.4rem;
  background: var(--hs-forest-deep); color: var(--hs-gold-pale);
  font-family: var(--f-sans); font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.5rem 0.9rem;
}

/* vignette secondaire : le packaging, en débord du cadre */
.hj-chip {
  position: absolute; z-index: 4; right: -1.7rem; bottom: -1.9rem;
  width: clamp(108px, 15vw, 170px); padding: 0.4rem;
  background: var(--hs-paper); border: 1px solid rgba(179, 139, 83, 0.35);
  box-shadow: 0 24px 42px -22px rgba(84, 58, 22, 0.55);
}
.hj-chip img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.hj-scene--flip .hj-chip { right: auto; left: -1.7rem; }
@media (max-width: 640px) {
  .hj-chip { right: -0.4rem; bottom: -1.3rem; }
  .hj-scene--flip .hj-chip { left: -0.4rem; right: auto; }
}

/* -- le texte, aligné à gauche, sur papier -- */
.hj-body { position: relative; z-index: 2; }

/* le kicker est amorcé par un filet à la couleur de l'étiquette */
.hj-kicker { display: flex; width: fit-content; align-items: center; gap: 0.7rem;
  font-family: var(--f-sans); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--hs-gold-deep); }
.hj-kicker::before { content: ''; width: 26px; height: 1px; flex: none;
  background: var(--hj-label, var(--hs-gold)); }

.hj-robe { display: flex; width: fit-content; align-items: center; gap: 0.6rem; margin-top: 0.7rem;
  font-family: var(--f-sans); font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--hs-ink-soft); }
/* pastilles : les teintes exactes des étiquettes imprimées */
.hj-robe .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hj-robe .dot--blanc { background: #DFC270; box-shadow: 0 0 0 1px rgba(146, 110, 60, 0.35); }
.hj-robe .dot--rouge { background: #DB0028; box-shadow: 0 0 0 1px rgba(219, 0, 40, 0.28); }
.hj-robe .dots { display: inline-flex; gap: 0.3rem; }

.hj-name { margin-top: 0.9rem; font-family: var(--f-display); line-height: 1; }
.hj-name b { display: block; font-weight: 600; font-style: normal; font-size: clamp(2.1rem, 3.6vw, 2.9rem); color: var(--hs-ink); }
.hj-name i { display: block; font-style: italic; font-size: clamp(1.12rem, 1.9vw, 1.45rem); margin-top: 0.12em; color: var(--hs-gold-deep); }

.hj-teaser { font-family: var(--f-serif); font-size: 1.1rem; line-height: 1.58; max-width: 29rem;
  margin-top: 0.85rem; color: var(--hs-ink-soft); text-wrap: pretty; }

.hj-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.hj-tag { font-family: var(--f-sans); font-size: 0.53rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4rem 0.72rem; border-radius: 999px;
  border: 1px solid rgba(146, 110, 60, 0.32); background: rgba(255, 255, 255, 0.5); color: var(--hs-gold-deep); }

/* -- appels à l'action : fiche produit / boutique -- */
.hj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; margin-top: 1.5rem; }
/* au survol, la couleur de la robe cercle le bouton et le pose sur son ombre */
.hj-actions .btn {
  transition: background-color 0.4s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.hj-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--hj-label, var(--hs-gold)), 0 16px 34px -18px var(--hj-label, var(--hs-gold));
}
.hj-actions .link-underline:hover .ln { background: var(--hj-label, var(--hs-gold)); }
.hj-price { display: inline-flex; flex-direction: column; padding-left: 0.95rem;
  border-left: 1px solid var(--hj-label-soft, rgba(146, 110, 60, 0.35));
  font-family: var(--f-display); font-size: 1.32rem; line-height: 1.1; color: var(--hs-ink); }
.hj-price em { font-family: var(--f-sans); font-style: normal; font-size: 0.54rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hs-ink-soft); opacity: 0.8; margin-top: 0.3rem; }

/* -- comptoir de commande -- */
.hj-order { position: relative; overflow: hidden; background: var(--hs-forest-deep); color: var(--hs-cream);
  padding: clamp(2.8rem, 4vw, 4rem) 1.5rem; text-align: center; }
.hj-order .grain { position: absolute; inset: 0; z-index: 0; opacity: 0.4; }
.hj-order__in { position: relative; z-index: 2; max-width: 660px; margin: 0 auto; }
.hj-order h3 { font-family: var(--f-display); font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.16; color: var(--hs-cream); }
.hj-order h3 em { font-style: italic; color: var(--hs-gold-light); }
.hj-order p { font-family: var(--f-serif); font-size: 1.12rem; line-height: 1.62; color: rgba(246, 242, 234, 0.82);
  margin: 1rem auto 0; max-width: 34rem; text-wrap: pretty; }
.hj-order__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.1rem 1.7rem; margin-top: 2.1rem; }
.hj-order__cta .btn svg { width: 15px; height: 15px; }