/* ============================================================
   AFAMILY HQ — LUXURY REDESIGN: SHOPPING & PLANS
   style-shopping-plans.css

   Covers:
     #section-shopping
     #section-activities  (.plans-sub[activities])
     #section-ideas       (.plans-sub[ideas])
     #section-datenights  (.plans-sub[datenights])
     #section-vacations   (.plans-sub[vacations])

   Design language: dark moody heroes · cornerstone gradient cards
   Fraunces display · Inter body · cream glass pills · cognac rails
   ============================================================ */

/* ============================================================
   SHARED GLASS UTILITY
   ============================================================ */
.sp-glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(246, 241, 232, 0.12);
  border: 1px solid rgba(246, 241, 232, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--brand-cream);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.sp-glass-pill:hover {
  background: rgba(246, 241, 232, 0.22);
  border-color: rgba(246, 241, 232, 0.4);
}
.sp-glass-pill.active {
  background: var(--brand-cognac);
  border-color: var(--brand-cognac);
  color: var(--brand-cream);
}

/* ============================================================
   SHARED HERO BASE
   ============================================================ */
.sp-hero {
  position: relative;
  border-radius: 22px;
  padding: 36px 32px 32px;
  margin-bottom: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Cognac left rail accent */
.sp-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-cognac) 0%, rgba(195, 106, 45, 0.4) 100%);
  border-radius: 4px 0 0 4px;
}

/* Subtle radial highlight top-right */
.sp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(480px 200px at 110% -20%, rgba(246, 241, 232, 0.09), transparent 60%);
  pointer-events: none;
}

.sp-hero > * { position: relative; z-index: 1; }

/* Hero text */
.sp-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brand-cognac);
  margin-bottom: -8px;
}

.sp-hero-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--brand-cream);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}

.sp-hero-subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--brand-cognac);
  margin-top: -10px;
}

/* Count / stat badge — cream glass pill top-right */
.sp-hero-badge {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  background: rgba(246, 241, 232, 0.14);
  border: 1px solid rgba(246, 241, 232, 0.26);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-cream);
  letter-spacing: 0.1em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Hero action row (filter pills & add buttons) */
.sp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ============================================================
   SHARED CORNERSTONE CARD GRID
   ============================================================ */
.sp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Bold cornerstone gradient card — base */
.sp-card {
  border-radius: 20px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(246, 241, 232, 0.08);
  box-shadow: 0 12px 32px rgba(15, 22, 38, 0.22);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(15, 22, 38, 0.32);
}

/* Subtle top sheen */
.sp-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px 120px at 100% -10%, rgba(246, 241, 232, 0.12), transparent 55%);
  pointer-events: none;
}

.sp-card > * { position: relative; z-index: 1; }

/* Cornerstone cycling fills — cognac / emerald / navy / burgundy */
.sp-card:nth-child(4n+1) {
  background: linear-gradient(160deg, #d4762e 0%, var(--brand-cognac) 50%, #8a4a1f 100%);
}
.sp-card:nth-child(4n+2) {
  background: linear-gradient(160deg, #2e5a44 0%, var(--brand-emerald) 55%, #152e22 100%);
}
.sp-card:nth-child(4n+3) {
  background: linear-gradient(160deg, #2a4268 0%, var(--brand-navy) 55%, #0f1626 100%);
}
.sp-card:nth-child(4n+4) {
  background: linear-gradient(160deg, #7a2a30 0%, var(--brand-burgundy) 55%, #36131a 100%);
}

/* Card inner elements */
.sp-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--brand-cream);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.sp-card-body {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(246, 241, 232, 0.78);
  line-height: 1.5;
}

.sp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
}

/* Cream glass chip — dates, categories, status */
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  background: rgba(246, 241, 232, 0.14);
  border: 1px solid rgba(246, 241, 232, 0.22);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-cream);
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Member identity chips */
.sp-chip-abs    { background: rgba(29, 46, 74, 0.55);  border-color: rgba(42, 66, 104, 0.7); }
.sp-chip-anne   { background: rgba(90, 30, 35, 0.55);  border-color: rgba(122, 42, 48, 0.7); }
.sp-chip-lera   { background: rgba(195, 106, 45, 0.55); border-color: rgba(212, 118, 46, 0.7); }
.sp-chip-lebari { background: rgba(35, 74, 55, 0.55);  border-color: rgba(46, 90, 68, 0.7); }

/* Card action buttons row (edit / delete) */
.sp-card-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}

.sp-card-btn {
  background: rgba(246, 241, 232, 0.12);
  border: 1px solid rgba(246, 241, 232, 0.2);
  border-radius: 10px;
  color: rgba(246, 241, 232, 0.8);
  padding: 7px 11px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font-body);
  font-weight: 600;
}
.sp-card-btn:hover {
  background: rgba(246, 241, 232, 0.26);
  color: var(--brand-cream);
}

