:root {
  --bg-0: #0a0a14;
  --bg-1: #11111f;
  --bg-2: #181830;
  --bg-3: #1f1f3d;
  --text: #f3f3ff;
  --text-dim: #9b9bbf;
  --accent: #ff4d6d;
  --accent-2: #ffb347;
  --accent-3: #4dc3ff;
  --border: #2a2a4a;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --app-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--app-font);
  color: var(--text);
  background-color: var(--bg-0);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Fireworks photo as a fixed, dimmed background layer behind everything.
   The image is scaled larger than the viewport and anchored to the bottom
   so the empty dark sky at the top of the photo is cropped away and the
   bursts sit much higher on screen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(8, 8, 18, 0.55), rgba(8, 8, 18, 0.75)),
    url("assets/fireworks-bg.jpg");
  background-size: 100% 100%, auto 170vh;
  background-position: center, center calc(100% + 200px);
  background-repeat: no-repeat, no-repeat;
  z-index: -1;
}

.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

/* ---------------- Sidebar ---------------- */
.sidebar {
  background: linear-gradient(180deg, rgba(24, 24, 48, 0.88) 0%, rgba(17, 17, 31, 0.92) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.sidebar-header {
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand-logo-link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 77, 109, 0.25);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.brand-logo-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 77, 109, 0.45);
}

.brand-logo-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-3) 100%);
  box-shadow: 0 4px 14px rgba(255, 77, 109, 0.35);
  margin-bottom: 4px;
}

.sidebar-header h1 {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.3px;
  line-height: 1.15;
}

.sidebar-header .subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.category-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, transform 120ms;
}

.category-link:hover {
  background: var(--bg-3);
  border-color: var(--border);
}

.category-link.active {
  background: linear-gradient(135deg, rgba(191, 10, 48, 0.22), rgba(0, 40, 104, 0.28));
  border-color: var(--accent);
  color: #fff;
}

.category-link .count {
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-dim);
}

.category-link.active .count {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.home-link {
  margin-bottom: 8px;
  background: rgba(31, 31, 61, 0.55);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.home-link.active {
  background: linear-gradient(135deg, rgba(191, 10, 48, 0.22), rgba(0, 40, 104, 0.28));
  border-color: var(--accent-2);
}

.home-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 16px;
  vertical-align: -1px;
  color: var(--accent-2);
}

/* Floating cart button (top-right of the viewport). */
.cart-fab {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(15, 15, 28, 0.85);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: transform 120ms, border-color 120ms, box-shadow 120ms, background 120ms;
}

.cart-fab:hover {
  transform: translateY(-1px);
  border-color: var(--accent-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.cart-fab.has-items {
  border-color: var(--accent-2);
}

.cart-fab.active {
  border-color: var(--accent);
  background: rgba(31, 31, 61, 0.92);
}

.cart-fab-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--accent);
}

.cart-fab-label {
  font-weight: 700;
}

.cart-fab-badge {
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, #BF0A30 0%, #002868 100%);
  color: #fff;
  border-radius: 999px;
  padding: 3px 9px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cart-fab { top: 10px; right: 12px; padding: 8px 12px; }
  .cart-fab-label { display: none; }
}

/* "Browse" floating menu — mobile only. Works just like the cart FAB:
   position:fixed, always visible at the top-left of the viewport. Tap
   the pill to open a panel listing every category (plus Home and Cart)
   as tappable rows. Hidden on desktop where the full sidebar is shown. */
.cat-menu {
  display: none;
}

@media (max-width: 800px) {
  .cat-menu {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1000;
    display: block;
  }
}

@media (max-width: 600px) {
  .cat-menu { top: 10px; left: 12px; }
}

.cat-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(15, 15, 28, 0.85);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  max-width: 60vw;
  transition: transform 120ms, border-color 120ms, box-shadow 120ms;
}

.cat-menu-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--accent-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.cat-menu-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: rgba(31, 31, 61, 0.92);
}

.cat-menu-icon {
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  flex: none;
}

.cat-menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
  max-width: 38vw;
}

.cat-menu-chevron {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 160ms;
  flex: none;
}

.cat-menu-toggle[aria-expanded="true"] .cat-menu-chevron {
  transform: rotate(180deg);
}

