/** Shopify CDN: Minification failed

Line 248:0 All "@import" rules must come first
Line 513:0 All "@import" rules must come first

**/
/* ============================================
   DARK ATMOSPHERIC HEADER – Custom Override
   Pega esto en Shopify > Themes > Edit Code
   > assets/custom.css  (o en Customizer CSS)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Rajdhani:wght@300;400;500&display=swap');

/* ── Variables ── */
:root {
  --dark-bg: #070911;
  --dark-accent: #c8b89a;
  --dark-white: #e8e4df;
  --dark-dim: rgba(232, 228, 223, 0.4);
  --dark-border: rgba(200, 184, 154, 0.18);
}

/* ── Header background ── */
.header-section #header-component,
.header-section .header__row {
  background-color: transparent !important;
}

.header-section {
  background: var(--dark-bg) !important;
  position: relative;
  overflow: hidden;
}

/* Storm cloud layers behind the header */
.header-section::before,
.header-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
}

.header-section::before {
  width: 700px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(80, 100, 130, 0.2) 0%, transparent 70%);
  top: -60px;
  left: -100px;
  animation: headerCloud1 28s ease-in-out infinite;
}

.header-section::after {
  width: 500px;
  height: 220px;
  background: radial-gradient(ellipse, rgba(60, 80, 110, 0.15) 0%, transparent 70%);
  top: -30px;
  right: -80px;
  animation: headerCloud2 35s ease-in-out infinite;
}

@keyframes headerCloud1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(30px, 10px) scale(1.05); }
}
@keyframes headerCloud2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-25px, -8px) scale(1.04); }
}

/* Ensure content sits above pseudo-elements */
.header-section .header__row,
.header-section #header-component {
  position: relative;
  z-index: 1;
}

/* ── Underlays ── */
.header-section .header__underlay-closed,
.header-section .header__underlay-open {
  background: transparent !important;
}

/* ── Border separador ── */
.header-section .header__row--top,
.header-section .header__row--top .header__columns {
  border-bottom-color: var(--dark-border) !important;
}

/* ── Logo ── */
.header-section .header-logo__image {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Si usas texto como logo */
.header-section .header-logo__text {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
  color: var(--dark-white) !important;
  font-size: 0.85rem !important;
}

/* ── Menú de navegación (desktop) ── */
.header-section header-menu .menu-list__link,
.header-section .header-menu .menu-list__link {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.05rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--dark-dim) !important;
  transition: color 0.35s ease, letter-spacing 0.35s ease !important;
  position: relative;
}

/* Underline animado */
.header-section header-menu .menu-list__link::after,
.header-section .header-menu .menu-list__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--dark-accent);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.header-section header-menu .menu-list__link:hover,
.header-section .header-menu .menu-list__link:hover {
  color: var(--dark-white) !important;
  letter-spacing: 0.28em !important;
}

.header-section header-menu .menu-list__link:hover::after,
.header-section .header-menu .menu-list__link:hover::after {
  width: 100%;
}

/* ── Íconos de acción (search, cart, account) ── */
.header-section .header-actions__action,
.header-section .header-actions__action svg {
  color: var(--dark-dim) !important;
  fill: var(--dark-dim) !important;
  transition: color 0.3s ease, fill 0.3s ease !important;
}

.header-section .header-actions__action:hover,
.header-section .header-actions__action:hover svg {
  color: var(--dark-accent) !important;
  fill: var(--dark-accent) !important;
}

/* ── Contador del carrito ── */
.header-section .cart-count-bubble,
.header-section .badge {
  background-color: var(--dark-accent) !important;
  color: var(--dark-bg) !important;
}

/* ── Drawer / Menú móvil ── */
#menu-drawer,
.header-drawer,
menu-drawer {
  background: var(--dark-bg) !important;
  border-right: 1px solid var(--dark-border) !important;
}

menu-drawer .menu-list__link,
.header-drawer .menu-list__link {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.6rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--dark-dim) !important;
  transition: color 0.3s ease, padding-left 0.3s ease !important;
}

menu-drawer .menu-list__link:hover,
.header-drawer .menu-list__link:hover {
  color: var(--dark-white) !important;
  padding-left: 8px !important;
}

/* Botón hamburguesa */
.header-section .header__icon--menu svg {
  color: var(--dark-dim) !important;
}

/* ── Submenú dropdown ── */
.header-section .mega-menu,
.header-section .menu-list__submenu {
  background: rgba(7, 9, 17, 0.97) !important;
  border: 1px solid var(--dark-border) !important;
  backdrop-filter: blur(12px) !important;
}

.header-section .mega-menu .menu-list__link,
.header-section .menu-list__submenu .menu-list__link {
  font-size: 0.9rem !important;
  letter-spacing: 0.15em !important;
}

