@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  /* Color palette — flat colors only, no gradients anywhere */
  --ink: #191715;
  --ink-soft: #4a453f;
  --paper: #faf7f2;
  --paper-raised: #ffffff;
  --line: #e4ddd1;
  --brass: #a9782f;
  --brass-dark: #8a611f;
  --olive: #4b5842;
  --error: #a3352a;
  --success: #3c6b45;

  /* Spacing scale — used consistently everywhere, no arbitrary one-off values */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --radius: 3px;
  --max-width: 1240px;
  --max-width-wide: min(94vw, 1800px);

  --font-head: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Work Sans', 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The full-bleed marquee sections (.featured-marquee, .brands-marquee)
   use width: 100vw + negative margins to run edge to edge, but 100vw
   doesn't subtract the scrollbar's width on desktop, so it was letting
   the whole page scroll/shift a few pixels left-right. Clipping it here
   only affects the outer page — the sections' own inner scrolling
   (drag-swipe on "Just landed", the auto-scrolling brand strip) is a
   separate overflow context and still moves exactly as before. */
@media (min-width: 961px) {

  html,
  body {
    overflow-x: hidden;
  }
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
  color: var(--ink);
}

h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 var(--sp-3);
  color: var(--ink-soft);
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* On large desktop monitors (1440px+) the fixed 1240px cap left a lot of
   empty space on both sides. Let the content area grow with the viewport
   instead, capped so lines of text/cards don't get absurdly wide. */
@media (min-width: 1440px) {
  .wrap {
    max-width: var(--max-width-wide);
  }
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--brass-dark);
}

.btn-primary:disabled {
  background: #b9b3a8;
  cursor: not-allowed;
}

.btn-outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-danger {
  background: var(--error);
  color: #fff;
}

.btn-danger:hover {
  background: #7d281f;
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.85rem;
}

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper-raised);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.logo .brand-mark {
  margin-right: var(--sp-3);
}

.brand-mark {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex: 0 0 60px;
  transform: translateY(-5px);
}

.logo span {
  color: var(--brass);
}

.main-nav {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
}

.main-nav a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.main-nav a:hover {
  color: var(--ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.icon-link {
  position: relative;
  display: inline-flex;
  padding: var(--sp-2);
}

.cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--brass);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wishlist-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--error);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger trigger for the mobile nav drawer — intentionally no box,
   no border, no background: just three bars of unequal width, right
   aligned so the imbalance reads as deliberate rather than sloppy. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

.nav-toggle span:nth-child(1) {
  width: 26px;
}

.nav-toggle span:nth-child(2) {
  width: 17px;
}

.nav-toggle span:nth-child(3) {
  width: 23px;
}

.nav-toggle:hover span:nth-child(1) {
  width: 23px;
}

.nav-toggle:hover span:nth-child(2) {
  width: 26px;
}