.cat-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-width: 80vw;
  max-height: 65vh;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15, 15, 28, 0.97);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cat-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 8px;
  cursor: pointer;
  text-transform: capitalize;
}

.cat-menu-item:hover,
.cat-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.cat-menu-item.active {
  background: rgba(255, 179, 71, 0.18);
  color: var(--accent);
}

/* Members Area link in the sidebar. */
.members-link {
  margin-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 14px !important;
  background: rgba(31, 31, 61, 0.4);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.members-link.active {
  background: linear-gradient(135deg, rgba(0, 40, 104, 0.28), rgba(191, 10, 48, 0.22));
  border-color: var(--accent-3);
}

.members-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 14px;
  vertical-align: -1px;
  color: var(--accent-3);
}

/* Modal overlay used for the Members Area password prompt. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 14, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: modalFadeIn 140ms ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, rgba(28, 28, 56, 0.96), rgba(17, 17, 33, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  color: var(--text);
  animation: modalPop 160ms ease-out;
}

@keyframes modalPop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

.modal-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modal-card .modal-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-dim);
}

.modal-card input[type="password"] {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  outline: none;
  letter-spacing: 4px;
}

.modal-card input[type="password"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.18);
}

.modal-error {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  color: #ff8da0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.modal-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 140ms ease, background 140ms ease;
}

.modal-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
}

.modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.modal-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #BF0A30 0%, #BF0A30 30%, #FFFFFF 50%, #002868 70%, #002868 100%);
  box-shadow: 0 6px 18px rgba(0, 40, 104, 0.40);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.modal-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 40, 104, 0.50);
}

.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand-tag {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.85;
  letter-spacing: 0.2px;
}

/* ---------------- Content ---------------- */
.content {
  padding: 32px 40px 80px;
  max-width: 100%;
}

.brand-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 77, 109, 0.14), rgba(77, 195, 255, 0.12));
  border: 1px solid var(--border);
}

.brand-banner-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-banner-tag {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex: 1;
}

.content-header {
  margin-bottom: 24px;
}

.content-header h2 {
  font-size: 32px;
  font-weight: 800;
  text-transform: capitalize;
}

.content-meta {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 14px;
}

.empty-state {
  padding: 60px;
  text-align: center;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

/* ---------------- Firework cards ---------------- */
.firework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* Home page: 2-up logo grid on wide screens, stacking on narrow ones. */
.firework-grid.home-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
}

/* Hide the top "Frankies Fireworks · Inventory & lineup" banner on the
   home and cart views (it returns on any category / promo page). */
body.view-home .brand-banner,
body.view-cart .brand-banner {
  display: none;
}

/* Home page welcome layout — stack of intro / about-us cards. */
.firework-grid.home-welcome {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: stretch;
}

.welcome-card {
  max-width: 760px;
  width: 100%;
  margin: 0;
  padding: 32px 36px 28px;
  text-align: left;
  border-radius: 18px;
  background: rgba(15, 15, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 77, 109, 0.06) inset;
}

.welcome-tag {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-3) 100%);
  box-shadow: 0 4px 14px rgba(255, 77, 109, 0.3);
}

.welcome-paragraph {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  font-weight: 500;
}

.welcome-paragraph + .welcome-paragraph {
  margin-top: 16px;
}

.welcome-paragraph:first-child {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
}

@media (max-width: 600px) {
  .welcome-card {
    padding: 24px 22px;
  }
  .welcome-paragraph {
    font-size: 16px;
  }
  .welcome-paragraph:first-child {
    font-size: 19px;
  }
}

.logo-card .logo-image {
  position: relative;
  aspect-ratio: 3 / 2;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-card .logo-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.firework-card {
  background: rgba(24, 24, 48, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 160ms, box-shadow 160ms, border-color 160ms;
}

.firework-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

.firework-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #1c1c38 0%, #0e0e22 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.firework-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* For cards that actually have a photo, paint the site's own navy
   gradient behind the image and use an SVG filter to drop pure-white
   pixels out of the photo. Photos with their own coloured backgrounds
   stay opaque and cover this gradient. Photos with white backgrounds
   let the site navy through, matching the card and sidebar. */
.firework-image.with-photo {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
}

.firework-image.with-photo img {
  filter: url(#drop-white-bg);
}

.image-missing {
  color: var(--text-dim);
  text-align: center;
  padding: 16px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.image-missing::before {
  content: "📷";
  font-size: 28px;
  opacity: 0.6;
}

.qty-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(10, 10, 25, 0.78);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.firework-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.firework-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.firework-name {
  font-size: 18px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  flex: 1;
  min-width: 0;
}

.firework-price {
  flex: none;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text);
  white-space: nowrap;
}

.firework-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
  flex: 1;
}

.firework-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text);
  transition: background 120ms, border-color 120ms, transform 120ms;
}

