/* =========================
   Base theme
   ========================= */
:root {
  --header-height: 56px;            /* slim header */
  --hero-overlay: 0.40;             /* tweak to match Shopify's 40% */
  --hero-zoom-desktop: 1.5;        /* desktop hero zoom */
  --hero-zoom-mobile: 1.5;          /* mobile hero zoom */
}

@media (max-width: 900px) {
  :root { --header-height: 48px; }
}

html { scroll-padding-top: var(--header-height); }

body.template-page {
  background: #0a0a0a;
  color: #f1f1f1;
  font-family: "Cinzel", serif;
  /* uppercase is handled on headings/nav/buttons below */
}

h1, h2, h3 {
  color: #fff;
  text-shadow: 0 0 8px #fff;
  font-family: "Cinzel", serif;
}

p { color: #ccc; font-size: 18px; font-family: "Roboto", sans-serif; }

.flicker { animation: flicker 2s infinite alternate; color: #fff; }
@keyframes flicker { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Layout helpers */
.page-width { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.gradient { background: transparent; } /* placeholder like Dawn */

/* Shopify-like color schemes */
.color-scheme-3 { color: #fff; background-color: #242833; }
.color-scheme-4 { color: #fff; background-color: #000; }

/* ===== Announcement / Utility bar (Dawn-like) ===== */
.utility-bar {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  transition: transform .24s ease, opacity .24s ease;
  will-change: transform, opacity;
}
.utility-bar--bottom-border { border-bottom: 1px solid rgba(255,255,255,.08); }

.utility-bar__grid {
  display: grid;
  align-items: center;
  min-height: 30px; /* slightly reduced from default */
  gap: 12px;
  grid-template-columns: 1fr auto; /* default two columns */
}
.utility-bar__grid--2-col { grid-template-columns: 1fr auto; }
.utility-bar__grid--3-col { grid-template-columns: 1fr auto 1fr; }

.utility-bar.hide {
  transform: translateY(-100%);
  opacity: 0;
}

.list-social {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 12px; align-items: center;
}
.list-social a {
  color: #fff; text-decoration: none; opacity: .85; text-transform: uppercase; letter-spacing: .08em;
}
.list-social a:hover { opacity: 1; text-decoration: underline; }

/* Announcement slider bits */
.announcement-bar {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 8px; justify-content: center;
  text-align: center;
}
.announcement-track {
  display: grid;
  grid-auto-flow: column;
  gap: 0;
  overflow: hidden;
  position: relative;
}
.announcement-bar__message {
  min-width: 100%;
  margin: 0;
  color: #fff;
  opacity: .95;
  white-space: nowrap;
  display: grid; place-items: center;
  padding: 4px 0; /* slightly tighter */
}
.announcement-bar__link {
  color: #fff; text-decoration: none; opacity: .95;
}
.announcement-bar__link:hover { text-decoration: underline; opacity: 1; }

/* Slider buttons (kept minimal like Dawn’s caret buttons) */
.slider-button {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px; opacity: .8;
}
.slider-button:hover { opacity: 1; }
.slider-button[hidden] { display: none !important; }

/* Small screens: make socials wrap or hide if needed */
@media (max-width: 640px) {
  .utility-bar__grid { grid-template-columns: 1fr; gap: 6px; }
  .list-social { justify-content: center; flex-wrap: wrap; }
}


/* =========================
   Header
   ========================= */
.section-header.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: transparent;
}
.header-wrapper--border-bottom {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header { position: relative; z-index: 100; }
.header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: var(--header-height);
}
.header__logo { display: inline-flex; align-items: center; justify-content: center; }
.header__heading-logo {
  display: block;
  height: 48px;           /* slim desktop */
  width: auto;
}

/* Make it a touch smaller on mobile */
@media (max-width: 900px) {
  .header__heading-logo { height: 42px; }
}

/* Shrink a little more when sticky */
.shopify-section-header-sticky .header__heading-logo { height: 44px; }
@media (max-width: 900px) {
  .shopify-section-header-sticky .header__heading-logo { height: 38px; }
}

/* Optional max-width constraints on logo */
.header__heading-logo { max-width: 120px; }
@media (max-width: 768px) {
  .header__heading-logo { max-width: 130px; }
}

/* Dawn-like transitions on the header element */
.section-header .header {
  will-change: transform, background-color, box-shadow;
  transition: transform .24s ease, background-color .24s ease, box-shadow .24s ease;
}
.shopify-section-header-sticky .header {
  background: rgba(0,0,0,0.78);
  box-shadow: 0 6px 14px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
}
.shopify-section-header-hidden .header {
  transform: translateY(-100%);
}
.section-header .header.animate {
  transition: transform .24s ease, background-color .24s ease, box-shadow .24s ease, opacity .24s ease;
}

/* Nav links */
.nav-left, .nav-right { display: flex; gap: 16px; align-items: center; }
.nav-link {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .12em;
  color: #fff;
  text-decoration: none;
  opacity: .85;
  line-height: 1.2; /* tighter row */
}
.nav-link:hover, .nav-link:focus { opacity: 1; text-decoration: underline; }

/* Ghost button (desktop Cart) */
.button--ghost {
  padding: 6px 10px;   /* slightly tighter */
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
}
.button--ghost:hover { background: rgba(255,255,255,.08); }

/* Desktop/Mobile visibility */
.desktop-only { display: flex; }
.mobile-only { display: none; }
@media (max-width: 900px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: inline-flex; }
  .header-grid { grid-template-columns: auto 1fr auto; }
}

/* =========================
   Mobile drawer + backdrop
   ========================= */
.icon-button {
  background: none; border: 0; padding: 8px; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-button .bar { display:block; width:22px; height:2px; background:#fff; margin:3px 0; }

.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: 78vw; max-width: 360px;
  background: #0a0a0a; color: #fff; z-index: 2100;
  transform: translateX(100%); transition: transform .28s ease;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  border-left: 1px solid rgba(255,255,255,.12);
  will-change: transform;
}
.mobile-drawer.open { transform: translateX(0%); }

.drawer-link {
  color:#fff; text-decoration:none; font-family:"Roboto",sans-serif; font-size:14px; letter-spacing:.12em;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.drawer-link:hover, .drawer-link:focus { opacity: .9; }

.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 2050; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }

/* Lock scroll when drawer open */
body.drawer-open { overflow: hidden; }

/* =========================
   Buttons (hero CTA parity)
   ========================= */
.button { cursor: pointer; }
.button--secondary {
  border: 1px solid #fff; color:#fff; background:transparent;
  text-transform: uppercase; letter-spacing:.08em; padding: 12px 18px;
}
.button--secondary:hover { background: rgba(255,255,255,.08); }

/* =========================
   Hero banner (base)
   ========================= */
.banner {
  position: relative;
  width:100%;
  min-height: calc(100vh - var(--header-height));
  display:grid;
  align-items:end;
}
.banner--large { min-height: calc(100vh - var(--header-height)); }
.banner__media { position:absolute; inset:0; overflow:hidden; }
.banner__img { width:100%; height:100%; object-fit:cover; display:block; }
#hero-dhk::after {
  content:"";
  position:absolute; inset:0;
  background:#000;
  opacity: var(--hero-overlay);
  pointer-events:none;
}
.banner__content {
  position:relative; z-index:2; width:100%; display:grid; place-items:center; padding:32px 16px;
}
.banner__box {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px 22px; border-radius: 12px;
}
.banner__buttons .button { text-decoration:none; display:inline-block; }
.banner__buttons .button:hover { transform: translateY(-1px); }

/* spacing between first and second banner on mobile (keep for later if needed) */
@media (max-width: 640px) {
  #hero-dhk-2 .banner__box { margin-top: 8px; }
}

/* =========================
   HERO ZOOM (single source of truth)
   ========================= */

/* Desktop / tablet hero – cropped & zoomed */
@media (min-width: 901px) {
  #hero-dhk .banner__media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #hero-dhk .banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%; /* focus lower area */
    transform: scale(var(--hero-zoom-desktop));
    transform-origin: center center;
  }
}

/* Mobile hero – zoom controlled by variable */
@media (max-width: 900px) {
  #hero-dhk .banner__media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #hero-dhk .banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(var(--hero-zoom-mobile));
    transform-origin: center center;
  }
}

/* =========================
   Storm overlay + lightning
   ========================= */
#storm-overlay {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 3000; mix-blend-mode: screen; display: none;
}
#storm-overlay canvas { width: 100%; height: 100%; }
.lightning-flash {
  position: fixed; inset: 0; background: white; opacity: 0;
  z-index: 2999; pointer-events: none; animation: lightning 4s infinite;
}
@keyframes lightning { 0%,97%,100%{opacity:0} 98%{opacity:.3} 99%{opacity:0} }

#storm-popup {
  position: fixed; z-index: 3100; inset: 0; display: flex; align-items: center; justify-content: center;
  background: black; color: white; font-size: 3rem; font-family: 'Cinzel', serif; letter-spacing: 2px;
  opacity: 1; transition: opacity 1s ease;
}

