/* ==========================================================================
   SMOVF FRAGRANCE — LAYOUT
   Containers, sections, grids, header, footer.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1560px; }

/* ---------- Sections ----------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Alternate soft neutral background */
.section--alt { background: var(--bg-alt); }

/* Dark sections — premium black, used sparingly for contrast */
.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--charcoal {
  background: var(--bg-dark-soft);
  color: var(--text-on-dark);
}

.section--dark h1, .section--dark h2, .section--dark h3,
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3,
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--text-on-dark); }

.section--dark h4, .section--charcoal h4, .on-dark h4 { color: var(--text-on-dark); }
.section--dark p, .section--charcoal p { color: var(--text-on-dark-muted); }

/* Section heading block */
.section-head { margin-bottom: var(--space-xl); }
.section-head--center { text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* Head with an action on the right (desktop) */
.section-head--split {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .section-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .section-head--split > * { margin-bottom: 0; }
}

/* ---------- Grid --------------------------------------------------------- */
.grid { display: grid; gap: var(--space-md); }

/* Grid and flex children default to min-width:auto, which lets wide content
   (a scrolling filter row, a long word) push a track past the viewport.
   Resetting it is what keeps every layout below able to shrink. */
.grid > *,
.split > * { min-width: 0; }

/* Image-led tiles pair up early — one full-width portrait tile per row makes
   a phone user scroll through four screens to see four categories. */
@media (min-width: 460px) {
  .grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .grid { gap: var(--space-lg); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Two-column editorial split (media + copy) */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); }
  .split--reverse > :first-child { order: 2; }
}

.stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.stack--lg { gap: var(--space-md); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.actions--center { justify-content: center; }

/* On small screens CTAs go full-width for easy tapping. They also drop the
   nowrap so a long label ("Create Your Signature Scent") wraps to a second
   line instead of overflowing the button. */
@media (max-width: 479px) {
  .actions .btn {
    width: 100%;
    white-space: normal;
    padding-inline: var(--space-sm);
  }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease);
}

.header.is-stuck { box-shadow: var(--shadow-sm); }

/* Announcement strip — black bar with gold highlight.

   This is a <p>, so it inherits the 68ch prose measure from base.css, which
   capped the black bar at about 490px: a short dark rectangle in the top-left
   corner of a 1440px screen, with the text wrapped onto two lines inside it.
   The strip is a band of colour across the page rather than something anyone
   reads a paragraph of, so the measure is dropped here. */
.announce {
  max-width: none;
  background: var(--black);
  color: var(--text-on-dark);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-align: center;
  padding: var(--space-2xs) var(--gutter);
}

.announce strong { color: var(--smovf-gold); font-weight: var(--fw-medium); }

.announce__sep { margin-inline: var(--space-2xs); opacity: 0.5; }

/* When the strip wraps to two lines the separator dangles at the end of the
   first, so it is dropped on narrow screens.

   The hiding rule is written as `.announce > .announce__sep` rather than
   `.announce__sep` because the rule below it makes every child a block, and
   `.announce > span` (0-1-1) outweighs a bare `.announce__sep` (0-1-0). The
   separator was therefore laid out as a block of its own — a lone grey dot on
   a line between the two sentences, which is worse than the dangle this was
   written to avoid. */
@media (max-width: 719px) {
  .announce > .announce__sep { display: none; }
  .announce > span,
  .announce > strong { display: block; }
}

.header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--header-h);
}

.header__brand { flex: none; margin-right: auto; }

/* Logo lockup — the supplied logo asset, never re-typeset.
   Height is fixed and width auto so proportions are never distorted. */
.logo { display: inline-flex; align-items: center; }

/* The supplied lockup is two lines — SMOVF over FRAGRANCE — so a fixed height
   gives the wordmark itself only about 60% of it. These are set larger than a
   single-line mark would need so that SMOVF reads at the weight a primary
   logo should, inside a 68/84px header bar.

   Height only, width auto. The artwork is 1600x402 and is never stretched to
   fit anything: setting both dimensions is how a logo ends up subtly wrong in
   a way nobody can name. */
.logo img,
.logo svg {
  height: 34px;
  width: auto;      /* never stretch */
  display: block;
}

@media (min-width: 1024px) {
  .logo img, .logo svg { height: 46px; }
}