.btn:hover {
  background: var(--bg-1);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn-youtube {
  background: #ff0033;
  border-color: #ff0033;
  color: #fff;
}

.btn-youtube:hover {
  background: #cc0029;
  border-color: #cc0029;
}

.btn-search {
  background: transparent;
}

.btn-missing {
  background: transparent;
  color: var(--text-dim);
  cursor: default;
  font-style: italic;
}

.btn-missing:hover {
  background: transparent;
  border-color: var(--border);
  transform: none;
}

/* ---------------- Add-to-cart on product cards ---------------- */
.firework-cart {
  display: flex;
  margin-top: 2px;
}

.btn-add-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #BF0A30 0%, #BF0A30 30%, #FFFFFF 50%, #002868 70%, #002868 100%);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  box-shadow: 0 6px 16px rgba(0, 40, 104, 0.32);
  transition: transform 120ms, box-shadow 120ms;
}

.btn-add-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 40, 104, 0.42);
}

.btn-add-cart > span[aria-hidden="true"] {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.btn-add-cart.in-cart {
  background: rgba(15, 15, 28, 0.7);
  border: 1px solid var(--border);
  padding: 5px 8px;
  gap: 10px;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: default;
}

.btn-add-cart.in-cart:hover {
  transform: none;
  box-shadow: none;
}

.btn-add-cart.in-cart .cart-qty-num {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  min-width: 70px;
  text-align: center;
}

/* Shared circular qty button used by product cards and cart lines. */
.cart-qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, border-color 120ms, transform 120ms;
}

.cart-qty-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-2);
  transform: translateY(-1px);
}

/* ---------------- Cart view ---------------- */
.firework-grid.cart-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}

.cart-empty {
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: rgba(15, 15, 28, 0.55);
  color: var(--text-dim);
}

.cart-empty p {
  margin: 4px 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: rgba(24, 24, 48, 0.78);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.cart-line-thumb {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #1c3a6e 0%, #0e1f3d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: url(#whiteToTransparent);
}

.cart-line-thumb-ph {
  font-size: 28px;
}

.cart-line-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-line-name {
  font-weight: 700;
  font-size: 15px;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  word-break: break-word;
}

.cart-line-unit {
  color: var(--text-dim);
  font-size: 12.5px;
}

.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 4px;
  background: rgba(15, 15, 28, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: max-content;
}

.cart-qty .cart-qty-num {
  min-width: 24px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
}

.cart-line-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cart-line-total {
  font-weight: 900;
  font-size: 18px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cart-line-remove {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.cart-line-remove:hover {
  color: var(--accent);
  background: rgba(255, 90, 95, 0.08);
}

.cart-footer {
  margin-top: 16px;
  padding: 22px;
  background: rgba(15, 15, 28, 0.78);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
}

.cart-total-row .cart-total {
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cart-note {
  margin: 0;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.55;
}

.cart-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-venmo {
  flex: 1 1 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #BF0A30 0%, #BF0A30 30%, #FFFFFF 50%, #002868 70%, #002868 100%);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  box-shadow: 0 10px 24px rgba(0, 40, 104, 0.36);
  transition: transform 120ms, box-shadow 120ms, filter 120ms;
}

.btn-venmo:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 40, 104, 0.46);
  filter: brightness(1.05);
}

.venmo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 900;
  font-size: 14px;
  font-style: italic;
}

.btn-clear-cart {
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.btn-clear-cart:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: var(--accent);
}

@media (max-width: 600px) {
  .cart-line {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "thumb body"
      "right right";
  }
  .cart-line-thumb { grid-area: thumb; width: 64px; height: 64px; }
  .cart-line-body { grid-area: body; }
  .cart-line-right { grid-area: right; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 800px) {
  .app {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: relative;
    height: auto;
  }
  .content {
    padding: 24px 16px 60px;
  }
}