/* ==========================================================================
   FASTDELHIVERY — Design System : Layout shell
   Header, navigation, mobile drawer, page hero, footer, floating actions.
   ========================================================================== */

/* ==========================================================================
   Storefront palette — Nana Jadhav (2026-11-02)

   Black (#000) is the brand's dark colour, white the page, and the existing
   orange-red stays the accent for buttons and highlights. base.css keeps its
   original navy values because the Seller Admin shares that file and keeps
   its own look; the admin never loads layout.css, so these overrides reach
   the storefront only. The token names are kept, so every rule that already
   reads var(--navy), var(--ink) or var(--line) turns black-and-white without
   being rewritten.
   ========================================================================== */

:root {
  --navy: #000000;
  --navy-700: #1f1f1f;
  --navy-500: #333333;

  --ink: #000000;
  --ink-700: #262626;
  --muted: #666666;
  --muted-2: #8c8c8c;
  --line: #e6e6e6;
  --line-2: #f1f1f1;
  --bg-soft: #f7f7f7;
  --bg-soft-2: #efefef;

  /* Notes and "in progress" badges: quiet grey instead of blue. */
  --info: #333333;
  --info-bg: #f2f2f2;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .05);
  --sh-2: 0 6px 20px rgba(0, 0, 0, .08);
  --sh-3: 0 18px 44px rgba(0, 0, 0, .14);

  /* Text on black (footer, page heroes, banners). */
  --on-dark: #e6e6e6;
  --on-dark-muted: #b3b3b3;

  /* The red of the Nana Jadhav logo itself, for the store name beside it. */
  --logo-red: #fe0002;
  /* How tall the uploaded logo is drawn in the header; its width follows. */
  --logo-h: 60px;
  --header-h: 80px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t);
}
.site-header.is-stuck { box-shadow: var(--sh-2); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--header-h);
}

/* ---- Logo -------------------------------------------------------------- */

/* The uploaded logo, large, then the store name in ONE colour — the logo's
   own red — and nothing under it (no tagline, 2026-11-02). One height token,
   --logo-h, sizes the logo on each surface; its width follows the drawing. */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-width: 0;
  color: var(--logo-red);
}
.logo:hover { color: var(--logo-red); }

/* The built-in mark, shown only when no logo is uploaded (or it fails to load). */
.logo__mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand), #ff8a4d);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-brand);
  flex: none;
}
.logo__mark svg { width: 21px; height: 21px; }

/* An uploaded logo replaces the tile: its own proportions, --logo-h tall. */
.logo__mark--image {
  display: block;
  width: auto;
  height: var(--logo-h);
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.logo__img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
}

/* Cropped to the drawn part of the logo (FD.brandLogo + LogoBounds): the
   frame has the drawing's proportions, the whole image is scaled inside it
   and its empty margins fall outside. Nothing is stretched or cut. */
.logo__crop {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
}
.logo__crop .logo__img {
  position: absolute;
  height: auto;
}

.logo__name {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--logo-red);
  white-space: nowrap;
}

/* In the header the logo image carries the name itself — its lettering reads
   "Nana Jadhav" in the same red — so the separate name text is left out
   there: beside six menu links, the search box and five buttons there is no
   room for both, and the name twice side by side reads as a stutter. The
   drawer and the footer show the name beside the logo. */
.site-header .logo__name { display: none; }

/* The mobile drawer and the footer: same logo, their own size. */
.logo--drawer { --logo-h: 44px; gap: 10px; }
.logo--drawer .logo__name { font-size: 1.1rem; }
.logo--footer { --logo-h: 96px; gap: 16px; flex-wrap: wrap; }
.logo--footer .logo__name { font-size: 1.7rem; }

/* ---- Desktop nav ------------------------------------------------------- */

/* Six links since Media joined them. The spacing is what lets six sit in the
   room five took (gap 4px → 2px, side padding 14px → 10px), so the search box
   beside them keeps its width. */
.nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }

.nav__link {
  position: relative;
  padding: 9px 10px;
  border-radius: var(--r-pill);
  font-size: .89rem;
  font-weight: 700;
  color: var(--ink-700);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__link:hover { background: var(--bg-soft-2); color: var(--ink); }
.nav__link.is-active { color: var(--brand-600); background: var(--brand-50); }

.header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* WhatsApp Support in the header: a round icon (its name is its aria-label). */
.header-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: #fff;
  color: #0f7a3d;
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.header-wa svg { flex: none; color: #25d366; }
.header-wa:hover { border-color: #25d366; background: #effbf3; color: #0b5e30; }

/* ---- Header search ----------------------------------------------------- */

.header-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
  margin-left: auto;
}
.header-search input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 42px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  font-size: .88rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.header-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, .12);
}
.header-search__icon {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}
.header-search__go {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand);
  color: #fff;
}
.header-search__go:hover { background: var(--brand-600); }