.nav-toggle:active span {
  transform: scaleY(0.85);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

.hero-header .nav-toggle {
  color: #fff;
}

/* ---------- Mobile navigation drawer ---------- */
/* Shared by the storefront drawer (slides in from the right, holds the
   main nav + account links) and the admin drawer (slides in from the
   left, holds the dashboard tabs) — both use .nav-backdrop and the
   open/dragging state classes below. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 23, 21, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 200;
}

.nav-backdrop.open {
  opacity: 1;
  visibility: visible;
}

body.drawer-open {
  overflow: hidden;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  width: min(84vw, 360px);
  background: var(--ink);
  color: var(--paper);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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

.nav-drawer-inner {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}

.nav-drawer-brand .logo {
  color: var(--paper);
  font-size: 1.15rem;
}

.nav-drawer-brand .brand-mark {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}

.nav-drawer-brand .logo span {
  color: var(--brass);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
}

.drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 15px 2px;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--paper);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.drawer-nav a:hover {
  color: var(--brass);
}

.drawer-cart-count {
  background: var(--brass);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drawer-wishlist-count {
  background: var(--error);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drawer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

/* Account block sits right under the brand, above the main nav —
   the first thing you see when the drawer opens. */
.drawer-account {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.drawer-account a,
.drawer-account button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 2px;
  border: none;
  background: none;
  color: #cfc9bd;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.drawer-account a:hover,
.drawer-account button:hover {
  color: #fff;
}

.drawer-account svg {
  flex-shrink: 0;
}

.drawer-cta {
  color: var(--brass) !important;
  font-weight: 600 !important;
}

/* Standalone Log out button, appended by JS as the last element in the
   drawer — separate from the account block up top, pinned to the
   bottom edge (rides along with .drawer-footer's margin-top: auto). */
.drawer-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 2px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: none;
  color: var(--error);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.drawer-logout:hover {
  color: #d14538;
}

.drawer-logout svg {
  flex-shrink: 0;
}

/* Footer block — Support + About + the swipe hint — pinned to the
   bottom of the drawer regardless of how tall the nav above it is. */
.drawer-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.drawer-support h4,
.drawer-about h4 {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8f887c;
  margin: 0 0 var(--sp-2);
}

.drawer-support {
  display: flex;
  flex-direction: column;
}

.drawer-support a {
  font-size: 0.88rem;
  color: #cfc9bd;
  padding: 4px 0;
}

.drawer-support a:hover {
  color: #fff;
}

.drawer-about p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #9a9388;
  margin: 0;
}

.drawer-hint {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f887c;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* Admin drawer — same mechanics, opens from the left since that's where
   the sidebar already lives on desktop. Bars are left-aligned (unlike
   the storefront toggle) so the icon itself points toward the side the
   drawer actually opens from. */
.admin-menu-toggle {
  display: none;
  align-items: flex-start;
}

/* Wrapper so wide dashboard tables scroll horizontally instead of
   blowing out the layout on narrow screens. */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  /* accounts for mobile browser toolbars so there's no gap below the fold */
  margin: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

/* Full-bleed background slideshow, images cross-fade + slowly zoom on a loop */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  animation: heroFade 24s infinite;
}

.hero-slideshow img:nth-child(1) {
  animation-delay: 0s;
}

.hero-slideshow img:nth-child(2) {
  animation-delay: 4s;
}

.hero-slideshow img:nth-child(3) {
  animation-delay: 8s;
}

.hero-slideshow img:nth-child(4) {
  animation-delay: 12s;
}

.hero-slideshow img:nth-child(5) {
  animation-delay: 16s;
}

.hero-slideshow img:nth-child(6) {
  animation-delay: 20s;
}

@keyframes heroFade {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }

  4% {
    opacity: 1;
  }

  15% {
    opacity: 1;
  }

  20% {
    opacity: 0;
    transform: scale(1.22);
  }

  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow img {
    animation: none;
    opacity: 0;
    transform: none;
  }

  .hero-slideshow img:first-child {
    opacity: 1;
  }
}

/* Flat, solid-color scrim for text contrast — no gradients, per the design system */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(25, 23, 21, 0.55);
  z-index: 1;
  pointer-events: none;
}

/* Header lays directly on the hero, transparent, no bar */
.hero-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: transparent;
}

.hero-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.hero-header .logo,
.hero-header .main-nav a {
  color: #fff;
}

.hero-header .logo span {
  color: var(--brass);
}

.hero-header .main-nav a:hover {
  color: var(--brass);
}

.hero-header .icon-link {
  color: #fff;
}

.hero-header .btn-outline {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.hero-header .btn-outline:hover {
  background: #fff;
  color: var(--ink);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}

.hero-content {
  position: relative;
  max-width: 620px;
  padding-top: 76px;
  /* clears the overlaid header */
}

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--sp-3);
}

.hero h1 {
  max-width: 15ch;
  color: #fff;
}

.hero-content p {
  max-width: 42ch;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
}

.hero-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

.hero-actions .btn-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.hero-actions .btn-outline:hover {
  background: #fff;
  color: var(--ink);
}

