/* ===================================================================
  CSS Variables & Base Styles
  =================================================================== */
:root {
  /* Color Palette */
  --black-deep: #000216;
  --black: #010101;
  --green: #3dc81d;
  --red: #aa040b;
  --orange: #d3732b;
  --yellow: #f7ee01;
  --white: #ffffff;

  /* Brand Colors */
  --brand: var(--green);
  --brand-600: #2da015;
  --bg: var(--black-deep);
  --surface: var(--black);
  --text: var(--white);
  --muted: #999999;
  --danger: var(--red);
  --accent-orange: var(--orange);
  --accent-yellow: var(--yellow);

  /* Spacing & Effects */
  --radius: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  background: var(--black-deep);
  color: var(--white);
  line-height: 1.6;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glitch Effect */
 .glitch:hover::before{ transform:translate(1px,-1px); color:var(--accent); opacity:.35; }
  .glitch:hover::after{ transform:translate(-1px,1px); color:#66f; opacity:.25; }
  .glitch a{ color:inherit; text-decoration:none }
  .glitch a:hover{ text-decoration:underline; text-underline-offset:3px }



  .highlight {
   color:#ffd400; !important;
    padding: 2px 4px;
    border-radius: 4px;
  }

  .bold {
    font-weight: 700;  }

/* ===================================================================
  Navigation
  =================================================================== */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 0.4rem 1rem;
  min-height: 40px;
  width: 100%;
  background: linear-gradient(90deg, var(--black-deep), var(--black));
  border-bottom: 1.5px solid var(--green);
  box-shadow: 0 2px 12px rgba(61, 200, 29, 0.2);
  flex-wrap: wrap;
  /* Ensure nav always layers above the featured section and content below */
  position: relative;
  z-index: 12000;
}

.top-nav a {
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  transition: opacity 0.2s;
}

.top-nav a:hover {
  opacity: 0.9;
}

/* Social icons in nav */
.nav-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Compact container used in the header: keep the 4 icons grouped and
   evenly spaced without stretching the whole nav. The width below
   accommodates four 28px icons plus gaps (adjust if you change icon size). */
.social-icons-compact {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 140px; /* 4 * 28px + 3 * 8px gap ≈ 140px */
}

.nav-social-desktop { display: flex; }
.nav-social-mobile { display: none; width: 100%; }

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--white);
  background: transparent; /* remove background as requested */
  border: none; /* remove border for a cleaner look */
  text-decoration: none;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.social-btn:hover,
.social-btn:focus {
  background: transparent; /* keep transparent on hover */
  border-color: transparent;
  color: var(--white); /* slight lift via transform only */
  transform: translateY(-1px);
}

.nav-checkout {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
  border: 1px solid var(--yellow);
  color: var(--black);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-checkout:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.nav-cart-count {
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 999px;
  display: inline-block;
}

/* Checkout wrapper for positioning the price popup */
.nav-checkout-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Floating price popup (mobile only) */
.nav-price-popup {
  position: absolute;
  /* position the popup just above the button; reduce gap to avoid clipping page top */
  bottom: calc(100% + 2px);
  left: 50%;
  /* Allow JS to nudge the popup down if it would overflow the viewport top */
  transform: translateX(-50%) translateY(var(--nav-popup-shift, 0px));
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--green);
  border-radius: 8px;
  /* extra right padding to avoid overlap with the "X" button */
  padding: 6px 34px 6px 10px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--white);
  white-space: nowrap;
  pointer-events: auto; /* allow clicks on the clear button */
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(61, 200, 29, 0.25);
}

/* Show popup when cart has items (JS will add .has-items) */
.nav-checkout-wrap.has-items .nav-price-popup {
  opacity: 1;
}

/* Ensure popup is visible and positioned correctly on tablet/mid-size (1200-1440px) */
@media (min-width: 1200px) and (max-width: 1439px) {
  .nav-price-popup {
    display: block !important;
    position: absolute !important;
    bottom: calc(100% + 6px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(var(--nav-popup-shift, 0px)) !important;
  }
  .nav-checkout-wrap {
    position: relative !important;
  }
}

/* On mid/large widths 1249–1449px, place Checkout immediately after "Music" */
@media (min-width: 1249px) and (max-width: 1449px) {
  /* Allow wrapping to avoid any accidental horizontal overflow/scrollbars */
  .top-nav { flex-wrap: wrap; overflow-x: hidden; }
  /* Keep the left banner/social cluster first */
  .top-nav > .banner-wrapper { order: 0; }
  /* Store link */
  .top-nav > a[href="index.html"] { order: 1; }
  /* Music link */
  .top-nav > a[href*="bandcamp.com"] { order: 2; }
  /* Move Checkout right after Music */
  .top-nav > .nav-checkout-wrap { order: 3; }
  /* Followed by About, then Tip */
  .top-nav > a[href*="epk.gonpulvo.com"] { order: 4; }
  .top-nav > .nav-tip-wrap { order: 5; }
}

/* Hide popup on desktop - it's not needed since cart is always visible */
@media (min-width: 1440px) {
  .nav-price-popup {
    display: none !important;
  }
  .nav-checkout-wrap {
    pointer-events: auto !important;
  }
}

/* Popup is visible on mobile and tablet (<1440px). It remains hidden on desktop via the
   min-width:1440px rule above. The popup always appears ABOVE the checkout button to avoid
   covering navbar icons. */

/* Hide the floating price popup on tablets (too distracting at this size) */
@media (min-width: 769px) and (max-width: 1199px) {
  .nav-price-popup { display: none !important; }
}

/* Clear button inside the price popup */
.nav-price-clear {
  position: absolute;
  /* vertically center inside the bubble */
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: rgba(200, 30, 30, 0.95);
  color: #fff;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(170, 20, 20, 0.28);
  padding: 0;
}
.nav-price-clear:hover { transform: translateY(-1px); }
.nav-price-clear:focus { outline: 2px solid rgba(255,255,255,0.12); }

/* Small animation on press */
.nav-price-clear.clear-anim { transform: scale(0.92); opacity: 0.8; }

/* Tip Dropdown */
.nav-tip-wrap {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.nav-tip-btn {
  background: rgba(61, 200, 29, 0.15);
  border: 1px solid var(--green);
  color: var(--white);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
}

.nav-tip-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  background: rgba(61, 200, 29, 0.25);
}

.nav-tip-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  display: none;
  gap: 0.35rem;
  background: var(--black);
  border: 1px solid var(--green);
  padding: 0.35rem;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(61, 200, 29, 0.3);
  z-index: 9999;
}

.nav-tip-options[aria-expanded="true"],
.nav-tip-options:not([hidden]) {
  display: flex !important;
}

.nav-tip-options button {
  background: rgba(61, 200, 29, 0.12);
  color: var(--white);
  border: 1px solid var(--green);
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}

.nav-tip-options button:hover {
  background: rgba(61, 200, 29, 0.25);
}

/* Mobile Menu */
.mobile-menu { display: none !important; }

.mobile-menu-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
}

/* Ensure the menu stays hidden until toggled by JS (CSP/UA-safe) */
.mobile-menu-panel[hidden] { display: none !important; }

.mobile-menu-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--white);
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.mobile-menu-panel a {
  color: var(--white);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
}

/* ===================================================================
  Layout Containers
  =================================================================== */
.store-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--space-2);
  background: var(--black-deep);
  min-height: 100vh;
}

/* Banner */
.banner {
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.banner-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  /* left: socials | center: banner */
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-2);
}
.desc-logo {
  width: 40px;
  height: auto;
  object-fit: contain;
  display: inline-block;
}
.desc-logo.right { float: right; margin-left: 0.6rem; margin-bottom: 0.2rem; }
.desc-logo.left  { float: left;  margin-right: 0.6rem; margin-bottom: 0.2rem; }

/* Hide the logo next to the download pill by default; we'll show it on mobile */
.featured-title.subtitle .desc-logo { display: none; }

@media (max-width: 768px) {
  .desc-logo { width: 32px; float: none; display: inline-block; margin: 0 0 0.4rem 0; }
  /* Mini product: tighter text so it doesn't bleed */
  .mini-title { font-size: 0.72rem !important; line-height: 1.15 !important; }
  .mini-desc { font-size: 0.72rem !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
  .mini-content { padding: 0.5rem 0.6rem 0.6rem 0.6rem !important; }
  .mini-image { height: 130px !important; }

  /* CTA cards: compress layout and fonts on phones to prevent overflow */
  .cta-items { gap: 0.6rem !important; }
  /* Reflow CTA layout: image left, text right, Add button below text */
  .cta-item-card { 
    grid-template-columns: 56px 1fr !important; 
    grid-template-rows: auto auto !important;
    gap: 0.5rem !important; 
    padding: 0.45rem 0.6rem 0.55rem 0.6rem !important; 
    min-height: 100px !important; 
    align-items: start !important;
  }
  .cta-item-card img { width: 56px !important; height: 56px !important; grid-column: 1 / 2 !important; grid-row: 1 / span 2 !important; }
  .cta-item-card .cta-body { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; align-self: start !important; }
  .cta-item-card .add-cart-icon { 
    grid-column: 2 / 3 !important; 
    grid-row: 2 / 3 !important; 
    justify-self: start !important; 
    align-self: start !important; 
    background: rgba(255, 255, 255, 0.9) !important; /* light grey pill */
    color: #111 !important; 
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 999px !important; 
    width: auto !important; 
    height: auto !important; 
    padding: 6px 10px !important; 
    font-size: 0.95rem !important; 
    line-height: 1 !important; 
  }
  .cta-item-card .add-cart-icon::after { content: ' Add'; font-weight: 800; font-size: 0.9rem; }
  .cta-title { font-size: 0.86rem !important; }
  .cta-price { font-size: 0.82rem !important; }
  .cta-desc { font-size: 0.74rem !important; -webkit-line-clamp: 2 !important; }
  .cta-note { font-size: 0.7rem !important; }

  /* Hide the existing inline logo beside the top title on mobile */
  .featured-media-desc h3 .desc-logo { display: none !important; }
  /* Small logo when placed next to the green download pill */
  .featured-title.subtitle .desc-logo { width: 20px !important; height: auto !important; margin-left: 8px !important; vertical-align: middle !important; display: inline-block !important; }
}

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

/* Tone down banner image: reduce brightness/saturation so it isn't "hot" */
.banner-img {
  filter: brightness(0.88) saturate(0.85) contrast(0.98);
  transition: filter 220ms ease;
}

.site-logo {
  display: block;
  width: 72px;
  height: auto;
  object-fit: contain;
}
.logo-wrapper { display: flex; align-items: center; justify-content: center; }

.top-nav .banner {
  margin-bottom: 0;
}
.top-nav .banner-wrapper {
  padding: 0 0.5rem;
  gap: 0.5rem;
  max-width: 1200px;
}
.top-nav .banner-img {
  height: 34px;
  max-height: 34px;
  width: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* ===================================================================
  Featured Section
  =================================================================== */
.featured {
  gap: var(--space-3);
  background: rgba(1, 1, 1, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--space-3);
  border-radius: 18px;
  border: 1px solid rgba(61, 200, 29, 0.2);
  box-shadow: 0 8px 32px rgba(61, 200, 29, 0.12),
    0 1.5px 8px rgba(61, 200, 29, 0.1);
  margin-bottom: var(--space-3);
}

.featured-left {
  /* flex: 1 1 320px; */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.featured-img {
  width: 100%;
  max-width: 400px;
  margin: 0;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}

.featured-right {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.featured-right h2 {
  margin: 0;
  font-size: 2rem;
  color: var(--white);
}

.featured-right .desc {
  font-size: 0.975rem;
  line-height: 1.7;
  color: var(--muted);
}

.featured-right .updates {
  font-size: 0.925rem;
  color: var(--muted);
  font-style: italic;
}

.featured-media {
  /* gap: 8px;/ */
  align-items: stretch;
  height: auto;
  overflow: visible;
}

.featured-media iframe {
  /* Allow the embedded player to be larger and more rectangular for readability
     Use a responsive max-width and a wide aspect-ratio for better presentation */
  width: min(100%, 560px);
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
  display: block;
}

/* Featured headings + description formatting */
.feature-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 520px; /* allow room for readable lines */
  min-width: 280px; /* prevent collapsing to a few characters */
}

/* Shop section title styling */
.shop-title {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(61,200,29,0.12), rgba(0,0,0,0.18));
  border: 1px solid rgba(61,200,29,0.14);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  margin: 0.6rem 0;
}
.shop-title::before, .shop-title::after { opacity: 0.9; }

@media (max-width: 768px) {
  .shop-title { font-size: 1rem; padding: 6px 10px; border-radius: 10px; }
}

.featured-title {
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-weight: 800;
  text-wrap: balance;
  overflow-wrap: normal; /* avoid breaking inside normal words */
  word-break: normal;
  white-space: normal;
}

/* Optional description text inside the featured block */
.feature-wrapper p {
  margin: 0.35rem 0 0;
  max-width: 60ch; /* readable measure */
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.featured-title.subtitle {
  /* Bright green subtitle with a strong drop shadow for legibility
     over busy backgrounds. Remove blend modes so the color remains
     solid and visible. */
  font-weight: 900;
  font-size: 2.6em !important; /* prominent */
  color: #00ff66 !important; /* bright green */
  -webkit-text-stroke: 0 !important;
  /* strong, multi-layer drop shadow for depth and legibility */
  text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 8px 18px rgba(0,0,0,0.6);
  display: inline-block;
  background: rgba(0,0,0,0.65) !important; /* keep pill for contrast */
  padding: 12px 20px !important; /* bigger pill */
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  margin: 8px 0 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  mix-blend-mode: normal !important; /* ensure solid color */
}

/* Style the link inside the subtitle pill */
.featured-title.subtitle a {
  color: inherit !important; /* inherit brown */
  text-decoration: none !important; /* no underline or decoration */
  display: block !important;
}

/* Hover state: lift the pill slightly without changing text decoration */
.featured-title.subtitle:hover {
  background: rgba(0,0,0,0.8) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.65) !important;
  transform: translateY(-3px) !important;
}

/* Remove any default focus underline but preserve a visible focus ring for accessibility */
.featured-title.subtitle a:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(47,184,74,0.18) !important; /* subtle green focus ring */
}

.featured-title.bandcamp {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--muted);
  align-items: center;
  gap: 6px;
}

