/** Shopify CDN: Minification failed

Line 4968:1 Expected "}" to go with "{"

**/
/* =========================================================
   BKK SCENE — MASTER STYLESHEET (FINAL FIXES)
   ========================================================= */

/* -----------------------------
   Theme variables
------------------------------ */
:root{
  --font-heading-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --bkk-bg: #000;
  --bkk-text: #fff;
  --bkk-yellow: #ffe600;
  --bkk-pink: #FF00CC; /* Neon Pink */
  --bkk-orange: #FF8C00; /* Neon Orange */

  --bkk-cut: 26px; /* GLOBAL DIAGONAL CORNER SIZE */
}

/* -----------------------------
   Article page background
------------------------------ */
#MainContent[data-page-type="article"]{
  background: var(--bkk-bg) !important;
  color: var(--bkk-text) !important;
}

/* -----------------------------
   Typography overrides (global)
------------------------------ */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6,
.article-template__title,
.collection-hero__title,
.cart__empty-text,
.rte h1, .rte h2, .rte h3,
.card__heading{
  font-family: var(--font-heading-family) !important;
  letter-spacing: 0 !important;
}

/* Blog cards + menu link titles */
.blog-post-card__content a div,
.blog-post-card__content a h3{
  font-weight: 700 !important;
  font-family: var(--font-heading-family) !important;
  color: #000 !important;
  text-transform: none !important;
}
.menu-list__link-title{
  font-weight: 700 !important;
  font-family: var(--font-heading-family) !important;
  text-transform: none !important;
}

/* =========================================================
   Article shell
========================================================= */
.magazine-article{
  font-family: var(--font-body-family);
  max-width: var(--normal-content-width, 800px);
  margin: 0 auto;
  color: var(--bkk-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  background: var(--bkk-bg);
}

/* Lead paragraphs + drop cap */
.magazine-article .lead-paragraph{
  font-size: 1.25em;
  line-height: 1.6;
  margin-bottom: 30px;
  color: var(--bkk-text);
  font-weight: 350;
  letter-spacing: 0.2px;
}
.magazine-article .lead-paragraph strong{ font-weight: 700; }

.magazine-article .drop-cap{
  float: left;
  font-size: 4.9em;
  line-height: 0.75;
  margin-right: 15px;
  margin-top: 10px;
  font-weight: 700;
  color: var(--bkk-yellow);
}

/* =========================================================
   Stage layout (number + content)
========================================================= */
.magazine-article .stage-item{
  display: flex;
  align-items: flex-start;
  gap: 35px;
  margin-bottom: 70px;
  padding-left: 10px;
}

.magazine-article .stage-number-container{
  width: 70px;
  height: 70px;
  background: var(--bkk-yellow);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  margin-top: 5px;
}

.magazine-article .stage-number-text{
  color: #000;
  font-size: 80px;
  font-weight: 700;
  position: absolute;
  bottom: -10px;
  right: 5px;
  line-height: 0.8;
}

.magazine-article .stage-content::after{
  content:"";
  display:block;
  clear:both;
}

/* Stage h3 */
.magazine-article .stage-content h3{
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 20px 0;
  color: var(--bkk-text);
  text-transform: none !important;
  letter-spacing: 0.5px;
  border-bottom: 3px dotted rgba(255,255,255,0.68);
  display: inline-block;
  padding-bottom: 3px;
}

/* Two-line h3 spans */
.magazine-article .stage-content h3 .h3-main,
.magazine-article .bkk-faq h3 .h3-main,
.magazine-article .stage-content h3 .subhead-title{
  display:block;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.08;
  color: var(--bkk-yellow);
}
.magazine-article .stage-content h3 .h3-sub,
.magazine-article .bkk-faq h3 .h3-sub,
.magazine-article .stage-content h3 .subhead-detail{
  display:block;
  font-weight:300;
  opacity:.92;
  margin-top: 3px;
  line-height:1.15;
  color: var(--bkk-text);
}

/* Body copy */
.magazine-article .stage-content p{
  margin-bottom: 20px;
  font-size: 1.1em;
  line-height: 1.85;
  color: var(--bkk-text);
}

/* =========================================================
   Links (global default on black)
========================================================= */
.magazine-article a{
  color: var(--bkk-yellow);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,230,0,0.55);
}
.magazine-article a:hover,
.magazine-article a:focus-visible{
  border-bottom-color: rgba(255,230,0,0.95);
}

/* FIND / WHERE links (general on yellow surfaces) */
.magazine-article a.bkk-find,
.magazine-article a.bkk-where,
.magazine-article a.find,
.magazine-article a.where{
  color: #000 !important;
  border-bottom: 1px dotted rgba(0,0,0,0.55) !important;
}
.magazine-article a.bkk-find:hover,
.magazine-article a.bkk-where:hover,
.magazine-article a.find:hover,
.magazine-article a.where:hover,
.magazine-article a.bkk-find:focus-visible,
.magazine-article a.bkk-where:focus-visible,
.magazine-article a.find:focus-visible,
.magazine-article a.where:focus-visible{
  border-bottom-color: rgba(0,0,0,0.95) !important;
}

/* =========================================================
   Images & Embeds
========================================================= */
.magazine-article img,
.magazine-article .article-image{
  border-radius: 0 !important;
  box-shadow: none !important;
}

.magazine-article .article-image{
  width: 100%;
  height: auto;
  margin: 40px 0;
  display: block;
}

/* FIX: Force Instagram Embeds to Full Width */
.magazine-article .instagram-media {
  min-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.magazine-article iframe.instagram-media {
  min-width: 100% !important;
  width: 100% !important;
}

/* This targets the top-level wrapper */
#header-group {
  position: relative !important;
  z-index: 10000 !important; 
}

/* This reinforces the header section itself */
.shopify-section-group-header-group {
  z-index: 10000 !important;
}


/* =========================================================
   Global feature divider
========================================================= */
.magazine-article hr.feature-divider{
  border: 0 !important;
  height: 2px !important;
  width: 100% !important;
  max-width: var(--normal-content-width, 800px) !important;
  margin: 52px auto !important;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,.22) 12%,
    rgba(255,255,255,.22) 88%,
    transparent 100%
  ) !important;
}
.magazine-article hr.feature-divider::before,
.magazine-article hr.feature-divider::after{
  content: none !important;
}

/* =========================================================
   POST-IT NOTES & WHERE BOX (NEON UPDATES)
========================================================= */

/* 1. YELLOW NOTES (Symptoms / Reality) - STRIPY HAZARD LOOK */
.magazine-article .stage-content p.symptoms,
.magazine-article .stage-content p.reality{
  background-color: #FFE600 !important;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 10px, transparent 10px, transparent 20px) !important;
  color: #000 !important;
  text-align: center;
  border: 1px solid rgba(0,0,0,.35) !important;
  border-radius: 0 !important; /* Original shape */
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 22px;
  margin-bottom: 20px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--bkk-cut)) 0,
    100% var(--bkk-cut),
    100% 100%,
    0 100%
  );
}

/* 2. PINK NEON "WHERE" BOX */
.magazine-article .stage-content p.uniform{
  background: #000 !important;
  clip-path: none !important; 
  border: 3px solid var(--bkk-pink) !important; 
  border-radius: 20px !important;
  box-shadow: 
    inset 0 0 6px rgba(255, 255, 255, 0.3), 
    inset 0 0 12px var(--bkk-pink), 
    0 0 6px rgba(255, 255, 255, 0.3), 
    0 0 12px var(--bkk-pink), 
    0 0 25px rgba(255, 0, 204, 0.4) !important;
  color: #fff !important; 
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: visible !important;
  box-sizing: border-box;
  padding: 22px;
  margin-bottom: 20px;
  margin-top: 25px;
}

/* UNIFIED CORNER FOLD FOR YELLOW ONLY */
.magazine-article .stage-content p.symptoms::before,
.magazine-article .stage-content p.reality::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--bkk-cut);
  height: var(--bkk-cut);
  background: rgba(0,0,0,0.2);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  z-index: 2;
  pointer-events: none;
}
/* REMOVE FOLD FOR WHERE BOX */
.magazine-article .stage-content p.uniform::before {
  display: none !important;
}

/* HEADERS INSIDE NOTES */
.magazine-article .stage-content p.symptoms strong:first-child,
.magazine-article .stage-content p.reality strong:first-child{
  display:block;
  width: fit-content;
  margin: 0 auto 10px auto;
  padding: 0 0 5px 0;
  border-bottom: 2px dotted rgba(0,0,0,0.35);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 0.9em;
  color: #000;
}

/* HEADER INSIDE PINK NOTE (WHERE) - GLOWING PINK */
.magazine-article .stage-content p.uniform strong:first-child{
  display:block;
  width: fit-content;
  margin: 0 auto 10px auto;
  padding: 0 0 5px 0;
  border-bottom: none !important;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 0.9em;
  color: var(--bkk-pink) !important;
  text-shadow: 0 0 8px rgba(255, 0, 204, 0.8) !important;
}

.magazine-article .stage-content p.symptoms a,
.magazine-article .stage-content p.reality a{
  color: #000 !important;
  border-bottom: 1px dotted rgba(0,0,0,0.55) !important;
}
.magazine-article .stage-content p.symptoms a:hover,
.magazine-article .stage-content p.reality a:hover,
.magazine-article .stage-content p.symptoms a:focus-visible,
.magazine-article .stage-content p.reality a:focus-visible{
  border-bottom-color: rgba(0,0,0,0.95) !important;
}

/* LOCATION (Uniform note) LINKS - WHITE */
.magazine-article .stage-content p.uniform a{
  color: #fff !important; 
  border-bottom: 0 !important;
  text-decoration: none !important;
  position: relative !important;
  display: inline-block !important;
  margin: 0 auto !important;
  align-self: center !important;
  padding-left: 0 !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-shadow: 0 0 5px rgba(255,255,255,0.4) !important;
}

/* Play Icon in Uniform Note (Pink Glow) */
.magazine-article .stage-content p.uniform a::after{
  content: "▶" !important;
  font-size: 0.7em !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
  color: var(--bkk-pink) !important;
  text-shadow: 0 0 10px var(--bkk-pink) !important;
}
/* Remove Old Icon */
.magazine-article .stage-content p.uniform a::before{
  display: none !important;
}

/* Two-up layout (desktop) */
@media (min-width: 768px){
  .magazine-article .stage-content p.symptoms{
    float: left;
    width: 48%;
    margin-right: 4%;
    min-height: 180px;
  }
  .magazine-article .stage-content p.reality,
  .magazine-article .stage-content p.uniform{
    float: left;
    width: 48%;
    margin-right: 0;
    min-height: 180px;
  }
  .magazine-article .stage-content p.bkk-note-wide{
    clear: both;
    width: 100%;
    float: none;
    margin-right: 0;
    min-height: auto;
  }
}

@media (max-width: 767px){
  .magazine-article .stage-content p.symptoms,
  .magazine-article .stage-content p.reality,
  .magazine-article .stage-content p.uniform,
  .magazine-article .stage-content p.bkk-note-wide{
    float: none;
    width: 100%;
    margin-right: 0;
    min-height: auto;
  }
}

/* =========================================================
   TOP PICKS
========================================================= */
.magazine-article .bkk-top-picks{
  background: #000;
  position: relative;
  max-width: var(--normal-content-width, 800px);
  margin: 30px auto 40px;
  padding: 24px 18px;
  
  /* 1. ROUNDED CORNERS (Like bent glass tubing) */
  border-radius: 20px;

  /* 2. THE PHYSICAL WIRE (Thicker yellow line) */
  border: 3px solid var(--bkk-yellow);
  
  /* 3. ENSURE GLOW SPILLS OUT */
  overflow: visible; 
  z-index: 1;

  /* 4. THE DUAL-SIDED NEON GLOW (Yellow Only) */
  box-shadow:
    /* Inner Glow (lights up the black box inside) */
    inset 0 0 4px rgba(255,255,255,0.4), /* Hot inner edge */
    inset 0 0 10px var(--bkk-yellow),    /* Yellow inner spill */
    
    /* Outer Glow (lights up the page) */
    0 0 4px rgba(255,255,255,0.4),       /* Hot outer edge */
    0 0 10px var(--bkk-yellow),          /* Yellow halo */
    0 0 20px rgba(255, 230, 0, 0.25);    /* Soft diffusion */
}

/* CLEAN UP: Remove any pseudo-elements from previous gradient attempts */
.magazine-article .bkk-top-picks::before,
.magazine-article .bkk-top-picks::after {
  content: none !important;
  display: none !important;
}

/* The Title - Yellow on Black */
.magazine-article .bkk-top-picks h4{
  margin: 0 auto 14px;
  width: fit-content;
  text-align: center;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.35vw, 1.45rem);
  letter-spacing: 0.02em;
  padding: 0 0 6px 0;
  
  /* Solid Yellow Text */
  color: var(--bkk-yellow) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: 0 0 8px rgba(255, 230, 0, 0.5);
  
  /* Yellow Dots */
  border-bottom: 3px dotted rgba(255,230,0,0.55); 
}

/* Grid Layout */
.magazine-article .bkk-top-picks-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 820px){
  .magazine-article .bkk-top-picks-grid{ grid-template-columns: 1fr; }
}

/* The Cards inside - clean black with faint borders */
.magazine-article .bkk-top-picks-card{
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px; 
  padding: 14px 14px;
  background: #000;
  color: #fff;
  display:flex;
  flex-direction:column;
  transition: all 0.2s ease;
}

/* Hover Effect: Card lights up yellow */
.magazine-article .bkk-top-picks-card:hover {
    border-color: rgba(255, 230, 0, 0.6);
    box-shadow: inset 0 0 10px rgba(255, 230, 0, 0.1); 
}

/* Kicker: Pink Text (Standard) */
.magazine-article .bkk-top-picks-card .tp-kicker{
  font-family: var(--font-heading-family);
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  opacity: .85;
  margin: 0 0 8px 0;
  color: var(--bkk-pink) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Links */
.magazine-article .bkk-top-picks-card a.tp-link{
  position: relative;
  display: inline-block;
  padding-left: 30px;
  color: #fff;
  font-weight: 800;
  line-height: 1.15;
  font-size: 1.02rem;
  margin: 0 0 8px 0;
  border-bottom: 0 !important;
  text-decoration: none !important;
}

/* Arrow: Yellow Circle */
.magazine-article .bkk-top-picks-card a.tp-link::before{
  content: "▶";
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--bkk-yellow);
  color: #000;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  transition: all 0.2s ease;
  box-shadow: 0 0 5px var(--bkk-yellow);
}

.magazine-article .bkk-top-picks-card a.tp-link:hover,
.magazine-article .bkk-top-picks-card a.tp-link:focus-visible{
  color: var(--bkk-yellow);
  text-decoration: underline !important;
  text-decoration-style: dotted !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

/* Make arrow glow hotter on hover */
.magazine-article .bkk-top-picks-card a.tp-link:hover::before{
    box-shadow: 0 0 10px var(--bkk-yellow), 0 0 4px #fff;
    background: #fff;
    border-color: var(--bkk-yellow);
}

.magazine-article .bkk-top-picks-card .tp-note{
  margin: 0;
  font-family: var(--font-body-family);
  font-weight: 400;
  font-size: .98rem;
  line-height: 1.45;
  opacity: .90;
  color: rgba(255,255,255,.92);
}

/* =========================================================
   QUICK LINKS — PINK VARIATION
========================================================= */
.magazine-article .bkk-quicklinks{
  background: var(--bkk-pink); /* PINK */
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 0;
  padding: 22px 22px;
  margin: 26px 0 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    calc(100% - var(--bkk-cut)) 0,
    100% var(--bkk-cut),
    100% 100%,
    0 100%
  );
}

/* Title in White */
.magazine-article .bkk-quicklinks h4{
  margin: 0 auto 14px;
  width: fit-content;
  text-align: center;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.35vw, 1.45rem);
  letter-spacing: 0.02em;
  padding: 0 0 6px 0;
  border-bottom: 3px dotted rgba(255,255,255,.55);
  text-transform: none;
  color: #fff; /* White */
}

.magazine-article .bkk-quicklinks ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 18px;
  text-align: left;
  counter-reset: ql 0;
}

.magazine-article .bkk-quicklinks li{
  position: relative;
  padding-left: 32px;
  min-height: 22px;
  counter-increment: ql;
}

/* White circles with Pink numbers */
.magazine-article .bkk-quicklinks li::before{
  content: counter(ql);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--bkk-pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
}

/* Links: White text */
.magazine-article .bkk-quicklinks a{
  color: #fff !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
}
.magazine-article .bkk-quicklinks a:hover,
.magazine-article .bkk-quicklinks a:focus-visible{
  text-decoration: underline !important;
  text-decoration-style: dotted !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

@media (max-width:720px){
  .magazine-article .bkk-quicklinks ul{ grid-template-columns:1fr; }
}

/* =========================================================
   “SEE ALL …” spoke buttons (PINK)
========================================================= */
.magazine-article .stage-content a.shop-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  background: var(--bkk-pink) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  border-bottom-style: solid !important;
  border-bottom-width: 1px !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease !important;
  box-shadow: 0 4px 10px rgba(255, 0, 204, 0.3) !important;
}
.magazine-article .stage-content a.shop-btn:hover,
.magazine-article .stage-content a.shop-btn:focus-visible{
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.95) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* =========================================================
   HERO IMAGE + TITLE
========================================================= */
#MainContent[data-page-type="article"] .bkk-hero{ color: var(--bkk-text) !important; }
#MainContent[data-page-type="article"] .bkk-hero-title{ color: var(--bkk-text) !important; }
#MainContent[data-page-type="article"] .bkk-hero-title__main{ color: var(--bkk-yellow) !important; }
#MainContent[data-page-type="article"] .bkk-hero-title__sub{ color: var(--bkk-text) !important; }
#MainContent[data-page-type="article"] .bkk-hero-title strong{ color: var(--bkk-yellow) !important; }

/* =========================================================
   BYLINE (PINK + ROUNDED) - UPDATED
========================================================= */
header.bkk-article-hero{ overflow: hidden; }

header.bkk-article-hero .blog-post-details[aria-label="Byline"]{
  width:auto !important;
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  
  /* Pink bg, white text, round pill shape */
  background: var(--bkk-pink) !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  
  margin: 18px auto 40px !important;
  gap: 10px !important;
  flex-wrap: wrap;
  font-weight: 800 !important;
  font-family: var(--font-heading-family) !important;
  text-transform: none !important;
  position: relative !important;
  z-index: 1;
}

/* White text inside Byline */
header.bkk-article-hero .blog-post-details[aria-label="Byline"] *{
  font-weight: inherit !important;
  font-family: inherit !important;
  text-transform: inherit !important;
  color: #fff !important;
}

/* Links inside Byline (White) */
header.bkk-article-hero .blog-post-details[aria-label="Byline"] a{
  color:#fff !important;
  text-decoration:none !important;
  border-bottom: 1px dotted rgba(255,255,255,0.55) !important;
}
header.bkk-article-hero .blog-post-details[aria-label="Byline"] a:hover,
header.bkk-article-hero .blog-post-details[aria-label="Byline"] a:focus-visible{
  border-bottom-color: rgba(255,255,255,0.95) !important;
}

/* Rails */
header.bkk-article-hero .blog-post-details[aria-label="Byline"]::before,
header.bkk-article-hero .blog-post-details[aria-label="Byline"]::after{
  content:"";
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  border-top: 2px dotted rgba(255,255,255,0.85);
  width: 2000px;
  pointer-events:none;
  z-index: 0;
}
header.bkk-article-hero .blog-post-details[aria-label="Byline"]::before{ right: 100%; margin-right: 14px; }
header.bkk-article-hero .blog-post-details[aria-label="Byline"]::after{ left: 100%;  margin-left: 14px; }

/* =========================================================
   FAQ BLOCK
========================================================= */
.magazine-article .bkk-faq{ margin: 54px 0 0; }

.magazine-article .bkk-faq h3.bkk-faq-title{
  position: relative !important;
  border-bottom: 0 !important;
  padding-bottom: 6px !important;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px 0;
}
.magazine-article .bkk-faq h3.bkk-faq-title::after{
  content:"" !important;
  position:absolute !important;
  left: calc(70px + 16px) !important;
  right: 0 !important;
  bottom: 0 !important;
  border-bottom: 3px dotted rgba(255,255,255,0.68) !important;
}

.magazine-article .bkk-faq .bkk-faq-badge{
  width:70px;
  height:70px;
  border-radius:999px;
  background: var(--bkk-yellow);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background-repeat:no-repeat;
  background-position:center;
  background-size:36px 36px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M9.5%209.2c.3-1.4%201.6-2.4%203.2-2.4%201.8%200%203.3%201.2%203.3%202.8%200%202.1-2.3%202.3-2.8%204.1%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2716.9%27%20r%3D%271.1%27%20fill%3D%27%23000%27/%3E%3C/svg%3E");
}
.magazine-article .bkk-faq .bkk-faq-badge svg{ display:none !important; }

.magazine-article .bkk-faq details{
  border-top: 1px solid rgba(255,255,255,.30) !important;
  padding: 14px 0 !important;
}
.magazine-article .bkk-faq details:last-child{ border-bottom: 1px solid rgba(255,255,255,.30) !important; }
.magazine-article .bkk-faq details:first-of-type{ border-top: 0 !important; }

.magazine-article .bkk-faq summary{
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  outline: none;
  color: var(--bkk-text);
  position: relative !important;
  padding-right: 40px !important;
}
.magazine-article .bkk-faq summary::-webkit-details-marker{ display:none; }

.magazine-article .bkk-faq summary::after{
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: var(--bkk-yellow) !important;
  border: 1px solid var(--bkk-yellow) !important;
  z-index: 1 !important;
}

.magazine-article .bkk-faq summary::before{
  content: "+" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) translate(-1px, -1px) !important;
  line-height: 18px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #000 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  z-index: 2 !important;
}
.magazine-article .bkk-faq details[open] summary::before{ content: "−" !important; }

.magazine-article .bkk-faq .bkk-faq-body{
  padding: 10px 0 0;
  color: var(--bkk-text);
}
.magazine-article .bkk-faq .bkk-faq-body p{ color: var(--bkk-text) !important; }

/* =========================================================
   COMMENTS HEADER + FORM
========================================================= */
.bkk-comments-headline{
  max-width: var(--normal-content-width, 800px);
  margin: 40px auto 10px auto;
  padding: 0 10px;
  font-family: var(--font-heading-family);
  color: var(--bkk-text);
  text-align: center;
  background: transparent !important;
}
.bkk-comments-headline::before{
  content:"";
  display:block;
  width:70px;
  height:70px;
  margin: 0 auto 14px;
  border-radius:999px;
  background-color: var(--bkk-yellow);
  background-repeat:no-repeat;
  background-position:center;
  background-size:34px 34px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7.5%2018.5L4%2020V6.5C4%205.4%204.9%204.5%206%204.5H18c1.1%200%202%200.9%202%202V15c0%201.1-.9%202-2%202H9.2L7.5%2018.5Z%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M8.2%209.5h7.6M8.2%2012h5.4%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");
}
.bkk-comments-headline h3{
  margin:0 0 8px 0;
  font-size: clamp(28px, 2.2vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bkk-text);
}
.bkk-comments-headline h3 .bkk-comments-brave{
  display:block;
  margin-top:8px;
  font-weight:300;
  opacity:.9;
  color: rgba(255,255,255,.9);
}
.bkk-comments-headline p{
  margin:10px 0 0;
  font-weight:500;
  opacity:.78;
  color: rgba(255,255,255,.88);
}

#comments{
  background: #000 !important;
  color: #fff !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.bkk-comments,
#comment_form{
  max-width: var(--normal-content-width, 800px);
  margin-left:auto;
  margin-right:auto;
}

#comments .comment,
#comments .comments,
#comments .comment-wrapper,
#comments .article-template__comments{
  background: transparent !important;
  color: #fff !important;
}

#comments p,
#comments li,
#comments small,
#comments time,
#comments .comment__meta,
#comments .comment__content{
  color: rgba(255,255,255,.92) !important;
}

#comments a{
  color: var(--bkk-yellow) !important;
  border-bottom: 1px dotted rgba(255,230,0,0.55) !important;
}
#comments a:hover,
#comments a:focus-visible{
  border-bottom-color: rgba(255,230,0,0.95) !important;
}

#comment_form{ margin-top: 10px !important; }
#comment_form hr{ display:none !important; border:0 !important; }

#comment_form label{
  display:block;
  margin: 0 0 10px 0;
  font-family: var(--font-heading-family) !important;
  font-weight:300 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em;
  text-transform:none !important;
  opacity:.9;
  color: rgba(255,255,255,.92) !important;
}

#comment_form input[type="text"],
#comment_form input[type="email"],
#comment_form textarea,
#comment_form input:not([type]),
#comment_form textarea#CommentBody{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:16px;
  padding:16px 18px;
  font-family: var(--font-body-family) !important;
  font-weight:300 !important;
  font-size:1.1rem !important;
  line-height:1.4;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.94) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#comment_form input::placeholder,
#comment_form textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

#comment_form textarea,
#comment_form textarea#CommentBody{
  min-height:200px;
  resize:vertical;
}

#comment_form input:focus,
#comment_form textarea:focus{
  outline:none;
  border-color: rgba(255,230,0,0.75) !important;
  box-shadow: 0 0 0 4px rgba(255,230,0,0.12) !important;
  background: rgba(255,255,255,0.07) !important;
}

#comment_form p,
#comment_form .field,
#comment_form .form__field{
  margin: 0 0 20px 0;
}

#comment_form [type="submit"],
#comment_form button{
  appearance:none;
  border:1px solid var(--bkk-yellow) !important;
  background: var(--bkk-yellow) !important;
  color: #000 !important;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition: transform .12s ease, opacity .12s ease, background .18s ease, color .18s ease;
}
#comment_form [type="submit"]:hover,
#comment_form button:hover{
  transform: translateY(-1px);
  opacity: 0.92;
  background: transparent !important;
  color: var(--bkk-yellow) !important;
}

/* =========================================================
   YOUTUBE POST
========================================================= */
.magazine-article.youtube-post .stage-content{
  display:block !important;
}

/* =========================================================
   EDITOR'S PICK BADGE (NEON GLOW)
========================================================= */
.editor-pick-badge {
    display: inline-block;
    background-color: var(--bkk-pink); /* Use Pink var */
    color: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 50px; /* Pill Shape */
    margin-bottom: 25px;
    margin-top: 15px;
    border: 1px solid rgba(255,255,255,0.8) !important;
    box-shadow: 0 0 18px rgba(255, 0, 204, 0.85), 0 0 35px rgba(255, 0, 204, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.2) !important;
}
.editor-pick-badge span { opacity: 1; }

/* =========================================================
   MID-ARTICLE PROMO BOX
========================================================= */
.bkk-mid-promo {
  background-color: var(--bkk-pink); /* Use Pink var */
  color: #ffffff;
  padding: 30px 24px;
  margin: 50px 0;
  text-align: center;
  position: relative;
  border: 2px solid #000;
  clip-path: polygon(0 0, calc(100% - var(--bkk-cut)) 0, 100% var(--bkk-cut), 100% 100%, 0 100%);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 2px, transparent 2px, transparent 8px);
}
.bkk-mid-promo::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--bkk-cut);
  height: var(--bkk-cut);
  background: rgba(0,0,0,0.2);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.bkk-mid-promo h3 {
  font-family: var(--font-heading-family);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.1;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  color: #ffffff !important;
  border-bottom: none !important;
}
.bkk-mid-promo p {
  font-family: var(--font-body-family);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 20px;
  color: #ffffff !important;
  opacity: 0.95;
}
.bkk-mid-promo .promo-btn {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 12px 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border: 2px solid #fff;
  border-radius: 50px;
  transition: all 0.2s ease;
}
.bkk-mid-promo .promo-btn:hover {
  background: #fff;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
  border: 2px solid #000 !important;
}

/* =========================================================
   BKK SCENE — GUIDES INDEX (Hub + Spokes)
========================================================= */

.bkk-guides-index {
  /* Define variables locally */
  --bkk-bg: #000000;
  --bkk-text: #f4f4f4;
  --bkk-yellow: #FFE600;
  --bkk-pink: #FF00CC; /* Hot Pink (Neon) */
  --bkk-cut: 20px;
  --font-heading-family: 'Helvetica', sans-serif;
  
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  background: var(--bkk-bg);
  color: var(--bkk-text);
  padding: 80px 0 120px; 
}

.bkk-guides-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

.bkk-guides-head {
  text-align: center;
  margin: 0 0 70px; 
}

.bkk-guides-title {
  margin: 0 0 20px 0; 
  line-height: 1.05;
  font-family: var(--font-heading-family);
}

/* MAIN TITLE ROW - TIGHTER */
.bkk-guides-title__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  
  font-weight: 900;
  color: #fff; /* White */
  
  font-size: clamp(40px, 4.5vw, 68px); 
  text-transform: none; 
  
  /* FORCE TIGHTER SPACING */
  letter-spacing: -8px !important; 
}

/* REMOVE THE DOTS completely */
.bkk-guides-title__main::before,
.bkk-guides-title__main::after {
  display: none !important; 
}

/* SUB-PART: "Guides" (Keep White/Thin, looks classy next to Yellow) */
.bkk-guides-title__main span {
  color: #fff !important;
  font-weight: 300 !important;
  letter-spacing: -1px; 
  margin-left: 0; 
}

/* SUBTITLE */
.bkk-guides-title__sub {
  display: block;
  font-weight: 500;
  opacity: 1;
  color: #fff;
  font-size: clamp(20px, 1.8vw, 26px);
  margin-top: 20px;
  letter-spacing: 0.5px;
}

/* INTRO */
.bkk-guides-intro {
  margin: 25px auto 0;
  max-width: 760px;
  opacity: .9;
  font-size: 1.15rem;
  line-height: 1.8;
  white-space: pre-wrap; 
}

/* Divider */
.bkk-guides-divider {
  border: 0 !important;
  height: 2px !important;
  width: 100% !important;
  margin: 100px auto !important; 
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,.22) 12%,
    rgba(255,255,255,.22) 88%,
    transparent 100%
  ) !important;
}

/* Shared cut-corner */
.bkk-hub-card,
.bkk-spoke-card,
.bkk-guide-card {
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--bkk-cut)) 0,
    100% var(--bkk-cut),
    100% 100%,
    0 100%
  );
}

/* PINK CORNER FOLD - WITH TRANSITION */
.bkk-hub-card::before,
.bkk-spoke-card::before,
.bkk-guide-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--bkk-cut);
  height: var(--bkk-cut);
  
  background: rgba(255, 0, 204, 0.85); 
  background: linear-gradient(
    to bottom left, 
    var(--bkk-pink) 0%, 
    rgba(255, 0, 204, 0.6) 100%
  );
  
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  
  z-index: 3;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* HUB CARD */
.bkk-hub-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  
  /* UPDATED: Increased border opacity from .18 to .35 */
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  
  background: #000;
  box-shadow: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bkk-hub-media{
  position: relative;
  min-height: 320px;
  background: #000;
  overflow: hidden; /* Ensures overlay stays contained */
}

/* THE NEW OVERLAY ELEMENT (Invisible by default) */
.bkk-hub-media::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Hidden normally */
  transition: opacity 0.3s ease, background-color 0.3s ease;
  z-index: 2; /* Sits on top of image */
  pointer-events: none; /* Lets clicks pass through */
}

.bkk-hub-img,
.bkk-hub-img--empty {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.bkk-hub-img--empty {
  background: rgba(255,255,255,0.06);
}

.bkk-hub-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  background: var(--bkk-pink);
  color: #fff;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: 12px;
  padding: 8px 12px;
}

.bkk-hub-body {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.bkk-hub-title {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.15;
  color: #fff;
  font-weight: 900;
  transition: color 0.2s ease;
}

.bkk-hub-excerpt {
  margin: 0;
  opacity: .88;
  line-height: 1.65;
  color: rgba(255,255,255,.92);
  transition: color 0.2s ease;
}

.bkk-hub-cta {
  margin-top: 6px;
  display: inline-block;
  width: fit-content;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--bkk-pink); 
  color: #fff;
  border: 1px solid var(--bkk-pink);
  font-weight: 800;
  transition: all 0.2s ease;
}

/* HUB FLASH EFFECT */
.bkk-hub-card:hover { 
  background-color: var(--bkk-pink); 
  border-color: var(--bkk-pink);
}
.bkk-hub-card:hover .bkk-hub-title { color: #fff; }
.bkk-hub-card:hover .bkk-hub-excerpt { color: #fff; opacity: 1; }
.bkk-hub-card:hover::before {
  background: #fff;
  box-shadow: -4px 4px 12px rgba(0,0,0,0.3);
}
.bkk-hub-card:hover .bkk-hub-cta {
  background: #fff;
  color: var(--bkk-pink);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* SPOKES */
.bkk-spokes { 
  margin-top: 60px;
}

.bkk-spokes-title {
  margin: 26px 0 24px;
  border-bottom: 3px dotted rgba(255,255,255,0.68);
  display: inline-block;
  padding-bottom: 3px;
  letter-spacing: 0.5px;
  text-transform: none !important;
}
.bkk-spokes-title .h3-main {
  display: block;
  font-weight: 900;
  color: var(--bkk-yellow); 
  line-height: 1.08;
}
.bkk-spokes-title .h3-sub {
  display: block;
  font-weight: 300;
  opacity: .92;
  margin-top: 3px;
  color: var(--bkk-text);
}

/* =========================================================
   SPOKES GRID (PATCH)
   - Force 3-up on desktop for BOTH hubs
   - If a --two helper class is present, keep it 3-up on desktop
   - 2-up on <=980px, 1-up on <=640px
========================================================= */
.bkk-guides-index .bkk-spokes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px; 
}

/* Keep the helper class, but do NOT allow it to force 2-up on desktop */
.bkk-guides-index .bkk-spokes-grid--two {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.bkk-spoke-card {
  border: 1px solid rgba(255,255,255,.18);
  background: #000;
  color: #fff;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 12px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bkk-spoke-num {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 4;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #000;
  color: var(--bkk-yellow);
  border: 1px solid rgba(255,230,0,.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
}

.bkk-spoke-thumb {
  width: 110px;
  height: 86px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}

.bkk-spoke-img, .bkk-spoke-img--empty {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.bkk-spoke-body { 
  padding-top: 2px;
  position: relative;
  padding-bottom: 35px; 
}

.bkk-spoke-title {
  margin: 0 0 6px 0;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  transition: color 0.2s ease;
}

.bkk-spoke-excerpt {
  margin: 0;
  opacity: .86;
  line-height: 1.45;
  color: rgba(255,255,255,.9);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.bkk-spoke-body::after {
  content: "READ DEEP DIVE →";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--bkk-pink);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

/* SPOKE FLASH EFFECT */
.bkk-spoke-card:hover { 
  background-color: var(--bkk-pink); 
  border-color: var(--bkk-pink); 
}
.bkk-spoke-card:hover::before {
  background: #fff;
  box-shadow: -4px 4px 12px rgba(0,0,0,0.3);
}
.bkk-spoke-card:hover .bkk-spoke-title { color: #fff; }
.bkk-spoke-card:hover .bkk-spoke-excerpt { color: #fff; opacity: 1; }
.bkk-spoke-card:hover .bkk-spoke-body::after {
  transform: translateY(-2px);
  background: #fff;
  color: var(--bkk-pink);
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
}

/* GRID HEADER */
.bkk-grid-header {
  margin: 0 0 30px;
}

.bkk-grid-title {
  font-family: var(--font-heading-family);
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--bkk-yellow);
  text-transform: none;
  border-bottom: 3px dotted rgba(255,255,255,0.68);
  display: inline-block;
  padding-bottom: 3px;
  line-height: 1.1;
}

/* GRID */
.bkk-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}

.bkk-guide-card {
  border: 1px solid rgba(255,255,255,.18);
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}

.bkk-guide-thumb {
  width: 100%;
  height: 180px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.bkk-guide-img, .bkk-guide-img--empty {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.bkk-guide-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bkk-guide-title {
  margin: 0;
  color: #fff; 
  font-weight: 900;
  line-height: 1.15;
  font-size: 1.15rem;
  transition: color 0.2s ease;
}

.bkk-guide-excerpt {
  margin: 0;
  opacity: .86;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
}

.bkk-guide-cta {
  margin-top: 8px;
  font-weight: 900;
  color: #fff;
  width: fit-content;
  border-bottom: 1px dotted rgba(255,230,0,0.55);
  transition: color 0.2s, border-color 0.2s;
}

.bkk-guide-card:hover { border-color: var(--bkk-pink); }
.bkk-guide-card:hover .bkk-guide-title { color: var(--bkk-yellow); } 
.bkk-guide-card:hover .bkk-guide-cta { 
  color: var(--bkk-pink);
  border-bottom-color: var(--bkk-pink); 
}

/* COMING SOON CARD */
.bkk-coming-soon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,255,255,0.25);
  padding: 40px 24px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--bkk-cut)) 0, 100% var(--bkk-cut), 100% 100%, 0 100%);
}

.bkk-coming-soon-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--bkk-cut);
  height: var(--bkk-cut);
  background: rgba(255,255,255,0.1);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: all 0.3s ease;
}

.bkk-coming-soon-card .cs-icon {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 16px;
}

.bkk-coming-soon-card .cs-icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--bkk-pink); /* Hot Pink Icon */
  transition: stroke 0.3s ease;
}

.bkk-coming-soon-card .cs-title {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 1.25rem;
  color: #fff;
  font-family: var(--font-heading-family);
}

.bkk-coming-soon-card .cs-text {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

.bkk-coming-soon-card .cs-cta {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--bkk-yellow);
  border-bottom: 1px dotted var(--bkk-yellow);
  transition: all 0.2s ease;
}

/* Coming Soon Hover */
.bkk-coming-soon-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--bkk-pink);
  transform: translateY(-2px);
}
.bkk-coming-soon-card:hover::before {
  background: var(--bkk-pink);
}
.bkk-coming-soon-card:hover .cs-icon svg {
  stroke: #fff; /* White on Hover */
}
.bkk-coming-soon-card:hover .cs-cta {
  color: var(--bkk-pink);
  border-bottom-color: var(--bkk-pink);
}

/* Responsive */
@media (max-width: 980px) {
  .bkk-hub-card { grid-template-columns: 1fr; }
  .bkk-hub-media { min-height: 260px; }
  .bkk-spokes-grid,
  .bkk-spokes-grid--two { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bkk-guides-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .bkk-spokes-grid,
  .bkk-spokes-grid--two { grid-template-columns: 1fr; }
  .bkk-guides-grid { grid-template-columns: 1fr; }
  .bkk-spoke-card { grid-template-columns: 96px 1fr; }
  .bkk-spoke-thumb { width: 96px; height: 76px; }
}

/* =========================================================
   SHOP FOOTER COUPON
========================================================= */
.magazine-article .shop-footer.full-bleed{
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  overflow: hidden;
  background-color: var(--bkk-yellow) !important;
  color: #000 !important;
  margin-top: 36px !important;
  
  /* dashed border logic */
  --cut-inset: 14px;
  --dash-thickness: 2px;
  --dash-len: 14px;
  --dash-gap: 10px;
  --scissor-size: 30px;
  --scissor-gap: 10px;
  --scissor-url: url("/cdn/shop/files/scissors-icon.svg?v=1765880299");
  --dash-start: calc(var(--cut-inset) + var(--scissor-size) + var(--scissor-gap));
  --dash-width: calc(100% - (2 * var(--dash-start)));

  background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,0.90) 0, rgba(0,0,0,0.90) var(--dash-len), transparent var(--dash-len), transparent calc(var(--dash-len) + var(--dash-gap))),
    repeating-linear-gradient(to right, rgba(0,0,0,0.90) 0, rgba(0,0,0,0.90) var(--dash-len), transparent var(--dash-len), transparent calc(var(--dash-len) + var(--dash-gap)));
  background-repeat: no-repeat, no-repeat;
  background-size: var(--dash-width) var(--dash-thickness), var(--dash-width) var(--dash-thickness);
  background-position: left var(--dash-start) top var(--cut-inset), left var(--dash-start) bottom var(--cut-inset);
}

.magazine-article .shop-footer.full-bleed .shop-footer-inner{
  position: relative;
  z-index: 10 !important;
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 16px;
  text-align: center;
  color: #000 !important;
}

.magazine-article .shop-footer.full-bleed .coupon-scissors{ display:none !important; }

.magazine-article .shop-footer.full-bleed::before,
.magazine-article .shop-footer.full-bleed::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: var(--scissor-size);
  z-index: 5;
  pointer-events:none;
  background-color: #000;
  -webkit-mask-image: var(--scissor-url), var(--scissor-url);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: var(--scissor-size) var(--scissor-size), var(--scissor-size) var(--scissor-size);
  -webkit-mask-position: left 0 top calc(var(--cut-inset) - (var(--scissor-size) / 2) + (var(--dash-thickness) / 2)), left 0 bottom calc(var(--cut-inset) - (var(--scissor-size) / 2) + (var(--dash-thickness) / 2));
  mask-image: var(--scissor-url), var(--scissor-url);
  mask-repeat: no-repeat, no-repeat;
  mask-size: var(--scissor-size) var(--scissor-size), var(--scissor-size) var(--scissor-size);
  mask-position: left 0 top calc(var(--cut-inset) - (var(--scissor-size) / 2) + (var(--dash-thickness) / 2)), left 0 bottom calc(var(--cut-inset) - (var(--scissor-size) / 2) + (var(--dash-thickness) / 2));
}
.magazine-article .shop-footer.full-bleed::before{ left: var(--cut-inset); }
.magazine-article .shop-footer.full-bleed::after{ right: var(--cut-inset); transform: scaleX(-1); transform-origin: center; }

.magazine-article .shop-footer .bkk-stamp{
  content: url("/cdn/shop/files/bkk-scene-logo.png?v=1765352072") !important;
  width: 90px !important;
  max-width: 90px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 18px auto !important;
}

.magazine-article .shop-footer .coupon-offer{
  display:inline-block;
  position: relative;
  margin: 18px 0 10px 0 !important;
  padding: 10px 16px !important;
  color: #000 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1px dashed rgba(0,0,0,0.65) !important;
  background: rgba(255,255,255,0.45) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.magazine-article .shop-footer .coupon-offer::before,
.magazine-article .shop-footer .coupon-offer::after{
  content:"";
  position:absolute;
  top:50%;
  width:14px;
  height:14px;
  border-radius:999px;
  background: var(--bkk-yellow);
  transform: translateY(-50%);
}
.magazine-article .shop-footer .coupon-offer::before{ left:-7px; }
.magazine-article .shop-footer .coupon-offer::after{ right:-7px; }

.magazine-article .shop-footer .shop-footer-title{ color: #000 !important; opacity: 1 !important; text-shadow: none !important; }
.magazine-article .shop-footer .shop-footer-sub{ color: rgba(0,0,0,0.82) !important; opacity: 1 !important; text-shadow: none !important; }

@media (max-width: 720px){
  .magazine-article .shop-footer.full-bleed .shop-footer-inner{ padding: 56px 16px !important; }
}

.magazine-article .shop-footer.full-bleed a.shop-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-top: 22px !important;
  padding: 16px 40px !important;
  background: #000 !important;
  color: var(--bkk-yellow) !important;
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 1.6px !important;
  font-weight: 900 !important;
  position: relative !important;
  z-index: 11 !important;
  transition: transform 180ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease, border-color 220ms ease !important;
}
.magazine-article .shop-footer.full-bleed a.shop-btn:hover,
.magazine-article .shop-footer.full-bleed a.shop-btn:focus-visible{
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
  border: 2px solid #000 !important;
}
.magazine-article .shop-footer.full-bleed a.shop-btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.18), 0 10px 26px rgba(0,0,0,0.18) !important;
}

/* ========================================= */
/* START: HEADER BORDER (MATCHING LINKS)    */
/* ========================================= */

/* 1. RESET: Remove from wrong headers */
.header-wrapper::after, 
header::after {
  display: none !important;
}

/* 2. APPLY: Add the "Painted" line to Main Header */
#header-group .header-wrapper::after,
#header-group header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  
  /* HEIGHT: Matches the thickness of the link underline */
  height: 2px; 
  
  /* THE PAINTED DOTS (Exact match to link hover) */
  background-image: linear-gradient(to right,rgb(255, 255, 255) 40%, rgba(255, 255, 255, 0) 0%) !important;
  background-position: bottom;
  background-size: 6px 2px; /* 6px wide pattern to match links */
  background-repeat: repeat-x;
  
  /* Remove the old standard border */
  border-bottom: none !important; 
  
  z-index: 99999; 
  pointer-events: none; 
  display: block !important;
}

/* ========================================= */
/* START: HEADER MASTER (SWAPPED COLORS)    */
/* ========================================= */

/* 1. RESET & SETUP */
.menu-list__link,
.header__menu-item,
.menu-list__link span,
.header__menu-item span {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    padding-bottom: 1px; 
    border-bottom: 2px solid transparent; 
    transition: color 0.2s ease;
    background-image: none !important; 
}

/* 2. HOVER STATE: YELLOW (Matches Buttons) */
.menu-list__link:hover .menu-list__link-title,
.menu-list__link:hover span,
.header__menu-item:hover span {
    color: #FFD700 !important; /* Taxi Yellow */
    
    /* YELLOW DOTS */
    background-image: linear-gradient(to right, #FFD700 40%, rgba(255, 255, 255, 0) 0%) !important;
    background-position: bottom;
    background-size: 6px 2px;
    background-repeat: repeat-x;
}

/* 3. ACTIVE STATE: PINK (Matches Tags/Location) */
.menu-list__link--active .menu-list__link-title, 
.menu-list__link--active span {
    color: #FF00FF !important; /* Neon Pink */
    opacity: 1 !important;
    
    /* PINK DOTS */
    background-image: linear-gradient(to right, #FF00FF 40%, rgba(255, 255, 255, 0) 0%) !important;
    background-position: bottom;
    background-size: 6px 2px;
    background-repeat: repeat-x;
}

/* 4. LOGO PROTECTION SHIELD */
.header__heading-link,
.header__heading-link:hover,
.header__heading a,
.header__heading a:hover {
    background-image: none !important;
    text-decoration: none !important;
    color: inherit !important; 
    border: none !important;
}

/* 5. ICONS: YELLOW HOVER (To Match Links) */
.header__icon,
.header-actions__action {
    transition: transform 0.2s ease;
}

/* HOVER STATE: Pop + Yellow */
.header__icon:hover,
.header-actions__action:hover {
    color: #FFD700 !important; /* Yellow */
    transform: scale(1.15);    
    background-image: none !important; 
    padding-bottom: 0 !important;
    border: none !important;
}

/* COLOR THE LINES ONLY */
.header__icon:hover svg,
.header-actions__action:hover svg,
.header__icon:hover path,
.header-actions__action:hover path {
    fill: none !important;       
    stroke: #FFD700 !important;  /* Yellow Stroke */
}

/* =========================================================
   DRINKS HUB (ORANGE) - ADDED TO END OF CSS
   Duplicates the Food Hub styles but swaps #ff2bd6 for #ff8c00
   ========================================================= */

/* Drinks Hub Main Card: Black by default */
.bkk-guides-index .bkk-hub-card--drinks {
  background: #000;
  border-color: rgba(255,255,255,0.18);
}
.bkk-guides-index .bkk-hub-card--drinks .bkk-hub-title { color: #fff; }
.bkk-guides-index .bkk-hub-card--drinks .bkk-hub-excerpt { color: rgba(255,255,255,0.92); }

/* Drinks Hub Main Card: Orange on Hover */
.bkk-guides-index .bkk-hub-card--drinks:hover {
  background: #ff8c00; /* Orange */
  border-color: #ff8c00;
}
.bkk-guides-index .bkk-hub-card--drinks:hover .bkk-hub-title { color: #fff; }
.bkk-guides-index .bkk-hub-card--drinks:hover .bkk-hub-excerpt { color: #fff; opacity: 1; }

/* Drinks Hub Button: Orange by default, Black/Orange on hover */
.bkk-guides-index .bkk-hub-card--drinks .bkk-hub-cta {
  background: #ff8c00;
  color: #fff;
  border: 1px solid #ff8c00;
}
.bkk-guides-index .bkk-hub-card--drinks:hover .bkk-hub-cta {
  background: #fff;
  color: #ff8c00;
  border-color: #fff;
}

/* Drinks Hub Corner Fold - Orange */
.bkk-guides-index .bkk-hub-card--drinks::before {
  background: rgba(255, 140, 0, 0.85);
  background: linear-gradient(to bottom left, #ff8c00 0%, rgba(255, 140, 0, 0.6) 100%);
}
/* Drinks Hub Corner Fold on hover - White */
.bkk-guides-index .bkk-hub-card--drinks:hover::before {
  background: #fff;
}

/* Drinks Hub Badge - Orange */
.bkk-guides-index .bkk-hub-card--drinks .bkk-hub-badge {
  background: #ff8c00;
}

/* --- Drinks Spokes --- */

/* Drinks Spokes Hover: Orange Border & Background */
.bkk-guides-index .bkk-spoke-card--drinks:hover {
  border-color: #ff8c00;
  background-color: #ff8c00;
}
.bkk-guides-index .bkk-spoke-card--drinks:hover .bkk-spoke-title { color: #fff; }
.bkk-guides-index .bkk-spoke-card--drinks:hover .bkk-spoke-excerpt { color: #fff; opacity: 1; }

/* Drinks Spoke Corner Fold: Orange -> White on hover */
.bkk-guides-index .bkk-spoke-card--drinks::before {
  background: rgba(255, 140, 0, 0.85);
  background: linear-gradient(to bottom left, #ff8c00 0%, rgba(255, 140, 0, 0.6) 100%);
}
.bkk-guides-index .bkk-spoke-card--drinks:hover::before {
  background: #fff;
}

/* Drinks Spoke Number - Orange */
.bkk-guides-index .bkk-spoke-card--drinks .bkk-spoke-num {
  color: #ff8c00;
  border-color: rgba(255, 140, 0, 0.55);
}

/* Drinks Spoke Button - Orange -> White on hover */
.bkk-guides-index .bkk-spoke-card--drinks .bkk-spoke-body::after {
  background: #ff8c00;
  color: #fff;
}
.bkk-guides-index .bkk-spoke-card--drinks:hover .bkk-spoke-body::after {
  background: #fff;
  color: #ff8c00;
}

/* --- New Drinks Image Tint Rules --- */

/* 1. Set the tint color to Orange for Drinks card */
.bkk-guides-index .bkk-hub-card--drinks .bkk-hub-media::after {
  background-color: #ff8c00;
  /* Optional: 'multiply' gives a richer tint than just plain opacity.
     Remove this line if you want a flatter orange look. */
  mix-blend-mode: multiply;
}

/* 2. Make it visible on hover */
.bkk-guides-index .bkk-hub-card--drinks:hover .bkk-hub-media::after {
  /* Adjust this value (0.1 - 1.0) to make the tint lighter or darker */
  opacity: 0.7;
}

/* =========================================================
   IMAGE TINT OVERLAYS (HUBS & SPOKES)
   Applies colored tint on hover to both big and small cards
   ========================================================= */

/* 1. Base Overlay Setup (Applies to all) */
.bkk-hub-media,
.bkk-spoke-thumb {
  position: relative;
  overflow: hidden; 
}

/* Create the invisible overlay layer */
.bkk-hub-media::after,
.bkk-spoke-thumb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
  z-index: 2; /* Sits on top of image */
  pointer-events: none;
  mix-blend-mode: multiply; /* Richer color blending */
}

/* 2. DRINKS (ORANGE) TINT */
/* Set color */
.bkk-guides-index .bkk-hub-card--drinks .bkk-hub-media::after,
.bkk-guides-index .bkk-spoke-card--drinks .bkk-spoke-thumb::after {
  background-color: #ff8c00;
}
/* Trigger on Hover (Main Card) */
.bkk-guides-index .bkk-hub-card--drinks:hover .bkk-hub-media::after {
  opacity: 0.7; 
}
/* Trigger on Hover (Spoke Card) */
.bkk-guides-index .bkk-spoke-card--drinks:hover .bkk-spoke-thumb::after {
  opacity: 0.7;
}

/* 3. FOOD (PINK) TINT */
/* Set color */
.bkk-guides-index .bkk-hub-card--food .bkk-hub-media::after,
.bkk-guides-index .bkk-spoke-card--food .bkk-spoke-thumb::after {
  background-color: #ff00cc;
}
/* Trigger on Hover (Main Card) */
.bkk-guides-index .bkk-hub-card--food:hover .bkk-hub-media::after {
  opacity: 0.7;
}
/* Trigger on Hover (Spoke Card) */
.bkk-guides-index .bkk-spoke-card--food:hover .bkk-spoke-thumb::after {
  opacity: 0.7;
}
/* Spoke Card */
.bkk-spoke-card {
  position: relative; 
  display: grid; 
  grid-template-columns: 110px 1fr; /* Ensures layout stays stable */
  gap: 12px;
  padding: 12px;
  
  /* UPDATED BORDER: Matches the main card visibility now */
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  
  text-decoration: none; 
  overflow: hidden; 
  background: #000;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* =========================================================
   PATCH: ALIGN ARTICLE CONTENT LEFT WITH NUMBERS
   Changes layout from Flex to Block/Float to align text 
   edge with the number edge.
   ========================================================= */

/* 1. Reset the container from Flex to Block */
.magazine-article .stage-item {
    display: block !important;
    position: relative !important;
    padding-left: 0 !important; /* Maximize left alignment */
    gap: 0 !important; /* Remove flex gap */
    overflow: hidden; /* Clear floats nicely */
}

/* 2. Float the number container to the left */
.magazine-article .stage-number-container {
    float: left !important;
    margin-right: 35px !important; /* Space between number and text */
    margin-top: 5px !important; /* Slight optical adjustment for H3 alignment */
    margin-bottom: 15px !important; /* Space below if text wraps under */
}

/* 3. Ensure content block behaves correctly next to float */
.magazine-article .stage-content {
    display: block !important;
    width: auto !important;
    overflow: visible !important; /* Allow shadows/glows to spill */
}

/* 4. Tighten up the H3 margin so it aligns with the top of the number ball */
.magazine-article .stage-content h3 {
   margin-top: 0 !important;
   padding-top: 0 !important;
}
/* =========================================================
   PATCH: "WHERE" LINK STABLE HOVER (FINAL)
   - Zero Jolt (Fixed Dimensions)
   - Circle turns Neon Pink on Hover
   ========================================================= */

/* 1. Base State: White Circle, Black Arrow */
.magazine-article .stage-content p.uniform a::after {
    content: "▶" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Fixed Layout */
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    margin-left: 12px !important;
    vertical-align: middle !important;
    font-size: 10px !important; /* Slightly smaller arrow fits better */
    
    /* Colors: White Background */
    background-color: #fff !important;
    color: #000 !important;
    
    /* Border prevents jolt (invisible white border matches bg) */
    border: 2px solid #fff !important;
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* 2. Hover State: Neon Pink Circle, White Arrow */
.magazine-article .stage-content p.uniform a:hover::after {
    /* Change Colors */
    background-color: var(--bkk-pink) !important;
    color: #fff !important;
    border-color: var(--bkk-pink) !important; /* Border changes color but keeps size */
    
    /* Add Neon Glow */
    box-shadow: 0 0 10px var(--bkk-pink), 0 0 20px var(--bkk-pink) !important;
    
    /* Stabilize Layout */
    text-decoration: none !important;
    display: inline-flex !important;
}

/* 3. Hover State: Text Dotted Underline */
.magazine-article .stage-content p.uniform a:hover {
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-decoration-color: #fff !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 6px !important;
}
/* =========================================================
   PATCH: Stage title alignment vs number circle
   - tighter to circle
   - vertically centered like FAQ header
========================================================= */
.magazine-article .stage-item{
  gap: 15px !important;          /* was wider (tighten to circle) */
}

.magazine-article .stage-number-container{
  margin-top: 0 !important;      /* remove tiny drop */
}

/* Make the H3 occupy the same height as the circle and center its 2 lines */
.magazine-article .stage-content h3{
  display: inline-flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 70px;              /* matches .stage-number-container (70px) */
  margin: 0 0 18px 0 !important;
}

/* Tighten main/sub spacing just a touch */
.magazine-article .stage-content h3 .h3-sub,
.magazine-article .stage-content h3 .subhead-detail{
  margin-top: 2px !important;
  line-height: 1.12 !important;
}
/* =========================================================
   PATCH: Stage H3 alignment (tight + vertically centered like FAQ)
   ========================================================= */

/* 1) Tighten the horizontal spacing to match FAQ */
.magazine-article .stage-item .stage-number-container{
  margin-right: 16px !important; /* was 35px in the float patch */
}

/* 2) Nudge the two-line H3 down slightly so it "centers" on the 70px circle */
.magazine-article .stage-item .stage-content > h3{
  margin-top: 2px !important;  /* tweak 8–12px if you want */
}

/* Slightly smaller nudge on mobile */
@media (max-width: 767px){
  .magazine-article .stage-item .stage-content > h3{
    margin-top: 6px !important;
  }
}
/* =========================================================
   PATCH: GLOBAL CONTENT INSET (BREATHING ROOM)
   - Pulls all article content in by 20px on left & right.
   - Prevents neon glows (badges, boxes, buttons) from clipping.
   ========================================================= */

.magazine-article {
    /* Override existing max-width logic to ensure padding exists */
    padding-left: 20px !important;
    padding-right: 20px !important;
    
    /* Ensure padding is included in total width calculation */
    box-sizing: border-box !important;
    
    /* Ensure shadows/glows can spill into the padded area */
    overflow: visible !important; 
}

/* Optional: Slight adjustment for very small mobile screens */
@media (max-width: 480px) {
    .magazine-article {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}
/* =========================================================
   PATCH: FIX NEON CLIPPING (FINAL)
   1. Increases breathing room to 35px so large glows fit.
   2. Forces "overflow: visible" to stop cutting edges.
   ========================================================= */

/* 1. Create a larger safe zone around ALL content */
.magazine-article {
    padding-left: 35px !important;
    padding-right: 35px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    
    /* CRITICAL: Allow glows to spill outside the box */
    overflow: visible !important;
}

/* 2. Ensure the "Where" box respects this new space */
.magazine-article .stage-content p.uniform {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    
    /* Ensure the box itself doesn't clip its own outer glow */
    overflow: visible !important; 
    transform: translateZ(0); /* Forces browser to render layers correctly */
}

/* 3. Force main page containers to allow spillover (Shopify specific) */
main#MainContent, 
.page-width, 
.article-template {
    overflow: visible !important;
}
/* =========================================================
   PATCH: FIX CUT-OFF NEON GLOWS
   Gives specific elements "breathing room" from the edge 
   so their shadows don't get clipped.
   ========================================================= */

/* 1. Editor's Pick Badge: Push away from left edge */
.editor-pick-badge {
    margin-left: 10px !important; /* Make room for left shadow */
    margin-right: 10px !important;
    display: inline-block !important; /* Ensures margin is respected */
    position: relative !important;
    z-index: 10 !important; /* Lift above other elements */
}

/* 2. Where Box: Squeeze slightly to show side glows */
.magazine-article .stage-content p.uniform {
    width: auto !important; /* Stop forcing 100% width */
    margin-left: 10px !important;  /* Space for left glow */
    margin-right: 10px !important; /* Space for right glow */
    
    /* Ensure the parent doesn't clip the spillover */
    transform: translateZ(0); 
}

/* 3. Force Parents to Allow Glow Spillover */
.magazine-article, 
.stage-content, 
.stage-item {
    overflow: visible !important;
}
/* =========================================================
   PATCH: FORCE VISIBLE GLOW (NO SHRINKING)
   - Keeps boxes 100% width (tight to edge).
   - Forces all containers to let the neon glow spill out.
   ========================================================= */

/* 1. Force the Neon Box & Badge to full width (Tight to edge) */
.magazine-article .stage-content p.uniform {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.editor-pick-badge {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. FORCE GLOW TO SHOW (Disable Clipping on Parents) */
/* This is usually what cuts off the shadow */
.magazine-article, 
.stage-item, 
.stage-content, 
.article-template,
#MainContent,
.page-width {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* 3. Small Mobile Padding Adjustment */
/* Ensures the screen edge itself doesn't cut the glow on mobile */
@media (max-width: 480px) {
  .magazine-article {
    padding-left: 20px !important; /* Slight buffer for glow */
    padding-right: 20px !important;
  }
}
/* =========================================================
   PATCH: FORCE DOTTED LINE ON ALL POST IMAGES (NO GAP)
   ========================================================= */

/* 1. Target the main featured image at the top of posts */
.article-template__hero-container img,
.blog-post-featured-image img,
.article-template img[itemprop="image"],
/* 2. Target standard images inside the article content body */
.magazine-article img,
.article-template__content img {
    /* The Signature Dotted Line */
    border-bottom: 3px dotted rgba(255, 255, 255, 0.68) !important;
    
    /* GAP REMOVED: Set padding to 0 so line touches image */
    padding-bottom: 0 !important; 
    
    /* Push text away from the line */
    margin-bottom: 45px !important;
    
    /* Reset box model */
    box-sizing: content-box !important; 
    display: block !important;
    height: auto !important;
}

/* 3. EXCLUSION ZONE: Prevent this from breaking small icons */
.magazine-article .shop-footer img,
.magazine-article .bkk-stamp,
img.bkk-stamp,
img.coupon-scissors,
.header__icon img,
.footer__logo img {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
/* =========================================================
   PATCH: MAKE "GUIDES" TITLE ORANGE
   ========================================================= */
.bkk-guides-title__main span,
.bkk-guides-title__suffix {
    color: #FF8C00 !important; /* Neon Orange */
}
/* =========================================================
   PATCH: RESET IMAGES & TARGET ONLY FEATURED IMAGE
   ========================================================= */

/* 1. RESET: Remove dotted line from ALL images inside the post body */
.magazine-article img,
.article-template__content img,
.stage-item img,
.stage-content img,
.article-image {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 20px !important; /* Standard spacing only */
}

/* 2. APPLY: Add dotted line ONLY to the main Top/Featured Image */
.article-template__hero-container img,   /* Standard Shopify Hero */
.blog-post-featured-image img,           /* Common Theme Class */
.featured-image-wrapper img,             /* Common Theme Class */
.bkk-guides-hero-image {                 /* Your Custom Hub Hero */
    border-bottom: 3px dotted rgba(255, 255, 255, 0.68) !important;
    padding-bottom: 0 !important;
    margin-bottom: 45px !important;
    box-sizing: content-box !important;
    display: block !important;
    width: 100% !important;
}
/* MOBILE: add breathing room around the header logo */
@media screen and (max-width: 749px){
  /* give the logo link actual padding */
  #header-group a.header-logo{
    padding: 10px !important; /* 10 + 60 + 10 = 80px total */
  }

  /* shrink the logo image so padding can exist */
  #header-group img.header-logo__image{
    width: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
  }

  /* belt + braces: ensure center column truly centers */
  #header-group .header__column--center{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}
/* MOBILE: make arrows render consistently + never wrap awkwardly */
.bkk-arrow{
  display:inline-block;
  line-height:1;
  position:relative;
  top:-0.02em; /* tiny baseline lift */
  font-family: inherit;
  font-weight: inherit;
}

.bkk-hub-cta,
.bkk-guide-cta,
.cs-cta{
  white-space: nowrap;
}
.magazine-article,
.bkk-guides-index,
.rte,
.prose{
  font-variant-emoji: text;
}

/* =========================================================
   GLOBAL ARROW GLYPH FIX (FORCE TEXT, NOT EMOJI)
   Fixes ▶ turning into the blue “play button” on phones
========================================================= */

/* Force text presentation via variation selector (FE0E) */
.magazine-article .stage-content p.uniform a::after,
.magazine-article .bkk-top-picks-card a.tp-link::before{
  content: "\25B6\FE0E" !important; /* ▶︎ (text style, not emoji) */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-variant-emoji: text;
}

/* If you use → inside CSS-generated labels, force text style too */
.bkk-spoke-body::after{
  content: "READ DEEP DIVE \2192\FE0E" !important; /* →︎ */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-variant-emoji: text;
}




/* =========================================================
   FIX: Pink curated cards (mobile 1-up) + text visibility
   ========================================================= */

/* 1) Force 1-up earlier (covers iPhone + big phones + iPad portrait) */
@media (max-width: 820px){
  .bkk-guides-grid,
  .bkk-spokes-grid{
    grid-template-columns: 1fr !important;
  }
}

/* 2) Your global blog-card rule forces text to black.
      Override it for the black/pink card sections. */
.bkk-guide-card .blog-post-card__content a div,
.bkk-guide-card .blog-post-card__content a h3,
.bkk-guide-card .card__heading,
.bkk-guide-card .bkk-guide-title,
.bkk-guide-card .bkk-guide-excerpt,
.bkk-guide-card .bkk-guide-cta,
.bkk-spoke-card .blog-post-card__content a div,
.bkk-spoke-card .blog-post-card__content a h3,
.bkk-spoke-card .card__heading,
.bkk-spoke-card .bkk-spoke-title,
.bkk-spoke-card .bkk-spoke-excerpt{
  color: #fff !important;
}

/* 3) Make sure body spacing exists so text doesn’t look “missing” */
.bkk-guide-body,
.bkk-spoke-body{
  padding-top: 14px !important;
}
/* =========================================================
   PATCH: BRUNCH FEATURE CARD — MATCH OTHER CARDS (FULL WIDTH)
   - No rounded corners
   - Same cut-corner + corner fold
   - Same border + hover flash + CTA pill
   Scope: Guides index only
========================================================= */

.bkk-guides-index .bkk-brunch-masonry{
  margin-top: 24px;
}

.bkk-guides-index .bkk-brunch-card{
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;

  background: #000 !important;
  color: #fff !important;
  text-decoration: none !important;

  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  position: relative;
  overflow: hidden;

  /* same cut-corner as other cards */
  clip-path: polygon(
    0 0,
    calc(100% - var(--bkk-cut)) 0,
    100% var(--bkk-cut),
    100% 100%,
    0 100%
  );

  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* same corner fold */
.bkk-guides-index .bkk-brunch-card::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--bkk-cut);
  height: var(--bkk-cut);
  background: linear-gradient(
    to bottom left,
    var(--bkk-pink) 0%,
    rgba(255, 0, 204, 0.6) 100%
  );
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  z-index: 3;
  pointer-events: none;
  transition: all 0.3s ease;
}

.bkk-guides-index .bkk-brunch-media{
  position: relative;
  min-height: 320px;
  background: #000;
  overflow: hidden;
  border-radius: 0 !important;
}

.bkk-guides-index .bkk-brunch-img,
.bkk-guides-index .bkk-brunch-img--empty{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0 !important;
}

.bkk-guides-index .bkk-brunch-img--empty{
  background: rgba(255,255,255,0.06);
}

/* badge same style as hub badge */
.bkk-guides-index .bkk-brunch-badge{
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  background: var(--bkk-pink);
  color: #fff;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 0 !important;
}

.bkk-guides-index .bkk-brunch-body{
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.bkk-guides-index .bkk-brunch-title{
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.15;
  color: #fff !important;
  font-weight: 900;
}

.bkk-guides-index .bkk-brunch-excerpt{
  margin: 0;
  opacity: .88;
  line-height: 1.65;
  color: rgba(255,255,255,.92) !important;
}

/* CTA same pill vibe as hub CTA */
.bkk-guides-index .bkk-brunch-cta{
  margin-top: 6px;
  display: inline-block;
  width: fit-content;

  padding: 12px 22px;
  border-radius: 999px;

  background: var(--bkk-pink);
  color: #fff !important;
  border: 1px solid var(--bkk-pink);

  font-weight: 800;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

/* hover: same flash as hub cards */
.bkk-guides-index .bkk-brunch-card:hover{
  background-color: var(--bkk-pink) !important;
  border-color: var(--bkk-pink) !important;
}

.bkk-guides-index .bkk-brunch-card:hover::before{
  background: #fff;
  box-shadow: -4px 4px 12px rgba(0,0,0,0.3);
}

.bkk-guides-index .bkk-brunch-card:hover .bkk-brunch-title,
.bkk-guides-index .bkk-brunch-card:hover .bkk-brunch-excerpt{
  color: #fff !important;
  opacity: 1;
}

.bkk-guides-index .bkk-brunch-card:hover .bkk-brunch-cta{
  background: #fff !important;
  color: var(--bkk-pink) !important;
  border-color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* responsive: collapse like hub card */
@media (max-width: 980px){
  .bkk-guides-index .bkk-brunch-card{
    grid-template-columns: 1fr;
  }
  .bkk-guides-index .bkk-brunch-media{
    min-height: 260px;
  }
}
/* =========================================================
   PATCH: BRUNCH TITLE SIZE + NUMBER BADGE = 7
========================================================= */

/* 1) Make brunch title match the other card title scale */
.bkk-guides-index .bkk-brunch-title{
  font-family: var(--font-heading-family) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;

  /* bump it up so it matches the visual size of the spoke titles */
  font-size: clamp(1.55rem, 1.85vw, 2.05rem) !important;

  color: #fff !important;
}

/* 2) Convert the top-left “Brunch” badge into the same number circle style */
.bkk-guides-index .bkk-brunch-badge{
  /* same positioning as your spoke numbers */
  left: 12px !important;
  top: 12px !important;

  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;

  background: #000 !important;
  border: 1px solid rgba(255,230,0,.55) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* hide existing text (“Brunch”) */
  font-size: 0 !important;
  padding: 0 !important;

  z-index: 4 !important;
}

/* inject the number */
.bkk-guides-index .bkk-brunch-badge::before{
  content: "7" !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--bkk-yellow) !important;
}
/* =========================================================
   PATCH: BRUNCH TITLE = SAME SIZE AS OTHER CARDS
   (override the earlier brunch title bump)
========================================================= */
.bkk-guides-index .bkk-brunch-title{
  font-size: clamp(1.35rem, 1.6vw, 1.55rem) !important; /* matches card-title scale */
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}
/* =========================================================
   BKK SCENE — POLICY PAGE HEADLINES (Shipping / Returns etc.)
   Paste into: Theme settings → Custom CSS (or base.css bottom)
   ========================================================= */

/* 1) Container spacing + readable width */
.shopify-policy__container{
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 44px) 18px clamp(40px, 6vw, 70px);
}

/* 2) Kill any weird highlight/backplate + normalize spacing */
.shopify-policy__title{
  text-align: center;
  margin: 0 0 26px;
}
.shopify-policy__title h1{
  display: inline-block;        /* keeps it tight and classy */
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  font-size: clamp(34px, 4.2vw, 56px) !important;
  color: #111 !important;
}

/* Optional: subtle BKK accent underline (comment out if you don’t want it) */
.shopify-policy__title h1::after{
  content:"";
  display:block;
  width: 92px;
  height: 3px;
  margin: 14px auto 0;
  background: #FF8C00;
  border-radius: 999px;
  opacity: .95;
}

/* 3) Make all section headings (like “Products & Processing Times”, regions) nicer */
.shopify-policy__body .rte h2{
  margin: 40px 0 14px !important;
  padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,.14);

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  color: #111 !important;
}
.shopify-policy__body .rte h3{
  margin: 26px 0 10px !important;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  color: #111 !important;
}

/* 4) Clean up hr so it matches your separators */
.shopify-policy__body .rte hr{
  border: 0 !important;
  height: 1px !important;
  background: rgba(0,0,0,.12) !important;
  margin: 26px 0 !important;
}

/* 5) If anything is using <mark> highlights anywhere in policies, kill it */
.shopify-policy__container mark,
.shopify-policy__container .rte mark{
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 6) Slightly nicer list spacing */
.shopify-policy__body .rte ul{
  margin: 10px 0 18px 1.15em;
}
.shopify-policy__body .rte li{
  margin: 8px 0;
}

/* FOOTER: payment icons smaller + dimmer (force override) */
footer .payment-icons{
  opacity: 0.70 !important;          /* dims everything inside */
}

/* =========================================================
   1. FOOTER ICONS (Restored & Cleaned)
   ========================================================= */
footer .payment-icons img,
footer .payment-icons svg {
  height: 18px !important;
  width: auto !important;
  max-height: 18px !important;
  filter: grayscale(100%) !important; /* Keeps them subtle */
  opacity: 0.7;
}
footer .payment-icons {
  gap: 6px !important;
}
footer .payment-icons * {
  margin: 0 !important;
}


/* =========================================================
   BKK SCENE — PRODUCT PAGE "DARK NEON" MAKEOVER (FINAL V2)
   1. Dark Backgrounds
   2. Tighter Image Zoom & Rounding
   3. Neon Pink Labels + Orange Buttons
   ========================================================= */

/* 1. FORCE BLACK BACKGROUND (Global Override) */
body.template-product,
main[data-template*='product'],
main[data-template*='product'] > .shopify-section:first-child,
main[data-template*='product'] .section-background,
main[data-template*='product'] .gradient {
  background-color: #000 !important;
  background: #000 !important;
  color: #fff !important;
  border-top: none !important;
  box-shadow: none !important;
}


/* 3. NEON BUTTONS */

/* Primary "Add to Cart" -> NEON ORANGE PILL */
main[data-template*='product'] .product-form__submit,
main[data-template*='product'] button[name="add"] {
  background-color: #ff8c00 !important; /* Neon Orange */
  color: #000 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.6) !important; /* The Glow */
  opacity: 1 !important;
}

/* Secondary "Buy it Now" -> GHOST WHITE */
main[data-template*='product'] .shopify-payment-button__button {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  color: #fff !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
main[data-template*='product'] .shopify-payment-button__button:hover {
  border-color: #fff !important;
  background-color: rgba(255,255,255,0.1) !important;
}

/* 4. TEXT & INPUTS (Neon Accents Added) */

/* Main Title - White */
main[data-template*='product'] h1, 
main[data-template*='product'] .product__title h1 {
  color: #ffffff !important;
}

/* Labels (Size, Color, Quantity) -> NEON PINK Accent */
main[data-template*='product'] label,
main[data-template*='product'] .form__label,
main[data-template*='product'] .quantity__label {
  color: #FF00CC !important; /* Neon Pink */
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Neon Price -> Orange */
main[data-template*='product'] .price .price-item--regular,
main[data-template*='product'] .price .price-item--sale {
  color: #ff8c00 !important;
  text-shadow: 0 0 10px rgba(255,140,0,0.4);
  font-size: 1.5rem !important;
}

/* Description Text - Brighter Grey for readability */
main[data-template*='product'] p,
main[data-template*='product'] li,
main[data-template*='product'] .product__description,
main[data-template*='product'] .accordion__content {
  color: rgba(255,255,255,0.92) !important;
}

/* Inputs (Size/Color/Qty Dropdowns) - Dark theme */
main[data-template*='product'] select,
main[data-template*='product'] input,
main[data-template*='product'] .quantity__input,
main[data-template*='product'] .field__input {
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
}
main[data-template*='product'] .quantity {
  background-color: #111 !important;
  border: 1px solid #333 !important;
  border-radius: 50px !important;
}
main[data-template*='product'] .quantity__button {
  color: #fff !important;
}
main[data-template*='product'] .icon-caret { color: #fff !important; }




/* =========================================================
   BKK SCENE — MOBILE SYSTEM FIXES (Cleaned)
   Keeps the Seam & Form fixes. 
   ========================================================= */
@media screen and (max-width: 989px) {
  
  /* 1. SEAM FIX (Default Black for Guides) */
  #header-group + main { position: relative !important; top: -1px !important; }
  
  #header-group + main .shopify-section:first-child,
  #header-group + main .shopify-section:first-child .section-background {
    background-color: #000 !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }

  /* 2. Keyline Restoration (Forms) */
  :is(.bkk-contact, .bkk-adv-form) :is(input, textarea, select) {
    border-top: 1px solid rgba(0,0,0,0.2) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2) !important;
    margin-top: 1px !important;
  }
}
/* =========================================================
   BKK SCENE — PRODUCT ACCORDIONS (NEON STYLE)
   Fixes visibility and adds neon hover effects.
   ========================================================= */

/* 1. The Container Borders (Subtle White) */
main[data-template*='product'] .product__accordion,
main[data-template*='product'] details {
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  border-bottom: none !important;
}
/* Close the bottom of the last one */
main[data-template*='product'] .product__accordion:last-child,
main[data-template*='product'] details:last-of-type {
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

/* 2. The Title Text (White & Uppercase) */
main[data-template*='product'] summary,
main[data-template*='product'] .accordion__title {
  padding: 15px 0 !important;
  color: #fff !important; 
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

/* 3. The Icon (Neon Pink Arrow/Plus) */
main[data-template*='product'] summary .icon,
main[data-template*='product'] summary svg {
  color: #FF00CC !important; 
  fill: #FF00CC !important;
  width: 12px !important;
  height: 12px !important;
}

/* 4. Hover Effect (Text Glows Orange) */
main[data-template*='product'] summary:hover,
main[data-template*='product'] summary:hover .accordion__title {
  color: #ff8c00 !important;
  text-shadow: 0 0 10px rgba(255,140,0,0.6) !important;
}

/* 5. The Content Inside (Readable Grey) */
main[data-template*='product'] .accordion__content,
main[data-template*='product'] details[open] > :not(summary),
main[data-template*='product'] details p {
  color: rgba(255,255,255,0.85) !important;
  padding-bottom: 20px !important;
  line-height: 1.6 !important;
  margin-top: 5px !important;
}
/* =========================================================
   BKK SCENE — PRODUCT TEXT VISIBILITY PATCH
   Fixes "You may also like" and Accordion Links/Emails
   ========================================================= */

/* 1. Fix "You may also like" / Recommendations Title */
/* Forces specific recommendation headings to be white */
body.template-product .product-recommendations__heading,
body.template-product .related-products__heading,
body.template-product .section-header__title,
body.template-product .product-recommendations h2,
body.template-product .product-recommendations h3,
body.template-product .section-resource-list__content h3 {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* 2. Fix Links & Emails inside Accordions */
/* Turns links (like emails) Neon Orange so they are visible */
main[data-template*='product'] .accordion__content a,
main[data-template*='product'] .product__description a,
main[data-template*='product'] details[open] a {
  color: #ff8c00 !important; /* Neon Orange */
  text-decoration: underline;
  text-decoration-color: rgba(255,140,0,0.5);
  font-weight: 700 !important;
}

/* 3. Fix Bold Text inside Accordions */
main[data-template*='product'] .accordion__content strong,
main[data-template*='product'] .product__description strong {
  color: #ffffff !important; /* Pure White */
  font-weight: 900 !important;
}
/* Force hide sticky add to cart bar */
.product-form__sticky,
#product-form-sticky,
.sticky-add-to-cart {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* =========================================================
   BKK SCENE — FIX "YOU MAY ALSO LIKE" TITLE
   ========================================================= */
.section-resource-list__content h3,
.product-recommendations__heading,
.related-products__heading {
  color: #ffffff !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 900 !important;
  /* Add a subtle glow so it matches the vibe */
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 30px !important;
}
/* =========================================================
   BKK SCENE — HIDE PRICES IN "YOU MAY ALSO LIKE"
   Keeps the recommendation strip clean.
   ========================================================= */
.product-recommendations .price,
.related-products .price,
.section-resource-list .price,
.product-recommendations .price__container {
  display: none !important;
  visibility: hidden !important;
}
/* =========================================================
   BKK SCENE — "YOU MAY ALSO LIKE" (PINK EDITION)
   1. Pink Section Title
   2. Pink Product Cards (Centered)
   3. Kills "Ghost Boxes" (Hidden Prices)
   ========================================================= */

/* 1. PINK SECTION TITLE ("YOU MAY ALSO LIKE") */
.product-recommendations__heading,
.related-products__heading {
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  
  /* Pink Pill Box */
  border: 2px solid #FF00CC !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  display: inline-block !important;
  width: auto !important;
  margin: 0 auto 40px auto !important;
  
  /* Pink Glow */
  box-shadow: 
    inset 0 0 6px rgba(255,255,255,0.2), 
    inset 0 0 10px #FF00CC,              
    0 0 20px rgba(255, 0, 204, 0.4) !important;
  background: #000 !important;
}

/* 2. PINK PRODUCT CARDS (Title Only) */
.product-recommendations .card__content,
.product-recommendations .card__information,
.related-products .card__content {
  background-color: #000 !important;
  border: 2px solid #FF00CC !important; /* Pink Border */
  border-radius: 24px !important;
  
  /* Pink Glow */
  box-shadow: 
    inset 0 0 6px rgba(255,255,255,0.2), 
    inset 0 0 10px #FF00CC,              
    0 5px 15px rgba(255, 0, 204, 0.25) !important;
    
  /* Centering Layout */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  
  margin-top: 15px !important;
  padding: 15px 10px !important;
  width: 100% !important;
}

/* 3. FORCE CENTERED TEXT */
.product-recommendations h3,
.product-recommendations a,
.product-recommendations .card__heading,
.product-recommendations .card__heading a {
  color: #fff !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: block !important;
  text-decoration: none !important;
}

/* 4. KILL GHOST BOXES (Prices) */
/* This completely hides the price container so it can't show a border */
.product-recommendations .price,
.product-recommendations .price__container,
.product-recommendations .card__information > *:not(.card__heading),
.related-products .price {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* =========================================================
   PRODUCT PRICE — ORANGE + BIG (Horizon / Dawn-ish markup)
   ========================================================= */

main[data-template*="product"] .price,
main[data-template*="product"] .price * ,
body.template-product .price,
body.template-product .price *{
  color: #FF8C00 !important;
}

/* =========================================================
   PRODUCT PAGE — PRICE (ORANGE + BIGGER)
   ========================================================= */
body.template-product main[data-template*="product"] .price,
body.template-product main[data-template*="product"] .price * ,
body.template-product main[data-template*="product"] .product__info-container .price,
body.template-product main[data-template*="product"] .product__info-container .price span,
body.template-product main[data-template*="product"] .price-item,
body.template-product main[data-template*="product"] .price-item--regular,
body.template-product main[data-template*="product"] .price-item--sale{
  color: #ff8c00 !important;
  text-shadow: 0 0 10px rgba(255,140,0,0.40) !important;
  font-weight: 900 !important;
  font-size: clamp(1.45rem, 1.6vw, 1.95rem) !important; /* a bit bigger */
  line-height: 1.05 !important;
}

/* If any theme rule is forcing .price white/black, this makes sure it doesn't */
body.template-product main[data-template*="product"] .price{
  opacity: 1 !important;
}

/* =========================================================
   HEADER LINE FIX: PINK & BEHIND MENU
   1. Changes the line to Neon Pink (#FF00CC).
   2. Lowers z-index so the mobile menu covers it.
   ========================================================= */
#header-group .header-wrapper::after,
#header-group header::after {
  /* 1. Change White to Neon Pink */
  background-image: linear-gradient(to right, #FF00CC 40%, rgba(255, 0, 204, 0) 0%) !important;

  /* 2. Fix Overlap (Send behind the menu) */
  /* Was 99999, now 10 so the menu (usually 100+) covers it */
  z-index: 10 !important;
}
/* =========================================================
   HEADER LINE: SOLID NEON PINK
   1. Sets color to #FF00CC (Solid, no dots)
   2. Lowers z-index to 10 (so Mobile Menu sits on top)
   ========================================================= */
#header-group .header-wrapper::after,
#header-group header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Thickness */
  
  /* SOLID PINK (No Gradient/Dots) */
  background: #FF00CC !important;
  background-image: none !important; 
  border: none !important;
  
  /* Send behind the menu */
  z-index: 10 !important;
  pointer-events: none;
  display: block !important;
}
/* =========================================================
   REAL MOBILE FIX: TOUCH LOCK & LINE HIDER
   1. Kills the "Scale/Jump" on tap (forces 1.0 scale).
   2. Hides the Pink Line when menu is open.
   ========================================================= */

@media (max-width: 989px) {

  /* --- 1. LOCK HAMBURGER (High Specificity) --- */
  /* Targets every possible touch state to stop the scaling/yellow */
  #header-group summary.header__icon,
  #header-group summary.header__icon:hover,    /* Stops the "Tap Hover" */
  #header-group summary.header__icon:active,   /* Stops the "Press" */
  #header-group summary.header__icon:focus,
  #header-group details[open] > summary.header__icon {
    
    /* LOCK POSITION (Keep Vertical Center, Kill Scale) */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* NO SCALE(1.15) */
    margin: 0 !important;
    
    /* KILL STYLES */
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important; /* Instant change, no morphing */
    
    /* REMOVE NATIVE TAP HIGHLIGHT (Grey Box) */
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Force SVG lines to stay White */
  #header-group summary.header__icon svg,
  #header-group summary.header__icon svg path {
    stroke: #ffffff !important;
    fill: none !important;
    transform: none !important;
  }

  /* --- 2. HIDE PINK LINE WHEN MENU OPEN --- */
  /* Uses the class Shopify adds to body when menu is active */
  body.overflow-hidden #header-group .header-wrapper::after,
  body.overflow-hidden #header-group header::after,
  html.overflow-hidden #header-group header::after,
  /* Fallback for modern browsers */
  body:has(details[open]) #header-group header::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}
/* =========================================================
   FINAL FIX: KILL GHOST BUTTON & CORRECT MAIN ICON
   1. Hides the "Ghost" button inside the drawer (Inspector confirmed).
   2. Locks the Main Button position (No Jump).
   3. Fixes the "+" back to an "X" (Removes rotation).
   ========================================================= */

@media (max-width: 989px) {

  /* --- 1. KILL THE GHOST (The button inside the drawer) --- */
  /* This matches the element from your screenshot exactly */
  .menu-drawer__close-button,
  .menu-drawer .close-button,
  button[class*="close-button"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* --- 2. LOCK MAIN BUTTON (The one in the header) --- */
  #header-group summary.header__icon,
  #header-group details[open] > summary.header__icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Center Vertical */
    left: 10px !important;                  /* Lock Horizontal */
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483647 !important;         /* Stay on top of everything */
    
    /* Fixed Square Size */
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Styles */
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important; /* No jumping animation */
  }

  /* --- 3. CORRECT ICON ORIENTATION (Fix the +) --- */
  /* We insure the SVG is visible but NOT rotated */
  #header-group summary.header__icon svg,
  #header-group summary.header__icon svg path {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important; /* This fixes the + back to X */
    fill: none !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
  }

  /* --- 4. HIDE PINK LINE WHEN OPEN --- */
  body.overflow-hidden #header-group header::after,
  html.overflow-hidden #header-group header::after {
    display: none !important;
  }
}
/* =========================================================
   MOBILE MENU: TEXT SPACING FIX
   Pushes the menu links down so they don't overlap the Close button.
   ========================================================= */
@media (max-width: 989px) {
  .menu-drawer__navigation,
  .menu-drawer__inner-container {
    padding-top: 80px !important; /* Push text down */
  }
}
/* =========================================================
   PATCH: RESTORE CART DRAWER "X"
   The mobile menu fix accidentally hid this. Bringing it back.
   ========================================================= */
.cart-drawer button[class*="close"],
.cart-drawer .drawer__close,
.cart-drawer__close-button,
.drawer__header .drawer__close {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  
  /* Ensure it sits in the corner */
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 1001 !important;
}

/* Ensure the SVG icon inside is visible */
.cart-drawer button[class*="close"] svg,
.cart-drawer .drawer__close svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
}
/* =========================================================
   1. FINAL CART LOCK (BLOCKS FOCUS FLASH ON CLOSE)
   Prevents the icon from turning yellow/growing when the 
   drawer closes and focus returns to the header.
   ========================================================= */
@media (max-width: 989px) {
  
  /* Target the Cart Link/Button specifically */
  #header-group .header__icon--cart,
  #header-group a[href="/cart"],
  #cart-icon-bubble,
  .header__icon--cart:focus-visible, /* The culprit! */
  .header__icon--cart:active {
    
    /* 1. LOCK POSITION (Dead Center) */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Forces 1.0 Scale */
    right: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 60 !important;
    
    /* 2. LOCK VISUALS (Kill Yellow) */
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;        /* Removes focus ring */
    transition: none !important;     /* Stops the morphing animation */
    
    /* 3. SIZE LOCK */
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Target the SVG specifically to ensure it stays white */
  #cart-icon-bubble svg,
  #cart-icon-bubble svg path {
    fill: none !important;
    stroke: #ffffff !important;
    transform: none !important;
  }
}

/* =========================================================
   2. MOBILE MENU STYLING (SMALLER TEXT + DIVIDERS)
   - Shrinks font by ~30% (to roughly 16px/18px)
   - Adds thin white divider lines between items
   ========================================================= */
@media (max-width: 989px) {
  
  /* 1. Shrink the Text */
  .menu-drawer__menu-item,
  .menu-drawer__menu-item a,
  .menu-drawer__menu-item span {
    font-size: 18px !important;      /* Smaller, cleaner */
    font-weight: 500 !important;     /* Slightly lighter weight */
    letter-spacing: 0.5px !important;
    padding-top: 16px !important;    /* Adjust spacing */
    padding-bottom: 16px !important;
  }

  /* 2. Add Divider Lines */
  .menu-drawer__menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; /* Subtle line */
  }
  
  /* Optional: Remove border from the very last item */
  .menu-drawer__menu li:last-child {
    border-bottom: none !important;
  }
}
/* =========================================================
   1. CART COLOR LOCK (PURE WHITE - DEEP FIX)
   Target the SVG paths directly to kill any "Yellow" bleed.
   ========================================================= */
@media (max-width: 989px) {
  
  /* Wrapper: Force White */
  #header-group .header__icon--cart,
  #header-group a[href="/cart"],
  #cart-icon-bubble {
    color: #ffffff !important;
    opacity: 1 !important; /* Ensure no transparency dims it */
  }

  /* SVG & Paths: Force White Stroke */
  #header-group .header__icon--cart svg,
  #header-group .header__icon--cart svg path,
  #cart-icon-bubble svg,
  #cart-icon-bubble svg path {
    fill: none !important;
    stroke: #ffffff !important; /* Pure Hex White */
    color: #ffffff !important;
  }
}

/* =========================================================
   2. MOBILE MENU: TIGHTER & EVEN SPACING
   Reduces vertical gaps and ensures perfect rhythm.
   ========================================================= */
@media (max-width: 989px) {
  
  /* Link Spacing (Tighter) */
  .menu-drawer__menu-item,
  .menu-drawer__menu-item a,
  .menu-drawer__menu-item span {
    font-size: 18px !important;
    padding-top: 12px !important;    /* Reduced from 16px */
    padding-bottom: 12px !important; /* Reduced from 16px */
    line-height: 1.2 !important;     /* Tighter line height */
    min-height: 0 !important;        /* Prevent forced height */
  }

  /* List Item Borders (The Lines) */
  .menu-drawer__menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin: 0 !important; /* Ensure no external margins gap it */
  }
  
  /* Remove border from last item */
  .menu-drawer__menu li:last-child {
    border-bottom: none !important;
  }
}
/* =========================================================
   SUPERNOVA FIX: TARGETING YOUR EXACT THEME CLASSES
   1. Targets ".quantity-selector" (seen in inspector).
   2. Targets ".product-media-container" (seen in inspector).
   3. Uses "html body" prefix to crush base.css specificity.
   ========================================================= */

/* --- 1. QUANTITY SELECTOR (THE PINK FIX) --- */

/* The Container (The Pill) */
html body quantity-selector-component,
html body .quantity-selector {
  background-color: transparent !important;
  background: transparent !important;
  border: 2px solid #FF00FF !important; /* Neon Pink */
  border-radius: 4px !important;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.4) !important;
  color: #fff !important;
  
  /* Force size */
  width: 140px !important;
  max-width: 140px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
}

/* The Buttons (+ / -) */
html body .quantity-selector button,
html body .quantity-selector .button,
html body .quantity-selector .quantity__button {
  background-color: transparent !important;
  background: transparent !important;
  color: #FF00FF !important; /* Pink Icons */
  border: none !important;
  width: 40px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* KILL THE BLACK HOVER (The specific fix for your screenshot) */
html body .quantity-selector button:hover,
html body .quantity-selector .button:hover,
html body .quantity-selector .quantity__button:hover {
  background-color: rgba(255, 0, 255, 0.2) !important; /* Soft Pink tint */
  background: rgba(255, 0, 255, 0.2) !important;
  color: #ffffff !important; /* White Icon */
}

/* The Input Number (Center) */
html body .quantity-selector input,
html body .quantity-selector .quantity__input {
  color: #ffffff !important;
  background-color: transparent !important;
  background: transparent !important;
  font-weight: 700 !important;
  border: none !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
}


/* =========================================================
   ADD TO CART FIX: MATCH QUANTITY & ENABLE ROLLOVER
   1. Shape: Changes radius to 4px (Matching Qty).
   2. Size: Forces height to 46px (Matching Qty).
   3. Hover: Adds a "White Flash" rollover effect.
   ========================================================= */

html body .product-form__submit,
html body .add-to-cart-button,
html body button[name="add"] {
  /* 1. MATCH THE QUANTITY SELECTOR GEOMETRY */
  border-radius: 4px !important;  /* Sharp corners to match Qty */
  height: 46px !important;        /* Exact same height as Qty */
  min-height: 46px !important;
  
  /* 2. BASE NEON STYLE (Orange) */
  background-color: #FF8C00 !important;
  border: 2px solid #FF8C00 !important;
  color: #000000 !important;      /* Black text on Orange is easiest to read */
  
  /* 3. TYPOGRAPHY */
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 16px !important;
  
  /* 4. RESET THEME LOCKS */
  opacity: 1 !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.4) !important; /* Base Glow */
}

/* --- THE ROLLOVER EFFECT --- */
html body .product-form__submit:hover,
html body .add-to-cart-button:hover,
html body button[name="add"]:hover {
  /* Flash White */
  background-color: #ffffff !important; 
  color: #FF8C00 !important;
  border-color: #ffffff !important;
  
  /* Intensify Glow & Lift */
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.8) !important;
  transform: translateY(-2px) !important; 
}
/* =========================================================
   CART DRAWER RESCUE: FIX INVISIBLE NUMBERS
   1. Detects the Quantity Selector specifically inside the Cart Drawer.
   2. Forces the text color back to BLACK so it's visible on white.
   ========================================================= */

/* Target the Slide-out Cart & Cart Page specifically */
html body .cart-drawer .quantity-selector input,
html body .cart-drawer .quantity__input,
html body .drawer .quantity-selector input,
html body .cart__items .quantity-selector input {
  
  /* Force text to BLACK */
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  
  /* Ensure background stays transparent */
  background: transparent !important;
  
  /* Keep the weight bold */
  font-weight: 700 !important;
}

/* Optional: If the +/- buttons in the cart are also hard to see, 
   we can darken them slightly for the white background */
html body .cart-drawer .quantity-selector button,
html body .drawer .quantity-selector button {
  color: #FF00CC !important; /* Keep them Neon Pink */
}
/* =========================================================
   CART DRAWER CHECKOUT: NEON ORANGE MAKEOVER
   1. Turns the black "Checkout" button into Neon Orange.
   2. Matches the exact font/shape of your new Add to Cart button.
   3. Adds the White Flash hover effect.
   ========================================================= */

/* Target the Checkout Button specifically in the Drawer */
html body .cart-drawer .cart__checkout-button,
html body .cart-drawer button[name="checkout"],
html body .drawer__footer #checkout {
  
  /* 1. NEON ORANGE BASE */
  background-color: #FF8C00 !important;
  border: 2px solid #FF8C00 !important;
  color: #000000 !important; /* Black text for readability */
  
  /* 2. MATCH ADD-TO-CART SHAPE */
  border-radius: 4px !important;  /* Sharp corners to match Qty/Add buttons */
  height: 50px !important;        /* Nice and big touch target */
  width: 100% !important;
  
  /* 3. TYPOGRAPHY */
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-size: 16px !important;
  
  /* 4. GLOW */
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.3) !important;
  transition: all 0.2s ease-in-out !important;
  opacity: 1 !important;
}

/* HOVER EFFECT: WHITE FLASH */
html body .cart-drawer .cart__checkout-button:hover,
html body .cart-drawer button[name="checkout"]:hover,
html body .drawer__footer #checkout:hover {
  background-color: #ffffff !important;
  color: #FF8C00 !important;
  border-color: #ffffff !important;
  
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.8) !important;
  transform: translateY(-2px) !important;
}
/* =========================================================
   MOBILE PRODUCT IMAGE FIX: ADD SIDE PADDING
   1. Targets mobile screens only (under 767px).
   2. Forces the image wrapper to shrink slightly (calc 100% - 30px).
   3. Centers it so you have 15px gap on Left & Right.
   ========================================================= */

@media screen and (max-width: 767px) {
  html body .product__media-wrapper,
  html body .product-media-container,
  html body .product__media-item {
    
    /* Force 15px gap on each side */
    width: calc(100% - 30px) !important; 
    max-width: calc(100% - 30px) !important;
    
    /* Center it */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Ensure the glow doesn't get cut off by the parent */
    overflow: visible !important;
  }
}


/* =========================================================
   THE 20PX LIFT: IMAGE MARGIN & RESTORE
   1. Adds exactly 20px padding inside the container to lift the image.
   2. Restores the "Zoom & Round" image style (No shrinking).
   3. Keeps the Bold Uppercase Title.
   ========================================================= */

/* --- 1. PRODUCT IMAGE (LIFT 20PX) --- */
html body .product-media-container,
html body .product__media-wrapper .product__media,
html body .product__media-item .media {
  /* This creates the 20px gap above the pink line */
  padding-bottom: 20px !important; 
  
  /* Reset background/borders */
  background: transparent !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  margin-bottom: 0 !important; 
}

/* Restore the Image Sizing (Zoomed & Centered) */
html body .product-media-container img,
html body .product__media-wrapper img,
html body .product__media-item .media img {
  width: 100% !important;
  height: 100% !important;
  
  /* Fill the box completely */
  object-fit: cover !important; 
  object-position: center center !important;
  
  /* Keep the slight zoom */
  transform: scale(1.1) !important; 
  margin: 0 !important;
}

/* --- 2. TITLE FORCE (UPPERCASE & BOLD) --- */
div[class*="text-block"] h1,
h1[class*="text-block"],
.product__info-container h1,
.product__title h1 {
  text-transform: uppercase !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
  letter-spacing: 1.5px !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
  display: block !important;
}
/* =========================================================
   PHYSICAL LIFT: FORCE MARGIN ON WHITE CARD
   1. Adds 40px margin to the BOTTOM of the white image box.
      (This physically pushes it up, revealing the black background).
   2. Restores the Zoom & Round image style.
   3. Locks in the Uppercase Title.
   ========================================================= */


/* --- 2. RESTORE IMAGE (FULL BLEED) --- */
html body .product-media-container img,
html body .product__media-wrapper img,
html body .product__media-item .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; 
  object-position: center center !important;
  transform: scale(1.1) !important; 
  margin: 0 !important;
}

/* --- 3. FORCE UPPERCASE TITLE (TITANIUM LOCK) --- */
/* Targeting specifically to ensure it overrides theme defaults */
div[class*="text-block"] h1,
h1[class*="text-block"],
.product__info-container h1,
.product__title h1,
body.template-product h1 {
  text-transform: uppercase !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
  letter-spacing: 1.5px !important;
  line-height: 1.1 !important;
  margin-bottom: 15px !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
  display: block !important;
  visibility: visible !important;
}
/* =========================================================
   NEON COMPASS V2: "CONTINUE SHOPPING" (BLACK HOVER)
   1. Base: Neon Orange with Black Text (High Visibility).
   2. Hover: Turns BLACK with Orange Text (Fixes "Invisible" glitch on white drawer).
   3. Safety: Adds margin and visible overflow so the glow doesn't get cut off.
   ========================================================= */

/* --- 1. PREVENT GLOW CLIPPING --- */
/* Ensure the container allows the shadow to spill out */
html body .cart-drawer .cart__warnings,
html body .cart-drawer .drawer__inner-empty {
  overflow: visible !important;
  padding: 10px !important; /* Breathing room for the glow */
}

/* --- 2. THE BUTTON STYLE --- */
html body .cart-drawer .cart-items__empty-button,
html body .cart-drawer .cart__warnings .button {
  /* NEON ORANGE BASE */
  background-color: #FF8C00 !important;
  border: 2px solid #FF8C00 !important;
  color: #000000 !important; 
  
  /* SHAPE */
  border-radius: 4px !important;
  min-height: 46px !important;
  padding: 0 30px !important;
  margin: 10px auto !important; /* Space for the shadow */
  
  /* TYPOGRAPHY */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-size: 14px !important;
  text-decoration: none !important;
  
  /* BASE GLOW */
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.4) !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- 3. HOVER EFFECT: BLACKOUT --- */
html body .cart-drawer .cart-items__empty-button:hover,
html body .cart-drawer .cart__warnings .button:hover {
  /* Turn BLACK on hover so it pops against the white drawer */
  background-color: #000000 !important; 
  color: #FF8C00 !important;            
  border-color: #000000 !important;
  
  /* INTENSE ORANGE GLOW */
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.8) !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   BKK MASTER PATCH: GRID, TITLES & MOBILE FIX
   1. Neon Shells: Unified Orange (Grid) & Pink (Recs) borders.
   2. Titles: Ultra-Bold, Uppercase, Neon White.
   3. Mobile Fix: Forces cards to "Auto Height" on mobile to kill gaps.
   ========================================================= */

/* --- 1. RESET (CLEAN SLATE) --- */
/* Removes internal borders/backgrounds so we don't get "Double Vision" */
html body .product-grid__card .group-block-content,
html body .product-grid__card .text-block,
html body .product-grid__card .media,
html body .product-grid__card .card__media,
html body .product-recommendations .card__content,
html body .product-recommendations .card__media,
html body .related-products .card__content {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   BKK SCENE: COLLECTION GRID — NEON PINK REFINEMENT
   ========================================================= */

/* 1. SHRINK SHIRT & ADD BREATHING ROOM */
html body .product-grid__card .media img,
html body .product-grid__card img {
  transform: scale(0.85) !important; /* Shrink shirt for breathing room */
  transition: all 0.3s ease-in-out !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* 2. SWITCH ORANGE GLOW TO NEON PINK */
html body .product-grid__card {
  border: 1px solid rgba(255, 0, 204, 0.2) !important; /* Faint Pink Keyline */
  background: #000 !important;
  transition: all 0.3s ease !important;
  overflow: hidden;
}

html body .product-grid__card:hover {
  border-color: #FF00CC !important;
  /* Pink Neon Glow */
  box-shadow: 
    0 0 15px rgba(255, 0, 204, 0.4), 
    0 0 30px rgba(255, 0, 204, 0.2) !important;
  transform: translateY(-5px) !important;
}

/* 3. PRICE REVEAL: PINK PILL STYLE */
html body .product-grid__card .price {
  opacity: 0 !important; /* Hide price normally */
  transform: translateY(10px);
  transition: all 0.3s ease;
  margin-top: 15px !important;
  display: block !important;
}

html body .product-grid__card:hover .price {
  opacity: 1 !important;
  transform: translateY(0);
}

/* Style price as a Pink Pill */
html body .product-grid__card .price .price-item,
html body .product-grid__card .price-item--regular {
  background: #FF00CC !important; /* Pink Background */
  color: #ffffff !important;      /* White Text */
  padding: 6px 16px !important;
  border-radius: 50px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  display: inline-block !important;
}

/* 4. TITLE STYLING */
html body .product-grid__card .card__heading {
  margin-bottom: 5px !important;
  transition: color 0.3s ease;
}

html body .product-grid__card:hover .card__heading {
  color: #FF00CC !important; /* Title snaps to pink on hover */
}

/* --- 3. PINK SHELL (YOU MAY ALSO LIKE) --- */
html body .product-recommendations .card-wrapper,
html body .related-products .card-wrapper {
  border: 2px solid #FF00CC !important;
  border-radius: 24px !important;
  background-color: #000 !important;
  overflow: hidden !important;
  height: 100% !important;
  
  box-shadow: inset 0 0 12px rgba(255, 0, 204, 0.2), 0 5px 15px rgba(0,0,0,0.5) !important;
  transition: all 0.3s ease !important;
  display: block !important;
}

/* Pink Hover */
html body .product-recommendations .card-wrapper:hover {
  border-color: #ffffff !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 0 25px rgba(255, 0, 204, 0.8), 0 0 50px rgba(255, 0, 204, 0.5) !important;
}

/* --- 4. TITLES (BOLD & UPPERCASE) --- */
/* Target text inside grid cards ONLY */
html body .product-grid__card .text-block *,
html body .product-grid__card .card__content *,
html body .product-recommendations .card__content *,
html body .related-products .card__content * {
  color: #ffffff !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 900 !important;      
  text-transform: uppercase !important;
  letter-spacing: 1px !important;   
  text-decoration: none !important;
  text-align: center !important;
  line-height: 1.2 !important;
  font-size: 0.95rem !important; 
  text-shadow: 0 0 8px rgba(255,255,255,0.6) !important;
  margin: 0 !important; 
}

/* Text Container Spacing & Alignment */
html body .product-grid__card .card__content,
html body .product-grid__card .text-block {
  padding: 15px 10px !important;
  background: #000 !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* Snap to top (fixes the top gap) */
  align-items: center !important;
}

/* --- 5. MOBILE FIX (KILL THE GAPS) --- */
@media (max-width: 767px) {
  /* Force cards to only take up necessary space */
  html body .product-grid__card,
  html body .product-grid__card .card,
  html body .product-recommendations .card-wrapper {
    height: auto !important; 
    min-height: 0 !important;
    margin-bottom: 15px !important; /* Clean consistent gap */
  }
  
  /* Ensure text block doesn't stretch */
  html body .product-grid__card .card__content,
  html body .product-grid__card .text-block {
    flex-grow: 0 !important;
    min-height: 0 !important;
  }
}
/* =========================================================
   ZERO GRAVITY PATCH: FULL FILL & NO GAPS
   1. Image Fill: Kills 'Aspect Ratio' so image fills the box 100%.
   2. Zero Gaps: Removes ALL padding/margins between image and text.
   3. Neon Glow: applied tightly to the image frame.
   ========================================================= */



/* --- 2. THE IMAGE ITSELF (EXPAND TO EDGES) --- */
html body .product-grid__card img,
html body .product-recommendations img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  
  /* 'cover' ensures it fills the box with NO gaps (might crop slightly) */
  /* If you prefer to see the whole shirt with white bars, use 'contain' */
  object-fit: cover !important; 
  object-position: center center !important;
  
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* --- 3. THE TEXT CONTAINER (SNAP TO TOP) --- */
html body .product-grid__card .card__content,
html body .product-grid__card .text-block,
html body .product-recommendations .card__content {
  /* ZERO GAP above text */
  padding-top: 10px !important; 
  margin-top: 0 !important;
  
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center !important;
  
  /* Layout */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-grow: 0 !important;
  min-height: 0 !important;
}

/* Ensure inner elements don't push down */
html body .product-grid__card .card__information,
html body .product-grid__card .card__heading {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* --- 4. PRICES (NEON ORANGE) --- */
html body .product-grid__card .price,
html body .product-grid__card .price__container,
html body .product-recommendations .price {
  display: block !important;
  visibility: visible !important;
  color: #ff8c00 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  margin-top: 5px !important;
  padding-bottom: 0 !important;
  text-shadow: 0 0 8px rgba(255, 140, 0, 0.4) !important;
}


/* --- 5. CLEAN UP OUTER CONTAINERS --- */
html body .product-grid__card,
html body .product-recommendations .card-wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 20px !important;
}

/* --- 6. MOBILE FIX (KILL SIDE BARS) --- */
@media (max-width: 767px) {
  html body .product-grid__card [class*="spacing"] {
    padding: 0 !important;
    width: 100% !important;
  }
}
/* =========================================================
   MOBILE COLLECTION FIX: Kill “stuck hover” on touch devices
   - Touch devices can latch :hover after tap
   - Only enable hover effects on (hover:hover) + (pointer:fine)
========================================================= */

/* 1) TOUCH DEVICES: turn off hover transforms/overlays/glows */
@media (hover: none), (pointer: coarse) {

  /* Stop hover from changing layout/scale/shadows on product cards */
  html body .product-grid__card:hover,
  html body .product-grid__card:hover .card,
  html body .product-grid__card:hover .media,
  html body .product-grid__card:hover .card__media,
  html body .product-grid__card:hover img,
  html body .product-recommendations .card-wrapper:hover,
  html body .product-recommendations .card-wrapper:hover .card__media,
  html body .product-recommendations .card-wrapper:hover img {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
  }

  /* If any overlay tints exist (common in your hub/spoke system), keep them off on touch */
  .bkk-hub-media::after,
  .bkk-spoke-thumb::after,
  .bkk-hub-card:hover .bkk-hub-media::after,
  .bkk-spoke-card:hover .bkk-spoke-thumb::after {
    opacity: 0 !important;
  }

  /* Make taps feel clean (no grey flash / highlight artifacts) */
  html body a,
  html body button,
  html body summary {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* 2) REAL HOVER DEVICES: keep your hover effects */
@media (hover: hover) and (pointer: fine) {

  /* Your existing hover effects can remain — but ensure transitions are allowed */
  html body .product-grid__card,
  html body .product-grid__card .card,
  html body .product-grid__card .media,
  html body .product-grid__card .card__media {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  }
}
/* =========================================================
   SMALL SCREEN SAFETY: disable hover effects below breakpoint
   - Fixes “rollover” on small screens + resized desktop windows
   - Put this at the VERY END of your CSS
========================================================= */

/* Choose the breakpoint that matches when your layout becomes “mobile”.
   Common: 989px (Shopify Dawn-ish), 1023px, or 749px. */
@media (max-width: 989px) {

  /* Kill hover transforms/shadows/border changes on cards */
  html body .product-grid__card:hover,
  html body .product-grid__card:hover .card,
  html body .product-grid__card:hover .media,
  html body .product-grid__card:hover .card__media,
  html body .product-grid__card:hover img,
  html body .card-wrapper:hover,
  html body .card-wrapper:hover .card,
  html body .card-wrapper:hover .card__media,
  html body .card-wrapper:hover img {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    border-color: inherit !important;
  }

  /* If you use overlay fades/tints on hover anywhere */
  html body *:hover::before,
  html body *:hover::after {
    opacity: inherit !important;
  }

  /* Optional: prevent “sticky hover” tap highlight junk */
  html body a,
  html body button,
  html body summary {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Re-allow hover effects ONLY when screen is big enough AND device can hover */
@media (min-width: 990px) and (hover: hover) and (pointer: fine) {
  /* no rules needed here unless you previously disabled something globally */
}
/* MOVE PRODUCT TITLE BAR UP (overlaps the image by 30px) */
html body .product-grid__card :is(
  .card__content,
  .card__information,
  .card__footer,
  .product-card__info,
  .product-card__content
){
  transform: translateY(-30px) !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Optional: if you now get extra dead space under the card, pull it up too */
html body .product-grid__card{
  padding-bottom: 0 !important;
}
/* PRODUCT: close gap between images and title/info */
html body .product-media-container,
html body .product__media-wrapper .product__media,
html body .product__media-item .media{
  margin-bottom: 20px !important; /* or try 10px if you want a little breathing room */
  padding-bottom: 0 !important; /* also kills any “lift” padding from earlier patches */
}
/* MOBILE: force COLLECTION grid to 1-up (won't touch product-page gallery/lightbox) */
@media (max-width: 767px){
  body.template-collection .product-grid,
  body.template-collection .grid.product-grid,
  body.template-collection .grid--2-col-tablet-down,
  body.template-collection .grid--2-col{
    grid-template-columns: 1fr !important;
  }
}
/* TITLE turns YELLOW + neon glow on hover */
@media (hover:hover) and (pointer:fine){
  :where(.product-card, product-card, .card, .grid__item, li[class*="product-grid"]):hover
  :where(
    [class*="product_title"],
    [class*="product-title"],
    .card__heading,
    [class*="card__heading"]
  ){
    color: #FFD400 !important;
    text-shadow:
      0 0 6px rgba(57,255,20,.65),
      0 0 14px rgba(57,255,20,.55),
      0 0 26px rgba(57,255,20,.35);
    filter: brightness(1.06);
  }
}
/* MOBILE: force product grid to 1-up */
@media (max-width: 749px){
  .product-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* make each product tile span full width */
  .product-grid > li,
  .product-grid .grid__item{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* REMOVE LIGHTBOX / CLICK ACTION ON PRODUCT CARD IMAGES */
.product-grid a[href*="#"],
.product-grid a[aria-haspopup="dialog"],
.product-grid a[aria-controls],
.product-grid a[data-media-id],
.product-grid a[data-pswp],
.product-grid a[data-lightbox],
.product-grid a[class*="lightbox"],
.product-grid a[class*="zoom"],
.product-grid a[class*="gallery"]{
  pointer-events: none !important;
  cursor: default !important;
}

/* Also block clicks on the image area itself (covers wrappers) */
.product-grid .card__media,
.product-grid .card__media *{
  pointer-events: none !important;
}

/* Footer wrapper must be black so the new gap doesn't show white */
.shopify-section-group-footer-group,
.shopify-section-group-footer-group .section-background,
.shopify-section-group-footer-group .section-background.color-scheme-1{
  background: #000 !important;
}

/* 20px clear space above the pink divider line */
.shopify-section-group-footer-group .section.section--page-width.spacing-style.color-scheme-1{
  margin-top: 20px !important;
  background: #000 !important; /* belt + braces */
}
/* Shipping policy page — remove theme’s extra divider lines */
.template-page .rte hr,
.template-page .main-page-content hr,
.template-page .shopify-policy__body hr,
.template-page hr {
  border: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
}

/* Use OUR single divider */
.template-page hr.bkk-divider{
  border: 0 !important;
  height: 1px !important;
  background: rgba(0,0,0,.15) !important;
  margin: 22px 0 !important;
}
/* Shopify policy pages: remove the auto divider line on headings (prevents double line) */
.shopify-policy__body .rte h2,
.shopify-policy__body .rte h3{
  border-top: 0 !important;
  padding-top: 0 !important;
}
/* MOBILE: stop the top of the neon outline getting clipped */
@media (max-width: 749px){
  /* allow glow to render outside the image frame */
  .product__media,
  .product__media-wrapper,
  .product__media-item,
  .product__media-list,
  .product__media-container,
  .product-media{
    overflow: visible !important;
  }

  /* give a little breathing room so the glow isn't flush to the viewport */
  .product__media-wrapper,
  .product__media-item,
  .product__media{
    padding-top: 10px !important;
  }

/* PRODUCT MAIN IMAGE: remove bottom white space by cropping/shift */
.product-page-media-container img.bkk-product-main-image,
.product-page-media-container .product-media-container img.bkk-product-main-image{
  object-fit: cover !important;
  object-position: 50% 35% !important;   /* move crop up */
  transform: scale(1.14) !important;     /* zoom a touch */
  transform-origin: 50% 35% !important;
  display: block !important;
}

/* make sure the frame clips the zoomed image */
.product-page-media-container,
.product-page-media-container .product-media-container{
  overflow: hidden !important;
}
/* =========================================================
   FINAL OVERRIDES (PUT AT VERY BOTTOM)
   Purpose: stop earlier patches fighting each other
========================================================= */

/* ---------- 1) HEADER LINE: guarantee positioning + solid pink ---------- */
#header-group .header-wrapper,
#header-group header{
  position: relative !important;
}

#header-group .header-wrapper::after,
#header-group header::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #FF00CC !important;
  background-image: none !important;
  border: 0 !important;
  pointer-events: none !important;
  z-index: 10 !important;
  display: block !important;
}

/* ---------- 2) STAGE LAYOUT: pick ONE system (flex) ---------- */
/* (This removes the “gap doesn’t work” problem caused by the float patch) */
.magazine-article .stage-item{
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding-left: 10px !important;
  overflow: visible !important;
}

/* kill any float leftovers */
.magazine-article .stage-number-container{
  float: none !important;
  margin: 0 !important;
}

.magazine-article .stage-content{
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

/* keep your nice “centered two-line h3” behaviour */
.magazine-article .stage-content > h3{
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 70px !important;
  margin: 0 0 18px 0 !important;
}

/* ---------- 3) MAGAZINE ARTICLE PADDING: one final value ---------- */
.magazine-article{
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* ---------- 4) WHERE LINK ARROW: single stable definition ---------- */
.magazine-article .stage-content p.uniform a::after{
  content: "\25B6\FE0E" !important; /* ▶︎ force text-style triangle */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  margin-left: 12px !important;

  font-size: 10px !important;
  line-height: 1 !important;

  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;

  text-shadow: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-variant-emoji: text !important;
}

.magazine-article .stage-content p.uniform a:hover::after{
  background: var(--bkk-pink) !important;
  color: #fff !important;
  border-color: var(--bkk-pink) !important;
  box-shadow: 0 0 10px var(--bkk-pink), 0 0 20px var(--bkk-pink) !important;
}

/* ---------- 5) STOP “GLOBAL BLACK TEXT” from blanking dark cards ---------- */
/* Keep your original black text rule, but only on light blog cards (not guides/spokes/etc.) */
.bkk-guides-index .blog-post-card__content a div,
.bkk-guides-index .blog-post-card__content a h3{
  color: #fff !important;
}
/* =========================================
   PRODUCT PAGE — REMOVE BOTTOM WHITE SPACE
   ========================================= */

/* Kill aspect-ratio padding */
.product-media-wrapper,
.product__media-wrapper,
.product-media-container,
.product__media-container {
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Force image to define height */
.product-media-wrapper img,
.product__media-wrapper img,
.product-media-container img,
.product__media-container img {
  display: block !important;
  height: auto !important;
}

/* Remove any phantom spacer elements */
.product-media-wrapper::after,
.product__media-wrapper::after,
.product-media-container::after,
.product__media-container::after {
  display: none !important;
  content: none !important;
}
/* =========================================================
   COLLECTION GRID — REMOVE WHITE GAP UNDER SHIRT (CROP/FILL)
   Works on Shopify OS2 (Horizon/Dawn-style cards)
   ========================================================= */

:where(.card__media, .product-card__media, .grid-product__image, .product-grid-item__image, .product-item__image)
:where(.media, .ratio, .media--square, .media--portrait, .media--landscape, .aspect-ratio) {
  overflow: hidden !important;
}

/* Force the media box to a sensible ratio so the image fills it */
:where(.card__media, .product-card__media, .grid-product__image, .product-grid-item__image, .product-item__image)
:where(.ratio, .media) {
  aspect-ratio: 4 / 5 !important; /* tweak: 1/1, 4/5, 3/4 */
  height: auto !important;
}

/* Make image fill the box (kills bottom whitespace) */
:where(.card__media, .product-card__media, .grid-product__image, .product-grid-item__image, .product-item__image)
img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 25% !important; /* tweak up/down */
  display: block !important;
}
/* STOP product images shrinking/scaling on hover (mobile + desktop) */
@media (hover:hover) {
  /* Common Shopify card patterns */
  .card:hover img,
  .card:hover .media img,
  .product-card:hover img,
  .product-card:hover .media img,
  .grid__item:hover img,
  .product-grid a:hover img,
  .product-grid .card-wrapper:hover img,
  .product-grid .card__media:hover img,
  .product-grid .card__media:hover .media img {
    transform: none !important;
    scale: 1 !important;
  }

  /* If the transform is applied to the media wrapper instead of the img */
  .card:hover .media,
  .product-card:hover .media,
  .product-grid .card__media:hover .media {
    transform: none !important;
    scale: 1 !important;
  }

  /* Kill transition that makes it look like it's moving/shrinking */
  .card img,
  .card .media img,
  .product-card img,
  .product-grid .card__media img,
  .product-grid .media img {
    transition: none !important;
  }
}
/* =========================================================
   GLOBAL: Remove double neon line on MOBILE (all pages)
   ========================================================= */
@media (max-width: 749px){

  /* 1) Kill duplicate neon pseudo-lines (common cause) */
  body::before, body::after,
  #MainContent::before, #MainContent::after,
  .shopify-section-header::before, .shopify-section-header::after,
  .header-wrapper::before, .header-wrapper::after,
  .announcement-bar::before, .announcement-bar::after,
  .section::before, .section::after{
    content: none !important;
    display: none !important;
  }

  /* 2) If your neon line is a real element and it's duplicated, hide the 2nd one */
  .neon-line + .neon-line,
  .bkk-neon-line + .bkk-neon-line,
  .gt-neon-line + .gt-neon-line{
    display: none !important;
  }

  /* 3) If the double line is actually top/bottom borders stacking in the header */
  .shopify-section-header,
  .header-wrapper,
  .announcement-bar{
    border-top: 0 !important;
  }
}
/* =========================================================
   BKKSCENE MOBILE HEADER CLEANUP (REMOVE DOUBLE LINE)
   ========================================================= */

@media (max-width: 989px) {
  /* Targeted to specifically hide all extra header lines on mobile */
  #header-group .header-wrapper::after,
  #header-group header::after,
  .header-wrapper::after,
  header::after {
    display: none !important;
    content: none !important;
    background: none !important;
    height: 0 !important;
  }

  /* Optional: If you want a single clean line instead of none, 
     use this to keep only one active */
  #header-group .header-wrapper {
    border-bottom: 1px solid #FF00CC !important; /* Single thin pink line */
  }
}
/* =========================================================
   BKKSCENE MOBILE CLICK LOCK (STOP SHRINKING)
   ========================================================= */

@media (max-width: 989px) {
  /* 1. Targets the product cards and images specifically */
  html body .product-grid__card,
  html body .product-grid__card .media,
  html body .product-grid__card img,
  html body .card-wrapper,
  html body .card__media img,
  html body .bkk-product-main-image {
    /* Forces the scale to stay at 100% during tap/click */
    transform: scale(1) !important;
    transition: none !important; /* Removes the "shrinking" animation */
  }

  /* 2. Disables the 'Scale' trap on touch start */
  html body .product-grid__card:active,
  html body .product-grid__card:hover,
  html body .card-wrapper:active,
  html body .card-wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}
/* =========================================================
   BKKSCENE MOBILE BLOG CONTENT ALIGNMENT (REPAIR)
   ========================================================= */

@media (max-width: 767px) {
  /* 1. Reset the container from Flex to Block */
  html body .magazine-article .stage-item {
    display: block !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }

  /* 2. Float the number container to the left */
  html body .magazine-article .stage-number-container {
    float: left !important;
    margin-right: 18px !important; /* Gap between number and Title */
    margin-bottom: 10px !important;
    margin-top: 0 !important;
  }

  /* 3. Force content to use full width and start from left edge */
  html body .magazine-article .stage-content {
    display: block !important;
    width: 100% !important;
    clear: none !important;
  }

  /* 4. Snap the body text back to the left margin */
  html body .magazine-article .stage-content p,
  html body .magazine-article .stage-content .article-image,
  html body .magazine-article .stage-content .bkk-top-picks {
    clear: both !important; /* Pushes content below the floated number */
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}
/* =========================================================
   BKK SCENE: TRANSPARENT VOID (NO MORE WHITE BOX)
   ========================================================= */

/* 1. Kill the White Background on ALL Product Containers */
html body .product__media-wrapper,
html body .product-media-container,
html body .media--transparent,
html body .product__media-item,
html body .product__media-item .media,
html body .product-grid__card .card__media,
html body .product-grid__card .media {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. Center the Transparent PNGs (Floating in Space) */
html body .product-media-container img,
html body .product__media img,
html body .bkk-product-main-image {
  /* Remove any forced scaling that was fitting it into a box */
  transform: none !important; 
  
  /* Ensure it doesn't touch the edges of the screen on mobile */
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  
  /* Perfect Center Alignment */
  margin: 0 auto !important;
  display: block !important;
  object-fit: contain !important;
  
  /* Optional: Add a subtle 'Backlight' glow behind the shirt? */
  /* filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.15)); */
}

/* 3. Collapse any extra space the "White Box" was holding open */
html body .product-media-container {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important; /* Let the shirt define the height */
  overflow: visible !important;
}
/* =========================================================
   BKK SCENE: COLLECTION PAGE — HERO REMOVAL & PRICE REPAIR
   ========================================================= */

/* 1. REMOVE COLLECTION HERO BANNER */
.template-collection .collection-hero,
.template-collection .collection-hero__image-container,
.template-collection .collection-hero__text-wrapper {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. PRICE REPAIR: OVERRIDE HIDDEN STATE & STYLE AS PILL */
/* This forces the price to exist so it can be revealed on hover */
html body .product-grid__card .price,
html body .product-grid__card .price__container {
  display: block !important;
  visibility: visible !important;
  opacity: 0 !important; /* Hidden until hover */
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-top: 15px !important;
  text-align: center;
}

html body .product-grid__card:hover .price {
  opacity: 1 !important;
  transform: translateY(0);
}

/* The Pink Pill Styling */
html body .product-grid__card .price .price-item,
html body .product-grid__card .price .price-item--regular,
html body .product-grid__card .price .price-item--sale {
  background-color: #FF00CC !important; /* Neon Pink */
  color: #ffffff !important;           /* White Text */
  padding: 6px 18px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  display: inline-block !important;
}

/* 3. SHIRT SCALING (85% BREATHING ROOM) */
html body .product-grid__card .media img,
html body .product-grid__card img {
  transform: scale(0.85) !important;
  transition: transform 0.3s ease-in-out !important;
  object-fit: contain !important;
}

/* 4. PINK GLOW OVERRIDE */
html body .product-grid__card {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #000 !important;
  transition: all 0.3s ease !important;
}

html body .product-grid__card:hover {
  border-color: #FF00CC !important;
  /* Neon Pink Glow replacing the orange */
  box-shadow: 0 0 20px rgba(255, 0, 204, 0.4), 0 0 40px rgba(255, 0, 204, 0.2) !important;
  transform: translateY(-5px) !important;
}
/* =========================================================
   BKK SCENE: MERCH INDEX SPACING
   ========================================================= */
.bkk-merch-index {
  padding-top: 100px !important;
}