/* Photos scattered like they were dropped on a table — each one a little
   polaroid-style print with its own tilt and stacking order. */
.hero-scatter {
  position: relative;
  width: min(45vw, 520px);
  height: min(45vw, 500px);
  margin: 0 auto;
}

.hero-scatter img {
  position: absolute;
  width: 38%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #faf7f2;
  padding: 10px 10px 28px;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0s;
  cursor: default;
}

.hero-scatter img:hover {
  transform: scale(1.08) rotate(0deg) !important;
  box-shadow: 0 26px 50px -12px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35);
  z-index: 10 !important;
}

.hero-scatter img:nth-child(1) {
  top: 1%;
  left: 2%;
  transform: rotate(-10deg);
  z-index: 2;
}

.hero-scatter img:nth-child(2) {
  top: 4%;
  left: 56%;
  transform: rotate(8deg);
  z-index: 3;
}

.hero-scatter img:nth-child(3) {
  top: 39%;
  left: 20%;
  transform: rotate(-4deg);
  z-index: 4;
}

.hero-scatter img:nth-child(4) {
  top: 34%;
  left: 60%;
  transform: rotate(6deg);
  z-index: 1;
}

.hero-scatter img:nth-child(5) {
  top: 66%;
  left: 8%;
  transform: rotate(9deg);
  z-index: 5;
}


/* ---------- Section heading ---------- */
.section {
  padding: var(--sp-8) 0;
}

.shop-section {
  padding-top: var(--sp-5);
}

.shop-section .section-head {
  margin-bottom: var(--sp-3);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--sp-6);
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.section-head p {
  margin: 0;
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}

.product-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.product-card:hover {
  box-shadow: 0 10px 24px rgba(25, 23, 21, 0.1);
  transform: translateY(-2px);
}

.product-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  overflow: hidden;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card:hover .product-thumb img {
  transform: scale(1.06);
}

/* Wishlist toggle, sitting on top of the product photo. Kept as a plain
   outline heart at rest; .is-liked fills it and swaps to the error color
   rather than swapping the icon, so liking/unliking never re-renders the
   button's markup. */
.product-heart {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.product-heart:hover {
  border-color: var(--ink);
}

.product-heart.is-liked {
  color: var(--error);
  border-color: var(--error);
}

.product-heart.is-liked svg {
  fill: currentColor;
}

.product-heart svg {
  width: 16px;
  height: 16px;
}

.product-heart.is-pop {
  animation: heart-pop 0.3s ease;
}

@keyframes heart-pop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

.product-body {
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1;
}

/* Shared "Pick size" control — product cards (shop grid, homepage
   marquee, cart lines) and the product page all use the same markup.
   Sits with more room below the name than above the price, so it reads
   as its own row rather than crowding either one. */
.size-picker {
  display: flex;
  align-items: center;
  margin-top: var(--sp-2);
}

/* On the cart page the picker sits beside the quantity control (not
   stacked below the name), so it shouldn't inherit that top margin. */
.cart-item-controls .size-picker {
  margin-top: 0;
}

.size-picker .pick-size-link {
  font-size: 0.82rem;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.size-picker .pick-size-select {
  font-size: 0.82rem;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
}

.featured-card-size {
  padding: 0 var(--sp-4);
  margin-top: var(--sp-3);
}

/* The wrapper above already provides the spacing on the homepage
   marquee card, so the inner control shouldn't double up on top of it. */
.featured-card-size .size-picker {
  margin-top: 0;
}

.product-category {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.product-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-2);
}

.product-price {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--brass-dark);
}

.price-display {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.price-original {
  color: var(--ink-soft);
  font-size: 0.68em;
  font-weight: 400;
  text-decoration-thickness: 1px;
}

.price-current {
  color: inherit;
}

/* "Add to cart" button, matching the circular icon-button look used for
   the homepage's quick-add so the two feel like the same shop. */
.product-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-add:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
  color: #fff;
}

