/* Tokens pulled directly from the live theme's ww-base.css (as of the
   3.23 pull — see the loyalty-app project notes for how to re-check these
   if the theme is re-exported). Kept as a flat palette rather than
   re-deriving anything, so this page matches the real site exactly. */
:root {
  --ww-bg: #f7f1e6;
  --ww-bg2: #efe4d2;
  --ww-ink: #33261a;
  --ww-ink2: #2c2014;
  --ww-muted: #5b4a38;
  --ww-soft: #7a6a55;
  --ww-line: #e6d9c4;
  --ww-line2: #ece0cd;
  --ww-tan: #8a6549;
  --ww-rust: #8a4b2d;
  --ww-amber: #e0a06a;
  --ww-dark: #241a10;
  --ww-card: #ffffff;

  --ww-serif: "DM Serif Display", serif;
  --ww-cormorant: "Cormorant Garamond", serif;
  --ww-oswald: "Oswald", sans-serif;
  --ww-sans: "Hanken Grotesk", sans-serif;
}

* {
  box-sizing: border-box;
}

/* Elements toggled via the `hidden` attribute (login/logout views, the
   identity pill) also carry classes like .identity-pill that set an
   explicit `display` — an author stylesheet rule beats the browser's
   built-in `[hidden] { display: none }` at equal specificity, so without
   this override a "hidden" element still renders. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--ww-bg);
  color: var(--ww-ink);
  font-family: var(--ww-sans);
  line-height: 1.5;
}

.ww-hero {
  position: relative;
  background: var(--ww-dark);
  color: var(--ww-bg);
  text-align: center;
  padding: 2.5rem 1.5rem 2rem;
}

/* Same logo asset as the live theme's own header (sections/ww-header.liquid).
   Per Robby's mockup: top-left of the hero, mirroring the identity pill on
   the right — full-page centering (tried first) put it dead center of the
   hero regardless of the pill's own position, which wasn't the intent.
   88px (up from an original 52px): the badge's fine print (shop name,
   "Mercantile", "Brookville Indiana") was illegible at 52px and read as a
   blurry smudge against the dark hero — this badge has real detail in it
   and needs real size to read, closer to the theme's own 84px default than
   a shrunk-down icon. */
.ww-hero-logo {
  position: absolute;
  top: 1.75rem;
  left: 1.5rem;
  height: 88px;
  width: auto;
}
@media (max-width: 640px) {
  .ww-hero-logo {
    position: static;
    display: block;
    margin: 0 auto 0.75rem;
    height: 72px;
  }
}

