/*
 * v1.9.17 — Public mobile parity layer
 * Desktop is the source of truth. These rules only resize/reflow the same
 * components; they do not introduce a second mobile visual system.
 */

@media (max-width: 90rem) {
  :root {
    --container-gutter: clamp(1.25rem, 3vw, 3rem);
  }
}

@media (max-width: 64rem) {
  :root {
    --container-gutter: clamp(1.1rem, 3vw, 2rem);
    --header-layout-gap: 0.85rem;
    --header-ornament-width: clamp(6.5rem, 11vw, 9rem);
    --header-nav-gap: 0.1rem;
    --header-nav-link-padding: 0.7rem;
  }

  .site-header:not(.admin-site-header) .header-inner {
    column-gap: var(--header-layout-gap);
  }

  .product-dialog,
  .product-dialog__panel {
    max-height: calc(100dvh - 1.5rem);
  }
}

/* 768px and below: same public header, compact geometry + one mobile menu. */
@media (max-width: 48rem) {
  :root {
    --container-gutter: 1rem;
    --header-height: 4.25rem;
    --header-layout-gap: 0.6rem;
    --header-brand-gap: 0.45rem;
    --header-logo-size: 3rem;
    --header-brand-font-size: calc(var(--header-brand-base-size) * 0.80);
    --header-brand-letter-spacing: 0.055em;
    --header-brand-name-max: clamp(7.8rem, 34vw, 11.5rem);
    --header-ornament-width: clamp(3.4rem, 11vw, 4.8rem);
    --header-ornament-height: 1.9rem;
    --header-nav-link-padding: 0.85rem;
  }

  .site-header:not(.admin-site-header) .header-inner {
    position: relative;
    min-height: var(--header-height);
    align-items: center;
    column-gap: var(--header-layout-gap);
    padding-block: 0.35rem;
  }

  .site-header:not(.admin-site-header) .brand {
    min-width: 0;
    max-width: 100%;
  }

  /* The center ornament remains the SAME component as desktop.
     Its reserved grid column prevents brand/menu overlap. Visibility is
     controlled only by the admin brand setting. */
  .site-header:not(.admin-site-header) .header-leaf-ornament {
    grid-column: 2;
  }

  .site-header:not(.admin-site-header) .menu-toggle:not([hidden]) {
    display: inline-flex;
    z-index: calc(var(--z-menu) + 2);
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Progressive fallback if JS has not enhanced navigation yet. */
  .site-header:not(.admin-site-header):not(.nav-enhanced) .primary-nav {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    justify-self: stretch;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .site-header:not(.admin-site-header):not(.nav-enhanced) .primary-nav::-webkit-scrollbar {
    display: none;
  }

  .site-header:not(.admin-site-header).nav-enhanced .primary-nav {
    position: absolute;
    z-index: var(--z-menu);
    top: calc(100% + 0.45rem);
    right: max(var(--container-gutter), env(safe-area-inset-right, 0px));
    left: max(var(--container-gutter), env(safe-area-inset-left, 0px));
    display: grid;
    width: auto;
    max-width: none;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, 0.995);
    box-shadow: var(--shadow-menu);
    gap: 0.15rem;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-0.4rem) scale(0.99);
    transform-origin: top right;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-normal), visibility var(--transition-normal);
  }

  .site-header:not(.admin-site-header).nav-enhanced.is-menu-open .primary-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    visibility: visible;
  }

  .site-header:not(.admin-site-header).nav-enhanced .primary-nav a {
    width: 100%;
    min-height: 2.8rem;
    justify-content: flex-start;
    padding-inline: var(--header-nav-link-padding);
    border-radius: 0.65rem;
  }

  .site-header:not(.admin-site-header).nav-enhanced .primary-nav a[aria-current="page"]::after {
    top: 0.6rem;
    right: auto;
    bottom: 0.6rem;
    left: 0.25rem;
    width: 0.125rem;
    height: auto;
  }

  .site-header:not(.admin-site-header) .header-category-inner {
    min-height: 2.9rem;
    padding-inline: 0;
  }

  .site-header:not(.admin-site-header) .header-category-nav {
    justify-content: flex-start;
    gap: 0.3rem;
    padding-inline: max(var(--container-gutter), env(safe-area-inset-left, 0px));
    scroll-padding-inline: var(--container-gutter);
  }

  .site-header:not(.admin-site-header) .header-category-nav button,
  .site-header:not(.admin-site-header) .header-category-nav a {
    min-height: 2.2rem;
    padding: 0.42rem 0.78rem;
  }

  .site-header:not(.admin-site-header) .header-subcategory-panel {
    width: min(15rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
  }

  .page-inner {
    padding-block: clamp(1.5rem, 5vw, 2.5rem);
  }

  .product-dialog {
    width: calc(100vw - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
    border-radius: 0.9rem;
  }

  .product-dialog__panel {
    max-height: calc(100dvh - 0.75rem);
  }

  .product-dialog__close {
    top: 0.5rem;
    margin: 0.5rem 0.5rem -3.25rem 0;
  }
}

@media (max-width: 26.875rem) {
  :root {
    --container-gutter: 0.85rem;
    --header-brand-gap: 0.38rem;
    --header-logo-size: 2.75rem;
    --header-brand-font-size: calc(var(--header-brand-base-size) * 0.75);
    --header-brand-letter-spacing: 0.04em;
    --header-brand-name-max: 8.9rem;
    --header-ornament-width: 3.15rem;
  }

  .site-header:not(.admin-site-header) .brand {
    max-width: 100%;
  }

  .site-header:not(.admin-site-header).nav-enhanced .primary-nav {
    right: 0.6rem;
    left: 0.6rem;
  }

  .site-header:not(.admin-site-header) .header-category-nav {
    padding-inline: 0.85rem;
  }

  .catalog__heading {
    font-size: clamp(1.45rem, 7vw, 1.8rem);
  }

  .catalog__meta {
    font-size: 0.76rem;
  }

  .product-card__title {
    min-height: 2.85rem;
    padding: 0.62rem;
    line-height: 1.28;
  }

  .product-detail__content {
    padding: 1rem;
  }
}

@media (max-width: 24.375rem) {
  :root {
    --header-brand-font-size: calc(var(--header-brand-base-size) * 0.71);
    --header-brand-name-max: 8rem;
    --header-ornament-width: 2.9rem;
    --header-menu-size: 2.55rem;
  }
}

@media (max-width: 23.4375rem) {
  :root {
    --header-brand-name-max: 7.6rem;
  }

  .site-header:not(.admin-site-header) .header-category-nav button,
  .site-header:not(.admin-site-header) .header-category-nav a {
    padding-inline: 0.62rem;
  }

  .catalog-pagination {
    gap: 0.3rem;
  }
}

@media (max-width: 20rem) {
  :root {
    --container-gutter: 0.75rem;
    --header-logo-size: 2.5rem;
    --header-brand-font-size: calc(var(--header-brand-base-size) * 0.68);
    --header-brand-name-max: 6.8rem;
    --header-ornament-width: 2.55rem;
  }

  /* Do not auto-hide the ornament at 320px. Explicit admin visibility wins. */

  .catalog__inner {
    width: 100%;
    padding-inline: 0.75rem;
  }

  .catalog-grid {
    gap: 0.45rem;
  }

  .product-card__title {
    padding: 0.55rem;
    font-size: 0.78rem;
  }

  .catalog-page-button {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding-inline: 0.45rem;
  }
}

@media (min-width: 64.001rem) and (max-width: 90rem) {
  .catalog__inner {
    max-width: min(88vw, 82rem);
  }
}

@media (min-width: 80rem) {
  :root {
    --container-width: 90rem;
  }
}

@media (min-width: 120rem) {
  :root {
    --container-width: 96rem;
  }
}

@media (max-height: 31rem) and (orientation: landscape) {
  :root {
    --header-height: 4rem;
  }

  .page-inner {
    padding-block: var(--space-4);
  }
}