.product-add.is-added {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.product-add svg {
  width: 17px;
  height: 17px;
}

/* Text label inside the add-to-cart button — hidden on desktop/tablet
   where the button stays a small circular icon; shown only at the
   mobile breakpoint below, where the button becomes full-width. */
.product-add-label {
  display: none;
}

/* ---------- Sort bar (shop page) ---------- */
.sort-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.sort-bar select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
  cursor: pointer;
}

/* "The full range" — two independent panels side by side, each cycling
   through a product: image on the left, details on the right, fading
   out then in as it moves to the next one. */
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.showcase-grid .showcase-stage:last-child {
  border-left: 1px solid var(--line);
  padding-left: var(--sp-8);
}

.showcase-stage {
  position: relative;
  min-height: 320px;
}

.showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) 0;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.showcase-row.is-hidden {
  opacity: 0;
}

.showcase-image {
  display: block;
  max-width: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  aspect-ratio: 4 / 5;
}

.showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.showcase-row:hover .showcase-image img {
  transform: scale(1.04);
}

.showcase-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.showcase-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.showcase-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
}

.showcase-price {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brass-dark);
}

.showcase-gender {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--olive);
}

.showcase-size {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brass);
}

.showcase-desc {
  color: var(--ink-soft);
  max-width: 38ch;
  line-height: 1.55;
  font-size: 0.92rem;
  margin: 0;
}

.showcase-info .btn {
  align-self: flex-start;
  margin-top: var(--sp-2);
}

@media (max-width: 1000px) {
  .showcase-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .showcase-grid .showcase-stage:last-child {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--sp-3);
  }
}

@media (max-width: 900px) {
  .showcase-stage {
    min-height: 440px;
  }

  .showcase-row {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
  }

  .showcase-image {
    max-width: 220px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-row {
    transition: none;
  }
}


.featured-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  /* full-bleed: break out of the centered .wrap so cards run edge to edge */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.featured-row {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* hide the scrollbar itself — dragging/swiping still works */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.featured-row::-webkit-scrollbar {
  display: none;
}

.featured-row:active {
  cursor: grabbing;
}

.featured-track {
  display: flex;
  width: max-content;
  gap: var(--sp-5);
  animation: featured-slide 38s linear infinite;
}

.featured-row:nth-child(2) .featured-track {
  animation-duration: 46s;
}

.featured-marquee:hover .featured-track {
  animation-play-state: paused;
}

@keyframes featured-slide {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-track {
    animation: none;
  }
}

/* "Just landed" cards — a proper storefront product card: image with a
   "New" badge, category/name below, price + quick add-to-cart on the
   same row, matching the .product-card treatment used in the shop grid. */
.featured-card {
  position: relative;
  flex: 0 0 auto;
  width: 260px;
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.featured-card:hover {
  box-shadow: 0 10px 24px rgba(25, 23, 21, 0.1);
  transform: translateY(-2px);
}

.featured-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
}

.featured-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.featured-card:hover .featured-card-media img {
  transform: scale(1.06);
}

.featured-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 4px 10px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
}

.featured-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.featured-card-body {
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.featured-card-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.featured-card-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  /* clamp to one line so uneven product names keep every card the same height */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.featured-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-2);
}

.featured-card-price {
  font-weight: 600;
  color: var(--brass-dark);
}

.featured-card-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.featured-card-add:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
  color: #fff;
}

