/* ===============================

   OOCHAOS – MOBILE HEADER FIX

   =============================== */

@media (max-width: 980px) {

  /* FORCE HIDE DESKTOP MENU TEXT */

  header nav,

  nav,

  .nav,

  .top-nav,

  .menu,

  ul.menu,

  .navbar,

  .navbar-nav {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

  }

  /* FORCE SHOW HAMBURGER */

  #menuBtn,

  .menu-btn,

  button.menu-btn {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

  }

  /* KEEP LOGO + BRAND CLEAN */

  .header-inner {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 12px !important;

  }

  .brand {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-width: 0 !important;

  }

  .brand img {

    width: 30px !important;

    height: 30px !important;

    flex-shrink: 0 !important;

  }

  .brand-name {

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }

}
/* ===============================

   OOCHAOS – MENU + SHOP FIXES

   Paste at VERY BOTTOM of override.css

   =============================== */

/* Make menu typography match home everywhere */

nav a,

.mobile-menu a {

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;

  letter-spacing: .18em !important;

  text-transform: uppercase !important;

}

/* Mobile dropdown panel look like luxury (not random big serif list) */

.mobile-menu {

  background: rgba(0,0,0,.85) !important;

  border: 1px solid rgba(177,138,90,.22) !important;

  border-radius: 18px !important;

  backdrop-filter: blur(12px) !important;

}

.mobile-menu a{

  display:block !important;

  padding:14px 12px !important;

  margin:6px 0 !important;

  border-radius:14px !important;

  background: rgba(255,255,255,.02) !important;

  color: rgba(243,241,238,.92) !important;

  font-size: 13px !important;

  text-decoration:none !important;

}

.mobile-menu a:hover{

  background: rgba(255,255,255,.05) !important;

}
/* ✅ Hide CURRENT page link in menu automatically */

body[data-page="home"]     nav a[href="/index.html"],

body[data-page="home"]     .mobile-menu a[href="/index.html"],

body[data-page="shop"]     nav a[href="/shop.html"],

body[data-page="shop"]     .mobile-menu a[href="/shop.html"],

body[data-page="privacy"]  nav a[href="/privacy.html"],

body[data-page="privacy"]  .mobile-menu a[href="/privacy.html"],

body[data-page="about"]    nav a[href="/about.html"],

body[data-page="about"]    .mobile-menu a[href="/about.html"],

body[data-page="contact"]  nav a[href="/contact.html"],

body[data-page="contact"]  .mobile-menu a[href="/contact.html"]{

  display:none !important;

}

/* ===============================

   SHOP PAGE: make video/hero smaller

   (products must be the focus)

   =============================== */

/* If your shop has a hero section like .hero with video */

body[data-page="shop"] .hero{

  height: 48svh !important;     /* smaller than full screen */

  min-height: 380px !important;

}

/* If the shop page video is inside .hero video */

body[data-page="shop"] .hero video{

  object-fit: cover !important;

}

/* If your Ecwid products start too low, reduce padding */

body[data-page="shop"] .hero-content{

  padding-bottom: 18px !important;

}

/* If you have a big title block pushing products down */

body[data-page="shop"] .hero-card{

  padding: 12px 14px !important;

  max-width: 680px !important;

}
/* Hide current page link in mobile menu (About page) */

body[data-page="about"] .mobile-menu a[href="/about.html"],

body[data-page="about"] .mobile-menu a[href="about.html"],

body[data-page="about"] .mobile-menu a[href="./about.html"]{

  display:none !important;

}
/* ===== HERO OVERLAY FIX ===== */

.hero::before,

.hero-overlay,

.overlay {

  background: rgba(0, 0, 0, 0.45) !important;

}

/* Improve text contrast */

.hero h1,

.hero h2,

.hero p {

  color: rgba(255, 255, 255, 0.92);

}

/* Buttons should look clickable, not disabled */

.hero .btn,

