/*
 * layout.css — the page shell and the responsive story.
 *
 * Two different products share one codebase:
 *
 *   PHONE (<1024px)  — reads like the iOS/Android app. Peach-washed header with
 *                      the EBAN SHOPPING lockup, feed tabs, square search bar,
 *                      2-column waterfall, fixed bottom tab bar.
 *
 *   DESKTOP (≥1024px)— reads like a storefront. Single top nav (lockup + search
 *                      + account/cart), no bottom bar, category sidebar on
 *                      listing pages, 4–6 column grids, product page splits
 *                      into gallery | buy-box.
 *
 * Mobile-first: everything below is the phone, and the ≥1024 block promotes it.
 */

/* ============================================================
   App shell
   ============================================================ */

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

/* ---- Top area (phone): the pinned app header ---- */

.apphead {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 4px var(--gutter) 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apphead__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Desktop-only nav chrome, hidden on phones. */
.topnav__links,
.topnav__actions,
.desktop-only {
  display: none;
}

/* ---- Page body ---- */

.page {
  flex: 1 1 auto;
  padding-bottom: 28px;
}

.page__pad {
  padding-inline: var(--gutter);
  max-width: var(--max-w);
  margin-inline: auto;
  width: 100%;
}

.stack-12 > * + * { margin-top: 12px; }
.stack-14 > * + * { margin-top: 14px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-20 > * + * { margin-top: 20px; }

/* ---- Simple inner page header (Cart, Orders, Wishlist, …) ---- */

.pagehead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--gutter) 10px;
  max-width: var(--max-w);
  margin-inline: auto;
  width: 100%;
}

.pagehead__back {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: var(--shadow-card);
}

.pagehead__back svg {
  width: 17px;
  height: 17px;
}

.pagehead__title {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-primary);
}

.pagehead__meta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ============================================================
   Bottom tab bar (phone only)
   iOS: icons are ALWAYS filled in both states — only the tint changes.
   Icon 20px semibold, label 9.5px semibold, 2px below. 0.5px hairline on the
   top edge, frosted background.
   ============================================================ */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--border-hair);
}

.tabbar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-top: 6px;
  position: relative;
  color: var(--text-tertiary);
  transition: color 0.16s ease;
}

.tabbar__item[aria-current='page'] {
  color: var(--brand);
}

.tabbar__item svg {
  width: 20px;
  height: 20px;
}

.tabbar__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.tabbar__badge {
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 4px;
}

/* ============================================================
   Product page
   ============================================================ */

.pdp__gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface-card);
  overflow: hidden;
}

.pdp__gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdp__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px var(--gutter) 0;
}

.pdp__thumbs::-webkit-scrollbar { display: none; }

.pdp__thumb {
  width: 58px;
  height: 58px;
  border-radius: var(--r-photo);
  overflow: hidden;
  border: 2px solid transparent;
  flex: 0 0 auto;
  background: var(--surface-soft);
}

.pdp__thumb[aria-selected='true'] {
  border-color: var(--brand);
}

.pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp__price {
  font-size: 28px;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
}

.pdp__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Sticky buy bar on phones; becomes part of the buy-box on desktop. */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: flex;
  gap: 10px;
  padding: 10px var(--gutter);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 0.5px solid var(--border-hair);
}

/* ============================================================
   Categories page — SHEIN-style rail + tile grid
   ============================================================ */

.cats {
  display: grid;
  grid-template-columns: 92px 1fr;
  min-height: 60vh;
}

.cats__rail {
  background: var(--page-bg);
  overflow-y: auto;
  /* Pinned on the phone too, not just on desktop. It used to scroll away with
     the tiles, so picking a different department meant scrolling all the way
     back up first (Adam, 2026-08-20). It parks under the sticky app header and
     stops short of the bottom tab bar, and scrolls internally if the
     department list is taller than that.
     --apphead-h is measured by categories.js; the fallback covers the frame
     before the first measurement lands. */
  position: sticky;
  top: var(--apphead-h, 68px);
  align-self: start;
  max-height: calc(
    100dvh - var(--apphead-h, 68px) - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)
  );
  overscroll-behavior: contain;
}

.cats__railitem {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 11px 4px;
  text-align: left;
  background: var(--page-bg);
  transition: background 0.15s ease;
}

.cats__railitem[aria-selected='true'] {
  background: var(--surface-card);
}

.cats__railmark {
  width: 3px;
  height: 16px;
  background: transparent;
  flex: 0 0 auto;
}

.cats__railitem[aria-selected='true'] .cats__railmark {
  background: var(--text-primary);
}

.cats__raillabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.25;
}