.featured-card-add.is-added {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.featured-card-add svg {
  width: 21px;
  height: 21px;
}

/* Hidden on desktop/tablet (icon-only button); shown at the mobile
   breakpoint above where the button becomes full-width. */
.featured-card-add-label {
  display: none;
}

/* ---------- Filters ---------- */
.shop-controls {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.product-search {
  position: relative;
  flex: 1 1 240px;
  max-width: 360px;
}

.product-search input {
  width: 100%;
  padding: 9px 42px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
}

.product-search-button {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brass);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
}

.product-search-button:hover {
  background: var(--brass-dark);
}

.product-search input:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.filter-groups {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.filter-bar {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.filter-chip {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--paper-raised);
}

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

/* ---------- Product detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  padding: var(--sp-7) 0;
}

.detail-image {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  aspect-ratio: 1/1;
}

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

.detail-price {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brass-dark);
  margin: var(--sp-3) 0;
}

.detail-gender {
  margin: 0 0 var(--sp-1);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--olive);
}

.detail-size {
  margin: 0 0 var(--sp-4);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brass);
}

.qty-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}

.qty-control {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.qty-control button {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--paper-raised);
  cursor: pointer;
  font-size: 1.1rem;
}

.qty-control input {
  width: 48px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 1rem;
}

.stock-note {
  font-size: 0.85rem;
  color: var(--olive);
  font-weight: 500;
}

/* ---------- Forms ---------- */
.auth-page {
  min-height: 100vh;
  background: linear-gradient(rgba(32, 29, 24, 0.18), rgba(32, 29, 24, 0.18)), url('/images/products/auth-background.jpg') center / cover fixed;
}

.auth-page .site-header {
  background: rgba(250, 248, 243, 0.9);
  backdrop-filter: blur(8px);
}

.auth-logo {
  position: fixed;
  top: 28px;
  left: clamp(20px, 5vw, 64px);
  z-index: 2;
  color: var(--ink);
  text-decoration: none;
}

.auth-logo:hover {
  color: var(--ink);
}

.form-page {
  max-width: 440px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.form-card {
  background: rgba(250, 248, 243, 0.94);
  box-shadow: 0 18px 48px rgba(25, 23, 21, 0.16);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-7);
}

.field {
  margin-bottom: var(--sp-4);
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: var(--sp-2);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink);
}

.field-error {
  color: var(--error);
  font-size: 0.82rem;
  margin-top: var(--sp-1);
}

.form-msg {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: var(--sp-4);
}

.form-msg.error {
  background: #f6e4e1;
  color: var(--error);
}

.form-msg.success {
  background: #e4ede0;
  color: var(--success);
}

.form-footer {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: 0.9rem;
}

/* ---------- Cart ---------- */
.cart-title {
  margin-top: 12px;
  margin-bottom: 1px;
}

.cart-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-7);
  padding: var(--sp-7) 0;
  align-items: start;
}

.cart-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.cart-item img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius);
}

.cart-item-name {
  font-weight: 600;
  margin-bottom: var(--sp-1);
}

.cart-item-remove {
  font-size: 0.82rem;
  color: var(--error);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: var(--sp-2);
}

.summary-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  position: sticky;
  top: 96px;
}

@media (min-width: 961px) {
  .cart-layout .summary-card {
    margin-top: -96px;
  }
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  font-size: 0.95rem;
}

.summary-row.total {
  font-weight: 700;
  font-size: 1.15rem;
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
}

.empty-state {
  text-align: center;
  padding: var(--sp-9) 0;
}

/* ---------- Order summary list (checkout) ---------- */
.order-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}

/* ---------- Footer ---------- */
/* Dark band, same palette as the mobile drawer, so the footer reads as
   its own separated section rather than blending into the page. */
.site-footer {
  background: var(--ink);
  color: #cfc9bd;
  padding: var(--sp-7) 0 var(--sp-6);
  margin-top: var(--sp-8);
}

.site-footer .logo {
  color: var(--paper);
}

.footer-brand-mark {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 48px;
  margin-right: var(--sp-3);
  transform: translateY(-2px);
}

.site-footer .footer-grid .logo {
  display: inline-flex;
}

.footer-logo {
  display: inline-flex;
  margin-bottom: var(--sp-4);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--sp-6);
}

.footer-grid h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8f887c;
}

.footer-grid a {
  display: block;
  font-size: 0.9rem;
  color: #cfc9bd;
  margin-bottom: var(--sp-2);
}

.footer-grid a:hover {
  color: #fff;
}