.hero button {

  opacity: 0.95;

  border: 1px solid rgba(255, 255, 255, 0.35);

}/* ================================

   HERO VISIBILITY + OVERLAY FIX

   ================================ */

/* 1) Make sure the hero section isn't double-darkened */

.hero::before,

.hero::after,

.hero-overlay,

.overlay,

.banner::before,

.banner::after,

#hero::before,

#hero::after {

  background: rgba(0,0,0,0.32) !important;

  opacity: 1 !important;

}

/* 2) Force background video to actually show */

video,

.hero video,

#bg-video,

.bg-video,

.hero-video,

.banner video,

#hero video {

  display: block !important;

  opacity: 1 !important;

  visibility: visible !important;

  filter: none !important;

}

/* 3) Correct layering: video behind, overlay middle, text on top */

.hero,

.banner,

#hero {

  position: relative !important;

  overflow: hidden !important;

}

.hero video,

.banner video,

#hero video {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  z-index: 0 !important;

}

.hero * ,

.banner * ,

#hero * {

  position: relative !important;

  z-index: 2 !important;

}

/* 4) Make text readable without killing the vibe */

.hero h1, .hero h2, .hero h3, .hero p {

  color: rgba(255,255,255,0.92) !important;

  text-shadow: 0 2px 18px rgba(0,0,0,0.55) !important;

}/* =========================

   HERO OVERLAY FIX (OOCHAOS)

   ========================= */

/* 1) Tone down the overlay that is crushing the video */

.hero::before,

.hero::after,

.banner::before,

.banner::after,

#hero::before,

#hero::after,

.overlay,

.hero-overlay,

.banner-overlay,

.video-overlay,

.bg-overlay {

  background: rgba(0,0,0,0.22) !important; /* was too heavy */

  opacity: 1 !important;

}

/* 2) If the overlay is a real element, don't let it sit above content */

.overlay,

.hero-overlay,

.banner-overlay,

.video-overlay,

.bg-overlay {

  z-index: 1 !important;

  pointer-events: none !important;

}

/* 3) Make sure your text & buttons are above the overlay */

.hero,

.banner,

#hero {

  position: relative !important;

}

.hero * ,

.banner * ,

#hero * {

  position: relative !important;

  z-index: 2 !important;

}

/* 4) Boost readability (luxury readable, not neon) */

.hero h1, .hero h2, .hero h3, .hero p,

.banner h1, .banner h2, .banner p,

#hero h1, #hero h2, #hero p {

  color: rgba(255,255,255,0.90) !important;

  text-shadow: 0 2px 16px rgba(0,0,0,0.60) !important;

}

/* 5) If there's a "blackout" layer using filter/opacity on the container, neutralize it */

.hero, .banner, #hero {

  filter: none !important;

  opacity: 1 !important;

}/* =========================

   HERO OVERLAY FIX (OOCHAOS)

   ========================= */

/* Tone down common overlay layers */

.hero::before,

.hero::after,

.banner::before,

.banner::after,

#hero::before,

#hero::after,

.overlay,

.hero-overlay,

.banner-overlay,

.video-overlay,

.bg-overlay {

  background: rgba(0,0,0,0.22) !important;

  opacity: 1 !important;

}

/* Ensure overlays don't block UI */

.overlay,

.hero-overlay,

.banner-overlay,

.video-overlay,

.bg-overlay {

  z-index: 1 !important;

  pointer-events: none !important;

}

/* Put content above overlay */

.hero,

.banner,

#hero {

  position: relative !important;

  filter: none !important;

  opacity: 1 !important;

}

.hero *,

.banner *,

#hero * {

  position: relative !important;

  z-index: 2 !important;

}

/* Make hero video visible */

.hero video,

.banner video,

#hero video,

video {

  opacity: 1 !important;

  visibility: visible !important;

  display: block !important;

}

/* TEMP DEBUG: outline the overlay pseudo-elements */