/* =========================
   Bat cursor (desktop / precise pointers only)
   ========================= */
@media (pointer: fine) {
  html, body { cursor: url('../assets/img/cursor-bat-16.png') 8 8, auto; }
  a, button, .hoverable, input[type="submit"] {
    cursor: url('../assets/img/cursor-bat-32.png') 16 16, auto;
    transition: transform 0.1s ease;
  }
  a:hover, button:hover, .hoverable:hover, input[type="submit"]:hover { transform: scale(1.05); }
}
@media (pointer: coarse) {
  html, body, a, button, .hoverable, input[type="submit"] { cursor: auto !important; }
}

/* =========================
   Sections & Featured collection (stub)
   ========================= */
.section { padding: 44px 0 36px; }

.fc__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.fc__title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.fc__view-all {
  text-decoration: none;
  padding: 10px 14px;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fc__view-all:hover { opacity: .9; }

/* Grid: 4 desktop, 2 mobile */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Product card */
.product-card {
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.02);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.product-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,.18);
}

/* Image ratio: adapt */
.pc__media {
  width: 100%; aspect-ratio: 1 / 1;
  background: rgba(255,255,255,.03);
  border-radius: 8px; overflow: hidden;
  display: grid; place-items: center;
}
.pc__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pc__info { display: grid; gap: 2px; }
.pc__title {
  font-family: "Roboto", sans-serif;
  font-size: 14px; letter-spacing: .04em; color: #fff; margin: 0;
}
.pc__price {
  font-family: "Roboto", sans-serif;
  font-size: 13px; color: #ddd; letter-spacing: .02em;
}

