/**
 * Deep Perfume — header, mobile drawer, newsletter, footer, WhatsApp.
 * Depends on tokens.css. RTL-first: logical properties only (no left/right)
 * except the single documented drawer transform. Brief §4.
 */

/* ---- a11y helpers -------------------------------------------------------- */
.screen-reader-text{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.deep-skip-link{
  position:absolute; inset-inline-start:var(--s-4); inset-block-start:-100px;
  background:var(--c-plum); color:var(--c-cream); padding:var(--s-2) var(--s-4);
  border-radius:var(--r-md); z-index:2000; transition:inset-block-start var(--dur-fast);
}
.deep-skip-link:focus{ inset-block-start:var(--s-4); }

/* ---- shared button (fuller component lands in checkpoint 4) -------------- */
.deep-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--f-ar); font-size:var(--fs-body); font-weight:700;
  line-height:1; padding:var(--s-3) var(--s-6); border:0; border-radius:var(--r-md);
  cursor:pointer; text-decoration:none; transition:background var(--dur-fast), color var(--dur-fast);
}
.deep-btn--brass{ background:var(--c-brass); color:var(--c-plum-deep); }
.deep-btn--brass:hover{ background:#c39a5e; }

/* =========================================================================
 * HEADER
 * ====================================================================== */
:root{ --deep-header-h:72px; }

.deep-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:1000;
  min-height:var(--deep-header-h);
  transition:background var(--dur-base) var(--ease),
             color var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease),
             transform var(--dur-base) var(--ease);
}
.deep-header__inner{
  max-width:var(--container); margin-inline:auto;
  min-height:var(--deep-header-h); padding-inline:var(--gutter);
  display:flex; align-items:center; gap:var(--s-5);
}

/* Solid state: cream ground, plum ink, hairline + soft shadow. */
.deep-header.is-solid,
.deep-header.is-transparent.is-scrolled{
  background:var(--c-cream); color:var(--c-plum);
  border-block-end:1px solid var(--c-line); box-shadow:var(--sh-1);
}
/* Transparent state over a dark hero: cream text, no ground. */
.deep-header.is-transparent:not(.is-scrolled){
  background:transparent; color:var(--c-cream); border-block-end:1px solid transparent;
}
/* Sticky hide-on-scroll-down / show-on-scroll-up (desktop only, via JS). */
.deep-header.is-hidden{ transform:translateY(-100%); }

/* Push solid-header pages down so content clears the fixed header.
   Transparent-header pages intentionally let the hero sit underneath. */
.has-solid-header #main-content{ padding-block-start:var(--deep-header-h); }

/* ---- logo ---- */
.deep-logo{ display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.deep-logo img{ max-height:44px; width:auto; display:block; }
.deep-logo__text{ font-family:var(--f-ar); font-size:1.5rem; font-weight:700; color:inherit; }

/* ---- primary nav (desktop) ---- */
.deep-nav{ margin-inline-start:auto; }
.deep-nav__list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--s-5); }
.deep-nav__item{ position:relative; }
.deep-nav__link{
  font-family:var(--f-ar); font-size:var(--fs-body); font-weight:500;
  color:inherit; text-decoration:none; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--s-1); padding-block:var(--s-2);
}
.deep-nav__link:hover{ color:var(--c-brass); }
.deep-header.is-solid .deep-nav__link:hover,
.deep-header.is-transparent.is-scrolled .deep-nav__link:hover{ color:var(--c-brass-text); }
.deep-caret{ transition:transform var(--dur-fast); }

/* ---- shop dropdown ---- */
.deep-dropdown{
  list-style:none; margin:0; padding:var(--s-3); position:absolute;
  inset-block-start:calc(100% + var(--s-2)); inset-inline-end:0; min-width:220px;
  background:var(--c-cream); border:1px solid var(--c-line); border-radius:var(--r-md);
  box-shadow:var(--sh-2); display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
}
.deep-nav__item.has-dropdown:hover .deep-dropdown,
.deep-nav__item.has-dropdown:focus-within .deep-dropdown,
.deep-nav__item.has-dropdown.is-open .deep-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.deep-nav__item.has-dropdown:hover .deep-caret,
.deep-nav__item.has-dropdown.is-open .deep-caret{ transform:rotate(180deg); }
.deep-dropdown a{
  display:block; padding:var(--s-2) var(--s-3); border-radius:var(--r-sm);
  color:var(--c-ink); text-decoration:none; font-size:var(--fs-body);
}
.deep-dropdown a:hover{ background:var(--c-stone); color:var(--c-plum); }

