/* ═══════════════════════════════════════════════════════════════
   POOCHSNACKS  –  Main Stylesheet
   Palette: Navy #1C1C2E · Blue #3A86FF · Cream #FFF5E6
   ═══════════════════════════════════════════════════════════════ */

/* ─── Custom Properties ─────────────────────────────────────── */
:root {
  /* The whole design is light. Without this, browsers hand native controls —
     select popups, datalists, date pickers, autofill, scrollbars — to the OS
     theme, so on a machine in dark mode they render dark text on our forced
     white backgrounds (or white on white) and become unreadable. */
  color-scheme: only light;

  --navy:        #1C1C2E;
  --navy-light:  #2E2E48;
  --brown-dark:  #5C3A1E;
  --brown-mid:   #8B5E3C;
  --orange:      #3A86FF;
  --orange-light:#60A5FA;
  --gold:        #F0C050;
  --cream:       #FFF5E6;
  --cream-dark:  #F5EBD8;
  --cream-darker:#EDD8B8;
  --green:       #4A7C2F;
  --red:         #C0392B;
  --white:       #FFFFFF;

  --shadow-sm:   0 2px 8px  rgba(28,28,46,.10);
  --shadow:      0 4px 20px rgba(28,28,46,.14);
  --shadow-lg:   0 8px 40px rgba(28,28,46,.20);
  --shadow-card: 0 4px 0 0  rgba(28,28,46,.15), 0 2px 12px rgba(28,28,46,.12);

  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --border:      2.5px solid var(--navy);

  --font-head:   'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-body:   'Poppins', 'Segoe UI', system-ui, sans-serif;

  --header-h:    70px;
  --transition:  .22s ease;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--navy);
  min-height: 100vh;
  /* clip (not hidden) stops horizontal overflow WITHOUT making body a scroll
     container, which would break position:sticky (e.g. the account sidebar). */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button, input, select, textarea { font-family: inherit; }

/* ─── Google Fonts ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Poppins:wght@400;500;600&display=swap');

/* ─── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family: var(--font-head);
  line-height: 1.15;
  font-weight: 900;
}

/* ─── Utilities ──────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container--sm { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.text-orange { color: var(--orange); }
.text-navy   { color: var(--navy);  }
.flex        { display: flex; align-items: center; }
.gap-1       { gap: 8px;  }
.gap-2       { gap: 16px; }
.hidden      { display: none !important; }
.sr-only     { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }

/* ─── Paw-print background pattern ──────────────────────────── */
.paw-bg {
  background-color: var(--cream-dark);
  background-image: url("../images/bg-cream.jpg");
  background-size: cover;
  background-position: center;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  border: var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(2px); }

.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -6px rgba(58,134,255,.65);
}
.btn-primary:hover {
  background: var(--orange-light);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 24px -8px rgba(58,134,255,.8);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px -6px rgba(28,28,46,.6);
}
.btn-dark:hover {
  background: var(--navy-light);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 24px -8px rgba(28,28,46,.7);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: var(--border);
}
.btn-outline:hover { background: var(--cream-dark); }

.btn-ghost {
  background: rgba(255,255,255,.15);
  color: var(--white);
  border-color: rgba(255,255,255,.4);
}
.btn-ghost:hover { background: rgba(255,255,255,.25); }

.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn-lg { padding: 16px 36px; font-size: 1.1rem; }
.btn-full { width: 100%; justify-content: center; }

/* ─── Badges / Chips ─────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-head);
  border: 1.5px solid currentColor;
}
.badge-orange  { background: var(--orange);  color: var(--white); border-color: var(--brown-dark); }
.badge-red     { background: var(--red);     color: var(--white); border-color: #8b2922; }
.badge-green   { background: var(--green);   color: var(--white); border-color: #2e5a1a; }
.badge-navy    { background: var(--navy);    color: var(--white); border-color: #000; }
.badge-gold    { background: var(--gold);    color: var(--navy);  border-color: var(--orange); }
.badge-cream   { background: var(--cream);   color: var(--navy);  border-color: var(--navy); }

/* ─── Stars ──────────────────────────────────────────────────── */
.stars { display: inline-flex; align-items: center; gap: 1px; line-height: 1; vertical-align: middle; }
.star-svg { display: block; }
.star-count { font-size: .75rem; color: var(--brown-mid); margin-left: 5px; }

/* ─── Section Titles ─────────────────────────────────────────── */
.section-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  margin-bottom: 8px;
}
.section-sub {
  color: var(--brown-mid);
  font-size: .95rem;
  max-width: 540px;
  margin: 0 auto 40px;
}
.section-eyebrow {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--navy);
  border-bottom: 3px solid var(--orange);
}
.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: 0;
}

/* ─── Permanent search bar ───────────────────────────────────── */
.header-search {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 8px 0;
}
.search-form { position: relative; display: flex; align-items: center; }
.search-form-ico {
  position: absolute;
  left: 15px;
  display: inline-flex;
  color: rgba(255,255,255,.55);
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 9px 16px 9px 42px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.search-input::placeholder { color: rgba(255,255,255,.5); }
.search-input:focus { border-color: var(--orange); background: rgba(255,255,255,.13); }
@media (min-width: 1024px) {
  .search-form { max-width: 540px; margin: 0 auto; }
}

/* ─── Rotating announcement ──────────────────────────────────── */
.announcement-rotator { position: relative; height: 1.3em; overflow: hidden; }
.ann-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(70%);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  white-space: nowrap;
}
.ann-item.active { opacity: 1; transform: translateY(0); }
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.header-logo img { height: 48px; width: auto; }
.header-logo-text {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--white);
  line-height: 1.1;
}
.header-logo-text span { color: var(--orange); }

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}
.header-nav a {
  color: rgba(255,255,255,.8);
  font-weight: 600;
  font-size: .9rem;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.header-nav a:hover,
.header-nav a.active {
  color: var(--white);
  background: rgba(255,255,255,.1);
}
.header-nav a.active { color: var(--orange); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  color: var(--white);
  cursor: pointer;
  transition: background var(--transition);
  font-size: 1.2rem;
}
.header-icon-btn:hover { background: rgba(255,255,255,.2); }
.cart-count {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--orange);
  color: var(--white);
  font-size: .65rem;
  font-weight: 800;
  font-family: var(--font-head);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--navy);
}

/* The burger is an inline SVG, not three CSS bars.
   Android/Samsung force-dark (power saving, Eye comfort shield) re-tints
   background-color but leaves SVG artwork alone — so white bars painted with
   `background: #FFF` turned dark while the cart icon right next to them, an
   inline SVG, stayed white. Matching the cart's construction is what actually
   survives: stroke="currentColor" inheriting the colour below.
   An earlier attempt tuned the bar height (2.5px -> 3px) on the theory that it
   was antialiasing; it wasn't, and the bug came back. */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  color: #FFFFFF;
}
.hamburger-ico {
  grid-area: 1 / 1;                 /* both icons stack, so the button can't jump */
  transition: opacity .2s ease, transform .2s ease;
}
.hamburger-ico--close,
.hamburger.open .hamburger-ico--open { opacity: 0; transform: rotate(-90deg); }
.hamburger.open .hamburger-ico--close { opacity: 1; transform: rotate(0); }

/* Slide-in nav — covers the page below the header/search bar (JS sets `top`).
   Stays in the DOM (hidden via visibility) so it can animate both in AND out. */
.mobile-nav {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 990;
  visibility: hidden;
  transition: visibility 0s linear .32s; /* hide only after the slide-out ends */
}
.mobile-nav.open { visibility: visible; transition-delay: 0s; }
.mobile-nav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.mobile-nav.open .mobile-nav-overlay { opacity: 1; pointer-events: auto; }
.mobile-nav-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: 1;
  background: var(--navy);
  width: 100%;
  padding: 16px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.mobile-nav.open .mobile-nav-drawer { transform: translateX(0); }
.mobile-nav-drawer a {
  color: rgba(255,255,255,.9);
  font-weight: 700;
  font-family: var(--font-head);
  font-size: 1.02rem;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  transition: all var(--transition);
}
.mobile-nav-drawer a:hover {
  color: var(--white);
  background: rgba(255,255,255,.08);
  border-color: var(--orange);
}
.mobile-nav-drawer hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 12px 0;
}

/* ─── Announcement Bar ───────────────────────────────────────── */
.announcement-bar {
  background: var(--orange);
  color: var(--white);
  text-align: center;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--font-head);
}
.announcement-bar strong { font-weight: 900; }

/* ═══════════════════════════════════════════════════════════════
   CART DRAWER
   ═══════════════════════════════════════════════════════════════ */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.cart-drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100vw);
  height: 100%;
  background: var(--cream);
  border-left: var(--border);
  z-index: 1101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  background: var(--navy);
  color: var(--white);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--orange);
  flex-shrink: 0;
}
.cart-drawer-header h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
}
.cart-drawer-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  opacity: .8;
  transition: opacity var(--transition);
}
.cart-drawer-close:hover { opacity: 1; }

.cart-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 12px;
  color: var(--brown-mid);
}
.cart-empty-icon { font-size: 4rem; opacity: .3; }

.cart-item-card {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius);
  border: var(--border);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.cart-item-img {
  width: 72px;
  height: 72px;
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid var(--cream-darker);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-item-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.2;
}
.cart-item-price {
  color: var(--orange);
  font-weight: 700;
  font-size: .9rem;
}
.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.qty-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: var(--cream-dark);
  cursor: pointer;
  font-weight: 800;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
  font-family: var(--font-head);
}
.qty-btn:hover { background: var(--orange); color: var(--white); border-color: var(--brown-dark); }
.qty-display { font-weight: 700; min-width: 20px; text-align: center; font-size: .9rem; }
.cart-item-remove {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  opacity: .7;
  transition: opacity var(--transition);
}
.cart-item-remove:hover { opacity: 1; }

.cart-drawer-footer {
  border-top: var(--border);
  padding: 16px;
  background: var(--white);
  flex-shrink: 0;
}
.cart-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: .9rem;
}
.cart-totals-row.total-row {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.1rem;
  border-top: 1.5px solid var(--cream-darker);
  margin-top: 8px;
  padding-top: 12px;
}
.cart-shipping-note {
  font-size: .75rem;
  color: var(--green);
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--navy);
  color: var(--white);
  padding: 14px 18px;
  border-radius: var(--radius);
  border: var(--border);
  border-left: 5px solid var(--orange);
  font-size: .875rem;
  font-weight: 500;
  max-width: 340px;
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn .3s ease;
  box-shadow: var(--shadow-lg);
}
.toast.success { border-left-color: var(--green); }
.toast.error   { border-left-color: var(--red); }
.toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.toast.fade-out { animation: toastOut .3s ease forwards; }

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.hero {
  background-color: var(--navy);
  background-image: url("../images/bg-navy.jpg");
  background-size: cover;
  background-position: center;
  min-height: calc(100vh - var(--header-h));
  min-height: min(680px, calc(100vh - var(--header-h)));
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 600px);
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 50%, rgba(58,134,255,.15) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(240,192,80,.08) 0%, transparent 50%);
}
.hero-floating {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-float-el {
  position: absolute;
  opacity: .5;
  width: 42px;
  animation: floatRandom 8s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.hero-float-el img { width: 100%; height: auto; display: block; }
.hero-float-el:nth-child(1)  { top: 14%; left: 7%;  animation-delay: 0s;   width: 40px; opacity: .55; }
.hero-float-el:nth-child(2)  { top: 32%; left: 54%; animation-delay: 1.5s; width: 54px; opacity: .45; }
.hero-float-el:nth-child(3)  { top: 66%; left: 11%; animation-delay: 3s;   width: 48px; opacity: .5; }
.hero-float-el:nth-child(4)  { top: 76%; left: 68%; animation-delay: .8s;  width: 34px; opacity: .45; }
.hero-float-el:nth-child(5)  { top: 9%;  left: 80%; animation-delay: 2.2s; width: 44px; opacity: .55; }
.hero-float-el:nth-child(6)  { top: 46%; left: 91%; animation-delay: 4s;   width: 38px; opacity: .4; }

.hero-content {
  position: relative;
  z-index: 1;
  padding: 60px 40px 60px 48px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(58,134,255,.2);
  border: 1.5px solid rgba(58,134,255,.4);
  color: var(--gold);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}
.hero-title .highlight {
  color: var(--orange);
  display: inline;
}

/* Recolour black-on-transparent paw PNG to site blue.
   invert(1) turns black to white which has no saturation so hue-rotate does nothing.
   Instead, invert(45%) lands on a mid-grey that carries enough saturation for the
   sepia+saturate+hue-rotate chain to push it into a vivid blue. */
.paw-img {
  display: inline-block;
  vertical-align: middle;
  filter: invert(45%) sepia(80%) saturate(800%) hue-rotate(180deg) brightness(105%);
}
.hero-desc {
  color: rgba(255,255,255,.75);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 480px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-stat {
  color: rgba(255,255,255,.8);
}
.hero-stat strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--white);
  white-space: nowrap;
}
.hero-stat span { font-size: .8rem; }

.hero-image {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.hero-image-blob {
  position: relative;
  width: 100%;
  max-width: 460px;
}
.hero-blob-bg {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(58,134,255,.25) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse 4s ease-in-out infinite;
}
.hero-img {
  width: 100%;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
  animation: float 6s ease-in-out infinite;
}

/* ─── Feature Strip — single-line looping ticker tape ────────── */
.feature-strip {
  background: var(--orange);
  border-top: 3px solid var(--brown-dark);
  border-bottom: 3px solid var(--brown-dark);
  padding: 9px 0;
  overflow: hidden;
}
.feature-strip-track {
  display: flex;
  align-items: center;
  width: max-content;
}
/* Animation only kicks in once JS has repeated the items to fill the width
   and duplicated the row, so the -50% loop is always gap-free. */
.feature-strip-track.is-ready { animation: ticker linear infinite; } /* duration set inline by JS */
.feature-strip:hover .feature-strip-track.is-ready { animation-play-state: paused; }
.feature-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  color: var(--white);
  font-family: var(--font-head);
  /* 700, not 800 — the whole item used to sit at 800, which left no headroom
     for <strong>, so **bold** typed in the admin was invisible and the strip
     just read as uniformly bold. Same 700/900 split the announcement bar uses. */
  font-weight: 700;
  font-size: .88rem;
  white-space: nowrap;
  border-right: 2px solid rgba(255,255,255,.35);
}
.feature-strip-item strong { font-weight: 900; }
.feature-strip-icon { display: inline-flex; align-items: center; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-strip-track.is-ready { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 0 rgba(28,28,46,.15), 0 12px 40px rgba(28,28,46,.18);
}

.product-card-badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* each badge hugs its own text — without this they
                                all stretch to the widest (BESTSELLER), leaving
                                SALE and NEW adrift at the left of a wide pill */
  gap: 4px;
  z-index: 2;
}
.product-card-image {
  background: var(--cream);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--border);
  overflow: hidden;
  position: relative;
}
.product-card-image svg { width: 100%; height: 100%; max-height: 200px; object-fit: contain; padding: 20px; }
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .product-card-image img { transform: scale(1.05); }