.identity-pill {
  /* Was position: fixed (stays on screen while scrolling) through several
     rounds of this session — Robby: "the login pill floating is annoying
     the hell out of me. it should live in the upper left [then: upper
     right] of the page and stay there instead of following as you
     scroll." position: absolute, relative to .ww-hero (which has its own
     position: relative), puts it in the same visual spot without
     following scroll — it scrolls away with the rest of the hero, same as
     the logo on the other side. This also permanently removes the whole
     class of "does the fixed pill cover something below it" bugs (hit
     twice already, once on mobile, once full-page) — content below the
     hero can never be covered by something that isn't fixed in the first
     place. */
  position: absolute;
  top: 1.75rem;
  right: 1.5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  /* Confirmed live (real screenshot) and then measured directly: a wide
     dead band sat to the right of "Log out" because .identity-pill-name's
     max-content contribution to this container's own shrink-to-fit sizing
     is the *unwrapped* "Shopping as X (email)" string — overflow-wrap:
     anywhere lowers min-content, not max-content, and flex-basis: 100%
     (tried first) doesn't change that computation either, since percentage
     flex-basis has nothing to resolve against during intrinsic sizing.
     A real name+email easily clears any reasonable max-width, so "auto"
     shrink-to-fit was never going to land on the right number. An explicit
     width sidesteps the whole problem — content wraps inside a size that's
     actually chosen, not computed. */
  width: min(19rem, calc(100vw - 2rem));
  background: var(--ww-dark);
  border: 1px solid rgba(224, 160, 106, 0.4);
  border-radius: 1.5rem;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  font-family: var(--ww-sans);
  font-size: 0.82rem;
  box-shadow: 0 4px 16px rgba(36, 26, 16, 0.25);
}
.identity-pill-name {
  color: var(--ww-bg2);
  /* Was nowrap + ellipsis, which just cut a real name/email off mid-word
     ("Robby Minick (robert.min…") instead of showing it — this pill isn't
     so tight on space that a two-line name is a real problem, so let it
     actually wrap instead of hiding half of it. flex-basis: 100% puts it
     on its own row (see .identity-pill's comment for why that matters for
     the parent's own sizing) — no max-width needed on top of that; it can
     use the pill's own full width and only wraps if it actually needs to. */
  white-space: normal;
  overflow-wrap: anywhere;
  flex-basis: 100%;
}
.identity-pill-name strong {
  color: #fff;
}
.identity-pill-fulfillment {
  font-family: var(--ww-sans);
  font-size: 0.85rem;
  font-weight: 600;
  /* Was near-transparent dark-on-dark for the closed control, which native
     browsers then carry straight into the dropdown's own OPEN option list —
     several browsers render that list with a plain white system background
     regardless of any styling here, which made light-on-dark text nearly
     invisible against it. A solid light background with dark ink keeps the
     closed pill control legible AND makes the opened list readable too,
     since there's no risky color inheritance left for the browser to get
     wrong. */
  background: var(--ww-bg);
  color: var(--ww-ink);
  border: 1px solid var(--ww-amber);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.identity-pill-fulfillment option {
  color: var(--ww-ink);
  background: var(--ww-bg);
  font-weight: 600;
}
.identity-pill-note {
  /* flex-basis: 100% forces it onto its own row below the name/select/
     logout row, rather than fighting them for horizontal space — shown
     only while "Shipping" is the picked fulfillment (see app.js). */
  flex-basis: 100%;
  margin: 0.2rem 0 0.1rem;
  color: var(--ww-bg2);
  font-size: 0.72rem;
  line-height: 1.4;
  opacity: 0.85;
}
.identity-pill-fulfillment:focus {
  outline: 2px solid var(--ww-amber);
  outline-offset: 1px;
}
/* Draws the eye to the pill when a claim is blocked on picking pickup/
   shipping — replaces the old scrollIntoView, which doesn't mean anything
   for a position: fixed element that's already always on screen. */
@keyframes identity-pill-attention {
  0%, 100% { box-shadow: 0 4px 16px rgba(36, 26, 16, 0.25); }
  25%, 75% { box-shadow: 0 0 0 4px var(--ww-amber); }
}
.identity-pill--attention {
  animation: identity-pill-attention 0.9s ease-in-out 2;
}
.identity-pill-logout {
  font-family: var(--ww-oswald);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--ww-amber);
  border: 1px solid var(--ww-amber);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.identity-pill-logout:hover {
  opacity: 0.8;
}
/* Was bottom-fixed on mobile (a separate reachable-while-scrolling design
   from desktop's own now-former fixed positioning) — now that neither is
   fixed at all, this collapses to the simple case: static, in the same
   document-order spot between the logo and the title, centered the same
   way the logo already is. It just scrolls away with everything else,
   which is the actual point now, and needs no dedicated "make room below
   it" padding or JS measurement, since normal document flow already
   reserves exactly the space it needs. */
@media (max-width: 640px) {
  .identity-pill {
    position: static;
    margin: 0 auto 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.ww-eyebrow {
  font-family: var(--ww-oswald);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--ww-amber);
  margin: 0 0 0.5rem;
}
.ww-hero h1 {
  font-family: var(--ww-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: 0 0 0.5rem;
}
.ww-tagline {
  font-family: var(--ww-cormorant);
  font-size: 1.15rem;
  color: var(--ww-bg2);
  margin: 0;
  max-width: 32rem;
  margin-inline: auto;
}

#app {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.ww-card {
  background: var(--ww-card);
  border: 1px solid var(--ww-line);
  border-radius: 12px;
  padding: 1.25rem;
}

/* Only ever shown logged-out now (identity moves into the fixed pill once
   logged in), so it's free to be the clear, unmissable primary CTA of the
   page rather than a modest card competing with everything else — sticky
   to stay in view as the reminder to log in while scrolling. */
.identity-card {
  position: sticky;
  top: 0.75rem;
  z-index: 10;
  margin-bottom: 1.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 2px solid var(--ww-amber);
  box-shadow: 0 10px 32px rgba(36, 26, 16, 0.18);
}
.identity-card .ww-field-label {
  font-family: var(--ww-serif);
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.3rem;
  color: var(--ww-ink);
}
.identity-card .ww-btn {
  font-size: 1rem;
  padding: 0.8rem 1.6rem;
}
.identity-card .ww-hint {
  max-width: 28rem;
  margin: 0.75rem auto 0;
}
.ww-field-label {
  font-family: var(--ww-oswald);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--ww-soft);
  margin: 0 0 0.5rem;
}
.ww-input {
  font-family: var(--ww-sans);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ww-line);
  border-radius: 8px;
  background: var(--ww-bg);
  color: var(--ww-ink);
  width: 100%;
}
.ww-input:focus {
  outline: 2px solid var(--ww-rust);
  outline-offset: 1px;
}
.ww-hint {
  font-size: 0.8rem;
  color: var(--ww-soft);
  margin: 0.6rem 0 0;
}

