/*
 * Aperina navigation — mobile first.
 * Phone/tablet (<1024px): compact header with search bar, bottom navigation, category browser and
 * search as full-screen sheets, product buy bar. Desktop (≥1024px): two-row header, live search,
 * mega menus per product line.
 */

:root { --header-h: 60px; --bottom-nav-h: 64px; }

body { padding-block-end: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--cart-bar-h, 0px)); }

/* Visually hidden text must not widen the page: in RTL an unanchored absolute element (e.g. WooCommerce's
   cart live region) lands far outside the screen and stretches the layout viewport, which also widens every sheet. */
.screen-reader-text, .sr { inset-block-start: 0; inset-inline-start: 0; }
.widget_shopping_cart_live_region,
.a11y-speak-region, #a11y-speak-intro-text {
  position: fixed !important; inset-block-start: 0 !important; inset-inline-start: 0 !important; inset-inline-end: auto !important;
}

/* =========================================================
   Header
   ========================================================= */
.shop-header {
  position: sticky; top: 0; z-index: var(--z-drawer);
  background: color-mix(in oklab, var(--bg) 94%, transparent); backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--divider);
}
.admin-bar .shop-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .shop-header { top: 0; } }

.shop-header__bar { display: flex; align-items: center; gap: var(--space-3); min-height: var(--header-h); }
/* Phones and tablets: no separate logo — it sits inside the search bar («جست‌وجو در [wordmark]»). */
.shop-header .brand { flex: none; display: none; }
.shop-header .brand img { height: 34px; width: auto; }

.search-trigger {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: 48px;
  padding-inline: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-field);
  background: var(--bg-raised); color: var(--text-muted); font: inherit; font-size: var(--text-body); text-align: start; cursor: text;
  -webkit-tap-highlight-color: transparent;
}
.search-trigger svg { flex: none; width: 20px; height: 20px; color: var(--text); }
.search-trigger__text { white-space: nowrap; }
/* The wordmark file carries its clear space; negative margins keep the letters at text size without growing the bar. */
.search-trigger__logo { display: flex; align-items: center; }
.search-trigger__logo img { width: auto; height: 48px; margin-block: -14px; margin-inline-start: -4px; }
.search-trigger:active { background: var(--bg-sunken); }
.search-trigger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.search-inline, .shop-header__actions, .mega-nav { display: none; }

.header-action {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-3);
  border-radius: var(--radius-cta); color: var(--text); font-size: var(--text-label); font-weight: 500; text-decoration: none;
}
.header-action svg { width: 20px; height: 20px; }
.header-action:hover { background: color-mix(in oklab, var(--text) 7%, transparent); }

/* =========================================================
   Bottom navigation (phone and tablet)
   ========================================================= */
.bottom-nav {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: color-mix(in oklab, var(--bg-raised) 96%, transparent); backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--divider);
}
.bottom-nav__item {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: var(--bottom-nav-h);
  padding: 0; border: 0; background: none; color: var(--text-muted);
  font: inherit; font-size: var(--text-micro); line-height: 1.3; font-weight: 500; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav__item svg { width: 24px; height: 24px; transition: scale var(--dur-fast) var(--ease-out); }
.bottom-nav__item:active svg { scale: 0.88; }
.bottom-nav__item[aria-current="page"], .bottom-nav__item[aria-expanded="true"] { color: var(--text); }
.bottom-nav__item[aria-current="page"]::before {
  content: ""; position: absolute; inset-block-start: 0; inline-size: 28px; block-size: 2px;
  border-radius: 0 0 2px 2px; background: var(--primary);
}
.bottom-nav__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; }
.bottom-nav__badge {
  position: absolute; inset-block-start: 8px; inset-inline-end: calc(50% - 24px);
  min-inline-size: 18px; block-size: 18px; padding-inline: 5px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-size: 11px; line-height: 18px; text-align: center;
}
.bottom-nav__badge[data-count="0"] { display: none; }

/* The cart bar and product buy bar float above the bottom navigation. */
.cart-bar { inset-block-end: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-2)); inset-inline: var(--space-2); }

.buy-bar {
  position: fixed; z-index: var(--z-sticky); inset-inline: var(--space-2);
  inset-block-end: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-2));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-2); padding-inline: var(--space-4) var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--bg-raised); box-shadow: var(--shadow-3);
  animation: cart-bar-in var(--dur-slow) var(--ease-out);
}
.buy-bar__price { min-width: 0; font-weight: 600; line-height: 1.4; }
.buy-bar__price .aperina-weight__unit { display: block; font-size: var(--text-caption); }
.buy-bar__cta { flex: none; }

/* =========================================================
   Sheets (native <dialog>)
   ========================================================= */
html:has(dialog.sheet[open]) { overflow: hidden; }
.sheet {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  inline-size: 100%; max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh;
  background: var(--bg); color: var(--text);
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in var(--dur-slow) var(--ease-out); }
.sheet::backdrop { background: var(--overlay); }
@keyframes sheet-in { from { opacity: 0; translate: 0 24px; } }