.product-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card-category {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 4px;
}
.product-card-name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 6px;
  line-height: 1.2;
}
.product-card-desc {
  font-size: .8rem;
  color: var(--brown-mid);
  line-height: 1.5;
  margin-bottom: 10px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-stars { margin-bottom: 8px; }

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.product-price-wrap { display: flex; align-items: baseline; gap: 6px; }
.product-price {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--navy);
}
.product-price-original {
  font-size: .85rem;
  color: var(--brown-mid);
  text-decoration: line-through;
}
.product-points {
  font-size: .72rem;
  color: var(--orange);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
}
.product-atc-btn {
  padding: 9px 14px;
  font-size: .82rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ─── Section Spacing ────────────────────────────────────────── */
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }

/* ─── Category Cards ─────────────────────────────────────────── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.category-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 0 rgba(28,28,46,.15), 0 10px 30px rgba(28,28,46,.16);
}
.category-card-media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-bottom: var(--border);
  background: var(--cream);
}
.category-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.category-card:hover .category-card-media img { transform: scale(1.06); }
.category-card-body { padding: 24px 22px 26px; }
.category-card-name {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 6px;
}
.category-card-desc {
  color: var(--brown-mid);
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ─── About Section ──────────────────────────────────────────── */
.about-section {
  background: var(--cream-dark);
  border-top: var(--border);
  border-bottom: var(--border);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-image-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: var(--border);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1;
  background: var(--cream-darker);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.about-checks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0;
}
.about-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.about-check-icon {
  width: 32px; height: 32px;
  background: var(--orange);
  border-radius: 50%;
  border: 2px solid var(--brown-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.about-check-text strong { display: block; font-weight: 700; font-size: .95rem; }
.about-check-text span  { color: var(--brown-mid); font-size: .85rem; }

/* ─── Points Preview Section ─────────────────────────────────── */
.points-section {
  background-color: var(--navy);
  background-image: url("../images/bg-navy.jpg");
  background-size: cover;
  background-position: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.points-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 10% 80%, rgba(58,134,255,.2) 0%, transparent 50%),
                    radial-gradient(circle at 90% 20%, rgba(240,192,80,.12) 0%, transparent 40%);
  pointer-events: none;
}
.points-tiers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.tier-card {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  padding: 20px 12px;
  text-align: center;
  transition: background var(--transition), transform var(--transition);
}
.tier-card:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-4px);
}
.tier-card.active {
  background: rgba(58,134,255,.2);
  border-color: var(--orange);
}
.tier-badge { font-size: 2.2rem; margin-bottom: 8px; }
.tier-name {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: .9rem;
  margin-bottom: 4px;
}
.tier-pts {
  font-size: .72rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}
.tier-bonus {
  font-size: .75rem;
  font-weight: 700;
  color: var(--gold);
}

/* ─── Newsletter Section ─────────────────────────────────────── */
.newsletter-section {
  background: var(--orange);
  border-top: 3px solid var(--brown-dark);
  border-bottom: 3px solid var(--brown-dark);
  position: relative;
  overflow: hidden;
}
.newsletter-section::before {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  right: -40px; bottom: -70px;
  opacity: .08;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cellipse cx='12' cy='15.5' rx='4.6' ry='3.7'/%3E%3Cellipse cx='6.6' cy='10.8' rx='1.7' ry='2.2'/%3E%3Cellipse cx='17.4' cy='10.8' rx='1.7' ry='2.2'/%3E%3Cellipse cx='9.4' cy='7.6' rx='1.6' ry='2.1'/%3E%3Cellipse cx='14.6' cy='7.6' rx='1.6' ry='2.1'/%3E%3C/svg%3E");
  pointer-events: none;
}
.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.newsletter-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--white);
}
.newsletter-sub {
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  margin-top: 8px;
  line-height: 1.6;
}
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newsletter-row { display: flex; gap: 10px; }
.newsletter-input {
  flex: 1;
  padding: 13px 18px;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--white);
  font-size: .95rem;
  outline: none;
  transition: box-shadow var(--transition);
}
.newsletter-input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.4); }
.newsletter-note {
  font-size: .75rem;
  color: rgba(255,255,255,.75);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,.75);
  border-top: 3px solid var(--orange);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 60px 0 40px;
}
.footer-brand p {
  font-size: .875rem;
  line-height: 1.7;
  margin: 12px 0 20px;
  max-width: 260px;
}
.footer-logo-img { height: 50px; margin-bottom: 8px; }
.footer-logo-name {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--white);
}
.footer-logo-name span { color: var(--orange); }

/* Logo + wordmark side by side (condensed brand header) */
.footer-brand-top {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  text-decoration: none;
}
.footer-brand-top .footer-logo-img { height: 46px; margin-bottom: 0; }
.footer-brand-top .footer-logo-name { font-size: 1.35rem; }
.footer-brand .footer-contact { margin-top: 14px; font-size: .82rem; color: rgba(255,255,255,.55); }

.footer-heading {
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links a {
  font-size: .875rem;
  transition: color var(--transition);
  color: rgba(255,255,255,.65);
}
.footer-links a:hover { color: var(--orange); }

/* Footer accordion — plain headings on desktop, collapsible bars on mobile */
.footer-acc-toggle {
  background: none;
  border: none;
  padding: 0;
  width: auto;
  cursor: default;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-acc-chevron { display: none; }

/* Pooch Points page grids — fixed column counts overflowed on small screens */
.pp-steps-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pp-tier-grid   { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pp-reward-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pp-tier-grid > *, .pp-reward-grid > *, .pp-steps-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .pp-steps-grid  { grid-template-columns: 1fr; gap: 20px; }
  .pp-tier-grid   { grid-template-columns: repeat(3, 1fr); }
  .pp-reward-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pp-tier-grid   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pp-reward-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.social-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background var(--transition);
  color: var(--white);
}
.social-btn:hover { background: var(--orange); border-color: var(--brown-dark); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .8rem;
}
.footer-payments { display: flex; gap: 8px; align-items: center; }
.payment-badge {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: .7rem;
  font-weight: 700;
  color: rgba(255,255,255,.8);
}

/* ═══════════════════════════════════════════════════════════════
   SHOP PAGE
   ═══════════════════════════════════════════════════════════════ */
.shop-header {
  background: var(--navy);
  color: var(--white);
  padding: 48px 0 40px;
  border-bottom: 3px solid var(--orange);
}
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 40px 0;
}
.shop-sidebar {
  flex-shrink: 0;
}
.shop-sidebar-card {
  background: var(--white);
  border-radius: var(--radius);
  border: var(--border);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.sidebar-heading {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cream-dark);
}
.sidebar-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .9rem;
  transition: background var(--transition);
}
/* Keeps two adjacent highlighted rows from merging into one solid block when
   several quick filters are on at once. */
.sidebar-filter-item + .sidebar-filter-item { margin-top: 4px; }
.sidebar-filter-item:hover { background: var(--cream-dark); }
.sidebar-filter-item.active {
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
}
.sidebar-filter-item input[type=checkbox] { accent-color: var(--orange); }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.shop-result-count { font-size: .9rem; color: var(--brown-mid); }
.shop-clear-filters {
  margin-left: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--orange);
  text-decoration: underline;
  white-space: nowrap;
}
.shop-clear-filters:hover { color: var(--navy); }
/* Live search: dim the results while the refreshed set is on its way */
#shop-results { transition: opacity .12s ease; }
#shop-results.is-loading { opacity: .45; }

/* Way back out of a search from the foot of the results. Desktop keeps the
   sidebar search in view, so it's only needed on mobile. The media query has to
   follow the base rule — same specificity, so source order decides. */
.shop-viewall-mobile { display: none; margin-top: 24px; }
@media (max-width: 768px) {
  .shop-viewall-mobile { display: block; }
}
.shop-sort select {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: var(--border);
  background: var(--white);
  font-size: .9rem;
  cursor: pointer;
  outline: none;
}
.shop-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.shop-search-input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--white);
  font-size: .9rem;
  outline: none;
}
.shop-search-input:focus { box-shadow: 0 0 0 3px rgba(58,134,255,.2); }

.shop-search-btn {
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 18px;
  background: var(--orange);
  color: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.shop-search-btn:hover {
  background: var(--orange-light);
  transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */
.product-page { padding: 48px 0; }
.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.product-image-main {
  background: var(--cream);
  border-radius: var(--radius-xl);
  border: var(--border);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: calc(var(--header-h) + 20px);
  overflow: hidden;
}
/* Photos fill the rounded frame; the SVG placeholder stays padded/contained */
.product-image-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-image-main svg {
  max-height: 380px;
  max-width: 100%;
  object-fit: contain;
  padding: 30px;
}

/* Image gallery */
/* Image column stays anchored in the flow (not sticky) so it doesn't follow scroll */
.product-gallery { position: static; }
.product-gallery .product-image-main { position: static; top: auto; }
.product-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.product-thumb {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--cream-darker);
  background: var(--cream);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition);
  flex: none;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb.active { border-color: var(--orange); }
.product-thumb:hover { border-color: var(--navy); }

.product-detail-category {
  color: var(--orange);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 8px;
}
.product-detail-name {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 12px;
}
.product-detail-stars { margin-bottom: 16px; }
.product-detail-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.product-detail-price {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 900;
}
.product-detail-sale {
  font-size: 1.2rem;
  color: var(--brown-mid);
  text-decoration: line-through;
}
.product-detail-points {
  background: var(--cream-dark);
  border: 1.5px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.product-detail-desc {
  line-height: 1.75;
  color: var(--brown-dark);
  margin-bottom: 24px;
  font-size: .95rem;
}
.product-qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
/* Add-to-Basket matches the height of the quantity control beside it */
.product-qty-row .btn { height: 50px; padding-top: 0; padding-bottom: 0; }
.product-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  height: 50px;
  border: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}
.product-qty-ctrl button {
  width: 40px; height: 100%;
  background: var(--cream-dark);
  border: none;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--transition);
  font-family: var(--font-head);
}
.product-qty-ctrl button:hover { background: var(--orange); color: var(--white); }
.product-qty-ctrl input {
  width: 52px; height: 100%;
  text-align: center;
  border: none;
  border-left: var(--border);
  border-right: var(--border);
  font-weight: 700;
  font-size: 1rem;
  background: var(--white);
  outline: none;
}
/* Quantity is display-only — change it with the − / + buttons */
.qty-value {
  pointer-events: none;
  user-select: none;
  cursor: default;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
.qty-value::-webkit-inner-spin-button,
.qty-value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.product-detail-meta {
  background: var(--cream-dark);
  border-radius: var(--radius);
  border: 1.5px solid var(--cream-darker);
  padding: 16px;
  margin-top: 24px;
}
.product-meta-row {
  display: flex;
  gap: 8px;
  font-size: .85rem;
  padding: 5px 0;
  border-bottom: 1px solid var(--cream-darker);
}
.product-meta-row:last-child { border-bottom: none; }
.product-meta-label { font-weight: 700; min-width: 100px; color: var(--navy); }
.product-meta-value { color: var(--brown-mid); }

/* Reviews */
.reviews-section { margin-top: 40px; padding: 48px 0; border-top: var(--border); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 24px; }
.review-card {
  background: var(--white);
  border-radius: var(--radius);
  border: var(--border);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1rem;
  border: 2px solid var(--brown-dark);
  flex-shrink: 0;
}
.review-name { font-weight: 700; font-size: .9rem; }
.review-date { font-size: .72rem; color: var(--brown-mid); }
.review-text { font-size: .875rem; line-height: 1.6; color: var(--brown-dark); }

/* ═══════════════════════════════════════════════════════════════
   CART & CHECKOUT PAGES
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  background-color: var(--navy);
  background-image: url("../images/bg-navy.jpg");
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 40px 0;
  border-bottom: 3px solid var(--orange);
}
.page-header h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.page-breadcrumb {
  margin-top: 8px;
  font-size: .82rem;
  color: rgba(255,255,255,.6);
}
.page-breadcrumb a { color: var(--orange); }
.page-breadcrumb a:hover { text-decoration: underline; }

.cart-page-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  padding: 40px 0;
}
.cart-page-items { display: flex; flex-direction: column; gap: 16px; }
.cart-page-item {
  background: var(--white);
  border-radius: var(--radius);
  border: var(--border);
  padding: 20px;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.cart-page-item-img {
  width: 100px; height: 100px;
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--cream-darker);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cart-page-item-img svg,
.cart-page-item-img img { width: 80px; height: 80px; object-fit: contain; }
.cart-page-item-name { font-family: var(--font-head); font-weight: 900; font-size: 1.05rem; margin-bottom: 4px; }
.cart-page-item-meta { font-size: .8rem; color: var(--brown-mid); margin-bottom: 12px; }

.order-summary-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: sticky;
  /* Matches the account sidebar's clearance from the sticky site header. */
  top: calc(var(--header-h) + 100px);
}
.order-summary-head {
  background: var(--navy);
  color: var(--white);
  padding: 16px 20px;
}
.order-summary-head h3 {
  font-family: var(--font-head);
  font-size: 1.05rem;
}
.order-summary-body { padding: 20px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: .9rem;
  border-bottom: 1px solid var(--cream-dark);
}
.summary-row:last-child { border-bottom: none; }
.summary-row.total {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--navy);
  border-top: 2px solid var(--navy);
  margin-top: 8px;
  padding-top: 14px;
}
.summary-row.discount { color: var(--green); }
.shipping-free { color: var(--green); font-weight: 700; }

.points-redeem-box {
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--orange);
  padding: 14px;
  margin-top: 16px;
}
.points-redeem-box h4 {
  font-family: var(--font-head);
  font-size: .9rem;
  margin-bottom: 8px;
  color: var(--orange);
}
.points-redeem-select {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: var(--border);
  font-size: .85rem;
  background: var(--white);
  outline: none;
  margin-bottom: 8px;
}

/* Checkout form */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  padding: 40px 0;
}
.checkout-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.form-section-head {
  background: var(--cream-dark);
  padding: 14px 20px;
  border-bottom: var(--border);
  font-family: var(--font-head);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}
.form-section-body { padding: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--navy);
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: var(--border);
  background: var(--white);
  font-size: .9rem;
  outline: none;
  transition: box-shadow var(--transition), border-color var(--transition);
}
/* A <select> otherwise renders in the browser's own font with its own line box,
   so it came out a different height from the text inputs beside it. Inherit the
   page font and pin both to one height (border-box, so this is exact). */
