/* أناقة brand layer — loaded LAST on every product page (/, /breath, /hair), so the three pages read as one store:
   warm ivory surfaces, ink type, one clay order button, the أناقة wordmark, no dark full-width sections.
   Each product stylesheet keeps its packaging accent (--teal on the serum, --royal on /breath and /hair) for small
   details: kickers, highlights, icons. To roll back, remove the <link href="/brand.css"> from the three pages. */

/* Amiri subset = the letters of «أناقة» only (also declared in styles.css; repeated here for /breath and /hair). */
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/amiri-700-logo.woff2) format('woff2');unicode-range:U+623, U+627, U+629, U+642, U+646, U+654}

:root{
  --b-ivory:#faf7f2; --b-sand:#f2ebe0; --b-ink:#221d19; --b-ink-2:#3b332c; --b-muted:#6b6158; --b-line:#e8dfd2;
  /* the one order button: clay (white text ≥ 5:1) */
  --cta:#9a4724; --cta-hi:#9a4724; --cta-2:#7d3a1d; --cta-soft:#f6ece3;
  /* /breath + /hair: their "navy" (headings, numbers, form labels) becomes the store's ink; --royal stays the product accent */
  --navy:var(--b-ink); --navy-2:var(--b-ink-2); --soft:#f5efe6; --line:var(--b-line); --bg:var(--b-ivory); --muted:var(--b-muted);
  --shadow:0 12px 32px rgba(34,29,25,.08);
}

body{background:var(--b-ivory)}
.topbar{background:var(--b-ink);color:#f5efe6}
.site-header{background:rgba(250,247,242,.97);border-bottom-color:var(--b-line)}

/* wordmark */
.logo,.logo b{font-family:"Amiri",serif;font-weight:700;color:var(--b-ink);letter-spacing:0}
.logo{font-size:1.7rem;line-height:1}
.logo b{font-size:1.7rem}
.logo span{font-family:var(--font,inherit);font-size:.74rem;color:var(--b-muted);letter-spacing:.02em}

/* order button: flat clay, quiet shadow */
.btn-cta{background:var(--cta);box-shadow:0 8px 18px rgba(122,56,26,.22)}
.btn-cta:hover{background:var(--cta-2);filter:none}

/* hero surfaces */
.hero-fold{background:linear-gradient(180deg,var(--b-sand),var(--b-ivory) 85%)}
.hero{background:var(--b-ivory)}
.hf-bundle{background:var(--cta-soft);color:var(--cta-2)}

/* order card header: light, not a dark bar */
.card-title{background:var(--b-sand);color:var(--b-ink);border-bottom:1px solid var(--b-line)}
.order-card{box-shadow:0 18px 44px rgba(34,29,25,.10)}

/* former dark sections (/breath, /hair showcase + final CTA) → sand */
.sec.dark{background:var(--b-sand);color:var(--b-ink)}
.sec.dark h2{color:var(--b-ink)}
.sec.dark .kicker{color:var(--royal)}
.sec.dark .sec-head p:not(.kicker),.sec.dark .mid-note,.sec.dark .mid-note b{color:var(--b-muted)}
.sec.dark .specs{background:#fff;border-color:var(--b-line)}
.sec.dark .specs div{border-bottom-color:var(--b-line)}
.sec.dark .specs dt{color:var(--b-muted)}
.final-sec{background:var(--b-sand);color:var(--b-ink)}
.final-sec h2{color:var(--b-ink)}
.final-sub,.final-price small{color:var(--b-muted)}
.final-media{box-shadow:0 20px 44px rgba(34,29,25,.16)}

/* footer: the store's three products */
.footer{background:var(--b-ivory);color:var(--b-muted);border-top:1px solid var(--b-line)}
.f-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;margin:.2rem 0 .9rem;font-size:.9rem}
.f-nav b{width:100%;font-family:"Amiri",serif;font-size:1.5rem;color:var(--b-ink);font-weight:700}
.f-nav a{color:var(--b-ink-2);text-decoration:underline;text-decoration-color:var(--b-line);text-underline-offset:4px;padding:.35rem 0}
.f-nav a[aria-current="page"]{text-decoration:none;color:var(--b-muted)}

@media (prefers-reduced-motion:reduce){.btn,.btn-cta .ic{transition:none}}