/* ============================================================
   SHARED EMPTY STATES
   ============================================================ */
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 24px;
  text-align: center;
}

.sp-empty-icon {
  opacity: 0.4;
  width: 64px;
  height: 64px;
  color: var(--brand-cognac);
}

.sp-empty-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sp-empty-msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--brand-cognac);
  letter-spacing: -0.01em;
  opacity: 0.8;
  max-width: 260px;
  line-height: 1.4;
}

.sp-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--brand-cognac);
  color: var(--brand-cream);
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
.sp-empty-btn:hover {
  background: #a85a24;
  transform: translateY(-1px);
}

/* ============================================================
   PLANS SUB-NAV TABS (shared across activities/ideas/datenights/vacations)
   ============================================================ */
.sp-plans-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.sp-plans-tabs::-webkit-scrollbar { display: none; }

.sp-plans-tab {
  flex: 0 0 auto;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(246, 241, 232, 0.25);
  background: transparent;
  color: rgba(246, 241, 232, 0.7);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.sp-plans-tab:hover {
  background: rgba(246, 241, 232, 0.12);
  color: var(--brand-cream);
  border-color: rgba(246, 241, 232, 0.4);
}
.sp-plans-tab.active {
  background: var(--brand-cream);
  color: var(--brand-ink);
  border-color: var(--brand-cream);
}

/* Override existing .plans-tabs & .plans-tab inside plans-sub heroes */
.plans-sub .plans-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  display: contents; /* let hero flex handle layout */
}

/* ============================================================
   ██████████ SHOPPING LIST ██████████
   ============================================================ */

#section-shopping {
  /* Remove default section-header margin so hero flows cleanly */
}

/* Hero */
#section-shopping .sp-hero,
.shopping-lux-hero {
  background: linear-gradient(135deg, #141f33 0%, var(--brand-navy) 55%, #3a1518 100%);
}

/* Replace the plain section-header for shopping */
#section-shopping .section-header {
  display: none; /* hero takes its place */
}

/* Shopping hero wrapper — injected via CSS around existing markup via override */
/* We style the existing structural elements directly */

/* -------- Category filter pills row -------- */
#shop-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 0 4px;
  margin-bottom: 0 !important;
}

#shop-cat-filters .shopping-filter,
#shop-cat-filters .btn {
  /* Cream glass on dark hero background */
  background: rgba(246, 241, 232, 0.10);
  border: 1px solid rgba(246, 241, 232, 0.22);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(246, 241, 232, 0.75);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-shadow: none;
}
#shop-cat-filters .shopping-filter:hover,
#shop-cat-filters .btn:hover {
  background: rgba(246, 241, 232, 0.2);
  color: var(--brand-cream);
  border-color: rgba(246, 241, 232, 0.4);
}
#shop-cat-filters .shopping-filter.active {
  background: var(--brand-cognac);
  border-color: var(--brand-cognac);
  color: var(--brand-cream);
  box-shadow: 0 4px 14px rgba(195, 106, 45, 0.35);
}

/* -------- Person filter pills -------- */
.combined-filters .shop-person-filter {
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--brand-line);
  background: transparent;
  color: var(--brand-mute);
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Member-color identity pills */
.combined-filters .shop-person-filter[onclick*="'all'"] { border-color: var(--brand-line); }
.combined-filters .shop-person-filter[onclick*="'all'"].active {
  background: var(--brand-ink);
  color: var(--brand-cream);
  border-color: var(--brand-ink);
}
.combined-filters .shop-person-filter[onclick*="'Abs'"].active {
  background: var(--brand-navy);
  color: var(--brand-cream);
  border-color: var(--brand-navy);
}
.combined-filters .shop-person-filter[onclick*="'Anne'"].active {
  background: var(--brand-burgundy);
  color: var(--brand-cream);
  border-color: var(--brand-burgundy);
}
.combined-filters .shop-person-filter[onclick*="'Lera'"].active {
  background: var(--brand-cognac);
  color: var(--brand-cream);
  border-color: var(--brand-cognac);
}
.combined-filters .shop-person-filter[onclick*="'Lebari'"].active {
  background: var(--brand-emerald);
  color: var(--brand-cream);
  border-color: var(--brand-emerald);
}

/* -------- Shopping actions bar -------- */
.shopping-actions-bar {
  background: var(--brand-paper) !important;
  border-radius: 14px 14px 0 0 !important;
  border-bottom: 1px solid var(--brand-line) !important;
  padding: 12px 20px !important;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-mute);
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* -------- Shopping list items (todo-item inside #shopping-list) -------- */
#shopping-list {
  background: var(--brand-paper);
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(26, 26, 26, 0.07);
  list-style: none;
  padding: 0;
  margin: 0;
}

#shopping-list .todo-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--brand-line);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
  background: var(--brand-paper);
}
#shopping-list .todo-item:last-child { border-bottom: none; }
#shopping-list .todo-item:hover { background: var(--brand-cream); }

/* 3px cornerstone left rail on each item — cycling */
#shopping-list .todo-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  border-radius: 3px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
#shopping-list .todo-item:hover::before { opacity: 1; }
#shopping-list .todo-item:nth-child(4n+1)::before { background: var(--brand-cognac); }
#shopping-list .todo-item:nth-child(4n+2)::before { background: var(--brand-emerald); }
#shopping-list .todo-item:nth-child(4n+3)::before { background: var(--brand-navy); }
#shopping-list .todo-item:nth-child(4n+4)::before { background: var(--brand-burgundy); }

/* Purchased items — pushed to bottom visually */
#shopping-list .todo-item.done {
  background: #f3ede4;
  opacity: 0.62;
}
#shopping-list .todo-item.done:hover { background: #ede5da; opacity: 0.82; }

/* -------- Custom checkbox -------- */
#shopping-list .todo-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--brand-line);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  color: var(--brand-cream);
  font-size: 13px;
}
#shopping-list .todo-item.done .todo-checkbox {
  background: var(--brand-cognac);
  border-color: var(--brand-cognac);
}
#shopping-list .todo-item:nth-child(4n+1).done .todo-checkbox { background: var(--brand-cognac); border-color: var(--brand-cognac); }
#shopping-list .todo-item:nth-child(4n+2).done .todo-checkbox { background: var(--brand-emerald); border-color: var(--brand-emerald); }
#shopping-list .todo-item:nth-child(4n+3).done .todo-checkbox { background: var(--brand-navy); border-color: var(--brand-navy); }
#shopping-list .todo-item:nth-child(4n+4).done .todo-checkbox { background: var(--brand-burgundy); border-color: var(--brand-burgundy); }

/* -------- Item name & details -------- */
#shopping-list .shop-item-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}
#shopping-list .todo-item.done .shop-item-name {
  text-decoration: line-through;
  color: var(--brand-mute);
}

#shopping-list .shop-item-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 5px;
}

/* -------- Category badges — cornerstone palette -------- */
.shop-cat-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Override legacy color patches with cornerstone palette */
.shop-cat-badge.Groceries,
.shop-cat-badge.Baby,
.shop-cat-badge.Baby-Infant,
.shop-cat-badge.School,
.shop-cat-badge.Sports { background: rgba(35, 74, 55, 0.12); color: var(--brand-emerald); border: 1px solid rgba(35, 74, 55, 0.25); }

.shop-cat-badge.Household,
.shop-cat-badge.Electronics { background: rgba(29, 46, 74, 0.12); color: var(--brand-navy); border: 1px solid rgba(29, 46, 74, 0.22); }

.shop-cat-badge.Personal-Care,
.shop-cat-badge.Clothing,
.shop-cat-badge.Pet,
.shop-cat-badge.Gifts { background: rgba(195, 106, 45, 0.12); color: #a05828; border: 1px solid rgba(195, 106, 45, 0.22); }

.shop-cat-badge.Pharmacy { background: rgba(90, 30, 35, 0.12); color: var(--brand-burgundy); border: 1px solid rgba(90, 30, 35, 0.22); }

.shop-cat-badge.Other { background: rgba(138, 132, 122, 0.12); color: var(--brand-mute); border: 1px solid rgba(138, 132, 122, 0.22); }

/* -------- Price tag -------- */
.shop-price-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: rgba(195, 106, 45, 0.1);
  border: 1px solid rgba(195, 106, 45, 0.2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #a05828;
  font-family: var(--font-body);
}

/* -------- Shopping empty state -------- */
#shopping-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--brand-cognac);
  opacity: 0.75;
  text-align: center;
}
#shopping-list .empty-state .empty-state-icon {
  font-size: 44px;
  opacity: 0.6;
  display: block;
  font-style: normal;
}

/* ============================================================
   SHOPPING SECTION — HERO WRAPPER
   We re-skin the section-header and combined-filters into a
   dark navy hero by wrapping them with backdrop styling
   ============================================================ */

#section-shopping.active {
  display: flex;
  flex-direction: column;
}

/* Create the dark hero effect over the existing header area */
#section-shopping > .section-header,
#section-shopping > .combined-filters,
#section-shopping > #shop-cat-filters {
  background: linear-gradient(135deg, #141f33 0%, var(--brand-navy) 55%, #3a1518 100%);
  position: relative;
  z-index: 1;
}

/* Hero: section-header becomes the dark top slab */
#section-shopping > .section-header {
  display: flex !important; /* override the hide from above — restore */
  border-radius: 22px 22px 0 0;
  padding: 34px 32px 20px;
  margin-bottom: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

#section-shopping > .section-header::before {
  content: 'FAMILY PANTRY';
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brand-cognac);
  margin-bottom: 6px;
}

/* Cognac left rail on section-header */
#section-shopping > .section-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-cognac) 0%, rgba(195, 106, 45, 0.3) 100%);
  border-radius: 4px 0 0 0;
}

/* Sheen overlay on section-header */
#section-shopping > .section-header > * { position: relative; z-index: 1; }
#section-shopping > .section-header {
  isolation: isolate;
}
#section-shopping > .section-header:before {
  position: absolute;
  top: 18px;
  left: 32px;
  z-index: 1;
}

/* Recolor the title to cream Fraunces */
#section-shopping > .section-header .section-title {
  font-family: var(--font-display) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  color: var(--brand-cream) !important;
  letter-spacing: -0.025em !important;
  margin-top: 20px; /* push below the eyebrow */
}

/* "Add Item" button in hero — cognac filled pill */
#section-shopping > .section-header .btn-primary {
  background: var(--brand-cognac) !important;
  color: var(--brand-cream) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(195, 106, 45, 0.4) !important;
  margin-top: 14px;
  align-self: flex-start;
  transition: background 0.18s, transform 0.18s !important;
}
#section-shopping > .section-header .btn-primary:hover {
  background: #a85a24 !important;
  transform: translateY(-1px) !important;
}

/* Person filter bar — sits in the dark hero area */
#section-shopping > .combined-filters {
  padding: 0 32px 16px;
  margin-bottom: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  border-radius: 0;
}

/* Category sub-filters */
#section-shopping > #shop-cat-filters {
  padding: 0 32px 20px;
  border-radius: 0 0 18px 18px;
  margin-bottom: 14px !important;
}

/* Cat toggle button */
#shop-cat-toggle {
  background: rgba(246, 241, 232, 0.1) !important;
  border: 1px solid rgba(246, 241, 232, 0.22) !important;
  color: rgba(246, 241, 232, 0.75) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
#shop-cat-toggle:hover {
  background: rgba(246, 241, 232, 0.2) !important;
  color: var(--brand-cream) !important;
}

/* ============================================================
   ██████████ PLANS SUB-SECTIONS HERO ██████████
   Shared hero structure for activities / ideas / datenights / vacations
   The .plans-header inside each section becomes the hero
   ============================================================ */

.plans-sub .plans-header {
  border-radius: 22px !important;
  padding: 36px 32px 28px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-shadow: 0 12px 36px rgba(15, 22, 38, 0.22) !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
}

/* Cognac left rail */
.plans-sub .plans-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--brand-cognac) 0%, rgba(195, 106, 45, 0.35) 100%) !important;
  border-radius: 4px 0 0 4px !important;
  z-index: 2 !important;
}

/* Top-right sheen */
.plans-sub .plans-header::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(480px 200px at 110% -20%, rgba(246, 241, 232, 0.09), transparent 60%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.plans-sub .plans-header > * { position: relative; z-index: 2; }

/* Section title inside hero */
.plans-sub .plans-header .section-title {
  font-family: var(--font-display) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  color: var(--brand-cream) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

/* Plans tabs override — cream glass pills in hero */
.plans-sub .plans-header .plans-tabs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.plans-sub .plans-header .plans-tabs::-webkit-scrollbar { display: none !important; }

.plans-sub .plans-header .plans-tab {
  flex: 0 0 auto !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(246, 241, 232, 0.25) !important;
  background: transparent !important;
  color: rgba(246, 241, 232, 0.65) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
.plans-sub .plans-header .plans-tab:hover {
  background: rgba(246, 241, 232, 0.12) !important;
  color: var(--brand-cream) !important;
  border-color: rgba(246, 241, 232, 0.4) !important;
}
.plans-sub .plans-header .plans-tab.active {
  background: var(--brand-cream) !important;
  color: var(--brand-ink) !important;
  border-color: var(--brand-cream) !important;
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.15) !important;
}

/* Section-header row inside plans-sub (the h2 + add button row) */
.plans-sub .section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
}

.plans-sub .section-header h2 {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--brand-cream) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.plans-sub .section-header .btn-primary {
  background: var(--brand-cognac) !important;
  color: var(--brand-cream) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(195, 106, 45, 0.3) !important;
  transition: background 0.18s, transform 0.18s !important;
}
.plans-sub .section-header .btn-primary:hover {
  background: #a85a24 !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   ██████████ ACTIVITIES SECTION ██████████
   ============================================================ */

#section-activities .plans-header {
  background: linear-gradient(135deg, #7a3c10 0%, var(--brand-cognac) 45%, #1d2e4a 100%) !important;
}

/* Hero eyebrow text injected via pseudo — "FAMILY ADVENTURES" */
#section-activities .plans-header .section-title::before {
  content: 'FAMILY ADVENTURES';
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(246, 241, 232, 0.65);
  margin-bottom: 8px;
}

/* Activity card-list: use the bold cornerstone cards */
#activity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Override .card-item inside activity-list */
#activity-list .card-item {
  border-radius: 20px !important;
  padding: 24px 22px 20px !important;
  border: 1px solid rgba(246, 241, 232, 0.08) !important;
  box-shadow: 0 12px 32px rgba(15, 22, 38, 0.22) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#activity-list .card-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 48px rgba(15, 22, 38, 0.32) !important;
}

/* Cornerstone cycling fills */
#activity-list .card-item:nth-child(4n+1) { background: linear-gradient(160deg, #d4762e 0%, var(--brand-cognac) 50%, #8a4a1f 100%) !important; }
#activity-list .card-item:nth-child(4n+2) { background: linear-gradient(160deg, #2e5a44 0%, var(--brand-emerald) 55%, #152e22 100%) !important; }
#activity-list .card-item:nth-child(4n+3) { background: linear-gradient(160deg, #2a4268 0%, var(--brand-navy) 55%, #0f1626 100%) !important; }
#activity-list .card-item:nth-child(4n+4) { background: linear-gradient(160deg, #7a2a30 0%, var(--brand-burgundy) 55%, #36131a 100%) !important; }

/* Remove old left-rail pseudo on hover — card is full gradient now */
#activity-list .card-item::before {
  display: none !important;
}

/* Card sheen */
#activity-list .card-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(320px 120px at 100% -10%, rgba(246, 241, 232, 0.12), transparent 55%) !important;
  pointer-events: none !important;
}

/* Title in cream Fraunces */
#activity-list .card-item-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--brand-cream) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

/* Meta in cream */
#activity-list .card-item-meta {
  color: rgba(246, 241, 232, 0.72) !important;
  font-size: 12px !important;
  gap: 8px !important;
}
#activity-list .card-item-meta span {
  color: rgba(246, 241, 232, 0.72) !important;
}

/* Date chip — cream glass */
#activity-list .card-item-meta span:first-child {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(246, 241, 232, 0.14);
  border: 1px solid rgba(246, 241, 232, 0.22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-cream) !important;
  backdrop-filter: blur(4px);
}

/* Action buttons on dark cards */
#activity-list .card-item-actions { align-items: flex-start; }
#activity-list .btn-icon {
  background: rgba(246, 241, 232, 0.12) !important;
  border: 1px solid rgba(246, 241, 232, 0.2) !important;
  color: rgba(246, 241, 232, 0.8) !important;
  border-radius: 10px !important;
}
#activity-list .btn-icon:hover {
  background: rgba(246, 241, 232, 0.26) !important;
  color: var(--brand-cream) !important;
}

/* Activities empty state */
#activity-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--brand-cognac);
  opacity: 0.8;
  text-align: center;
  grid-column: 1 / -1;
}
#activity-list .empty-state .empty-state-icon { font-size: 44px; opacity: 0.6; display: block; }

/* ============================================================
   ██████████ IDEAS SECTION ██████████
   ============================================================ */

#section-ideas .plans-header {
  background: linear-gradient(135deg, #132a1e 0%, var(--brand-emerald) 50%, #2a4268 100%) !important;
}

#section-ideas .plans-header .section-title::before {
  content: 'WISHLIST & INSPIRATION';
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(246, 241, 232, 0.65);
  margin-bottom: 8px;
}

/* Category filter pills in ideas — emerald active state */
#section-ideas .combined-filters .idea-filter {
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--brand-line) !important;
  background: transparent !important;
  color: var(--brand-mute) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
#section-ideas .combined-filters .idea-filter:hover {
  border-color: var(--brand-emerald) !important;
  color: var(--brand-emerald) !important;
}
#section-ideas .combined-filters .idea-filter.active {
  background: var(--brand-emerald) !important;
  color: var(--brand-cream) !important;
  border-color: var(--brand-emerald) !important;
  box-shadow: 0 4px 12px rgba(35, 74, 55, 0.3) !important;
}

/* Ideas card grid */
#ideas-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

#ideas-list .card-item {
  border-radius: 20px !important;
  padding: 24px 22px 20px !important;
  border: 1px solid rgba(246, 241, 232, 0.08) !important;
  box-shadow: 0 12px 32px rgba(15, 22, 38, 0.22) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#ideas-list .card-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 48px rgba(15, 22, 38, 0.32) !important;
}
#ideas-list .card-item:nth-child(4n+1) { background: linear-gradient(160deg, #d4762e 0%, var(--brand-cognac) 50%, #8a4a1f 100%) !important; }
#ideas-list .card-item:nth-child(4n+2) { background: linear-gradient(160deg, #2e5a44 0%, var(--brand-emerald) 55%, #152e22 100%) !important; }
#ideas-list .card-item:nth-child(4n+3) { background: linear-gradient(160deg, #2a4268 0%, var(--brand-navy) 55%, #0f1626 100%) !important; }
#ideas-list .card-item:nth-child(4n+4) { background: linear-gradient(160deg, #7a2a30 0%, var(--brand-burgundy) 55%, #36131a 100%) !important; }
#ideas-list .card-item::before { display: none !important; }
#ideas-list .card-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(320px 120px at 100% -10%, rgba(246, 241, 232, 0.12), transparent 55%) !important;
  pointer-events: none !important;
}

#ideas-list .card-item-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--brand-cream) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

#ideas-list .card-item-meta {
  color: rgba(246, 241, 232, 0.72) !important;
  font-size: 12px !important;
}
#ideas-list .card-item-meta span { color: rgba(246, 241, 232, 0.72) !important; }

/* Idea category badge — cream glass pill on card */
.idea-cat-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 11px !important;
  background: rgba(246, 241, 232, 0.16) !important;
  border: 1px solid rgba(246, 241, 232, 0.28) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.13em !important;
  color: var(--brand-cream) !important;
  backdrop-filter: blur(4px) !important;
}

.idea-by {
  font-size: 11px !important;
  color: rgba(246, 241, 232, 0.6) !important;
  font-style: italic;
}

#ideas-list .btn-icon {
  background: rgba(246, 241, 232, 0.12) !important;
  border: 1px solid rgba(246, 241, 232, 0.2) !important;
  color: rgba(246, 241, 232, 0.8) !important;
  border-radius: 10px !important;
}
#ideas-list .btn-icon:hover {
  background: rgba(246, 241, 232, 0.26) !important;
  color: var(--brand-cream) !important;
}

/* Reorder buttons on dark cards */
#ideas-list .reorder-btn,
#shopping-list .reorder-btn {
  background: rgba(246, 241, 232, 0.08) !important;
  border: 1px solid rgba(246, 241, 232, 0.14) !important;
  color: rgba(246, 241, 232, 0.55) !important;
  border-radius: 8px !important;
}
#ideas-list .reorder-btn:hover {
  background: rgba(246, 241, 232, 0.2) !important;
  color: var(--brand-cream) !important;
}

/* Ideas empty state */
#ideas-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--brand-cognac);
  opacity: 0.8;
  text-align: center;
  grid-column: 1 / -1;
}
#ideas-list .empty-state .empty-state-icon { font-size: 44px; opacity: 0.6; display: block; }

/* ============================================================
   ██████████ DATE NIGHTS SECTION ██████████
   ============================================================ */

#section-datenights .plans-header {
  background: linear-gradient(135deg, #36131a 0%, var(--brand-burgundy) 50%, #1d2e4a 100%) !important;
}

#section-datenights .plans-header .section-title::before {
  content: 'ABS & ANNE';
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(246, 241, 232, 0.65);
  margin-bottom: 8px;
}

/* Date night summary cards row */
.datenight-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.datenight-summary .dash-card {
  background: var(--brand-paper);
  border-radius: 18px;
  padding: 20px 16px;
  border: 1px solid var(--brand-line);
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.06);
  text-align: center;
}

.datenight-summary .dash-card h3 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-mute);
  margin: 0 0 10px;
}

.datenight-summary .dash-card .big-number {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.025em;
  line-height: 1;
}

/* Date night sub-tabs (Upcoming / Past / Ideas) */
.datenight-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.datenight-tab {
  border-radius: 999px !important;
  padding: 7px 18px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--brand-line) !important;
  background: transparent !important;
  color: var(--brand-mute) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.datenight-tab:hover {
  border-color: var(--brand-burgundy) !important;
  color: var(--brand-burgundy) !important;
}
.datenight-tab.active {
  background: var(--brand-burgundy) !important;
  color: var(--brand-cream) !important;
  border-color: var(--brand-burgundy) !important;
  box-shadow: 0 4px 12px rgba(90, 30, 35, 0.3) !important;
}

/* Date night card list — use cornerstone fills but bias toward warm colors */
#datenight-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

#datenight-list .card-item,
#datenight-list .dn-card {
  border-radius: 20px !important;
  padding: 24px 22px 20px !important;
  border: 1px solid rgba(246, 241, 232, 0.08) !important;
  box-shadow: 0 12px 32px rgba(15, 22, 38, 0.22) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#datenight-list .card-item:hover { transform: translateY(-3px) !important; box-shadow: 0 22px 48px rgba(15, 22, 38, 0.32) !important; }

/* Date nights: warm bias — burgundy/cognac/navy/burgundy */
#datenight-list .card-item:nth-child(4n+1) { background: linear-gradient(160deg, #7a2a30 0%, var(--brand-burgundy) 55%, #36131a 100%) !important; }
#datenight-list .card-item:nth-child(4n+2) { background: linear-gradient(160deg, #d4762e 0%, var(--brand-cognac) 50%, #8a4a1f 100%) !important; }
#datenight-list .card-item:nth-child(4n+3) { background: linear-gradient(160deg, #7a2a30 0%, #8a3040 55%, #1d2e4a 100%) !important; }
#datenight-list .card-item:nth-child(4n+4) { background: linear-gradient(160deg, #2a4268 0%, var(--brand-navy) 55%, #36131a 100%) !important; }

#datenight-list .card-item::before { display: none !important; }
#datenight-list .card-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(320px 120px at 100% -10%, rgba(246, 241, 232, 0.12), transparent 55%) !important;
  pointer-events: none !important;
}

#datenight-list .card-item-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--brand-cream) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

#datenight-list .card-item-meta {
  color: rgba(246, 241, 232, 0.72) !important;
  font-size: 12px !important;
}
#datenight-list .card-item-meta span { color: rgba(246, 241, 232, 0.72) !important; }

/* Status badges */
.dn-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  backdrop-filter: blur(4px);
}
.dn-badge.done {
  background: rgba(246, 241, 232, 0.16);
  border: 1px solid rgba(246, 241, 232, 0.3);
  color: var(--brand-cream);
}
.dn-badge.planned {
  background: rgba(195, 106, 45, 0.25);
  border: 1px solid rgba(195, 106, 45, 0.45);
  color: #ffd4a0;
}
.dn-badge.idea {
  background: rgba(246, 241, 232, 0.10);
  border: 1px solid rgba(246, 241, 232, 0.2);
  color: rgba(246, 241, 232, 0.65);
}

/* Star ratings */
.stars {
  font-size: 13px !important;
  letter-spacing: 1px;
  color: rgba(246, 241, 232, 0.85) !important;
}

#datenight-list .btn-icon {
  background: rgba(246, 241, 232, 0.12) !important;
  border: 1px solid rgba(246, 241, 232, 0.2) !important;
  color: rgba(246, 241, 232, 0.8) !important;
  border-radius: 10px !important;
}
#datenight-list .btn-icon:hover {
  background: rgba(246, 241, 232, 0.26) !important;
  color: var(--brand-cream) !important;
}

/* Date night empty state */
#datenight-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--brand-cognac);
  opacity: 0.8;
  text-align: center;
  grid-column: 1 / -1;
}
#datenight-list .empty-state .empty-state-icon { font-size: 44px; opacity: 0.6; display: block; }

/* ============================================================
   ██████████ VACATIONS SECTION ██████████
   ============================================================ */

#section-vacations .plans-header {
  background: linear-gradient(135deg, #0f1626 0%, #1d2e4a 45%, #234a37 100%) !important;
}

#section-vacations .plans-header .section-title::before {
  content: 'ADVENTURES AHEAD';
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(246, 241, 232, 0.65);
  margin-bottom: 8px;
}

/* Vacations card list */
#vacation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

#vacation-list .card-item {
  border-radius: 20px !important;
  padding: 24px 22px 20px !important;
  border: 1px solid rgba(246, 241, 232, 0.08) !important;
  box-shadow: 0 12px 32px rgba(15, 22, 38, 0.22) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#vacation-list .card-item:hover { transform: translateY(-3px) !important; box-shadow: 0 22px 48px rgba(15, 22, 38, 0.32) !important; }

/* Vacation cards: navy/emerald/navy/cognac — travel palette */
#vacation-list .card-item:nth-child(4n+1) { background: linear-gradient(160deg, #2a4268 0%, var(--brand-navy) 55%, #0f1626 100%) !important; }
#vacation-list .card-item:nth-child(4n+2) { background: linear-gradient(160deg, #2e5a44 0%, var(--brand-emerald) 55%, #152e22 100%) !important; }
#vacation-list .card-item:nth-child(4n+3) { background: linear-gradient(160deg, #0f1626 0%, #1d2e4a 50%, #234a37 100%) !important; }
#vacation-list .card-item:nth-child(4n+4) { background: linear-gradient(160deg, #d4762e 0%, var(--brand-cognac) 50%, #8a4a1f 100%) !important; }

#vacation-list .card-item::before { display: none !important; }
#vacation-list .card-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(320px 120px at 100% -10%, rgba(246, 241, 232, 0.12), transparent 55%) !important;
  pointer-events: none !important;
}

/* Destination name — large Fraunces */
#vacation-list .card-item-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--brand-cream) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  margin-bottom: 10px !important;
}

#vacation-list .card-item-meta {
  color: rgba(246, 241, 232, 0.72) !important;
  font-size: 12px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#vacation-list .card-item-meta span { color: rgba(246, 241, 232, 0.72) !important; }

/* Date range chip */
#vacation-list .card-item-meta span:first-child {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(246, 241, 232, 0.14);
  border: 1px solid rgba(246, 241, 232, 0.22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-cream) !important;
  backdrop-filter: blur(4px);
}

/* Days-away count */
#vacation-list .card-item-meta strong {
  color: #ffd4a0 !important;
}