.my-status {
  margin-bottom: 1.5rem;
}
.my-status-line {
  font-size: 0.9rem;
  margin: 0.3rem 0;
  color: var(--ww-ink2);
}
.my-status-countdown {
  color: var(--ww-soft);
  font-size: 0.8rem;
}
.my-status-change-btn {
  font-family: var(--ww-sans);
  font-size: 0.78rem;
  font-weight: 600;
  background: transparent;
  color: var(--ww-rust);
  border: 1px solid var(--ww-rust);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
.my-status-change-btn:hover {
  background: var(--ww-rust);
  color: #fff;
}
.my-status-change-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.items-show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.item-card {
  background: var(--ww-card);
  border: 1px solid var(--ww-line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.item-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--ww-bg2);
  display: block;
}

/* Shown instead of real items when logged out — the server withholds the
   actual data entirely (see load()/renderLoginRequiredPlaceholder() in
   app.js), so these are purely synthetic, blurred-looking shapes, not a
   CSS filter over real content that a network tab could still reveal. */
.items-grid--locked {
  position: relative;
}
.items-grid-lock-message {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}
.items-grid-lock-message p {
  background: var(--ww-card);
  border: 1px solid var(--ww-amber);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: var(--ww-ink2);
  box-shadow: 0 8px 24px rgba(43, 35, 32, 0.15);
  margin: 0;
}
.item-card--locked {
  filter: blur(1.5px);
  opacity: 0.6;
  pointer-events: none;
}
.item-card--locked-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--ww-line) 25%, var(--ww-bg2) 50%, var(--ww-line) 75%);
}
.item-card--locked-line {
  height: 0.9rem;
  border-radius: 4px;
  background: var(--ww-line);
}
.item-card--locked-line.short {
  width: 40%;
}
.item-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.item-desc {
  font-family: var(--ww-cormorant);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--ww-ink2);
}
.item-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.item-current-price {
  text-decoration: line-through;
  color: var(--ww-soft);
  font-size: 0.9rem;
}
.item-sale-price {
  font-family: var(--ww-oswald);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ww-rust);
}

.size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--ww-line2);
}
.size-label {
  font-family: var(--ww-oswald);
  font-size: 0.85rem;
  color: var(--ww-muted);
}
.size-remaining {
  font-size: 0.75rem;
  color: var(--ww-soft);
  margin-right: 0.4rem;
}

.ww-btn {
  display: inline-block;
  font-family: var(--ww-oswald);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.ww-btn--rust {
  background: var(--ww-rust);
  color: #fff;
}
.ww-btn--rust:hover {
  opacity: 0.88;
}
.ww-btn--outline {
  background: transparent;
  color: var(--ww-rust);
  border: 1px solid var(--ww-rust);
}
.ww-btn:disabled {
  background: var(--ww-line);
  color: var(--ww-soft);
  cursor: not-allowed;
  border: none;
}

.toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  font-family: var(--ww-sans);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 6px 20px rgba(36, 26, 16, 0.18);
}
.toast--ok {
  background: #2f7a4f;
  color: #fff;
}
.toast--error {
  background: #b1332c;
  color: #fff;
}

.ww-footer {
  text-align: center;
  color: var(--ww-soft);
  font-size: 0.82rem;
  padding: 1.5rem 1rem 2.5rem;
}
.ww-faq-toggle {
  margin-top: 0.6rem;
  background: none;
  border: none;
  color: var(--ww-rust);
  font-family: var(--ww-sans);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem;
}
.ww-faq {
  max-width: 32rem;
  margin: 0.75rem auto 0;
  padding: 1.1rem 1.25rem;
  background: var(--ww-card);
  border: 1px solid var(--ww-line);
  border-radius: 12px;
  text-align: left;
}
.ww-faq-item + .ww-faq-item {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ww-line2);
}
.ww-faq-q {
  margin: 0 0 0.25rem;
  font-family: var(--ww-oswald);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--ww-ink2);
}
.ww-faq-a {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ww-muted);
}
.ww-footer-credit {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  opacity: 0.75;
}

/* Per Robby: item photos were too large on mobile — the default grid's
   15rem column minimum only ever fits one column on a phone screen, so
   each image ran nearly full-width at a 3:4 (tall) aspect ratio. Two
   columns instead scales everything down proportionally, which is the
   actual fix ("scaled down"), not just a smaller aspect-ratio on an
   otherwise still-full-width image. Card text/controls get a matching
   size trim so a longer label ("Join waitlist", "You're #2 in line")
   still fits without wrapping awkwardly at roughly half the width.
   Deliberately placed at the end of the file, not next to the other
   mobile overrides above — a first attempt there came *before* the base
   .items-grid rule in source order and silently lost the cascade at equal
   specificity despite the media query matching; confirmed live via a
   direct getComputedStyle check. */
@media (max-width: 640px) {
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .item-body {
    padding: 0.65rem;
    gap: 0.35rem;
  }
  .item-desc {
    font-size: 0.9rem;
  }
  .item-sale-price {
    font-size: 1.05rem;
  }
  .item-current-price {
    font-size: 0.78rem;
  }
  .size-row {
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .size-remaining {
    font-size: 0.68rem;
    margin-right: 0.2rem;
  }
  .ww-btn {
    font-size: 0.72rem;
    padding: 0.35rem 0.7rem;
  }
}