/* ==========================================================================
   SITE-WIDE STYLES
   • Variables, reset, header/nav/footer, utilities
   ========================================================================== */

/* ───── Reset all elements to a clean slate ───── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ───── Define global CSS variables ───── */
:root {
  --omg-green:  #3EC352;
  --omg-green-rgb: 62,195,82;
  --omg-yellow: #FFEB3B;
  --omg-yellow-rgb: 235,214,0;
  --omg-orange: #FF8C00;
  --omg-orange-rgb: 254,127,45;
  --omg-red:    #F44336;
  --omg-red-rgb:   241,91,103;
  --omg-blue:   #2196F3;
  --omg-blue-rgb:  41,134,204;
  --bg-dark:    #000000;
  --bg-light:   #FFFFFF;
}

/* ───── Base styling for page body ───── */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bg-dark);
  color: var(--bg-light);
  line-height: 1.6;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ───── Prevent any horizontal overflow ───── */
html, body {
  overflow-x: hidden;
}


/* ───── Adjust layout for auth pages ───── */
body.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ───── Let main content grow to push footer down on auth pages ───── */
body.auth-page main {
  flex: 1;
}

/* ───── Default main content flex behavior ───── */
main {
  flex: 1;
}

/* ───── Full-screen glitch canvas background ───── */
#glitch-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;      /* cap layout to viewport even if an inline width is larger */
  display: block;        /* avoid inline baseline gaps */
  box-sizing: border-box;/* safeguard if padding ever gets added */
  height: 100vh;
  pointer-events: none;
  background: var(--bg-dark);
}

/* Debug: hot-pink outline on every element
* {
  outline: 1px solid hotpink !important;
} 

  /* HEADER SECTION
   ========================================================================== */

   /* / SEARCH: TEMPORARILY HIDE ALL SEARCH UI
   ========================================================================== / */

/* ───── Hide: header inline search container, mobile search toggle button, and the full-screen search overlay ───── */
.site-header .header-search,
.search-toggle,
.search-overlay {
  display: none !important;
}




   /* / SEARCH TOGGLE BUTTON (collapsed search trigger)
   ========================================================================== / */

/* ───── Hidden by default (desktop keeps inline search) ───── */
.search-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem; /* slight space from logo */
  cursor: pointer;
  line-height: 1;
}

/* ───── Icon glyph within search toggle ───── */
.search-toggle__icon {
  font-size: 1.15rem;
  filter: invert(1);           /* keep white on dark header */
  display: inline-block;
  transform: translateY(1px);  /* optical alignment with logo baseline */
}


/* ───── Stack header and sections above canvas ───── */
header,
section {
  position: relative;
  z-index: 3;
}

/* ───── Primary site header and nav controls ───── */
.site-header {
  position: fixed;
  z-index: 1000;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.75rem 1rem 0.25rem;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ───── Centered CTAs within site header ───── */
.site-header .cta-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2rem;
  margin: 0 auto;
  justify-content: flex-start;
}

/* ───── Header CTA button sizing and typography ───── */
.site-header .cta-group .btn.cta-btn {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0rem 1.5rem;
  font-size: 1.35rem;
  white-space: nowrap;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

/* ───── Header animation for navigation entry ───── */
.site-header .cta-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  margin: 0;
  opacity: 0;
  transform: translateY(-10px);
  animation: navEnter 0.5s forwards ease-out;
}
@keyframes navEnter {
  to { opacity: 1; transform: translateY(0); }
}

/* ──── Middle header layout: buttons & search ──── */
.header-middle {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 0 2rem;
  flex-wrap: nowrap;
}

/* ───── Search input styling ───── */
.header-search input {
  padding: 0 1.5rem;
  height: 2rem;
  line-height: 3rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  width: 200px;
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ───── Placeholder color for search input ───── */
.header-search input::placeholder {
  color: rgba(255,255,255,0.7);
}


/* ─── Header icon group layout ─── */
.header-icons {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

/* ─── Individual header icon styling ─── */
.header-icon img {
  width: 1.5rem;
  height: auto;
  filter: invert(1);
  cursor: pointer;
  transition: filter 0.2s ease;
}

/* ─── Hover effect for header icons ─── */
.header-icon:hover img {
  filter: invert(1) brightness(1.3);
}

/* ─── Cart icon sizing ─── */
.header-icons .cart-icon img {
  width: 2.75rem;
}

/* ─── Profile icon sizing ─── */
.header-icons .profile-icon img {
  width: 1.75rem;
}

/* ─── Primary call-to-action button styling ─── */
.btn.cta-btn {
  display: inline-block;
  font-family: 'Bebas Neue', cursive;
  padding: 0.75rem 2rem;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--bg-light);
  --primary: var(--omg-green);
  --secondary: var(--omg-yellow);
  background: linear-gradient(
    90deg,
    var(--primary),
    var(--secondary),
    var(--primary),
    var(--secondary),
    var(--primary)
  );
  background-size: 300% 300%;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.5rem rgba(255,255,255,0.5);
  transition: background-position 3s ease, transform 0.3s;
  margin-bottom: 1rem;
}

/* ─── PULSE ANIMATION ON CTA BUTTON HOVER ─── */
.btn.cta-btn:hover {
  background-position: 100% 0;
  transform: scale(1.05);
  box-shadow: 0 0 1rem rgba(255,255,255,0.7);
}

/* ─── CTA BUTTON COLOR VARIANTS ─── */
.btn.cta-btn.shop-btn   { --primary: var(--omg-green);  --secondary: var(--omg-yellow); }
.btn.cta-btn.events-btn { --primary: var(--omg-yellow); --secondary: var(--omg-orange); }
.btn.cta-btn.past-btn   { --primary: var(--omg-orange); --secondary: var(--omg-red);    }
.btn.cta-btn.email-btn  { --primary: var(--omg-red);    --secondary: var(--omg-blue);   }
.btn.cta-btn.member-btn { --primary: var(--omg-blue);   --secondary: var(--omg-green);  }

/* ──── Site logo image sizing ──── */
.site-logo img {
  height: 7rem;
  width: auto;
}

/* ──── Site logo object sizing ──── */
.site-logo-object {
  height: 7rem;
  width: auto;
  display: block;      /* ensure it obeys dimensions */
  margin: 0 auto;      /* center if needed */
}

  /* HAMBURGER MENU SECTION
   ========================================================================== */

/* ─── Hamburger toggle button styling ─── */
.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  padding: 0;
  margin-left: 1rem;
}

/* ─── Bars inside hamburger menu ─── */
.hamburger span {
  display: block;
  height: 2px;
  background: var(--bg-light);
  border-radius: 1px;
}

/* ─── Hamburger hover color change ─── */
.hamburger:hover span {
  background: var(--omg-yellow);
}


 /* SIDE MENU SECTION (contains hamburger menu)
   ========================================================================== */

/* ───── Drawer header icons container (top-left, horizontal) ───── */
.side-menu .side-menu__icons {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ───── Ensure icons render crisply in drawer ───── */
/* (reuses your existing .header-icon sizing) */
.side-menu .side-menu__icons .header-icon img {
  filter: invert(1);
}

/* ─── Off-screen side menu container ─── */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%); /* park just off-screen without affecting page */
  will-change: transform;
  width: 300px;
  height: 100vh;
  background: var(--bg-dark);
  box-shadow: -2px 0 5px rgba(0,0,0,0.7);
  transition: transform 0.3s ease;
  z-index: 1001;
  padding: 1.5rem;
}

/* ─── Side menu open state ─── */
.side-menu[aria-hidden="false"],
.side-menu.is-open {
  transform: translateX(0);
}


/* ─── Side menu open state ─── */
.side-menu.open {
  right: 0;
}

/* ─── Close button inside side menu ─── */
.side-menu .close-menu {
  background: none;
  border: none;
  color: var(--bg-light);
  font-size: 2rem;
  line-height: 1;
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}

/* ─── Side menu list styling ─── */
.side-menu ul {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

/* ─── Spacing between side menu items ─── */
.side-menu li + li {
  margin-top: 1.5rem;
}

/* ─── Side menu link styling ─── */
.side-menu a {
  font-family: 'Bebas Neue', cursive;
  color: var(--bg-light);
  text-decoration: none;
  font-size: 1.25rem;
  transition: color 0.2s;
}

/* ─── Side menu link hover effect ─── */
.side-menu a:hover {
  color: var(--omg-yellow);
}

/* ========================================================================== 
   SEARCH OVERLAY SECTION
   • Full-screen search UI opened by header search icon
   ========================================================================== */

/* / OVERLAY CONTAINER
   ========================================================================== / */

/* ───── Full-screen dark/blurred backdrop (hidden by default) ───── */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;                 /* above header (1000) and side-menu (1001) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* ───── Open state ───── */
.search-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* / OVERLAY CONTENT
   ========================================================================== / */

/* ───── Close “×” button ───── */
.search-overlay__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--bg-light);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* ───── Centered form wrapper ───── */
.search-overlay__form {
  width: min(800px, 90vw);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* ───── Big input field ───── */
.search-overlay__input {
  flex: 1;
  height: 3.25rem;
  padding: 0 1rem;
  font-size: 1.1rem;
  color: var(--bg-light);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0.5rem;
}

/* ───── Submit button ───── */
.search-overlay__submit {
  height: 3.25rem;
  padding: 0 1rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--bg-light);
  background: rgba(255,255,255,0.14);
  cursor: pointer;
}



 /* FOOTER SECTION
   ========================================================================== */

/* ─── Site footer overall layout ─── */
.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2rem 1rem;
  background: linear-gradient(
    135deg,
    rgba(var(--omg-green-rgb), 0.7) 0%,
    rgba(var(--omg-yellow-rgb), 0.7) 25%,
    rgba(var(--omg-orange-rgb), 0.7) 50%,
    rgba(var(--omg-red-rgb), 0.7) 75%,
    rgba(var(--omg-blue-rgb), 0.7) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── Footer navigation layout ─── */
.site-footer .footer-nav {
  display: flex;
  flex-wrap: nowrap;      /* keep items on a single line at wide viewports */
  gap: 10rem;
  margin-top: 0;
  margin-bottom: 0;
  justify-content: center;
}

/* ─── Footer link styling ─── */
.site-footer .footer-nav a {
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  white-space: nowrap;    /* don’t let “Sign In / Create Account” break into 2 lines */
  font-weight: 500;
  font-size: 1.50rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
}

/* ─── Footer link hover effect ─── */
.site-footer .footer-nav a:hover {
  color: var(--omg-yellow);
  text-decoration: underline;
}


/* FOOTER: No-wrap fit at ≤1179px
   ========================================================================== */
/* ─── At 1179px and below: tighten spacing and nudge font-size so items stay on one line ─── */
@media (max-width: 1179px) {
  /* ───── Footer nav: reduce horizontal gap ───── */
  .site-footer .footer-nav {
    gap: 4rem;             /* down from 10rem to keep everything on one line */
  }

  /* ───── Footer links: slightly smaller for fit (keeps desktop size above 1179px) ───── */
  .site-footer .footer-nav a {
    font-size: 1.25rem;    /* was 1.50rem; adjust just for this breakpoint and below */
  }
}


/* FOOTER: Compact two-row layout at ≤734px
   ========================================================================== */
@media (max-width: 734px) {
  /* ─── Footer navigation: allow wrapping and center items ─── */
  .site-footer .footer-nav {
    flex-wrap: wrap;        /* was nowrap at larger sizes */
    justify-content: center;
    column-gap: 1rem;       /* tighter horizontal spacing */
    row-gap: 0.5rem;        /* small vertical gap between rows */
  }

  /* ─── Footer links: allow normal wrapping & keep readable size ─── */
  .site-footer .footer-nav a {
    white-space: normal;    /* override earlier nowrap so text can wrap */
    font-size: 1.05rem;     /* slightly smaller on phones */
  }
}




/* ───── Responsive header CTA button adjustments ───── */
@media (max-width: 1214px) {
  .site-header .cta-group .btn.cta-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }
}


/*
   RESPONSIVE BREAKPOINTS (toolbox)
   • These define “when” — rules go below
   ==========================================================================
*/
@media (max-width: 320px) { /* small phone */
  /* …styles… */
}

@media (max-width: 375px) { /* phone */
  /* …styles… */
}

@media (max-width: 425px) { /* large phone */
  /* …styles… */
}

/* ───── Tablet ───── */
@media (max-width: 768px) {
  /* tablet-specific adjustments here */
}


/* / HEADER: Collapsed search at ≤1214px
   ========================================================================== / */
@media (max-width: 1214px) {
  /* ───── Show the search icon and hide the inline input ───── */
  .search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ───── Hide the old inline search field in header-middle ───── */
  .site-header .header-search {
    display: none !important;
  }
}

/* ───── Desktop ↑ ───── */
@media (min-width: 1280px) {
  /* desktop-specific adjustments here */
}


/* ========================================================================== 
   HEADER SECTION
   • Mobile-only layout for logo, icons, and hamburger
   ========================================================================== */


/* / MOBILE HEADER LAYOUT (≤1214px)
   ========================================================================== / */
@media (max-width: 1214px) {

  /* ───── Header container: 2-row wrap, row 1 = logo | icons+hamburger; row 2 = header-middle ───── */
  .site-header {
    position: fixed;                  /* keep your fixed header behavior */
    top: 0; left: 0; right: 0;
    display: flex;
    flex-wrap: nowrap;                  /* allows second row for header-middle */
    align-items: center;
    padding: 0.5rem 0.75rem;         /* a touch more right padding so hamburger never clips */
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1000;
  }

  /* ───── Logo (smaller, locked to top-left) ───── */
  .site-header .site-logo {
    order: 1;                         /* logo first on the far left */
    margin: 0;                        /* remove extra spacing */
  }

    /* ───── Search icon immediately after logo ───── */
  .site-header .search-toggle {
    order: 2;                         /* comes right after logo */
    margin-left: 0.5rem;               /* small gap from logo */
  }


  /* ───── Logo image size on mobile ───── */
  .site-header .site-logo img,
  .site-header .site-logo-object {
    height: 4rem;                   /* ↓ smaller logo only on mobile */
    width: auto;
    display: block;
  }

  /* ───── Right-side controls container: icons (cart/account) — hidden on mobile (moved into drawer) ───── */
  .site-header .header-icons {
    display: none !important;         /* hide in the header on mobile */
  }


  /* ───── Hamburger button next to icons on the right ───── */
  .site-header .hamburger {
    order: 5;                         /* appears after the icons */
    position: static;                 /* keep it in the flow, not absolute */
    width: 24px;                      /* keep your original button size */
    height: 18px;
    margin-left: 0.5rem;              /* small gap from icons */
  }
  /* ───── Ensure hamburger bars are visible on dark bg ───── */
  .site-header .hamburger span {
    width: 100%;
    background: var(--bg-light);
  }

  /* ───── Buttons row on mobile: lives in top row between search and right icons; scrolls if overflow ───── */
  .site-header .header-middle {
    order: 3;                         /* after the search icon */
    flex: 1 1 auto;                   /* take available middle space */
    width: auto;                      /* don’t force a new line */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* ───── New: left gap between logo and first button (search is hidden) ───── */
    margin-left: 1rem;


    overflow-y: hidden;
  }

}

/* / HEADER BUTTON SCROLL (≤555px)
   ========================================================================== / */
@media (max-width: 567px) {
  /* Enable horizontal scrolling + visuals only on very small screens */
  .site-header .header-middle {
    overflow-x: auto;                 /* enable horizontal scroll */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;/* smooth iOS scrolling */
    scrollbar-width: thin;            /* show thin scrollbar (Firefox) */
    scrollbar-color: rgba(255,255,255,0.35) transparent;
    
    /* snap behavior on the scroller */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.75rem;
  }

    /* ───── Button strip “pill” only around the buttons (not the full scroller) ───── */
  .site-header .header-middle .cta-group {
    /* do NOT change display/flex rules you already have below;
       we only add the visual chrome so it hugs the buttons */
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9999px;
    background: rgba(255,255,255,0.04);
  }


    /* visible, thin scrollbar (WebKit/Chromium) */
  .site-header .header-middle::-webkit-scrollbar {
    height: 6px;
  }
  .site-header .header-middle::-webkit-scrollbar-track {
    background: transparent;
  }
  .site-header .header-middle::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.35);
    border-radius: 9999px;
  }
  .site-header .header-middle::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
  }


  /* Keep chips on one line; snap is driven by the scroller above */
  .site-header .header-middle .cta-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0;
  }

  /* Each chip snaps cleanly; margin works with scroll-padding */
  .site-header .header-middle .cta-group .btn.cta-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    scroll-margin-inline: 0.75rem;
  }
  /* ───── Chip container behaviors (no wrap, snappy scroll) ───── */
  .site-header .header-middle .cta-group {
    display: flex;
    flex-wrap: nowrap;                /* keep chips on one line */
    gap: 0.5rem;                      /* tighter gaps for mobile */
    margin: 0;                        /* remove any auto margins */
  }


  /* ───── Each chip aligns to snap points ───── */
  .site-header .header-middle .cta-group .btn.cta-btn {
    flex: 0 0 auto;                   /* chips don’t stretch */
    white-space: nowrap;              /* stay as a pill */
    scroll-snap-align: start;         /* snap each chip nicely */
  }


  /* ───── Optional: Slightly tighten header CTAs on tiny screens ───── */
  .site-header .cta-group .btn.cta-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }
}











/* ==========================================================================
   INDEX PAGE ITEMS
   • Styles only used on index.html (hero, featured products, etc.)
   ==========================================================================
*/

/* ───── Neon divider between page slices ───── */
.section-divider {
  position: relative;
  z-index: 1;
  border: none;
  height: 2px;
  margin: 4rem 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--omg-yellow),
    var(--omg-blue),
    transparent
  );
  opacity: 0.8;
}

/* HERO SECTION
   ========================================================================== */

/* ───── Hero section wrapper ───── */
.hero {
  margin-top: 8.5rem;    /* push hero down below fixed header (7rem logo height + 1rem padding) */
  min-height: 60vh;
  padding: 5rem 1rem 3rem;
  /* background: url("/assets/images/herobg.mp4") center/cover no-repeat; */
}

/* / LAYOUT: Hero ↔ Divider ↔ Events
   ========================================================================== */

/* ───── Divider margins when placed right after the hero ───── */
/* Tight, even spacing: 1.5rem below divider, and 0.75rem + 0.75rem above (hero padding + divider top) */
.hero + .section-divider {
  margin: 1.5rem 0 1.5rem;  /* top | sides | bottom */
}

/* ───── Reduce the hero's bottom padding only when followed by the divider ───── */
/* Uses :has — supported in all modern browsers. Keeps everything else unchanged. */
@supports selector(.hero:has(+ .section-divider)) {
  .hero:has(+ .section-divider) {
    padding-bottom: 0.75rem;  /* pairs with the 0.75rem top margin on the divider to total 1.5rem above */
  }
}


/* / HERO: header offset at ≤1214px
   ========================================================================== */
@media (max-width: 1214px) {
  .hero {
    margin-top: 5.5rem;  /* adjust so hero starts right under the shrunken header */
  }
}


/* ───── Hero video container ───── */
.hero {
  position: relative;
  overflow: hidden;
}

/* ───── Hero background video ───── */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ───── Layers above hero video ───── */
.hero > *:not(.hero-video) {
  position: relative;
  z-index: 1;
}

/* ───── Hero headline ───── */
.hero h2 {
  font-family: 'Bebas Neue', cursive;
  font-size: 4rem;
  color: #fff;
  text-align: center;
  position: relative;
  top: -3rem;
}

/* ───── Hero product grid ───── */
.hero .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}


/* ───── Hero carousel grid override for mobile ≤927px ───── */
@media (max-width: 927px) {
  /* ───── Swiper track: use flex (no wrapping) and NO gap so spacing is controlled by Swiper only ───── */
  .hero-carousel .swiper-wrapper.product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;               /* CRITICAL: stops compounding offsets */
  }

  /* ───── Each slide is exactly viewport width (so Swiper math lines up) ───── */
  .hero-carousel .swiper-slide.product-card {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}


/* ───── Fix mobile hero carousel centering drift (≤927px) ───── */
@media (max-width: 927px) {
  .hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hero-carousel .swiper-slide {
    max-width: none !important; /* let Swiper control width */
  }
}


/* ───── Ensure individual swiper slides are centered on mobile (≤927px) ───── */
@media (max-width: 927px) {
  .hero-carousel .swiper-slide {
    display: flex !important;           /* use flex to center content */
    justify-content: center !important; /* center slide content horizontally */
    align-items: center !important;    /* center slide content vertically */
    width: 100% !important;            /* ensure slide takes full width */
  }
  .hero-carousel .swiper-wrapper {
    align-items: center !important;    /* align slides vertically in wrapper */
  }
}

@media (max-width: 927px) {
  /* make each bullet big & white */
  .swiper-pagination .swiper-pagination-bullet {
    background: #ffffff !important;
    width: 1rem !important;
    height: 1rem !important;
    opacity: 1 !important;
    border-radius: 0 !important;        /* remove circle rounding */
    transform: rotate(45deg) !important;/* tilt into a diamond */
    margin: 0 0.7rem !important;  /* horizontal gap between diamonds */
  }
    /* ───── Unselected diamond color ───── */
  .hero-carousel .swiper-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: #ffffff !important;
  }
  /* ensure active bullet is also white */
  .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--omg-red) !important;
  }
    /* ───── Add spacing above pagination bullets ───── */
  .swiper-pagination {
    margin-top: 2rem !important;  /* more gap under slides */
  }
}

@media (max-width: 927px) {
  /* ───── Swiper nav arrows for mobile ───── */
  .hero-carousel .swiper-button-prev,
  .hero-carousel .swiper-button-next {
    color: #fff !important;       /* white arrows */
    --swiper-navigation-size: 24px; /* arrow size */
    top: 50%;                      /* vertically centered */
    transform: translateY(-50%);
  }

  /* Position tweaks so they sit just outside the shirt edges */
  .hero-carousel .swiper-button-prev {
    left: 8px;
  }
  .hero-carousel .swiper-button-next {
    right: 8px;
  }
}

@media (min-width: 928px) {
  /* ───── Hide hero carousel arrows on desktop/tablet ───── */
  .hero-carousel .swiper-button-prev,
  .hero-carousel .swiper-button-next {
    display: none !important;
  }
}




/* ───── Product card wrapper ───── */
.product-card {
  overflow: hidden;
  border-radius: 0.5rem;
}

/* ───── Product image styling ───── */
.product-card img {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  height: auto;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform: scale(1);
}

/* ───── Product image hover effect ───── */
.product-card:hover img {
  transform: translateY(-5px);
}

/* ───── Hero CTA container ───── */
.hero-cta {
  text-align: center;
  margin-top: 6rem;
}

@media (max-width: 927px) {
  /* ───── Reduce space above "SHOP NOW" button on mobile ───── */
  .hero-cta {
    margin-top: 3rem; /* was 6rem — moves it closer to the diamonds */
  }
}


/* ───── Hero CTA button styling ───── */
.btn.cta-btn.hero-cta-btn {
  padding: 1rem 2rem;
  font-size: 2.75rem;
  display: inline-block;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
}

/* ───── Hero CTA button background ───── */
.btn.cta-btn.hero-cta-btn {
  background-image: url("../assets/gifs/giphy8.gif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media (max-width: 927px) {
  /* ───── Add extra gap between shirt bottom and diamond bullets ───── */
  .hero-carousel .swiper-slide {
    padding-bottom: 5rem !important; /* pushes shirt up relative to bullets */
  }
}


/* HERO SECTION
   ========================================================================== */

/* ───── Mobile arrow base behavior + fade logic (applies to all variants) ───── */
@media (max-width: 927px) {
  /* ───── Position & baseline look ───── */
  .hero-carousel .swiper-button-prev,
  .hero-carousel .swiper-button-next {
    top: 50%;
    transform: translateY(-50%);
    --swiper-navigation-size: 28px;   /* base icon size; variants may override */
    color: #fff !important;           /* base white chevrons */
    opacity: 0;                       /* start hidden */
    transition: opacity 200ms ease, transform 120ms ease;
    pointer-events: none;             /* prevent clicks while hidden */
  }

  /* ───── When visible during interaction ───── */
  .hero-carousel.nav-visible .swiper-button-prev,
  .hero-carousel.nav-visible .swiper-button-next {
    opacity: 1;
    pointer-events: auto;
  }

  /* ───── Slight tap/press feedback ───── */
  .hero-carousel .swiper-button-prev:active,
  .hero-carousel .swiper-button-next:active {
    transform: translateY(-50%) scale(0.96);
  }

  /* ───── Keep arrows tucked just inside the edges ───── */
  .hero-carousel .swiper-button-prev { left: 8px; }
  .hero-carousel .swiper-button-next { right: 8px; }
}

/* ───── Hide arrows on desktop/tablet ≥768px (safety) ───── */
@media (min-width: 928px) {
  .hero-carousel .swiper-button-prev,
  .hero-carousel .swiper-button-next {
    display: none !important;
  }
}

/* ───── VARIANT 2: Glow circle (white chevron on dark translucent circle) ───── */
@media (max-width: 927px) {
  /* ───── Circular backplate ───── */
  .hero-carousel.chevrons--glow .swiper-button-prev,
  .hero-carousel.chevrons--glow .swiper-button-next {
    --swiper-navigation-size: 24px;   /* slightly smaller glyph inside circle */
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(194, 21, 21, 0.35);
    box-shadow:
      0 0 10px rgba(223, 10, 10, 0.25),
      0 2px 8px rgba(235, 8, 8, 0.25);
  }
  .hero-carousel.chevrons--glow .swiper-button-prev::after,
  .hero-carousel.chevrons--glow .swiper-button-next::after {
    text-shadow:
      0 0 6px rgba(255,255,255,0.8),
      0 0 14px rgba(255,255,255,0.6);
  }
}



/* WRAPPER FOR EVENTS AND BULK ORDER SECTIONS
   ========================================================================== */

/* ───── Wrapper background for events & bulk order ───── */
.events-bulk-wrapper {
  position: relative;   /* establish a new stacking/formatting context */
  overflow: auto;       /* contain any floated or grid children */
  background: rgba(18, 18, 18, 0.5);
  z-index: 1;
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(16px);
}



/* EVENTS SECTION
   ========================================================================== */


/* ───── Anchor offset so the section clears the sticky header on hash jump ───── */
.index-page .events-bulk-wrapper,
.home-page .events-bulk-wrapper,
.events-bulk-wrapper {
  scroll-margin-top: calc(var(--site-header-height, 72px) + 12px);
}


/* BAD for accessibility: removes all focus outlines on the events block */
#events:focus { outline: none !important; }

/* ───── Section titles (kickers) styling ───── */
.section-title,
.recap-kicker {
  font-family: 'Pacifico', cursive;
  font-size: 2rem;
  font-weight: 400;
  text-transform: none;
  color: #fff;
  margin: 0 0 1.25rem;
  text-decoration: underline;
  text-decoration-color: var(--omg-yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3rem;
}

/* ───── Upcoming vendor event container ───── */
.next-show {
  padding: 4rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ───── Event card layout ───── */
.show-card {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ───── Event poster image ───── */
.show-poster {
  flex: 0 0 320px;
  width: 320px;
  height: 215px;
  object-fit: cover;
  max-width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease;
}

/* ───── Event poster hover effect ───── */
.show-poster:hover {
  transform: translateY(-6px) scale(1.03);
}

/* ───── Event details column ───── */
.show-details {
  flex: 1 1 300px;
  min-width: 0; /* allow the details column to shrink; prevents forced wrapping */
  color: var(--bg-light);
}

/* ───── Event title styling ───── */
.show-title {
  font-family: "Bebas Neue", cursive;
  font-size: 2.5rem;
  margin: 0 0 0.75rem;
  line-height: 1.1;
}

/* ───── Event title emoji styling ───── */
.show-title span {
  font-size: 1.6rem;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
}

/* ───── Event meta text ───── */
.show-meta {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  margin: 0 0 1.5rem;
  line-height: 1.5;
  color: #ddd;
}

/* ───── Event CTA button ───── */
.show-cta {
  display: inline-block;
  background: var(--omg-yellow);
  color: #000;
  font-family: "Bebas Neue", cursive;
  font-size: 1.4rem;
  padding: 0.8rem 2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease, transform 0.15s ease;
}

/* ───── Event CTA hover effect ───── */
.show-cta:hover {
  background: #f5e635;
  transform: translateY(-3px);
}

/* ───── Responsive: stack event card columns ───── */
@media (max-width: 700px) {
  .show-card {
    flex-direction: column;
    text-align: center;
  }
  .show-poster {
    width: 320px;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    transition: transform 0.25s ease;
  }
  .show-details {
    flex: 0 0 auto;
  }
}

/* ───── Past-show recap container ───── */
.recap {
  padding: 4rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ───── Past-show recap card layout ───── */
.recap-card {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ───── Recap slider container ───── */
.recap-slider {
  position: relative;
  flex: 0 0 320px;
  width: 320px;
  height: 215px;
  max-width: 320px;
  overflow: hidden;
  border-radius: 0.5rem;
}

/* ───── Recap slider images (all sizes): fill & center crop ───── */
.recap-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fill the slider viewport */
  object-position: center;/* center the crop to match poster’s feel */
  display: block;         /* remove inline gaps */
}


/* ───── Recap slider images ───── */
.recap-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* ───── Active recap slide ───── */
.recap-slider img.active {
  opacity: 1;
}

/* ───── Recap details column ───── */
.recap-details {
  flex: 1 1 300px;
  min-width: 0; /* critical: lets this flex item get narrower instead of dropping below the image */
  color: var(--bg-light);
}

/* ───── Recap title styling ───── */
.recap-title {
  font: 2.2rem 'Bebas Neue', cursive;
  margin: 0 0 0.75rem;
}

/* ───── Recap meta text ───── */
.recap-meta {
  font: 1rem 'Poppins', sans-serif;
  color: #ddd;
  line-height: 1.5;
}



/* ───── Align detail columns at top ───── */
.show-card,
.recap-card {
  align-items: flex-start;
}

/* ───── Shared title styling for events & recap ───── */
.show-title,
.recap-title {
  font-family: 'Bebas Neue', cursive;
  font-size: 2.5rem;
  line-height: 1.1;
  margin: 0 0 0.75rem;
  color: var(--bg-light);
}

/* ───── Shared meta text styling for events & recap ───── */
.show-meta,
.recap-meta {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  color: #ddd;
}

/* ───── Frosted-glass effect on sections ───── */
.events-block,
.recap {
  position: relative;
  z-index: 1;
}

/* ───── Events block grid layout ───── */
.events-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;  /* make both column items share the tallest row height */
  z-index: 3;
}

/* ───── Email signup container styling ───── */
.recap-signup {
  margin-top: 3rem;
}

/* ───── Email signup input styling ───── */
.recap-signup input {
  display: inline-block;
  width: 100%;       /* make the input fluid inside the shrinking column */
  box-sizing: border-box; /* ensures padding stays inside the 100% width */
  padding: 0.8rem 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 0.5rem;
  max-width: 100%;   /* belt-and-suspenders: never grow wider than its column */
  transition: background 0.2s;
}

/* ───── Email signup input focus state ───── */
.recap-signup input:focus {
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}

/* ───── Signup kicker ───── */
.signup-kicker {
  font-family: 'Poppins', sans-serif; /* match other body text in cards */
  font-style: normal;                 /* remove script/italic look */
  color: #ddd;
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}


/* ───── 1559px: stack card internals & visually narrow cards ───── */
@media (max-width: 1559px) {
  /* Stack internals inside each card (image on top, details below) */
  .show-card,
  .recap-card {
    flex-direction: column;      /* picture here */
    max-width: 720px;            /* cap card width to look less wide (adjust if you like) */
    margin-left: auto;           /* center the capped card in its 50% grid column */
    margin-right: auto;
  }

  /* Make media & details take full width in the stacked layout */
  .show-poster,
  .recap-slider,
  .show-details,
  .recap-details {
    width: 100%;
  }

  /* ───── Next event poster (fixed-height crop to match recap) ───── */
  .show-poster {
    width: 100%;
    height: 215px;               /* fixed viewport height */
    object-fit: cover;           /* crop to fill the viewport */
    flex: 0 0 auto;              /* neutralize the old 320px flex-basis in column layout */
    max-width: 100%;
  }

  /* ───── Recap slider (fixed-height viewport, full-width & centered) ───── */
  .recap-slider {
    width: 100%;
    max-width: 100%;             /* override base: max-width:320px */
    height: 215px;               /* fixed viewport height */
    flex: 0 0 auto;              /* neutralize the old 320px flex-basis */
    margin-left: auto;           /* center inside the stacked card */
    margin-right: auto;
  }


    /* ───── Recap slider images: fill and crop to the viewport ───── */
  .recap-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }


  /* Details column: stop using the 300px basis in stacked mode */
  .show-details,
  .recap-details {
    flex: 1 1 auto;              /* ignore the 300px basis while vertical */
  }

  /* Make the email input fluid in stacked mode so it fits nicely */
  .recap-signup input {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
  }
}


/* ───── Equal-height: make the two columns and their cards fill the row ───── */
.next-show,
.recap {
  height: 100%;   /* each column fills the stretched grid row */
}

.show-card,
.recap-card {
  height: 100%;   /* inner visual card fills its parent column */
}


/* ───── 734px & below: stack sections; Next Event first; cards full-width ───── */
@media (max-width: 734px) {
  /* ───── Events block: one-column layout with explicit order ───── */
  .events-block {
    grid-template-columns: 1fr;         /* stack the two sections */
    grid-template-areas:
      "next"                             /* Next Event first */
      "recap";                           /* Recap second */
      gap: 2rem; /* tighten the vertical gap between stacked sections */
  }

    /* ───── Tighten vertical spacing between Next & Recap wrappers ───── */
  .next-show { padding-bottom: 3rem; } /* was 4rem */
  .recap     { padding-top: 3rem; }    /* was 4rem */


  /* ───── Map grid areas to the two section wrappers ───── */
  .next-show { grid-area: next; }
  .recap     { grid-area: recap; }

    /* ───── Center the section titles on small screens ───── */
  .next-show .section-title,
  .recap .section-title {
    text-align: center;          /* center the heading text */
  }

  /* If your section title has a decorative underline via ::after, center it too */
  .next-show .section-title::after,
  .recap .section-title::after {
    margin-left: auto;
    margin-right: auto;
  }


  /* ───── Cards: use full width; remove the earlier width cap/centering ───── */
  .show-card,
  .recap-card {
    max-width: none;                     /* override the 720px cap from 1559px block */
    width: 100%;                         /* take full column width */
    margin-left: 0;                      /* cancel centering margins */
    margin-right: 0;
  }

  /* ───── Media & details: keep filling the card width in stacked layout ───── */
  .show-poster,
  .recap-slider,
  .show-details,
  .recap-details {
    width: 100%;
  }
}







/* BULK ORDER SECTION
   ========================================================================== */

/* ───── Order block grid layout ───── */
.order-block {
  padding: 4rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}


/* ───── Bulk order section wrapper ───── */
.bulk-order {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;  /* make both column items share the tallest row height */
  z-index: 3;
  padding-top: 3rem;     /* inset both .order-block and .bulk-order__aside from top edge */

}



/* ───── Bulk order card styling ───── */
.bulk-order__card {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ───── Bulk order card: compact width + centered ───── */
/* Constrains the card so it doesn’t span the whole wrapper width */
.bulk-order__card {
  max-width: 760px;   /* adjust: 680–840px as you prefer */
  width: 100%;        /* still fluid on small screens */
  margin: 0 auto;     /* center the card inside .order-block */
}


/* ───── Bulk order title styling ───── */
.bulk-order__title {
  font-family: 'Bebas Neue', cursive;
  font-size: 2.5rem;
  color: var(--bg-light);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  flex: 1 0 100%;   /* occupy an entire row in the flex container */
  text-align: center;
}

/* ───── Bulk order subtitle styling (constrain line length + allow wrapping) ───── */
.bulk-order__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(255,255,255,0.85);

  /* Center the block and limit line length for compact, readable lines */
  max-width: 60ch;        /* ≈60 characters per line; adjust to taste (e.g., 52ch, 68ch) */
  margin: 0 auto 1.5rem;  /* center horizontally and keep same bottom margin */
  text-align: center;

  /* Ensure long words/URLs wrap instead of stretching the line */
  overflow-wrap: anywhere; /* allows breaking long tokens if necessary */
  hyphens: auto;           /* optional soft hyphenation where supported */
  line-height: 1.6;        /* improves readability for multi-line text */
}


/* ───── Bulk order form layout ───── */
.bulk-order__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ───── Bulk order form: center under subtitle ───── */
/* Makes the form occupy a full row in the flex-wrapping card, then centers it */
.bulk-order__card > .bulk-order__form {
  flex: 1 0 100%;   /* full row in .bulk-order__card (which is flex + wrap) */
  max-width: 480px; /* keep the fields compact; tweak to taste (e.g., 440–560px) */
  margin: 0 auto;   /* center the form horizontally */
}

/* Ensure fields stretch to the form's width */
.bulk-order__form input,
.bulk-order__form textarea,
.bulk-order__form .bulk-order__btn {
  width: 100%;
}


/* ───── Bulk order form fields styling ───── */
.bulk-order__form input,
.bulk-order__form textarea {
  padding: 0.75rem 1rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 0.5rem;
  transition: background 0.2s, outline 0.2s;
}

/* ───── Bulk order form fields focus state ───── */
.bulk-order__form input:focus,
.bulk-order__form textarea:focus {
  background: rgba(255,255,255,0.2);
  outline: 2px solid var(--omg-yellow);
}

/* ───── Bulk order submit button styling ───── */
.bulk-order__btn {
  font-family: 'Bebas Neue', cursive;
  font-size: 1.2rem;
  padding: 0.75rem;
  background: var(--omg-yellow);
  color: #000;
  border: none;
  border-radius: 0.5rem;
  text-transform: uppercase;
  transition: transform 0.1s ease;
}

/* ───── Bulk order submit button hover ───── */
.bulk-order__btn:hover {
  transform: translateY(-2px);
}

/* ───── Bulk order logo styling ───── */
/* Scales with viewport, but never exceeds 600px or shrinks below ~220px */
.bulk-order__logo {
  width: clamp(220px, 60vw, 600px); /* min 220px, fluid ~60% viewport, max 600px */
  max-width: 100%;                  /* never overflow its container */
  height: auto;                     /* keep aspect ratio */
  margin-top: 0rem;
}


/* ───── Secret-Store logo button reset ───── */
#secret-store-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ───── Trust badges container styling ───── */
/* Wrap + center so badges don’t overflow on small screens */
.trust-badges {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;               /* allow onto multiple rows */
  justify-content: center;       /* center the row(s) */
  gap: 1rem 2rem;                /* row gap | column gap (tighter than 3rem) */
  max-width: 100%;
}

/* ───── Trust badges images ───── */
/* Scale with viewport but cap sizes; keep aspect ratio */
.trust-badges img {
  width: clamp(90px, 18vw, 180px); /* min ~90px, fluid ~18vw, max 180px */
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;                  /* don’t get squashed by flex wrapping */
}



/* ───── Bulk order aside: prevent horizontal overflow ───── */
/* Lets the aside shrink inside its column and forbids it from exceeding container width */
.bulk-order__aside {
  padding: 4rem 1rem;
  max-width: 1200px;
  margin: 0 auto;

}

/* ───── Aside section wrapper: center bulk-order container ───── */
/* Centers the .bulk-order__aside block inside the section.aside on both axes */
.aside {
  display: grid;       /* create a centering context for its single child */
  place-items: center; /* vertical + horizontal centering */
}

/* If you ever add more children to .aside, this keeps the bulk order block centered */
.aside > .bulk-order__aside {
  justify-self: center;
  align-self: center;
}






/* ───── Bulk-order aside media container ───── */
/* Centers logo + trust badges inside this container, even as it gets taller */
.bulk-order__aside-media {
  display: flex;
  flex-direction: column;
  align-items: center;      /* horizontal centering */
  justify-content: center;  /* vertical centering within this container */
  gap: 1.5rem;              /* breathing room between logo and badges */

  /* Give the container a responsive minimum height so the content sits mid-block.
     Tweak values to taste (first = minimum; middle = fluid; last = ceiling). */
  min-height: clamp(260px, 42vh, 520px);
}




/* ───── If the bulk order layout uses flex: allow both children to shrink ───── */
/* Safe even if the parent is grid; min-width:0 is a no-op there */
.bulk-order__card,
.bulk-order__aside {
  min-width: 0;
}



/* 734PX OVERRIDES FOR BULK ORDER
   ========================================================================== */

/* ───── 734px & below: center the single grid track (late override to win) ───── */
@media (max-width: 734px) {
  /* ───── Bulk order wrapper: 1 centered column ───── */
  .bulk-order {
    grid-template-columns: minmax(0, 680px);  /* one column, up to 680px wide */
    grid-template-areas:
      "card"
      "aside";
    justify-content: center;                   /* center the column itself */
    row-gap: 0.25rem;                             /* keep your stacked spacing */
  }

  /* ───── Re-assert the areas so order stays card then aside ───── */
  .order-block { grid-area: card; }
  .aside       { grid-area: aside; }

    /* ───── 734px & below: reduce top padding inside aside to tighten the visual gap ───── */
  .bulk-order__aside {
    padding-top: 0.25rem;    /* down from 4rem base; brings logo/badges closer to the card */
  }

    /* ───── 734px & below: remove any extra vertical margins that create hidden gap ───── */
  .order-block,
  .aside {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Collapse inner top margins that some themes/components add */
  .bulk-order__card,
  .bulk-order__aside,
  .bulk-order__aside-media {
    margin-top: 0;
  }


}



/* / LAYOUT: Content ↔ Divider ↔ Footer
   ========================================================================== */

/* ───── Divider margins when placed right after <main> (before footer) ───── */
/* Tight, even spacing around the divider separating content from the footer */
main + .section-divider {
  margin: 1.5rem 0 1.5rem;  /* top | sides | bottom */
}

/* ───── Reduce the bottom padding of the last section inside <main> ONLY when a divider follows <main> ───── */
/* We target the last direct child of <main> (your .events-bulk-wrapper) so the space above the divider tightens */
@supports selector(main:has(+ .section-divider)) {
  main:has(+ .section-divider) > :last-child {
    padding-bottom: 0.75rem;  /* harmonizes with the divider’s top margin for a neat, compact gap */
  }
}











/* ==========================================================================
   MERCH PAGE ITEMS
   • Styles only used on merch.html (product grid, catalog cards, badges)
   ==========================================================================
*/

    /* SEARCH
       ========================================================================== */
    /* ───── Hide the clear “✕” and the “N results” readout ───── */
    .filter-search .search-clear,
    .filter-search .search-results-count {
      display: none !important;
    }


/* LAYOUT: Offset <main> below header
   ========================================================================== */

/* ───── Merch page only: define the header offset value ───── */
.merch-page {
  /* Adjust this if the header’s height changes */
  --merch-header-offset: 8.7rem;
}

/* ───── Merch page only: ensure <main> starts below the header ───── */
.merch-page main {
  padding-top: var(--merch-header-offset);
}


/* LAYOUT: Sidebar + Catalog Grid
   ========================================================================== */

/* ───── Use the .merch.content wrapper as the two-column rail ───── */
.merch.content {
  display: grid;

    /* knobs used for visual centering (catalog vs viewport) */
  --filter-rail: 240px;   /* ~sidebar width; adjust by a few px if needed */
  --grid-gap: 2rem;       /* keep in sync with column-gap */

  grid-template-columns: auto minmax(0, 1fr); /* sidebar | content */

  column-gap: var(--grid-gap);

  align-items: start; /* (keep) grid tracks auto-height driven by content */
  
}
  /* place children explicitly */
  /* first child (.filter-container) → col 1; second child (.catalog-container) → col 2 */
.merch.content > .filter-container { grid-column: 1; }
.merch.content > .catalog-container { grid-column: 2; }

/* Sticky preflight (scoped to merch only)
   ========================================================================== */

/* ───── Ensure ancestors of the sticky element don't clip scrolling ───── */
.merch-page,
.merch-page main,
.merch.content {
  overflow: visible; /* don't create a scroll container that kills sticky */
}




/* FILTER SIDEBAR
   ========================================================================== */

/* ───── Controls the overall filter sidebar wrapper ───── */
.filter-container {
  position: relative;
  overflow: visible;
  display: flex;
  max-width: none !important;
  margin: 0 !important;
  padding: 0rem 0rem 2rem 0rem; /* remove top padding so top edges align; keep bottom spacing */
  gap: 2rem;

  position: sticky;
  top: var(--merch-header-offset, 8.7rem); /* fallback ensures top is never invalid */
  align-self: start; /* grid item: don't counteract sticky by forcing stretch */
  z-index: 1;
}


/* ───── Controls the styling and background of the filter sidebar ───── */
.filter-sidebar {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  margin-left: 0 !important;
  flex: 0 0 240px;

  align-self: auto;
  border: 3px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(17,17,17,0.95), rgba(26,26,26,1)) padding-box,
    linear-gradient(90deg, var(--omg-yellow), var(--omg-green), var(--omg-red), var(--omg-orange), var(--omg-blue)) border-box;
  z-index: 1;
}

/* ───── Controls the filter sidebar header text styling ───── */
.filter-sidebar h2 {
  font-family: 'Bebas Neue', cursive;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2rem;
  padding: 0.25rem 0;
  text-align: center;
  margin: 0 0 0.75rem;
}

/* ─── Filter List Base ─── */

/* ───── Controls the base filter list layout ───── */
.filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── Base Checkbox Styling ─── */

/* ───── Controls the default checkbox appearance ───── */
.filter-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--omg-yellow);
}

/* ─── Vertical spacing between Category rows ─── */

/* ───── Controls spacing between category filter rows ───── */
.filter-list--category {
  row-gap: 1.5rem;
}

/* ─── Align “Sweatshirts” under “Shirts” ─── */

/* ───── Aligns the 'sweatshirts' filter under 'Shirts' ───── */
.filter-list--category .filter-item[data-filter="sweatshirts"] {
  align-self: flex-start;
  margin-left: 1.51rem;
}

/* ─── Space out Category checkboxes ─── */

/* ───── Controls spacing between category filter labels ───── */
.filter-list--category .filter-item label {
  display: inline-block;
  margin-right: 2rem;
}
.filter-list--category .filter-item label:last-child {
  margin-right: 0;
}

/* ─── Space out Shop By checkboxes ─── */

/* ───── Controls spacing between shop-by filter labels ───── */
.filter-list--shop-by .filter-item label {
  display: inline-block;
  margin-right: 3rem;
}
.filter-list--shop-by .filter-item label:last-child {
  margin-right: 0;
}

/* ─── Neon divider inside the filter sidebar ─── */

/* ───── Controls neon-styled divider inside the sidebar ───── */
hr.filter-divider {
  position: relative;
  z-index: 1;
  border: none;
  height: 2px;
  margin: 1.5rem 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--omg-yellow),
    var(--omg-green),
    var(--omg-red),
    var(--omg-yellow),
    transparent
  );
  opacity: 0.8;
}

/* ─── Filter Sidebar: Search Field ─── */

/* ───── Controls the search field container layout ───── */
.filter-search {
  display: flex;
  margin-bottom: 1.5rem;
}

/* ───── Controls the search input field styling ───── */
.filter-search input[type="search"] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  border-radius: 4px 0 0 4px;
  background: transparent;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
}

/* ───── Controls placeholder text styling for the search input ───── */
.filter-search input[type="search"]::placeholder {
  color: rgba(255,255,255,0.6);
}

/* ───── Controls the search button styling ───── */
.filter-search button {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

/* ─── Filter Sidebar: Sort Dropdown ─── */

/* ───── Controls layout of the sort dropdown container ───── */
.filter-sort {
  margin-bottom: 1.5rem;
}

/* ───── Controls header styling for sort dropdown ───── */
.filter-sort h2 {
  font-family: 'Bebas Neue', cursive;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

/* ───── Controls the sort dropdown appearance ───── */
.sort-dropdown {
  width: 100%;
  padding: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1em;
  cursor: pointer;
}

/* ───── Controls dropdown option styling ───── */
.sort-dropdown option {
  background-color: rgba(17, 17, 17, 1);
  color: #fff;
}

/* ───── Controls hover and selected state for dropdown options ───── */
.sort-dropdown option:hover,
.sort-dropdown option:checked {
  background-color: var(--omg-yellow);
  color: #000;
}

/* ─── Price slider section ─── */

/* ───── Controls layout of the price slider section ───── */
.filter-price {
  margin-bottom: 1.5rem;
}

/* ───── Controls header styling for the price slider ───── */
.filter-price h2 {
  font-family: 'Bebas Neue', cursive;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

/* ───── Controls layout of slider and value display ───── */
.price-slider-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ───── Controls the price range slider styling ───── */
.price-slider {
  flex: 1;
}

/* ───── Controls the display of the selected price value ───── */
.price-value {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  min-width: 4rem;
  text-align: right;
}

/* ─── Filter Sidebar: “Clear Filters” link ─── */

/* ───── Controls the clear filters link container layout ───── */
.filter-reset {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0;
}

/* ───── Controls styling for the clear filters link ───── */
.filter-reset-link {
  font-family: 'Pacifico', cursive;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

/* ───── Controls hover state for clear filters link ───── */
.filter-reset-link:hover {
  color: var(--omg-yellow);
  text-shadow: 0 0 4px var(--omg-yellow);
}

/* ───── Controls styling for the clear filters “X” button ───── */
.filter-reset-x {
  display: inline-block;
  padding: 0.1rem 0.25rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--omg-red);
  background: transparent;
  font-size: 1em;
  line-height: 1;
  margin-left: 0.25rem;
}

/* ───── Controls hover state for the clear filters “X” button ───── */
.filter-reset-link:hover .filter-reset-x {
  border-color: var(--omg-red);
  color: var(--omg-red);
  text-shadow: 0 0 4px var(--omg-red);
}

/* ─── Neon-glow on filter checkboxes ─── */

/* ───── Controls glow transition on filter checkboxes ───── */
.filter-checkbox {
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}

/* ───── Controls glow effect on hover for filter checkboxes ───── */
.filter-checkbox:hover {
  box-shadow: 0 0 4px var(--omg-yellow);
  color: var(--omg-yellow);
}

/* ───── Controls glow effect on hover for filter item labels ───── */
.filter-item label:hover {
  text-shadow: 0 0 4px var(--omg-yellow);
  color: var(--omg-yellow);
}


/* CATALOG CONTAINER
   ========================================================================== */

/* ───── Controls the catalog page main container layout and effects ───── */
.catalog-container {
  max-width: 1400px;
  width: 100%;
  position: relative;

  /* visually center the catalog in the viewport: shift left by half the rail + half the gap */
  transform: translateX(calc(-0.5 * (var(--filter-rail) + var(--grid-gap))));

  margin: 0 auto 4rem;

  box-sizing: border-box;
  background: rgba(18, 18, 18, 0.5);
  padding: 1rem 2rem;
  border-radius: 8px;
  border: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--omg-yellow) 0%, var(--omg-green) 25%, var(--omg-red) 50%, var(--omg-orange) 75%, var(--omg-blue) 100%) 1;
  z-index: 1;
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(16px);
}

/* ───── Controls the catalog product grid layout ───── */
.catalog-container .catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ───── Controls product image sizing within catalog cards (uniform frame) ───── */
/* Each image fills a fixed-height frame so all cards align across the grid */
.catalog-container .catalog-card img {
  display: block;                 /* removes inline gaps; consistent layout */
  width: 100%;
  height: var(--card-img-h);      /* ← uniform frame height */
  object-fit: contain;            /* no cropping; letterboxes inside frame */
  object-position: center center; /* keep artwork centered */
  max-width: 100%;
  margin-top: 1rem;
  margin-bottom: 4rem;            /* preserves your current space for buttons/price */
}


/* ───── Controls catalog card wrapper styling and gradient border ───── */
.catalog-container .catalog-card {
  --card-img-h: clamp(240px, 26vw, 360px);
  background:
    linear-gradient(135deg, rgba(42,101,221,0.7) 0%, rgba(231,76,24,0.4) 100%);
  width: 100%;
  border-radius: 8px;
  overflow: visible;
  position: relative;
  border-style: solid;
  border-color: transparent;
  border-image: linear-gradient(90deg, transparent, var(--omg-yellow), var(--omg-green), var(--omg-red), var(--omg-yellow), transparent) 1;
}

/* ───── Controls styling for the catalog page header block ───── */
.catalog-header {
  text-align: center;
  top: -1rem;
  margin-bottom: 2rem;
  position: relative;
  left: -2rem;
  width: calc(100% + 4rem);
  display: block;
  box-sizing: border-box;
  background:
    linear-gradient(135deg, rgba(88, 212, 31, 0.7) 25%, rgba(205, 140, 11, 0.7) 100%);
  padding: 1rem 2rem;
  border-width: 0 0 3px 0;
  border-style: solid;
  border-color: transparent;
  border-image: linear-gradient(90deg, transparent, var(--omg-yellow), var(--omg-green), var(--omg-red), var(--omg-yellow), transparent) 1;
}

/* ───── Controls layout for the catalog tagline text block ───── */
.catalog-tagline {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

/* ───── Controls styling for the script-style tagline text ───── */
.catalog-tagline .tagline-script {
  font-family: 'Pacifico', cursive;
  font-size: 1.75rem;
  color: #ffffff;
  display: block;
  margin-bottom: 0.5rem;
}

/* ───── Controls styling for the accent tagline text ───── */
.catalog-tagline .tagline-accent {
  font-family: 'Bebas Neue', cursive;
  font-size: 2.25rem;
  color: #ffdd00;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--omg-orange), 0 0 20px var(--omg-red);
}

/* ── Pagination link styling ── */

/* ───── Controls the pagination container styling ───── */
.catalog-pagination {
  text-align: center;
  z-index: 1;
  position: relative;
  font-family: 'Bebas Neue', cursive;
  font-weight: 700;
  font-size: 1.50rem;
}
.catalog-pagination .page-link {
  display: inline-block;
  margin: 0 0.5rem;
  padding: 0.25rem 0.5rem;
  color: var(--omg-yellow);
  text-decoration: none;
  cursor: pointer;
  font-family: 'Bebas Neue', cursive;
  font-weight: 700;
}
.catalog-pagination .page-link.active {
  font-weight: bold;
  text-decoration: underline;
}

/* ── Float header page counter to the right ── */

/* ───── Controls positioning of the header pagination counter ───── */
.header-pagination {
  position: absolute;
  right: 2rem;
  top: 0.5rem;
}

/* ── Center footer pagination inside the catalog ── */

/* ───── Controls styling for footer pagination inside the catalog ───── */
.catalog-container .footer-pagination {
  text-align: center;
  margin: 0.5rem auto 0;
  width: 100%;
}

/* ── Active Filters styling ── */

/* ───── Controls layout of active filters display container ───── */
.active-filters-container {
  font-size: 0.9rem;
  color: #fff;
  position: absolute;
  left: 2rem;
  top: 0.5rem;
  width: calc(100% - 4rem);
  text-align: left;
}

/* ───── Controls styling for the active filters label ───── */
.active-filters-label {
  font-family: 'Bebas Neue', cursive;
  font-weight: 700;
  font-size: 1.50rem;
  margin-bottom: 0.5rem;
}

/* ───── Controls layout for the active filters list ───── */
.active-filters-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ───── Controls layout for a row of active filter buttons ───── */
.active-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ───── Controls styling for active filter buttons in rows ───── */
.active-filters-row button {
  background: transparent;
  border: none;
  color: var(--omg-yellow);
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* ───── Controls styling for active filter buttons in list ───── */
.active-filters-list button {
  background: transparent;
  border: none;
  color: var(--omg-yellow);
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* ───── Controls hover state for active filter buttons ───── */
.active-filters-list button:hover {
  text-decoration: underline;
}

/* ── Card action buttons at bottom-right ── */

/* ───── Controls layout of action buttons within catalog cards ───── */
.catalog-container .catalog-card .card-actions {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
}

/* ───── Controls styling for the add-to-cart button ───── */
.catalog-container .catalog-card .add-to-cart-btn {
  width: 2.5rem;
  height: auto;
  margin: 0;
  align-self: center;
  cursor: pointer;
  filter: brightness(0) invert(1);
}

/* ───── Controls styling for the buy-now button ───── */
.catalog-container .catalog-card .buy-now-btn {
  border: none;
  background-image: url('../assets/gifs/giphy5.gif');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-family: 'Bebas Neue', cursive;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  -webkit-text-stroke: 1px #000;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 1.4rem;
}

/* ── Product price styling ── */

/* ───── Controls styling for product price display ───── */
.catalog-container .catalog-card .catalog-product-price {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  margin: 0;
  font-family: 'Bebas Neue', cursive;
  font-size: 1.5rem;
}

/* ── Favorite toggles ── */

/* ───── Controls favorite toggle button styling ───── */
.catalog-container .catalog-card .favorite-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #fff;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* ───── Controls default heart icon styling for favorite button ───── */
.catalog-container .catalog-card .favorite-btn::before {
  content: "\2661";
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  font-size: inherit;
  line-height: 1;
}

/* ───── Controls styling for active favorite toggle ───── */
.catalog-container .catalog-card .favorite-btn.active {
  color: #e00;
}
.catalog-container .catalog-card .favorite-btn.active::before {
  content: '♥';
}

/* ───── Controls click state for favorite toggle ───── */
.catalog-container .catalog-card .favorite-btn:active {
  transform: scale(1.2);
}

/* ── Image badges ── */

/* ───── Controls layout for product badges container ───── */
.catalog-container .catalog-card .product-badges {
  position: absolute;
  top: -3rem;
  left: 0;
  margin-left: 0;
  padding-left: 0;
  display: flex;
  gap: 0.5rem;
}

/* ───── Controls styling for 'new' badge image ───── */
.catalog-container .catalog-card .product-badge-img-new {
  width: 4rem;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ───── Controls styling for 'sale' badge image ───── */
.catalog-container .catalog-card .product-badge-img-sale {
  width: 4rem;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ───── Controls styling for 'popular' badge image ───── */
.catalog-container .catalog-card .product-badge-img-popular {
  width: 4rem;
  height: auto;
  object-fit: contain;
  display: block;
}


/* RESPONSIVE: Wide breakpoints
   ========================================================================== */

/* ───── ≤2190px: nudge catalog right & start earlier scaling (no grid gap changes) ───── */
@media (max-width: 2190px) {
  /* CATALOG CONTAINER */
  /* ───── At this width, shift slightly right and cap width to begin shrinking sooner ───── */
  .catalog-container {
    /* Default was: translateX(calc(-0.5 * (var(--filter-rail) + var(--grid-gap)))) */
    transform: translateX(calc(-0.20 * (var(--filter-rail) + var(--grid-gap))));
    max-width: 1280px; /* earlier cap; does not change internal card gap */
  }
}


/* ───── ≤1830px: nudge catalog right & start earlier scaling (no grid gap changes) ───── */
@media (max-width: 1830px) {
  /* CATALOG CONTAINER */
  /* ───── At this width, shift slightly right and cap width to begin shrinking sooner ───── */
  .catalog-container {
    /* Default was: translateX(calc(-0.5 * (var(--filter-rail) + var(--grid-gap)))) */
    transform: translateX(calc(-0.1 * (var(--filter-rail) + var(--grid-gap))));
    max-width: 1280px; /* earlier cap; does not change internal card gap */
  }
}

/* ───── ≤1414px: nudge catalog right & start earlier scaling (no grid gap changes) ───── */
@media (max-width: 1414px) {
  /* CATALOG CONTAINER */
  /* ───── At this width, shift slightly right and cap width to begin shrinking sooner ───── */
  .catalog-container {
    /* Default was: translateX(calc(-0.5 * (var(--filter-rail) + var(--grid-gap)))) */
    transform: translateX(calc(-0.01 * (var(--filter-rail) + var(--grid-gap))));
    max-width: 1280px; /* earlier cap; does not change internal card gap */
  }
}

/* ───── ≤1785px: start fluid scaling of catalog (center/spacing unchanged) ───── */
@media (max-width: 1785px) {
  /* CATALOG CONTAINER
     ========================================================================== */

  /* ───── Begin shrinking right at 1785px without touching position or gaps ───── */
  .catalog-container {
    /*
      EXPLANATION:
      - Your base is: max-width: 1400px; transform: translateX(calc(-0.5 * (var(--filter-rail) + var(--grid-gap))));
      - We KEEP transform untouched ⇒ center stays fixed relative to the viewport + sidebar.
      - We add a FLUID cap so the width begins decreasing immediately at 1785px:
          • At 1785px: 74vw ≈ 1321px → smaller than 1400px ⇒ shrink starts instantly.
          • As the viewport narrows further, the cap reduces smoothly until hitting 1120px,
            then it won’t go smaller (other lower breakpoints can handle phones/tablets).
    */
    max-width: clamp(1120px, 74vw, 1400px);
    /* Do NOT change margins, gaps, or transform — spacing remains preserved */
  }
}


/* ───── ≤1785px: make the filter rail narrower (preserve spacing/position) ───── */
@media (max-width: 1785px) {
  /* MERCH PAGE SCOPE
     ========================================================================== */

  /* ───── At this width, define a slightly smaller rail so centering math stays correct ───── */
  .merch-page {
    --filter-rail: 232px;  /* try 236px (wider) or 228px (narrower) if labels wrap */
  }

  /* CATALOG FILTER SIDEBAR
     ========================================================================== */

  /* ───── Lock the sidebar column to the rail size at this breakpoint ───── */
  .filter-sidebar {
    /* We override any fixed 240px basis and tie it to the variable */
    flex: 0 0 var(--filter-rail);
    width: var(--filter-rail);
  }

    /* SEARCH FIELD IN SIDEBAR
     ========================================================================== */

  /* ───── Make the search input fill the row; hide the icon at this width ───── */
  .filter-sidebar .filter-search {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;       /* no row partner → no need for flex */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .filter-sidebar .filter-search input[type="search"],
  .filter-sidebar input[type="search"],
  .filter-sidebar .search-input,
  .filter-sidebar .search-field {
    width: 100% !important;          /* full width now that icon is gone */
    max-width: 100% !important;
    margin: 0 !important;
    display: block;
    box-sizing: border-box;
  }

  /* ───── Hide any search icon/button inside the search block at this width ───── */
  .filter-sidebar .filter-search :is(button, .search-button, .search-icon, .search-btn, i, svg) {
    display: none !important;
  }


  /* CHECKBOX GROUPS
     ========================================================================== */

  /* ───── Force all checkbox groups to one vertical column, left-aligned ───── */
  /* Common grid containers some themes use for checkbox lists */
  .filter-sidebar .checkbox-grid,
  .filter-sidebar .option-grid,
  .filter-sidebar .options-grid,
  .filter-sidebar .filter-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 0.5rem !important;
    justify-items: start !important;
    align-items: start !important;
    text-align: left !important;
  }

  /* ───── Ensure each checkbox+label sits on its own line and aligns left ───── */
  /* If your markup is <label><input type=checkbox> Text</label> */
  @supports selector(:has(*)) {
    .filter-sidebar label:has(> input[type="checkbox"]) {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      text-align: left;
    }
  }
  /* If your markup is <input type=checkbox> then <label for=...> */
  .filter-sidebar input[type="checkbox"] + label,
  .filter-sidebar label + input[type="checkbox"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
  }

    /* CHECKBOX LEFT-ALIGN RESET (kill list padding/margins causing the indent)
     ========================================================================== */
  .filter-sidebar :is(ul, ol) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none;
  }

  .filter-sidebar :is(li, .form-check, .checkbox, .option-item) {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Ensure the label text itself has no text-indent */
  .filter-sidebar label {
    text-indent: 0 !important;
  }

  /* CHECKBOX ROW SPACING NORMALIZATION
     ========================================================================== */

  /* ───── Remove stray margins that cause one-off bigger gaps (e.g., “Sweatshirts”) ───── */
  .filter-sidebar :is(li, label, .form-check, .checkbox, .option-item) {
    margin: 0 !important;                /* kill uneven top/bottom margins */
    padding-left: 0 !important;          /* stay flush-left */
  }


  @supports selector(:has(*)) {
    .filter-sidebar :is(fieldset, div, ul, ol, section):has(input[type="checkbox"]) {
      display: grid !important;
      grid-template-columns: 1fr !important;
      row-gap: 0.5rem !important;        /* <-- change this to 0.4rem or 0.6rem if you want tighter/looser */
      justify-items: start !important;
    }
  }

    /* CATEGORY (≤1785px): flatten nested <li> so each label is a uniform row
     ========================================================================== */

  /* ───── Make the category list a simple vertical grid of rows ───── */
  .filter-sidebar .filter-list--category {
    display: grid !important;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    row-gap: 0.5rem !important;      /* match other checkbox gaps */
    padding-left: 0 !important;
    margin: 0 !important;
  }

  /* ───── Flatten <li> so its children (<label> rows) become direct grid items ───── */
  .filter-sidebar .filter-list--category > li {
    display: contents;               /* each <label> becomes its own grid row */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ───── Each checkbox row layout: [□][Label] with no extra margins ───── */
  .filter-sidebar .filter-list--category label:has(> input[type="checkbox"]) {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center;
    gap: 0.5rem;
    margin: 0 !important;            /* rely on row-gap for spacing */
    padding: 0 !important;
    text-indent: 0 !important;
  }

  /* ───── Hide accidental <br> that could add a phantom blank row ───── */
  .filter-sidebar .filter-list--category br {
    display: none !important;
  }


  /* CHECKBOX GAP BUGFIX @1785
     ========================================================================== */

  /* ───── Hide any stray <br> that inserts an extra blank line in the list ───── */
  .filter-sidebar :is(fieldset, div, ul, ol, section):has(input[type="checkbox"]) br {
    display: none !important;
  }

  /* ───── If the group is split across multiple lists, remove the top margin between lists ───── */
  .filter-sidebar :is(ul, ol):has(input[type="checkbox"]) + :is(ul, ol):has(input[type="checkbox"]) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* PRICE SLIDER (≤1785px): contain numbers so they can’t overflow the panel
     ========================================================================== */

  @supports selector(:has(*)) {
    /* The parent that DIRECTLY contains the <input type="range"> */
    .filter-sidebar :is(fieldset, section, div):has(> input[type="range"]) {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 8ch); /* slider | numbers */
      align-items: center;
      column-gap: 0.5rem;
      padding-right: 0.5rem;      /* breathing room from the right border */
      box-sizing: border-box;
      overflow: hidden;           /* hard stop: nothing escapes */
      max-width: 100%;
    }

    /* Let the slider actually shrink inside the grid */
    .filter-sidebar :is(fieldset, section, div):has(> input[type="range"]) > input[type="range"] {
      min-width: 0;               /* critical so the grid can shrink */
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Numbers element = the immediate sibling after the range input */
    .filter-sidebar :is(fieldset, section, div):has(> input[type="range"])
      > input[type="range"] + * {
      max-width: 8ch;             /* clamp the column width */
      min-width: 0;
      white-space: nowrap;        /* keep "$0 — $80" on one line */
      overflow: visible;           /* never spill past the panel */
      text-overflow: clip;
      text-align: right;
      padding-left: 0.1rem;       /* space off the slider */
      box-sizing: border-box;
    }
  }

  /* Fallback (no :has support): inline block that still can’t exceed the box */
  .filter-sidebar input[type="range"] + * {
    display: inline-block;
    max-width: 8ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: right;
    margin-left: 0.5rem;
    box-sizing: border-box;
  }




}

/* RESPONSIVE: Desktop (≤1366px)
   ========================================================================== */

/* ───── Prevent price & actions overlap on cards; start shrinking badges ───── */
@media (max-width: 1366px) {

  /* CATALOG CARD FOOTER (price & actions)
     ========================================================================== */

  /* ───── Tighten price text so it doesn’t crash into the actions ───── */
  .catalog-container .catalog-card .catalog-product-price {
    font-size: 1.2rem;        /* was 1.5rem */
    white-space: nowrap;      /* keep “$xx.xx” on one line */
  }

  /* ───── Reduce spacing between action buttons slightly ───── */
  .catalog-container .catalog-card .card-actions {
    gap: 0.35rem;             /* was 0.5rem */
  }

  /* ───── Make the cart icon button a bit smaller ───── */
  .catalog-container .catalog-card .add-to-cart-btn {
    width: 2.1rem;            /* was 2.5rem */
    height: auto;
  }

  /* ───── Make the “BUY NOW” button more compact ───── */
  .catalog-container .catalog-card .buy-now-btn {
    font-size: 1.1rem;        /* was 1.4rem */
    padding: 0.35rem 0.55rem; /* was 0.5rem 0.75rem */
  }


  /* PRODUCT BADGES (New / Popular / Sale)
     ========================================================================== */

  /* ───── Nudge the badge strip and tighten gaps ───── */
  .catalog-container .catalog-card .product-badges {
    top: -2.5rem;             /* was -3rem */
    gap: 0.4rem;              /* was 0.5rem */
  }

  /* ───── Start shrinking each badge image at this width ───── */
  .catalog-container .catalog-card .product-badge-img-new,
  .catalog-container .catalog-card .product-badge-img-sale,
  .catalog-container .catalog-card .product-badge-img-popular {
    width: 3.25rem;           /* was 4rem */
    height: auto;
  }

}


/* RESPONSIVE: Desktop (≤1240px)
   ========================================================================== */

/* ───── Drop the filter sidebar; expand & center catalog container ───── */
@media (max-width: 1240px) {

  /* LAYOUT: turn off the filter rail offset since there is no sidebar */
  .merch-page {
    --filter-rail: 0px;  /* cancels any centering nudge used for the sidebar */
  }

    /* LAYOUT: Sidebar + Catalog Grid (collapse rail)
     ========================================================================== */

  /* ───── Collapse the two-column rail to a single column and kill the ghost gap ───── */
  .merch.content {
    grid-template-columns: minmax(0, 1fr) !important;  /* one column only */
    column-gap: 0 !important;                          /* no leftover gutter */
  }


  /* FILTER SIDEBAR
     ========================================================================== */

  /* ───── Hide the entire sidebar on this breakpoint ───── */
  .filter-sidebar {
    display: none !important;
  }

  /* ───── If your markup wraps the sidebar with this wrapper, hide it too (harmless if unused) ───── */
  .filter-container {
    display: none !important;
  }

  /* CATALOG CONTAINER
     ========================================================================== */

       /* ───── Force the catalog to occupy the only column (beats the base “column 2” rule) ───── */
  .merch.content > .catalog-container {
    grid-column: 1 / -1 !important;
  }


  /* ───── Truly center the catalog; span all columns; neutralize any left nudge ───── */
  .catalog-container {
    /* If a local rail offset was defined, kill it here */
    --filter-rail: 0px !important;

    /* Centering */
    margin: 0 auto !important;      /* horizontal centering */
    width: 100%;

    /* If parent is a grid with a ghost left column, this makes the catalog span them all */
    grid-column: 1 / -1;

    /* Neutralize any previous offsets */
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

    /* CATALOG HEADER (≤1240px)
     ========================================================================== */

  /* ───── Hide the Active Filters label + container when sidebar is removed ───── */
  .merch-page .active-filters-container,
  .merch-page .active-filters-label {
    display: none !important;
  }

  /* CATALOG HEADER (≤1240px)
     ========================================================================== */

  /* ───── Hide the Active Filters label + container when sidebar is removed ───── */
  /* (keep these if you already added them; safe to keep duplicates once) */
  .merch-page .active-filters-container,
  .merch-page .active-filters-label {
    display: none !important;
  }

  /* ───── Anchor for absolute tagline parts ───── */
  .merch-page .catalog-header { 
    position: relative;                 /* anchor for absolute children */
    /* Adjust these if you want to fine-tune placement later */
    --tagline-left: 2rem;               /* matches former Active Filters inset */
    --tagline-top: 0.5rem;              /* vertical offset inside green bar   */
    --tagline-gap-line: 1.8em;          /* distance from script line to accent */

        /* Reserve header height (since tagline is absolute and doesn’t add height) */
    min-height: clamp(64px, 8vw, 96px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }


  /* CATALOG HEADER (≤1240px)
     ========================================================================== */

  /* ───── Fine-tune variables for tagline placement and spacing ───── */
  .merch-page .catalog-header {
    /* existing vars from earlier… */
    --tagline-left: 0.25rem;       /* nudge a bit LEFT from 2rem per your note */
    --tagline-top: 0.5rem;
    --tagline-gap-line: 1.8em;

    /* new vars for inline spacing/baseline alignment */
    --accent-inline-gap: 0.65rem;  /* space between hyphen and “OH MY GOD” */
    --accent-baseline-y: 0em;      /* tweak to -0.05em if accent sits low/high */
  }

  /* ───── Absolutely position the WRAPPER, not the children ───── */
  .merch-page .catalog-header .catalog-tagline {
    position: absolute !important;
    left: var(--tagline-left) !important;
    top: var(--tagline-top) !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
    display: inline-flex;          /* children flow side-by-side */
    align-items: baseline;         /* align script & accent on text baseline */
    white-space: nowrap;           /* keep on one line */
    width: auto !important;
    max-width: none !important;
  }

  /* ───── Children now flow inline; keep them static and tidy ───── */
  .merch-page .catalog-header .tagline-script {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    font-size: clamp(20px, 2vw, 28px) !important;  /* smaller responsive size */
  }

  .merch-page .catalog-header .tagline-accent {
    position: static !important;
    margin: 0 0 0 var(--accent-inline-gap) !important; /* gap after the hyphen */
    padding: 0 !important;
    white-space: nowrap;
    transform: translateY(var(--accent-baseline-y));    /* micro baseline nudge */
    font-size: clamp(22px, 2vw, 30px) !important;  /* smaller responsive size */
  }





}


/* RESPONSIVE: Tablet (≤975px)
   ========================================================================== */

/* ───── Exterior price (left) & cart (right) under the card; eliminate overlap ───── */
@media (max-width: 975px) {

    /* ───── Slightly shorter image frame so grid stays tidy on tablets/phones ───── */
  .catalog-container .catalog-card { 
    --card-img-h: clamp(180px, 52vw, 260px);
  }

    /* ───── Tighten space between image and the Buy Now area ───── */
  .catalog-container .catalog-card img {
    margin-top: 0.5rem;             /* was 1rem on desktop */
    margin-bottom: 0.75rem !important; /* was 4rem; remove the big yellow gap */
  }

  /* CATALOG CARD
     ========================================================================== */

  /* ───── Allow elements to hang outside; reserve space under each card ───── */
  .catalog-container .catalog-card {
    position: relative;      /* anchor for absolute children */
    overflow: visible;       /* show the under-hang */
    margin-bottom: 4rem;     /* more space for the outside price/cart */
  }

  /* FOOTER ELEMENTS (price & actions)
     ========================================================================== */

  /* ───── Price: hang below the card, left-aligned ───── */
  .catalog-container .catalog-card .catalog-product-price {
    position: absolute !important;
    bottom: -1.75rem;     /* distance below the card edge */
    left: 0;
    margin: 0;            /* reset any previous margins */
    font-size: 1.25rem;   /* readable at this width */
    line-height: 1;       /* keeps it compact */
    transform: none !important;
  }


  /* ───── Actions row lives inside the card; true center (clear inherited offsets) ───── */
  .catalog-container .catalog-card .card-actions {
    position: relative !important;   /* own stacking context */
    z-index: 5;
    display: flex !important;
    width: 100% !important;          /* span the card width */
    justify-content: center !important;
    align-items: center;
    /* Clear any base absolute offsets so it doesn’t shift */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin-bottom: 0.65rem;
    gap: 0.35rem;
  }




  /* ───── Cart icon: hang outside bottom-right of the card ───── */
  .catalog-container .catalog-card .add-to-cart-btn {
    position: absolute !important;  /* positions against .catalog-card (relative) */
    bottom: -3.25rem;               /* outside, aligned with card bottom edge */
    right: 0;
    width: 2.5rem;                 /* larger per your note */
    height: auto;
    margin: 0 !important;           /* remove the purple margin box */
    padding: 0 !important;          /* guard against inner spacing */
    display: block;                  /* kill any inline-image whitespace */
    line-height: 0;                  /* prevent baseline gap on some engines */
    right: -0.1rem;                 /* tiny nudge to sit exactly on the edge */
  }


  /* ───── Buy Now: bigger, not squished, sits above image ───── */
  .catalog-container .catalog-card .buy-now-btn {
    position: relative;            /* allow z-index on the button if needed */
    z-index: 6;                    /* above any image overlays */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem !important;   /* force larger label at this width */
    padding: 0.65rem 1.1rem !important; /* roomier button box */
    line-height: 1.2 !important;
    min-width: 10ch !important;      /* prevents collapse */
  }




  /* Optional: if you keep any other action buttons, make them compact too */
  .catalog-container .catalog-card .card-actions > * {
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
  }

    /* PRODUCT BADGES (New / Popular / Sale)
     ========================================================================== */

  /* ───── Scale badges down further and nudge the rail ───── */
  .catalog-container .catalog-card .product-badges {
    top: -2.1rem;   /* was -2.5rem at larger sizes */
    gap: 0.35rem;   /* was 0.4–0.5rem */
  }

  .catalog-container .catalog-card .product-badge-img-new,
  .catalog-container .catalog-card .product-badge-img-sale,
  .catalog-container .catalog-card .product-badge-img-popular {
    width: 2.6rem;  /* was 3.25rem at 1366 */
    height: auto;
  }


  /* CATALOG GRID (≤975px)
     ========================================================================== */

  /* ───── Force 2 cards per row on tablet/phone; out-specific any earlier rule ───── */
  .merch-page .catalog-container .catalog-grid,
  .merch-page .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* CATALOG GRID ORPHAN FIX (≤975px)
     ========================================================================== */

  /* ───── If there’s an odd number of cards, make the last one full width ───── */
  .merch-page .catalog-grid > .catalog-card:nth-last-child(1):nth-child(odd),
  .merch-page .catalog-container .catalog-grid > .catalog-card:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1;         /* CSS Grid: span both columns */
    width: 100%;                 /* Flexbox fallback protection */
    flex-basis: 100%;            /* If your grid were flex, this makes it full row */
  }


  
  /* CATALOG HEADER (≤765px)
     ========================================================================== */

     @media (max-width: 765px) {

  /* ───── Fine-tune variables for tagline placement and spacing ───── */
  .merch-page .catalog-header {
    /* existing vars from earlier… */
    --tagline-top: -2.5rem;
    --tagline-gap-line: 1.8em;

    /* new vars for inline spacing/baseline alignment */
    --accent-inline-gap: 0.65rem;  /* space between hyphen and “OH MY GOD” */
    --accent-baseline-y: 0em;      /* tweak to -0.05em if accent sits low/high */
  }

  /* ───── Absolutely position the WRAPPER, not the children ───── */
  .merch-page .catalog-header .catalog-tagline {
    position: absolute !important;
    top: var(--tagline-top) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;  /* true horizontal centering */
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
    display: inline-flex;          /* children flow side-by-side */
    align-items: baseline;         /* align script & accent on text baseline */
    white-space: nowrap;           /* keep on one line */
    width: auto !important;
    max-width: none !important;
  }

  /* ───── Children now flow inline; keep them static and tidy ───── */
  .merch-page .catalog-header .tagline-script {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    font-size: clamp(20px, 2vw, 28px) !important;  /* smaller responsive size */
  }

  .merch-page .catalog-header .tagline-accent {
    position: static !important;
    margin: 0 0 0 var(--accent-inline-gap) !important; /* gap after the hyphen */
    padding: 0 !important;
    white-space: nowrap;
    transform: translateY(var(--accent-baseline-y));    /* micro baseline nudge */
    font-size: clamp(22px, 2vw, 30px) !important;  /* smaller responsive size */
  }

    /* Cover common pagination class names used in the catalog header
     — only one of these will match in your DOM */
.header-pagination {
    position: absolute !important;   /* anchor to .catalog-header (relative) */
    left: 50% !important;            /* center horizontally */
    right: auto !important;          /* cancel any right-based positioning */
    transform: translateX(-50%) !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 3;                      /* keep above the header background */
  }

}




  /* RESPONSIVE: Mobile (≤600px)
   ========================================================================== */

/* ───── CATALOG GRID SPACING (≤600px): reduce gaps between cards ───── */
@media (max-width: 600px) {

  /* Tighten the inter-card spacing on both axes */
  .merch-page .catalog-container .catalog-grid,
  .merch-page .catalog-grid {
    /* Use both longhand + shorthand to out-win any earlier gap rules */
    column-gap: 0.75rem !important;   /* horizontal space between columns */
    row-gap: 0.75rem !important;      /* vertical space between rows */
    gap: 0.75rem !important;          /* safety net for engines honoring shorthand last */
  }
}


/* RESPONSIVE: Small Mobile (≤515px)
   ========================================================================== */

/* ───── Switch to 1 card per row on small phones ───── */
@media (max-width: 515px) {

  /* CATALOG GRID (≤515px)
     ========================================================================== */

  /* Force a single column; out-specific earlier rules and win the cascade */
  .merch-page .catalog-container .catalog-grid,
  .merch-page .catalog-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ORPHAN FIX RESET (≤515px)
     ========================================================================== */


  

  /* Neutralize the "last card spans both columns" rule from ≤975px.
     On a 1-column grid it’s unnecessary; these lines prevent any odd side-effects. */
  .merch-page .catalog-grid > .catalog-card:nth-last-child(1):nth-child(odd),
  .merch-page .catalog-container .catalog-grid > .catalog-card:nth-last-child(1):nth-child(odd) {
    grid-column: auto !important;   /* no forced spanning on 1-col */
    width: 100% !important;         /* keep full width */
    flex-basis: 100% !important;    /* if a flex fallback ever applies */
  }





    /* CATALOG GRID SIDE BREATHING ROOM (≤515px)
     ========================================================================== */

  /* ───── Pull cards in from the edges so they don’t feel “fat” ───── */
  .merch-page .catalog-container .catalog-grid,
  .merch-page .catalog-grid {
    padding-left: clamp(2px, 3vw, 10px) !important;
    padding-right: clamp(2px, 3vw, 10px) !important;
  }

  /* CATALOG CARD WIDTH (≤515px): center and slim the cards
     ========================================================================== */

  .merch-page .catalog-container .catalog-grid > .catalog-card,
  .merch-page .catalog-grid > .catalog-card {
    width: min(80%, 420px) !important;  /* ← make card narrower; tweak 88% to taste */
    justify-self: center !important;    /* grid: center in the column */
    margin-left: auto !important;       /* flex fallback: center */
    margin-right: auto !important;
  }
}



@media (max-width: 410px) {

    /* ───── Absolutely position the WRAPPER, not the children ───── */
  .merch-page .catalog-header .catalog-tagline {
    position: absolute !important;
    top: var(--tagline-top) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;  /* true horizontal centering */
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
    display: inline-flex;          /* children flow side-by-side */
    align-items: baseline;         /* align script & accent on text baseline */
    white-space: nowrap;           /* keep on one line */
    width: auto !important;
    max-width: none !important;
  }

  /* ───── Children now flow inline; keep them static and tidy ───── */
  .merch-page .catalog-header .tagline-script {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    font-size: clamp(16px, 2vw, 24px) !important;  /* smaller responsive size */
  }

  .merch-page .catalog-header .tagline-accent {
    position: static !important;
    margin: 0 0 0 var(--accent-inline-gap) !important; /* gap after the hyphen */
    padding: 0 !important;
    white-space: nowrap;
    transform: translateY(var(--accent-baseline-y));    /* micro baseline nudge */
    font-size: clamp(18px, 2vw, 26px) !important;  /* smaller responsive size */
  }

}

}





/* ==========================================================================
   PRODUCT PAGE ITEMS
   • Styles only used on product.html (gallery, info, options, etc.)
   ========================================================================== */

/* LAYOUT & HEADER OFFSET
   ========================================================================== */

/* ───── Constrain styles to product page only ───── */
.product-page {
  /* Adjust this if the fixed header height changes site-wide */
  --product-header-offset: 8.8rem;

  /* Color tokens used inside this page */
  --pp-text: #111;
  --pp-subtle: #666;
  --pp-border: rgba(0,0,0,0.12);
  --pp-border-strong: rgba(0,0,0,0.18);
  --pp-bg: #fff;
  --pp-chip: #f5f5f5;
  --pp-accent: #111; /* buttons */
  --pp-accent-contrast: #fff;
  --pp-sale: #c1252d;
}

/* ───── Offset the product wrapper below the fixed header ───── */
.product-page {
  padding-top: var(--product-header-offset);
}


.product-page .product {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
  color: var(--pp-text);
}

/* BREADCRUMBS
   ========================================================================== */

/* ───── Breadcrumbs wrapper ───── */
.product-page .breadcrumbs {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-size: .9rem;
  color: var(--pp-subtle);
  margin-bottom: 1rem;
}

.product-page .breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.product-page .breadcrumbs a:hover { border-bottom-color: currentColor; }

.product-page .breadcrumbs__current { color: var(--pp-text); }

/* GALLERY
   ========================================================================== */

/* ───── Layout: two columns on wide screens ───── */
.product-page .product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

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

/* ───── Main image box (let image control height; no cropping) ───── */
.product-page .product-media {
  position: relative;
  background: var(--pp-chip);
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  overflow: hidden;         /* keeps rounded corners on the image */
  padding: .75rem;          /* keeps the hem/logo off the edge */
  /* Removed fixed square and grid centering to avoid cropping */
}


/* ───── Main product image: fill width, auto height, no crop ───── */
.product-page .product-media__img {
  display: block;   /* removes baseline gap that can look like clipping */
  width: 100%;
  height: auto;     /* let height grow so the whole tee fits */
  object-fit: contain; /* harmless fallback */
}


/* ───── Thumbnails row ───── */
.product-page .product-thumbs {
  margin-top: .75rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
}

.product-page .product-thumbs .thumb {
  border: 1px solid var(--pp-border);
  background: var(--pp-bg);
  border-radius: 10px;
  padding: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.product-page .product-thumbs .thumb.is-active {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.product-page .product-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* INFO PANEL
   ========================================================================== */

/* ───── Title & meta ───── */
.product-page .product-title {
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  letter-spacing: .5px;
  margin: 0 0 .25rem;
}

.product-page .product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  font-size: .95rem;
  color: var(--pp-subtle);
  margin-bottom: .75rem;
  align-items: center;
}

.product-page .product-stock {
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--pp-border);
}
.product-page .product-stock--in  { color: #1a7f37; border-color: #1a7f37; }
.product-page .product-stock--low { color: #b76e00; border-color: #b76e00; }
.product-page .product-stock--out { color: #b91c1c; border-color: #b91c1c; }

/* ───── Price ───── */
.product-page .product-price {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  margin: .5rem 0 1rem;
}

.product-page .price-current {
  font-size: 1.65rem;
  font-weight: 700;
}
.product-page .price-compare {
  font-size: 1.05rem;
  color: var(--pp-subtle);
  text-decoration: line-through;
}

/* ───── Description ───── */
.product-page .product-desc {
  color: #2b2b2b;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* OPTIONS: COLORS
   ========================================================================== */

/* ───── Option block wrapper ───── */
.product-page .product-option {
  margin: 1rem 0;
}

.product-page .option-label {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

/* ───── Swatches ───── */
.product-page .swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.product-page .swatch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
}

.product-page .swatch__radio { position: absolute; opacity: 0; pointer-events: none; }

.product-page .swatch__chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--pp-border-strong);
  background: var(--swatch, #ddd);
  box-shadow: 0 0 0 2px #fff inset;
}
.product-page .swatch__label { font-size: .95rem; color: var(--pp-text); }

/* OPTIONS: SIZES
   ========================================================================== */

.product-page .size-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.product-page .size {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.product-page .size__radio { position: absolute; opacity: 0; pointer-events: none; }

.product-page .size__chip {
  min-width: 44px;
  text-align: center;
  padding: .45rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--pp-border-strong);
  background: var(--pp-bg);
  font-weight: 600;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}


.product-page .size input:checked + .size__chip {
  background: var(--pp-accent);
  color: var(--pp-accent-contrast);
  border-color: var(--pp-accent);
}


.product-page .size.is-oos .size__chip {
  color: #aaa; border-style: dashed; position: relative;
}
.product-page .size.is-oos .size__chip::after {
  content: "×"; position: absolute; right: 6px; top: 2px; font-weight: 700; color: #bbb;
}

.product-page .size-guide-btn {
  font: inherit;
  font-weight: 500;
  border: none;
  background: none;
  color: #0f62fe;
  cursor: pointer;
  padding: 0;
}

.product-page .size-note {
  margin-top: .35rem;
  font-size: .9rem;
  color: var(--pp-subtle);
}

/* PURCHASE ROW
   ========================================================================== */

/* ───── Quantity control ───── */
.product-page .purchase-row {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: .75rem;
  align-items: center;
  margin: 1.25rem 0 1.75rem;
}

@media (max-width: 600px) {
  .product-page .purchase-row { grid-template-columns: 1fr; }
}

.product-page .qty {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  grid-auto-flow: column;          /* keep all three in the first row */
  align-items: stretch;
  border: 1px solid var(--pp-border-strong);
  border-radius: 10px;
  overflow: hidden;
  height: 44px;
}
.product-page .qty__btn {
  display: grid;                    /* center the glyph */
  place-items: center;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--pp-chip);
  cursor: pointer;
  font-size: 1.25rem;
  color: #000;                      /* visible minus/plus */
}

.product-page .qty__input {
  width: 100%;                      /* fill the middle column */
  min-width: 0;                     /* allow shrinking inside grid */
  border: none;
  padding: 0;                       /* no extra offset */
  text-align: center;               /* center the number */
  font-size: 1rem;
  outline: none;
  background: #1f1f24;              /* dark center */
  color: #fff;
  box-sizing: border-box;
}

/* Force each child into a specific grid column */
.product-page .qty__btn--down { grid-column: 1; }
.product-page .qty__input     { grid-column: 2; }
.product-page .qty__btn--up   { grid-column: 3; }


/* Hide native spinners for a cleaner look */
.product-page .qty__input::-webkit-outer-spin-button,
.product-page .qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.product-page .qty__input { appearance: textfield; }

/* Firefox fallback for older versions (may show a warning; safe to keep) */
@supports (-moz-appearance: none) {
  .product-page .qty__input { -moz-appearance: textfield; }
}




/* ───── Buttons ───── */
.product-page .btn {
  display: inline-block;
  text-align: center;
  border: 1px solid #000;
  background: var(--pp-accent);
  color: var(--pp-accent-contrast);
  padding: .8rem 1rem;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.product-page .btn:hover { filter: brightness(0.9); }
.product-page .btn:active { transform: translateY(1px); }
.product-page .add-to-cart.is-added { background: #16a34a; border-color: #16a34a; }

/* ACCORDIONS
   ========================================================================== */

.product-page .product-accordions {
  border-top: 1px solid var(--pp-border);
  margin-top: 1.25rem;
}

.product-page .product-accordion {
  border-bottom: 1px solid var(--pp-border);
  padding: .25rem 0;
}
.product-page .product-accordion > summary {
  cursor: pointer;
  padding: .75rem 0;
  list-style: none;
  font-weight: 600;
  display: flex;           /* lay out text + chevron */
  align-items: center;
  gap: .5rem;
}
/* ───── Remove native marker (Chrome/Safari) ───── */
.product-page .product-accordion > summary::-webkit-details-marker { display: none; }

/* ───── Hover affordance (underline) ───── */
.product-page .product-accordion > summary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ───── Keyboard focus (accessible) ───── */
.product-page .product-accordion > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ───── Chevron indicator (rotates when open) ───── */
.product-page .product-accordion > summary::after {
  content: "▾";                 /* simple caret; no icon asset needed */
  margin-left: auto;            /* push to the far right */
  font-size: 1rem;
  line-height: 1;
  transition: transform .18s ease;
}
.product-page .product-accordion[open] > summary::after {
  transform: rotate(180deg);    /* flips to point up when expanded */
}

.product-page .product-accordion__content {
  padding: 0 0 .9rem;
  color: #2b2b2b;
}
.product-page .product-accordion[open] > summary { color: var(--pp-text); }

/* RECOMMENDATIONS
   ========================================================================== */

.product-page .recs { margin-top: 2.25rem; }
.product-page .recs__title {
  font-size: 1.35rem; margin: 0 0 .75rem; font-weight: 700;
}
.product-page .recs__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr);
  gap: .75rem; overflow-x: auto; padding-bottom: .25rem;
}
.product-page .recs__card {
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: var(--pp-bg);
  text-decoration: none;
  color: inherit;
  display: grid; gap: .5rem; padding: .5rem;
}
/* ───── Recommendation image: show entire tee, no cropping ───── */
.product-page .recs__card img {
  display: block;                  /* removes inline gap */
  width: 100%;
  aspect-ratio: 1 / 1;             /* keep square tiles */
  object-fit: contain;             /* fit whole image inside the square */
  object-position: center;
  padding: .5rem;                  /* breathing room so hems don’t touch */
  background: transparent;
  border-radius: 8px;
}

.product-page .recs__card span { font-weight: 600; font-size: .95rem; }

/* SIZE GUIDE DIALOG
   ========================================================================== */

/* ───── Native dialog styling ───── */
.product-page .size-guide {
  border: none; padding: 0; background: transparent;
}
.product-page .size-guide::backdrop { background: rgba(0,0,0,0.45); }

.product-page .size-guide__card {
  background: var(--pp-bg);
  color: var(--pp-text);
  border-radius: 12px;
  border: 1px solid var(--pp-border);
  max-width: 560px;
  margin: 10vh auto 0;
  padding: 1rem 1.25rem 1.25rem;
}

.product-page .size-guide__title { margin: 0 0 .25rem; }
.product-page .size-guide__copy { color: var(--pp-subtle); margin: 0 0 .75rem; }
.product-page .size-guide__table { width: 100%; border-collapse: collapse; }
.product-page .size-guide__table th,
.product-page .size-guide__table td {
  border: 1px solid var(--pp-border);
  padding: .5rem .65rem;
  text-align: left;
}
.product-page .size-guide__close {
  margin-top: .85rem;
  padding: .6rem 1rem;
  border-radius: 8px;
  border: 1px solid #000;
  background: var(--pp-accent);
  color: var(--pp-accent-contrast);
  cursor: pointer;
}

/* ───── Fallback (no <dialog> support) ───── */
.product-page .size-guide--fallback {
  position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,0.45); z-index: 60;
}
.product-page .size-guide--fallback.is-open { display: grid; }

/* ACCESSIBILITY
   ========================================================================== */

/* ───── Hide-only-for-visual users (screen-reader text) ───── */
.product-page .sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* COLOR OVERRIDES (TEMP): switch requested product text to white
   ========================================================================== */

/* ───── Product title ───── */
.product-page .product-title {
  color: #fff;
}

/* ───── SKU/meta line ───── */
.product-page .product-meta,
.product-page .product-sku,
.product-page .product-sku__value {
  color: #fff;
}

/* ───── Price (current + compare-at) ───── */
.product-page .product-price .price-current,
.product-page .product-price .price-compare {
  color: #fff;
}

/* ───── Short description ───── */
.product-page .product-desc {
  color: #fff;
}

/* ───── Size availability note (“6 available”) ───── */
.product-page .size-note {
  color: #fff;
}

/* ───── Accordion titles + content (Details / Shipping & Returns / Care) ───── */
.product-page .product-accordion > summary,
.product-page .product-accordion[open] > summary,
.product-page .product-accordion__content {
  color: #fff;
}

/* ───── “You may also like” heading ───── */
.product-page .recs__title {
  color: #fff;
}

/* ───── Breadcrumbs (Home › Merch › Product) ───── */
.product-page .breadcrumbs,
.product-page .breadcrumbs a,
.product-page .breadcrumbs__current {
  color: #fff;
}
.product-page .breadcrumbs a:hover { border-bottom-color: #fff; }

/* ───── Size label (keep the “Size guide” link blue) ───── */
.product-page .product-option--sizes .option-label {
  color: #fff;
}
.product-page .product-option--sizes .option-label .size-guide-btn {
  color: #0f62fe;  /* preserves existing link color */
}

/* TEMP: Hide the Color option block until client confirms usage
   ========================================================================== */
.product-page .product-option--colors {
  display: none !important;
}


/* GALLERY (TEMP)
   ========================================================================== */

/* ───── Hide the thumbnail strip under the main product image ───── */
.product-page .product-thumbs {
  display: none !important;
}

/* ───── Hide “SKU: …” in the meta row (keeps stock pill visible) ───── */
.product-page .product-sku {
  display: none !important;
}



/* ==========================================================================
   OMG: Horizontal size bar under each card (fixed overlay)
   - Appears under the card’s bottom edge (JS sets exact position/width)
   - No wrappers; no layout shifts; unaffected by breakpoints
   ========================================================================== */
.omg-size-pop[hidden] { display: none !important; }

.omg-size-pop {
  position: fixed;            /* placed under the card by JS */
  z-index: 10000;
  display: inline-flex;       /* HORIZONTAL row */
  gap: 6px;
  padding: 6px 8px;

  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.45);
  white-space: nowrap;
  pointer-events: auto;       /* interactive */
}

.omg-size-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 4px 10px;
  font: inherit;
  color: #fff;
  cursor: pointer;
  line-height: 1.15;
  white-space: nowrap;
}
.omg-size-btn:hover { background: rgba(255,255,255,0.14); }
.omg-size-btn.is-disabled,
.omg-size-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

















/* ==========================================================================
   PRIVACY PAGE (privacy.html)
   • Page-scoped styles; will not affect other pages.
   ========================================================================== */

/* ───── Privacy page header offset (push content below fixed header) ───── */
.privacy-page {
  --privacy-header-offset: 8.8rem; /* adjust if your header height changes */
  overflow-x: clip;                /* kill any sideways overflow on this page */
}

/* ───── Scoped box-sizing: keep widths predictable on this page only ───── */
.privacy-page,
.privacy-page * {
  box-sizing: border-box;
}


/* ───── Privacy page wrapper ───── */
.privacy-page main {
  max-width: 920px;
  margin: 0 auto;
  padding: calc(var(--privacy-header-offset) + 2rem) 1rem 4rem; /* top padding = header offset + page padding */
  line-height: 1.6;
}


/* ───── Page header (title + date) ───── */
.privacy-page .policy-header h1 {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
}
.privacy-page .policy-header .last-updated {
  margin: 0 0 1.25rem;
  opacity: 0.8;
  font-size: 0.95rem;
}

/* ───── Notice box (summary) ───── */
.privacy-page .notice-box {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  padding: 1rem 1.125rem;
  border-radius: 0.75rem;
  margin: 0 0 1.5rem;
}

/* ───── Geographic scope notice ───── */
.privacy-page .geo-notice {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  opacity: 0.95;
}


/* ───── Table of contents ───── */
.privacy-page .policy-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0;
  margin: 0 0 1.25rem;
  list-style: none;
}
.privacy-page .policy-toc a {
  text-decoration: none;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
}
.privacy-page .policy-toc a:hover {
  text-decoration: underline;
}

/* ───── Section spacing ───── */
.privacy-page .policy-section {
  margin: 1.5rem 0;
}
.privacy-page .policy-section h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  margin: 0 0 0.5rem;
}

/* ───── Policy table styling ───── */
.privacy-page .policy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.97rem;
}
/* ───── Table scroll container (mobile readability) ───── */
.privacy-page .policy-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;              /* horizontal pans here */
  overflow-y: hidden;            /* avoid vertical tug-of-war */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;           /* explicitly allow horizontal panning */
}


.privacy-page .policy-table th,
.privacy-page .policy-table td {
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  padding: 0.6rem 0.5rem;
  vertical-align: top;
  text-align: left;
}
.privacy-page .policy-table thead th {
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-weight: 600;
}

/* ───── Minor notes ───── */
.privacy-page .policy-note {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* ───── Responsive tweaks (≤600px) ───── */
@media (max-width: 600px) {
  /* ───── Adjust header offset for ≤600px ───── */
  .privacy-page { --privacy-header-offset: 4.2rem; }  /* increase/decrease as needed */

  /* ───── Keep using the offset on mobile ───── */
  .privacy-page main { padding: calc(var(--privacy-header-offset) + 1.25rem) 0.875rem 3rem; }

  .privacy-page .policy-table th,
  .privacy-page .policy-table td { font-size: 0.95rem; }
}


/* ───── Text safety (≤560px) — outside the table only ───── */
@media (max-width: 560px) {
  /* Keep main from creating horizontal scroll */
  .privacy-page main { overflow-x: clip; }

  /* Wrap any long words/URLs in body copy and headings */
  .privacy-page .policy-header,
  .privacy-page .notice-box,
  .privacy-page .policy-section,
  .privacy-page .policy-toc {
    max-width: 100%;
    overflow-wrap: anywhere;  /* modern wrap */
    word-break: break-word;   /* fallback */
  }

  /* TOC: stack so it can’t force width */
  .privacy-page .policy-toc ul {
    flex-direction: column;
    gap: 0.5rem;
  }
  .privacy-page .policy-toc a { display: block; white-space: normal; }

  
  /* POLICY TABLE (≤560px): add internal scroll room without widening the page
     ========================================================================== */

  /* ───── Table: make it wider than its scroll wrapper only on small screens ───── */
  .privacy-page .policy-table {
    width: 370%;           /* creates extra horizontal to scroll; try 150–170% if needed */
    max-width: none;       /* override any global max-width */
    table-layout: auto;    /* natural column sizing for readability */
  }

  /* ───── Cells: allow wrapping so no single word forces infinite width ───── */
  .privacy-page .policy-table th,
  .privacy-page .policy-table td {
    white-space: normal;
  }


}


/* ==========================================================================
   GLOBAL ITEMS
   • Site-wide utilities & 3rd-party interop
   ========================================================================== */

/* SNIPCART MODAL FIX
   ==========================================================================
   Ensure Snipcart’s cart/overlay renders above fixed headers/navs.
   - Safe even if the Snipcart theme CSS isn’t linked.
   - Does NOT change your header styles; only raises the cart overlay.
   ========================================================================== */

/* ───── Keep Snipcart container from blocking clicks when closed ───── */
#snipcart[hidden] { display: none !important; }

/* ───── Raise Snipcart overlay/cart above any site header ───── */
#snipcart,
#snipcart .snipcart-overlay,
#snipcart .snipcart-modal,
#snipcart .snipcart-modal__container,
#snipcart .snipcart-cart,
#snipcart .snipcart-cart__container,
#snipcart .snipcart-cart__content {
  z-index: 2147483647 !important; /* higher than typical headers */
}