.form-control { font-family: inherit; line-height: 1.4; }
input.form-control:not([type="file"]),
select.form-control { height: 46px; }

/* iOS gives date/time inputs their own native control with intrinsic sizing,
   which ignores the height above and renders noticeably taller than everything
   beside it. Dropping the native appearance brings them back into line; the
   explicit height then actually applies. */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
input[type="month"].form-control {
  -webkit-appearance: none;
  appearance: none;
  height: 46px;
  min-height: 46px;      /* iOS sizes off min-height once appearance is dropped */
  text-align: left;
  /* Safari centres the value vertically in its own box; padding keeps ours even */
  padding-top: 0;
  padding-bottom: 0;
}
/* The little calendar glyph Safari adds would otherwise stretch the row */
input[type="date"].form-control::-webkit-date-and-time-value,
input[type="datetime-local"].form-control::-webkit-date-and-time-value,
input[type="time"].form-control::-webkit-date-and-time-value {
  text-align: left;
  height: 100%;
  margin: 0;
  line-height: 42px;     /* 46px box minus the 2px borders */
}
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
}
.form-control:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(58,134,255,.15);
}
.form-control.error { border-color: var(--red); }
.form-error { color: var(--red); font-size: .75rem; margin-top: 4px; }

#paypal-button-container {
  margin-top: 16px;
}

/* ─── Auth Pages ─────────────────────────────────────────────── */
.auth-page {
  /* Enough to sit comfortably above the footer without forcing a full
     viewport — a 100vh block here made login/register needlessly long,
     since you always had to scroll a whole screen to reach the footer. */
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: var(--cream-dark);
}
/* Auth page on the hero backdrop — used by the admin login, which has no site
   header, so it fills the whole viewport rather than sitting under one. */
.auth-page-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: var(--navy);
  background-image: url("../images/bg-navy.jpg");
  background-size: cover;
  background-position: center;
}
.auth-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 30% 50%, rgba(58,134,255,.15) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(240,192,80,.08) 0%, transparent 50%);
}
.auth-floating {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.auth-float-el {
  position: absolute;
  width: 42px;
  opacity: .5;
  animation: floatRandom 8s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.auth-float-el img { width: 100%; height: auto; display: block; }
/* Kept clear of the centred card */
.auth-float-el:nth-child(1) { top: 12%; left: 8%;  width: 46px; opacity: .55; animation-delay: 0s;   }
.auth-float-el:nth-child(2) { top: 31%; left: 20%; width: 34px; opacity: .42; animation-delay: 1.5s; }
.auth-float-el:nth-child(3) { top: 63%; left: 10%; width: 52px; opacity: .5;  animation-delay: 3s;   }
.auth-float-el:nth-child(4) { top: 83%; left: 23%; width: 38px; opacity: .45; animation-delay: .8s;  }
.auth-float-el:nth-child(5) { top: 10%; left: 79%; width: 40px; opacity: .5;  animation-delay: 2.2s; }
.auth-float-el:nth-child(6) { top: 34%; left: 88%; width: 50px; opacity: .45; animation-delay: 4s;   }
.auth-float-el:nth-child(7) { top: 67%; left: 81%; width: 36px; opacity: .5;  animation-delay: 1.1s; }
.auth-float-el:nth-child(8) { top: 85%; left: 66%; width: 44px; opacity: .4;  animation-delay: 3.4s; }
/* Card above the backdrop and the icons */
.auth-page-hero .auth-card { position: relative; z-index: 1; }

/* On a phone the card fills most of the width, so keep only the four corner
   icons and tuck them right into the corners where they still read. */
@media (max-width: 768px) {
  .auth-float-el:nth-child(2),
  .auth-float-el:nth-child(4),
  .auth-float-el:nth-child(6),
  .auth-float-el:nth-child(8) { display: none; }
  .auth-float-el:nth-child(1) { top: 4%;  left: 5%;  width: 34px; }
  .auth-float-el:nth-child(3) { top: 88%; left: 7%;  width: 38px; }
  .auth-float-el:nth-child(5) { top: 5%;  left: 79%; width: 30px; }
  .auth-float-el:nth-child(7) { top: 90%; left: 76%; width: 32px; }
}

.auth-card {
  /* Navy, not white. The overflow clip that rounds the corners is antialiased
     against this background, so with a white card the partly-covered pixels on
     the top curves blended navy→white and showed a pale hairline between the
     header and the navy border. Navy behind navy makes that blend invisible —
     every colour in the top corners is now the same. The body paints its own
     white with matching bottom corners. */
  background: var(--navy);
  border-radius: var(--radius-xl);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}
.auth-card-head {
  background: var(--navy);
  padding: 32px 32px 24px;
  text-align: center;
  border-bottom: 3px solid var(--orange);
  /* Round the top corners to the card's INNER curve (outer radius minus the
     border). Relying on the parent's overflow:hidden alone antialiases this
     navy block against the card's white background, which leaves a pale
     hairline between it and the navy border at each corner. */
  border-radius: calc(var(--radius-xl) - 3px) calc(var(--radius-xl) - 3px) 0 0;
}
.auth-card-head img { height: 60px; margin: 0 auto 12px; }
.auth-card-head h2 {
  color: var(--white);
  font-size: 1.4rem;
}
.auth-card-head p { color: rgba(255,255,255,.7); font-size: .875rem; margin-top: 4px; }
.auth-card-body {
  padding: 28px 32px 32px;
  background: var(--white);
  /* 1px squarer than the card's inner curve, so it paints under the border
     and gets trimmed by the clip rather than leaving a gap at the corner */
  border-radius: 0 0 calc(var(--radius-xl) - 3px) calc(var(--radius-xl) - 3px);
}
.auth-divider {
  text-align: center;
  position: relative;
  margin: 20px 0;
  color: var(--brown-mid);
  font-size: .8rem;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--cream-darker);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-footer {
  text-align: center;
  font-size: .85rem;
  color: var(--brown-mid);
  padding-top: 16px;
  border-top: 1px solid var(--cream-dark);
  margin-top: 16px;
}
.auth-footer a { color: var(--orange); font-weight: 700; }

/* ─── Account Page ───────────────────────────────────────────── */
.account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 40px 0;
}
/* The grid cell stretches to the full row height; the inner panel sticks within
   it, so the sidebar stays pinned no matter how tall the content column is
   (more robust than making the grid item itself sticky). */
.account-sidebar-col { min-width: 0; }
.account-sidebar {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: sticky;
  /* Stick well clear of the 73px sticky site-header so the panel is never tucked
     under it (the extra room reads better than a tight gap). */
  top: calc(var(--header-h) + 100px);
}
.account-sidebar-profile {
  background: var(--navy);
  padding: 24px;
  text-align: center;
  color: var(--white);
  border-bottom: 3px solid var(--orange);
}
.account-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--white);
  margin: 0 auto 10px;
}
.account-name { font-family: var(--font-head); font-weight: 900; font-size: 1.1rem; }
.account-email { font-size: .75rem; opacity: .7; }
.account-nav { padding: 12px; }
.account-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy);
  transition: background var(--transition), color var(--transition);
}
.account-nav a:hover { background: var(--cream-dark); }
.account-nav a.active { background: var(--orange); color: var(--white); }
.account-nav-icon { font-size: 1rem; width: 20px; text-align: center; }

.account-content { display: flex; flex-direction: column; gap: 24px; }
.account-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.account-card-head {
  background: var(--cream-dark);
  padding: 16px 20px;
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.account-card-head h3 {
  font-family: var(--font-head);
  font-size: 1.05rem;
}
.account-card-body { padding: 20px; }

/* Points card */
.points-balance-display {
  text-align: center;
  padding: 24px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.points-balance-number {
  font-family: var(--font-head);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.points-balance-label { font-size: .85rem; opacity: .75; margin-top: 4px; }
.points-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .82rem;
  font-weight: 700;
}

.points-progress-wrap {
  margin-bottom: 24px;
}
.points-progress-bar-track {
  height: 12px;
  background: var(--cream-darker);
  border-radius: 999px;
  border: 1.5px solid var(--cream-darker);
  overflow: hidden;
  margin: 8px 0;
}
.points-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  border-radius: 999px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.points-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--brown-mid);
}

.points-history { display: flex; flex-direction: column; gap: 10px; }
.points-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  border: 1px solid var(--cream-darker);
}
.points-history-desc { font-size: .85rem; font-weight: 500; }
.points-history-date { font-size: .72rem; color: var(--brown-mid); }
.points-history-amount { font-family: var(--font-head); font-weight: 900; }
.points-history-amount.positive { color: var(--green); }
.points-history-amount.negative { color: var(--red); }

/* Orders table */
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th {
  background: var(--cream-dark);
  padding: 10px 14px;
  text-align: left;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  border-bottom: var(--border);
}
.orders-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--cream-dark);
  font-size: .875rem;
}
.orders-table tr:last-child td { border-bottom: none; }
.orders-table-clickable tbody tr { transition: background .15s ease; }
.orders-table-clickable tbody tr:hover { background: var(--cream-dark); }

/* Orders table → stacked cards on narrow screens (a squished table reads badly) */
@media (max-width: 560px) {
  .orders-card-body { padding: 14px !important; }
  .orders-table, .orders-table tbody { display: block; }
  .orders-table thead { display: none; }
  .orders-table tr {
    display: block;
    background: var(--cream-dark);
    border: 1.5px solid var(--cream-darker);
    border-radius: var(--radius);
    padding: 4px 14px;
    margin-bottom: 12px;
  }
  .orders-table tr:last-child { margin-bottom: 0; }
  .orders-table-clickable tbody tr:hover { background: var(--cream-darker); }
  .orders-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cream-darker);
    font-size: .9rem;
  }
  .orders-table td:last-child { border-bottom: none; }
  /* Row labels from data-label */
  .orders-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--brown-mid);
    font-size: .8rem;
  }
  /* Order number as a prominent header row (no label) */
  .orders-table td.order-num-cell {
    border-bottom: 2px solid var(--cream-darker);
    padding: 12px 0 10px;
  }
  .orders-table td.order-num-cell::before { content: none; }
  .orders-table td.order-num-cell a { font-size: 1.05rem; }
  /* Hide the desktop chevron cell */
  .orders-table td.chevron-cell { display: none; }
}
.order-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.status-paid       { background: rgba(74,124,47,.10);  color: var(--green); }
.status-pending    { background: rgba(240,192,80,.20);  color: #8a6d00; }
.status-processing { background: rgba(58,134,255,.12);  color: #1D5FD1; }
.status-shipped    { background: rgba(28,28,46,.08);    color: var(--navy); }
.status-delivered  { background: rgba(74,124,47,.20);   color: #2F5A1C; }
.status-approved   { background: rgba(74,124,47,.20);   color: #2F5A1C; }
.status-cancelled  { background: rgba(192,57,43,.10);   color: var(--red); }

/* ─── Success Page ───────────────────────────────────────────── */
.success-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
}
.success-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
  max-width: 540px;
  width: 100%;
}
.success-icon {
  font-size: 4.5rem;
  margin-bottom: 16px;
  animation: bounceIn .6s cubic-bezier(.34,1.56,.64,1);
}
.success-title { font-size: 2rem; margin-bottom: 8px; }
.success-sub { color: var(--brown-mid); margin-bottom: 24px; line-height: 1.6; }
.success-points-earned {
  background: var(--cream-dark);
  border: 1.5px solid var(--orange);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 28px;
  color: var(--orange);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
}

/* ─── Alert / Flash ──────────────────────────────────────────── */
/* Not a flex row. Flex turns every inline child into its own flex item, so a
   message containing <strong> or a link was split into separate columns with
   gaps mid-sentence — which fell apart completely on narrow screens. Alert
   bodies are inline content, so let the text flow; .ico already carries
   inline-block + vertical-align, so leading icons still sit on the baseline. */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 4px solid;
  margin-bottom: 16px;
  font-size: .875rem;
  line-height: 1.6;
}
.alert > .ico { margin-right: 5px; }
.alert svg { flex: none; }
.alert-error   { background: rgba(192,57,43,.08);  border-color: var(--red);   color: var(--red); }
.alert-success { background: rgba(74,124,47,.08);  border-color: var(--green); color: var(--green); }
.alert-info    { background: rgba(28,28,46,.06);   border-color: var(--navy);  color: var(--navy); }
.alert-orange  { background: rgba(58,134,255,.1);  border-color: var(--orange);color: var(--brown-dark); }

/* ─── Full-screen redirect overlay (checkout → Stripe) ───────── */
.checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28,28,46,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.checkout-overlay.show { display: flex; }
.checkout-overlay-box {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 32px 40px;
  text-align: center;
  max-width: 340px;
  width: 100%;
}
.checkout-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border: 5px solid var(--cream-darker);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.checkout-overlay-box p {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════════════════════════ */
.admin-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
}
.admin-sidebar {
  background: var(--navy);
  color: var(--white);
  padding: 0;
  border-right: 3px solid var(--orange);
}
.admin-sidebar-brand {
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-align: center;
}
.admin-sidebar-logo-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  margin: 0 auto 10px;
  display: block;
}
.admin-sidebar-logo {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1rem;
  color: var(--white);
}
.admin-sidebar-logo span { color: var(--orange); }
.admin-brand-link { display: block; color: inherit; text-decoration: none; }
/* Burger + scrim only exist on mobile */
.admin-burger { display: none; }
.admin-nav-scrim { display: none; }
.admin-sidebar-nav { padding: 12px; display: flex; flex-direction: column; }
.admin-nav-spacer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px !important; }
.admin-nav-signout { color: rgba(255,100,100,.85) !important; }
.admin-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.75);
  font-weight: 600;
  font-size: .875rem;
  transition: all var(--transition);
  margin-bottom: 2px;
}
.admin-sidebar-nav a:hover { background: rgba(255,255,255,.08); color: var(--white); }
.admin-sidebar-nav a.active { background: var(--orange); color: var(--white); }
/* min-width:0 — a grid item defaults to min-width:auto, which lets a wide table
   push the whole column past the viewport instead of scrolling inside its own box. */
.admin-main { background: var(--cream-dark); min-height: 100vh; min-width: 0; }
.admin-topbar {
  background: var(--white);
  border-bottom: var(--border);
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-content { padding: 24px; }
.admin-card {
  background: var(--white);
  border-radius: var(--radius);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}
.admin-card-head {
  background: var(--cream-dark);
  padding: 14px 20px;
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-card-head h3 { font-family: var(--font-head); font-size: 1rem; }
.admin-card-body { padding: 20px; }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  border: var(--border);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.stat-card-value {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 900;
  color: var(--orange);
}
.stat-card-label { font-size: .8rem; color: var(--brown-mid); margin-top: 4px; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  background: var(--cream-dark);
  padding: 10px 14px;
  text-align: left;
  font-size: .8rem;
  font-weight: 700;
  border-bottom: var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--cream-dark);
  font-size: .875rem;
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--cream-dark); }

