/* layout.css */

/* ─── Page wrapper ──────────────────────────────────────────── */

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

.page-wrapper main {
  flex: 1;
  min-width: 0;
}

/* ─── Container ─────────────────────────────────────────────── */

.container {
  width:     100%;
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--container-gutter);
}

/* ─── Site frame ────────────────────────────────────────────── */

/* Shared chrome/Home geometry: [ G ][ chrome | C1 | C2 | C3 ][ G ]
   Repeated on Header, Hero, New Arrivals, and Footer inners.
   Shop pages keep .container; they do not use this class on main. */
.site-frame {
  display:               grid;
  grid-template-columns: var(--home-columns);
  column-gap:            var(--home-gap);
  width:                 100%;
  padding-inline:        var(--edge-gutter);
}

/* ─── Sections ──────────────────────────────────────────────── */

.section {
  padding-top:    var(--space-16);
  padding-bottom: var(--space-16);
}

/* ─── Header ────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top:      0;
  z-index:  var(--z-header);
  height:   var(--header-height);
}

.site-header__inner {
  align-items: center;
  height:      100%;
}

/* Unwrap the start cluster so menu and logo stay on the Home grid.
   Actions stay a real cluster so Search and Cart sit together on the
   right, instead of occupying two separate 1fr columns. */
.site-header__start {
  display: contents;
}

.site-header__menu-btn {
  grid-column: 1;
}

.site-header__logo {
  grid-column:  2;
  justify-self: start;
  min-width:    0;
}

.site-header__actions {
  display:      flex;
  align-items:  center;
  grid-column:  4;
  justify-self: end;
  gap:          0;
}

/* ─── Nav drawer ────────────────────────────────────────────── */

.site-nav {
  position: fixed;
  inset:    0;
  z-index:  var(--z-modal);
  pointer-events: none;
}

.site-nav--open {
  pointer-events: auto;
}

.site-nav__backdrop {
  position:         absolute;
  inset:            0;
  background-color: var(--color-overlay);
  opacity:          0;
  transition:       opacity 250ms ease-out;
}

.site-nav--open .site-nav__backdrop {
  opacity: 1;
}

/* The panel is a full navigation surface, not a shrink-wrapped card:
   it spans the full viewport height so it reads as a dedicated space
   the user has stepped into (mobile: literally full-screen; desktop:
   a tall panel), not a floating box that stops wherever today's Level
   0 content happens to end. Content stays top-anchored via the column
   flex layout below — any leftover height is just quiet air, not
   filler, and will fill in naturally as Level 1 / About grow.

   height uses 100vh with a 100dvh upgrade for mobile browsers that
   support it, so the surface tracks the real visible viewport instead
   of being cropped/oversized under a collapsing address bar.

   The panel's top/left edges are flush with the viewport corner (the
   drawer's hinge); bottom is now flush too, so only the right edge is
   ever "free" and needs a visible boundary on desktop, where the
   panel doesn't span the full width — deliberately not paired with a
   shadow, since border + shadow together read heavier than this
   composition needs. */
.site-nav__panel {
  position:         absolute;
  top:              0;
  left:             0;
  height:           100vh;
  height:           100dvh;
  width:            min(380px, 92vw);
  background-color: var(--color-bg);
  border-right:     var(--border-width) solid var(--color-border);
  padding:          32px;
  display:          flex;
  flex-direction:   column;
  gap:              24px;
  transform:        translateX(-100%);
  transition:       transform 250ms ease-out;
  overflow-x:       hidden;
  overflow-y:       auto;
  border-radius:    0;
}

.site-nav--open .site-nav__panel {
  transform: translateX(0);
}

.site-nav__panel:focus,
.site-nav__panel:focus-visible {
  outline: none;
}

/* Brand row: shared .site-wordmark + close, separated from the
   categories below by a thin rule — reads as the drawer's own header
   rather than a floating close button. */
.site-nav__panel-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-bottom:  20px;
  border-bottom:   var(--border-width) solid var(--color-border);
}

/* Wraps the tabs row + active tab panel. Keeps its natural height
   instead of stretching to fill the panel, and fades/rises in
   together with drawer open. */
.site-nav__body {
  display:        flex;
  flex-direction: column;
  gap:             28px;
  opacity:         0;
  transform:       translateY(6px);
  transition:      opacity 250ms ease-out, transform 250ms ease-out;
}

.site-nav--open .site-nav__body {
  opacity:   1;
  transform: translateY(0);
}

/* Stacks Level 0 and Level 1 in one cell. Clips Level 1 while it sits
   off-screen at translateX(100%) so it cannot spill horizontally.
   `overflow: clip` (with `hidden` fallback) avoids a scroll container. */
.site-nav__levels {
  position: relative;
  width:    100%;
  overflow: hidden;
  overflow: clip;
}

/* Not a carousel: both levels occupy the same grid cell so Level 0
   stays put and Level 1 slides over it. The --categories class only
   drives Level 1's transform, not a track translateX. */