#vacation-list .btn-icon {
  background: rgba(246, 241, 232, 0.12) !important;
  border: 1px solid rgba(246, 241, 232, 0.2) !important;
  color: rgba(246, 241, 232, 0.8) !important;
  border-radius: 10px !important;
}
#vacation-list .btn-icon:hover {
  background: rgba(246, 241, 232, 0.26) !important;
  color: var(--brand-cream) !important;
}

/* Vacation empty state */
#vacation-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--brand-cognac);
  opacity: 0.8;
  text-align: center;
  grid-column: 1 / -1;
}
#vacation-list .empty-state .empty-state-icon { font-size: 44px; opacity: 0.6; display: block; }

/* ============================================================
   RECURRING BADGE
   ============================================================ */
.recurring-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(246, 241, 232, 0.16);
  border: 1px solid rgba(246, 241, 232, 0.28);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-cream);
  vertical-align: middle;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .sp-hero { padding: 24px 20px 20px; border-radius: 16px; }
  .sp-hero-title { font-size: 28px; }

  .plans-sub .plans-header { padding: 24px 20px 22px !important; border-radius: 16px !important; gap: 12px !important; }
  .plans-sub .plans-header .section-title { font-size: 28px !important; }
  .plans-sub .plans-header .plans-tab { padding: 7px 13px !important; font-size: 10px !important; }

  #section-shopping > .section-header { padding: 24px 20px 14px; border-radius: 16px 16px 0 0; }
  #section-shopping > .section-header .section-title { font-size: 28px !important; }
  #section-shopping > .combined-filters { padding: 0 20px 14px; }
  #section-shopping > #shop-cat-filters { padding: 0 20px 16px; }

  .datenight-summary { grid-template-columns: 1fr; gap: 10px; }

  #activity-list,
  #ideas-list,
  #datenight-list,
  #vacation-list {
    grid-template-columns: 1fr;
  }

  .sp-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .sp-hero { padding: 20px 16px 16px; }
  .sp-hero-title { font-size: 24px; }
  .sp-hero-badge { top: 14px; right: 16px; }

  .plans-sub .plans-header { padding: 20px 16px 18px !important; border-radius: 14px !important; }
  .plans-sub .plans-header .section-title { font-size: 24px !important; }

  #section-shopping > .section-header { padding: 20px 16px 12px; }
  #section-shopping > .section-header .section-title { font-size: 24px !important; }
  #section-shopping > .combined-filters { padding: 0 16px 12px; }
  #section-shopping > #shop-cat-filters { padding: 0 16px 14px; }

  #activity-list .card-item,
  #ideas-list .card-item,
  #datenight-list .card-item,
  #vacation-list .card-item {
    padding: 18px 16px 16px !important;
    border-radius: 16px !important;
  }

  #activity-list .card-item-title,
  #ideas-list .card-item-title,
  #datenight-list .card-item-title { font-size: 17px !important; }

  #vacation-list .card-item-title { font-size: 19px !important; }

  .datenight-tabs { gap: 5px; }
  .datenight-tab { padding: 6px 12px !important; font-size: 10px !important; }

  .shopping-actions-bar { padding: 10px 14px !important; font-size: 11px !important; }

  #shopping-list .todo-item { padding: 13px 14px; gap: 10px; }
  #shopping-list .shop-item-name { font-size: 13px; }
}

/* ============================================================
   PRINT / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sp-card,
  .sp-card:hover,
  #activity-list .card-item:hover,
  #ideas-list .card-item:hover,
  #datenight-list .card-item:hover,
  #vacation-list .card-item:hover,
  #shopping-list .todo-item {
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   LINK THIS FILE IN index.html:
   <link rel="stylesheet" href="style-shopping-plans.css">
   (add after the main style.css link)
   ============================================================ */


/* ===== DESIGN-V3: row-pattern overrides for shopping ===== */
#shopping-list {
  background: #ffffff !important;
  border: 1px solid rgba(20,25,40,0.07) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 0 !important;
  list-style: none !important;
}
#shopping-list .todo-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(20,25,40,0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#shopping-list .todo-item:last-child { border-bottom: none !important; }
#shopping-list .todo-item::before { display: none !important; }
#shopping-list .todo-item:hover { background: rgba(195,106,45,0.04) !important; }
#shopping-list .todo-item.done { background: transparent !important; opacity: 0.7; }
#shopping-list .todo-item.done .row-title,
#shopping-list .todo-item.done .shop-item-name { text-decoration: line-through; color: #7c7a78; }
#shopping-list .todo-checkbox.row-checkbox {
  background: #ffffff !important;
  border: 1.5px solid rgba(20,25,40,0.12) !important;
}
#shopping-list .todo-item.done .todo-checkbox.row-checkbox {
  background: #2e7d57 !important;
  border-color: #2e7d57 !important;
  color: #fff !important;
}
/* ===== /DESIGN-V3 ===== */