/* ===========================================================
   Pressure Paxx — public stylesheet
   Black + electric blue, glass cards, soft glow
   =========================================================== */

:root {
  /* Color tokens — black + blue */
  --bg:       #060912;
  --bg-2:     #0b1020;
  --bg-3:     #131a2c;
  --bg-4:     #1a2238;
  --ink:      #eef2ff;
  --ink-2:    #b9c3df;
  --ink-mute: #7d89ad;
  --line:     rgba(96, 165, 250, 0.22);
  --line-2:   rgba(96, 165, 250, 0.10);
  --panel:    rgba(11, 16, 32, 0.94);
  --primary:        #3b82f6;
  --primary-2:      #60a5fa;
  --primary-deep:   #2563eb;
  --primary-soft:   rgba(59, 130, 246, 0.16);
  --primary-softer: rgba(59, 130, 246, 0.08);
  --primary-glow:   rgba(59, 130, 246, 0.45);
  --bolt:    #fbbf24;
  --bolt-2:  #f59e0b;
  --danger:  #f87171;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.5), 0 16px 36px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 1px rgba(96, 165, 250, 0.35), 0 12px 32px rgba(59, 130, 246, 0.18);
  --shadow-elev: 0 32px 80px rgba(0, 0, 0, 0.6);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; border-radius: 4px; }

html, body {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(59, 130, 246, 0.22), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(96, 165, 250, 0.10), transparent 60%),
    linear-gradient(180deg, #04070f 0%, #060912 50%, #080d1c 100%);
  background-attachment: fixed;
  /* The ONLY overflow rule we use: hide horizontal scroll on body so nothing
     can cause sideways drift. Vertical scroll stays default (the browser
     handles it on the html element). This is the most compatible pattern
     across iOS Safari, Android Chrome, Samsung Internet, and Firefox. */
  overflow-x: hidden;
}

/* Locks page scroll while a modal is open. Plain overflow:hidden is the
   minimum needed — works on iOS Safari, Android Chrome, Samsung Internet,
   Firefox. Adding position:fixed here would cause the page to lose scroll
   on Android if the class ever stayed stuck. */
body.no-scroll {
  overflow: hidden;
}