/* ── Search modal ── */
#search-modal .search-modal__form,
.search-modal {
  background: rgba(7, 9, 17, 0.98) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

.search-modal input[type='search'],
.search-modal .search__input {
  background: transparent !important;
  color: var(--dark-white) !important;
  border-color: var(--dark-border) !important;
  font-family: 'Cormorant Garamond', serif !important;
  letter-spacing: 0.1em !important;
}

.search-modal input::placeholder {
  color: var(--dark-dim) !important;
}
/* ── Logo imagen metálico ── */
.header-section .header-logo__image {
  filter: none !important;          /* quita el invert que pusimos antes */
  mix-blend-mode: lighten;           /* funde el fondo negro del PNG */
  max-height: 60px !important;       /* ajusta altura según prefieras */
  width: auto !important;
  opacity: 0.92;
  transition: opacity 0.3s ease;
}

.header-section .header-logo__image:hover {
  opacity: 1;
}
/* ============================================
   COLLECTION PAGE – Dark Atmospheric Override
   Agrega esto al final de dark-header-custom.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Rajdhani:wght@300;400;500&display=swap');

/* ── Fondo general de la página ── */
body {
  background-color: #04050a !important;
  color: rgba(232, 228, 223, 0.75) !important;
}

/* ── Fondo del grid de colección ── */
.product-grid-container,
.collection-wrapper,
.section-background {
  background-color: #04050a !important;
}

/* Estrellas animadas en el fondo via pseudo-elemento */
.product-grid-container::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 15%, rgba(200,184,154,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(200,184,154,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 8%, rgba(200,184,154,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 30%, rgba(200,184,154,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 55%, rgba(200,184,154,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 20%, rgba(200,184,154,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 70%, rgba(200,184,154,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 75%, rgba(200,184,154,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 85%, rgba(200,184,154,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 60%, rgba(200,184,154,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 90%, rgba(200,184,154,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 50%, rgba(200,184,154,0.25) 0%, transparent 100%);
  animation: starsFade 6s ease-in-out infinite alternate;
}

@keyframes starsFade {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ── Título de la colección ── */
.collection-hero__title,
.collection__title,
h1.title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(232, 228, 223, 0.9) !important;
}

/* ── Cards de producto ── */
.product-card,
.card-wrapper,
.card {
  background: rgba(10, 11, 18, 0.8) !important;
  border: 1px solid rgba(200, 184, 154, 0.1) !important;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease !important;
}

.product-card:hover,
.card-wrapper:hover,
.card:hover {
  border-color: rgba(200, 184, 154, 0.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Imagen del producto */
.card__media,
.product-card__image-wrapper {
  overflow: hidden;
}

.card__media img,
.product-card__image {
  transition: transform 0.6s ease, filter 0.4s ease !important;
  filter: brightness(0.88) !important;
}

.card:hover .card__media img,
.card-wrapper:hover .product-card__image {
  transform: scale(1.05) !important;
  filter: brightness(1) !important;
}

/* ── Texto de las cards ── */
.card__heading,
.card__heading a,
.product-card__title,
.full-unstyled-link {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(232, 228, 223, 0.8) !important;
  transition: color 0.3s ease !important;
}

.card__heading a:hover,
.full-unstyled-link:hover {
  color: rgba(200, 184, 154, 1) !important;
}

/* Precio */
.price,
.price__regular,
.price-item,
.price-item--regular {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.25em !important;
  color: rgba(200, 184, 154, 0.75) !important;
}

.price__sale,
.price-item--sale {
  color: rgba(200, 184, 154, 1) !important;
}

.price__compare,
.price-item--regular.price-item--last {
  color: rgba(232, 228, 223, 0.3) !important;
  text-decoration: line-through !important;
}

/* Badge de venta/agotado */
.badge,
.card__badge {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  background: rgba(200, 184, 154, 0.15) !important;
  color: rgba(200, 184, 154, 0.9) !important;
  border: 1px solid rgba(200, 184, 154, 0.25) !important;
}

/* ── Filtros ── */
.facets-wrapper,
.facets,
#FacetFiltersForm {
  background: transparent !important;
  border-right: 1px solid rgba(200, 184, 154, 0.1) !important;
}

.facet-filters__header,
.facets__heading {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
  color: rgba(200, 184, 154, 0.7) !important;
}

.facet-checkbox,
.facets__item label {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  color: rgba(232, 228, 223, 0.55) !important;
  transition: color 0.3s ease !important;
}

.facet-checkbox:hover,
.facets__item label:hover {
  color: rgba(232, 228, 223, 0.9) !important;
}

/* Checkbox estilo oscuro */
.facet-checkbox input[type='checkbox']:checked + label,
input[type='checkbox']:checked ~ label {
  color: rgba(200, 184, 154, 1) !important;
}

/* ── Sort/Ordenar dropdown ── */
.facet-filters__sort select,
.collection-filters__sort select {
  background: rgba(10, 11, 18, 0.9) !important;
  color: rgba(232, 228, 223, 0.7) !important;
  border: 1px solid rgba(200, 184, 154, 0.2) !important;
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.2em !important;
  font-size: 12px !important;
}

/* ── Paginación ── */
.pagination .page-link,
.pagination__item a {
  font-family: 'Rajdhani', sans-serif !important;
  color: rgba(200, 184, 154, 0.6) !important;
  border-color: rgba(200, 184, 154, 0.15) !important;
  background: transparent !important;
  letter-spacing: 0.2em !important;
  transition: all 0.3s ease !important;
}

.pagination .page-link:hover,
.pagination__item a:hover,
.pagination .page-link.active {
  color: rgba(232, 228, 223, 0.95) !important;
  border-color: rgba(200, 184, 154, 0.5) !important;
  background: rgba(200, 184, 154, 0.08) !important;
}

/* ── Botón "Load more" / infinite scroll loader ── */
.load-more-button,
.button--load-more {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.5em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: rgba(200, 184, 154, 0.8) !important;
  border: 1px solid rgba(200, 184, 154, 0.3) !important;
  padding: 14px 36px !important;
  transition: all 0.3s ease !important;
}

.load-more-button:hover,
.button--load-more:hover {
  background: rgba(200, 184, 154, 0.08) !important;
  color: rgba(232, 228, 223, 1) !important;
  border-color: rgba(200, 184, 154, 0.6) !important;
}

/* ── Quick add button ── */
.quick-add__submit,
.product-form__submit {
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  background: rgba(200, 184, 154, 0.12) !important;
  color: rgba(232, 228, 223, 0.9) !important;
  border: 1px solid rgba(200, 184, 154, 0.3) !important;
  transition: all 0.3s ease !important;
}

.quick-add__submit:hover,
.product-form__submit:hover {
  background: rgba(200, 184, 154, 0.22) !important;
  border-color: rgba(200, 184, 154, 0.6) !important;
}

/* ── Scrollbar oscura ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #04050a; }
::-webkit-scrollbar-thumb {
  background: rgba(200, 184, 154, 0.25);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 184, 154, 0.5);
}
/* ============================================
   KHAOTIK — PRODUCT PAGE Dark Atmospheric Override
   Pega esto al final de tu custom.css existente
   Shopify > Themes > Edit Code > assets/custom.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Rajdhani:wght@300;400;500&display=swap');

/* ── Variables (por si acaso no están ya) ── */
:root {
  --dark-bg: #070911;
  --dark-accent: #c8b89a;
  --dark-white: #e8e4df;
  --dark-dim: rgba(232, 228, 223, 0.4);
  --dark-border: rgba(200, 184, 154, 0.18);
  --dark-border-hover: rgba(200, 184, 154, 0.45);
  --dark-surface: rgba(10, 11, 18, 0.85);
}

/* ═══════════════════════════════════════════
   1. FONDO GENERAL DE LA PÁGINA DE PRODUCTO
   ═══════════════════════════════════════════ */

.template-product body,
body.template-product {
  background-color: var(--dark-bg) !important;
  color: var(--dark-white) !important;
}

/* Estrellas fijas detrás de todo */
.template-product body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8%  12%, rgba(200,184,154,0.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 22% 38%, rgba(200,184,154,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38%  6%, rgba(200,184,154,0.45) 0%, transparent 100%),
    radial-gradient(1px   1px   at 53% 28%, rgba(200,184,154,0.30) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 67% 52%, rgba(200,184,154,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 82% 18%, rgba(200,184,154,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 68%, rgba(200,184,154,0.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 14% 73%, rgba(200,184,154,0.30) 0%, transparent 100%),
    radial-gradient(1px   1px   at 59% 83%, rgba(200,184,154,0.40) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 33% 58%, rgba(200,184,154,0.35) 0%, transparent 100%),
    radial-gradient(1px   1px   at 76% 88%, rgba(200,184,154,0.30) 0%, transparent 100%),
    radial-gradient(1px   1px   at  4% 48%, rgba(200,184,154,0.25) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 95%, rgba(200,184,154,0.20) 0%, transparent 100%),
    radial-gradient(1px   1px   at 70% 5%,  rgba(200,184,154,0.30) 0%, transparent 100%);
  animation: starsFade 6s ease-in-out infinite alternate;
}

@keyframes starsFade {
  0%   { opacity: 0.6; }
  100% { opacity: 1;   }
}

/* Nube de atmósfera central */
.template-product body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 50%, rgba(60, 80, 120, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 75% 60%, rgba(80, 60, 100, 0.10) 0%, transparent 70%);
  animation: nebulaDrift 30s ease-in-out infinite alternate;
}

@keyframes nebulaDrift {
  0%   { transform: translate(0,    0)    scale(1);    }
  50%  { transform: translate(20px, 10px) scale(1.04); }
  100% { transform: translate(-15px, 5px) scale(0.97); }
}

/* ═══════════════════════════════════════════
   2. CONTENEDOR PRINCIPAL DE PRODUCTO
   ═══════════════════════════════════════════ */

.product-information-content,
.product__info-wrapper,
[class*='product-information'] {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* ═══════════════════════════════════════════
   3. GALERÍA DE IMÁGENES
   ═══════════════════════════════════════════ */

/* Wrapper de la galería */
.product-media-gallery,
[class*='product-media-gallery'],
.product__media-wrapper {
  position: relative;
  z-index: 1;
}

/* Imagen principal */
.product-media-gallery .media,
.product__media img,
.product-media-gallery img {
  background: rgba(8, 9, 16, 0.9) !important;
  filter: brightness(0.92) !important;
  transition: filter 0.5s ease !important;
}

.product-media-gallery .media:hover img,
.product__media:hover img {
  filter: brightness(1) !important;
}

/* Borde sutil en la galería */
.product-media-gallery .media,
.product__media {
  border: 1px solid var(--dark-border) !important;
  transition: border-color 0.4s ease !important;
}

.product-media-gallery .media:hover,
.product__media:hover {
  border-color: var(--dark-border-hover) !important;
}

/* Thumbnails */
.product-media-gallery__thumbnails button,
.thumbnail-list__item button,
.product__thumbnail {
  border: 1px solid transparent !important;
  opacity: 0.55 !important;
  transition: border-color 0.3s ease, opacity 0.3s ease !important;
  background: transparent !important;
}

.product-media-gallery__thumbnails button:hover,
.thumbnail-list__item button:hover,
.product__thumbnail:hover,
.product-media-gallery__thumbnails button[aria-current='true'],
.thumbnail-list__item button[aria-current='true'] {
  border-color: var(--dark-accent) !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════
   4. DETALLES DEL PRODUCTO (columna derecha)
   ═══════════════════════════════════════════ */

/* Vendor / marca */
.product__vendor,
.product-details__vendor,
[class*='product-vendor'] {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
  color: rgba(200, 184, 154, 0.55) !important;
  margin-bottom: 0.5rem !important;
}

/* Título del producto */
.product__title,
.product-details__title,
h1.product-title,
[class*='product-details'] h1,
[class*='product-details'] h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--dark-white) !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  line-height: 1.15 !important;
}

/* Precio */
.product__price .price,
.product-details .price,
.price-item,
.price__regular,
.price-item--regular {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.3em !important;
  color: rgba(200, 184, 154, 0.85) !important;
}

.price__sale .price-item--sale,
.price-item--sale {
  color: var(--dark-accent) !important;
  font-size: 1.2rem !important;
}

.price__compare,
.price-item--regular.price-item--last {
  color: rgba(232, 228, 223, 0.28) !important;
  text-decoration: line-through !important;
}

/* Badge sale/sold-out */
.badge,
.price__badge-sale,
.price__badge-sold-out {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  background: rgba(200, 184, 154, 0.12) !important;
  color: var(--dark-accent) !important;
  border: 1px solid rgba(200, 184, 154, 0.25) !important;
  border-radius: 2px !important;
}

/* ═══════════════════════════════════════════
   5. SELECTOR DE VARIANTES (tallas, colores)
   ═══════════════════════════════════════════ */

/* Label de la opción */
.product-form__label,
.variant-picker__label,
fieldset legend,
.product-details label {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
  color: rgba(200, 184, 154, 0.65) !important;
  margin-bottom: 0.6rem !important;
}

/* Botones de talla */
.variant-picker__option-value,
.swatch-input__label,
.block-swatch,
.variant-picker .button,
[class*='variant-picker'] label,
[class*='swatch'] label {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: rgba(232, 228, 223, 0.55) !important;
  border: 1px solid rgba(200, 184, 154, 0.2) !important;
  transition: all 0.3s ease !important;
  border-radius: 2px !important;
}

.variant-picker__option-value:hover,
.swatch-input__label:hover,
.block-swatch:hover,
[class*='variant-picker'] label:hover {
  color: var(--dark-white) !important;
  border-color: rgba(200, 184, 154, 0.55) !important;
  background: rgba(200, 184, 154, 0.06) !important;
}

/* Talla seleccionada */
.variant-picker__option-value--active,
.swatch-input:checked + .swatch-input__label,
.block-swatch--active,
[class*='variant'] input:checked + label {
  color: var(--dark-bg) !important;
  background: var(--dark-accent) !important;
  border-color: var(--dark-accent) !important;
}

/* Talla agotada */
.variant-picker__option-value--disabled,
.swatch-input__label--disabled,
.block-swatch--disabled {
  opacity: 0.28 !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════
   6. SELECTOR DE CANTIDAD
   ═══════════════════════════════════════════ */

.quantity,
.quantity-wrapper,
[class*='quantity'] {
  background: transparent !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 2px !important;
}

.quantity__input,
[class*='quantity'] input {
  background: transparent !important;
  color: var(--dark-white) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.2em !important;
  border: none !important;
}

.quantity__button,
[class*='quantity'] button {
  background: transparent !important;
  color: rgba(200, 184, 154, 0.6) !important;
  border: none !important;
  transition: color 0.25s ease !important;
}

.quantity__button:hover,
[class*='quantity'] button:hover {
  color: var(--dark-accent) !important;
}

/* ═══════════════════════════════════════════
   7. BOTONES DE COMPRA
   ═══════════════════════════════════════════ */

/* Add to Cart */
.product-form__submit,
.btn-add-to-cart,
button[name='add'],
.product-details .button--primary {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.5em !important;
  text-transform: uppercase !important;
  background: rgba(200, 184, 154, 0.10) !important;
  color: var(--dark-white) !important;
  border: 1px solid rgba(200, 184, 154, 0.40) !important;
  border-radius: 2px !important;
  padding: 16px 32px !important;
  transition: all 0.35s ease !important;
  position: relative;
  overflow: hidden;
}

.product-form__submit::before,
button[name='add']::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 184, 154, 0.06) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.product-form__submit:hover,
button[name='add']:hover {
  background: rgba(200, 184, 154, 0.18) !important;
  border-color: rgba(200, 184, 154, 0.7) !important;
  color: var(--dark-white) !important;
}

.product-form__submit:hover::before,
button[name='add']:hover::before {
  transform: translateX(100%);
}

/* Botón agotado */
.product-form__submit[disabled],
button[name='add'][disabled] {
  background: transparent !important;
  border-color: rgba(200, 184, 154, 0.12) !important;
  color: rgba(232, 228, 223, 0.2) !important;
  cursor: not-allowed !important;
}

/* Buy now / Shop Pay */
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded {
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.3em !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  border: 1px solid rgba(200, 184, 154, 0.25) !important;
  background: rgba(200, 184, 154, 0.06) !important;
  color: rgba(232, 228, 223, 0.7) !important;
  transition: all 0.3s ease !important;
}

.shopify-payment-button__button:hover {
  background: rgba(200, 184, 154, 0.14) !important;
  border-color: rgba(200, 184, 154, 0.5) !important;
}

/* ═══════════════════════════════════════════
   8. STICKY ADD TO CART BAR
   ═══════════════════════════════════════════ */

.sticky-add-to-cart__bar {
  background: rgba(7, 9, 17, 0.92) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 2px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7) !important;
}

.sticky-add-to-cart__bar::before {
  display: none !important;
}

.sticky-add-to-cart__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em !important;
  color: var(--dark-white) !important;
}

.sticky-add-to-cart__variant {
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.2em !important;
  color: rgba(200, 184, 154, 0.6) !important;
}

.sticky-add-to-cart__price {
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.2em !important;
  color: var(--dark-accent) !important;
}

.sticky-add-to-cart__button {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
  background: rgba(200, 184, 154, 0.10) !important;
  color: var(--dark-white) !important;
  border: 1px solid rgba(200, 184, 154, 0.35) !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
}

.sticky-add-to-cart__button:hover {
  background: rgba(200, 184, 154, 0.20) !important;
  border-color: rgba(200, 184, 154, 0.65) !important;
}

/* ═══════════════════════════════════════════
   9. DESCRIPCIÓN / ACORDEÓN / TABS
   ═══════════════════════════════════════════ */

/* Separadores */
.product-details__description,
.product__description,
[class*='product-details'] .rte {
  color: rgba(232, 228, 223, 0.55) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  letter-spacing: 0.04em !important;
}

/* Acordeón/Detalles */
details,
.accordion,
[class*='accordion'] {
  border-top: 1px solid var(--dark-border) !important;
  border-bottom: none !important;
}

details summary,
.accordion__summary,
[class*='accordion'] summary,
[class*='accordion__title'] {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: rgba(200, 184, 154, 0.7) !important;
  padding: 1.1rem 0 !important;
  cursor: pointer !important;
  transition: color 0.3s ease !important;
  background: transparent !important;
  list-style: none !important;
}

details summary:hover,
.accordion__summary:hover {
  color: var(--dark-white) !important;
}

details[open] summary {
  color: var(--dark-white) !important;
}

details .accordion__content,
details > *:not(summary) {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.95rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.8 !important;
  color: rgba(232, 228, 223, 0.5) !important;
  padding-bottom: 1rem !important;
}

/* ═══════════════════════════════════════════
   10. SECCIÓN "YOU MAY ALSO LIKE" / RELACIONADOS
   ═══════════════════════════════════════════ */

/* Título de la sección */
.product-recommendations .section-title,
.complementary-products .section-title,
[class*='recommendations'] h2,
[class*='recommendations'] h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(232, 228, 223, 0.75) !important;
}

/* Cards de productos relacionados — heredan los estilos
   de collection-page que ya tienes en custom.css */

/* ═══════════════════════════════════════════
   11. BREADCRUMBS
   ═══════════════════════════════════════════ */

.breadcrumbs,
.breadcrumb,
nav[aria-label*='breadcrumb'],
[class*='breadcrumb'] {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
}

.breadcrumbs a,
.breadcrumb a,
[class*='breadcrumb'] a {
  color: rgba(200, 184, 154, 0.45) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.breadcrumbs a:hover,
.breadcrumb a:hover {
  color: rgba(200, 184, 154, 0.9) !important;
}

.breadcrumbs .breadcrumb__separator,
[class*='breadcrumb'] span:not(a span) {
  color: rgba(200, 184, 154, 0.2) !important;
}

/* ═══════════════════════════════════════════
   12. SHARE / SOCIAL LINKS
   ═══════════════════════════════════════════ */

.product-details .share-button,
[class*='share'] button,
[class*='share'] a {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(200, 184, 154, 0.4) !important;
  transition: color 0.3s ease !important;
}

.product-details .share-button:hover,
[class*='share'] button:hover {
  color: rgba(200, 184, 154, 0.85) !important;
}

/* ═══════════════════════════════════════════
   13. PRODUCT HOTSPOTS (hotspot overlay)
   ═══════════════════════════════════════════ */

.hotspot-trigger {
  background: rgba(7, 9, 17, 0.65) !important;
  border: 1px solid var(--dark-border) !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}

.hotspot-trigger::after {
  background: var(--dark-accent) !important;
}

.hotspot:hover .hotspot-trigger {
  background: rgba(7, 9, 17, 0.85) !important;
  border-color: var(--dark-border-hover) !important;
}

/* Dialog del hotspot */
.hotspot-dialog {
  background: rgba(7, 9, 17, 0.97) !important;
  border: 1px solid var(--dark-border) !important;
  backdrop-filter: blur(12px) !important;
}

.hotspot-dialog__product-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  color: var(--dark-white) !important;
}

.hotspot-dialog .price,
.hotspot-dialog .price-item {
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.2em !important;
  color: rgba(200, 184, 154, 0.85) !important;
}

.hotspot-dialog .quick-add__button {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  background: rgba(200, 184, 154, 0.10) !important;
  color: var(--dark-white) !important;
  border: 1px solid rgba(200, 184, 154, 0.30) !important;
  transition: all 0.3s ease !important;
}

.hotspot-dialog .quick-add__button:hover {
  background: rgba(200, 184, 154, 0.20) !important;
  border-color: rgba(200, 184, 154, 0.60) !important;
}

/* ═══════════════════════════════════════════
   14. MAIN COLLECTION LIST Y COLLECTION PAGE
       (complementa el CSS que ya tienes)
   ═══════════════════════════════════════════ */

/* Imagen de colección card */
._collection-card img,
.collection-card img,
[class*='collection-card'] img {
  filter: brightness(0.75) !important;
  transition: filter 0.5s ease, transform 0.6s ease !important;
}

._collection-card:hover img,
.collection-card:hover img,
[class*='collection-card']:hover img {
  filter: brightness(0.95) !important;
  transform: scale(1.04) !important;
}

/* Título de colección card */
._collection-card .card__heading,
.collection-card .card__heading,
[class*='collection-card'] h2,
[class*='collection-card'] h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--dark-white) !important;
}

/* Overlay dorado sutil en hover */
._collection-card::after,
.collection-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(200, 184, 154, 0.08) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

._collection-card:hover::after,
.collection-card:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════
   15. NOTIFICACIONES / TOAST
   ═══════════════════════════════════════════ */

.cart-notification,
[class*='cart-notification'],
[class*='toast'] {
  background: rgba(7, 9, 17, 0.97) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-white) !important;
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.15em !important;
  backdrop-filter: blur(12px) !important;
}

.cart-notification__title,
[class*='cart-notification'] h2,
[class*='cart-notification'] strong {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  color: var(--dark-white) !important;
}

.cart-notification .button,
[class*='cart-notification'] .button {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid rgba(200, 184, 154, 0.35) !important;
  color: var(--dark-white) !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
}

.cart-notification .button:hover {
  background: rgba(200, 184, 154, 0.12) !important;
  border-color: rgba(200, 184, 154, 0.65) !important;
}

/* ═══════════════════════════════════════════
   16. RESPONSIVE MÓVIL
   ═══════════════════════════════════════════ */

@media screen and (max-width: 749px) {
  .product__title,
  .product-details__title {
    font-size: 1.6rem !important;
    letter-spacing: 0.12em !important;
  }

  .sticky-add-to-cart__bar {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid var(--dark-border) !important;
  }

  .variant-picker__option-value,
  .swatch-input__label {
    min-width: 40px !important;
    min-height: 40px !important;
  }
}
/* ============================================
   KHAOTIK — HEADER ICONS Override
   Pega esto al final de tu custom.css
   ============================================ */

/* ── Fondo del header ── */
#header-component,
.header__row--top,
.header-section {
  background: rgba(4, 5, 10, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(200, 184, 154, 0.1) !important;
}

/* ── Íconos de acción (búsqueda, perfil, carrito) ── */
.header-actions__action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(200, 184, 154, 0.55) !important;
  background: transparent !important;
  border: none !important;
  transition: color 0.3s ease, transform 0.2s ease !important;
  cursor: pointer;
}

.header-actions__action svg,
.header-actions__action .svg-wrapper svg {
  stroke: rgba(200, 184, 154, 0.55) !important;
  fill: none !important;
  transition: stroke 0.3s ease !important;
}

.header-actions__action:hover {
  color: rgba(232, 228, 223, 0.95) !important;
  transform: translateY(-1px) !important;
}

.header-actions__action:hover svg,
.header-actions__action:hover .svg-wrapper svg {
  stroke: rgba(232, 228, 223, 0.95) !important;
}

/* ── Carrito — badge de cantidad ── */
.cart-count-bubble,
.header-actions__action .badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  background: rgba(200, 184, 154, 0.9) !important;
  color: #04050a !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* ── Logo texto ── */
.header-logo__text,
.header__logo-text {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.5em !important;
  text-transform: uppercase !important;
  color: rgba(232, 228, 223, 0.88) !important;
}

/* ── Logo imagen ── */
.header-logo__image,
.header__logo img {
  mix-blend-mode: lighten !important;
  opacity: 0.88 !important;
  max-height: 52px !important;
  width: auto !important;
  transition: opacity 0.3s ease !important;
}

.header-logo__image:hover,
.header__logo img:hover {
  opacity: 1 !important;
}

/* ── Links del menú desktop ── */
.menu-list__link,
header-menu .menu-list__link {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
  color: rgba(200, 184, 154, 0.55) !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.3s ease !important;
  padding-bottom: 2px !important;
}

.menu-list__link::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background: rgba(200, 184, 154, 0.6) !important;
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.menu-list__link:hover {
  color: rgba(232, 228, 223, 0.95) !important;
}

.menu-list__link:hover::after {
  width: 100% !important;
}

/* ── Búsqueda modal ── */
.search-modal,
#search-modal {
  background: rgba(4, 5, 10, 0.98) !important;
  border-bottom: 1px solid rgba(200, 184, 154, 0.12) !important;
  backdrop-filter: blur(16px) !important;
}

.search-modal__input,
.search__input,
input[type='search'] {
  background: transparent !important;
  color: rgba(232, 228, 223, 0.88) !important;
  border: none !important;
  border-bottom: 1px solid rgba(200, 184, 154, 0.2) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.12em !important;
  caret-color: rgba(200, 184, 154, 0.8) !important;
  outline: none !important;
  transition: border-color 0.3s ease !important;
}

.search-modal__input:focus,
.search__input:focus,
input[type='search']:focus {
  border-bottom-color: rgba(200, 184, 154, 0.55) !important;
}

.search-modal__input::placeholder,
.search__input::placeholder,
input[type='search']::placeholder {
  color: rgba(200, 184, 154, 0.28) !important;
  letter-spacing: 0.3em !important;
  font-size: 0.85rem !important;
}

/* Botón de cerrar búsqueda */
.search-modal__close,
.search__close {
  color: rgba(200, 184, 154, 0.45) !important;
  transition: color 0.3s ease !important;
}

.search-modal__close:hover,
.search__close:hover {
  color: rgba(232, 228, 223, 0.9) !important;
}

/* Resultados predictivos */
.predictive-search,
.predictive-search__results {
  background: rgba(7, 9, 17, 0.98) !important;
  border: 1px solid rgba(200, 184, 154, 0.12) !important;
  backdrop-filter: blur(16px) !important;
}

.predictive-search__item {
  border-bottom: 1px solid rgba(200, 184, 154, 0.06) !important;
  transition: background 0.2s ease !important;
}

.predictive-search__item:hover {
  background: rgba(200, 184, 154, 0.05) !important;
}

.predictive-search__item-heading,
.predictive-search__item a {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  color: rgba(232, 228, 223, 0.8) !important;
}

.predictive-search__item .price {
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.2em !important;
  color: rgba(200, 184, 154, 0.7) !important;
}

/* ── Drawer (menú móvil) ── */
menu-drawer,
#menu-drawer,
.header-drawer {
  background: rgba(4, 5, 10, 0.99) !important;
  border-right: 1px solid rgba(200, 184, 154, 0.1) !important;
  backdrop-filter: blur(20px) !important;
}

menu-drawer .menu-list__link,
.header-drawer .menu-list__link {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(200, 184, 154, 0.6) !important;
  transition: color 0.3s ease, padding-left 0.3s ease !important;
}

menu-drawer .menu-list__link:hover,
.header-drawer .menu-list__link:hover {
  color: rgba(232, 228, 223, 0.95) !important;
  padding-left: 8px !important;
}

/* Botón hamburguesa */
.header__icon--menu svg,
.header-menu__icon svg {
  stroke: rgba(200, 184, 154, 0.55) !important;
  transition: stroke 0.3s ease !important;
}

.header__icon--menu:hover svg,
.header-menu__icon:hover svg {
  stroke: rgba(232, 228, 223, 0.9) !important;
}

/* ── Dropdown submenú ── */
.mega-menu,
.menu-list__submenu,
.header__submenu {
  background: rgba(4, 5, 10, 0.98) !important;
  border: 1px solid rgba(200, 184, 154, 0.12) !important;
  backdrop-filter: blur(16px) !important;
}

/* ── Navigation bar (segunda fila si existe) ── */
.header__navigation-bar-row {
  background: rgba(4, 5, 10, 0.92) !important;
  border-top: 1px solid rgba(200, 184, 154, 0.06) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #04050a; }
::-webkit-scrollbar-thumb {
  background: rgba(200, 184, 154, 0.2);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 184, 154, 0.45);
}
/* ============================================
   KHAOTIK — Fix íconos header encimados
   Agrega esto AL FINAL de dark-header-custom.css
   ============================================ */

/* Contenedor de íconos — forzar fila horizontal */
.header-actions,
.header__actions,
[class*='header-actions'] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Cada ícono individual — resetear posición */
.header-actions__action {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  padding: 8px !important;
  flex-shrink: 0 !important;
}

/* Badge del carrito — solo relativo al ícono del carrito */
.header-actions__action .cart-count-bubble,
.header-actions__action .badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: unset !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(200, 184, 154, 0.9) !important;
  color: #04050a !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Etiquetas de texto bajo los íconos (Carrito, Cuenta) */
.header-actions__action span:not(.svg-wrapper):not(.cart-count-bubble):not(.badge) {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(200, 184, 154, 0.45) !important;
  line-height: 1 !important;
  margin-top: 3px !important;
  display: block !important;
}

/* SVG íconos — tamaño consistente */
.header-actions__action svg,
.header-actions__action .svg-wrapper svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
/* ============================================
   KHAOTIK — Logo centrado en el header
   Agrega esto AL FINAL de dark-header-custom.css
   ============================================ */

/* Forzar layout del header en 3 columnas: menu | logo | actions */
.header__columns {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
}

/* Logo va al centro */
.header-logo,
.header__logo,
[class*='header-logo'] {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
}

/* Menú va a la izquierda */
.header__menu,
header-menu,
[class*='header-menu']:not(menu-drawer) {
  grid-column: 1 !important;
  justify-self: start !important;
}

/* Íconos van a la derecha */
.header-actions,
.header__actions {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* Tamaño del logo */
.header-logo__image,
.header__logo img {
  max-height: 48px !important;
  width: auto !important;
  display: block !important;
  mix-blend-mode: lighten !important;
  opacity: 0.92 !important;
  transition: opacity 0.3s ease !important;
}

.header-logo__image:hover,
.header__logo img:hover {
  opacity: 1 !important;
}

/* Mobile — logo centrado también */
@media screen and (max-width: 749px) {
  .header__columns {
    grid-template-columns: 1fr auto 1fr !important;
  }

  .header-logo__image,
  .header__logo img {
    max-height: 36px !important;
  }
}
/* ============================================
   KHAOTIK — Búsqueda, Cuenta y Carrito centrados
   Agrega esto AL FINAL de dark-header-custom.css
   ============================================ */

/* Header en 3 columnas: logo | actions | vacío */
.header__columns {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  width: 100% !important;
}

/* Logo a la izquierda */
.header-logo,
.header__logo,
[class*='header-logo'] {
  grid-column: 1 !important;
  justify-self: start !important;
}

/* Íconos centrados */
.header-actions,
.header__actions {
  grid-column: 2 !important;
  justify-self: center !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Cada ícono */
.header-actions__action {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  color: rgba(200, 184, 154, 0.55) !important;
  transition: color 0.3s ease, transform 0.2s ease !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
}

.header-actions__action:hover {
  color: rgba(232, 228, 223, 0.95) !important;
  transform: translateY(-1px) !important;
}

/* SVG íconos */
.header-actions__action svg,
.header-actions__action .svg-wrapper svg {
  width: 20px !important;
  height: 20px !important;
  stroke: rgba(200, 184, 154, 0.55) !important;
  fill: none !important;
  display: block !important;
  transition: stroke 0.3s ease !important;
}

.header-actions__action:hover svg,
.header-actions__action:hover .svg-wrapper svg {
  stroke: rgba(232, 228, 223, 0.95) !important;
}

/* Etiquetas Carrito / Cuenta */
.header-actions__action span:not(.svg-wrapper):not(.cart-count-bubble):not(.badge) {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 8px !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: rgba(200, 184, 154, 0.35) !important;
  margin-top: 4px !important;
  display: block !important;
  line-height: 1 !important;
}

/* Badge carrito */
.cart-count-bubble,
.header-actions__action .badge {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: rgba(200, 184, 154, 0.9) !important;
  color: #04050a !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .header-actions,
  .header__actions {
    gap: 4px !important;
  }

  .header-actions__action {
    padding: 6px 8px !important;
  }
}