/* ═══════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes float {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-14px); }
}
@keyframes floatRandom {
  0%, 100% { transform: translateY(0) rotate(0deg);   }
  33%       { transform: translateY(-12px) rotate(6deg);  }
  66%       { transform: translateY(-6px) rotate(-4deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: .6; }
  50%       { transform: scale(1.06); opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.9); }
}
@keyframes bounceIn {
  from { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  to   { transform: scale(1); }
}
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

.loading-skeleton {
  background: linear-gradient(90deg, var(--cream-dark) 25%, var(--cream-darker) 50%, var(--cream-dark) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .header-nav { display: none; }
  .hamburger  { display: grid; }   /* grid, so the menu/close icons stack in one cell */
  .header-signin { display: none; }
  /* Top bar: cart on the left, logo centered, hamburger on the right */
  .header-inner { position: relative; }
  .header-logo {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .header-actions { width: 100%; margin-left: 0; justify-content: space-between; gap: 10px; }
  /* Plain cart icon (no circular button) on the mobile top bar */
  .header-cart { background: none; border: none; }
  .header-cart:hover { background: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-content {
    margin-left: 0;
    padding: 20px 20px 40px;
    text-align: center;
  }
  /* The 480px cap still applies, so without auto margins the paragraph block
     hugs the left edge on anything wider than ~520px (tablets, phones in
     landscape) — the centred text then reads as left-aligned. */
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-stats { justify-content: center; }
  /* Logo moves to the top of the hero on mobile, at ~2/3 the size */
  .hero-image { padding: 26px 20px 4px; order: -1; }
  .hero-image-blob { max-width: 193px; margin: 0 auto; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .points-tiers { grid-template-columns: repeat(3, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  /* ── Admin on tablet/mobile: the sidebar collapses to a sticky bar with a
     burger menu. display:block (not grid) so position:sticky actually sticks
     — inside a grid the sidebar's containing block is just its own row. ── */
  .admin-layout { display: block; }
  .admin-sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    border-right: none;
    border-bottom: 3px solid var(--orange);
  }
  .admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px 14px;
    border-bottom: none;
  }
  .admin-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    min-width: 0;
  }
  .admin-sidebar-logo-img { width: 34px; height: 34px; margin: 0; flex: none; }
  .admin-sidebar-logo { font-size: .95rem; }

  /* Burger button — inline SVG, for the same force-dark reason as .hamburger.
     The bars used to be spans painted with `background: #FFF`, which Android
     force-dark re-tints; SVG artwork it leaves alone. */
  .admin-burger {
    display: grid;                  /* both icons share one cell */
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: #FFFFFF;
    transition: background var(--transition), border-color var(--transition);
  }
  .admin-burger-ico {
    grid-area: 1 / 1;
    transition: opacity .2s ease, transform .2s ease;
  }
  .admin-burger-ico--close,
  .admin-nav-open .admin-burger-ico--open { opacity: 0; transform: rotate(-90deg); }
  .admin-nav-open .admin-burger-ico--close { opacity: 1; transform: rotate(0); }
  .admin-nav-open .admin-burger { background: var(--orange); border-color: var(--orange); }

  /* Nav becomes a drop-down panel that overlays the page rather than pushing it */
  .admin-sidebar-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    background: var(--navy);
    border-bottom: 3px solid var(--orange);
    box-shadow: 0 14px 28px rgba(28,28,46,.32);
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    transition: max-height .28s ease, padding .28s ease;
  }
  /* A fixed max-height silently clipped the last items every time a nav entry
     was added (Reviews and Promo Codes hid View Site and Sign Out). Cap against
     the viewport instead and let it scroll, so it can never cut items off. */
  .admin-nav-open .admin-sidebar-nav {
    max-height: calc(100vh - 60px);
    /* dvh accounts for the mobile address bar; ignored where unsupported. */
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* scrolling the menu shouldn't drag the page */
    padding: 10px 12px 14px;
  }
  .admin-sidebar-nav a { margin-bottom: 0; padding: 12px 14px; font-size: .95rem; }
  .admin-nav-spacer { margin-top: 6px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px !important; }

  .admin-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(28,28,46,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .admin-nav-open .admin-nav-scrim { opacity: 1; pointer-events: auto; }

  /* ── Content fit ── */
  .admin-main { min-height: 0; }
  .admin-topbar { padding: 0 14px; height: 52px; gap: 10px; }
  .admin-topbar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-topbar > span:last-child { flex: none; font-size: .78rem !important; }
  .admin-content { padding: 16px; }
  .admin-card { margin-bottom: 16px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 14px; }
  .stat-card-value { font-size: clamp(1.15rem, 5.2vw, 1.5rem); letter-spacing: -.01em; word-break: break-word; }
  .stat-card-label { font-size: .72rem; }
  .spec-row { grid-template-columns: 1fr; gap: 6px; align-items: start; }
}

/* ─── Admin: sortable headers, pagination, toolbars ─────────── */
.dt-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.dt-sort:hover { color: var(--orange); }
.dt-caret { display: inline-flex; color: var(--orange); }

.admin-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 16px matches the table cells' inset — at 4px the buttons sat proud of the
     table edge and read as overhanging it. */
  padding: 14px 16px 16px;
}
.admin-pagination .pg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 34px;
  justify-content: center;
  padding: 7px 11px;
  border: 1.5px solid var(--cream-darker);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
.admin-pagination .pg:hover { border-color: var(--orange); color: var(--orange); }
.admin-pagination .pg.active { background: var(--orange); border-color: var(--orange); color: var(--white); }
.admin-pagination .pg.disabled { opacity: .45; pointer-events: none; }
.admin-pagination .pg-gap { color: var(--brown-mid); padding: 0 2px; }

/* Product spec rows (checkbox + value) on the edit page */
.spec-grid { display: flex; flex-direction: column; gap: 8px; }
.spec-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  align-items: center;
}
.spec-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  padding: 8px 10px;
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
}
.spec-check input { accent-color: var(--orange); width: 17px; height: 17px; flex: none; }
@media (max-width: 620px) {
  .spec-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Tiny rich-text toolbar */
.rt-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rt-toolbar .btn { min-width: 38px; padding: 5px 10px; }
.rt-hint { font-size: .76rem; color: var(--brown-mid); }
.rt-hint code { background: var(--cream-dark); padding: 1px 5px; border-radius: 4px; font-size: .95em; }

.admin-order-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
}
/* Grid tracks size to min-content by default, so one long unbreakable token
   (a Stripe session ref, say) can stretch the whole page. Pin the columns. */
.admin-order-grid > * { min-width: 0; }
/* Mobile-only table lines are hidden on desktop (see .dt-only in the mobile block) */
.dt-only { display: none; }
/* Long machine-generated identifiers — wrap them anywhere rather than push. */
.admin-ref { word-break: break-all; }
.admin-wrap { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .admin-order-grid { grid-template-columns: 1fr; }
  .admin-order-cust { grid-template-columns: 1fr !important; }
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.admin-search { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.admin-search input { flex: 1; min-width: 0; }
.admin-search .btn { flex: none; white-space: nowrap; }
.admin-filter-select { flex: none; width: auto; min-width: 165px; }
.admin-meta { font-size: .82rem; color: var(--brown-mid); }

/* Toolbar stacks on mobile: a full-width search field with its button alongside,
   then the status filter, then the result count centred underneath.
   Must sit after the base rules above — same specificity, later wins. */
@media (max-width: 768px) {
  .admin-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-search { width: 100%; min-width: 0; }
  .admin-filter-select { width: 100%; min-width: 0; }
  .admin-toolbar > .btn { width: 100%; justify-content: center; }
  /* Scoped to the toolbar deliberately: unscoped, this centred every bit of
     explanatory copy in every card body on a phone. */
  .admin-toolbar .admin-meta { width: 100%; text-align: center; }
}

/* ─── Admin data tables on mobile ─────────────────────────────
   Each row becomes a 6-column grid so cells can share a line instead of every
   field costing a full row. Rows are plain sections of the surrounding
   .admin-card — no border/radius of their own, or you get a card inside a card.

   Per-cell classes:
     .dt-head    title, left of row 1
     .dt-aside   small muted value, right of row 1
     .dt-wide    make the title span the full width (no aside)
     .dt-half    two per line   (span 3)
     .dt-third   three per line (span 2)
     .dt-actions full-width button footer
     .dt-hide    drop entirely on mobile
   Unclassed cells stay full-width with the label left and value right.

   768px matches the admin layout breakpoint, so there's no band where the
   shell is mobile but the tables are still full-width grids. */
@media (max-width: 768px) {
  .data-table, .data-table tbody { display: block; }
  .data-table thead { display: none; }

  /* Four tracks: two content-sized for the left-hand group, one flexible that
     soaks up the extra width, one content-sized for the row-1 meta. Equal
     fractions would make the left group drift rightwards as the row widens;
     content-sized tracks keep it anchored under the title.
     Cells that span the flexible track contribute nothing to sizing tracks
     1, 2 and 4, so a long email can't stretch them. No column-gap — it stacks
     on top of the track slack and leaves dead space before a .dt-sep rule. */
  .data-table tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    column-gap: 0;
    padding: 13px 16px;
    border-bottom: 1.5px solid var(--cream-dark);
  }
  .data-table tr:last-child { border-bottom: none; }
  .data-table tr:hover td { background: transparent; }

  /* Default: full width, label left / value right */
  .data-table td {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 5px 0;
    border-bottom: none;
    font-size: .88rem;
    text-align: right;
  }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--brown-mid);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    flex: none;
  }

  /* Row 1: title left, meta right. Both placed explicitly so source order
     (image before name, say) doesn't decide which side they land on.
     display:block so a title can carry a sub-line under it. */
  .data-table td.dt-head {
    grid-column: 1 / 4;
    grid-row: 1;
    display: block;
    text-align: left;
    font-size: 1rem;
    padding: 0 0 3px;
  }
  .data-table td.dt-head.dt-wide { grid-column: 1 / -1; }
  .data-table td.dt-head::before { content: none; }
  .data-table td.dt-aside {
    grid-column: 4;
    grid-row: 1;
    justify-content: flex-end;
    text-align: right;
    font-size: .78rem;
    color: var(--brown-mid);
    padding: 0 0 3px;
  }
  .data-table td.dt-aside::before { content: none; }

  /* Cells that share a line keep "LABEL: value" on one line, packed left into
     the content-sized tracks so they stay put when the row gets wider. */
  .data-table td.dt-half,
  .data-table td.dt-third {
    /* spans both content tracks so a wider value on another line (FEATURED,
       say) doesn't inflate track 1 and push the divider away from the value */
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    text-align: left;
    padding: 8px 10px 3px 0;
  }
  .data-table td.dt-half::before,
  .data-table td.dt-third::before {
    content: attr(data-label) ':';
    display: inline;
    margin: 0;
  }
  /* The right-hand item of a shared line — spans the flexible track */
  .data-table td.dt-end {
    grid-column: 3 / -1;
    justify-content: flex-end;
    text-align: right;
    padding-right: 0;
  }
  /* The cell immediately before a divider sits in track 1 alone, so track 1
     sizes to exactly its content and the rule lands 11px past the value */
  .data-table td.dt-lead { grid-column: 1; padding-right: 11px; }
  /* Thin rule between values grouped on the left, evenly spaced either side */
  .data-table td.dt-sep {
    grid-column: 2;
    border-left: 1px solid rgba(139,94,60,.22);
    padding-left: 11px;
  }
  /* Value speaks for itself (a status pill) — drop the label */
  .data-table td.dt-nolabel::before { content: none; }

  /* Detail that isn't worth the space on a phone (product slug, etc.) */
  .dt-hide { display: none !important; }
  /* …and its counterpart: a line that only appears on mobile */
  .dt-only { display: block; }

  /* "No orders found" etc. spans the row — centre it */
  .data-table td[colspan] {
    grid-column: 1 / -1;
    display: block;
    text-align: center;
    padding: 28px 12px;
  }
  .data-table td[colspan]::before { content: none; }

  /* Action footer: no label, buttons span the width */
  .data-table td.dt-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 8px;
    padding: 11px 0 1px;
  }
  .data-table td.dt-actions::before { content: none; }
  .data-table td.dt-actions > * { flex: 1; min-width: 0; }
  .data-table td.dt-actions .btn,
  .data-table td.dt-actions form { display: flex; }
  .data-table td.dt-actions .btn { justify-content: center; }
  .data-table td.dt-actions form .btn { width: 100%; }
  /* A status pill sitting beside the action button (reviews list). flex:none
     stops it splitting the row 50/50 with the button, and align-self:stretch
     matches the button's height without hardcoding one. */
  .data-table td.dt-actions .review-row-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    align-self: stretch;
    padding: 4px 14px;
  }
}