.sheet__head {
  display: flex; align-items: center; gap: var(--space-1); min-height: var(--header-h);
  padding: env(safe-area-inset-top, 0px) var(--space-2) 0; border-block-end: 1px solid var(--divider);
}
.sheet__head .btn-icon { width: 44px; min-height: 44px; }
.sheet__head .btn-icon svg { width: 20px; height: 20px; }
.sheet__back svg { scale: -1 1; }
.sheet__title { flex: 1; min-width: 0; margin: 0; padding-inline: var(--space-2); font-size: var(--text-title); font-weight: 600; line-height: 1.4; }
.sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--gutter) calc(var(--space-10) + env(safe-area-inset-bottom, 0px)); }

/* ---------- Bottom sheet: a short list of choices (sorting), anchored to the bottom within thumb reach ---------- */
.sheet--bottom {
  inset: auto 0 0; block-size: auto; max-block-size: min(85dvh, 560px);
  border-start-start-radius: var(--radius-panel); border-start-end-radius: var(--radius-panel);
  background: var(--bg-raised); box-shadow: var(--shadow-3);
}
.sheet--bottom[open] { animation-name: sheet-up; }
@keyframes sheet-up { from { translate: 0 100%; } }
.sheet--bottom .sheet__head { min-height: 56px; padding: 0 var(--space-4) 0 var(--space-2); }
.sheet--bottom .sheet__title { padding-inline: 0; }
@media (min-width: 640px) {
  .sheet--bottom { inline-size: min(480px, 100%); margin-inline: auto; }
}

/* ---------- Category browser ---------- */
.cat-sheet__tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: var(--space-3) var(--gutter) 0; padding: 4px;
  border-radius: var(--radius-pill); background: var(--bg-sunken);
}
.cat-sheet__tab {
  min-height: 44px; padding-inline: var(--space-2); border: 0; border-radius: var(--radius-pill); background: none;
  color: var(--text-muted); font: inherit; font-size: var(--text-label); font-weight: 500; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.cat-sheet__tab[aria-selected="true"] { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-1); }
.cat-sheet__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-row {
  display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-height: 60px; padding-block: var(--space-2);
  border: 0; border-block-end: 1px solid var(--divider); background: none; color: var(--text);
  font: inherit; font-size: var(--text-body); line-height: 1.5; text-align: start; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cat-row:active { background: var(--bg-sunken); }
.cat-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.cat-row__img { flex: none; inline-size: 44px; block-size: 44px; border-radius: var(--radius-md); background: var(--bg-muted); object-fit: cover; }
.cat-row__name { flex: 1; min-width: 0; font-weight: 500; }
.cat-row__count { font-size: var(--text-caption); color: var(--text-muted); }
.cat-row > svg { flex: none; inline-size: 18px; block-size: 18px; color: var(--text-muted); rotate: 90deg; }
.cat-row--all { min-height: 52px; }
.cat-row--all .cat-row__name { font-weight: 600; color: var(--link); }
.cat-panel--sub:not([hidden]) { animation: panel-in var(--dur-base) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; translate: -20px 0; } }

.cat-sheet__extra { display: grid; margin-block-start: var(--space-6); }
.cat-sheet__extra a { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; color: var(--text-muted); text-decoration: none; font-size: var(--text-small); }
.cat-sheet__extra svg { width: 20px; height: 20px; }

/* ---------- Search ---------- */
.search-sheet__form {
  display: flex; align-items: center; gap: var(--space-2);
  padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--gutter) var(--space-2); border-block-end: 1px solid var(--divider);
}
.search-sheet__field { position: relative; flex: 1; }
.search-sheet__field svg { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.search-sheet__field .input { padding-inline-start: 40px; }
.search-sheet__label { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-caption); color: var(--text-muted); }
.search-sheet__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search-sheet__chips .chip { min-height: 44px; text-decoration: none; }