/* ---- Cart button ------------------------------------------------------- */

.icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink);
  border: 1.5px solid var(--line);
  background: #fff;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand-600); background: var(--brand-50); }

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  transition: background var(--t-fast), transform var(--t-fast);
}
.cart-btn:hover { background: var(--navy-700); color: #fff; }
.cart-btn__label { display: inline; }

.cart-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}
.cart-count.is-bump { animation: fd-pop .38s ease; }

.hamburger { display: none; }

/* Below this the six links no longer fit beside the search box, so they move
   into the drawer — and the button that opens it appears with them. (It used to
   appear only from 860px down, which left 861–1120px with no menu at all.)
   1180px rather than 1140px since the logo grew (2026-11-02): at 1141–1180 the
   links, the logo and the five buttons left the search box no room. */
@media (max-width: 1180px) {
  .nav { display: none; }
  .header-search { max-width: none; }
  .hamburger { display: grid; }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; --logo-h: 50px; }
  .header-search { display: none; }
  .hamburger { display: grid; }
  .cart-btn { padding: 0 12px; }
  .cart-btn__label { display: none; }
}

/* Phones: the row keeps the logo, the account, the cart and the menu. The
   green chat button (bottom right, every page) and the menu's own WhatsApp
   button stand in for the header's WhatsApp icon, and the language switch is
   at the top of the menu. Measured so nothing is pushed off a 320px screen. */
@media (max-width: 560px) {
  .header-wa { display: none; }
}
@media (max-width: 480px) {
  :root { --logo-h: 44px; }
}
@media (max-width: 430px) {
  .site-header .header__actions > .lang-switch { display: none; }
}
@media (max-width: 380px) {
  :root { --logo-h: 40px; }
  .header__inner { gap: 12px; }
  .header__actions { gap: 8px; }
  .cart-btn { padding: 0 10px; gap: 7px; }
  /* The drawer is 88% of the screen here: logo, name and close button still in one row. */
  .logo--drawer { --logo-h: 38px; }
  .logo--drawer .logo__name { font-size: 1rem; }
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
  z-index: 90;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(340px, 88vw);
  background: #fff;
  z-index: 91;
  transform: translateX(102%);
  transition: transform var(--t);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-3);
}
.drawer.is-open { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.drawer__body { padding: 14px 12px; overflow-y: auto; flex: 1; }

.drawer__search { padding: 0 6px 12px; }
.drawer__search input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  font-size: .9rem;
}
.drawer__search input:focus { outline: none; border-color: var(--brand); }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}
.drawer__link:hover { background: var(--bg-soft); color: var(--ink); }
.drawer__link.is-active { background: var(--brand-50); color: var(--brand-700); }
.drawer__link .pill {
  background: var(--brand);
  color: #fff;
  font-size: .7rem;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-weight: 800;
}

.drawer__divider { height: 1px; background: var(--line); margin: 12px 10px; }

.drawer__foot { padding: 16px 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */

.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-500) 100%);
  color: #fff;
  padding: clamp(34px, 4vw, 62px) 0;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -80px; top: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 31, .38), transparent 68%);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: 8px; }
.page-hero p { color: var(--on-dark-muted); max-width: 620px; margin: 0; }

/* ---- Auto Cart and checkout (cart.html 2026-11-04; checkout-address.html and
   checkout-payment.html 2026-11-04) -------------------------------------------
   A compact red card instead of the tall full-width band, and no breadcrumb:
   the logo red #D90024 easing into a slightly deeper red, a thin light-pink
   edge, small corners, lined up with the page content below. White text
   reads at about 5.3:1 on it. Every other page keeps the shared .page-hero. */
