/* ===========================================================================
   Mercado — header, search, drawer.

   The header is a floating bar: a rounded, frosted strip that sits a few
   pixels below the top edge, with the brand mark on the reading edge, the
   categories in the middle and the actions opposite. It firms up once the
   page scrolls and steps out of the way while scrolling down.
   =========================================================================== */

/* The outer element only positions the bar; the space around the bar lets
   clicks through to the page. header.js publishes this element's height as
   --header-h, which pages use to clear it. */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  padding-block-start: var(--s3);
  pointer-events: none;
  transition: transform var(--d) var(--ease-out);
}

.header.is-hidden { transform: translateY(calc(-100% - var(--s3))); }

/* Signed-in staff see the WordPress toolbar; keep the bar below it instead of
   under it. Below 601px the toolbar scrolls away with the page, so the header
   stays at the top there. */
@media (min-width: 601px) {
  .admin-bar .header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
}

.header__bar {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  min-block-size: 64px;
  padding-inline: var(--s4) var(--s2);
  border: 1px solid rgb(17 17 17 / 0.06);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
          backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 6px 24px rgb(17 17 17 / 0.05);
  transition: background-color var(--d) var(--ease), box-shadow var(--d) var(--ease);
}

/* Scrolled, or a page without a hero: the bar reads as solid. */
.header.is-solid .header__bar,
body:not(.has-hero) .header__bar {
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 10px 30px rgb(17 17 17 / 0.08);
}

/* Over the dark hero (header.js sets .is-on-dark): dark glass, light ink,
   the wordmark reversed out. The orange mark keeps its colours. */
.header.is-on-dark .header__bar {
  border-color: rgb(255 255 255 / 0.1);
  background: rgb(28 28 30 / 0.6);
  box-shadow: none;
}

.header.is-on-dark .logo__word { filter: brightness(0) invert(1); }
.header.is-on-dark .nav__link { color: #D2D2D7; }
.header.is-on-dark .nav__link:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.header.is-on-dark .nav__item.is-current .nav__link { color: var(--brand); }
.header.is-on-dark .iconbtn { color: #F5F5F7; }
.header.is-on-dark .iconbtn:hover { background: rgb(255 255 255 / 0.1); }
.header.is-on-dark .iconbtn--cart { background: #F5F5F7; color: #0A0A0B; }
.header.is-on-dark .iconbtn--cart:hover { background: var(--brand); color: var(--on-brand); }
.header.is-on-dark .cart-count { box-shadow: 0 0 0 2px #1C1C1E; }
.header.is-on-dark :focus-visible { outline-color: #F5F5F7; }

/* ---- logo ---------------------------------------------------------------- */
.logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.logo img { inline-size: auto; object-fit: contain; }

.logo__mark {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  transition: transform var(--d) var(--ease-out);
}

.logo:hover .logo__mark { transform: rotate(-8deg); }

.logo__word { block-size: clamp(15px, 1.35vw, 19px); transition: filter var(--d) var(--ease); }

.logo__text { font-weight: 700; font-size: var(--t-h3); letter-spacing: var(--track-latin); }

/* ---- nav ----------------------------------------------------------------- */
.nav { display: none; justify-self: center; min-inline-size: 0; }

@media (min-width: 1080px) {
  .nav { display: block; }
}

.nav__list { display: flex; align-items: center; gap: var(--s1); }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: var(--s4);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.nav__link:hover { background: var(--paper-2); color: var(--ink); }

/* The page you are on: the one place the header uses the brand colour. */
.nav__item.is-current .nav__link {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand-ink);
}

.nav__sub { display: none; }

/* ---- actions ------------------------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s1);
  justify-self: end;
}

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  color: var(--ink);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.iconbtn:hover { background: var(--paper-2); }
.iconbtn svg { inline-size: 20px; block-size: 20px; flex: 0 0 auto; }

/* The cart is the one filled control. */
.iconbtn--cart { background: var(--ink); color: var(--paper); }
.iconbtn--cart:hover { background: var(--brand); color: var(--on-brand); }

.cart-count {
  position: absolute;
  inset-block-start: -3px;
  inset-inline-end: -3px;
  min-inline-size: 19px;
  block-size: 19px;
  padding-inline: 5px;
  border-radius: var(--r-pill);
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--paper);
  color: var(--on-brand);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--d) var(--ease), transform var(--d) var(--ease-out);
}

.cart-count.is-filled { opacity: 1; transform: none; }

.burger { display: inline-flex; }
@media (min-width: 1080px) { .burger { display: none; } }

.burger__lines { position: relative; inline-size: 18px; block-size: 1.5px; border-radius: 2px; background: currentColor; }

.burger__lines::before, .burger__lines::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--d) var(--ease-out);
}

