/* ==========================================================================
   KADRI ORGANICS — BASE STYLES
   Global reset, element defaults, layout primitives, and site chrome
   (announce bar, header/nav, footer, WhatsApp FAB, reveal utility).
   Loaded on every page via templates/base.html.
   ========================================================================== */




@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 3px;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-amber-dark);
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--color-amber);
  display: inline-block;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


/* ---------------------------------------------------------------------- */
/* ANNOUNCEMENT BAR                                                        */
/* ---------------------------------------------------------------------- */
.announce-bar {
  background: var(--color-kadri);
  color: var(--color-paper);
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2xs) var(--space-sm);
  /* Bar sits at the true top of the viewport on every screen size now (it's never
     hidden), so it — not the header — is what needs to clear the Dynamic Island /
     notch on Face ID iPhones. env() resolves to 0 on devices without a notch. */
  padding-top: calc(var(--space-2xs) + env(safe-area-inset-top, 0px));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 61;
  font-weight: 500;
}

.announce-bar strong { color: var(--color-ink); font-weight: 600; }

/* Full wording always shows, at every screen size — wraps to two lines on narrow
   phones rather than swapping to a shorter message. The bar's real height is
   measured live (see main.js's ResizeObserver) so the header and page content
   below it always sit at the correct offset regardless of how many lines this is. */
@media (max-width: 420px) {
  .announce-bar { line-height: 1.35; }
}

/* ---------------------------------------------------------------------- */
/* HEADER / NAV                                                            */
/* ---------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: var(--announce-height, 36px); /* JS in main.js keeps this in sync when the
       announce bar wraps to two lines on narrow screens */
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(250, 246, 240, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--border-hairline);
  transition: background var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.site-header.is-scrolled {
  background: rgba(16, 15, 13, 0.65);
  box-shadow: 0 6px 24px rgba(14, 13, 12, 0.07);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-xs);
  gap: var(--space-md);
}

/**/

.brand-mark {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.brand-mark .brand-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}

.brand-mark img {
  height: 36px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: drop-shadow(0 0 4px rgba(255, 215, 130, 0.6))
          drop-shadow(0 0 10px rgba(255, 190, 80, 0.4));
}

.brand-mark:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(255, 215, 130, 0.8))
          drop-shadow(0 0 14px rgba(255, 190, 80, 0.55));
}


.brand-mark .brand-suffix {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-amber);
  border-left: var(--border-hairline);
  padding-left: 0.5rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
}

.nav-links a {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-kadri);
  position: relative;
  padding-bottom: 6px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--color-amber);
  transition: width var(--duration-base) var(--ease-default);
}

.nav-links a:hover::after,
.nav-links a.is-active::after { width: 100%; }

.nav-utility {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: var(--border-hairline);
  border-radius: 50%;
  color: var(--color-kadri);
  background: transparent;
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
  position: relative;
}

.icon-btn:hover { border-color: var(--color-amber); color: var(--color-amber); }

.icon-btn.is-active {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-paper);
  transform: scale(1.08);
}

.icon-btn.is-active:hover {
  background: var(--color-amber-dark);
  border-color: var(--color-amber-dark);
  color: var(--color-paper);
}

.icon-btn.is-active .cart-count {
  background: var(--color-ink);
}

.icon-btn.is-static:hover {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-paper);
}

/* ---------------------------------------------------------------------- */
/* BUTTON SYSTEM — the single canonical definition for the whole site.    */
/* Design intent (July 2026):                                              */
/*   HOVER  — inviting, stays in the amber family (never ink/black),       */
/*            gentle lift + warm shadow, unhurried 260ms.                   */
/*   PRESS  — the real feedback moment (:active): button pushes down 1px    */
/*            and deepens to burnt-copper amber-dark, instantly. Works on   */
/*            touch devices too, where hover states never fire.             */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color 260ms var(--ease-default),
    color 260ms var(--ease-default),
    border-color 260ms var(--ease-default),
    transform 200ms var(--ease-default),
    box-shadow 200ms var(--ease-default);
}

.btn-primary {
  background-color: var(--color-amber);
  color: var(--color-paper);
  border-color: transparent;
}
.btn-primary:hover {
  background-color: #eb8f2e; /* amber lightened ~10% — avoids color-mix() which needs Safari ≥16.2 */
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232, 130, 27, 0.32);
  color: var(--color-paper);
}
.btn-primary:active {
  background-color: var(--color-amber-dark);
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(196, 101, 15, 0.35);
  transition-duration: 60ms;
}

.btn-outline-light {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: transparent;
}
.btn-outline-dark {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
  background: transparent;
}
.btn-outline-light:hover,
.btn-outline-dark:hover {
  border-color: var(--color-amber);
  background-color: var(--color-amber);
  color: var(--color-paper);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232, 130, 27, 0.28);
}
.btn-outline-light:active,
.btn-outline-dark:active {
  border-color: var(--color-amber-dark);
  background-color: var(--color-amber-dark);
  color: var(--color-paper);
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(196, 101, 15, 0.35);
  transition-duration: 60ms;
}

/* Reduced-motion users still get color feedback, no movement */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; }
}


.cart-count {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--color-kadri);
  color: var(--color-paper);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}

.menu-toggle {
  display: none;
  width: 38px; height: 38px;
  border: none;
  background: transparent;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  /* Sits ABOVE the open mobile panel (z-80) and backdrop (z-75) — both live
     inside the header's stacking context — so tapping the hamburger again
     always closes the menu. */
  position: relative;
  z-index: 90;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 2px;
  transition:
    transform var(--duration-base) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default);
  transform-origin: center;
}

/* Hamburger -> X morph while the menu is open: the three bars "collapse"
   into a close icon, signalling tap-to-close. Driven by body.menu-open,
   which main.js already toggles. Bars are 1.5px tall with a 5px gap, so
   the outer bars travel 6.5px to meet in the middle. */
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .menu-toggle span { transition: none; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
  /* Tighten icon spacing so the brand + 3 icons sit comfortably on narrow screens */
  .nav-utility { gap: var(--space-xs); }
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0; right: 0;
  width: 78%;
  max-width: 320px;
  height: 100vh;      /* fallback */
  height: 100dvh;     /* correct height while the mobile browser UI shows/hides */
  background: var(--color-paper);
  z-index: 80;
  /* Top padding must clear the announce bar + notch; bottom clears the home indicator */
  padding: var(--space-2xl) var(--space-md) var(--space-md);
  padding-top: calc(var(--space-2xl) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  transition: transform var(--duration-base) var(--ease-default);
  box-shadow: -12px 0 30px rgba(14,13,12,0.12);
  transform: translateX(100%);
  overflow-y: auto;
}

.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav .nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

@media (max-width: 860px) {
  .mobile-nav { display: block; }
}

body.menu-open { overflow: hidden; }


/* ---------------------------------------------------------------------- */
/* SECTION LAYOUT UTILITIES — shared across all pages                     */
/* ---------------------------------------------------------------------- */
.section { padding: var(--space-xl) 0; }
.section-tight { padding: var(--space-lg) 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.1;
  margin-top: var(--space-2xs);
}

.section-head .section-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-kadri);
  padding-bottom: 4px;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------- */
/* FOOTER                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: rgba(250, 246, 240, 0.85);
  padding: var(--space-xl) 0 var(--space-md);
  border-top: 3px solid var(--color-kadri);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-hairline-dark);
}

.footer-grid h3 {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-kadri);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid rgba(232, 130, 27, 0.3);
}

.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.6rem; font-size: var(--fs-sm); }
.footer-grid a {
  transition: color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default), padding-left var(--duration-fast) var(--ease-default);
  display: inline-block;
}
.footer-grid a:hover { color: var(--color-kadri); padding-left: 6px; }

.footer-brand .brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-paper);
  margin-bottom: var(--space-xs);
  display: block;
}

.footer-brand .brand-name span { color: var(--color-kadri); }

.footer-brand p { font-size: var(--fs-sm); max-width: 280px; margin-bottom: var(--space-sm); }

.footer-social { display: flex; gap: 0.7rem; }

.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: transform var(--duration-fast) var(--ease-default), border-color var(--duration-fast);
  padding-left: 0 !important;
}
.footer-social a:hover { transform: scale(1.12); padding-left: 0 !important; }

/* Facebook */
.footer-social .social-fb {
  background: rgba(232, 130, 27, 0.12);
  border: 1px solid rgba(232, 130, 27, 0.35);
  color: var(--color-kadri);
}
.footer-social .social-fb:hover { background: var(--color-kadri); border-color: var(--color-kadri); color: var(--color-ink); }

/* Instagram */
.footer-social .social-ig {
  background: rgba(232, 130, 27, 0.12);
  border: 1px solid rgba(232, 130, 27, 0.35);
  color: var(--color-kadri);
}
.footer-social .social-ig:hover { background: var(--color-kadri); border-color: var(--color-kadri); color: var(--color-ink); }

/* TikTok */
.footer-social .social-tt {
  background: rgba(232, 130, 27, 0.12);
  border: 1px solid rgba(232, 130, 27, 0.35);
  color: var(--color-kadri);
}
.footer-social .social-tt:hover { background: var(--color-kadri); border-color: var(--color-kadri); color: var(--color-ink); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-sm);
  font-size: 0.78rem;
  color: rgba(250, 246, 240, 0.5);
}

.footer-bottom a { color: var(--color-kadri); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .footer-bottom { flex-direction: column; gap: 0.5rem; }
}


/* ---------------------------------------------------------------------- */
/* WHATSAPP FAB — green brand color, raised above footer contact          */
/* ---------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  bottom: 5rem; right: var(--space-sm);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  z-index: 70;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.whatsapp-fab:hover {
  transform: scale(1.08);
  background: #1ebe5d;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
}


/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll utility — used sparingly, per design plan              */
/* ---------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-default), transform var(--duration-slow) var(--ease-default);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }


/* ---------------------------------------------------------------------- */
/* MOBILE NAV BACKDROP — dims the page behind the slide-in menu and gives  */
/* users an obvious "tap outside to close" target (the hamburger sits      */
/* underneath the panel's stacking context, so it can't act as the close   */
/* button once the menu is open).                                          */
/* ---------------------------------------------------------------------- */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 13, 12, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-default);
  z-index: 75; /* below .mobile-nav (80), above header (60) */
}

.mobile-nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------------- */
/* TOUCH ERGONOMICS — enlarge tap targets on coarse pointers only, so the  */
/* refined 38px buttons are kept on desktop but thumbs get ~44px minimum   */
/* (Apple HIG / Material guidance) on phones and tablets.                  */
/* ---------------------------------------------------------------------- */
@media (pointer: coarse) {
  .icon-btn,
  .menu-toggle { width: 44px; height: 44px; }

  .qty-stepper button { min-width: 40px; min-height: 40px; }
}

/* ---------------------------------------------------------------------- */
/* SMALL-SCREEN REFINEMENTS                                                 */
/* ---------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Tighten container so content doesn't feel edge-to-edge on small phones */
  .container { padding: 0 1rem; }

  /* Footer: collapse to single column so 3 link cols don't fight 2-col grid */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: 1; }

  /* Section headings: let the "View all" link wrap below the title */
  .section-head { flex-wrap: wrap; align-items: baseline; }

  /* Section-head h2 uses --fs-2xl which is large even after token reduction;
     cap it so long headings don't run to 4+ lines on a 360px screen */
  .section-head h2 { font-size: var(--fs-xl); }
}


/* ---------------------------------------------------------------------- */
/* CHECKOUT STEP PROGRESS TRAIL                                            */
/* ---------------------------------------------------------------------- */
.checkout-progress {
  background: var(--color-ink);
  border-bottom: 1px solid rgba(201, 162, 75, 0.25);
  padding: var(--space-sm) 0;
}

.checkout-trail {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  justify-content: center;
}

.trail-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.trail-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1.5px solid rgba(250, 246, 240, 0.2);
  color: rgba(250, 246, 240, 0.35);
  flex-shrink: 0;
  transition: all var(--duration-base);
}

.trail-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.35);
  transition: color var(--duration-base);
}

/* Active step */
.trail-step.is-active .trail-num {
  background: var(--color-kadri);
  border-color: var(--color-kadri);
  color: var(--color-paper);
}
.trail-step.is-active .trail-label {
  color: var(--color-paper);
  font-weight: 600;
}

/* Completed step — number text hides, checkmark appears via ::after */
.trail-step.is-done .trail-num {
  background: transparent;
  border-color: var(--color-kadri);
  color: transparent;
  font-size: 0;
}
.trail-step.is-done .trail-num::after {
  content: '✓';
  font-size: 0.75rem;
  color: var(--color-kadri);
}
.trail-step.is-done .trail-label { color: rgba(250, 246, 240, 0.5); }

/* Connector line between steps */
.trail-connector {
  flex: 1;
  height: 1px;
  background: rgba(250, 246, 240, 0.12);
  min-width: 40px;
  max-width: 80px;
  transition: background var(--duration-base);
}
.trail-connector.is-done { background: var(--color-kadri); opacity: 0.4; }

@media (max-width: 480px) {
  .trail-label { display: none; }
  .trail-connector { min-width: 20px; max-width: 40px; }
  .trail-num { width: 28px; height: 28px; }
  /* Show active label only on mobile */
  .trail-step.is-active .trail-label { display: block; }
}

/* Compact heading directly below the step trail (cart + checkout pages) */
.checkout-page-head {
  padding: var(--space-md) 0 var(--space-sm);
  border-bottom: var(--border-hairline);
  margin-bottom: 0;
}
.checkout-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, var(--fs-xl));
  font-weight: 600;
  color: var(--color-ink);
}
.checkout-sub {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  margin-top: 0.3rem;
}


/* ---------------------------------------------------------------------- */
/* COOKIE CONSENT BANNER                                                   */
/* ---------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 65;
  background: var(--color-ink);
  color: var(--color-paper);
  border-top: 2px solid var(--color-gold-line);
  padding: var(--space-sm) 0;
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-default);
}
.cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cookie-msg {
  flex: 1;
  min-width: 200px;
  font-size: var(--fs-sm);
  color: rgba(250, 246, 240, 0.82);
}
.cookie-msg a { color: var(--color-kadri); text-decoration: underline; text-underline-offset: 3px; }

.cookie-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.cookie-actions .btn-primary { padding: 0.6rem 1.4rem; }

.cookie-decline {
  background: transparent;
  border: none;
  color: rgba(250, 246, 240, 0.55);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.cookie-decline:hover { color: var(--color-paper); }