/* ─────────────────────────────────────────────────────────────
   Storefront component styles.

   These were scoped <style> blocks inside the Phase 1 .astro
   components. Django templates have no style scoping, so they are
   collected here. global.css is unchanged from Phase 1 and owns the
   design tokens, buttons, sections and product-grid card styling.
   ───────────────────────────────────────────────────────────── */

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

.topbar {
  background: var(--ink);
  color: rgba(248, 243, 237, 0.78);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.topbar-inner {
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px) saturate(1.1);
  background: rgba(251, 249, 245, 0.82);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header[data-scrolled] {
  background: rgba(251, 249, 245, 0.94);
  box-shadow: 0 1px 0 var(--line), var(--shadow-md);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: flex; align-items: center; }

.brand-logo {
  display: block;
  height: clamp(3.6rem, 7.5vw, 4.8rem);
  width: auto;
}

@media (max-width: 480px) {
  .brand-logo { height: 3.1rem; }
}

.nav { display: none; gap: 1.8rem; }

.nav-link {
  position: relative;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 100%;
  height: 2px;
  background: var(--spectrum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.header-actions { display: none; align-items: center; gap: 0.55rem; }

.icon-btn {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: 0.25s var(--ease-out);
}

.icon-btn:hover { background: #fff; border-color: var(--line-strong); }

/* Trade indicator — only rendered for approved trade accounts. */
.trade-pill {
  display: inline-flex;
  align-items: center;
  height: 2.6rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.header-cta {
  min-height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Two words, one line. As a flex item in the header row this pill was free to
     shrink below the width of its own text, and "SHOP NOW" broke across two
     lines inside it -- which is what made it look off-centre. "SIGN IN" is
     narrower and never wrapped, so the fault only showed to signed-in
     visitors. */
  white-space: nowrap;
  flex: 0 0 auto;
  /* Letter-spacing is added AFTER every character, including the last, so
     tracked uppercase text sits half a space left of centre in the pill. Taking
     that half-space off the right padding moves the box back over it.
     (text-indent, which was here before, does nothing on a flex container.) */
  padding: 0 calc(1.35rem - 0.07em) 0 calc(1.35rem + 0.07em);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: 0.25s var(--ease-out);
}

.header-cta:hover { background: var(--accent); }

.menu-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  display: grid;
  align-content: center;
  gap: 0.4rem;
  cursor: pointer;
}

.menu-toggle span { display: block; height: 1.5px; background: var(--ink); }

.mobile-nav {
  display: grid;
  padding: 0.5rem 1.25rem 1.25rem;
  border-top: 1px solid var(--line);
  background: rgba(251, 249, 245, 0.98);
}

.mobile-nav[hidden] { display: none; }

.mobile-nav a {
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.86rem;
}

@media (min-width: 900px) {
  .nav,
  .header-actions { display: flex; }
  .menu-toggle,
  .mobile-nav { display: none !important; }
}

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

.site-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(192, 106, 73, 0.18), transparent 42%),
    var(--ink);
  color: #f4ebe2;
  padding: 0 0 1.75rem;
}

.footer-grid { display: grid; gap: 2.4rem; padding-top: 3.5rem; }

.footer-logo-lockup { display: inline-block; margin-bottom: 1.2rem; }
.footer-logo-lockup img { display: block; height: 3rem; width: auto; }

/* Row of icon buttons under the brand blurb. The newsletter sits below it,
   so the row owns the space on both sides rather than leaving the heading
   below to butt up against the circles. */
.socials {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 2rem;
}

.footer-grid .socials a {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  margin-bottom: 0;
  border: 1px solid rgba(244, 235, 226, 0.22);
  border-radius: 50%;
  color: #f4ebe2;
  transition: 0.25s ease;
}

.socials svg { width: 1.4rem; height: 1.4rem; }

.socials a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.footer-brand p,
.footer-grid p { color: rgba(244, 235, 226, 0.7); max-width: 28rem; }

.footer-grid h3 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--gold-2);
}

.footer-newsletter h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  color: var(--gold-2);
}