/* ---- utilities ---- */
.deep-utils{ display:flex; align-items:center; gap:var(--s-3); }
.deep-nav + .deep-utils{ margin-inline-start:0; }
.deep-util{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; color:inherit; text-decoration:none;
  background:none; border:0; cursor:pointer; position:relative;
}
.deep-util:hover{ color:var(--c-brass); }
.deep-util--lang{ min-width:auto; padding-inline:var(--s-2); font-family:var(--f-ar); font-size:var(--fs-small); font-weight:500; }
.deep-cart-count{
  position:absolute; inset-block-start:4px; inset-inline-start:4px;
  min-width:18px; height:18px; padding-inline:4px; border-radius:var(--r-pill);
  background:var(--c-brass); color:var(--c-plum-deep);
  font-family:var(--f-ar); font-size:11px; font-weight:700; line-height:18px; text-align:center;
}
.deep-cart-count.is-empty{ display:none; }

/* ---- slide-down search ---- */
.deep-search{
  border-block-start:1px solid var(--c-line); background:var(--c-cream);
  overflow:hidden;
}
.deep-search__form{
  max-width:var(--container); margin-inline:auto; padding:var(--s-4) var(--gutter);
  display:flex; gap:var(--s-3);
}
.deep-search__input{
  flex:1; padding:var(--s-3) var(--s-4); border:1px solid var(--c-line);
  border-radius:var(--r-md); background:#fff; color:var(--c-ink);
  font-family:var(--f-ar); font-size:var(--fs-body);
}
.deep-search__submit{
  padding:var(--s-3) var(--s-6); border:0; border-radius:var(--r-md);
  background:var(--c-plum); color:var(--c-cream);
  font-family:var(--f-ar); font-weight:700; cursor:pointer;
}

/* =========================================================================
 * MOBILE DRAWER
 * ====================================================================== */
.deep-burger{
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  background:none; border:0; cursor:pointer; padding:10px; color:inherit;
}
.deep-burger span{ display:block; height:2px; background:currentColor; border-radius:2px; }

.deep-drawer-overlay{
  position:fixed; inset:0; z-index:1500; background:rgb(38 37 42 / .5);
  opacity:0; transition:opacity var(--dur-base);
}
.deep-drawer-overlay.is-open{ opacity:1; }

.deep-drawer{
  position:fixed; inset-block:0; inset-inline-start:0; z-index:1600;
  width:min(86vw,360px); background:var(--c-cream); color:var(--c-ink);
  display:flex; flex-direction:column; box-shadow:var(--sh-2);
  transform:translateX(-100%);   /* off-canvas; dir override below flips for RTL */
  transition:transform var(--dur-base) var(--ease);
  overflow-y:auto;
}
/* Transform axis is physical, so RTL needs an explicit flip (documented). */
[dir="rtl"] .deep-drawer{ transform:translateX(100%); }
.deep-drawer.is-open{ transform:translateX(0); }

.deep-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) var(--s-5); border-block-end:1px solid var(--c-line);
}
.deep-drawer__brand{ font-family:var(--f-ar); font-size:1.25rem; font-weight:700; color:var(--c-plum); }
.deep-drawer__close{ background:none; border:0; font-size:28px; line-height:1; color:var(--c-ink); cursor:pointer; width:44px; height:44px; }
.deep-drawer__nav{ padding:var(--s-4) var(--s-5); }
.deep-drawer__label{ font-family:var(--f-ar); font-size:var(--fs-label); color:var(--c-brass-text); margin:0 0 var(--s-2); }
.deep-drawer__list{ list-style:none; margin:0 0 var(--s-5); padding:0; display:grid; gap:2px; }
.deep-drawer__list a{
  display:block; padding:var(--s-3); border-radius:var(--r-sm);
  color:var(--c-ink); text-decoration:none; font-family:var(--f-ar); font-size:1.05rem;
}
.deep-drawer__list a:hover{ background:var(--c-stone); }
.deep-drawer__list--secondary{ border-block-start:1px solid var(--c-line); padding-block-start:var(--s-4); }
.deep-drawer__foot{
  margin-block-start:auto; padding:var(--s-5); border-block-start:1px solid var(--c-line);
  display:flex; gap:var(--s-4); flex-wrap:wrap;
}
.deep-drawer__foot a{ color:var(--c-plum); text-decoration:none; font-family:var(--f-ar); font-weight:500; }

/* =========================================================================
 * NEWSLETTER (§4.2)
 * ====================================================================== */
.deep-newsletter{ background:var(--c-plum); color:var(--c-cream); padding-block:var(--s-9); }
.deep-newsletter__inner{
  max-width:640px; margin-inline:auto; padding-inline:var(--gutter); text-align:center;
}
.deep-newsletter__title{ font-family:var(--f-ar); font-size:var(--fs-h2); line-height:var(--lh-ar-head); margin:0 0 var(--s-3); }
.deep-newsletter__body{ font-family:var(--f-ar); line-height:var(--lh-ar-body); color:#E9E0D2; margin:0 0 var(--s-5); }
.deep-newsletter__form{ display:flex; gap:var(--s-3); flex-wrap:wrap; justify-content:center; }
.deep-newsletter__input{
  flex:1; min-width:220px; padding:var(--s-3) var(--s-4);
  border:1px solid var(--c-brass); border-radius:var(--r-md);
  background:rgb(255 255 255 / .06); color:var(--c-cream);
  font-family:var(--f-ar); font-size:var(--fs-body);
}
.deep-newsletter__input::placeholder{ color:#C9BFD3; }
.deep-newsletter__input:focus{ outline:2px solid var(--c-brass); outline-offset:2px; }
.deep-newsletter__msg{ flex-basis:100%; margin:var(--s-2) 0 0; font-family:var(--f-ar); font-size:var(--fs-small); }
.deep-newsletter__msg.is-error{ color:#F0C7C2; }
.deep-newsletter__msg.is-success{ color:var(--c-brass); }

/* =========================================================================
 * FOOTER (§4.3)
 * ====================================================================== */
.deep-footer{ background:var(--c-plum); color:var(--c-cream); }
.deep-footer__inner{
  max-width:var(--container); margin-inline:auto; padding:var(--s-9) var(--gutter) var(--s-7);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--s-7);
}
.deep-footer__logo img{ max-height:52px; width:auto; }
.deep-footer__logo .deep-logo__text{ color:var(--c-cream); }
.deep-social{ list-style:none; margin:var(--s-4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-3); }
.deep-social a{ color:#D9CFE2; text-decoration:none; font-family:var(--f-en); font-size:var(--fs-small); }
.deep-social a:hover{ color:var(--c-brass); }
.deep-footer__head{ font-family:var(--f-ar); font-size:var(--fs-h3); color:var(--c-brass); margin:0 0 var(--s-4); }
.deep-footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2); }
.deep-footer__links a{ color:#D9CFE2; text-decoration:none; font-family:var(--f-ar); font-size:var(--fs-body); }
.deep-footer__links a:hover{ color:var(--c-cream); }
.deep-footer__contact{ display:grid; gap:var(--s-3); }
.deep-footer__contact-line{ color:#D9CFE2; text-decoration:none; font-family:var(--f-ar); font-size:var(--fs-body); }
.deep-footer__contact-line:hover{ color:var(--c-cream); }
.deep-payments{ list-style:none; margin:var(--s-2) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2); }
.deep-payments li{
  font-family:var(--f-en); font-size:var(--fs-small); color:var(--c-plum-deep);
  background:var(--c-stone); padding:2px var(--s-2); border-radius:var(--r-sm);
}
.deep-footer__bottom{
  border-block-start:1px solid rgb(255 255 255 / .12); text-align:center;
  padding:var(--s-5) var(--gutter);
}
.deep-footer__bottom p{ margin:0; font-family:var(--f-ar); font-size:var(--fs-small); color:#C9BFD3; }

/* =========================================================================
 * FLOATING WHATSAPP (§4.4) — bottom inline-start
 * ====================================================================== */
.deep-whatsapp{
  position:fixed; inset-block-end:var(--s-5); inset-inline-start:var(--s-5); z-index:1200;
  width:56px; height:56px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-emerald); color:var(--c-cream); box-shadow:var(--sh-2);
  transition:transform var(--dur-fast);
}
.deep-whatsapp:hover{ transform:scale(1.06); }

/* =========================================================================
 * RESPONSIVE
 * ====================================================================== */
@media (max-width:1024px){
  .deep-nav{ display:none; }        /* desktop nav hidden; drawer takes over */
  .deep-burger{ display:flex; }
  .deep-logo{ margin-inline:auto; } /* center logo between burger and utils */
  .deep-utils .deep-util--lang{ display:none; } /* lang lives in the drawer on mobile */
}
@media (max-width:768px){
  :root{ --deep-header-h:60px; }
  .deep-footer__inner{ grid-template-columns:1fr; gap:var(--s-5); padding-block:var(--s-7); }

  /* Footer columns collapse to accordions. */
  .deep-footer__col[data-accordion] .deep-footer__head{
    cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    min-height:44px; margin:0; padding-block:var(--s-2);
    border-block-end:1px solid rgb(255 255 255 / .12);
  }
  .deep-footer__col[data-accordion] .deep-footer__head::after{
    content:"+"; font-size:1.25rem; color:var(--c-brass);
  }
  .deep-footer__col[data-accordion].is-open .deep-footer__head::after{ content:"−"; }
  .deep-footer__col[data-accordion] [data-accordion-panel]{ display:none; padding-block:var(--s-3); }
  .deep-footer__col[data-accordion].is-open [data-accordion-panel]{ display:grid; }
  .deep-footer__col--brand{ text-align:center; }
  .deep-social{ justify-content:center; }
}

/* Reduced motion: no transforms/animation, drawer just appears. */
@media (prefers-reduced-motion:reduce){
  .deep-header, .deep-drawer, .deep-drawer-overlay, .deep-dropdown, .deep-whatsapp{ transition:none; }
}