.burger__lines::before { inset-block-start: -6px; }
.burger__lines::after { inset-block-start: 6px; }

.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-6px) rotate(-45deg); }

/* ---- small screens ---------------------------------------------------------
   These blocks must stay BELOW the rules they override: a media query adds no
   specificity, so order is what settles it.

   The wordmark is a wide lockup (about 11.8:1). With the mark and three 40px
   controls it no longer fits a phone bar, so it narrows, the account link
   moves into the drawer, and below 360px the round mark carries the brand
   alone. Measured: at 375px the bar is 335px and holds mark + 12px word +
   controls with 4px to spare; 360px fits only with the 11px step. */
@media (max-width: 560px) {
  .header { padding-block-start: var(--s2); }
  .header__bar { gap: var(--s2); min-block-size: 58px; padding-inline: var(--s3) var(--s1); }
  .logo { gap: 6px; }
  .logo__mark { inline-size: 32px; block-size: 32px; }
  .logo__word { block-size: 12px; }
  .header__actions .iconbtn { inline-size: 40px; block-size: 40px; }
  .header__actions .iconbtn--account { display: none; }
}

@media (max-width: 380px) {
  .logo__word { block-size: 11px; }
}

@media (max-width: 359px) {
  .header .logo__word { display: none; }
}

/* ---- full-screen search --------------------------------------------------
   The search is the one interaction allowed to take the whole viewport.

   The panel is .search-overlay, never .search: WordPress adds class="search"
   to <body> on every search results page, and this rule (fixed, hidden) then
   applied to the body — the results page, header included, rendered blank. */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--paper);
  display: grid;
  align-content: start;
  padding: calc(var(--header-h) + var(--s8)) var(--gutter) var(--s7);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d) var(--ease), visibility var(--d);
}

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

.search__close {
  position: absolute;
  inset-block-start: var(--s5);
  inset-inline-end: var(--gutter);
  background: var(--paper-2);
}

.search__inner { width: 100%; max-width: 960px; margin-inline: auto; }

.search__prompt {
  font-size: var(--t-h2);
  font-weight: 700;
  color: var(--ink);
  margin-block-end: var(--s5);
  /* Slides up as the panel opens — the only motion in the overlay. */
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--d-slow) var(--ease-out), opacity var(--d-slow) var(--ease);
}

.search-overlay.is-open .search__prompt { transform: none; opacity: 1; }

.search__form {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-block-size: 64px;
  padding-inline: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper-2);
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}

.search__form:focus-within { border-color: var(--ink); background: var(--paper); }
.search__form svg { color: var(--ink-3); }

.search__form input {
  flex: 1;
  min-inline-size: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: var(--t-h3);
  font-weight: 600;
}

.search__form input::placeholder { color: var(--ink-3); }

.search__hint {
  margin-block-start: var(--s4);
  padding-inline: var(--s5);
  font-size: var(--t-sm);
  color: var(--ink-3);
  min-block-size: 1.5em;
}

.search__results {
  margin-block-start: var(--s5);
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  max-block-size: 52vh;
  overflow-y: auto;
}

.result__media {
  aspect-ratio: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-block-end: var(--s3);
}

.result__media img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 10%; }
.result__name { font-size: var(--t-sm); line-height: 1.5; }
.result__price { font-size: var(--t-sm); font-weight: 700; }

/* ---- mobile drawer -------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgb(17 17 17 / 0.35);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--d) var(--ease);
}

.drawer.is-open .drawer__scrim { opacity: 1; }

/* The panel comes in from the inline end; its inner edge is rounded. */
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  inline-size: min(400px, 88vw);
  padding: var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  border-start-start-radius: var(--r-card);
  border-end-start-radius: var(--r-card);
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--d-slow) var(--ease-out);
}

[dir="rtl"] .drawer__panel { transform: translateX(-100%); }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--s6);
}

.drawer__head .iconbtn { background: var(--paper-2); }

.drawer .nav__list { flex-direction: column; align-items: stretch; gap: var(--s1); }

.drawer .nav__link {
  justify-content: space-between;
  min-block-size: 54px;
  padding-inline: var(--s4);
  border-radius: var(--r);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink);
}

.drawer__foot {
  margin-block-start: auto;
  padding-block-start: var(--s6);
  display: grid;
  gap: var(--s3);
}

.drawer__foot .btn .icon { inline-size: 18px; block-size: 18px; }