.site-nav__levels-track {
  display:               grid;
  grid-template-columns: minmax(0, 1fr);
  width:                 100%;
}

.site-nav__level {
  grid-area:        1 / 1;
  min-width:        0;
  display:          flex;
  flex-direction:   column;
  gap:              28px;
}

/* Opaque sheet over Level 0. Starts off-canvas to the right; the
   --categories class on the track brings it to translateX(0). */
.site-nav__level[data-nav-level="categories"] {
  z-index:          1;
  background-color: var(--color-bg);
  transform:        translateX(100%);
  transition:       transform 250ms ease-out;
}

.site-nav__levels-track--categories .site-nav__level[data-nav-level="categories"] {
  transform: translateX(0);
}

/* The inactive level is hidden with `visibility`, never `display`, so
   both remain in the grid cell (height/stacking stay stable) while
   the hidden one leaves hit-testing, tab order and the a11y tree. */
.site-nav__level--inactive {
  visibility: hidden;
}

/* Relative anchor for the shared underline indicator, which is
   absolutely positioned and slides between tabs rather than being
   redrawn per tab. */
.site-nav__tabs {
  position: relative;
  display:  flex;
  gap:      32px;
}

.site-nav__tab-indicator {
  position:         absolute;
  left:             0;
  bottom:           0;
  width:            0;
  height:           1px;
  transition:       transform 250ms ease-out, width 250ms ease-out;
}

.site-nav__actions {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

body.nav-drawer-open,
body.cart-drawer-open,
body.search-overlay-open {
  overflow: hidden;
}

body.cart-drawer-open .site-header,
body.cart-drawer-open #site-header {
  z-index: 0;
}

/* ─── Cart drawer ───────────────────────────────────────────── */

.cart-drawer {
  position:       fixed;
  inset:          0;
  z-index:        1000;
  pointer-events: none;
  isolation:      isolate;
}

.cart-drawer--open {
  pointer-events: auto;
}

.cart-drawer__backdrop {
  position:              absolute;
  inset:                 0;
  background-color:      var(--color-overlay);
  backdrop-filter:       blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity:               0;
  transition:            opacity 540ms cubic-bezier(0.33, 0, 0.2, 1);
  touch-action:          none;
}

.cart-drawer--open .cart-drawer__backdrop {
  opacity: 1;
}

.cart-drawer__panel {
  position:         absolute;
  top:              0;
  right:            0;
  display:          flex;
  flex-direction:   column;
  width:            min(36rem, 92vw);
  max-width:        36rem;
  min-width:        0;
  height:           100vh;
  height:           100dvh;
  background-color: var(--color-bg-alt);
  border-left:      var(--border-width) solid var(--color-border);
  transform:        translateX(100%);
  transition:       transform 540ms cubic-bezier(0.33, 0, 0.2, 1);
  overflow:         hidden;
}

.cart-drawer--open .cart-drawer__panel {
  transform: translateX(0);
}

.cart-drawer__panel:focus,
.cart-drawer__panel:focus-visible {
  outline: none;
}

.cart-drawer__header,
.cart-drawer__footer {
  flex:  0 0 auto;
  width: 100%;
}

.cart-drawer__body {
  display:                    flex;
  flex-direction:             column;
  flex:                       1 1 auto;
  min-height:                 0;
  overflow-x:                 hidden;
  overflow-y:                 auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior:        contain;
}

.cart-drawer--empty .cart-drawer__body {
  overflow:        hidden;
  justify-content: center;
  align-items:     center;
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__backdrop,
  .cart-drawer__panel {
    transition: none;
  }
}

@media (max-width: 768px) {
  .site-nav__panel {
    width:        100%;
    max-width:    none;
    border-right: none;
    padding:      16px;
    gap:          24px;
  }

  .site-nav__actions,
  .site-nav__category-list {
    gap: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__backdrop,
  .site-nav__panel,
  .site-nav__body,
  .site-nav__tab-indicator,
  .site-nav__levels-track,
  .site-nav__level[data-nav-level="categories"] {
    transition: none;
  }
}

/* ─── Search overlay ────────────────────────────────────────── */

/* Search is a mode, not a card: the layer starts beneath the Header,
   a full-width white bar holds the field, and the page recedes
   through blur. Same z-index tier as the Cart drawer so the two
   stay mutually exclusive rather than stacking. */
.search-overlay {
  position:       fixed;
  top:            var(--header-height);
  right:          0;
  bottom:         0;
  left:           0;
  z-index:        1000;
  pointer-events: none;
  isolation:      isolate;
}

.search-overlay--open {
  pointer-events: auto;
}

.search-overlay__backdrop {
  position:                absolute;
  inset:                   0;
  background-color:        rgba(26, 25, 23, 0.22);
  backdrop-filter:         blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity:                 0;
  transition:              opacity 280ms cubic-bezier(0.33, 0, 0.2, 1);
  touch-action:            none;
}

.search-overlay--open .search-overlay__backdrop {
  opacity: 1;
}

body.search-overlay-open .site-header {
  border-bottom-color: transparent;
}

.search-overlay__bar {
  position:         relative;
  z-index:          1;
  background-color: var(--color-bg-alt);
  transform:        translateY(-6px);
  opacity:          0;
  transition:       transform 280ms cubic-bezier(0.33, 0, 0.2, 1),
                    opacity 280ms cubic-bezier(0.33, 0, 0.2, 1);
}

.search-overlay--open .search-overlay__bar {
  transform: translateY(0);
  opacity:   1;
}

.search-overlay__bar:focus,
.search-overlay__bar:focus-visible {
  outline: none;
}

.search-overlay__form {
  align-items:   center;
  justify-items: end;
  padding-block: var(--space-5);
}

.search-overlay__field {
  grid-column:   4;
  justify-self:  end;
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  width:         min(20rem, 100%);
  min-width:     0;
  border-bottom: 1px solid var(--color-text);
}

.search-overlay__label {
  position: absolute;
  width:    1px;
  height:   1px;
  overflow: hidden;
  opacity:  0;
}

.search-overlay__input {
  flex:               1 1 auto;
  min-width:          0;
  border:             none;
  border-radius:      0;
  background:         none;
  appearance:         none;
  -webkit-appearance: none;
  font:               inherit;
  font-size:          var(--font-size-sm);
  letter-spacing:     0;
  line-height:        var(--line-height-snug);
  color:              var(--color-text);
  padding:            var(--space-2) 0;
}

.search-overlay__input::placeholder {
  color: var(--color-text-disabled);
}

.search-overlay__input:focus,
.search-overlay__input:focus-visible {
  outline: none;
}

.search-overlay__input::-webkit-search-cancel-button {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .search-overlay__backdrop,
  .search-overlay__bar {
    transition: none;
  }
}

@media (max-width: 768px) {
  .search-overlay__form {
    justify-items: stretch;
    padding-block: var(--space-4);
  }

  .search-overlay__field {
    grid-column: 1 / -1;
    width:       100%;
    max-width:   none;
  }

  .search-overlay__input {
    font-size: var(--font-size-base);
  }
}

/* ─── Footer ────────────────────────────────────────────────── */

/* Same C1/C2/C3 tracks as Header and New Arrivals. */
.site-footer__inner {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items:     start;
  padding-top:     var(--space-12);
  padding-bottom:  var(--space-12);
}

.site-footer__column--brand {
  grid-column: 1;
}

.site-footer__column--help {
  grid-column: 2;
}

.site-footer__column--aside {
  grid-column: 3;
}

/* ─── Product grid ──────────────────────────────────────────── */

.product-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap:            var(--space-8);
  row-gap:               var(--space-16);
}

@media (min-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─── Product page ──────────────────────────────────────────── */

.product-layout {
  display:               grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap:                   var(--space-16);
  align-items:           start;
}

.product-details {
  position: sticky;
  top:      var(--pdp-sticky-top, calc(var(--header-height) + var(--space-8)));
  min-width: 0;
}

/* ─── Responsive ─────────────────────────────────────────────── */

/* Tablet: ≤ 1024px */
@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap:                   var(--space-10);
  }
}

/* Mobile: ≤ 768px */
@media (max-width: 768px) {
  :root {
    --container-gutter: var(--space-4);
    --header-height:    56px;
  }

  .section {
    padding-top:    var(--space-10);
    padding-bottom: var(--space-10);
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap:            var(--space-6);
    row-gap:               var(--space-12);
  }

  .product-layout {
    grid-template-columns: 1fr;
    gap:                   var(--space-8);
  }

  .product-details {
    position: static;
  }

  .site-frame {
    grid-template-columns: minmax(var(--space-10), auto) minmax(0, 1fr);
  }

  /* Keep hamburger + logo + (search + cart) on one row.
     Tighter than --home-gap so the wordmark sits next to the menu
     instead of starting a full content-column away. */
  .site-header__inner {
    grid-template-columns: minmax(var(--space-10), auto) minmax(0, 1fr) auto;
    column-gap:            var(--space-2);
  }

  .site-header__actions {
    grid-column: 3;
  }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap:            var(--space-6);
    padding-inline:        var(--space-4);
    padding-top:           var(--space-8);
    padding-bottom:        var(--space-10);
  }

  .site-footer__column--brand {
    grid-column: 1 / -1;
  }

  .site-footer__column--help {
    grid-column: 1;
  }

  .site-footer__column--aside {
    grid-column: 2;
  }

  .site-footer__column--help,
  .site-footer__column--aside {
    margin-top: var(--space-8);
  }
}

/* Small mobile: ≤ 480px — keep 2 columns (same idea as Home). */
@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}