.footer-bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.82rem;
  color: #9a9388;
  text-align: center;
}

/* Social handles in the footer. Default: left-aligned, sits under the
   brand blurb in the full footer-grid layout. .footer-social--center is
   used on the slimmer footers (shop, product, cart, checkout) that don't
   have the grid, so the icons sit centered above the copyright line. */
.footer-social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.footer-social--center {
  justify-content: center;
  margin-top: 0;
  margin-bottom: var(--sp-5);
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  /* zeroes out the anchor's line-height, which otherwise leaves the
     inline svg sitting a couple of px off-center inside the circle even
     though the flex centering itself is correct */
  line-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #cfc9bd;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* On the home page the icons sit inside .footer-grid, and ".footer-grid a"
   (a class+tag selector) is more specific than ".footer-social-link" alone,
   so its "display: block" was winning and collapsing each icon into the
   top-left corner of its circle instead of letting the flex centering
   above apply. Re-assert inline-flex here with matching specificity so the
   icons stay centered wherever this footer layout is used. */
.footer-grid a.footer-social-link {
  display: inline-flex;
}

.footer-social-link:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
}

.footer-social-link svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ---------- Utility ---------- */
.hidden {
  display: none !important;
}

.center {
  text-align: center;
}

.mt-6 {
  margin-top: var(--sp-6);
}

/* =====================================================
   Admin dashboard
   ===================================================== */
.admin-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.admin-side {
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-6) var(--sp-4);
  display: flex;
  flex-direction: column;
}

.admin-side .logo {
  color: var(--paper);
  margin-bottom: var(--sp-7);
  display: block;
}

.admin-side .logo span {
  color: var(--brass);
}

.admin-tab {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #cfc9bd;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 11px var(--sp-3);
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: var(--sp-1);
}

.admin-tab.active,
.admin-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Signed-in user + sign out, pinned to the bottom of the sidebar/drawer
   so it's always reachable but out of the way of the nav tabs. */