.page-hero--cart,
.page-hero--checkout {
  background: none;
  padding: 18px 0 0;
  overflow: visible;
}
/* Checkout steps sit on the soft grey section: the card's strip matches it. */
.page-hero--checkout { background: var(--bg-soft); }
.page-hero--cart::after,
.page-hero--checkout::after { content: none; }
.page-hero--cart .page-hero__inner,
.page-hero--checkout .page-hero__inner {
  width: calc(100% - 2 * var(--container-pad));
  max-width: calc(var(--container) - 2 * var(--container-pad));
  padding: 18px 26px 17px;
  border: 1px solid #ffb8c6;
  border-radius: var(--r);
  background: linear-gradient(110deg, #D90024 0%, #D90024 55%, #b5001e 100%);
  box-shadow: 0 8px 22px rgba(217, 0, 36, .16);
}
.page-hero--cart h1,
.page-hero--checkout h1 {
  margin-bottom: 4px;
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem);
  line-height: 1.15;
}
.page-hero--cart p,
.page-hero--checkout p {
  max-width: none;
  color: rgba(255, 255, 255, .94);
  font-size: .95rem;
  line-height: 1.5;
}
/* The page starts right under the card, not a full section's gap below it. */
.page-hero--cart + .section,
.page-hero--checkout + .section { padding-top: 24px; }

@media (max-width: 768px) {
  .page-hero--cart,
  .page-hero--checkout { padding-top: 14px; }
  .page-hero--cart .page-hero__inner,
  .page-hero--checkout .page-hero__inner { padding: 15px 18px 14px; }
  .page-hero--cart + .section,
  .page-hero--checkout + .section { padding-top: 20px; }
}
@media (max-width: 560px) {
  .page-hero--cart .page-hero__inner,
  .page-hero--checkout .page-hero__inner { padding: 13px 15px 12px; }
  /* Never more than two lines on a phone. */
  .page-hero--cart p,
  .page-hero--checkout p {
    font-size: .82rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .page-hero--cart + .section,
  .page-hero--checkout + .section { padding-top: 16px; }
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: #a6a6a6;
  margin-bottom: 14px;
}
.breadcrumb a { color: var(--on-dark); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: .5; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li[aria-current] { color: #fff; }

.breadcrumb--light { color: var(--muted); margin-bottom: 18px; }
.breadcrumb--light a { color: var(--muted); }
.breadcrumb--light li[aria-current] { color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--navy);
  color: var(--on-dark-muted);
  padding-top: 60px;
  margin-top: auto;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 44px;
}

.footer__about { margin: 18px 0; font-size: .88rem; line-height: 1.75; max-width: 340px; }

.footer h4 {
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer__links { display: grid; gap: 11px; }
.footer__links a { color: var(--on-dark-muted); font-size: .89rem; }
.footer__links a:hover { color: var(--brand); }

.footer__contact { display: grid; gap: 14px; font-size: .88rem; }
.footer__contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer__contact svg { flex: none; margin-top: 3px; color: var(--brand); }
.footer__contact a { color: var(--on-dark-muted); }
.footer__contact a:hover { color: #fff; }

.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  transition: background var(--t-fast), transform var(--t-fast);
}
.socials a:hover { background: var(--brand); transform: translateY(-3px); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
}
.footer__bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__bottom a { color: var(--on-dark-muted); }
.footer__bottom a:hover { color: var(--brand); }

/* "Powered by Fastdelhivery" — the developer credit, last line of the page. */
.footer__credit {
  margin: 0;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
  font-size: .8rem;
  color: #8c8c8c;
}
.footer__credit a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 90, 31, .6);
  text-underline-offset: 3px;
}
.footer__credit a:hover { color: var(--brand); }

@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   Floating action buttons
   ========================================================================== */

.fab-stack {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--sh-3);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.fab:hover { transform: scale(1.08); color: #fff; }
.fab--whatsapp { background: #25d366; }
.fab--top { background: var(--navy); width: 44px; height: 44px; opacity: 0; visibility: hidden; }
.fab--top.is-visible { opacity: 1; visibility: visible; }

.fab::after {
  content: attr(data-label);
  position: absolute;
  right: 66px;
  background: var(--navy);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: var(--r-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.fab:hover::after { opacity: 1; transform: none; }
.fab { position: relative; }

@media (max-width: 860px) {
  .fab-stack { right: 14px; bottom: 16px; gap: 10px; }
  .fab { width: 50px; height: 50px; }
  .fab::after { display: none; }
  body.has-mobile-bar .fab-stack { bottom: 84px; }
}

/* ==========================================================================
   Mobile sticky action bar (product details / cart)
   ========================================================================== */

.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 58;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .09);
}
.mobile-bar .btn { flex: 1; }

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

/* ==========================================================================
   Page frame
   ========================================================================== */

.page { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }