@charset "utf-8";

/* ====== Fonts ====== */
@import url("https://use.typekit.net/vvz6wxg.css"); /* "chivo" family */

/* ====== CSS Variables ====== */
:root{
  --yellow:#fced22;
  --white:#ffffff;
  --grey:#aaaaaa;
  --black:#000000;
  --red:#A52534;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ====== Base / Resets ====== */
html, body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--black);
  color:var(--white);
  font-family:"chivo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
}

/* ====== Headings ====== */
h1, h2, h3, h4, h5, h6{
  color:var(--yellow);
  font-family:"chivo", sans-serif;
  font-weight:700; /* per preference */
  margin-top:1.2em;
  margin-bottom:0.6em;
  line-height:1.2;
}

/* ====== Text & Links ====== */
p, li{
  font-family:"chivo", sans-serif;
  font-weight:400;
  color:var(--white);
  margin-bottom:1em;
}

a{
  color:var(--yellow);
  text-decoration:underline;
  transition:color .2s var(--ease);
}
a:hover{
  color:var(--grey);
  text-decoration:none;
}

/* ====== Utilities ====== */
.text-yellow { color:var(--yellow); }
.text-white  { color:var(--white); }
.text-red    { color:var(--red); }
.bg-black    { background-color:var(--black); }

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
.site-header{
  background:var(--black);
  border-bottom:1px solid #111;
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px;
}
.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:24px 20px;
  display:flex;
  align-items:center;
  gap:16px;
}
.brand img{
  height:60px;
  width:auto;
  display:block;
}
/* Phones */
@media (max-width: 480px) {
  .brand-logo {
    max-width: 120px;
    height: auto;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .brand-logo {
    max-width: 160px;
    height: auto;
  }
}
/* Top nav */
.top-nav{ margin-left:auto; }
.menu.root{
  list-style:none;
  display:flex;
  gap:28px;
  margin:0;
  padding:0;
}
.menu-link{
  background:none;
  border:0;
  color:var(--white);
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  cursor:pointer;
  padding:0 4px;
  transition:color .15s var(--ease);
  position:relative;
	font-size:18px;
	white-space:nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1; 
	height: 40px;  
}
@media (max-width: 768px) {
  .top-nav {
    display: none !important;
  }
}
/* HOME in white always */
.menu-link.is-home{ color:var(--white); }
/* Hover -> light grey for all non-home links */
.menu-item:not(:first-child) .menu-link:hover,
.menu-item:not(:first-child) .menu-link:focus{
  color:var(--grey);
}

.menu-link::after{
  content:" >>";
  position:relative;
  left:0;
  display:inline-block;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.menu-link:hover::after,
.menu-link:focus::after{
  opacity:1;
  transform:translateX(0);
}

/* Dropdowns (smooth, not clunky) */
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 8px);
  background:var(--black);
  border:1px solid #161616;
  padding:16px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
  z-index:1000;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0);
}

/* Cards inside dropdowns */
.card{
  text-decoration:none;
  display:flex;
  color:var(--white);
}
.v-card{ width:180px; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:6px; }
.v-card img{
  width:180px; height:240px; object-fit:cover;
  border-radius:8px; outline:1px solid #111; background:#000000;
}
.card-caption{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.card-caption .line{ color:var(--grey); font-weight:700; letter-spacing:.04em; }
.card-caption .line.yl{ color:var(--yellow); }
.card-caption .line.lg{ color:var(--grey); }
.card:hover img{ filter:brightness(1.1); transform:scale(1.01); transition:.25s var(--ease); }

/* Specific dropdown layouts */
.dropdown.issues{ padding:16px 20px; white-space:nowrap; display:flex; gap:16px; }
.dropdown.issues .v-card{ width:160px; }
.dropdown.issues .v-card img{ width:160px; height:230px; }

.dropdown.stories{ padding:18px 22px; min-width:780px; }
.dropdown.stories .dropdown-heading{ width:100%; text-align:center; margin-bottom:12px; }
.dropdown.stories .subhead{ color:var(--grey); font-weight:800; letter-spacing:.08em; }
.dropdown.stories .row{ display:flex; gap:18px; justify-content:center; }
.dropdown.stories .v-card{ width:200px; }
.dropdown.stories .v-card img{ width:200px; height:230px; }

.dropdown.vault{ padding:22px; min-width:900px; }
.vault-inner{ display:grid; grid-template-columns:360px 1fr; gap:24px; align-items:center; }
.vault-left img{ width:100%; height:auto; border-radius:10px; outline:1px solid #111; background:#000000; }
.vault-right{ text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; }
.vault-title{ color:var(--yellow); font-weight:900; letter-spacing:.1em; }
.vault-copy{ color:var(--white); max-width:640px; line-height:1.5; }

.dropdown.shop{ padding:16px 18px; display:flex; gap:18px; }
.dropdown.shop .v-card{ width:200px; }
.dropdown.shop .v-card img{ width:200px; height:230px; }

.dropdown.members{ padding:16px 18px; display:flex; gap:16px; }
.dropdown.members .v-card{ width:160px; }
.dropdown.members .v-card img{ width:160px; height:230px; }

/* Extend hover hit area below toggles */
.has-dropdown > .menu-link::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px; height:6px;
}
/* ====== VIEW CART ===== */
.menu-link.menu-cart{
  display:inline-flex;
  align-items:center;
 justify-content: center;
  height:40px;
  padding: 0 4px;
  line-height:1;        /* keeps it vertically centered */
 }

/* Remove the " >>" hover suffix for the icon link only */
.menu-link.menu-cart::after{ content:none; }

/* SVG sizing + alignment */
.icon-cart{
  width:20px;
  height:20px;
  display:block;
  fill:var(--white);
  /* optional: tint on hover like other links */
  transition:fill .15s var(--ease);
}
.menu-link.menu-cart:hover .icon-cart{ fill:var(--grey); }

/* Count badge */
.cart-count{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--black);
  font-weight:800;
  font-size:.75rem;
  line-height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-1px); /* micro-nudge to align optically */
}

/* Hide badge when count is zero */
.cart-count.is-zero{ display:none; }
/* ====== Buttons (global) ====== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.06em;
  border-radius:999px;
  padding:8px 14px;
  user-select:none;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition:transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:active{ transform:scale(.98); }

/* Solid yellow button */
.btn-yellow{
  background:var(--yellow);
  color:var(--black);
}
.btn-yellow:hover{
  background:var(--grey);
  color:var(--black);
}
/* ===== Shop category tabs ===== */
.shop-tabs { display:flex; gap:10px; margin:12px 0 16px; flex-wrap:wrap; }
.shop-tab {
  display:inline-block;
  padding:8px 12px;
  border:1px solid #222;
  border-radius:999px;
  text-decoration:none;
  color:var(--white);
  background:#000000;
}
.shop-tab:hover { border-color:#333; }
.shop-tab.is-active {
  border-color:var(--yellow);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--yellow) 40%, transparent);
}

/* Disabled CTA state for family head */
.shop-card__cta.is-disabled {
  pointer-events: none;
  opacity: 0.6;
  filter: grayscale(0.2);
}



  /* White button: black text on white background */
.btn-white {
  display: inline-block;
  background: #fff;
  color: #000 !important;   /* force black text */
  border: 2px solid #000;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn-white:hover,
.btn-white:focus {
  background: #000;
  color: #fff !important;
  border-color: #000;
}

.btn-white:hover{ filter:brightness(0.92); }

/* Yellow outline button with requested hover behavior */
.btn-outline-yellow{
  display:inline-flex;              /* keep flex like .btn */
  align-items:center;
  justify-content:center;
  text-align:center;

  border:2px solid var(--yellow);
  color:var(--yellow);
  background:var(--black);
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  line-height:1;
  position:relative;
  transition:all .2s var(--ease);
}

.btn-outline-yellow::after{
  content:" >>";
  position:relative;
  left:0;
  margin-left:.25em;                /* add space before arrows */
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
}
.btn-outline-yellow:hover{
  border-color:transparent; /* remove outline */
  color:var(--yellow);       /* keep text yellow */
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.25); /* slight shadow */
}
.btn-outline-yellow:hover::after{
  opacity:1;
  transform:translateX(0);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: url("../imgs/goodtimes-bg.png") no-repeat center center;
  background-size: cover;   /* makes it stretch/shrink */
  color: var(--white);
  font-family: "chivo", sans-serif;
}

.site-footer .footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:32px 40px;
}
.footer-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px;
  justify-content:center; /* center buttons row */
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 350px));
  gap: 24px;
  justify-content: center;
}
/* Keep 2 columns but center typical content */
.fcol { text-align:left; }

.fcol h3{
  font-family:"chivo", sans-serif;
  font-weight:700;
  margin:0 0 12px;
  color:var(--white);
  letter-spacing:.02em;
}
.flist{ list-style:none; margin:0; padding:0; }
.flist li{ margin:6px 0; }

.flist a,
.footer-legal a{
  color:var(--white);
  text-decoration:none;
  font-weight:400;
}
.flist a:hover,
.footer-legal a:hover{
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* Center any tables placed in the footer */
.site-footer table{ margin:0 auto; }

/* Social row */
.social-row{ display:flex; gap:12px; margin-top:12px; justify-content:left; }
.sm-icon svg{ width:18px; height:18px; fill:var(--white); display:block; }
.sm-icon:hover svg{ fill:var(--yellow); }

/* Legal row */
.footer-legal{
  margin-top:28px;
  font-size:.85rem;
  color:var(--white);
  text-align:center;
}
.footer-legal .policies{
  margin:0 0 6px;
  display:inline-block;
}
.footer-legal .copyright{
  margin:0;
  display:block;
}

/* Footer responsive */
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr; } }

/* ====== Login Page ====== */
.login-wrapper {
  min-height: calc(100vh - 120px); /* full height minus header/footer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.login-box {
  background: #000000;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 32px;
  max-width: 400px;
  width: 100%;
}

.login-box h1 {
  text-align: center;
  margin-top: 0;
}

.login-box label {
  display: block;
  margin-bottom: 16px;
  font-weight: 700;
}

.login-box input[type="text"],
.login-box input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #111;
  color: #fff;
}

.error-box {
  background: #2a0000;
  border: 1px solid #660000;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.login-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* =========================================================
    HOME PAGE
   ========================================================= */
/* ====== Video Wrap ====== */
.video-wrap {
  position: relative;
  width: 100%;          /* take up full width until max reached */
  max-width: 1000px;    /* cap size so it doesn’t get massive */
  margin: 0 auto;       /* center horizontally */
  overflow: hidden;
}

.video-wrap video {
  width: 100%;          /* responsive scaling */
  height: auto;         /* keep correct aspect ratio */
  display: block;
}
/* =========================================================
   ABOUT DRUMMER PAGE
   ========================================================= */
.page-about{
  background: url("../imgs/vault-slash-bg.png") center center / cover no-repeat fixed var(--black);
}

.o-hero-band{
  background:#000;
  padding: 16px 0;
  display:flex;
  justify-content:center;
}
.o-hero-band img{
  display:block;
  width:min(560px, 90vw);
  height:auto;
}

.o-content{
  padding: 36px 16px 120px;
  display:flex;
  justify-content:center;
}
.o-card{
  width:min(1100px, 96vw);
  background:#dddddd;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:grid;
  grid-template-columns:1fr 300px;
  gap:28px;
  padding:24px;
}
.o-card p,
.o-card blockquote p{
  color:#a52534;
	font-size: 1.1rem;
  margin:0 0 14px 0;
  line-height:1.6;
}

.o-quote{
  position:relative;
  margin:18px 0;
  padding-left:16px;
}
.o-quote-bar{
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:#FCED22;
  border-radius:2px;
}

.o-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.o-headshot{
  width:220px;
  border-radius:6px;
  outline:2px solid #bdbdbd;
  background:#cfcfcf;
}
.o-name{
  font-family:"chivo", sans-serif;
  font-weight:800;
	font-size: 2rem;
  color:#383838;
  text-align:center;
  margin:6px 0 0;
}
.o-title{
  font-family:"chivo", sans-serif;
  font-weight:700;
	font-size: 1rem;
  color:#383838;
  text-align:center;
}

@media (max-width:980px){
  .o-card{ grid-template-columns:1fr; }
  .o-right{ order:-1; }
  .o-headshot{ width:180px; }
}

/* ——— TOUGH CUSTOMERS ——— */
.hero-bar {
  width: 100%;
  background: url("../imgs/goodtimes-bg.png") center center / cover no-repeat;
  padding: 80px 20px;   /* vertical height + side padding */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-title {
  font-family: "chivo", sans-serif;
  font-weight: 800;     /* extra bold */
  font-size: 40pt;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 4px 10px rgba(0,0,0,0.6); /* optional for contrast */
  margin: 0;
}

h1.page-title{
  text-align:center;
  font-family:"chivo", sans-serif;
  font-weight:800;           
  font-size:36pt;            
  color: var(--red) ;             
  margin:1.2em 0 0.4em;      
}

.page-subhead{
  text-align:center;
  font-family:"chivo", sans-serif;
  font-weight:400;
  font-size:12pt;            
  color:var(--white);        
  margin:0 0 1.5em;
}
.masonry{
  column-count: 3;            /* 3 columns on desktop */
  column-gap: 24px;           /* space between columns */
}

/* Cards must be inline-block so they flow inside columns and keep their own height */
.card{
  display: inline-block;
  width: 100%;
  margin: 0 0 24px;           /* space below each card */
  background: var(--black, #121212);
  border: 1px solid var(--yellow, #fced22);
  border-radius: 16px;
  overflow: hidden;           /* clip image to rounded corners */
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  break-inside: avoid;        /* keep each card intact within a column */
}

/* Top photo */
.card-img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;        /* consistent visual height; remove if you want natural height */
  object-fit: cover;          /* crop nicely to fill */
  border-bottom: 1px solid rgba(233,195,79,.25);
}

/* Text area */
.card-body{ padding: 16px 18px 18px; }
.card-title{
  font-size: 1.2rem;          /* bump as desired */
  color: var(--yellow, #fced22);
  margin: 0 0 8px;
  line-height: 1.2;
  font-weight: 700;
}
.card p{ margin: 0 0 10px; color: #ddd; line-height: 1.45; }
.card-links a{
  color: var(--yellow, #e9c34f);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.card-links a:hover{ border-bottom-style: solid; }

/* Page container + title (optional helpers) */
.wrap{ max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.page-title{ margin: 0 0 18px; font-size: 2rem; color: #fff; }

/* ——— RESPONSIVE ——— */
@media (max-width: 1100px){
  .masonry{ column-count: 2; }
}
@media (max-width: 700px){
  .masonry{ column-count: 1; }
  .card{ border-radius: 12px; }
}
/* Card image sizing */
.card-img {
  width: 100%;
  height: 200px;          /* fixed height for grid consistency */
  object-fit: cover;
  object-position: center center;  /* default: center crop */
  display: block;
}

/* Portrait images: focus on top */
.card-img.portrait {
  object-position: top center;
}
.card .card-img{
  width:100%;
  height:auto !important;   /* override any fixed height */
  max-width:100%;
  object-fit:contain;       /* harmless here but fine */
  object-position:center;
  display:block;
  margin:0;
  /* kill any earlier aspect-ratio rule */
  aspect-ratio:auto !important;
}
/* Custom heading sizes for welcome page */
.big-title {
  font-size: 3rem;   /* huge */
  line-height: 1.1;
}

.sub-title {
  font-size: 1.5rem; /* smaller than h1 */
  line-height: 1.3;
}
/* ----------------------------
   Retailers Page
-----------------------------*/

/* Utility & wrappers */
.wrapper {
  width: min(1100px, 92%);
  margin: 0 auto;
}

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

/* Hero (assumes you already have .hero-bar/.hero-title set elsewhere) */

/* Intro lines */
.retailer-intro {
  text-align: center;
  padding: 28px 0 10px;
}

.retailer-callout {
  color: var(--yellow, #f7c200);
  font-weight: 700;
  font-size: 22pt;      
  letter-spacing: .5px;
  margin: 0 0 8px 0;
}

.retailer-sub {
  color: #fff;
  font-size: 10pt;      
  line-height: 1.5;
  margin: 0 auto 24px;
  max-width: 900px;
}

/* Retailer list box with background image */
.retailer-box {
  display: flex;
  justify-content: center;
  padding: 28px 0 40px;
}

.retailer-box__inner {
  width: min(1100px, 92%);
  display: flex;
  background-image: url("../imgs/retail1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  padding: 28px;
  gap: 32px;
	color: var(--black) !important;
}

.retailer-box__left,
.retailer-box__right {
  flex: 1 1 50%;
}

.retailer-box__right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.retailer-box__right img {
  width: 90%;       /* make it large */
  max-width: 420px; /* cap it so it doesn’t explode */
  height: auto;
  border-radius: 12px;
	box-shadow: 0 10px 24px rgba(0,0,0,.6);}

.retailer-list {
  font-family: "chivo", sans-serif;
  color: #000;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.retailer-list .region {
  font-size: 18pt;
  font-weight: 700;
  margin: 12px 0 6px;
  color: var(--black);
}

.retailer-list .state {
  font-size: 14pt;
  font-weight: 600;
  margin: 10px 0 4px;
  color: var(--black);
}

.retailer-list .store {
  font-size: 12pt;
  font-weight: 700;
  margin-left: 12px;
}

.retailer-list .address,
.retailer-list .city {
  font-size: 12pt;
  font-weight: 400;
  margin-left: 24px;
}

/* Full-bleed alternating promo banners */

  
/* Mobile stack */
@media (max-width: 800px){
  .promo-banner.grey-layout {
    flex-direction: column;
  }
  .promo-banner.grey-layout .promo-banner__copy,
  .promo-banner.grey-layout .promo-banner__media {
    flex: 1 1 100%;
  }
}
.promo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  min-height: 320px;
}
.promo-banner__copy.grey-box {
  background: #333;        /* medium grey */
  color: var(--white);
  border-radius: 8px;
  padding: 32px 28px;
  margin: 20px;            /* keeps some breathing room inside the banner */
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.promo-banner__media {
  flex: 1 1 50%;
  min-height: 280px;
  background-size: cover;
  background-position: center;
}

.promo-banner__copy {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 36px 28px;
  background: var(--black, #000);
  color: #fff;
}

.promo-banner__copy h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.promo-banner__copy p {
  margin: 0 0 4px 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Full-bleed guarantee */
.promo-banner { margin: 0; }
.promo-split{
  /* Two backgrounds: left-half grey, right-half image */
  --img: none;
  position: relative;
  width: 100%;
  min-height: 360px;

  /* layer 1: solid grey on the left 55%
     layer 2: the image on the right 45% */
  background-image:
    linear-gradient(#333, #333),
    var(--img);
  background-size: 55% 100%, 45% 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
}

/* Optional diagonal bands, like your screenshot */
.promo-split::before{
  content: "";
  position: absolute; inset: 0;
  /* subtle stripes that only appear over the grey because the image hides them */
  background:
    repeating-linear-gradient(
      -35deg,
      rgba(255,255,255,.08) 0 8px,
      rgba(255,255,255,0)   8px 28px
    );
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Text block sits on the left half */
.promo-split__copy{
  box-sizing: border-box;
  width: 80%;
  min-height: 360px;
  padding: 22px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
}
/* Flipped layout: image left, grey box right */
.promo-split.flip{
  background-image:
    var(--img),
    linear-gradient(#333, #333);
  background-size: 50% 100%, 50% 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
}

.promo-split.flip .promo-split__copy{
  margin-left: auto;  /* push the grey box to the right half */
  width: 50%;
}
/* ============================
   Triple banner: image left + right, white center
============================ */
/* Triple banner: image left + right, white center */
.promo-triple {
  display: flex;
  width: 100%;
  min-height: 280px;
}

.promo-triple__side {
  flex: 1 1 25%;
  min-height: 280px;
  background-size: cover;
  background-position: center;
}

.promo-triple__center {
  flex: 1 1 50%;
  background: #fff;
	color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 28px;
  font-family: "chivo", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #000 !important;   /* force black text */
}
.p-black-chivo {
  font-family: "chivo", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #000 !important;   /* force black */
  margin: 0;
}

.promo-triple__center a {
  color: #A52534 !important; /* email in red */
  font-weight: 700;
  text-decoration: none;
}
.promo-triple__center a:hover {
  text-decoration: underline;
}

/* Mobile: stack vertically */
@media (max-width: 800px) {
  .promo-triple {
    flex-direction: column;
  }
  .promo-triple__side,
  .promo-triple__center {
    flex: 1 1 100%;
    min-height: 200px;
  }
}

/* Responsive stacking for narrow screens */
@media (max-width: 900px){
  .promo-banner__copy h3 { font-size: 24px; }
}

@media (max-width: 720px){
  .promo-banner { flex-direction: column; }
  .promo-banner__media,
  .promo-banner__copy { flex-basis: 100%; }

  /* Make images taller on mobile for impact */
  .promo-banner__media { min-height: 260px; }
}
@media (max-width: 800px){
  .retailer-box__inner {
    flex-direction: column;
    text-align: center;
  }
  .retailer-list .store,
  .retailer-list .address,
  .retailer-list .city {
    margin-left: 0;
  }
}


/* ===== Shop ===== */
:root{
  --shop-gap: 18px;
  --shop-card-radius: 14px;
  --shop-card-border: 1px solid rgba(255,255,255,0.08);
  --shop-card-shadow: 0 8px 18px rgba(0,0,0,0.12);
  --shop-card-shadow-hover: 0 12px 28px rgba(0,0,0,0.18);
  --shop-img-aspect: 4/5; /* nice product ratio */
}

/* container spacing just for the shop page */
.container.shop{
  padding: 24px 0;
}

/* Title */
.shop__title{
  font-family: var(--chivo, 'Chivo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 4px 0;
  color: var(--text, #fff);
}

/* responsive grid */
.shop-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--shop-gap);
}

/* card base */
.shop-card{
  display: flex;
  flex-direction: column;
  background: var(--card, #0e0e0e);
  border: var(--shop-card-border);
  border-radius: var(--shop-card-radius);
  box-shadow: var(--shop-card-shadow);
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  outline: none;
	position: relative;
}

.shop-card:hover,
.shop-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: var(--shop-card-shadow-hover);
  border-color: rgba(255,255,255,0.16);
}

/* image handling */
.shop-card__img{
  width: 100%;
  aspect-ratio: var(--shop-img-aspect);
  object-fit: cover;
  display: block;
  background: #111;
}

/* if no image in DB, show a subtle placeholder */
.shop-card__img--placeholder{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.02) 6px 12px),
    #0d0d0d;
}

/* body */
.shop-card__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 16px;
}

/* name */
.shop-card__name{
  font-family: var(--chivo, 'Chivo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  color: var(--text, #fff);
  font-weight: 600;
  font-size: 1rem;
	margin-bottom: 4px;
  line-height: 1.35;
  min-height: 2.7em; /* helps equalize two-line titles */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* price + button row */
.shop-card__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* price */
.shop-card__price{
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--yellow, #ffcc00);
}

/* CTA (uses your existing .btn .btn-white styles, we just ensure fit) */
.shop-card__cta{
  white-space: nowrap;
  font-size: .9rem;
  padding: 8px 12px;
  border-radius: 999px;
  line-height: 1;
}

/* Optional: subtle badge accent by type (if you want future labels) */
.shop-card[data-type="subscription"] .shop-card__price{
  color: var(--accent-sub, var(--yellow, #ffcc00));
}
.shop-card[data-type="physical"] .shop-card__price{
  color: var(--accent-phy, var(--yellow, #ffcc00));
}

/* Small screens nicety */
@media (max-width: 520px){
  .shop-grid{
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .shop-card__name{
    font-size: .98rem;
  }
}
/* ===== Shop families dropdown ===== */
.shop-card--family .shop-card__body { gap: 12px; }

.shop-variant {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.shop-variant__label {
  color: var(--white);
  font-weight: 700;
  letter-spacing: .02em;
}

.shop-variant__select {
  appearance: none;
  -webkit-appearance: none;
  background: #0e0e0e;
  color: var(--white);
  border: 1px solid #222;
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  line-height: 1.2;
  cursor: pointer;
}

.shop-variant__select:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-color: var(--yellow);
}
/* Disabled CTA state for family head before a choice is made */
.shop-card__cta.is-disabled {
  pointer-events: none;
  opacity: 0.6;
  filter: grayscale(0.2);
}

/* ========== PRODUCT PAGE ========== */
:root{
  /* Fallbacks if not already defined in your theme */
  --black: #000000;
  --white: #ffffff;
  --gray-100:#f5f5f7;
  --gray-200:#ececef;
  --gray-400:#b7b7c2;
  --gray-600:#6b6b78;
  --gray-800:#2a2a33;
  --yellow:#ffc400; /* adjust to your brand yellow */
}

.product-page .container{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 16px;
}

/* Grid: image left, details right */
.prod-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: start;
}

/* Make the right column nicely “sticky” on tall pages */
@media (min-height: 720px) and (min-width: 900px){
  .prod-grid > :nth-child(2){
    position: sticky;
    top: 96px;
  }
}

/* Main image */
.hero{
  display:block;
  width:100%;
  aspect-ratio: 4 / 5;            /* prevents layout shift on load */
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: zoom-in;
}
.hero:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.09);
}

/* Thumbnails */
.thumbs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.thumbs img{
  width:80px; height:80px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, outline-color .15s ease;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.thumbs img:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  border-color: var(--gray-400);
}
.thumbs img.is-active{
  outline-color: var(--yellow);
  border-color: var(--yellow);
}

/* Text + price */
.prod-grid h1{
  font-family: "Chivo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(22px, 3.2vw, 34px);
  margin: 0 0 .25em 0;
  color: var(--white);           /* assumes dark theme; change to --black if your page background is white */
}

.price{
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--yellow);
  margin: .25em 0 .8em 0;
}

.muted{ color: var(--gray-600); }

/* Paragraphs inside details */
.prod-grid p{
  color: var(--white);
  line-height: 1.65;
  margin: 0 0 1em 0;
}

/* Small field styling for the single “Size” display */
label{
  display:block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 14px 0 6px 0;
}
input.muted{
  width: 100%;
  font: inherit;
  color: var(--white);
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 10px;
  padding: 10px 12px;
}

/* Buttons (use if/when you add an Add to Cart) */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  gap: .55rem;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid var(--yellow);
  background: var(--yellow);
  color: var(--black);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.18); }
.btn-primary:active{ transform: translateY(0); }

/* Secondary outline button, matches your previous style */
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  border:2px solid var(--yellow);
  background: transparent;
  color: var(--yellow);
  text-decoration: none;
  cursor: pointer;
}
.product-page .btn-white {
  background: var(--black);
  color: var(--yellow);
  border: 2px solid var(--yellow);
}

.product-page .btn-white:hover {
  background: var(--yellow);
  color: var(--black);
}
/* Lightbox polish */
#lb{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  display: none;                 /* toggled via JS */
  align-items: center; justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}
#lb img{
  max-width: 92vw; max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
#lb .x{
  position:absolute; top:18px; right:24px;
  font-size: 26px; color: #fff; cursor: pointer;
  user-select: none;
}
#lb .nav{
  position:absolute; top:50%; transform: translateY(-50%);
  font-size: 44px; color:#fff; cursor:pointer;
  padding: 8px 14px;
  user-select: none;
  opacity: .9;
  transition: transform .15s ease, opacity .15s ease;
}
#lb .nav:hover{ transform: translateY(-50%) scale(1.06); opacity: 1; }
#lb .prev{ left: 16px; }
#lb .next{ right: 16px; }

/* Utility: container that respects small screens */
@media (max-width: 880px){
  .prod-grid{ grid-template-columns: 1fr; gap: 18px; }
  .product-page .container{ padding: 16px 14px; }
  .thumbs img{ width:72px; height:72px; }
}

/* Optional: a subtle divider you can drop between blocks */
.hr-soft{
  height:1px; width:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin: 18px 0;
}
/* Whole-card link without breaking layout */
.shop-card{ position:relative; }
.shop-card__img,
.shop-card__body,
.shop-variant,
.shop-card__meta,
.shop-card__meta *{
  position:relative; z-index:2; /* controls stay clickable */
}
.shop-card__imglink,
.shop-card__namelink { text-decoration:none; color:inherit; }


/* optional: disabled state for CTA */
.is-disabled,
#checkout-btn:disabled,
.shop-card__cta.is-disabled { 
  pointer-events: none; 
  opacity: .6; 
  filter: grayscale(30%); 
  background: var(--grey) !important;
  color: var(--black) !important;
  cursor: not-allowed;
}
/* Suggests the card is clickable; controls keep normal cursor */
.shop-card{ cursor:pointer; }
.shop-card select,
.shop-card button,
.shop-card a,
.shop-card label,
.shop-card input,
.shop-card textarea{ cursor:auto; }
.lowstock,
.low-stock {
  display: block;
  text-align: center;
  margin: -3px 0;
  font-family: 'Chivo', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--red); 
  text-shadow: 
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

}

/* =========================================================
   PRIVACY / COOKIE POLICIES
   ========================================================= */

.policy-wrap {
  background: #000 url('imgs/drummer-slash-bg.png') center/cover fixed no-repeat;
  min-height: 100vh;
  padding: 30px 0 60px;
}
.policy.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: 'Chivo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.policy p,
.policy ul,
.policy ol,
.policy li {
  color: #fff;
  line-height: 1.6;
  font-size: 16px;      
  font-weight: 400;     
  margin: 0 0 1em 0;    
}
.policy ul,
.policy ol {
  margin: 0 0 1em 1.2em; /* keep left indent + bottom space after the list */
  padding: 0;
}

.policy li {
  margin: 0;            
  padding: 2px 0;       
  color: #fff;
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
}

.policy h1 {
  text-align: center;
  margin: 0 0 24px;
  letter-spacing: .3px;
}
.policy h1.privacy-title { color: var(--red); }
.policy h1.cookie-title  { color: var(--yellow); }

.group-title {
  color: #fff;
  margin: 28px 0 10px;
  font-weight: 700;
  font-size: 20px; /* slightly larger than body text */
}

/* Accordion */
.accordion {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  overflow: hidden;
}
.acc {
  background: rgba(0,0,0,.55);
  border-top: 1px solid rgba(255,255,255,.1);
}
.acc:first-of-type { border-top: 0; }
.acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px 14px 44px;
  position: relative;
  color: #eaeaea;
  font-size: 16px;
  font-weight: 600;
  outline: none;
}
.acc > summary::before {
  content: '';
  width: 10px; height: 10px;
  border-right: 2px solid #eaeaea;
  border-bottom: 2px solid #eaeaea;
  transform: rotate(-45deg);
  position: absolute; left: 16px; top: 50%;
  margin-top: -6px;
  transition: transform .2s ease;
  opacity: .9;
}
.acc[open] > summary::before { transform: rotate(45deg); }
.acc > summary span {
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 6px;
}
.acc-body {
  padding: 14px 16px 16px 16px;
  background: rgba(0,0,0,.45);
}
.acc > summary:focus-visible {
  box-shadow: 0 0 0 3px rgba(252,237,34,.55);
  border-radius: 8px;
}

.policy a {
  color: var(--red);
  text-decoration: underline;
}
/* ====== MAGAZINE PAGES ====== */
/* containers (optional wider) */
.wrap, .mag-wrap {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* give stage a real height; kill aspect-ratio */
.stage, .mag-stage {
  position: relative;
  width: 100%;

  /* tall, responsive height */
  height: clamp(640px, 85vh, 1400px);   /* adjust middle % if you want taller/shorter */

  /* remove any old aspect ratio tricks */
  aspect-ratio: auto !important;

  /* your look */
  background: var(--black, #000);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  overflow: hidden;
  border-radius: 12px;
}

/* make iframe fill the stage */
#pdfFrame {
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;    /* hides plugin gutters while loading */
}

/* keep curl overlay pinned */
.curl, .page-curl {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* toolbar and thumbs: unchanged (keep yours) */
.mag-toolbar {
  display: flex;
  justify-content: center;   
  align-items: center;      
  gap: 1rem;                 
  margin: 8px 0 16px;
}

.mag-toolbar button {
  padding: .4rem .9rem;
  border: 1px solid var(--grey);
  background: var(--black);
  color: var(--white);
  border-radius: 999px;
  cursor: pointer;
}

.mag-toolbar .mag-page {
  font-weight: 700;
  color: var(--white);
}
/* small screens: use nearly full viewport height minus a little for the toolbar/TOC */
@media (max-width: 900px){
  .stage, .mag-stage {
    height: calc(100dvh - 200px); /* d(vh) handles mobile URL bars better */
    min-height: 560px;
  }
}

/* print kill (unchanged) */
@media print { body * { display: none !important; } }

/* Help Page */
.help-header {
  background-size: cover;
  background-position: center;
  padding: 100px 20px;
  text-align: center;
}
.help-header h1 {
  font-family: "chivo", sans-serif;
  font-weight: 800;
  font-size: 3rem;
  color: var(--white);
  margin: 0;
}

.help-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 80px;
}
.help-card {
  text-align: center;
  text-decoration: none;
  color: var(--white);
  font-family: "chivo", sans-serif;
  font-weight: 700;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.help-card img {
  width: 180px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}
.help-card span {
  display: block;
  font-size: 1.2rem;
}
.help-card:hover {
  transform: translateY(-4px);
  color: var(--yellow);
}
/* ============================
   CONTACT PAGE
   ============================ */
.contact-header {
  background-size: cover;
  background-position: center;
  padding: 100px 20px;
  text-align: center;
}
.contact-header h1 {
  font-family: "chivo", sans-serif;
  font-weight: 800;
  font-size: 3rem;
  color: var(--white);
  margin: 0;
}

.contact-main {
  padding: 60px 0;
  text-align: center;
}

.contact-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 70px; /* space between the 3 blocks */
}

.contact-card {
  text-align: center;
  text-decoration: none;
  color: var(--white);
  font-family: "chivo", sans-serif;
  font-weight: 700;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.contact-card img {
  width: 200px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}
.contact-card span {
  display: block;
  font-size: 1.2rem;
}
.contact-card:hover {
  transform: translateY(-4px);
  color: var(--yellow);
}
/* ===== Forms (global) ===== */
.form { max-width: 720px; margin: 0 auto; }
.form-row { margin-bottom: 16px; text-align: left; }
.form-row label { display:block; margin-bottom:8px; font-weight:700; color:var(--white); }
.form-row .req { color:#f66; margin-left:4px; }

.form input[type="text"],
.form input[type="email"],
.form input[type="date"],
.form textarea,
.form select{
  width:100%;
  background:#000;              /* solid black */
  color:var(--white);
  border:1px solid #333;
  border-radius:10px;
  padding:12px 14px;
  outline:none;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form textarea{ resize:vertical; min-height:140px; }
.form input:focus,
.form textarea:focus,
.form select:focus{
  border-color:var(--yellow);
  box-shadow:0 0 0 2px rgba(252,237,34,.15);
}

/* Messages */
.form .alert{
  margin:18px 0; padding:12px 14px; border-radius:10px; text-align:center;
  border:1px solid #333; background:#0f0f0f; color:var(--white);
}
.form .alert.success{ border-color:#3a3; }
.form .alert.error{ border-color:#a33; }

/* Keep actions centered */
.form-actions{ text-align:center; }

/* Optional: small helper text */
.form .hint{ margin:6px 0 0; font-size:.9rem; color:var(--grey); }

.form-row.error input,
.form-row.error textarea {
  border: 3px solid #8B0000 !important;
  background-color: #B8860B !important;
color: #000 !important; 
}

.error-msg {
  color: #721C20;
  font-size: 14px;
  margin-top: 5px;
  display: block;
  font-weight: bold;
}

/*===== ADMIN AREA TOUGH CUSTOMER APPS ====*/
.table-wrap table { border:1px solid #222; }
.table-wrap th, .table-wrap td { font-size: .95rem; }
.table-wrap tbody tr:hover { background:#0c0c0c; }

/* Tough Customers App */
.tc-legal {
  max-height: 220px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #333;
  border-radius: 10px;
  background: #0f0f0f;
  color: var(--grey);
  font-size: 0.95rem;
  line-height: 1.5;
}
.tc-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 18px;
}
.tc-counter {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--grey);
  text-align: right;
}

/* ===== Content protection (max lock) ===== */
.protected,
.protected *{
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* prevent dragging assets */
.protected img,
.protected svg,
.protected picture,
.protected video,
.protected canvas{
  -webkit-user-drag: none;
  user-drag: none;
}

/* hide selection highlight altogether */
.protected ::selection { background: transparent; }
.protected ::-moz-selection { background: transparent; }

/* nuke print output */
@media print{
  .protected *{
    display: none !important;
    visibility: hidden !important;
  }
  .protected::before{
    content: "Printing is disabled on this page.";
    display: block !important;
    visibility: visible !important;
    color: #000;
    background: #fff;
    padding: 32px;
    font: 700 18px/1.6 system-ui, Arial, sans-serif;
  }
}

/* optional: subtle diagonal watermark text */
.protected .wm{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .12;             /* adjust strength */
  display: grid;
  place-items: center;
}
.protected .wm span{
  transform: rotate(-18deg);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(24px, 5vw, 54px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* Cart badge */
.nav-cart { position: relative; }
.cart-badge{
  display:inline-block;
  min-width:18px;
  padding:2px 6px;
  margin-left:8px;
  font-size:12px;
  line-height:1;
  font-weight:800;
  border-radius:999px;
  background:var(--yellow);
  color:var(--black);
  text-align:center;
}

/* ===== Promo Modal (stronger version) ===== */
.no-scroll { overflow: hidden; }

/* HIDE ENTIRE MODAL ON MOBILE */
@media (max-width: 800px) {
  .promoX-overlay {
    display: none !important;
  }
}

/* DESKTOP/TABLET ONLY */
.promoX-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 4000 !important;
  background: rgba(0,0,0,.85);
  display: grid;
  place-items: center;
  padding: 24px;
}
.promoX-overlay[hidden] { display: none !important; }

.promoX-dialog {
  position: relative; /* So the close button positions relative to THIS */
  width: min(700px, 85vw); /* SMALLER - was 960px */
  max-height: 80vh; /* SMALLER - was 86vh */
  background: var(--black);
  border: 1px solid #161616;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

/* Give the media side a height so the image can fill it */
.promoX-media { 
  aspect-ratio: 4 / 3;
}

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

.promoX-body {
  padding: 24px 22px;
  display: grid;
  align-content: center;
  gap: 14px;
  text-align: center;
}

.promoX-body h2 {
  color: var(--red);
  margin: 0 0 4px;
  font-weight: 900;
  letter-spacing: .06em;
}

.promoX-body p { 
  color: var(--white); 
  margin: 0 0 10px; 
}

.promoX-cta { 
  margin: 8px auto 0; 
}

/* MUCH BIGGER, MORE VISIBLE CLOSE BUTTON */
.promoX-close {
  position: absolute; 
  top: 12px; 
  right: 12px;
  background: rgba(0, 0, 0, 0.9); /* Dark background so it stands out */
  border: 2px solid var(--white); /* White border makes it obvious */
  color: var(--white);
  font-size: 32px; /* BIGGER */
  line-height: 1; 
  cursor: pointer;
  padding: 8px 14px; /* More padding = easier to click */
  border-radius: 50%; /* Circle button looks more like a close button */
  width: 48px; /* Fixed size = reliable click target */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10; /* Ensure it's on top */
}

.promoX-close:hover { 
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  transform: scale(1.1); /* Slight grow on hover */
}



/* ===== Back-to-Top bubble ===== */
html { scroll-behavior: smooth; } 

.toTop {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 3500;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);          /* semi-clear bubble */
  border: 1px solid #222;
  color: var(--white);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* start hidden, animate in */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.9);
  transition: opacity .18s var(--ease),
              transform .18s var(--ease),
              visibility .18s var(--ease);
}
.toTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.toTop:hover { background: rgba(0,0,0,.7); }
.toTop:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--yellow);
}

/* simple up-arrow icon (if SVG fails, you still see ↑ text) */
.toTop svg { width: 20px; height: 20px; display: block; }

/* lift above your mobile bottom nav */
@media (max-width: 768px){
  .toTop { bottom: 80px; }  
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .toTop { transition: none; }
}

/* --- FORM CONTROLS SHOULD NEVER BE OBFUSCATED --- */
/* Keep inputs/selects/textarea white-on-black sitewide */
.protected input,
.protected select,
.protected textarea,
input, select, textarea {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* Safari/Chrome */
  text-shadow: none !important;
  user-select: text !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Buttons: apply the protection to all EXCEPT .btn-white */
.protected button:not(.btn-white),
button:not(.btn-white) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  user-select: text !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Our white pill button: black text on white; invert on hover */
.protected button.btn-white,
button.btn-white {
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: 2px solid #000 !important;
}

.protected button.btn-white:hover,
button.btn-white:hover {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #000 !important;
}

/* --- Allow normal interaction in form controls --- */

.protected label {
  user-select: text !important;         /* let caret/selection work */
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  pointer-events: auto !important;       /* make sure clicks reach inputs */
  touch-action: manipulation;            /* nicer on mobile */
  caret-color: auto;                     /* visible cursor */
}
/* Make sure options themselves paint normally */
select option {
  color: #000 !important;                 /* readable when list opens */
  background: #fff !important;
}
/* Identify the card/wrapper around the select.
   Add all that might exist in your shop: */
.product-card,
.prod-card,
.shop-card,
.item-card,
.card {
  overflow: visible !important;    /* allow the dropdown to escape */
}

/* If a parent has transform/filter, Chrome may clip the popup.
   Remove transforms from ancestors of the select. Keep any transform
   just on the image itself if you need a hover zoom. */
.product-card *,
.prod-card *,
.shop-card * {
  transform: none;                 /* safety: turn off transforms that wrap the select */
  filter: none;
}

/* Ensure the select stacks above decorative layers */
.product-card select,
.prod-card select,
.shop-card select,
.item-card select,
select {
  position: relative;
  z-index: 9999;
}
select,
select:focus {
  background:#111;
  color:#fff;
  border:1px solid #2a2a2a;
  border-radius:12px;
  padding:.55rem .8rem;
  outline:0;
}
/* ---- FORM SAFETY RESET ---- */
input, select, textarea, button {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;   /* WebKit paint */
  background:#111;                            /* readable on dark */
  border:1px solid #2a2a2a;
  border-radius:12px;
  outline:0;
  appearance:auto !important;                 /* undo custom skins */
  -webkit-appearance:auto !important;
  opacity:1 !important;
  text-shadow:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

/* Options must have explicit colors (system menu can ignore parent) */
select option {
  background:#000 !important;   /* make the list light */
  color:#fff !important;         /* readable text */
}

/* Adjust the selectors to match what you use; broad on purpose */
.prod-card,
.product-card,
.shop-card,
.item-card,
.card,
.shop-grid > * {
  overflow:visible !important;        /* critical: don't clip the open menu */
}

/* If a parent uses transform/filter, that can also clip the popup.
   Remove transforms from the *container* (keep them on the image only). */
.prod-card,
.product-card,
.shop-card {
  transform:none !important;
  filter:none !important;
}

/* Ensure the control stacks over decorative layers */
.prod-card select,
.product-card select,
.shop-card select,
.card select,
select {
  position:relative;
  z-index:9999;
}




/* === FORCE FIX: White buttons must always be black text === */
button.btn.btn-white,
.protected button.btn.btn-white,
.btn.btn-white {
  background: var(--white) !important;
  color: var(--black) !important;
  border: 2px solid var(--black) !important;
}

button.btn.btn-white:hover,
.protected button.btn.btn-white:hover,
.btn.btn-white:hover {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
}
/* ====== Shipping Integration Styles ====== */

.shipping-rates {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid var(--grey);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05); /* Very subtle white overlay on black */
}

.shipping-rate {
  margin: 12px 0;
  padding: 15px;
  border: 2px solid var(--grey);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  background: var(--black);
  color: var(--white);
  font-family: "chivo", sans-serif;
}

.shipping-rate:hover {
  border-color: var(--yellow);
  background: rgba(252, 237, 34, 0.1); /* Subtle yellow glow */
}

.shipping-rate.selected {
  border-color: var(--yellow);
  background: rgba(252, 237, 34, 0.15);
  box-shadow: 0 0 10px rgba(252, 237, 34, 0.3);
}

.shipping-rate input[type="radio"] {
  margin-right: 12px;
  accent-color: var(--yellow); /* Modern browsers will style the radio button yellow */
}

.shipping-rate strong {
  color: var(--yellow);
  font-weight: 700;
}

.loading {
  text-align: center;
  padding: 30px;
  color: var(--grey);
  font-family: "chivo", sans-serif;
  font-style: italic;
}

.error {
  color: var(--white);
  background: var(--red);
  padding: 15px;
  border-radius: 6px;
  margin: 15px 0;
  font-family: "chivo", sans-serif;
  font-weight: 500;
  border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.order-summary {
  margin: 25px 0;
  padding: 20px;
  border: 1px solid var(--grey);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.order-summary h3 {
  margin-top: 0;
  color: var(--yellow);
  border-bottom: 1px solid var(--grey);
  padding-bottom: 10px;
}

.order-summary > div {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-family: "chivo", sans-serif;
}

.order-summary strong {
  color: var(--yellow);
  font-weight: 600;
}

.order-summary hr {
  border: none;
  border-top: 1px solid var(--grey);
  margin: 15px 0;
}

/* Checkout button disabled state */
#checkout-btn:disabled {
  background: var(--grey) !important;
  color: var(--black) !important;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Small text styling for shipping notice */
form p small {
  color: var(--grey);
  font-style: italic;
  font-family: "chivo", sans-serif;