.hero::before,

.hero::after,

.banner::before,

.banner::after,

#hero::before,

#hero::after {

  outline: 2px solid rgba(0,255,102,0.8) !important;

}/* =========================

   HERO PANEL (BLACK CURTAIN) FIX

   ========================= */

/* The big rounded box holding the hero text/buttons */

.hero .container,

.hero .content,

.hero .inner,

.hero .box,

.hero .card,

.banner .container,

.banner .content,

.banner .inner,

.banner .box,

.banner .card,

#hero .container,

#hero .content,

#hero .inner,

#hero .box,

#hero .card {

  background: rgba(0,0,0,0.35) !important;  /* was too dark */

  backdrop-filter: blur(6px) !important;   /* optional luxe glass */

  -webkit-backdrop-filter: blur(6px) !important;

}

/* If the panel background is applied directly to a section */

.hero, .banner, #hero {

  background-color: transparent !important;

}

/* Make sure video isn't dimmed by any opacity/filter */

.hero video, .banner video, #hero video, video {

  filter: none !important;

  opacity: 1 !important;

}


/* ================================

   OOCHAOS – HERO VIDEO (ADDED)

================================ */

.hero-video{

  position: relative;

  min-height: 100vh;

  width: 100%;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

}

.hero-bg{

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.hero-overlay{

  position: absolute;

  inset: 0;

  background:

    radial-gradient(1000px 600px at 70% 30%, rgba(0,0,0,0.15), rgba(0,0,0,0.9)),

    linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.2));

}

.hero-content{

  position: relative;

  z-index: 2;

  width: min(680px, 92vw);

  margin: 0 0 6vh 6vw;

  padding: 22px;

  border-radius: 18px;

  background: rgba(0,0,0,0.55);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.1);

}

.hero-logo{

  width: 54px;

  margin-bottom: 14px;

}