.admin-side-footer {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-side-footer .admin-user-pill {
  color: #cfc9bd;
  margin-bottom: var(--sp-3);
}

.admin-side-footer .btn {
  width: 100%;
}

/* .btn-outline defaults to dark text/border for light backgrounds —
   on the sidebar's own dark background that made "Log out" render
   invisible (same color as the background it sits on). */
.admin-side-footer .btn-outline {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.admin-side-footer .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.admin-main {
  padding: var(--sp-6) var(--sp-7);
}

.admin-view {
  display: none;
}

.admin-view.active {
  display: block;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.stat-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
}

.stat-value {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 700;
}

.chart-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.chart-canvas-wrap {
  position: relative;
  height: 260px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.data-table th {
  font-family: var(--font-head);
  font-weight: 600;
  background: var(--paper);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.thumb-sm {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius);
}

.status-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-pending {
  background: #f3e6cf;
  color: #7a5b12;
}

.status-processing {
  background: #dde6f0;
  color: #2d4d70;
}

.status-completed {
  background: #dcecd7;
  color: var(--success);
}

.status-cancelled {
  background: #f6e4e1;
  color: var(--error);
}

.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 23, 21, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.admin-modal {
  background: var(--paper-raised);
  border-radius: var(--radius);
  padding: var(--sp-6);
  width: 460px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
}

.admin-modal h3 {
  margin-bottom: var(--sp-4);
}

.admin-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.admin-user-pill {
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .shop-controls {
    grid-template-columns: 1fr;
  }

  .product-search {
    max-width: none;
  }

  .hero {
    height: auto;
    padding: 110px var(--sp-5) var(--sp-7);
    align-items: flex-start;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: var(--sp-6);
  }

  .hero-content {
    max-width: 100%;
    padding-top: 0;
  }

  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-scatter {
    width: min(74vw, 340px);
    height: min(74vw, 340px);
    margin-top: var(--sp-6);
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-card {
    width: 220px;
  }

  .cart-layout {
    grid-template-columns: 1fr;
  }

  .product-detail {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }
}

/* Drawer breakpoint — main nav + account icons collapse into the
   hamburger-triggered drawer; the admin sidebar becomes a slide-in
   panel of its own. */
@media (max-width: 900px) {

  .site-header .brand-mark,
  .hero-header .brand-mark,
  .auth-logo .brand-mark {
    display: none;
  }

  .main-nav {
    display: none;
  }

  .nav-actions [data-auth-area] {
    display: none;
  }

  .nav-actions .icon-link[title="Wishlist"] {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .admin-menu-toggle {
    display: flex;
  }

  .admin-side {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    height: 100dvh;
    width: min(80vw, 300px);
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.28);
    z-index: 201;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
  }

  .admin-side.open {
    transform: translateX(0);
  }

  .admin-main {
    padding: var(--sp-5) var(--sp-4);
  }

  .admin-topbar {
    gap: var(--sp-3);
  }
}

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  /* Mobile only: the footer stacks so the price gets its own row
     (room to show the struck-through original price too) and the
     add-to-cart control becomes a full-width labeled button instead
     of competing with the price for space in one row. */
  .product-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }

  .product-add {
    width: 100%;
    height: 40px;
    border-radius: var(--radius);
    gap: var(--sp-2);
  }

  .product-add svg {
    width: 18px;
    height: 18px;
  }

  .product-add-label {
    display: inline;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
  }

  .featured-card {
    width: 170px;
    /* a little more rounding at the bottom on mobile, where the
       footer becomes a full-width button sitting flush at the base */
    border-radius: var(--radius) var(--radius) 10px 10px;
  }

  /* Same treatment as the shop/wishlist product card: footer stacks,
     price gets its own row, and the circular icon button becomes a
     full-width labeled "Add to cart" button. */
  .featured-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }

  .featured-card-add {
    width: 100%;
    height: 40px;
    border-radius: 4px 4px 8px 8px;
    gap: var(--sp-2);
  }

  .featured-card-add svg {
    width: 18px;
    height: 18px;
  }

  .featured-card-add-label {
    display: inline;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
  }

  .featured-marquee {
    gap: var(--sp-3);
  }

  .featured-track {
    gap: var(--sp-3);
  }

  .site-header .wrap {
    height: 64px;
  }

  .hero {
    padding: 96px var(--sp-4) var(--sp-6);
  }

  .hero-header .wrap {
    height: 64px;
  }

  .hero-scatter {
    width: min(84vw, 300px);
    height: min(84vw, 300px);
  }

  .section {
    padding: var(--sp-6) 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cart-item {
    grid-template-columns: 64px 1fr;
  }

  .cart-item img {
    width: 64px;
    height: 64px;
  }

  /* ---- Admin: mobile ---- */

  /* The Dashboard/Products/Orders header row no longer needs the
     desktop-sized gap beneath it once the sign-out pill is gone from
     here — closing it lets the content below sit right under the
     header instead of leaving a dead strip of space. */
  .admin-topbar {
    margin-bottom: var(--sp-3);
  }

  /* Shrink the traffic chart so it doesn't push the tables below the
     fold on a phone screen. */
  .chart-canvas-wrap {
    height: 180px;
  }

  /* Data tables (Products, Orders) collapse into a stack of cards —
     one per row — instead of a wide table forcing horizontal scroll
     or a pinch-zoom to read. thead is dropped; each td's own label
     comes from data-label via ::before instead. */
  .table-scroll {
    overflow-x: visible;
  }

  .data-table {
    display: block;
    border: none;
    background: transparent;
  }

  .data-table thead {
    display: none;
  }

  .data-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .data-table tr {
    display: flex;
    flex-direction: column;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
  }

  .data-table td {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    word-break: break-word;
  }

  .data-table td:last-child {
    border-bottom: none;
  }

  .data-table td[data-label]::before {
    content: attr(data-label);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--ink-soft);
  }

  /* Thumbnail and action rows don't have a data-label — they sit as
     their own row at the top/bottom of the card instead of a
     label/value pair. */
  .data-table .cell-thumb,
  .data-table .cell-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
  }

  .data-table .cell-thumb {
    border-bottom: none;
    padding-bottom: var(--sp-2);
  }

  .data-table .cell-thumb .thumb-sm {
    width: 48px;
    height: 48px;
  }

  .data-table .cell-actions {
    padding-top: var(--sp-3);
  }

  .data-table .cell-actions .btn {
    flex: 1;
  }

  .data-table .cell-full {
    display: block;
    text-align: center;
    padding: var(--sp-3) 0;
  }

  /* Collapsed by default: a row shows only its "summary" cell(s) —
     enough to identify it — and everything else stays hidden until
     the admin taps the row to expand it. */
  .data-table tr.row-collapsible {
    position: relative;
    cursor: pointer;
    padding-right: var(--sp-7);
  }

  .data-table tr.row-collapsible::after {
    content: '▾';
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-4);
    color: var(--ink-soft);
    transition: transform 0.2s ease;
  }

  .data-table tr.row-collapsible.is-expanded::after {
    transform: rotate(180deg);
  }

  .data-table tr.row-collapsible td:not(.cell-summary) {
    display: none;
  }

  .data-table tr.row-collapsible.is-expanded td:not(.cell-summary) {
    display: flex;
  }

  .data-table tr.row-collapsible .cell-summary {
    border-bottom: none;
  }

  /* Product/edit modal becomes a full-screen sheet on mobile instead
     of a small centered box, so the form has room to breathe. */
  .admin-modal-backdrop {
    align-items: stretch;
    justify-content: stretch;
  }

  .admin-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  /* iOS Safari auto-zooms into any input under 16px — this is likely
     the "zooming in" the admin is running into on forms. */
  .field input,
  .field textarea,
  .field select {
    font-size: 16px;
  }
}