h1, h2, h3, p, ul, li { margin: 0; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
img, video { max-width: 100%; display: block; }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.muted { color: var(--ink-mute); }

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

.app-shell {
  width: min(100%, 1280px);
  margin: 0 auto;
  /* Extra bottom padding clears the floating "Current Deals" button so it
     never overlaps the last row of cards. ~96px is enough for the button
     height plus its bottom offset on iPhones with the home indicator. */
  padding: 10px 12px calc(96px + env(safe-area-inset-bottom, 0px));
}

.top-bar {
  position: sticky;
  top: env(safe-area-inset-top, 0);
  z-index: 20;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(8, 13, 28, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.brand {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #b9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.top-actions {
  display: flex;
  flex-direction: column; /* mobile: filter row stacked above search */
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}
.filter-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-wrap: wrap; /* let filters wrap on very narrow screens */
  min-width: 0;
}

/* ===== Badge / Product type filter ===== */
.filter-wrap {
  position: relative;
  flex: 1 1 auto; /* split filter row evenly across available width */
  min-width: 0;
}
.filter-btn {
  /* Defensive overrides — global `button` rule forces width:100%, uppercase,
     blue gradient bg, and a glow shadow. Reset each one explicitly. */
  width: 100%; /* fill the flex parent so 3 dropdowns share the row evenly */
  text-transform: none;
  box-shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: rgba(11, 16, 32, 0.8);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.filter-label {
  /* Truncate long labels (e.g. "All Categories") instead of overflowing */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
.filter-btn:hover {
  border-color: var(--primary-2);
  background: rgba(11, 16, 32, 0.9);
  box-shadow: none;
}
.filter-btn:focus-visible {
  outline: none;
  border-color: var(--primary-2);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
}
.filter-btn.is-active {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.14);
}
.filter-chevron {
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 0.18s var(--ease);
  display: inline-block;
}
.filter-btn[aria-expanded="true"] .filter-chevron {
  transform: rotate(180deg);
}

.filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  /* Never wider than the viewport (with some safe-area padding) — prevents
     horizontal scroll on phones when the dropdown content is long. */
  max-width: calc(100vw - 24px);
  list-style: none;
  margin: 0;
  padding: 6px;
  background: rgba(11, 16, 32, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(96, 165, 250, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 30;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}
/* The Categories dropdown sits in the rightmost filter slot. Anchor its menu
   to the right edge of its button so it grows LEFT instead of overflowing
   the right side of the screen on mobile. */
#category-filter-menu {
  left: auto;
  right: 0;
}
.filter-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0s;
}
.filter-option {
  display: flex;
  align-items: center;
  justify-content: center; /* center plain text options horizontally */
  text-align: center;
  gap: 8px;
  padding: 11px 32px; /* extra horizontal room for the absolute checkmark */
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  min-height: 44px;
  box-sizing: border-box;
  position: relative; /* anchor for the absolute "✓" on selected items */
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.filter-option:hover,
.filter-option:focus-visible {
  background: rgba(59, 130, 246, 0.16);
  outline: none;
}
.filter-option:active {
  background: rgba(59, 130, 246, 0.24);
}
.filter-option.is-selected {
  color: var(--primary-2);
  font-weight: 800;
  background: rgba(59, 130, 246, 0.10);
}
.filter-option.is-selected::after {
  /* Pinned to the right edge so the visible label stays perfectly centered.
     Without absolute positioning the ✓ would shove the text off-center. */
  content: "✓";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 800;
}
/* Iconed options override center alignment with space-between so the inner
   left-icon / text / right-icon spans sit at the correct positions. */
.filter-option-iconed {
  justify-content: space-between;
}
/* For iconed options the highlighted background already signals selection;
   the absolute ✓ would visually collide with the right-side icon, so hide it. */
.filter-option-iconed.is-selected::after {
  display: none;
}

.top-actions .search-input {
  flex: 1 1 auto;
  min-width: 0;
}

.search-input {
  width: 100%;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  padding: 10px 14px;
  background: rgba(11, 16, 32, 0.8);
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.search-input::placeholder { color: var(--ink-mute); }
.search-input:focus {
  outline: none;
  border-color: var(--primary-2);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
}

/* ===== Flavor grid ===== */

.flavor-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  contain: layout style;
  align-items: stretch;
}

/* ===== New Drops rail ===== */
.new-drops {
  margin-bottom: 24px;
  padding: 18px 0 6px;
  position: relative;
}
.new-drops::before {
  /* subtle blue glow stripe under the heading to mark this as a special section */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-2), transparent);
  opacity: 0.5;
}
.new-drops-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 0 2px;
}
.new-drops-title {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #b9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.new-drops-sub {
  font-size: 0.78rem;
  color: var(--ink-mute);
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.new-drops-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 12px;
  /* Hide scrollbar visually, keep functionality */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.new-drops-rail::-webkit-scrollbar { height: 4px; }
.new-drops-rail::-webkit-scrollbar-track { background: transparent; }
.new-drops-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.new-drop-card {
  flex: 0 0 168px;
  width: 168px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  cursor: pointer;
}
.new-drop-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 18px rgba(59, 130, 246, 0.18);
}
.new-drop-card:active { transform: translateY(0); }

.new-drop-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-3) center / cover no-repeat;
}
.new-drop-thumb.is-empty {
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--ink-mute);
}

.new-drop-pill {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffd24a 0%, #f59e0b 100%);
  color: #1a1410;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  text-transform: uppercase;
}

.new-drop-body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.new-drop-name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.new-drop-name .name-text {
  display: block;
  width: 100%;
  text-align: center;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  /* Allow up to 3 lines for long names */
  max-height: calc(0.85rem * 1.2 * 3);
  overflow: hidden;
}
.new-drop-name .name-emojis {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}
.new-drop-price {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.3;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.new-drop-meta {
  margin: 0;
  font-size: 0.7rem;
  color: var(--ink-mute);
  text-align: center;
  font-weight: 600;
}

.empty-state {
  text-align: center;
  color: var(--ink-mute);
  padding: 40px 16px;
  font-weight: 600;
}

/* ===== Flavor card ===== */

.flavor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(26, 34, 56, 0.85) 0%, rgba(13, 18, 36, 0.85) 100%);
  padding: 10px;
  box-shadow: var(--shadow-card);
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
  content-visibility: auto;
  contain-intrinsic-size: 1px 320px;
}

.flavor-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.06), transparent 40%);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}

.flavor-card:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: var(--shadow-glow);
}
.flavor-card:hover::before { opacity: 1; }
.flavor-card:active { transform: translateY(0); }

.flavor-card.is-dragging {
  opacity: 0.92;
  transform: scale(1.04) rotate(-0.6deg);
  box-shadow: 0 0 0 2px var(--primary-2), 0 24px 60px rgba(0,0,0,0.7), 0 0 50px rgba(59, 130, 246, 0.45);
  z-index: 100;
  cursor: grabbing;
}
.flavor-card.is-drop-target {
  box-shadow: 0 0 0 3px var(--primary-2), 0 0 24px rgba(59, 130, 246, 0.55), var(--shadow-card);
  border-color: var(--primary-2);
  transform: translateY(-2px);
}

.card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-3);
  isolation: isolate;
}

.card-image, .card-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.card-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 2rem; font-weight: 800;
  color: var(--ink-mute);
  background:
    radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-4), var(--bg-3));
}

.card-badge {
  position: absolute;
  top: 8px; right: 8px;
  padding: 4px 10px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(11, 16, 32, 0.78);
  border: 1px solid rgba(96, 165, 250, 0.35);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.card-badge:empty { display: none; }

.card-body {
  flex: 1;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  align-items: stretch;
}

/* Each row reserves a fixed line count so all cards align, even with short/empty values.
   Uses min-height + max-height so emoji icons can render at their true size without clipping. */
.card-category {
  /* Two stacked rows, both centered:
       row 1: the icon pair (.card-category-icons)
       row 2: the category text (.card-category-text)
     Plain block layout — guaranteed to behave at any width. */
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.25;
  min-height: 2.6em;
}

.card-category-icons {
  display: block;
  text-align: center;
  margin-bottom: 4px;
  line-height: 1;
}
.card-category-icons:empty { display: none; }

.card-category-text {
  display: block;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}
.card-category-text:empty { display: none; }

.bolt {
  display: inline-block;
  color: var(--bolt);
  font-size: 0.78rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.22));
  margin: 0 3px;
}
.bolt:empty { display: none; }

.card-name {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  /* Wrap at word boundaries only — never break or hyphenate mid-word.
     If a word is too long for the card, push it to its own line whole. */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  /* Two stacked rows: text + (optional) emojis. Use flex column for clean spacing. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  /* Reserve space for ~3 lines of text + 1 line of emojis */
  min-height: calc(0.95rem * 1.2 * 3);
  width: 100%;
}
.card-name .name-text {
  /* Plain block so multi-line text centers each line correctly,
     and we don't get -webkit-box quirks with word breaks. */
  display: block;
  width: 100%;
  text-align: center;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  /* Allow up to 4 lines for very long names */
  max-height: calc(0.95rem * 1.2 * 4);
  overflow: hidden;
}
.card-name .name-emojis {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}

.card-featured-price {
  font-size: 0.85rem;
  color: var(--ink-2);
  font-weight: 600;
  margin-top: auto;
  line-height: 1.3;
  text-align: center;
  min-height: calc(0.85rem * 1.3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Nose ranking pill on the card — compact, sits between the name and the price */
.card-nose-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(99, 102, 241, 0.18) 100%);
  border: 1px solid rgba(99, 130, 246, 0.4);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  width: fit-content;
}
.card-nose-rank.hidden { display: none; }
.card-nose-score {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.card-nose-emoji {
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}
.card-nose-emoji:empty { display: none; }

.card-view-btn {
  margin-top: auto;
  width: 100%;
  border: 1px solid rgba(96, 165, 250, 0.40);
  background: rgba(59, 130, 246, 0.14);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.18s var(--ease);
}
.card-view-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18), 0 8px 24px rgba(59, 130, 246, 0.35);
}