@media (max-width: 768px) {
  :root { --header-h: 60px; }
  .section { padding: 56px 0; }
  /* Hero: drop the "Natural · Handmade · Loved" pill and tighten the logo gap */
  .hero-eyebrow { display: none; }
  .hero-image { padding: 14px 20px 0; margin-bottom: -47px; }
  .hero-content { padding-top: 0; }
  .categories-grid { grid-template-columns: 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { order: -1; }
  /* Keep "Showing X products" left of the sort dropdown even when it's long:
     it takes the remaining space (shrinkable, so it wraps in place) and centres. */
  .shop-toolbar { flex-wrap: nowrap; align-items: center; }
  .shop-result-count { flex: 1; min-width: 0; text-align: center; }
  .shop-sort { flex: none; }
  .product-layout { grid-template-columns: 1fr; }
  /* Add to Basket sits to the right of the quantity selector */
  .product-qty-row { flex-wrap: nowrap; gap: 10px; }
  .product-qty-row .btn { flex: 1; min-width: 0; }
  .product-gallery { position: static; top: auto; }
  .product-image-main { position: static; aspect-ratio: 1; }
  /* Clear gap from the header banner above and the footer below.
     Uses .container.product-page so it beats the later `.container` padding. */
  .container.product-page { padding-top: 26px; padding-bottom: 44px; }
  /* Centre the customer-reviews section */
  .reviews-section { text-align: center; }
  .reviews-section .review-card { text-align: left; }
  /* Let single-column layout children shrink instead of forcing horizontal
     overflow (grid/flex items default to min-width:auto = min-content). */
  .product-layout > *, .shop-layout > *, .cart-page-layout > *,
  .checkout-layout > *, .account-layout > * { min-width: 0; }
  .cart-page-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .newsletter-grid { grid-template-columns: 1fr; gap: 24px; }
  .newsletter-row { flex-direction: column; }
  .footer-main { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 24px; }
  .points-tiers { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  /* Basket item: compact card — image spans the left, details top-right,
     line price tucked bottom-right under the qty controls. */
  .cart-page-item {
    grid-template-columns: 72px 1fr;
    grid-template-areas: "img info" "img price";
    gap: 4px 14px;
    padding: 16px;
    align-items: start;
  }
  .cart-page-item-img { grid-area: img; width: 72px; height: 72px; }
  .cart-page-item-img svg,
  .cart-page-item-img img { width: 58px; height: 58px; }
  .cart-page-item > :nth-child(2) { grid-area: info; }
  .cart-page-item > :nth-child(3) { grid-area: price; align-self: end; text-align: right; }
  .cart-page-item-meta { margin-bottom: 10px; }
  /* Continue Shopping + Clear Basket stay side by side */
  .cart-actions-row { flex-wrap: nowrap; }
  .cart-actions-row .btn { flex: 1; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .hero-float-el { display: none; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .header-logo-text { display: none; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
  .hero-stat strong { font-size: 1.35rem; }
  .hero-stat span { font-size: .72rem; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card-image svg { padding: 12px; }
  .cart-drawer { width: 100vw; }
  .toast-container { bottom: 16px; right: 16px; left: 16px; }
  .toast { max-width: 100%; }
  .auth-card-body { padding: 20px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .order-detail-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   REFINEMENT LAYER  ·  inline-SVG icons + sharper finish
   ═══════════════════════════════════════════════════════════════ */

/* Crisper type rendering + a touch tighter headings for a premium feel */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, .btn, .section-title, .hero-title { letter-spacing: -.01em; }

/* ─── Inline icon helper ─────────────────────────────────────── */
.ico { display: inline-block; vertical-align: -.16em; flex: none; }
.ico-gold { color: var(--gold); }
/* Icons sitting inside flex rows (buttons, eyebrows…) shouldn't shift baseline */
.btn .ico, .feature-strip-icon .ico, .section-eyebrow .ico { vertical-align: middle; }

/* Eyebrows / labels now pair an icon with text */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.section-eyebrow .ico { color: currentColor; }

/* Badges may carry a small leading icon */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}
.trust-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* Centered, wrapping button row — replaces fragile inline margins between CTAs */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }

/* Announcement bar — keep it a centered text line; the paw sits inline so the
   sentence wraps naturally on narrow screens instead of breaking into a grid. */
.announcement-bar .ico { vertical-align: -.14em; margin-right: 2px; }

/* ─── Header actions ─────────────────────────────────────────── */
.header-icon-btn { color: var(--white); }
.header-icon-btn--label {
  width: auto;
  padding: 0 14px;
  gap: 7px;
  font-size: .85rem;
  font-family: var(--font-head);
  font-weight: 800;
}
.nav-points { display: inline-flex; align-items: center; gap: 5px; }
.nav-points .ico { color: var(--gold); }

/* ─── Mobile drawer links ────────────────────────────────────── */
.mobile-nav-drawer a { display: flex; align-items: center; gap: 10px; }
.mobile-nav-drawer a .ico { color: var(--orange); }

/* ─── Cart drawer icon bits ──────────────────────────────────── */
.cart-drawer-header h3 { display: flex; align-items: center; gap: 8px; }
.cart-drawer-close { display: inline-flex; align-items: center; justify-content: center; }
.cart-empty-icon { color: var(--cream-darker); display: flex; justify-content: center; opacity: 1; }
.cart-item-remove { display: inline-flex; align-items: center; justify-content: center; color: var(--brown-mid); }
.cart-item-remove:hover { color: var(--red); }
.toast-icon { display: inline-flex; align-items: center; }

/* ─── Product bits ───────────────────────────────────────────── */
.product-points { display: inline-flex; align-items: center; gap: 5px; }
.product-detail-points { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.page-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumb-sep { display: inline-flex; opacity: .5; }

/* ─── Feature strip ──────────────────────────────────────────── */
.feature-strip-icon { display: inline-flex; align-items: center; }

/* Hero floating icons are now transparent PNG illustrations (see .hero-float-el above). */

/* ─── About check ticks ──────────────────────────────────────── */
.about-check-icon { display: inline-flex; align-items: center; justify-content: center; }

/* ─── Footer social + contact ────────────────────────────────── */
.social-btn { display: inline-flex; align-items: center; justify-content: center; }
.footer-contact { display: flex; align-items: center; gap: 7px; }

/* ─── Loyalty tier medals (were medal/gem emoji) ─────────────── */
.tier-badge { display: flex; justify-content: center; margin-bottom: 10px; }
.tier-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  border: 2px solid rgba(0,0,0,.18);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.22);
}
.tier-medal--puppy    { background: radial-gradient(circle at 35% 28%, #6FA8FF, #3A86FF); color:#fff; }
.tier-medal--bronze   { background: radial-gradient(circle at 35% 28%, #D8985A, #B06E33); }
.tier-medal--silver   { background: radial-gradient(circle at 35% 28%, #E9EDF2, #B8C0CC); color:#4a5160; }
.tier-medal--gold     { background: radial-gradient(circle at 35% 28%, #FBE38C, #E8B93C); color:#7a5a12; }
.tier-medal--platinum { background: radial-gradient(circle at 35% 28%, #EAF6FF, #A7C7DE); color:#3d5566; }

/* ─── Customer reviews — single auto-flipping card ───────────── */
.review-flipper {
  max-width: 560px;
  margin: 32px auto 0;
  perspective: 1200px;
}
.review-flip {
  position: relative;
  min-height: 172px;
  transition: transform .32s ease;
  transform-style: preserve-3d;
}
.review-flip.flipping { transform: rotateX(88deg); }
.review-slide { display: none; }
.review-slide.active { display: block; }
.review-flip .review-card { height: 100%; }

/* Product page on desktop: reviews as a horizontal carousel (not a flip) */
@media (min-width: 769px) {
  .review-flipper--product { max-width: none; margin: 24px 0 0; perspective: none; }
  .review-flipper--product .review-flip {
    display: flex;
    gap: 20px;
    min-height: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none !important;
    padding-bottom: 12px;
    scrollbar-width: thin;
  }
  .review-flipper--product .review-slide {
    display: block !important;
    flex: 0 0 clamp(280px, 32%, 360px);
    scroll-snap-align: start;
  }
  .review-flipper--product .review-flip .review-card { height: auto; }
}

/* Centered helpers */
.newsletter-note { text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION  ·  more compact, better-aligned phone layout
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero — tighter, CTAs sit side by side */
  .hero-content { padding: 40px 20px 32px; }
  .hero-desc { margin-bottom: 24px; }
  .hero-ctas { flex-wrap: nowrap; gap: 10px; }
  .hero-ctas .btn { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; white-space: normal; }

  /* Category cards — compact horizontal rows instead of tall stacks */
  .category-card { flex-direction: row; align-items: stretch; }
  .category-card-media { flex: 0 0 116px; aspect-ratio: 1; border-bottom: none; border-right: var(--border); }
  .category-card-body { text-align: left; padding: 13px 16px; display: flex; flex-direction: column; }
  .category-card-desc { margin-bottom: 10px; }
  .category-card-body .btn { align-self: flex-start; margin-top: auto; }

  /* Loyalty tiers — thin single-column list rows */
  .points-tiers { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .tier-card { display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 10px 16px; }
  .tier-badge { margin-bottom: 0; flex: none; }
  .tier-name { margin-bottom: 0; }
  .tier-pts { margin-bottom: 0; white-space: nowrap; }
  .tier-bonus { margin-left: auto; text-align: right; white-space: nowrap; }
  .tier-card .tier-medal { width: 34px !important; height: 34px !important; }
  .tier-card .tier-medal svg { width: 17px; height: 17px; }

  /* CTA button rows — side by side, equal height */
  .btn-row { flex-wrap: nowrap; gap: 10px; align-items: stretch; }
  .btn-row .btn { flex: 1 1 0; min-width: 0; white-space: normal; padding-left: 12px; padding-right: 12px; }
  .btn-lg { font-size: 1rem; padding-top: 14px; padding-bottom: 14px; }

  /* About "Start Shopping" — centered on mobile */
  .about-cta { display: flex; width: fit-content; margin-inline: auto; }

  /* Footer — brand on top, link groups become collapsible accordion bars */
  .footer-main { grid-template-columns: 1fr; gap: 0; padding: 32px 0 0; }
  .footer-brand { margin-bottom: 20px; }
  .footer-brand p { max-width: none; }
  .footer-col { border-top: 1px solid rgba(255,255,255,.1); }
  /* Single divider that hugs the last group evenly with the others (the
     copyright bar drops its own top border so the lines don't double up). */
  .footer-col:last-of-type { border-bottom: 1px solid rgba(255,255,255,.1); }
  .footer-acc-toggle {
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
    padding: 15px 2px;
    margin-bottom: 0;
    font-size: .9rem;
  }
  .footer-acc-chevron { display: inline-flex; transition: transform .25s ease; opacity: .7; }
  .footer-col.open .footer-acc-chevron { transform: rotate(180deg); }
  .footer-acc-panel {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height .3s ease;
  }
  .footer-col.open .footer-acc-panel { max-height: 340px; }
  .footer-acc-panel a { display: block; padding: 7px 2px; font-size: .9rem; }
  .footer-bottom { flex-direction: column; text-align: center; justify-content: center; gap: 14px; border-top: none; padding-top: 22px; }
  .footer-payments { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .section { padding: 42px 0; }
  .section-sub { margin-bottom: 26px; }
}

/* ═══ SHOP PAGE — mobile refinements ══════════════════════════ */
@media (max-width: 768px) {
  /* Condensed page-header banner */
  .page-header { padding: 14px 0; }
  .page-header h1 { font-size: 1.35rem; }
  .page-breadcrumb { margin-top: 4px; font-size: .75rem; }

  /* Search already lives in the top nav — hide the sidebar search */
  .shop-search-card { display: none; }

  /* Merge Categories + Quick Filters into one continuous, seamless box */
  .shop-cats-card, .shop-filters-card { box-shadow: none; }
  .shop-cats-card {
    margin-bottom: 0;
    padding-bottom: 6px;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .shop-filters-card {
    padding-top: 12px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  /* Quick Filters heading has its own underline — no need for a gap above it */
  .shop-filters-card .sidebar-heading { margin-top: 0; }

  /* Breathing room above the "Earn Pooch Points" box (moved below products) */
  .shop-points-promo { margin-top: 22px; }

  /* Centered add-to-cart on product cards */
  .product-card-footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .product-card-footer .product-price-wrap { justify-content: center; }
  .product-card-footer .product-atc-btn { width: 100%; }
  /* The sold-out pill stretches to full width like the Add button here, so its
     inline-flex content needs centering — otherwise "Sold Out" hugs the left. */
  .product-card-footer .product-soldout { width: 100%; justify-content: center; }
}

/* ═══ PRODUCT PAGE — "You might also like" compact on mobile ══ */
@media (max-width: 768px) {
  .related-grid { grid-template-columns: 1fr; gap: 12px; }
  .related-card { flex-direction: row; align-items: stretch; }
  .related-card .product-card-image {
    flex: 0 0 108px; width: 108px;
    aspect-ratio: 1;
    border-bottom: none;
    border-right: var(--border);
  }
  .related-card .product-card-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 12px 14px;
  }
  .related-card .product-card-name { margin-bottom: 8px; }
  .related-card .product-card-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
  }
  .related-card .product-card-footer .product-price-wrap { justify-content: flex-start; }
  .related-card .product-atc-btn { width: auto; }
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .cart-drawer, .toast-container { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MAINTENANCE PAGE
   The old coming-soon layout (centred logo, eyebrow pill, gradient
   headline, map) moved onto the hero backdrop + floating deco used
   by the admin login. Shown by includes/maintenance-view.php.
   ═══════════════════════════════════════════════════════════════ */
.maint-body {
  position: relative;
  min-height: 100vh;
  color: var(--white);
  background-color: var(--navy);
  background-image: url("../images/bg-navy.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.maint-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 30% 50%, rgba(58,134,255,.15) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(240,192,80,.08) 0%, transparent 50%);
}
/* Fixed, so the deco stays put as the page scrolls */
.maint-floating { position: fixed; z-index: 0; }

.maint-page {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.maint-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 84px 0 48px;
}
.maint-logo {
  width: 130px;
  height: 130px;
  margin-bottom: 24px;
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.35));
}
.maint-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(58,134,255,.15);
  border: 1.5px solid rgba(58,134,255,.4);
  color: var(--orange-light);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.maint-title {
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 1.15;
  font-size: clamp(2.1rem, 5.6vw, 3.6rem);
  color: var(--white);
  margin-bottom: 24px;
}
.maint-title .highlight {
  background: linear-gradient(100deg, var(--orange-light), var(--orange) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.maint-lede {
  max-width: 580px;
  color: rgba(255,255,255,.8);
  font-size: 1.05rem;
  line-height: 1.75;
}
.maint-lede strong { color: var(--white); }

/* ─── Access password box ─────────────────────────────────────── */
.maint-unlock {
  width: 100%;
  max-width: 430px;
  /* Sits below the map now, outside the hero's centring flex column */
  margin: 0 auto 44px;
  padding: 22px;
  text-align: left;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}
.maint-unlock h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--white);
}
.maint-unlock > p {
  margin: 4px 0 14px;
  font-size: .82rem;
  color: rgba(255,255,255,.6);
}
.maint-unlock-row { display: flex; gap: 8px; }
.maint-unlock-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(28,28,46,.55);
  color: var(--white);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition);
}
.maint-unlock-row input::placeholder { color: rgba(255,255,255,.4); }
.maint-unlock-row input:focus { border-color: var(--orange); }
.maint-unlock-row .btn { flex: none; }
.maint-alert {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(192,57,43,.18);
  border: 1.5px solid rgba(192,57,43,.5);
  color: #FFC9C3;
  font-size: .82rem;
}

/* ─── Map + footer ────────────────────────────────────────────── */
.maint-map-section { padding: 0 0 34px; }
.maint-map {
  border-radius: var(--radius-xl);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  aspect-ratio: 16 / 8;
  background: var(--cream-dark);
}
.maint-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.15) contrast(1.05);
}
.maint-footer {
  text-align: center;
  padding: 8px 0 40px;
  font-size: .8rem;
  line-height: 1.8;
  color: rgba(255,255,255,.5);
}

@media (max-width: 640px) {
  .maint-hero { padding: 56px 0 36px; }
  .maint-logo { width: 96px; height: 96px; }
  .maint-map { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
  .maint-unlock-row { flex-direction: column; }
  .maint-unlock-row .btn { width: 100%; justify-content: center; }
  .maint-body { background-attachment: scroll; }
}
@media (max-width: 400px) {
  .maint-title { font-size: 1.85rem; }
  .maint-lede { font-size: .98rem; }
}

/* ─── Sold out ────────────────────────────────────────────────
   Replaces the Add button entirely when stock hits zero, rather
   than offering a button that can only fail. */
.product-soldout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--cream-dark);
  border: 2px solid var(--cream-darker);
  color: var(--brown-mid);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .82rem;
  white-space: nowrap;
  cursor: not-allowed;
}
.product-soldout-lg { font-size: 1rem; padding: 12px 22px; }
.product-soldout-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.product-soldout-block p { color: var(--brown-mid); font-size: .92rem; }

/* Admin: product visibility flags (featured / bestseller / new / active) */
.product-flags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.product-flag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.product-flag:has(input:checked) {
  border-color: var(--orange);
  background: rgba(245,158,11,.06);
}
.product-flag input {
  accent-color: var(--orange);
  width: 18px; height: 18px;
  margin-top: 1px;
  flex: none;
}
.product-flag-text { display: flex; flex-direction: column; gap: 2px; }
.product-flag-title { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.product-flag-text small { color: var(--brown-mid); font-size: .78rem; line-height: 1.35; }
/* Compact flag chips in the admin products list */
.product-flag-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.product-flag-tag  { font-size: .62rem; padding: 2px 7px; }

/* Honeypot: off-screen rather than display:none, because the smarter bots skip
   anything explicitly hidden. Screen readers are kept out with aria-hidden and
   tabindex="-1" on the field itself. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Admin: page header (title + actions on one line) ─────────────────────── */
.admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.admin-page-head h2 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  margin: 0;
}
.admin-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Two mutually exclusive views, joined so they read as one control. */
.seg-tabs { display: inline-flex; flex: none; }
.seg-tabs .btn {
  border-radius: 0;
  white-space: nowrap;
}
.seg-tabs .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.seg-tabs .btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* Butt the two together without doubling the border between them. */
.seg-tabs .btn + .btn { margin-left: -1.5px; }
.seg-count {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  font-size: .78em;
  font-weight: 800;
}
.btn-outline .seg-count { background: var(--cream-darker); }

@media (max-width: 768px) {
  /* The toolbar stacks here, so let each control own its row properly rather
     than leaving half-width buttons stranded. */
  .admin-page-actions { width: 100%; }
  .admin-page-actions .btn { flex: 1; justify-content: center; }
  .seg-tabs { width: 100%; }
  .seg-tabs .btn { flex: 1; justify-content: center; }
}

/* Auto-subscribe toggle on the QR payments page */
.qr-autosub { margin: 0 0 14px; }
.qr-autosub-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--cream-dark);
  border: 1.5px solid var(--cream-darker);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .88rem;
}
.qr-autosub-label input { flex: none; margin-top: 2px; }
.qr-autosub-label small {
  display: block;
  color: var(--brown-mid);
  font-size: .8rem;
  line-height: 1.45;
  margin-top: 2px;
}

.signup-nl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.signup-nl--on  { background: rgba(240,192,80,.28); color: var(--brown-dark); }
.signup-nl--off { background: var(--cream-dark);    color: var(--brown-mid); }
.signup-nl-dash { color: var(--brown-mid); }
/* Pill and button on one line so the row stays a single line tall. */
.signup-nl-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; }
.signup-nl-form .btn { padding: 3px 9px; font-size: .72rem; }
.signup-nl-cell { white-space: nowrap; }
/* Reason sits under the badge rather than under the address. */
.signup-result .signup-reason { display: block; margin-top: 3px; }

/* ── Admin: signup attempts ───────────────────────────────────────────────── */
.signup-reasons { list-style: none; margin: 0; padding: 0; }
.signup-reasons li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1.5px solid var(--cream-dark);
  font-size: .88rem;
}
.signup-reasons li:last-child { border-bottom: none; }
.signup-reasons small { display: block; color: var(--brown-mid); font-size: .76rem; }
.signup-reasons strong { font-family: var(--font-head); font-size: 1rem; }

.signup-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.signup-link { margin-left: auto; }
.signup-reason {
  display: block;
  font-size: .74rem;
  color: var(--red);
  margin-top: 2px;
}
.signup-ip { font-size: .8rem; }

@media (max-width: 768px) {
  .signup-link { margin-left: 0; width: 100%; justify-content: center; }
  .signup-filters { width: 100%; }
  .signup-filters .btn { flex: 1; justify-content: center; }
}

/* ── The attempts log as a phone card ─────────────────────────────────────────
   The generic .dt-head / .dt-aside shape puts a title left and a short muted
   value right. This row breaks that contract: its "value" is a sentence
   ("blocked range 195.63.0.0/19 + honeypot filled · newsletter form"), which
   swallowed the right-hand track, crushed the date to two stacked words and
   left the badge sitting over them.

   So this table gets its own shape, ordered by what you actually scan for:
   who it was and what happened to them, why, then the when and where. */
@media (max-width: 768px) {
  .data-table.signup-log tr {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    row-gap: 2px;
    padding: 12px 16px;
  }
  .data-table.signup-log td {
    grid-column: 1 / -1;
    display: block;
    padding: 0;
    text-align: left;
    font-size: .85rem;
  }
  .data-table.signup-log td::before { content: none; }

  /* 1 — the address, and what happened to it. */
  .data-table.signup-log td.qr-payer-cell { grid-row: 1; grid-column: 1; }
  .data-table.signup-log .qr-payer-email { font-size: .9rem; color: var(--brown-dark); }
  .data-table.signup-log .qr-payer-name  { font-size: .78rem; color: var(--brown-mid); }

  /* The badge and the reason share one cell but belong on different lines, so
     the cell stands aside and lets each take a grid slot of its own. */
  .data-table.signup-log td.signup-result { display: contents; }
  .data-table.signup-log td.signup-result .badge {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }
  .data-table.signup-log td.signup-result .signup-reason {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 2px 0 0;
    text-align: left;
    /* Red suits a three-word annotation tucked under a badge. At full width,
       forty rows deep, it competes with the badge for the same alarm. One red
       signal per row: the badge says blocked, this says why. */
    color: var(--brown-mid);
  }

  /* 2 — when and where, quietly, on one line. */
  .data-table.signup-log td.dt-head {
    grid-row: 3;
    grid-column: 1;
    font-size: .76rem;
    font-weight: 400;
    color: var(--brown-mid);
    padding: 2px 0 0;
  }
  .data-table.signup-log td.dt-head strong { font-weight: 400; }
  /* Date and time read as one fact on this line, not two stacked ones. The QR
     list separates them with a wide margin, which here just looked like a
     wobble; a middot makes the join deliberate. */
  .data-table.signup-log .qr-time { display: inline; margin-left: 2px; }
  .data-table.signup-log .qr-time::before { content: "· "; }
  .data-table.signup-log td.signup-ip {
    grid-row: 3;
    grid-column: 2;
    text-align: right;
    font-size: .76rem;
    padding: 2px 0 0;
  }

  /* 3 — the newsletter line, only when there is something to say. A row of
     forty em-dashes is noise, not information. */
  .data-table.signup-log td.signup-nl-cell {
    grid-row: 4;
    grid-column: 1 / -1;
    padding: 5px 0 0;
    white-space: normal;
  }
  .data-table.signup-log td.signup-nl-cell:has(.signup-nl-dash) { display: none; }
}


/* ── Admin: firewall block list ───────────────────────────────────────────── */
.fw-empty { margin: 0 0 16px; font-size: .88rem; color: var(--brown-mid); }
.fw-list  { list-style: none; margin: 0 0 18px; padding: 0; }
.fw-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1.5px solid var(--cream-dark);
}
.fw-row:last-child { border-bottom: none; }
.fw-main  { min-width: 0; }
.fw-cidr {
  display: inline-block;
  font-size: .95rem;
  font-weight: 800;
  background: var(--cream-dark);
  border-radius: 5px;
  padding: 2px 7px;
  overflow-wrap: anywhere;
}
.fw-span  { display: block; font-size: .78rem; color: var(--brown-mid); margin-top: 5px; }
.fw-note  { display: block; font-size: .82rem; margin-top: 3px; }
.fw-stats { display: block; font-size: .76rem; color: var(--brown-mid); margin-top: 3px; }
/* A blocked range that has let real people through deserves a second look. */
.fw-warn  { color: var(--red); }
.fw-row-form { flex: none; margin: 0; }
.fw-ip-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Rows carrying a button or a badge centre the two sides against each other.
   The list default is baseline alignment, which is right for a single line of
   text either side but cannot work here: the left is two lines, and the right
   is a nested flex whose baseline comes from a padded button, so a badge row
   and a button row would sit at different heights. */
.signup-reasons.fw-actions-list li { align-items: center; }

@media (max-width: 560px) {
  /* Three facts, two lines. Side by side, the detail wrapped and shoved the
     button off the edge; stacked, every row cost three lines and eight of them
     filled the screen. A small grid gets the controls back onto the title line
     and lets the detail run the full width underneath. */
  .signup-reasons.fw-actions-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 12px;
  }
  /* The title and its detail are wrapped together in the markup; stepping the
     wrapper aside lets each take its own slot. */
  .signup-reasons.fw-actions-list li > span:first-child { display: contents; }
  .signup-reasons.fw-actions-list li > span:first-child > a {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
  }
  .signup-reasons.fw-actions-list small {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  .signup-reasons.fw-actions-list .fw-ip-actions { grid-row: 1; grid-column: 2; }
}

/* Neighbourhood label — "195.63.x.x". Heavier than the plain IP links below it,
   because a cluster is the more significant finding of the two. */
.fw-cluster-label {
  display: inline-block;      /* so the padding grows the line box, not overlaps it */
  font-weight: 800;
  font-size: .95rem;
  background: var(--cream-dark);
  border-radius: 5px;
  padding: 2px 7px;
}

/* ── The guided "which range?" panel ──────────────────────────────────────── */
.fw-add-panel {
  padding-top: 16px;
  border-top: 1.5px solid var(--cream-dark);
}
.fw-add-title { font-family: var(--font-head); font-size: 1.02rem; margin: 0 0 4px; }
.fw-add-intro { font-size: .86rem; color: var(--brown-mid); margin: 0 0 12px; line-height: 1.55; }

.fw-lookup { display: flex; gap: 10px; flex-wrap: wrap; }
.fw-lookup .form-control { flex: 1; min-width: 180px; font-family: var(--font-mono, monospace); }
.fw-lookup .btn { flex: none; }

.fw-result   { margin-top: 14px; }
.fw-looking  { font-size: .88rem; color: var(--brown-mid); margin: 0; }

.fw-found {
  background: var(--cream-dark);
  border: 1.5px solid var(--cream-darker);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.fw-found-head {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.fw-found-ip { font-size: .8rem; color: var(--brown-mid); }
.fw-found-net { font-size: .8rem; color: var(--brown-mid); margin: 0 0 10px; line-height: 1.5; }
.fw-found-net code { font-size: .78rem; }

/* The verdict, tinted by how confident it is. */
.fw-advice {
  font-size: .86rem; line-height: 1.55; margin: 0 0 14px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border-left: 4px solid var(--brown-mid);
  background: var(--white);
}
.fw-advice--good { border-left-color: var(--green); }
.fw-advice--warn { border-left-color: var(--red); }

.fw-choose-label { font-size: .82rem; font-weight: 800; margin: 0 0 8px; }

/* One choice per row: radio on the left, everything you need to judge it on the right. */
.fw-choice {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 12px; margin-bottom: 8px;
  background: var(--white);
  border: 1.5px solid var(--cream-darker);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.fw-choice:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 1.5px var(--orange); }
.fw-choice input { flex: none; margin-top: 3px; }
.fw-choice--off  { opacity: .55; cursor: not-allowed; }
.fw-choice--risk { border-color: var(--red); }
.fw-choice-body  { display: block; min-width: 0; }
.fw-choice-top   { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fw-choice-top code {
  background: var(--cream-dark); border-radius: 5px;
  padding: 1px 6px; font-size: .8rem; overflow-wrap: anywhere;
}
.fw-choice-span  { display: block; font-size: .8rem; margin-top: 3px; }
.fw-choice-why   { display: block; font-size: .78rem; color: var(--brown-mid); margin-top: 3px; line-height: 1.5; }
.fw-choice-hist  { display: block; font-size: .78rem; font-weight: 800; margin-top: 5px; }
.fw-choice-off   { display: block; font-size: .78rem; color: var(--red); margin-top: 4px; }

.fw-choose-note  { margin: 12px 0 12px; max-width: 340px; }
.fw-choose-go:disabled { opacity: .5; cursor: not-allowed; }

/* Manual entry, folded away — the guided route is the one to reach for. */
.fw-manual { margin-top: 16px; }
.fw-manual > summary {
  cursor: pointer; font-size: .84rem; font-weight: 800;
  color: var(--brown-mid); padding: 4px 0;
}
.fw-manual > summary:hover { color: var(--orange); }
.fw-manual .fw-add { margin-top: 12px; padding-top: 0; border-top: none; }

/* Live "what you just typed actually means" line. */
.fw-preview { display: block; font-size: .78rem; margin-top: 5px; min-height: 1em; }
.fw-preview--ok   { color: var(--green); }
.fw-preview--bad  { color: var(--red); }
.fw-preview--wait { color: var(--brown-mid); }

/* Add form — two fields side by side, button on the end. */
.fw-add {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.fw-add-fields { display: flex; gap: 12px; flex: 1; min-width: 260px; flex-wrap: wrap; }
.fw-add-fields .form-group { flex: 1; min-width: 150px; margin: 0; }
.fw-add .btn { margin-bottom: 1px; }
.fw-opt { font-weight: 400; color: var(--brown-mid); }

@media (max-width: 560px) {
  .fw-lookup .form-control, .fw-lookup .btn { width: 100%; justify-content: center; }
  .fw-choose-note { max-width: none; }
  .fw-choose-go   { width: 100%; justify-content: center; }
  .fw-found       { padding: 12px 13px; }
  /* Stack the row so a long note never squeezes the Unblock button off. */
  .fw-row { flex-direction: column; align-items: stretch; }
  .fw-row-form .btn { width: 100%; justify-content: center; }
  .fw-add { align-items: stretch; }
  .fw-add > .btn { width: 100%; justify-content: center; }
}
/* ── Admin: purge unverified accounts ─────────────────────────────────────── */
.purge-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--cream-dark);
  border: 1.5px solid var(--cream-darker);
  border-radius: var(--radius-sm);
}
.purge-text { flex: 1; min-width: 220px; font-size: .88rem; line-height: 1.5; }
.purge-note { display: block; font-size: .8rem; color: var(--brown-mid); margin-top: 2px; }
.purge-form { flex: none; }
/* Destructive, styled like the delete button on a product. */
.purge-btn { color: var(--red); border-color: var(--red); }
.purge-btn:hover { background: var(--red); color: var(--white); }

@media (max-width: 560px) {
  .purge-bar { flex-direction: column; align-items: stretch; }
  .purge-form .btn { width: 100%; justify-content: center; }
}

/* ── Admin: QR / Payment Link takings ─────────────────────────────────────── */
.qr-amount-th, .data-table td.qr-amount { text-align: right; }
.data-table td.qr-amount { font-weight: 800; white-space: nowrap; }
.qr-time { font-size: .75rem; color: var(--brown-mid); font-weight: 400; display: block; }
.qr-payer-name  { display: block; }
.qr-payer-email { display: block; font-size: .78rem; color: var(--brown-mid); overflow-wrap: anywhere; }
.qr-payer-addr  { display: block; font-size: .78rem; color: var(--brown-mid); overflow-wrap: anywhere; }
.qr-payer-none  { color: var(--brown-mid); }
.qr-import-form { margin-left: auto; }

/* "Include other Payment Links" */
.qr-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 16px;
  font-size: .85rem;
  color: var(--brown-mid);
  cursor: pointer;
}
.qr-toggle input { flex: none; }

@media (max-width: 768px) {
  /* The card reads straight down the left; only the amount sits right, on the
     top line. Label-left / value-right left a wide empty gap mid-card. */
  .data-table td.qr-amount {
    font-size: 1.05rem;
    color: var(--brown-dark);
    align-self: start;
  }
  .qr-time { display: inline; margin-left: 7px; }   /* "19 Aug 2026  21:37" */

  .data-table td.qr-source,
  .data-table td.qr-payer-cell {
    grid-column: 1 / -1;
    justify-content: flex-start;
    text-align: left;
    padding: 4px 0 0;
  }
  /* The badge, the name and the address say what they are without a label. */
  .data-table td.qr-source::before,
  .data-table td.qr-payer-cell::before { content: none; }

  .qr-payer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    text-align: left;
  }

  /* Toolbar stacks on mobile — let the import button fill the width like the
     search row above it instead of sitting half-width against the edge. */
  .qr-import-form { margin-left: 0; }
  .qr-import-form .btn { width: 100%; justify-content: center; }
  .qr-toggle { margin-top: 0; }
}

/* ── Admin: refund panel on an order ──────────────────────────────────────── */
/* No coloured left border — nothing else in the admin panel has one, and it
   made this card look like a different component. State is carried by the icon
   colour and the wording instead. */
/* Icon and message only — the text lives in one <span> so flex can't chop the
   sentence into separate boxes around a <strong>. */
.refund-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 8px;
  font-size: .92rem;
  line-height: 1.5;
}
.refund-line > .ico { flex: none; margin-top: 2px; }   /* optically centres on line 1 */
.refund-line > span { min-width: 0; }
.refund-bad .refund-line       { color: var(--red); }
.refund-ok  .refund-line > .ico { color: var(--green); }
.refund-warn .refund-line > .ico { color: var(--brown-mid); }

/* A note explaining the line above it: indented to sit under the text, not
   under the icon. */
.refund-note {
  margin: 0 0 12px;
  padding-left: 25px;
  line-height: 1.5;
}
.refund-note:last-child { margin-bottom: 0; }

/* The hint under the amount field is a different thing: it belongs to the form,
   not to a message line, so it isn't indented and needs real breathing room
   below the button rather than sitting right on top of it. */
.refund-hint {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1.5px solid var(--cream-dark);
  line-height: 1.55;
}

.refund-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  background: var(--cream-dark);
  padding: 2px 6px;
  border-radius: 4px;
  overflow-wrap: anywhere;   /* re_… ids are long; break rather than overflow */
}

.refund-history-head {
  margin: 14px 0 4px;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brown-mid);
}
.refund-history {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border-top: 1.5px solid var(--cream-dark);
}
.refund-history li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  padding: 8px 0;
  border-bottom: 1.5px solid var(--cream-dark);
}
.refund-history-amount { font-weight: 800; font-size: .9rem; }
.refund-history-when   { color: var(--brown-mid); font-size: .78rem; text-align: right; }
.refund-history code   { grid-column: 1 / -1; justify-self: start; }

.refund-form { margin-top: 4px; }
.refund-form label {
  display: block;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--brown-mid);
  margin-bottom: 6px;
}
.refund-input-row { display: flex; align-items: stretch; gap: 0; }
.refund-currency {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--cream-dark);
  border: 1.5px solid var(--cream-darker);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-weight: 800;
  color: var(--brown-dark);
}
/* Joined to the £ prefix, so they read as one control. */
.refund-input-row .form-control {
  flex: 1;
  min-width: 0;
  border-radius: 0;
  margin-right: 8px;
}
.refund-input-row .btn { flex: none; white-space: nowrap; }

@media (max-width: 560px) {
  .refund-input-row { flex-wrap: wrap; }
  .refund-input-row .form-control { flex: 1 1 110px; margin-right: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .refund-input-row .btn { flex: 1 0 100%; margin-top: 8px; justify-content: center; }
  .refund-history-when { text-align: left; }
}

/* ── Admin: editable homepage sections (Site Content) ─────────────────────── */
/* Headline preview sits on the real hero background — the whole point of the
   **stars** syntax is the colour, so a plain-text preview would prove nothing. */
.hero-title-preview {
  margin-top: 10px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1.2;
}
.hero-title-preview .highlight { color: var(--orange); }

.home-stat-grid { display: flex; flex-direction: column; gap: 10px; }
.home-stat-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 10px;
  align-items: center;
}
.home-stat-star {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--brown-mid);
  white-space: nowrap;
}

.home-edit-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1.5px solid var(--cream-dark);
}
.home-edit-row:last-of-type { border-bottom: none; }
.home-edit-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.home-dropzone { position: relative; }
.home-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 11;
  padding: 12px;
  text-align: center;
  border: 2px dashed var(--cream-darker);
  border-radius: var(--radius-sm);
  background: var(--cream-dark);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color var(--transition), background var(--transition);
}
.home-dropzone-inner:hover { border-color: var(--orange); }
.home-dropzone.is-over .home-dropzone-inner {
  border-color: var(--orange);
  background: var(--cream);
}
.home-dropzone-inner img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Caption rides above the picture on a scrim so it stays readable either way. */
.home-dropzone-hint,
.home-dropzone-status {
  position: relative;
  z-index: 1;
  font-size: .75rem;
  font-weight: 700;
  color: var(--white);
  background: rgba(28,28,46,.72);
  padding: 4px 9px;
  border-radius: 999px;
}
.home-dropzone-status:empty { display: none; }
.home-dropzone-status.is-ok  { background: var(--green); }
.home-dropzone-status.is-err { background: var(--red); }