/* Reads as the same kind of text as the brand blurb above it, so it is set the
   same way: the footer's body size, and dimmed once by the colour it already
   inherits rather than by a second opacity on top. */
.footer-newsletter p {
  margin: 0 0 0.9rem;
}

/* The email box and its button are one control; keep them on one line until
   the column is genuinely too narrow, rather than wrapping the button under a
   half-width field. */
.footer-newsletter .newsletter-form {
  align-items: center;
  gap: 0.6rem;
}

.footer-grid a { display: block; margin-bottom: 0.55rem; color: rgba(244, 235, 226, 0.88); }
.footer-grid a:hover { color: var(--gold-2); }

.note { margin-top: 1rem; color: var(--gold-2) !important; }

.footer-bottom,
.footer-bottom span,
.footer-bottom .legal-links a {
  font-size: 0.85rem;
}

.footer-bottom {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(244, 235, 226, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(244, 235, 226, 0.5);
}

/* Wraps. Without this the row of policy links ran off the right of a phone
   screen and half of them -- Privacy, Cookies, Company info -- could not be
   reached at all without turning the phone sideways. */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}
.legal-links a { color: rgba(244, 235, 226, 0.7); font-size: 0.8rem; }
.legal-links a:hover { color: var(--gold-2); }

/* On a phone the bottom bar stacks, and three left-aligned blocks of different
   widths read as a mistake. Centre them once they are no longer in a row. */
@media (max-width: 700px) {
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

@media (min-width: 620px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.6fr 0.9fr 0.9fr 1.3fr; }
}

/* ── Product card additions ─────────────────────────────────── */

.trade-badge { background: var(--accent) !important; color: #fff !important; }

.stock-out {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #b00;
}

/* ── Home ───────────────────────────────────────────────────── */

.home-hero {
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.home-hero h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  margin: 0.6rem 0 1.2rem;
  max-width: 16ch;
}

.home-hero .lede {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 42rem;
  margin-bottom: 2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.stat-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2.2rem;
  border-top: 1px solid var(--line);
}

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
}

.stat span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}

.category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.category-strip a {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font-size: 0.75rem;
  font-weight: 600;
  transition: 0.25s var(--ease-out);
}

.category-strip a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.trade-cta {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.trade-cta h2 { font-size: clamp(2rem, 4vw, 3rem); }
.trade-cta p { color: var(--ink-soft); max-width: 40rem; }

/* ── Shop ───────────────────────────────────────────────────── */

.shop-hero { margin-bottom: 2.5rem; }
.shop-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 0.5rem 0 0.7rem; }
.shop-hero p { color: var(--muted); }