/* ===== Tablet: 3 columns ===== */
@media (min-width: 640px) {
  .app-shell { padding: 14px 18px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .flavor-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .top-bar { grid-template-columns: 1fr 440px; align-items: center; gap: 16px; padding: 12px 16px; }
  .brand { text-align: left; }
  .card-name { font-size: 1rem; }
  .card-view-btn { font-size: 0.78rem; padding: 11px 16px; }
  .new-drop-card { flex: 0 0 200px; width: 200px; }
  .new-drops-title { font-size: 1.3rem; }
  /* Bigger emojis & icons on desktop where there's plenty of room */
  .bolt { font-size: 0.95rem; margin: 0 4px; }
  .card-name .name-emojis { font-size: 1.1rem; letter-spacing: 0.06em; }
  /* Restore the framed carousel look on tablet+ — mobile goes edge-to-edge,
     but on bigger screens the rounded panel reads better. */
  .detail-scroll { padding: 56px 8px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .carousel {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
  }
}

/* ===== Desktop: 4 columns ===== */
@media (min-width: 1024px) {
  .flavor-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .flavor-card { padding: 12px; }
  .card-name { font-size: 1.05rem; }
  .new-drop-card { flex: 0 0 220px; width: 220px; }
}

/* ===== Wide desktop: 5 columns ===== */
@media (min-width: 1400px) {
  .flavor-feed { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ===== Generic overlay / panel ===== */

.overlay {
  position: fixed; inset: 0;
  z-index: 50;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(2, 4, 10, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: overlay-in 0.18s var(--ease);
}

@keyframes overlay-in { from { opacity: 0 } to { opacity: 1 } }

.age-overlay {
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(59, 130, 246, 0.22), transparent 65%),
    radial-gradient(700px 500px at 50% 110%, rgba(37, 99, 235, 0.18), transparent 60%),
    linear-gradient(180deg, #04070f 0%, #060912 100%);
  backdrop-filter: none;
}

.panel {
  width: min(100%, 460px);
  background:
    linear-gradient(180deg, rgba(26, 34, 56, 0.95) 0%, rgba(11, 16, 32, 0.95) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 22px;
  display: grid; gap: 12px;
  box-shadow: var(--shadow-elev);
  color: var(--ink);
}

.age-panel {
  width: min(100%, 720px);
  text-align: center;
  padding: clamp(20px, 4vw, 36px);
}

.age-brand {
  font-size: clamp(1.8rem, 8vw, 3.4rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #93b4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(59, 130, 246, 0.35);
}

.age-title {
  font-size: clamp(1.05rem, 3.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.age-copy {
  color: var(--ink-2);
  line-height: 1.55;
}

input[type="password"], input[type="text"], input[type="search"] {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: 12px 14px;
  font: inherit;
  background: rgba(11, 16, 32, 0.8);
  color: var(--ink);
}
input[type="password"]::placeholder,
input[type="text"]::placeholder,
input[type="search"]::placeholder { color: var(--ink-mute); }

button {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--primary-2) 0%, var(--primary) 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 14px;
  transition: transform 0.12s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
button:hover {
  background: linear-gradient(180deg, #7eb6ff 0%, var(--primary-2) 100%);
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.45), inset 0 1px 0 rgba(255,255,255,0.22);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.age-btn { border-radius: var(--radius-pill); padding: 14px 18px; }
.age-btn-no  {
  background: rgba(59, 130, 246, 0.10);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.age-btn-no:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: var(--primary-2);
  box-shadow: none;
}

.message { min-height: 1.2em; color: var(--danger); font-weight: 700; font-size: 0.9rem; }
.age-message { text-align: center; }

/* ===== Detail modal — single scrolling view ===== */

.detail-overlay { padding: 0; }

.detail-panel {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(26, 34, 56, 0.98) 0%, rgba(11, 16, 32, 1) 100%);
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-elev);
  overflow: hidden;
  color: var(--ink);
}

.detail-close,
.detail-share {
  position: absolute !important;
  top: 10px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(11, 16, 32, 0.72) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  z-index: 5 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  transition: background 0.18s var(--ease), transform 0.12s var(--ease) !important;
}
.detail-close { right: 10px !important; font-size: 1.25rem !important; }
.detail-share { right: 54px !important; font-size: 0 !important; /* icon only */ }
.detail-close:hover,
.detail-share:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.detail-close:active,
.detail-share:active { transform: scale(0.94) !important; }

/* Inline SVG share icon — clean, sharp at any size */
.detail-share::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v13M7 8l5-5 5 5M5 21h14a2 2 0 0 0 2-2v-5'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v13M7 8l5-5 5 5M5 21h14a2 2 0 0 0 2-2v-5'/></svg>") no-repeat center / contain;
}

.share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 24px rgba(59, 130, 246, 0.4);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.share-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.detail-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Mobile: no horizontal padding so the carousel runs fully edge-to-edge.
     Top padding clears the absolute-positioned share/close buttons (top: 10
     + 36px height = ~46px) so the title sits below them at full width.
     Bottom padding leaves room for the floating "Current Deals" button so
     the last price tier never gets covered. */
  padding: 56px 0 calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-name {
  text-align: center;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Small horizontal padding only — vertical clearance from the share/close
     buttons is handled by the detail-scroll padding-top instead, so the
     title can use the full panel width on one line. */
  padding: 2px 12px 0;
  line-height: 1.15;
  /* Two stacked rows: text + (optional) emojis */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* The gradient applies only to the text row, leaving emojis untouched */
.detail-name .name-text {
  background: linear-gradient(180deg, #ffffff 0%, #b9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  text-align: center;
  width: 100%;
}
.detail-name .name-emojis {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.4em;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}

/* Secondary flavor name shown inside the detail-page-prices section,
   sitting above the emojis pill. Smaller than the top title with the
   same gradient text treatment for visual consistency. */
.detail-name-secondary {
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  background: linear-gradient(180deg, #ffffff 0%, #b9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
}
.detail-name-secondary:empty { display: none; }

.detail-pager {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* Carousel — adapts to media aspect ratio, fills available viewport */
.carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* Mobile defaults: no border, no border-radius — gives maximum image
     real estate edge-to-edge. Desktop restores the framed look. */
  border-radius: 0;
  border: none;
  background: #000;
  overflow: hidden;
  /* On mobile, make the carousel as tall as possible — portrait photos
     are common and look much better when they fill more of the screen.
     Height is recomputed by JS based on the active slide's aspect ratio,
     bounded by these min/max values. */
  height: 84vh;
  max-height: 92vh;
  min-height: 480px;
  transition:
    height 0.28s var(--ease),
    transform 0.22s var(--ease),
    opacity 0.22s var(--ease);
}

/* Mute button overlay — minimal, like Instagram */
.video-mute-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(11, 16, 32, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1rem;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.video-mute-btn:hover { background: rgba(59, 130, 246, 0.85); }

/* Fullscreen button — top-right of carousel, always visible */
.carousel-fullscreen {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(11, 16, 32, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.carousel-fullscreen:hover { background: rgba(59, 130, 246, 0.85); }

/* Real fullscreen (browser native) — let CSS rule the carousel */
.carousel:fullscreen,
.carousel:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0;
  border: none;
  background: #000;
}
.carousel:fullscreen .carousel-track,
.carousel:-webkit-full-screen .carousel-track {
  height: 100%;
}
.carousel:fullscreen .carousel-slide img,
.carousel:fullscreen .carousel-slide video,
.carousel:-webkit-full-screen .carousel-slide img,
.carousel:-webkit-full-screen .carousel-slide video {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* Pseudo-fullscreen for iOS Safari (when the Fullscreen API isn't available
   or rejects). The carousel is pinned to the entire viewport with NO padding —
   the image fills everything, and iOS overlays its URL bar / status bar on top.
   This is the same behavior as the iOS Photos app and Instagram web. */
.carousel.is-pseudo-fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh; /* "large viewport height" — full screen, ignoring URL bar */
  max-width: 100vw;
  max-height: 100lvh;
  z-index: 9999;
  border-radius: 0;
  border: none;
  background: #000;
  /* No padding — let the media fill everything. iOS will overlay its
     own UI (URL bar, status bar) on top, but the image stays edge-to-edge. */
  padding: 0;
}
.carousel.is-pseudo-fullscreen .carousel-track {
  height: 100%;
}
.carousel.is-pseudo-fullscreen .carousel-slide img,
.carousel.is-pseudo-fullscreen .carousel-slide video {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.carousel.is-pseudo-fullscreen .carousel-dots { display: none; }

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.32s var(--ease);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
}

.carousel-slide img,
.carousel-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.carousel-empty {
  font-weight: 800;
  color: var(--ink-mute);
  font-size: 0.9rem;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(11, 16, 32, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1.5rem;
  line-height: 1;
  display: grid; place-items: center;
  padding: 0 0 2px;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  transition: background 0.15s var(--ease), transform 0.12s var(--ease);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.carousel-arrow:hover {
  background: rgba(59, 130, 246, 0.85);
  transform: translateY(-50%) scale(1.06);
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }

.carousel-dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 5px;
  z-index: 2;
}
.carousel-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 0;
  box-shadow: none;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.carousel-dot.is-active { background: var(--primary-2); transform: scale(1.3); }

/* Thumbnail strip */
.carousel-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 6px 4px 10px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  flex-shrink: 0;
}
.carousel-thumbs:empty { display: none; }
.carousel-thumbs::-webkit-scrollbar { height: 4px; }
.carousel-thumbs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.carousel-thumb {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: #000;
  padding: 0;
  box-shadow: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.12s var(--ease);
}
.carousel-thumb img, .carousel-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;
}
.carousel-thumb.is-active {
  border-color: var(--primary-2);
  box-shadow: 0 0 0 1px var(--primary-2), 0 0 12px rgba(59, 130, 246, 0.45);
  transform: scale(1.06);
}
/* Play icon overlay for video thumbnails */
.carousel-thumb.is-video::after {
  content: "▶";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  width: 22px; height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Prices block — tighter */
.detail-page-prices {
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(59, 130, 246, 0.18), transparent 60%),
    var(--primary-softer);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-category {
  display: block;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.detail-category-icons {
  display: block;
  text-align: center;
  margin-bottom: 4px;
  line-height: 1;
}
.detail-category-icons:empty { display: none; }
.detail-category .bolt {
  font-size: 1rem;
  margin: 0 4px;
}
.detail-category:has(.detail-category-text:empty) { display: none; }

.detail-emojis {
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  line-height: 1;
}
.detail-emojis:empty { display: none; }

/* === Nose Ranking pill on detail modal === */
.detail-nose-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px auto 4px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(99, 102, 241, 0.22) 100%);
  border: 1px solid rgba(99, 130, 246, 0.5);
  width: fit-content;
  max-width: 90%;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25), 0 0 24px rgba(99, 130, 246, 0.15);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.detail-nose-rank.hidden { display: none; }
.detail-nose-label {
  font-size: 0.72rem;
  color: var(--ink-2);
  letter-spacing: 0.14em;
}
.detail-nose-score {
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.02em;
  /* Tabular numbers so the score doesn't shift between digits */
  font-variant-numeric: tabular-nums;
}
.detail-nose-emoji {
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}
.detail-nose-emoji:empty { display: none; }

.detail-price-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.detail-price-list li {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(11, 16, 32, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  backdrop-filter: blur(6px);
}
.detail-price-list .price-label { color: var(--ink-2); }
.detail-price-list .price-value {
  color: #ffffff;
  font-size: 0.95rem;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.55);
}

@media (min-width: 640px) {
  .detail-overlay { padding: 24px; }
  .detail-panel {
    width: min(100%, 1280px);
    height: auto;
    max-height: 96dvh;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
  }
  .detail-scroll { padding: 64px 24px calc(110px + env(safe-area-inset-bottom, 0px)); gap: 18px; }
  .detail-name {
    padding: 2px 16px 0;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  }
  .detail-page-prices { padding: 22px 20px; }
  .carousel {
    max-width: 100%;
    height: 78vh;
    max-height: 86vh;
    min-height: 520px;
  }
  .carousel-thumb { flex: 0 0 80px; width: 80px; height: 80px; }
  .carousel-arrow { width: 48px; height: 48px; font-size: 1.4rem; }
  .carousel-prev { left: 16px; }
  .carousel-next { right: 16px; }
  .video-mute-btn { width: 48px; height: 48px; bottom: 18px; right: 18px; font-size: 1.15rem; }
  .carousel-fullscreen { width: 48px; height: 48px; top: 18px; right: 18px; font-size: 1.2rem; }
  .detail-close,
  .detail-share { width: 40px !important; height: 40px !important; top: 14px !important; }
  .detail-close { right: 14px !important; font-size: 1.4rem !important; }
  .detail-share { right: 62px !important; }
  .detail-share::before { width: 18px; height: 18px; }
}

/* Wide desktop — even more breathing room for the media */
@media (min-width: 1100px) {
  .detail-panel { width: min(100%, 1400px); }
  .carousel {
    height: 82vh;
    max-height: 88vh;
    min-height: 600px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =============================================================
   SOLD OUT — appears on cards (feed + new drops) and detail view
   when a flavor has a recent soldOutAt timestamp.
   ============================================================= */

/* === Feed card === */
.flavor-card.is-sold-out .card-image,
.flavor-card.is-sold-out .card-video {
  filter: grayscale(0.55) brightness(0.7);
}
.flavor-card.is-sold-out .card-featured-price {
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(239, 68, 68, 0.85);
}
/* Override the corner badge styling when it's the SOLD OUT version */
.card-badge.is-sold-out-badge {
  background: rgba(239, 68, 68, 0.85);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

/* === New drops card === */
.new-drop-card.is-sold-out .new-drop-thumb {
  filter: grayscale(0.55) brightness(0.7);
}
.new-drop-card.is-sold-out .new-drop-price {
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(239, 68, 68, 0.85);
}
.new-drop-pill.is-sold-out-pill {
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
}

/* === Detail view (modal) === */
/* SOLD OUT banner shown above the carousel inside the panel.
   Uses a ::before on the panel so we don't have to add another DOM node. */
.detail-panel.is-sold-out .detail-name::after {
  content: "SOLD OUT";
  display: inline-block;
  margin-top: 6px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #fff;
  background: rgba(239, 68, 68, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  text-transform: uppercase;
  -webkit-text-fill-color: #fff; /* override gradient text-fill from name-text */
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.4);
}

/* Cross out every price in the price list when sold out */
.detail-panel.is-sold-out .detail-price-list .price-row,
.detail-panel.is-sold-out .detail-price-list .price-value,
.detail-panel.is-sold-out .detail-price-list .price-label,
.detail-panel.is-sold-out .detail-price-list li {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(239, 68, 68, 0.9);
  color: var(--ink-mute);
}
/* Cross out the featured price label inside the prices section too if shown */
.detail-panel.is-sold-out .detail-page-prices {
  position: relative;
}

/* Category line on new drop cards — mirrors the main flavor card layout:
     row 1: both icons together (⭐🍃 🍃⭐)
     row 2: the category text (ORGANIC ZAZA)
   Plain block layout guarantees no horizontal wrap issues at any card width. */
.new-drop-category {
  display: block;
  text-align: center;
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.25;
}
.new-drop-category-icons {
  display: block;
  text-align: center;
  margin-bottom: 3px;
  line-height: 1;
}
.new-drop-category-icons:empty { display: none; }
.new-drop-category-text {
  display: block;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}
.new-drop-category-text:empty { display: none; }
.new-drop-category .bolt {
  font-size: 0.72rem;
  margin: 0;
}

/* =============================================================
   Current Deals — floating button (bottom-right) + modal
   ============================================================= */

/* Floating button — pill-shaped pop, sits above all content.
   Uses safe-area insets so it clears the iOS home indicator. */
.deals-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(29, 78, 216, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease);
}
.deals-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(29, 78, 216, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4);
}
.deals-fab:active { transform: translateY(0); }
.deals-fab.hidden { display: none; }
.deals-fab-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* Mobile: keep the button compact — keep both icon + text but trim padding */
@media (max-width: 480px) {
  .deals-fab {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 11px 16px;
    font-size: 0.85rem;
  }
}

/* Modal overlay */
.deals-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(2, 5, 14, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.deals-overlay.hidden { display: none; }

.deals-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, rgba(11, 16, 32, 0.98) 0%, rgba(6, 10, 20, 0.98) 100%);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(96, 165, 250, 0.08);
  color: var(--ink);
}

.deals-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 16, 32, 0.6);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  /* Override the global button rule's width:100% / uppercase / gradient bg */
  width: 36px;
  text-transform: none;
  box-shadow: none;
  padding: 0;
}
.deals-close:hover {
  border-color: var(--primary-2);
  background: rgba(11, 16, 32, 0.85);
  box-shadow: none;
}

.deals-title {
  margin: 0 0 14px;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #b9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.deals-message {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  text-align: center;
}

/* Category dropdown options that have icon spans on each side of the text.
   Mirrors the admin's preset look (⭐⭐ SUPER ZAZA ⭐⭐) so shoppers see the
   same visual pattern they recognize from the cards. */
.filter-option-iconed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.filter-opt-icon {
  flex: 0 0 auto;
  /* Reserve a consistent slot for the icon so the centered text label
     lines up vertically across all rows in a dropdown. Single-emoji icons
     (🍭, ⭐) get padded to the same effective width as double-emoji ones
     (🍭⛽, ⭐🍃) — their text columns then share the same center axis. */
  min-width: 64px;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.filter-opt-text {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Inherit existing .filter-option font weight + casing */
}

/* Mobile compaction for filter dropdowns — anchor each menu to the full
   filter-row width so it spans the screen edge-to-edge instead of being
   constrained to the trigger button's narrow column. With this width there's
   plenty of room for the iconed options (no truncation, no overflow), and
   all three dropdowns (Type, Nose, Categories) open in the same place
   visually so the layout stays predictable. */
@media (max-width: 480px) {
  /* Disable per-button anchor and let menus position relative to the row */
  .filter-wrap { position: static; }
  .filter-row { position: relative; }
  .filter-menu {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
  }
  /* The desktop rule right-anchors the categories dropdown to its button —
     reset that on mobile so all menus span the full row consistently. */
  #category-filter-menu {
    left: 0;
    right: 0;
  }

  .filter-option {
    padding: 11px 16px;
    font-size: 0.9rem;
  }
  .filter-option.is-selected::after {
    right: 8px;
  }
}

/* =============================================================
   View mode toggle — Card / Menu segmented control
   ============================================================= */
.view-toggle {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(11, 16, 32, 0.6);
  box-sizing: border-box;
  gap: 0;
  /* Sticks below the search input on mobile, sits inline with filters
     on desktop via the @media block further down. */
}
.view-toggle-btn {
  /* Reset the global button rule's width/case/glow */
  flex: 1 1 50%;
  width: auto;
  min-width: 0;
  text-transform: none;
  box-shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  min-height: 40px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.view-toggle-btn:hover {
  color: var(--ink);
  box-shadow: none;
}
.view-toggle-btn.is-active {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.4);
}
.view-toggle-icon {
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 auto;
}
.view-toggle-label {
  flex: 0 1 auto;
  min-width: 0;
}

/* =============================================================
   Compact text menu — same data as card grid, list shape
   Mobile-first: full-width tappable rows, big touch targets.
   ============================================================= */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
}
.menu-list.hidden { display: none; }

.menu-row {
  /* Reset the global button rule's width/uppercase/glow */
  width: 100%;
  text-transform: none;
  box-shadow: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  min-height: 52px; /* easy 44px+ tap target on phones */
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(11, 16, 32, 0.55);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease), transform 0.08s var(--ease);
  /* Belt-and-suspenders against inner content overflowing the row */
  min-width: 0;
  overflow: hidden;
}
.menu-row:hover {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(96, 165, 250, 0.35);
}
.menu-row:active { transform: scale(0.99); }

.menu-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* Long names wrap to a second line cleanly instead of overflowing the row.
     Word-break normal preserves emoji clusters so a flavor like "Hyper Za 🫨🌟"
     never splits an emoji across lines. */
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
  /* Two-row stack: text first, emojis below — prevents the emoji cluster
     from wrapping mid-glyph on narrow screens. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.menu-row-name .name-text {
  display: block;
  word-break: normal;
  overflow-wrap: break-word;
}
.menu-row-name .name-emojis {
  display: block;
  font-size: 0.95em;
  line-height: 1.1;
  letter-spacing: 0.04em;
}
.menu-row-name .name-emojis:empty { display: none; }
.menu-row-price {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--primary-2);
  white-space: nowrap;
}

.menu-row.is-sold-out {
  opacity: 0.65;
}
.menu-row.is-sold-out .menu-row-name {
  color: var(--ink-mute);
}
.menu-row-price-soldout {
  color: #f87171 !important; /* red */
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

/* Hide card grid when menu is the active view */
.flavor-feed.hidden { display: none; }

/* Desktop: more horizontal whitespace, slightly larger type */
@media (min-width: 640px) {
  .menu-row {
    padding: 16px 20px;
    min-height: 60px;
  }
  .menu-row-name { font-size: 1.05rem; }
  .menu-row-price { font-size: 1.05rem; }
  .view-toggle {
    max-width: 280px;
    margin-left: auto; /* aligns under search bar in the actions column */
  }
}

/* =============================================================
   Menu view — section headers (Organics / Zaza / Indoor / Misc)
   ============================================================= */
.menu-section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 8px;
  padding: 6px 12px;
}
.menu-section-header:first-child {
  margin-top: 4px; /* tighten gap above the very first section */
}
.menu-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #b9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}
.menu-section-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex: 0 0 auto;
}
.menu-section-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Desktop: a touch larger headers, more breathing room between sections */
@media (min-width: 640px) {
  .menu-section-header {
    margin: 24px 0 10px;
  }
  .menu-section-title {
    font-size: 1.1rem;
  }
  .menu-section-icon {
    font-size: 1.2rem;
  }
}