.home-check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
  margin-bottom: 10px;
}
/* Tick badge overlaid inside the title field — same orange circle as the
   homepage draws, so the two read as the same thing. */
.home-check-title { position: relative; min-width: 0; }
.home-check-ico {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  border: 1.5px solid var(--brown-dark);
  border-radius: 50%;
  color: var(--white);
  /* Clicks pass through to the input, so the badge never blocks focus. */
  pointer-events: none;
}
.home-check-title .form-control { padding-left: 40px; }

@media (max-width: 768px) {
  .home-stat-row { grid-template-columns: 1fr; }
  .home-edit-row { grid-template-columns: 1fr; gap: 12px; }
  .home-check-row { grid-template-columns: 1fr; }
  .hero-title-preview { font-size: 1.15rem; }
}

/* ── Admin: reordering rows in the products list ───────────────────────────── */
.reorder-hint {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  font-size: .82rem;
  color: var(--brown-mid);
}
.reorder-hint p { margin: 0; }
.reorder-status { font-weight: 700; white-space: nowrap; }
.reorder-status.is-ok  { color: var(--green); }
.reorder-status.is-err { color: var(--red); white-space: normal; }

.reorder-col { width: 46px; padding-right: 0 !important; }
.drag-handle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  color: var(--brown-mid);
  cursor: grab;
  /* Without this a touch-drag scrolls the page instead of moving the row —
     pointermove events stop arriving the moment the browser claims the gesture. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.drag-handle:hover { background: var(--cream-dark); color: var(--brown-dark); }
.drag-handle:active { cursor: grabbing; }
.drag-pos { font-size: .68rem; font-weight: 800; font-family: var(--font-head); line-height: 1; }
.data-table--reorder tr.is-dragging {
  background: var(--cream-dark);
  box-shadow: 0 6px 18px rgba(28,28,46,.18);
  position: relative;
  z-index: 1;
}
/* Desktop has the drag handle; the arrows would just be clutter. */
.reorder-btns { display: none; }
.reorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--cream-darker);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--brown-dark);
  cursor: pointer;
}
.reorder-btn:active { background: var(--cream-dark); }