.hero-content h1{

  font-size: clamp(30px, 5vw, 54px);

  line-height: 1.05;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

.hero-content p{

  color: rgba(255,255,255,0.8);

}

.hero-actions{

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}

.btn{

  padding: 12px 16px;

  border-radius: 14px;

  text-decoration: none;

  font-size: 12px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  border: 1px solid rgba(255,255,255,0.2);

  color: #fff;

}

.btn.primary{

  border-color: rgba(202,163,90,0.6);

}

@media (max-width:600px){

  .hero-content{

    margin: 0 auto 4vh;

  }

}
/* ================================

   MOBILE VIDEO FIX – OOCHAOS

================================ */

@media (max-width: 768px){

  .hero-video{

    min-height: 88vh; /* not full chaos */

  }

  .hero-bg{

    object-fit: cover;

    object-position: center top; /* IMPORTANT */

    transform: scale(1.05); /* subtle, not aggressive */

  }

  .hero-overlay{

    background:

      linear-gradient(

        to bottom,

        rgba(0,0,0,0.85) 0%,

        rgba(0,0,0,0.55) 35%,

        rgba(0,0,0,0.95) 100%

      );

  }

  .hero-content{

    margin: 0 auto 3vh;

    padding: 20px;

    background: rgba(0,0,0,0.65);

  }

  .hero-logo{

    width: 44px;

  }

}

/* OPTION A — keep header logo, remove hero logo */

.hero-logo {

  display: none !important;

}

/* HERO CARD — mobile: move to bottom, slightly smaller */

@media (max-width: 768px) {

  .hero{

    position: relative;

    min-height: 100svh;

    display: flex;

    align-items: flex-end;     /* push content to bottom */

  }

  .hero-inner{

    width: 100%;

    padding-bottom: 18px;      /* breathing room above bottom */

  }

  .hero-card{

    max-width: 92%;

    margin: 0 auto;

    padding: 18px 18px 16px;   /* smaller card */

    border-radius: 18px;

  }

  /* Make headline smaller + tighter */

  .hero-card h1{

    font-size: clamp(26px, 7vw, 36px);

    line-height: 1.05;

    margin: 6px 0 10px;

  }

  /* Make paragraph a bit smaller */

  .hero-card .tagline,

  .hero-card p{

    font-size: 15px;

    line-height: 1.35;

    margin: 0 0 14px;

  }

  /* BUTTONS SIDE-BY-SIDE */

  .hero-actions{

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

  }

  .hero-actions .btn,

  .hero-actions a{

    width: 100%;

    padding: 14px 10px;

    font-size: 12px;

    letter-spacing: .12em;

    text-align: center;

    white-space: nowrap;

  }
     /* === HERO: move content to bottom === */

.hero {

  display: flex;

  align-items: flex-end;

  min-height: 100vh;

  padding-bottom: 4rem;

}

/* Hero inner container */

.hero-inner {

  width: 100%;

  display: flex;

  justify-content: center;

}

/* Hero card positioning */

.hero-card {

  max-width: 720px;

  width: 92%;

  margin: 0 auto;

  padding: 2.5rem 2rem;

}

/* Reduce visual dominance slightly */

.hero-card h1 {

  font-size: clamp(2rem, 5vw, 3rem);

}

/* Buttons side-by-side */

.hero-actions {

  display: flex;

  gap: 1rem;

  margin-top: 1.5rem;

}

/* Button sizing = luxury, not loud */

.hero-actions a {

  padding: 0.9rem 1.8rem;

  font-size: 0.75rem;

  letter-spacing: 0.18em;

}

/* Mobile refinement */

@media (max-width: 768px) {

  .hero {

    padding-bottom: 3rem;

  }

  .hero-actions {

    /* === HERO BOTTOM ALIGN + CLEAN LUXURY === */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 8vh;
}

.hero-card {
  max-width: 520px;
  padding: 2rem 2rem 2.2rem;
}

/* text refinement */
.hero h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 0.8rem;
}

.hero p {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.85;
}

/* buttons */
.hero-actions {
  margin-top: 1.6rem;
  display: flex;
  gap: 0.8rem;
}

.hero-actions .btn {
  padding: 0.7rem 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

/* mobile polish */
@media (max-width: 600px) {
  .hero {
    padding-bottom: 6vh;
  }

  .hero-card {
    padding: 1.6rem;
  }
}
	  /* === HERO: FORCE CARD TO BOTTOM (MOBILE) === */
.hero {
  min-height: 100svh;              /* better than 100vh on mobile */
  display: flex;
}

.hero-inner {
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;            /* pushes content down */
  justify-content: center;
  padding: 0 16px 4svh;             /* bottom breathing room */
}

/* Smaller, cleaner card */
.hero-card {
  width: min(560px, 92vw);
  padding: 22px 18px;
}

/* Buttons side-by-side (always) */
.hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.hero-actions .btn {
  width: 100%;
  padding: 12px 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

/* IMPORTANT: stop hero layers from blocking clicks */
.hero video,
.hero::before,
.hero::after {
  pointer-events: none;
}
/* ===== HERO: force the card to the bottom ===== */
.hero{
  min-height: 100vh;
  display: flex;
}

.hero-inner{
  width: 100%;
  display: flex;
  align-items: flex-end;          /* pushes hero-card to bottom */
  padding-bottom: clamp(18px, 5vh, 56px);
}

/* keep the card readable but not massive */
.hero-card{
  width: min(760px, 92vw);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 28px);
}

/* ===== Buttons: side-by-side, but actually FIT on mobile ===== */
.hero-actions{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}

/* Stop button text from getting cut off ugly */
.hero-actions .btn{
  width: 100%;
  padding: 14px 12px;
  font-size: 12px;
  letter-spacing: 0.22em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On super tiny screens, stack them */
@media (max-width: 380px){
  .hero-actions{
    grid-template-columns: 1fr;
  }
}