/* "Available brands" — auto-scrolling logo strip below "The full range".
   Deliberately NOT made manually scrollable (overflow: hidden, no drag
   handlers) so it can't run into the transform-vs-native-scroll mismatch
   that "Just landed" had — this row only ever moves via the animation,
   so there's only ever one coordinate system in play. */
.brands-marquee {
  overflow: hidden;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line);
  /* matches the page background exactly, so multiply-blended logos
     (see .brand-logo img below) disappear into it seamlessly */
  background: var(--paper);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.brands-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--sp-8);
  animation: brands-slide 42s linear infinite;
}

.brands-marquee:hover .brands-track {
  animation-play-state: paused;
}

@keyframes brands-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brands-track {
    animation: none;
  }
}

.brand-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.brand-logo img {
  height: 100%;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.55);
  transition: filter 0.25s ease;
  /* the source files are logos on solid white/light canvases; multiply
     drops that canvas out against the section's matching background,
     leaving just the dark logo marks visible, no white boxes */
  mix-blend-mode: multiply;
}

.brand-logo img:hover {
  filter: grayscale(0%) opacity(1);
}

@media (max-width: 640px) {
  .brand-logo {
    height: 32px;
  }

  .brand-logo img {
    max-width: 100px;
  }

  .brands-track {
    gap: var(--sp-6);
  }
}

/* ---------- Extra small screens ---------- */
@media (max-width: 480px) {
  .wrap {
    padding: 0 var(--sp-4);
  }

  .form-card {
    padding: var(--sp-5);
  }

  .nav-drawer,
  .admin-side.open {
    width: min(88vw, 320px);
  }

  .featured-card {
    width: 150px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* Stat cards stay 2-up down to 420px — narrower than that, two columns
   start squeezing the value text, so drop to a single column. */
@media (max-width: 420px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .product-grid {
    gap: var(--sp-2);
  }

  .product-body {
    padding: var(--sp-2) var(--sp-3);
  }

  .product-footer {
    padding: 0 var(--sp-3) var(--sp-2);
  }
}