@media (max-width: 768px) {
  .reorder-hint { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Rows are cards here. The reorder cell becomes a full-width strip across the
     top: position on the left, arrows on the right, both comfortably tappable.
     Dragging is hidden — in a long scrolling list of tall cards you can't drag
     a row past the edge of the screen, so the arrows are the whole interaction. */
  .data-table td.reorder-col {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: 0 0 10px 0;
    margin-bottom: 8px;
    border-bottom: 1.5px solid var(--cream-dark);
  }
  .data-table td.reorder-col::before { content: none; }
  .drag-handle { flex-direction: row; gap: 7px; padding: 0; cursor: default; }
  .drag-handle .ico { display: none; }
  .drag-pos {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--brown-mid);
  }
  .drag-pos::before { content: 'Position '; }
  .reorder-btns { display: inline-flex; gap: 8px; }
}

/* Admin: promo code entry, monospaced-ish so O/0 are easy to tell apart */
.promo-code-input {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--font-head);
  font-weight: 800;
}

/* A field that needs an explicit way to empty itself (date pickers) */
.input-with-clear { display: flex; gap: 8px; align-items: stretch; }
.input-with-clear .form-control { flex: 1; min-width: 0; }
/* align-self:stretch rather than a fixed height, so the button always matches
   the field even if a browser insists on sizing the input its own way. */
.input-with-clear .input-clear {
  flex: none;
  align-self: stretch;
  height: auto;
  display: inline-flex;
  align-items: center;
}

/* Usage, given real weight at the top of the edit page */
.promo-usage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm);
}
.promo-usage-stat { display: flex; flex-direction: column; }
.promo-usage-num {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1;
}
.promo-usage-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .75;
  margin-top: 4px;
}
.promo-usage-bar {
  flex: 1 1 140px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
  min-width: 120px;
}
.promo-usage-bar span { display: block; height: 100%; background: var(--gold); }

/* Customer lookup for "lock to one customer" */
/* One row at any width: details left, Clear right. No wrapping — a long email
   wraps inside its own column instead of pushing the button onto a new line. */
.promo-user-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--green);
  border-radius: var(--radius-sm);
  background: rgba(74,124,47,.08);
}
.promo-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;          /* lets the email wrap rather than overflow */
  text-align: left;
}
.promo-user-info strong { font-size: .9rem; color: var(--navy); }
.promo-user-info span {
  font-size: .78rem;
  color: var(--brown-mid);
  overflow-wrap: anywhere;
}
.promo-user-clear-btn { flex: none; align-self: center; }
.promo-user-results { margin-top: 6px; }
.promo-user-result {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 2px solid var(--cream-dark);
  border-top: none;
  background: var(--white);
  cursor: pointer;
  font-size: .86rem;
}
.promo-user-result:first-child { border-top: 2px solid var(--cream-dark); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.promo-user-result:last-child  { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.promo-user-result:hover { background: var(--cream); }
.promo-user-result span { font-size: .78rem; color: var(--brown-mid); }
.promo-user-empty { padding: 9px 12px; font-size: .82rem; color: var(--brown-mid); }

/* ─── Info page: Delivery & Returns ──────────────────────────── */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.info-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.info-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream-dark);
  color: var(--orange);
  margin-bottom: 14px;
}
.info-card h3 {
  font-family: var(--font-head);
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brown-mid);
  margin-bottom: 6px;
}
.info-card-lead {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 8px;
}
.info-card p { font-size: .88rem; line-height: 1.6; color: var(--brown-mid); }

/* The free-delivery card, in navy. These MUST sit after the base .info-card
   rules above: ".info-card--feature h3" and ".info-card h3" have identical
   specificity, so source order alone decides — placed earlier, the brown-on-navy
   defaults won and the card was unreadable. Everything in it is plain white. */
.info-card--feature { background: var(--navy); }
.info-card--feature h3,
.info-card--feature .info-card-lead,
.info-card--feature p,
.info-card--feature li,
.info-card--feature strong,
.info-card--feature a { color: var(--white); }
/* The icon stays gold. It's an SVG using currentColor, so the svg itself needs
   naming — a blanket "* { color:white }" would have washed it out. */
.info-card--feature .info-card-icon { background: rgba(255,255,255,.14); }
.info-card--feature .info-card-icon,
.info-card--feature .info-card-icon svg { color: var(--gold); }

/* Image beside copy; stacks with the picture on top on a phone */
.info-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.info-split-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: var(--border);
}
.info-split-body > p { color: var(--brown-mid); line-height: 1.75; margin-bottom: 14px; }
.info-note {
  display: block;
  background: var(--cream-dark);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 15px;
  font-size: .88rem;
  line-height: 1.6;
}
.info-note .ico { vertical-align: -.18em; margin-right: 3px; color: var(--orange); }

/* Returns callout */
.returns-panel {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.returns-panel-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--cream-dark);
  color: var(--red);
}
.returns-panel h3 { font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 8px; }
.returns-panel p { color: var(--brown-mid); line-height: 1.7; margin-bottom: 16px; font-size: .93rem; }

/* FAQ accordion — native <details>, so it works without any JS */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  list-style: none;              /* hides the default triangle */
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--cream); }
.faq-item-chev {
  flex: none;
  display: inline-flex;
  color: var(--brown-mid);
  transition: transform .22s ease;
}
.faq-item[open] .faq-item-chev { transform: rotate(180deg); }
.faq-item[open] summary { background: var(--cream); }
.faq-item-body {
  padding: 14px 18px 17px;
  border-top: 1px solid var(--cream-dark);
  color: var(--brown-mid);
  font-size: .9rem;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .info-split { grid-template-columns: 1fr; gap: 22px; }
  /* Picture first on a phone — it sets the scene before the copy */
  .info-split-media { order: -1; }
  .returns-panel { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; }
  .returns-panel .btn { width: 100%; justify-content: center; }
  .info-card { padding: 22px 18px; }
}