.logo--footer img, .logo--footer svg { height: 44px; }

/* ---------- Primary navigation ------------------------------------------ */
.nav { display: none; }

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.6vw, 2rem);
    height: 100%;
  }
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--text-heading);
  white-space: nowrap;
}

/* Active navigation indicator — gold underline */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  height: 2px;
  background: var(--smovf-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--black); }

/* ---------- Header actions ---------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  flex: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;               /* 44px minimum tap target */
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-heading);
  cursor: pointer;
  position: relative;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icon-btn:hover { background: var(--neutral); color: var(--accent-text); }
.icon-btn svg { width: 21px; height: 21px; }

/* Shopping cart indicator — gold count bubble */
.cart-count {
  position: absolute;
  top: 5px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--smovf-gold);
  color: var(--black);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
}

.cart-count[hidden] { display: none; }

/* Specificity note: `.btn` sets display:inline-flex in components.css, which
   loads after this file. These rules are scoped to `.header` so the hide wins
   below the breakpoint — otherwise the CTA renders on mobile and blows the
   header out past the viewport. */
.header .header__cta { display: none; }

@media (min-width: 1180px) {
  .header .header__cta { display: inline-flex; margin-left: var(--space-xs); }
}

.nav-toggle { display: inline-flex; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

/* Very small handsets: tighten the bar rather than letting it overflow.
   Only the logo's height changes, so proportions are preserved. */
@media (max-width: 380px) {
  .header__bar { gap: var(--space-2xs); }
  .logo img, .logo svg { height: 30px; }
  .header__actions .icon-btn { width: 40px; }
}

/* ---------- Mobile drawer ------------------------------------------------ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(17, 17, 17, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-drawer);
  width: min(390px, 88vw);
  background: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  /* Hidden rather than merely offscreen, so its links leave the tab order. */
  visibility: hidden;
  transition:
    transform var(--dur-slow) var(--ease),
    visibility var(--dur-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  min-height: var(--header-h);
}

.drawer__body { padding: var(--space-md); flex: 1; }

.drawer__link {
  display: block;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  color: var(--text-heading);
}

.drawer__link[aria-current="page"] {
  color: var(--accent-text);
  box-shadow: inset 3px 0 0 var(--smovf-gold);
  padding-left: var(--space-sm);
}

.drawer__group-title {
  margin: var(--space-lg) 0 var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

.drawer__foot {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-2xs);
  background: var(--neutral);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* The bottom padding is not decorative. The floating WhatsApp button is fixed
   to the bottom-right corner, so at full scroll it sits over whatever the
   footer ends with — which is the legal links. Reserving the button's height
   plus its offset keeps it over empty space instead of over a link nobody can
   then tap. */
.footer {
  background: var(--black);
  color: var(--text-on-dark-muted);
  padding-block: var(--space-2xl) calc(54px + var(--space-sm) * 2);
}

.footer h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.footer__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--space-lg); }
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--space-2xs); }

.footer__list a { font-size: var(--fs-sm); color: var(--text-on-dark-muted); }
.footer__list a:hover { color: var(--smovf-gold); }

.footer__intro { max-width: 34ch; font-size: var(--fs-sm); }

/* The registered address. <address> is italic by default in every browser,
   which reads as an aside rather than as the company's actual location. */
.footer__address {
  margin-top: var(--space-md);
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
}

/* The registration number sits with the legal name but should not compete
   with it — it is there to be found, not read. */
.footer__reg {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

.footer__social { display: flex; gap: var(--space-2xs); margin-top: var(--space-md); }

.footer__social a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-pill);
  color: var(--text-on-dark);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.footer__social a:hover { border-color: var(--smovf-gold); color: var(--smovf-gold); }
.footer__social svg { width: 18px; height: 18px; }

.footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
}

@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

.footer__legal { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.footer__legal a:hover { color: var(--smovf-gold); }

/* ---------- Floating WhatsApp (mobile priority action) ------------------- */
.whatsapp-fab {
  position: fixed;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: var(--z-header);
  width: 54px; height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--smovf-gold);
  border: 1px solid var(--smovf-gold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.whatsapp-fab:hover { background: var(--smovf-gold); color: var(--black); }
.whatsapp-fab svg { width: 26px; height: 26px; }