.cats__railitem[aria-selected='true'] .cats__raillabel {
  font-weight: 800;
  color: var(--text-primary);
}

.cats__pane {
  background: var(--surface-card);
  padding: 12px;
  min-width: 0;
}

.cats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  margin-top: 12px;
}

/* Heading above a run of category tiles ("Shows under" in the admin panel).
   18px heavy, matching the apps — it has to outrank the 11px tile captions
   without competing with the 16px pane title. */
.cats__group {
  margin: 18px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.cattile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cattile__img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--surface-soft);
}

.cattile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cattile__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.25;
}

/* ============================================================
   Forms
   ============================================================ */

.field {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14.5px;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 100, 0, 0.14);
}

.field::placeholder {
  color: var(--text-tertiary);
}

.label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

/* ============================================================
   ≥640px — phablet / small tablet: widen the waterfall
   ============================================================ */

@media (min-width: 640px) {
  .pgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .cats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .cats {
    grid-template-columns: 150px 1fr;
  }

  .cats__raillabel {
    font-size: 13px;
  }

  .cats__railitem {
    padding: 13px 10px;
  }
}

/* ============================================================
   ≥1024px — DESKTOP. The app chrome gives way to a storefront.
   ============================================================ */

@media (min-width: 1024px) {
  body {
    padding-bottom: 0; /* no bottom tab bar */
  }

  .desktop-only {
    display: revert;
  }

  .mobile-only {
    display: none !important;
  }

  /* ---- Top nav: one row — lockup · search · links · actions ---- */

  .apphead {
    padding: 0;
  }

  .apphead__inner {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    height: var(--topnav-h);
    padding-inline: var(--gutter);
  }

  .apphead__brand {
    flex: 0 0 auto;
  }

  /* The search bar stops being full-width and becomes the nav's centre. */
  .apphead__search {
    flex: 1 1 auto;
    max-width: 560px;
  }

  .topnav__links {
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .topnav__link {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    position: relative;
    padding-block: 6px;
    white-space: nowrap;
  }

  .topnav__link[aria-current='page'] {
    color: var(--brand);
  }

  .topnav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--brand);
    opacity: 0;
    transition: opacity 0.16s ease;
  }

  .topnav__link[aria-current='page']::after {
    opacity: 1;
  }

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

  .topnav__icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background 0.16s ease, color 0.16s ease;
  }

  .topnav__icon:hover {
    background: rgba(255, 100, 0, 0.09);
    color: var(--brand);
  }

  .topnav__icon svg {
    width: 20px;
    height: 20px;
  }

  .topnav__icon .badge {
    position: absolute;
    top: 4px;
    right: 4px;
  }

  /* The feed tabs move BELOW the nav into their own strip. */
  .feedtabs-strip {
    border-top: 0.5px solid rgba(255, 255, 255, 0.5);
  }

  .feedtabs {
    max-width: var(--max-w);
    margin-inline: auto;
    padding: 6px var(--gutter) 10px;
    gap: 28px;
    justify-content: flex-start;
  }

  /* ---- Grids open up ---- */

  .pgrid {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }

  .pgrid--wide {
    grid-template-columns: repeat(6, 1fr);
  }

  .pcard__title {
    font-size: 14px;
  }

  .pcard__price {
    font-size: 16px;
  }

  /* Suggestion cards get more room but keep their proportions. */
  .sugg {
    gap: 18px;
  }

  .sugg__card {
    padding: 14px 12px;
  }

  /* ---- Categories: rail becomes a real sidebar ---- */

  .cats {
    grid-template-columns: 220px 1fr;
    gap: 18px;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .cats__rail {
    background: var(--surface-card);
    border-radius: var(--r-card);
    border: 0.5px solid var(--border-hair);
    padding: 8px;
    align-self: start;
    position: sticky;
    top: calc(var(--topnav-h) + 12px);
    max-height: calc(100vh - var(--topnav-h) - 32px);
  }

  .cats__railitem {
    border-radius: 10px;
    background: transparent;
    padding: 11px 12px;
  }

  .cats__railitem:hover {
    background: var(--surface-soft);
  }

  .cats__railitem[aria-selected='true'] {
    background: var(--surface-chip);
  }

  .cats__pane {
    border-radius: var(--r-card);
    border: 0.5px solid var(--border-hair);
    padding: 20px;
  }

  .cats__grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px 14px;
  }

  /* ---- Product page splits ---- */

  .pdp {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    gap: 32px;
    align-items: start;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .pdp__gallery {
    border-radius: var(--r-card);
    border: 0.5px solid var(--border-hair);
  }

  /* Stick the WHOLE left column (photo + thumbnails), not the photo alone.
     Sticking just the photo detached it from the thumbnail strip directly
     below and slid it 16px over the top of them, so the colour thumbnails
     collided with the product image (Adam, 2026-08-16). They are one unit and
     have to move as one. */
  .pdp > #gal {
    position: sticky;
    top: calc(var(--topnav-h) + 16px);
  }

  .pdp__thumbs {
    padding-inline: 0;
  }

  .pdp__buy {
    position: sticky;
    top: calc(var(--topnav-h) + 16px);
  }

  /* The sticky mobile buy bar is replaced by in-flow buttons. */
  .buybar {
    position: static;
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ---- Checkout / account: two columns ---- */

  .split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
    gap: 24px;
    align-items: start;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .split__side {
    position: sticky;
    top: calc(var(--topnav-h) + 16px);
  }

  .pagehead__title {
    font-size: 30px;
  }

  .toast {
    bottom: 28px;
  }
}