/* ===================================================================
  Mini Product Cards
  =================================================================== */
#products-mini {
  display: flex;
  flex-direction: row;
  gap: 0.875rem;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  align-items: stretch;
}

.mini-product {
  background: rgba(1, 1, 1, 0.92);
  border: 1.5px solid rgba(61, 200, 29, 0.25);
  box-shadow: 0 4px 18px rgba(61, 200, 29, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  transition: box-shadow 0.18s, background 0.18s, border-color 0.18s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.mini-product:hover {
  box-shadow: 0 10px 32px rgba(61, 200, 29, 0.25);
  background: rgba(1, 1, 1, 0.96);
  border-color: var(--green);
}

.mini-image {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

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

.mini-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.875rem;
}

.mini-title {
  font-size: 0.86rem;
  margin: 0;
  font-weight: 800;
  color: var(--white);
}

.mini-image {
  overflow: hidden;
  width: 100%;
  /* give images more vertical space so they're not cramped */
  height: 180px;
}
.mini-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem 0.875rem 0.75rem 0.875rem;
  /* push text down slightly to create breathing room under the image */
  margin-top: 6px;
}

.mini-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: linear-gradient(180deg, #fff, #f6f6f6);
  color: #111;
  border: 1px solid rgba(16, 24, 32, 0.06);
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 96px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.mini-select-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.mini-add {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
  color: var(--black);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(247, 238, 1, 0.12);
  transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
  letter-spacing: 0.01em;
  padding: 8px 10px;
  cursor: pointer;
}

.mini-add:hover {
  background: linear-gradient(135deg, var(--orange) 0%, var(--yellow) 100%);
  box-shadow: 0 4px 12px rgba(247, 238, 1, 0.18);
  transform: translateY(-2px);
}

/* Mini Preview Hover */
.mini-preview {
  position: fixed;
  z-index: 3200;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.mini-preview.visible {
  opacity: 1;
  transform: scale(1);
}

/* Check Animation */
.check-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 220ms ease,
    transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
  z-index: 5;
}

.check-svg {
  transform: scale(0.85);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.mini-product.added .check-overlay {
  opacity: 1;
  transform: scale(1);
}

.mini-product.added .check-svg {
  transform: scale(1);
  animation: pop-check 420ms cubic-bezier(0.175, 0.885, 0.32, 1);
}

@keyframes pop-check {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===================================================================
  CTA Cards
  =================================================================== */
.cta-items {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  justify-content: flex-start;
}

/* Wrapper to host a tiny dropdown next to a CTA card (lanyard only) */
.cta-item-card-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Tiny dropdown for lanyard color */
.cta-mini-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: linear-gradient(180deg, #fff, #f6f6f6);
  color: #111;
  border: 1px solid rgba(16, 24, 32, 0.12);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 8px;
  min-width: 96px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
  .cta-item-card-wrap { width: 100%; }
  .cta-mini-select { margin-left: auto; }
}

.cta-item-card {
  display: grid;
  grid-template-columns: 72px 1fr 48px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  color: #fff;
  cursor: pointer;
  flex: 1 1 0%;
  min-width: 220px;
  /* Normalize card heights across different content by setting
     a taller consistent minimum and letting flex stretch them. */
  min-height: 116px;
  height: 100%;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.cta-item-card:hover,
.cta-item-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.cta-item-card img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  grid-column: 1 / 2;
}

.cta-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  grid-column: 2 / 3;
  justify-content: center;
  overflow: hidden;
}

.cta-title {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--white);
}

.cta-price {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white);
  opacity: 0.95;
}

.cta-desc {
  font-size: 0.82rem;
  color: var(--white);
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cta-note {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
  line-height: 1.2;
  font-style: normal;
  /* Clamp note to a single line so lanyard card doesn't exceed
     the standard CTA height */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cta-item-card .add-cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--white);
  font-weight: 900;
  font-size: 1.25rem;
  grid-column: 3 / 4;
  justify-self: end;
}

.cta-item-card .add-cart-icon:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cta-item-card .bandcamp-logo {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 3 / 4;
  justify-self: end;
}

.bandcamp-logo svg {
  display: block;
  height: 20px;
  width: auto;
}

.cta-bg-button-kit-yellow {
  /* Darker, richer yellow/orange for Sticker Pack */
  background: linear-gradient(135deg, #d1b80a 0%, #b86d14 100%);
  color: var(--black);
  border-color: rgba(209, 184, 10, 0.4);
  box-shadow: 0 3px 14px rgba(184, 109, 20, 0.35);
}

.cta-bg-button-usb-red {
  background: linear-gradient(135deg, var(--red) 0%, var(--orange) 100%);
  color: var(--white);
  border-color: rgba(170, 4, 11, 0.3);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
}

/* CTA hover preview (small floating photo) */
.cta-preview {
  position: fixed;
  z-index: 6000;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.cta-preview.visible {
  opacity: 1;
  transform: scale(1);
}

/* On narrow screens we don't show hover previews */
@media (max-width: 768px) {
  .cta-preview { display: none !important; }
}

/* CTA Check Animation */
.cta-add-cart-button {
  position: relative;
  overflow: visible;
}

.cta-check-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 220ms ease,
    transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
  z-index: 6;
}

.cta-add-cart-button .cta-check-svg {
  transform: scale(0.85);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.cta-add-cart-button.added .cta-check-overlay {
  opacity: 1;
  transform: scale(1);
}

.cta-add-cart-button.added .cta-check-svg {
  transform: scale(1);
  animation: pop-check 420ms cubic-bezier(0.175, 0.885, 0.32, 1);
}

/* ===================================================================
  Bandcamp Banner
  =================================================================== */
.bandcamp-banner {
  background: linear-gradient(135deg, var(--brand), #5089a0);
  color: #fff;
  padding: 0.5rem;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(98, 154, 169, 0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  overflow: visible;
}

.bandcamp-banner a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.375rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  margin: 0 0.5rem;
}

.bandcamp-banner a:hover {
  opacity: 0.9;
}

.bandcamp-banner p {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  opacity: 0.95;
}

.bandcamp-banner iframe {
  display: block;
  width: 100%;
  height: 42px;
  border: 0;
  margin: 0 auto;
  overflow: hidden;
}

.bandcamp-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0.5rem;
}

.bandcamp-title {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--white);
}

.bandcamp-price {
  background: var(--green);
  color: var(--black);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.1rem;
}

/* ===================================================================
  Cart Panel
  =================================================================== */
.cart-panel {
  background: rgba(1, 1, 1, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(61, 200, 29, 0.25);
  border-radius: 16px;
  padding: var(--space-3);
  box-shadow: 0 8px 32px rgba(61, 200, 29, 0.15);
}

#cart-section h2 {
  margin: 0 0 var(--space-2) 0;
  font-size: 1.5rem;
  color: var(--white);
}

#cart-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 6px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.cart-item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item-name {
  font-weight: 700;
  color: var(--white);
}

.cart-item-options {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  margin-top: 4px;
}

.cart-color-select {
  appearance: none;
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 4px 24px 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 0l5 6 5-6z" fill="%23ffffff"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  transition: border-color 0.2s;
}

.cart-color-select:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.cart-color-select:focus {
  outline: none;
  border-color: var(--brand);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.cart-item-price {
  font-weight: 800;
  color: var(--white);
}

.cart-item-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.qty-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.qty-btn {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.qty-display {
  min-width: 28px;
  text-align: center;
  display: inline-block;
}

.remove-btn {
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(170, 4, 11, 0.08);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.checkout-button {
  width: 100%;
  padding: 0.875rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--green), var(--brand-600));
  color: var(--white);
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(61, 200, 29, 0.3);
}

.checkout-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(61, 200, 29, 0.4);
}

.clear-cart-button {
  display: inline-block;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-2);
  border-radius: 8px;
  border: 2px solid var(--danger);
  background: rgba(255, 82, 82, 0.08);
  color: var(--danger);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-cart-button:hover {
  background: rgba(255, 82, 82, 0.15);
  border-color: #cc0000;
  transform: translateY(-1px);
}

/* Cart Add-on Styles */
.cart-addon {
  margin: var(--space-3) 0;
  padding: var(--space-2);
  border: 2px dashed rgba(61, 200, 29, 0.3);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(61, 200, 29, 0.05), rgba(255, 205, 0, 0.05));
  transition: all 0.3s ease;
}

.cart-addon:hover {
  border-color: rgba(61, 200, 29, 0.5);
  background: linear-gradient(135deg, rgba(61, 200, 29, 0.08), rgba(255, 205, 0, 0.08));
}

.cart-addon.added {
  border-color: var(--green);
  background: rgba(61, 200, 29, 0.1);
  opacity: 0.7;
  pointer-events: none;
}

/* Checkbox for re-adding certificate after removal */
.cart-addon-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: var(--space-2) 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s ease;
}

.cart-addon-checkbox:hover {
  color: var(--green);
}

.cart-addon-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--green);
}

.cart-addon-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.cart-addon-icon {
  font-size: 1.5rem;
}

.cart-addon-title {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text);
}

.cart-addon-desc {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0.5rem 0 1rem 0;
}

.cart-addon-btn {
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid var(--green);
  border-radius: 8px;
  background: rgba(61, 200, 29, 0.1);
  color: var(--green);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-addon-btn:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(61, 200, 29, 0.3);
}

.cart-addon-btn:active {
  transform: translateY(0);
}

/* Tiny note under the certificate add-on */
.cart-addon-note {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.cart-addon-note a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cart-addon-note a:hover {
  color: var(--white);
}

/* Cart Totals Breakdown */
.cart-totals {
  margin: var(--space-3) 0;
  padding: var(--space-2);
  border-top: 2px solid rgba(61, 200, 29, 0.2);
  border-bottom: 2px solid rgba(61, 200, 29, 0.2);
  background: rgba(61, 200, 29, 0.03);
  border-radius: 8px;
}

.cart-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0;
  font-size: 1rem;
  color: var(--text);
}

.cart-total-line.shipping-note {
  color: var(--green);
  font-weight: 600;
  font-size: 0.9rem;
  justify-content: center;
  padding: 0.25rem 0;
}

.cart-total-line.shipping-cost-note {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.85rem;
  justify-content: center;
  padding: 0.25rem 0;
  font-style: italic;
}

.cart-total-final {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(61, 200, 29, 0.3);
  font-size: 1.125rem;
}

.cart-total-amount {
  font-weight: 600;
  color: var(--green);
}

.terms-summary {
  font-size: 0.85rem;
  line-height: 1.4;
  border-top: 1px solid rgba(61, 200, 29, 0.2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  color: var(--muted);
}

.terms-summary a {
  color: var(--green);
  text-decoration: underline;
}

/* Cart Toggle Elements (Hidden on Desktop) */
.cart-toggle-button,
#cart-toggle-checkbox,
#cart-toggle,
#cart-close,
.cart-backdrop {
  display: none;
}

/* ===================================================================
  Gallery
  =================================================================== */
.gallery-row {
  display: flex;
  gap: 1rem;
  justify-content: space-evenly;
  /* margin: 1.5rem 0; */
  flex-wrap: wrap;
  align-items: flex-start; /* changed: prevent flex items from stretching vertically */
}

.gallery-box {
  width: 100px;
  height: 100px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  /* removed green stroke; use subtle drop shadow */
  border: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

.gallery-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  backdrop-filter: blur(4px);
}

.gallery-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.gallery-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2.5rem;
  color: white;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5001;
}

.gallery-close:hover {
  background: rgba(170, 4, 11, 0.8);
}

/* ===================================================================
  Footer
  =================================================================== */
.site-footer {
  margin-top: 3rem;
  background: var(--black);
  border-top: 1px solid rgba(61, 200, 29, 0.2);
  padding: calc(var(--space-2)) 1rem;
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
  font-size: 0.5rem;
}

.footer-privacy-summary {
  margin: 0;
  font-size: 0.5rem;
  color: var(--muted);
}

.footer-privacy-summary a,
.site-footer a.privacy-link {
  color: var(--white);
  text-decoration: none;
  font-style: italic;
}

.footer-privacy-summary a:visited,
.site-footer a.privacy-link:visited {
  color: var(--white);
  text-decoration: none;
}

.site-footer a {
  color: var(--green);
  font-weight: 700;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer p {
  margin: 0;
  font-size: 1.4em;
  color: var(--white);
}

.footer-copyright {
  font-size: 0.48rem;
}

.footer-payment-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.stripe-logo {
  height: 24px;
  width: auto;
  vertical-align: middle;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.tag-title{font-size: 1.5em;}

/* ===================================================================
  Utility Classes
  =================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
  Desktop (1440px+)
  =================================================================== */
@media (min-width: 1440px) {
  :root {
    --squid-cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='32'>🦑</text></svg>")
        24 24,
      auto;
  }

  /* Allow page to scroll on desktop; only cart panel scrolls if long */
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .store-container {
    max-width: 1600px !important;
    width: 90% !important;
    margin: 1.1rem auto !important;
    padding: 1.1rem !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }

  .product-area,
  .product-grid {
    overflow: visible !important;
    max-height: none !important;
  }

  .mini-product,
  .mini-product .mini-add,
  .mini-product a,
  .mini-product button {
    cursor: var(--squid-cursor) !important;
  }

  input,
  textarea,
  select,
  button[type="submit"],
  .mini-product select,
  .mini-product input {
    cursor: auto !important;
  }

  .top-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 3200 !important;
  }

  .mobile-menu {
    display: none !important;
  }

  .featured {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 2rem !important;
    align-items: start !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    max-height: none !important;

  }

  .featured-left {
    grid-column: 1 !important;
    /* width: 100% !important; */
  }

  .featured-right {
    grid-column: 2 !important;
    align-self: start !important;
    width: 100% !important;
  }

  .featured-right .cart-panel {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1.25rem !important;
    transform: none !important;
    /* Let the page scroll instead of the cart panel */
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    scrollbar-width: auto;
    min-height: 0 !important;
    height: auto !important;
  }

  .featured-right .cart-panel::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .featured-right .cart-panel.crowded {
    max-width: 480px !important;
  }

  .featured-media {
    display: grid !important;
    grid-template-columns: 320px 1fr !important; /* media | desc+gallery */
    grid-auto-rows: auto !important;
    gap: 2rem !important;
    align-items: start !important;
    height: auto !important;
    overflow: visible !important;
    max-width: none !important;
            background-image:url('/assets/pexels/CTA-bg.jpg') !important;
    background-size: 100% !important;
    background-color: rgba(0,0,0,1.0) !important;
    background-position: 60% !important;
    /* background-clip: padding-box !important; */
      /* background-repeat: repeat; */
  background-blend-mode: screen; /* or soft-light, overlay, etc. */
  }
  /* CTA row: allow an extra line of description at desktop widths
    so text doesn't get clipped around ~1600px */
  .cta-item-card { align-items: start !important; min-height: 132px !important; }
  .cta-body { overflow: visible !important; }
  .cta-desc { -webkit-line-clamp: 3 !important; }


  .featured-media iframe {
    grid-column: 1 !important;
    /* Increase the left-column media width on desktop so the Bandcamp player is larger */
    max-width: 520px !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 8px !important;
    display: block !important;
  }

  .feature-wrapper {
    max-width: 320px;
  }

  .featured-title {
    font-size: 1.6rem;
    white-space: normal;
  }
  .featured-title.subtitle {
    font-size: 1rem;
  }
  .featured-title.bandcamp {
    font-size: 0.92rem;
  }

  .featured-img {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }

  .featured-media-desc {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    margin-left: 1.1rem !important;
    min-width: 360px !important;

  }

  /* Hero image under 'Enter the dream.' to fill space (uses CSS background) */
  .featured-hero {
    width: 100%;
    margin: 8px 0 12px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    height: clamp(140px, 24vw, 260px);
    background-image: url('assets/pexels/CTA-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Glassmorphism overlays for key text sections */
  .featured-media-desc .featured-title,
  .featured-media-desc .subtitle,
  .featured-media-desc .tag-title,
  .featured-media-desc > p {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: none;
    border-right: none;
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }

  /* Avoid double-background on nested heading inside the main title */
  .featured-media-desc .featured-title .featured-title {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
  }

  @media (max-width: 600px) {
    .featured-media-desc .featured-title,
    .featured-media-desc .subtitle,
    .featured-media-desc .tag-title,
    .featured-media-desc > p {
      padding: 8px 10px;
      border-radius: 10px;
      margin: 6px 0;
    }
  }

  /* Remove glass effect from top headings and the Bandcamp banner as requested */
  .featured-media-desc .featured-title,
  .featured-media-desc .subtitle,
  .featured-media-desc .tag-title,
  .featured-title.bandcamp,
  .bandcamp-banner {
    background: transparent !important;
    border: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Make the 'Enter the dream.' tag more readable */
  .featured-media-desc .tag-title {
    color: rgba(255,255,255,0.96) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-top: 0.35rem !important;
  }

  /* Right-align the small Bandcamp link in the banner */
  .bandcamp-banner .bandcamp-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
  }
  .bandcamp-banner .bandcamp-head a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-align: right !important;
  }

  /* Strong, high-contrast box for the tag title so it reads over
     complex backgrounds (e.g., yellow text or busy imagery). This
     intentionally uses !important to override the global transparent
     rule so the heading remains legible. */
  .featured-media-desc .tag-title {
    background: rgba(0,0,0,0.72) !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    display: inline-block !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55) !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    line-height: 1.15 !important;
  }

  #products-mini {
    position: static;
    display: grid;
    grid-auto-flow: row;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.01)
    );
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    align-items: start;
    justify-items: stretch;
  }

  #products-mini:has(.mini-product:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }

  #products-mini:has(.mini-product:nth-child(2)):not(
      :has(.mini-product:nth-child(3))
    ) {
    grid-template-columns: repeat(2, 1fr);
  }

  #products-mini:not(:has(.mini-product:nth-child(2))) {
    grid-template-columns: 1fr;
  }

  .mini-product {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    align-items: start;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(5, 8, 12, 0.92) !important; /* darker card */
    border: 1.5px solid rgba(61, 200, 29, 0.18);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    align-self: stretch;
  }

  .mini-product:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    background: rgba(10, 14, 18, 0.98) !important;
    border-color: var(--brand-600);
  }

  .mini-image {
    width: 100%;
    /* increase thumb height for better image visibility in grid layout */
    height: 140px;
    overflow: hidden;
    border-radius: 8px 8px 6px 6px;
    grid-row: 1 / 2;
  }

  /* Slightly smaller Collector's Kit boxes for visual balance */
  .mini-product[data-product="gp_kit"] .mini-image {
    height: 120px !important;
  }

  /* Main product card thumb size for Collector's Kit */
  .product[data-product="gp_kit"] .product-thumb {
    max-width: 260px !important;
    width: 260px !important;
    height: auto !important;
    object-fit: cover !important;
  }

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

  .mini-title {
    font-size: 0.78rem;
    margin: 0;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.01em;
    text-shadow: 0 1px 4px rgba(61, 200, 29, 0.08);
  }

  .mini-desc {
    display: block;
    white-space: normal;
    overflow: auto;
    color: var(--white);
    opacity: 0.88;
    font-size: 0.78rem;
  }

  .mini-content {
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
  }

  .mini-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 1 / -1;
    padding-top: 6px;
    gap: 0.75rem; /* add slight spacing between price and Add */
    padding-right: 0.8rem; /* keep items away from the edge */
  }

  .mini-footer .mini-select {
    margin-right: 0.5rem;
  }

  .mini-footer .mini-add {
    margin-left: 0.5rem !important; /* slight separation from price */
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    background: var(--green);
    color: var(--black);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    font-weight: 700;
    box-shadow: none;
    transition: background 120ms ease, transform 120ms ease;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* In-button mini menu for lanyard */
  .mini-add-has-menu { position: relative; overflow: visible; }
  .mini-add-has-menu.open { width: auto; padding: 0 6px; }
  .mini-add-has-menu .mini-add-label { font-size: 0.85rem; color: var(--black); }
  .mini-add-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #0b0f14;
    border: 1px solid rgba(61,200,29,0.25);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    padding: 4px;
    display: none;
    z-index: 10;
    min-width: 140px;
  }
  .mini-add.open .mini-add-menu { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
  .mini-add-menu .mini-color {
    background: linear-gradient(180deg, #fff, #f6f6f6);
    color: #111;
    border: 1px solid rgba(16,24,32,0.12);
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 6px 8px;
    cursor: pointer;
  }
  .mini-add-menu .mini-color:hover { background: #fff; }

  .mini-price {
    color: rgba(255,255,255,0.95);
    font-weight: 800;
    letter-spacing: 0.01em;
    margin-right: 0.85rem; /* a bit more room before Add */
    font-size: 0.9rem;
  }

  .mini-add:hover {
    background: rgba(61, 200, 29, 0.9);
    transform: translateY(-1px);
  }

  .mini-add::before {
    content: "+";
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--black);
    line-height: 1;
    display: inline-block;
    text-indent: 0;
  }
  .mini-add.mini-add-has-menu::before { content: "+"; margin-right: 6px; }

  .mini-product .mini-select-label {
    color: #0f172a;
  }

  .cart-panel {
    /* Remove desktop internal scroll so the page scrolls instead */
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    scrollbar-width: auto;
  }


  .bc-iframe{padding:10px; margin: 2em;}
  /* corrected: moved !important to the value and added semicolon */
  #art, .art, .item { padding-top: 105% !important; }
  /* Gallery: 3 x 2 grid on wide desktop to avoid bleeding into cart
     Keep a max tile size so columns don't expand too wide */
  .gallery-row {
    grid-column: 2 !important; /* place under description, same column */
    display: grid !important;
    grid-template-columns: repeat(8, 72px) !important; /* six small tiles */
    grid-auto-rows: 72px !important;
    gap: 0.5rem !important;
    justify-content: start !important;
    align-items: start !important;
    width: max-content !important;
    margin-top: 0.75rem !important;
  }
  .gallery-row .gallery-box {
    width: 72px !important;
    height: 72px !important;
    border: none !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.48) !important;
  }

/* At very wide desktop widths show all six thumbnails in a single row */
@media (min-width: 1440px) {
  .gallery-row {
    grid-template-columns: repeat(6, 72px) !important;
    grid-auto-rows: 72px !important;
    gap: 0.5rem !important;
    width: max-content !important;
    max-width: 100% !important;  /* never overflow the left column */
    overflow-x: auto !important; /* if the container is narrow, scroll instead of colliding */
  }
  .gallery-row .gallery-box {
    width: 72px !important;
    height: 72px !important;
  }
}

  .cart-panel::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  #cart-items {
    scrollbar-width: thin;
  }
  #cart-items::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .cart-item {
    font-size: 0.85rem !important;
    padding: 6px 4px !important;
  }

  .cart-item-name {
    font-size: 0.88rem !important;
  }
  .cart-item-price {
    font-size: 0.85rem !important;
  }
  .cart-item-options {
    font-size: 0.75rem !important;
  }

  .site-footer {
    padding: 1.25rem 2rem !important;
    margin-top: 3.5rem !important;
  }

  .site-footer-inner {
    max-width: 1400px !important;
    padding: 1rem 1.5rem !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
    text-align: left !important;
    font-size: 0.85rem !important;
  }

  .footer-privacy-summary {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  .footer-copyright {
    font-size: 0.8rem !important;
    text-align: right !important;
    opacity: 0.9 !important;
  }
}

/* ===================================================================
  Mobile/Tablet (up to 1439px)
  =================================================================== */
@media (max-width: 1439px) {
  .top-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background: linear-gradient(
      90deg,
      var(--black-deep),
      var(--black)
    ) !important;
    border-bottom: 1px solid rgba(61, 200, 29, 0.12) !important;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 0.4rem 0.5rem;
    overflow-x: hidden;
  }

  .top-nav a {
    display: inline-block !important;
    font-size: 0.88rem;
    padding: 0 0.35rem;
  }

  .top-nav .banner-img {
    height: 2.6rem;
    max-height: 1.7rem;
  }

  .nav-checkout {
    padding: 0.18rem 0.5rem;
    font-size: 0.88rem;
    border-radius: 8px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-cart-count {
    font-size: 0.68rem;
    padding: 2px 5px;
    min-width: 18px;
  }

  .mobile-menu {
    display: inline-block !important;
    margin-left: 0.6rem;
  }

  .mobile-menu-btn {
    /* hide label, show hamburger icon */
    font-size: 0 !important;
    padding: 6px 8px;
    position: relative;
  }
  .mobile-menu-btn::before {
    content: "\2630"; /* hamburger */
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
  }

  /* Hide the top-level Store link on mobile/tablet */
  .top-nav a[href="index.html"] {
    display: none !important;
  }

  .nav-tip-options {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 56px !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.6rem !important;
    background: rgba(1, 1, 1, 0.98) !important;
    border: 1px solid rgba(61, 200, 29, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
    z-index: 2600 !important;
    display: none;
  }

  .nav-tip-options button {
    width: 100%;
    text-align: center;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
  }

  /* Mobile: small top margin for featured titles for breathing room */
  .featured-title {
    margin-top: 1.1rem !important;
  }

  .bandcamp-banner {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    overflow-x: hidden;
  }

  .store-container {
    padding-top: 0 !important;
  }

  .featured-media {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: center;
  }

  .feature-wrapper {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
  }

  /* Make Bandcamp embed square on mobile */
  .featured-media iframe,
  .bc-iframe {
    width: 100% !important;
    max-width: 420px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    margin: 0.5rem auto !important;
    padding: 0 !important;
  }

  .featured-title {
    font-size: 1rem !important;
  }
  .featured-title.subtitle {
    font-size: 1.25rem !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }
  .featured-title.bandcamp {
    font-size: 0.9rem !important;
  }

  #products-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 480px;
    margin: 0.75rem auto 0;
    padding: 0;
  }

  .mini-product {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-rows: auto auto !important; /* place footer under text */
    width: 100% !important;
    max-width: 320px;
    min-width: auto;
    height: auto;               /* allow card to grow with content */
    min-height: 220px;          /* maintain a comfortable minimum */
    margin-bottom: 0.75rem;
    text-align: left;
    padding: 0.85rem 1rem !important; /* ensure right padding away from edge */
  }

  .mini-price{
    font-weight: 900;
    font-size: 1.2rem
    ;
    margin-right: 0.6rem; /* ensure space to the Add button on mobile */
  }

  .mini-image { height: 140px; border-radius: 10px; overflow: hidden; grid-column: 1 / 2 !important; grid-row: 1 / span 2 !important; }

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

  .mini-content { padding: 0.9rem 0.75rem !important; grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }

  .mini-footer { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 1.2rem !important; padding-top: 0.6rem !important; padding-right: 0.9rem !important; grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }

  .mini-footer .mini-select {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  .mini-footer .mini-add {
    margin-left: 0 !important; /* keep Add next to price but both aligned right */
    width: auto !important;
    padding: 6px 10px;
    font-size: 0.9rem;
  }

  .cta-items {
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
  }

  .cta-item-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 64px;
    box-sizing: border-box;
    padding: 0.75rem !important;
    gap: 0.6rem !important;
  }

  .cta-item-card img {
    width: 56px;
    height: 56px;
    max-width: 100%;
  }

  .cta-body {
    padding: 0.35rem 0 !important;
  }

  .cart-panel {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px rgba(61, 200, 29, 0.18) !important;
    border: 2px solid var(--green) !important;
    margin-top: 2rem !important;
    z-index: 1 !important;
  }

  .featured-right {
    display: block !important;
    width: 100% !important;
  }

  .cart-toggle-button,
  #cart-toggle-checkbox,
  #cart-close,
  .cart-backdrop {
    display: none !important;
  }

  .site-footer-inner {
    padding: 0.5rem !important;
  }

  .footer-privacy-summary {
    font-size: 0.5rem;
  }
}

@media (max-width: 600px) {
  .cta-item-card,
  .mini-product {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.9rem !important;
  }

  .mini-add,
  .cta-button,
  .checkout-button,
  .clear-cart-button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .gallery-box {
    width: 80px;
    height: 80px;
  }

  /* Keep footer inside the store container on mobile, no full-bleed */
  .site-footer {
    padding: calc(var(--space-2)) 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    border-radius: 8px !important;
  }

  .site-footer-inner {
    padding: 0.5rem !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .footer-privacy-summary {
    font-size: 0.45rem;
  }
}

@media (max-width: 480px) {
  .site-footer-inner {
    padding: 0 0.5rem;
  }
}

/* Ultra-simple mobile nav layout (phones) */
@media (max-width: 768px) {
  .top-nav {
    display: block !important;
    text-align: center !important;
    padding: 0.5rem 0.5rem !important;
  }
  .top-nav .banner-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.35rem !important;
  }
  .top-nav .social-icons-compact,
  .mobile-menu { display: none !important; }

  /* Show tip button on mobile */
  .nav-tip-wrap { display: inline-block !important; }

  /* Mobile social row: 4 columns underneath */
  .nav-social-desktop { display: none !important; }
  .nav-social-mobile { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr); 
    justify-items: center; 
    /* gap: 0.4rem; */
    margin-top: 0.7rem; 
    padding: 0 0.5rem;
  }

  /* Hide the Store label on phones (already hidden for wider tablets too) */
  .top-nav a[href="index.html"] { display: none !important; }

  /* About / Music row */
  .top-nav > a { display: inline-block !important; margin: 0 0.5rem !important; }

  /* Checkout row */
  .nav-checkout {
    display: inline-flex !important;
    width: auto !important;
    margin: 0.5rem auto 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* Tablet tweaks: use the exact same nav layout as mobile to avoid scroll issues */
@media (min-width: 769px) and (max-width: 1199px) {
  /* Copy mobile nav layout: stacked, centered, no horizontal overflow */
  .top-nav {
    display: block !important;
    text-align: center !important;
    padding: 0.6rem 0.5rem !important;
    position: sticky !important;
    top: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  .top-nav .banner-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    margin-bottom: 0.4rem !important;
  }
  /* Hide desktop socials; show 4-up mobile grid under banner */
  .nav-social-desktop { display: none !important; }
  .nav-social-mobile {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    margin-top: 0.6rem;
    padding: 0 0.75rem;
  }
  /* Hide the Store label like on phones */
  .top-nav a[href="index.html"] { display: none !important; }
  /* Show tip button on tablet */
  .nav-tip-wrap { display: inline-block !important; }
  /* Checkout button centered beneath links */
  .nav-checkout {
    display: inline-flex !important;
    width: auto !important;
    margin: 0.5rem auto 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* No hamburger dropdown on tablets; keep inline links */
  .mobile-menu { display: none !important; }

  /* Mini-card text: slightly smaller for better density on tablets */
  #products-mini .mini-title { font-size: 0.8rem !important; line-height: 1.2 !important; }
  #products-mini .mini-desc { font-size: 0.78rem !important; line-height: 1.35 !important; }
  /* Avoid cut-off: let mini-cards auto-size vertically on tablets */
  .mini-product { height: auto !important; min-height: 180px !important; }

  /* CTA cards: make primary text larger on tablets */
  .cta-item-card img { width: 72px !important; height: 72px !important; }
  .cta-title { font-size: 1.15rem !important; }
  .cta-price { font-size: 1.05rem !important; }
  .cta-desc { font-size: 0.98rem !important; -webkit-line-clamp: 2; }
  .cta-item-card { min-height: 128px !important; padding: 0.9rem 1.1rem !important; }

  /* Mini-card text: slightly smaller for better density on tablets */
  #products-mini .mini-title { font-size: 0.8rem !important; line-height: 1.2 !important; }
  #products-mini .mini-desc { font-size: 0.78rem !important; line-height: 1.35 !important; }

  /* CTA cards: make primary text larger on tablets */
  .cta-item-card img { width: 64px; height: 64px; }
  .cta-title { font-size: 1.05rem; }
  .cta-price { font-size: 1rem; }
  .cta-desc { font-size: 0.9rem; -webkit-line-clamp: 2; }
  .cta-item-card { min-height: 112px; }

  /* Footer sizing for tablets */
  .site-footer-inner { font-size: 0.95rem !important; }
  .footer-privacy-summary { font-size: 0.95rem !important; }
  .footer-copyright { font-size: 0.85rem !important; }
}

/* Horizontal mini-products on mid screens (600px–1439px) */
@media (min-width: 600px) and (max-width: 1439px) {
  #products-mini {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 0 0 0 !important;
    padding: 0.5rem 0 !important;
  }
  #products-mini .mini-product {
    display: block !important; /* revert grid layout from mobile override */
    min-width: 300px !important;
    max-width: 340px !important;
    height: auto !important;
    padding: 0 !important;
  }
}