.search-results { list-style: none; margin: 0; padding: 0; }
.search-hit {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: 72px; padding-block: var(--space-2); border-block-end: 1px solid var(--divider);
  color: var(--text); text-decoration: none;
}
.search-hit:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.search-hit img { width: 56px; height: 56px; object-fit: cover; background: var(--bg-muted); }
.search-hit__text { display: grid; min-width: 0; }
.search-hit__name { font-size: var(--text-small); font-weight: 500; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-hit__meta { font-size: var(--text-micro); color: var(--text-muted); }
.search-hit__price { font-size: var(--text-small); font-weight: 600; white-space: nowrap; text-align: end; }
.search-hit__price .aperina-weight__unit { display: block; font-size: var(--text-micro); font-weight: 400; }
.search-status { padding-block: var(--space-6); color: var(--text-muted); font-size: var(--text-small); }
.search-all { margin-block-start: var(--space-4); }

/* =========================================================
   Tablet: the category browser becomes a side panel
   ========================================================= */
@media (min-width: 640px) {
  .cat-sheet { inset-inline-end: auto; inline-size: min(440px, 92vw); box-shadow: var(--shadow-3); }
  .cat-sheet[open] { animation-name: side-in; }
  @keyframes side-in { from { opacity: 0; translate: 24px 0; } }
}

/* =========================================================
   Desktop (≥1024px)
   ========================================================= */
@media (min-width: 1024px) {
  :root { --header-h: 72px; }
  body { padding-block-end: 0; }
  .bottom-nav, .buy-bar, .search-trigger { display: none !important; }

  .shop-header__bar { gap: var(--space-6); }
  .shop-header .brand { display: flex; }
  .shop-header .brand img { height: 44px; }

  .search-inline { display: flex; position: relative; flex: 1; max-width: 520px; }
  .search-inline input {
    flex: 1; height: 46px; padding-inline: var(--space-4) 52px; border: 1px solid var(--border); border-radius: var(--radius-field);
    background: var(--bg-raised); color: var(--text); font: inherit; font-size: var(--text-small);
  }
  .search-inline input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 22%, transparent); }
  .search-inline__submit {
    position: absolute; inset-inline-end: 4px; top: 4px; display: grid; place-items: center; width: 38px; height: 38px;
    border: 0; border-radius: var(--radius-md); background: none; color: var(--text); cursor: pointer;
  }
  .search-inline__submit svg { width: 20px; height: 20px; }
  .search-inline__results {
    position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: var(--z-dialog);
    max-block-size: min(480px, 70vh); overflow-y: auto; padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--bg-raised); box-shadow: var(--shadow-2);
  }
  .search-inline__results:empty { display: none; }

  .shop-header__actions { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }

  .mega-nav { display: block; border-block-start: 1px solid var(--divider); }
  .mega-nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
  .mega-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); }
  .mega-nav__trigger, .mega-nav__link {
    display: inline-flex; align-items: center; gap: var(--space-1); min-height: 48px; padding-inline: var(--space-3);
    border: 0; border-block-end: 2px solid transparent; background: none; color: var(--text);
    font: inherit; font-size: var(--text-label); font-weight: 500; text-decoration: none; cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out);
  }
  .mega-nav__trigger svg { width: 16px; height: 16px; transition: rotate var(--dur-base) var(--ease-out); }
  .mega-nav__trigger:hover, .mega-nav__link:hover { border-block-end-color: var(--border-strong); }
  .mega-nav__trigger[aria-expanded="true"] { border-block-end-color: var(--primary); }
  .mega-nav__trigger[aria-expanded="true"] svg { rotate: 180deg; }
  .mega-nav__trigger:focus-visible, .mega-nav__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
  .mega-nav__note { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); color: var(--text-muted); }
  .mega-nav__note svg { width: 18px; height: 18px; scale: -1 1; }
  .mega-nav__note b { color: var(--text); }

  .mega-panel {
    position: absolute; inset-inline: 0; top: 100%;
    max-block-size: calc(100dvh - 160px); overflow-y: auto;
    border-block: 1px solid var(--divider); background: var(--bg); box-shadow: var(--shadow-2);
  }
  .mega-panel:not([hidden]) { animation: mega-in var(--dur-base) var(--ease-out); }
  @keyframes mega-in { from { opacity: 0; translate: 0 -6px; } }
  .mega-panel__inner { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-10); padding-block: var(--space-8) var(--space-10); }
  .mega-panel__groups { columns: 4 170px; column-gap: var(--space-8); }
  .mega-group { break-inside: avoid; margin-block-end: var(--space-5); }
  .mega-group__title {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
    padding-block: var(--space-1) var(--space-2); margin-block-end: var(--space-1); border-block-end: 1px solid var(--divider);
    color: var(--text); font-size: var(--text-small); font-weight: 600; text-decoration: none;
  }
  .mega-group__title:hover span:first-child { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
  .mega-group__count { font-size: var(--text-micro); font-weight: 400; color: var(--text-muted); }
  .mega-group__list { list-style: none; margin: 0; padding: 0; }
  .mega-group__list a { display: block; padding-block: 5px; color: var(--text-muted); font-size: var(--text-small); text-decoration: none; }
  .mega-group__list a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
  .mega-group a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

  .mega-feature {
    display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius-cta); background: var(--bg-raised); color: var(--text); text-decoration: none;
  }
  .mega-feature.tone-evening { border-color: var(--ap-mocha); }
  .mega-feature__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-block-end: var(--space-2); background: var(--bg-muted); }
  .mega-feature__title { font-size: var(--text-title); font-weight: 600; line-height: 1.5; }
  .mega-feature__meta { font-size: var(--text-caption); color: var(--text-muted); }
  .mega-feature__cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); font-size: var(--text-label); font-weight: 500; }
  .mega-feature__cta svg { width: 16px; height: 16px; transition: translate var(--dur-base) var(--ease-out); }
  .mega-feature:hover .mega-feature__cta svg { translate: -4px 0; }
  .mega-feature:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
}

/* =========================================================
   Touch screens: no hover-only effects
   ========================================================= */
@media (hover: none) {
  .door:hover { box-shadow: none; border-color: var(--border); }
  .door--party:hover { border-color: var(--ap-mocha); }
  .door:hover .door__media img, .product-card:hover .product-card__media img, .cat-tile:hover .cat-tile__media img { scale: 1; }
  .door:hover .door__foot svg { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[open], .cat-panel--sub:not([hidden]), .mega-panel:not([hidden]), .buy-bar { animation: none; }
}