/* ============================================================
   ≥1440px — give the waterfall one more column on big monitors
   ============================================================ */

@media (min-width: 1440px) {
  .pgrid {
    grid-template-columns: repeat(6, 1fr);
  }

  .pgrid--wide {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* ============================================================
   Footer (desktop-weighted, but present everywhere)
   ============================================================ */

.foot {
  margin-top: 34px;
  padding: 26px var(--gutter) 30px;
  background: var(--surface-card);
  border-top: 0.5px solid var(--border-hair);
}

.foot__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  gap: 22px;
}

.foot__col h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.foot__col a {
  display: block;
  font-size: 13.5px;
  color: var(--text-secondary);
  padding-block: 5px;
}

.foot__col a:hover {
  color: var(--brand);
}

.foot__legal {
  font-size: 12px;
  color: var(--text-tertiary);
  border-top: 0.5px solid var(--border-hair);
  padding-top: 16px;
}

@media (min-width: 640px) {
  .foot__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .foot__inner {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
  }

  .foot__legal {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Narrow phones — keep all four feed tabs on one line.
   iOS fits them at 375pt because SF is narrower than Inter; below 400px we
   take the difference out of the type rather than let "New arrivals" clip.
   ============================================================ */

@media (max-width: 400px) {
  .feedtabs {
    gap: 6px;
  }

  .feedtab__label {
    font-size: 13.5px;
    letter-spacing: -0.2px;
  }

  .feedtab[aria-selected='true'] .feedtab__label {
    font-size: 15.5px;
  }
}

/* ============================================================
   Desktop: the suggestion strip must not balloon.
   Left at full width, two cards across 1440px give ~340px photos — five times
   the size they are in the apps, and they push the waterfall below the fold.
   Cap the row and centre it so the proportions stay app-like.
   ============================================================ */

@media (min-width: 1024px) {
  .sugg {
    max-width: 880px;
    margin-inline: auto;
  }

  .sugg__photo {
    max-height: 210px;
  }

  .sugg__tiles {
    justify-items: center;
  }

  .sugg__tile {
    width: 100%;
    max-width: 190px;
  }
}

/* ============================================================
   Route-aware chrome
   ============================================================ */

/* One search bar, and it stays put.
 *
 * First attempt hid the HEADER's bar on the search page. That was wrong: the
 * header bar is what you click, so hiding it made the bar vanish from under
 * the cursor and reappear somewhere lower down — "it disappears and glitches
 * when I press it" (Adam, 2026-08-16).
 *
 * Correct way round: the header bar is the ONE search field on every page. On
 * the search route the page's duplicate is hidden, the rotating hint gives way
 * to a real typeable input, and nothing moves. */
:root[data-route='search'] #page .searchbar { display: none; }

/* The header bar carries a rotating placeholder and a screen-reader-only
   input, which is fine while it is only a button that navigates. On the search
   page it has to become a real field. */
:root[data-route='search'] .apphead__search .searchbar__hintwrap { display: none; }

:root[data-route='search'] .apphead__search .searchbar input[type='search'] {
  position: static;
  width: auto;
  height: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 8px;
  clip: auto;
  clip-path: none;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  -webkit-appearance: none;
  appearance: none;
}

/* Safari draws its own clear/decoration inside type=search, which showed as
   stray orange marks inside the 2px brand border. */
:root[data-route='search'] .apphead__search .searchbar input[type='search']::-webkit-search-decoration,
:root[data-route='search'] .apphead__search .searchbar input[type='search']::-webkit-search-cancel-button,
:root[data-route='search'] .apphead__search .searchbar input[type='search']::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}