/* Mobile CTA: nudge title up and allow more description lines */
@media (max-width: 768px) {
  .cta-item-card { padding-top: 0.45rem !important; }
  .cta-item-card .cta-body { margin-top: -2px !important; }
  .cta-item-card .cta-title { margin: 0 0 2px 0 !important; }
  .cta-item-card .cta-desc { -webkit-line-clamp: 3 !important; }
}

/* Footer should respect the store container at all sizes */
.site-footer {
  max-width: 100%;
}

/* ================================================================
   Final overrides: keep nav visible and enable page scroll globally
   ================================================================ */
.top-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

html,
body {
  overflow-y: auto !important;
}

.store-container {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Modern, minimal scrollbars (cross-browser) */
:root {
  --scroll-track: rgba(255, 255, 255, 0.06);
  --scroll-thumb: rgba(61, 200, 29, 0.55);
  --scroll-thumb-hover: rgba(61, 200, 29, 0.9);
}

html, body, .cart-panel, #cart-items, .gallery-overlay {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* WebKit/Blink */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.cart-panel::-webkit-scrollbar,
.featured-right .cart-panel::-webkit-scrollbar,
#cart-items::-webkit-scrollbar,
.gallery-overlay::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.cart-panel::-webkit-scrollbar-track,
.featured-right .cart-panel::-webkit-scrollbar-track,
#cart-items::-webkit-scrollbar-track,
.gallery-overlay::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.cart-panel::-webkit-scrollbar-thumb,
.featured-right .cart-panel::-webkit-scrollbar-thumb,
#cart-items::-webkit-scrollbar-thumb,
.gallery-overlay::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scroll-thumb), rgba(61, 200, 29, 0.35));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.cart-panel::-webkit-scrollbar-thumb:hover,
.featured-right .cart-panel::-webkit-scrollbar-thumb:hover,
#cart-items::-webkit-scrollbar-thumb:hover,
.gallery-overlay::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

/* Desktop two-column layout (>=1440px). 1200–1439 now uses the mobile/single-column layout */
@media (min-width: 1440px) {
  /* Desktop shows inline social icons group */
  .nav-social-desktop { display: inline-flex !important; }
  .nav-social-mobile { display: none !important; }
  .featured {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 2rem !important;
    align-items: start !important;
  }
  .featured-left {
    grid-column: 1 !important;
  }
  .featured-right {
    grid-column: 2 !important;
  }
  .featured-right .cart-panel {
    width: 100% !important;
    max-width: none !important;
  }
  /* Ensure media + description are side-by-side at desktop widths */
  .featured-media {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    /* Let rows stretch so the left iframe (which spans rows) can fill the
       available vertical space instead of being limited by its aspect ratio */
    grid-auto-rows: 1fr !important;
    gap: 1.5rem !important;
    align-items: start !important;
  }
  /* Make the embedded player span both rows (tall) so it occupies the
    full vertical space of the media grid on desktop. The description
    will remain in the right column next to the player. */
  .featured-media iframe { 
    grid-column: 1 !important; 
    grid-row: 1 / -1 !important; 
    max-width: none !important; 
    width: 100% !important; 
    /* Stretch to fill the grid row height and ensure it's not cut off */
    height: 100% !important;
    min-height: 420px !important; /* desktop baseline, tweakable */
    align-self: stretch !important;
  }
  .featured-media-desc { grid-column: 2 !important; margin-left: 1.1rem !important; }
  .gallery-row {
    grid-column: 2 !important;
    display: grid !important;
    /* Keep thumbnails from bleeding under the cart on mid/large desktop widths */
    grid-template-columns: repeat(6, 72px) !important; /* 6 per row, remaining wrap */
    grid-auto-rows: 72px !important;
    gap: 0.5rem !important;
    justify-content: start !important;
    width: max-content !important;
    max-width: 100% !important;   /* constrain to the left column */
    overflow-x: auto !important;  /* scroll horizontally if needed */
    margin-top: 0.5rem !important;
  }

/* Very small phones: make mini-product Add a full-width tap target under the description */
@media (max-width: 480px) {
  #products-mini .mini-product { padding: 0.85rem 1rem !important; }
  #products-mini .mini-content { grid-column: 1 / -1 !important; grid-row: 1 / 2 !important; padding: 0 0 0.5rem 0 !important; }
  #products-mini .mini-image { grid-column: 1 / -1 !important; grid-row: 0 / 1 !important; height: 120px !important; }
  #products-mini .mini-footer {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding-right: 1rem !important;
    padding-top: 0.5rem !important;
  }
  #products-mini .mini-price { margin-right: 0 !important; text-align: left !important; font-size: 1rem !important; }
  #products-mini .mini-footer .mini-add {
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    margin-left: 0 !important;
    background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%) !important; /* gold */
    color: var(--black) !important;
    font-weight: 800 !important;
    justify-content: center !important;
  }
  /* hide mini-select on tiny phones to simplify UI */
  #products-mini .mini-footer .mini-select { display: none !important; }
}
  .gallery-row .gallery-box {
    width: 72px !important;
    height: 72px !important;
    border: none !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.48) !important;
  }
}