.toolbar {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.search input,
.sort select {
  width: 100%;
  min-height: 3.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  /* Said out loud, like the chips. A control that paints its own white
     background must name its text colour too, or the device decides: iOS
     renders an unstyled <select> in the system blue, which is how "Featured"
     came to sit there in link-blue on the client's iPad. */
  color: var(--ink);
  padding: 0.75rem 1.1rem;
}

.search input:focus,
.sort select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.sort { display: grid; gap: 0.35rem; }

.sort span,
.filter-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

.filters {
  display: grid;
  gap: 1rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}

.filter-block { display: grid; gap: 0.55rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.chip {
  border: 1px solid var(--line-strong);
  background: transparent;
  /* Stated outright rather than left to inheritance. This is the label a
     shopper reads to filter the range; it must never depend on what a browser
     happens to default a <button> to. */
  color: var(--ink);
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: 0.25s var(--ease-out);
}

.chip.active,
.chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.count { color: var(--muted); }

.clear {
  border: 0;
  background: transparent;
  color: var(--skin-4);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.empty-state { padding: 3rem 0; color: var(--muted); }

.pagination {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 3.5rem;
}

.pagination a,
.pagination span {
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (min-width: 800px) {
  .toolbar { grid-template-columns: 1fr 220px; align-items: end; }
}

/* ── Product detail ─────────────────────────────────────────── */

.pdp { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.pdp-grid { display: grid; gap: 2.5rem; }

.hero-shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: var(--shadow-md);
  aspect-ratio: 1 / 1;
}

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

.thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}

.thumb {
  width: 4.6rem;
  height: 4.6rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-deep);
  cursor: pointer;
  transition: 0.25s var(--ease-out);
}

.thumb:hover,
.thumb[aria-current="true"] { border-color: var(--accent); transform: translateY(-2px); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.info h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); margin: 0.5rem 0 1rem; }

.pricing { margin-bottom: 0.6rem; }

.sale-price { display: flex; align-items: baseline; gap: 0.7rem; }
.sale-price strong { font-size: 2.1rem; font-weight: 800; }

.pricing .badge {
  background: var(--ink);
  color: var(--gold-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
}

.pricing .was { color: var(--muted); text-decoration: line-through; font-size: 0.95rem; }

.size { color: var(--muted); font-size: 0.85rem; margin-bottom: 1rem; }

.desc { color: var(--ink-soft); margin-bottom: 1.4rem; }

.certs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.5rem; }

.certs span {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }

.phase-note { color: var(--muted); font-size: 0.85rem; }

.stock-line { font-weight: 700; font-size: 0.85rem; margin-bottom: 1.2rem; }
.stock-line.in { color: var(--ok); }
.stock-line.out { color: #b00; }

/* Wholesale panel — rendered only for approved trade accounts. */
.trade-panel {
  border: 1px solid var(--accent-soft);
  background: rgba(236, 216, 204, 0.28);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}

.trade-panel h2 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.9rem;
}

.tier-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tier-table th,
.tier-table td { text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.tier-table th {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.tier-table td strong { font-weight: 800; }
.tier-table tr:last-child td { border-bottom: 0; }

.detail-grid { display: grid; gap: 2rem; }
.detail-grid h2 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.detail-grid ul { padding-left: 1.1rem; margin: 0; color: var(--ink-soft); }
.detail-grid li { margin-bottom: 0.35rem; }
.detail-grid p { color: var(--ink-soft); }

.detail-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
}

.detail-scroll img {
  flex: 0 0 auto;
  width: min(80vw, 26rem);
  border-radius: var(--radius);
  scroll-snap-align: start;
}

.breadcrumbs {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.breadcrumbs a:hover { color: var(--accent); }

@media (min-width: 900px) {
  .pdp-grid { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: start; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid .wide { grid-column: 1 / -1; }
}

/* ── Simple content pages ───────────────────────────────────── */

.page-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 0.5rem 0 0.8rem; }
.page-hero p { color: var(--ink-soft); max-width: 44rem; font-size: 1.08rem; }

.prose { max-width: 46rem; display: grid; gap: 1.1rem; }
.prose h2 { font-size: 1.6rem; margin-top: 1.4rem; }
.prose p { color: var(--ink-soft); }

/* The free-delivery line in the bar at the top. It changes as the basket
   grows -- how much more is needed, then that it has been earned -- so it
   carries a little more weight than the copy beside it. */
.topbar-delivery {
  font-weight: 600;
}

.topbar-delivery.is-earned {
  color: var(--gold-2);
}


/* ── Touch targets ────────────────────────────────────────────────────
   Links that sat at 20-28px tall are a poor target on glass, and worse for
   anyone with unsteady hands. The padding grows the hit area without moving
   anything: the rows were already spaced further apart than the text is tall. */

@media (hover: none), (max-width: 1024px) {
  .breadcrumbs a,
  .breadcrumbs {
    display: inline-block;
    padding: 0.45rem 0;
  }

  /* "Discover" on a product card, the socials, the phone number, and the
     company number in the bottom bar -- all links people actually press. */
  .card-cta,
  .product-card a,
  .footer-bottom a,
  .contact-socials a,
  .socials a,
  a[href^="tel:"] {
    display: inline-block;
    padding: 0.4rem 0;
  }

  .footer-grid a,
  .legal-links a {
    padding: 0.35rem 0;
  }

  .header-inner nav a {
    padding: 0.55rem 0.2rem;
  }
}