/* =========================
   Gallery slideshow (unified)
   ========================= */
.lxp-slideshow {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

/* Default: contain (true size) */
.lxp-slideshow {
  aspect-ratio: auto;
  max-height: none;
}
.lxp-slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Opt-in cover mode (letterboxed hero style) */
.lxp-slideshow.lxp--cover {
  aspect-ratio: 16 / 9;
  max-height: 70vh;
}
.lxp-slideshow.lxp--cover .lxp-slide img {
  height: 100%;
  object-fit: cover;
}

/* Opt-in strict contain mode (explicit if you need it on a page) */
.lxp-slideshow.lxp--contain .lxp-slide img {
  height: auto;
  object-fit: contain;
}

/* Slides wrapper */
.lxp-slides {
  display: flex;
  transition: transform 0.6s ease-in-out;
  will-change: transform;
}
.lxp-slide { min-width: 100%; }

/* Arrows + dots container */
.lxp-nav {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  pointer-events: none;
  padding: 8px;
}

/* Arrows */
.lxp-btn {
  pointer-events: auto;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.lxp-btn:hover { background: rgba(0,0,0,0.75); }

/* Dots */
.lxp-dots {
  pointer-events: auto;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.lxp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.lxp-dot.is-active { background: #fff; }

/* Optional: give the whole page more scrollable height if short */
body.g4llery-page main {
  min-height: 100vh;
}

/* ===== Footer (Dawn-like) ===== */
.footer { margin-top: 0; }
.section.footer--static { padding: 44px 0 36px; }

.footer__content-top { margin-bottom: 24px; }
.footer__blocks-wrapper {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .footer__blocks-wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 990px) {
  .footer__blocks-wrapper { grid-template-columns: repeat(4, 1fr); }
}

.footer-block { background: transparent; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 16px; }
.footer-block__heading {
  font-family: "Cinzel", serif; color: #fff; font-size: 1.1rem; letter-spacing: .06em;
  margin: 0 0 10px;
}
.footer-block__details-content { color: #ccc; font-family: "Roboto", sans-serif; font-size: 14px; }
.footer-block__details-content a { color: #fff; text-decoration: none; opacity: .85; }
.footer-block__details-content a:hover { opacity: 1; text-decoration: underline; }
.footer-block-image.center { text-align: center; }

.list-unstyled { list-style: none; margin: 0; padding: 0; }

/* Newsletter */
.newsletter-form .field {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 6px 6px 6px 10px;
  background: rgba(255,255,255,0.04);
}
.field__input {
  border: 0; outline: 0; background: transparent; color: #fff; font-family: "Roboto", sans-serif;
}
.field__button {
  border: 1px solid rgba(255,255,255,0.22); background: transparent; color: #fff;
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}

/* Force footer newsletter to look the same on every page */
.footer .footer-block--newsletter .newsletter-form .field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px 6px 6px 10px;
  background: rgba(255,255,255,0.04);
}
.footer .footer-block--newsletter .field__input {
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: "Roboto", sans-serif;
}
.footer .footer-block--newsletter .field__button {
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.field__button:hover { background: rgba(255,255,255,0.08); }

/* Social list (simple text links — swap to SVGs later if you want) */
.footer__list-social { display: flex; gap: 12px; margin-top: 10px; padding: 0; list-style: none; }
.footer__list-social .social-link { color: #fff; font-size: 12px; letter-spacing: .1em; opacity: .85; text-decoration: none; text-transform: uppercase; }
.footer__list-social .social-link:hover { opacity: 1; text-decoration: underline; }

/* Bottom area */
.footer__content-bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.footer__content-bottom-wrapper { padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer__content-bottom-wrapper--center { justify-content: center; flex-direction: column; gap: 6px; }

.footer__payment .list-payment { display: flex; gap: 10px; align-items: center; }
.list-payment__item {
  font-family: "Roboto", sans-serif; font-size: 12px; letter-spacing: .06em;
  padding: 6px 10px; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; opacity: .85;
}
.list-payment__item:hover { opacity: 1; }

/* Copyright + policies */
.caption { font-size: 12px; font-family: "Roboto", sans-serif; color: #ccc; }
.copyright__content { margin-right: 10px; }
.policies { display: flex; gap: 10px; }
.policies a { color: #fff; text-decoration: none; opacity: .85; }
.policies a:hover { opacity: 1; text-decoration: underline; }

/* Make the brand blurb match the Instagram/TikTok vibe */
.footer-block .footer-block__details-content.rte p {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ===== A11y helpers ===== */
.visually-hidden,
.sr-only {
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px dashed #fff;
  outline-offset: 3px;
}

/* ===== Search modal (styles) ===== */
.search-modal,
#search-modal {
  position: fixed; inset: 0; z-index: 3500; display: none;
}
.search-modal.open,
#search-modal[aria-hidden="false"] {
  display: block;
}
.search-modal__overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.search-modal__dialog {
  position: relative; z-index: 1;
  max-width: 720px; margin: 12vh auto 0; padding: 0;
  background: #0a0a0a; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.search-modal__header {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.search-input,
#search-input {
  flex:1 1 auto; min-width:0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: 10px 12px; color:#fff;
  font-family:"Roboto",sans-serif; font-size:14px;
  width: 100%;
}
.search-input::placeholder,
#search-input::placeholder { color:#bdbdbd; }
.search-close,
#search-close {
  background: transparent; border: 1px solid rgba(255,255,255,.18);
  color:#fff; border-radius: 8px; padding:8px 10px; cursor:pointer;
}
.search-close:hover,
#search-close:hover { background: rgba(255,255,255,.08); }

.search-results,
#search-results {
  max-height: 60vh; overflow:auto; padding: 10px 14px;
  display:grid; gap:10px;
}
.search-result {
  display:flex; gap:10px; align-items:center;
  padding:10px; border:1px solid rgba(255,255,255,.10);
  border-radius:10px; background: rgba(255,255,255,.02);
}
.search-result__img {
  width:60px; height:60px; border-radius:8px; overflow:hidden;
  background: rgba(255,255,255,.05);
}
.search-result__img img { width:100%; height:100%; object-fit:cover; display:block; }
.search-result__meta { display:grid; gap:2px; }
.search-result__title { color:#fff; font-size:14px; font-family:"Roboto",sans-serif; margin:0; }
.search-result__price { color:#ddd; font-size:13px; font-family:"Roboto",sans-serif; }

/* ===== Cart count bubble (optional) ===== */
.cart-count-bubble {
  display:inline-grid; place-items:center;
  min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 6px;
  background:#fff; color:#000;
  border-radius: 999px;
  font-family: "Roboto", sans-serif;
  font-size: 12px; line-height: 1;
}

/* === CART DRAWER POLISH === */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr;
  pointer-events: none;
}
.cart-drawer__overlay {
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity .25s ease;
}
.cart-drawer__panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(420px, 100%);
  background: #0c0c0c;
  color: #eee;
  box-shadow: -8px 0 24px rgba(0,0,0,0.45);
  transform: translateX(100%);
  transition: transform .30s ease;
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open { pointer-events: auto; }
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-header {
  padding: 16px 18px;
  border-bottom: 1px solid #1c1c1c;
  display:flex;align-items:center;justify-content:space-between;
}
.cart-header h2 { margin:0; font-size:1.1rem; letter-spacing:.02em; }
.cart-header button { background:transparent; border:0; color:#aaa; font-size:22px; }

.cart-list { padding: 10px 14px; overflow:auto; flex:1; }
.cart-item { display:grid; grid-template-columns: 72px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #161616; }
.cart-item:last-child { border-bottom:0; }
.cart-item img { width:72px; height:72px; object-fit:cover; border-radius:10px; background:#111; }
.ci__info { min-width:0; }
.ci__title, .ci__title a { color:#eee; text-decoration:none; font-weight:600; }
.ci__title a:hover { text-decoration:underline; }
.ci__variant { color:#9a9a9a; font-size:.9rem; margin:2px 0 6px; }
.ci__price-each { color:#bfbfbf; font-size:.9rem; }

.ci__controls { display:flex; align-items:center; gap:10px; margin-top:8px; }
.ci__qty-btn { width:26px; height:26px; border-radius:8px; background:#171717; border:1px solid #252525; color:#ddd; }
.ci__qty-btn:hover { background:#1f1f1f; }
.ci__remove { margin-left:auto; background:transparent; border:0; color:#9a9a9a; }
.ci__remove:hover { color:#fff; text-decoration:underline; }
.ci__line { color:#ddd; font-weight:600; }

.cart-footer { border-top:1px solid #1c1c1c; padding:14px 16px; }
.cart-row { display:flex; align-items:center; justify-content:space-between; margin:10px 0 16px; }
.cart-row .label { color:#9a9a9a; }
.cart-row .value { font-weight:700; color:#fff; }

#cart-checkout, #cartp-checkout {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e6e6e6;
  color: #0a0a0a;
  font-weight: 700;
  border: 1px solid #2a2a2a;
  transition: transform .06s ease, background .15s ease;
}
#cart-checkout:hover, #cartp-checkout:hover { background:#fff; }
#cart-checkout:active, #cartp-checkout:active { transform: translateY(1px); }
#cart-checkout:disabled, #cartp-checkout:disabled { opacity:.5; cursor:not-allowed; }

/* ===== Modal / Identity / RPM z-index + pointer logic ===== */

/* Make Netlify Identity sit on the absolute top layer */
.netlify-identity-widget,
.netlify-identity-modal,
.netlify-identity-modal * {
  z-index: 2147483647 !important; /* max practical */
}

/* When Identity is open, freeze/disable site chrome so it can't block taps */
body.identity-open .fixed,
body.identity-open .sticky,
body.identity-open .header,
body.identity-open .floating-logo,
body.identity-open #enter-the-storm,
body.identity-open .dhk-overlay {
  pointer-events: none !important;
  filter: blur(1px);           /* optional: visual cue */
}

/* If you explicitly set huge z-indexes on any brand/logo overlays, reduce them */
.floating-logo, #enter-the-storm, .dhk-overlay {
  z-index: 1000; /* keep below the Identity modal */
}

/* Always put modals/iframes on top */
.netlify-identity-widget,
.netlify-identity-modal,
iframe[src*="readyplayer.me"],
.rpm__modal,
.rpm__modal * {
  z-index: 2147483647 !important;
  position: relative;
}

/* While any modal is open, make our chrome click-through */
body.identity-open .fixed,
body.identity-open .sticky,
body.identity-open .header,
body.identity-open .floating-logo,
body.identity-open #enter-the-storm,
body.identity-open .dhk-overlay,
body.rpm-open .fixed,
body.rpm-open .sticky,
body.rpm-open .header,
body.rpm-open .floating-logo,
body.rpm-open #enter-the-storm,
body.rpm-open .dhk-overlay,
body.modal-open #bottom-dock,
body.modal-open #mobile-hud,
body.modal-open canvas {
  pointer-events: none !important;
  filter: blur(1px); /* optional */
}

/* Keep our docks below modals even when active */
#bottom-dock,
#mobile-hud,
.floating-logo,
#enter-the-storm,
.dhk-overlay {
  z-index: 1000 !important;
}

* {
  /* DEBUG ONLY */
  /* outline: 1px solid rgba(255,0,0,.15); */
}

/* Keep the RPM / Identity modals on top (belt + suspenders) */
iframe[src*="readyplayer.me"],
.netlify-identity-widget,
.netlify-identity-modal { 
  z-index: 2147483647 !important; 
  position: relative;
}

/* When any modal is open, make our chrome click-through */
body.modal-open #bottom-dock,
body.modal-open #mobile-hud,
body.modal-open canvas,
body.modal-open .header,
body.modal-open .floating-logo,
body.modal-open #storm-overlay,
body.modal-open #storm-popup,
body.modal-open .dhk-overlay {
  pointer-events: none !important;
  filter: blur(1px); /* optional */
}

/* Safety: keep our UI below modals even when active */
#bottom-dock,
#mobile-hud,
.header,
.floating-logo,
#storm-overlay,
#storm-popup,
.dhk-overlay {
  z-index: 1000 !important;
}

/* =========================
   TRY-ON / Avatar Modal
   ========================= */

/* Make the avatar modal + RPM iframe clickable (they live under .hud { pointer-events:none }) */
#avatar-modal,
#avatar-modal * ,
#rpm-wrap,
#rpm-wrap iframe {
  pointer-events: auto !important;
}

/* Keep the modal above site chrome */
#avatar-modal {
  z-index: 10001 !important;
}

/* When any modal is open, freeze the actual dock used on this page */
body.modal-open .dock,
body.modal-open #jukebox-controls {
  pointer-events: none !important;
  filter: blur(1px); /* optional visual cue */
}

/* General site chrome stays below modals */
body.modal-open .header,
body.modal-open .floating-logo,
body.modal-open #storm-overlay,
body.modal-open #storm-popup,
body.modal-open .dhk-overlay {
  z-index: 1000 !important; /* safely below Identity/RPM (2.1e9) */
}

/* Saved avatar pill */
#avatar-use-saved,
.chip-saved-avatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, transform .06s ease, border-color .15s ease;
}

/* Where it sits in the modal */
#avatar-modal .chip-saved-avatar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

#avatar-use-saved:hover,
.chip-saved-avatar:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.30); }
#avatar-use-saved:active,
.chip-saved-avatar:active { transform: translateY(1px); }

@media (max-width: 900px) {
  #avatar-modal .chip-saved-avatar {
    top: auto;
    bottom: 12px;
    right: 12px;
  }
}

/* Avatar Modal (overlay layout) */
.avatar-overlay{
  position: fixed; /* cover viewport */
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
  z-index: 10001;
  height: 100dvh; /* mobile Safari safe viewport */
}

.avatar-card{
  width: min(96vw, 860px);
  max-height: 90dvh;
  overflow: auto;
  background: #0d0e10;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  padding: 18px 18px 20px;
}

/* Title glow */
.avatar-title{
  margin: 2px 2px 12px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 18px;
  color: #e9ecf7;
  text-shadow: 0 0 6px rgba(255,255,255,.35), 0 0 18px rgba(80,140,255,.25);
}

/* Actions (pills) */
.avatar-actions{
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 12px;
}
.avatar-actions .btn{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #dbe2ff;
  padding: 10px 14px;
  font: 600 12px/1 'Cinzel', serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
}
.avatar-actions .btn:disabled{ opacity: .45; }

/* Big stage area (RPM iframe) */
.avatar-stage{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #0b0c0f;
  height: clamp(320px, 58vh, 560px); /* good desktop + mobile height */
  overflow: hidden;
}
.avatar-stage iframe{
  width: 100%; height: 100%; border: 0; display: block; background: #0b0c0f;
}

/* URL panel */
.avatar-url{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
  background: #0f1013;
}
.avatar-url label{
  display:block; font-size:12px; opacity:.8; margin-bottom:6px;
  letter-spacing:.06em; text-transform:uppercase; font-family:'Cinzel',serif;
}
.avatar-url input{
  width:100%; padding:10px;
  background:#121214; color:#fff;
  border:1px solid #2a2a2a; border-radius:8px;
}
.avatar-url .url-actions{ margin-top:8px; display:flex; gap:8px; }

/* When avatar modal is open, hide/lock background HUD controls */
html.avatar-open body{ overflow: hidden; }
html.avatar-open .hud .topbar,
html.avatar-open #jukebox-controls{ display: none !important; }

/* Small phones: tighter card paddings */
@media (max-width: 390px){
  .avatar-card{ padding: 14px; border-radius: 16px; }
  .avatar-actions .btn{ padding: 9px 12px; font-size: 11px; letter-spacing: .08em; }
}

/* =========================
   Discounts (cart + drawer)
   ========================= */
.cart-discount {
  margin-bottom: 12px;
  font-size: 12px;
}
.cart-discount-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
#cart-discount-input {
  flex: 1;
  padding: 6px 8px;
}
#cart-discount-apply {
  padding: 6px 10px;
}
.cart-discount-meta {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: 0.85;
}

/* Unified uppercase scope (headings/nav/UI, not body copy) */
h1,h2,h3,
.nav-link,
.chip,
.dock .btn,
.button,
.button--secondary,
.fc__title {
  text-transform: uppercase;
}

/* Respect reduced motion – kill flashes/flickers for sensitive users */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .lightning-flash { animation: none !important; }
}