/* Once the cards stack, three tall centred blocks is a lot of scrolling for
   three short facts. Below this they become compact rows — icon at the side,
   text left-aligned — so all three are taking up far less height. */
@media (max-width: 560px) {
  .info-cards { gap: 12px; }
  .info-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 14px;
    align-items: center;
    text-align: left;
    padding: 15px 16px;
  }
  .info-card-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    width: 46px; height: 46px;
    margin-bottom: 0;
  }
  .info-card h3 {
    grid-column: 2;
    font-size: .68rem;
    letter-spacing: .07em;
    margin-bottom: 1px;
  }
  .info-card-lead {
    grid-column: 2;
    font-size: 1.25rem;
    margin-bottom: 3px;
  }
  .info-card p { grid-column: 2; font-size: .8rem; line-height: 1.5; }
}
@media (max-width: 420px) {
  /* Long email addresses shouldn't push the button off the screen */
  .returns-panel .btn { font-size: .82rem; padding-left: 12px; padding-right: 12px; }
}

/* Page title with actions beside it. On a phone the actions drop to their own
   row and share the width evenly, rather than one wrapping under the other. */
.admin-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.admin-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .admin-page-head { gap: 10px; }
  .admin-page-head > h2 { flex: 1 0 100%; }
  .admin-page-actions { width: 100%; flex-wrap: nowrap; }
  /* The form is a flex item in its own right, so it has to stretch as well as
     the button inside it — styling only the button leaves it hugging the left. */
  .admin-page-actions > form { flex: 1; display: flex; min-width: 0; }
  .admin-page-actions > .btn,
  .admin-page-actions > form > .btn {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ─── Admin: stacked form actions ────────────────────────────── */
/* Two large buttons side by side wrap into one full-width and one stub on a
   phone. Below this they each take the full width instead. */
.admin-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .admin-form-actions { flex-direction: column; }
  .admin-form-actions > .btn { width: 100%; justify-content: center; }
}

/* The navy stat banner is roomy for desktop; tighten it on a phone so it
   doesn't take half the screen before you reach the settings. */
@media (max-width: 560px) {
  /* Wrapping left the tiles on ragged rows with uneven gutters. An explicit
     two-column grid gives them a column to sit in. */
  .promo-usage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding: 14px 16px;
  }
  .promo-usage-num { font-size: 1.5rem; }
  .promo-usage-label { font-size: .64rem; }
}

/* ─── Pushover device rows (admin) ───────────────────────────── */
.po-devices { display: flex; flex-direction: column; gap: 8px; }
.po-device {
  display: grid;
  grid-template-columns: 2fr 1.2fr auto;
  gap: 8px;
  align-items: center;
}
.po-device .form-control { min-width: 0; }
.po-device-del { flex: none; white-space: nowrap; }

@media (max-width: 640px) {
  /* Stacked, several devices' fields run together into one undifferentiated
     column — so each device becomes its own little card. */
  .po-devices { gap: 12px; }
  .po-device {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    background: var(--cream);
    border: 2px solid var(--cream-dark);
    border-radius: var(--radius-sm);
  }
  .po-device-del { justify-self: stretch; text-align: center; }
}

/* ─── Newsletter builder (admin) ─────────────────────────────── */
.nl-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 18px; align-items: start; }
.nl-blocks { display: flex; flex-direction: column; gap: 10px; }
.nl-block {
  border: 2px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}
.nl-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px;
  background: var(--cream);
  border-bottom: 2px solid var(--cream-dark);
}
.nl-block-type {
  font-family: var(--font-head); font-weight: 800; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--brown-mid);
}
.nl-block-tools { display: flex; gap: 4px; }
.nl-block-btn {
  width: 28px; height: 28px;
  border: 1.5px solid var(--cream-darker);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
}
.nl-block-btn:hover:not(:disabled) { background: var(--cream-dark); }
.nl-block-btn:disabled { opacity: .35; cursor: default; }
.nl-block-del:hover:not(:disabled) { background: var(--red); color: var(--white); border-color: var(--red); }
.nl-block-body { padding: 12px; }
.nl-block-body .form-group:last-child { margin-bottom: 0; }
.nl-add-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* Product picker: see the photo, tick the box. */
.nl-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  border: 2px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  background: var(--cream);
}
.nl-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  background: var(--white);
  border: 2px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.nl-pick:hover { border-color: var(--cream-darker); }
.nl-pick.is-on { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(58,134,255,.18); }
.nl-pick input {
  position: absolute; top: 6px; left: 6px;
  width: 17px; height: 17px;
  accent-color: var(--orange);
  margin: 0;
}
.nl-pick-img {
  display: block;
  aspect-ratio: 1;
  background: var(--cream);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.nl-pick-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nl-pick-name {
  font-size: .72rem; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nl-pick-price { font-size: .72rem; font-weight: 700; color: var(--orange); }

/* Image block upload */
.nl-upload-thumb {
  display: flex; align-items: center; justify-content: center;
  height: 130px;
  margin-bottom: 8px;
  background: var(--cream);
  border: 2px dashed var(--cream-darker);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.nl-upload-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.nl-upload-thumb span { font-size: .8rem; color: var(--brown-mid); }

.nl-stat-row { display: flex; gap: 16px; margin-bottom: 12px; }
.nl-stat-row > div { display: flex; flex-direction: column; }
.nl-stat-row strong { font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; line-height: 1; }
.nl-stat-row span { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--brown-mid); margin-top: 3px; }
.nl-progress { height: 8px; border-radius: 999px; background: var(--cream-dark); overflow: hidden; }
.nl-progress span { display: block; height: 100%; background: var(--green); transition: width .4s ease; }
.nl-note {
  margin-top: 14px; padding: 10px 12px;
  background: var(--cream-dark); border-radius: var(--radius-sm);
  font-size: .78rem; line-height: 1.55; color: var(--brown-mid);
}

.nl-preview-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(28,28,46,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.nl-preview-overlay[hidden] { display: none; }
.nl-preview-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 660px; height: 86vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.nl-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 2px solid var(--cream-dark);
}
.nl-preview-panel iframe { flex: 1; width: 100%; border: 0; background: var(--cream); }

@media (max-width: 900px) {
  .nl-layout { grid-template-columns: 1fr; }
}

/* ─── Unsubscribe confirmation ───────────────────────────────── */
.unsub-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 38px 30px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.unsub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--cream-dark);
  color: var(--brown-mid);
  margin-bottom: 16px;
}
.unsub-icon--ok   { background: rgba(74,124,47,.12); color: var(--green); }
.unsub-icon--warn { background: rgba(192,57,43,.10); color: var(--red); }
.unsub-card h1 { font-size: clamp(1.4rem,4vw,1.8rem); margin-bottom: 10px; }
.unsub-card p  { color: var(--brown-mid); line-height: 1.7; }
.unsub-note {
  margin-top: 14px;
  font-size: .85rem;
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
@media (max-width: 560px) {
  .unsub-card { padding: 30px 20px; }
  .unsub-card .btn { width: 100%; justify-content: center; }
}

/* ─── Legal / long-form info pages ───────────────────────────── */
.legal-page { max-width: 760px; }
.legal-updated {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brown-mid);
  margin-bottom: 18px;
}
.legal-intro {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--navy);
  background: var(--cream-dark);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 18px;
  margin-bottom: 30px;
}
.legal-page h2 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  margin: 30px 0 10px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--cream-dark);
}
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page p { color: var(--brown-mid); line-height: 1.8; margin-bottom: 13px; }
/* :not(.btn) matters — this rule outranks .btn-primary on both specificity and
   source order, so without it the CTA button's text took the link colour and
   turned blue-on-blue. */
.legal-page a:not(.btn) { color: var(--orange); font-weight: 700; overflow-wrap: anywhere; }
.legal-page a:not(.btn):hover { text-decoration: underline; }
.legal-list { margin: 0 0 14px; padding-left: 0; list-style: none; }
.legal-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--brown-mid);
  line-height: 1.7;
}
/* Paw-ish bullet rather than a plain disc */
.legal-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.legal-list li strong { color: var(--navy); }

/* Grouped FAQ headings */
.faq-group-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cream-dark);
}

/* Shared "still stuck?" footer block on info pages */
.page-cta {
  margin-top: 36px;
  padding: 26px;
  text-align: center;
  background: var(--cream-dark);
  border: var(--border);
  border-radius: var(--radius-lg);
}
.page-cta h3 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 6px; }
.page-cta p  { color: var(--brown-mid); font-size: .92rem; margin-bottom: 15px; }

@media (max-width: 560px) {
  .legal-page h2 { font-size: 1.05rem; }
  .legal-intro { font-size: .93rem; padding: 14px 15px; }
  .page-cta { padding: 22px 18px; }
  .page-cta .btn { width: 100%; justify-content: center; font-size: .84rem; padding-left: 12px; padding-right: 12px; }
}

/* ─── Promo code (checkout) ──────────────────────────────────── */
.promo-row { display: flex; gap: 8px; align-items: stretch; }
.promo-row .form-control { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.promo-row .btn { flex: none; }
.promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 2px solid var(--green);
  border-radius: var(--radius-sm);
  background: rgba(74,124,47,.08);
}
.promo-applied-info { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.promo-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: .74rem;
  letter-spacing: .05em;
}
.promo-applied-text { font-size: .86rem; font-weight: 700; color: var(--navy); min-width: 0; }
.promo-remove {
  flex: none;
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--brown-mid);
  text-decoration: underline;
  cursor: pointer;
}
.promo-remove:hover { color: var(--red); }
.promo-error { margin-top: 9px; font-size: .82rem; font-weight: 700; color: var(--red); }
.promo-hint  { margin-top: 9px; font-size: .76rem; color: var(--brown-mid); line-height: 1.45; }
@media (max-width: 480px) {
  .promo-applied { flex-wrap: wrap; }
}

/* ─── Reviews: write form (storefront) ───────────────────────── */
.review-write { margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--cream-dark); }
.review-write-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 4px;
}
.review-write-sub { color: var(--brown-mid); font-size: .88rem; margin-bottom: 14px; }
.review-write-note {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--cream);
  border: 2px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: .9rem;
  color: var(--brown-mid);
  line-height: 1.5;
}
.review-write-note a { color: var(--orange); font-weight: 700; text-decoration: underline; }
.review-write-note--ok { border-color: var(--green); background: rgba(74,124,47,.08); color: var(--navy); }

.review-stars-pick { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.review-star {
  background: none; border: none; padding: 2px; cursor: pointer;
  line-height: 0; color: var(--cream-darker);
  transition: transform .1s ease, color .1s ease;
}
.review-star .star-svg { width: 26px; height: 26px; fill: currentColor; }
.review-star.is-on { color: var(--gold); }
.review-star:hover { transform: scale(1.12); }
.review-stars-label {
  margin-left: 8px; font-size: .85rem; font-weight: 700;
  color: var(--brown-mid); font-family: var(--font-head);
}
.review-form-foot {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 12px;
}
.review-form-note { font-size: .8rem; color: var(--brown-mid); }
.review-form-error { margin-top: 12px; }

/* ─── Reviews: admin list + detail ───────────────────────────── */
/* Whole row opens the review; the View button is kept for clarity. */
.data-table tr.row-link { cursor: pointer; }
.data-table tr.row-link:hover { background: var(--cream); }
/* Anything still awaiting a decision gets a gold edge so it reads at a glance.
   On desktop the cell has its own left padding, so an inset shadow on the first
   cell sits clear of the text. */
.data-table tr.row-pending td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.admin-review-snippet { color: var(--brown-mid); font-size: .82rem; }

/* On mobile the row becomes a grid and the first cell loses its left padding,
   so that same shadow was drawn straight over the product title. Move the bar
   onto the row itself, where it sits inside the row's own 16px padding.
   Must come AFTER the rule above — same specificity, so source order decides. */
@media (max-width: 768px) {
  .data-table tr.row-pending td:first-child { box-shadow: none; }
  .data-table tr.row-pending { box-shadow: inset 3px 0 0 var(--gold); }
}

/* Reviewer hard left, dates hard right — including their labels. */
.review-detail-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.review-detail-meta > * { min-width: 0; }
.review-detail-right { text-align: right; }
.review-detail-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--brown-mid);
  margin-bottom: 2px;
}
/* The star row is shorter than a text input, so the stock form-group margin
   left an obvious hole between the name field and the Rating heading. */
.review-detail-form .form-group { margin-bottom: 14px; }
.review-detail-form .review-stars-pick { margin-bottom: 0; }
.review-mod-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.admin-nav-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: .68rem;
  font-weight: 900;
  text-align: center;
}
@media (max-width: 640px) {
  .review-mod-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 640px) {
  .product-flags { grid-template-columns: 1fr; }
}

/* ─── Admin: banner / ticker editor ───────────────────────────── */
.banner-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
}
.banner-toggle input { accent-color: var(--orange); width: 17px; height: 17px; }
.banner-rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.banner-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) var(--banner-ctl);
  gap: 8px;
  align-items: start;
}
.banner-row[hidden] { display: none; }

/* One explicit height for all three controls. Left to their own devices a
   select renders 48px, the input 46px and a .btn-sm 35px — and the button
   carries the pill radius while the fields use the small one. */
:root { --banner-ctl: 46px; }
.banner-row .form-control,
.banner-row-del {
  height: var(--banner-ctl);
  border-radius: var(--radius-sm);
}
.banner-row-icon { cursor: pointer; padding: 0 10px; }
.banner-row-del {
  width: var(--banner-ctl);
  padding: 0;
  flex: none;
  color: var(--red);
  border-color: var(--cream-darker);
}
.banner-row-del:hover { border-color: var(--red); background: rgba(192,57,43,.06); }

/* Live preview of the row, styled like the real bar it will appear in */
.banner-row-preview {
  grid-column: 1 / -1;
  margin-top: -2px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.banner-row-preview strong { font-weight: 900; }
.banner-row-preview.is-empty { display: none; }
.banner-row-preview .ico { vertical-align: -.16em; margin-right: 3px; }
/* The announcement bar draws its icons in gold; the ticker's are white. */
.banner-form[data-which="announcement"] .banner-row-preview .ico { color: var(--gold); }
.banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.banner-hint {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cream-dark);
  font-size: .82rem;
  color: var(--brown-mid);
}
.banner-preview { color: var(--navy); }

@media (max-width: 620px) {
  /* Icon and delete share the top line, message spans the full width below */
  .banner-row { grid-template-columns: minmax(0, 1fr) var(--banner-ctl); }
  .banner-row-icon    { order: 1; }
  .banner-row-del     { order: 1; }
  .banner-row-text    { order: 2; grid-column: 1 / -1; }
  .banner-row-preview { order: 3; }
  .banner-actions .btn { flex: 1; justify-content: center; }
}