/** Shopify CDN: Minification failed

Line 28:1 All "@import" rules must come first
Line 128:8 Expected identifier but found whitespace
Line 128:9 Unexpected "var("
Line 195:1 Expected "}" to go with "{"

**/
/* ======================================================
   HEADZ Branding CSS - Tipografía + Colores + UI
====================================================== */

/* ------------------------------
   FUENTES
------------------------------ */

/* High Cruiser - Títulos */
@font-face {
   font-family: 'High Cruiser';
    src: url('/cdn/shop/files/HighCruiserPERSONALUSEONLY.woff2?v=1771408380') format('woff2'),
        url('/cdn/shop/files/HighCruiserPERSONALUSEONLY.woff?v=1771408362') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Brockmann - Texto corrido y subtítulos */
 @import url('https://fonts.cdnfonts.com/css/brockmann');

                
@font-face {
    font-family: 'Brockmann';
    src: url('/cdn/shop/files/Brockmann-Medium.woff2?v=1771408743') format('woff2'),
        url('/cdn/shop/files/Brockmann-Medium.woff?v=1771408739') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------
   JERARQUÍA TIPOGRÁFICA
------------------------------ */

/* Títulos */
h1,h3,h4,h5,h6,.title{
  font-family: 'High Cruiser' !important;
  color: #141414;
  text-transform: uppercase;
 
}

/* Subtítulos y destacados */
.subtitle, .highlight, h3,a {
  font-family: 'Brockmann', sans-serif;
  font-weight: 700;
  color: #455CFF;

}

/* Texto corrido */
body,  li, span {
     font-family: 'Brockmann' !important;                                         
  font-weight: 400;
  color: #141414 ;
 
}

.related-products h2 {
  font-family: 'High Cruiser' !important;
  font-weight: 400;
  color: #141414;
  letter-spacing: 0.2em;
}

/* Citas y textos especiales */
blockquote, .quote, em {
    font-family: 'Brockmann' !important;
  font-style: italic;
  color: #8A8A8F;

}
.newsletter .newsletter__wrapper .inline-richtext {
    font-family: 'Brockmann';
    font-size: 20px;
   
}
p{
   font-family: 'Brockmann' !important;
  font-weight: 400;
  color: #141414;

}

/* ------------------------------
   PALETA DE COLORES HEADZ
------------------------------ */
:root {
  --color-primary: #455CFF;   /* Azul eléctrico */
  --color-secondary: #141414; /* Negro profundo */
  --color-accent: #EDE5D4;    /* Beige claro */
  --color-neutral: #8A8A8F;   /* Gris neutro */
  --color-button-text: #FFFFFF;
}

/* ------------------------------
   BOTONES
------------------------------ */
.button, button, input[type="submit"] {
  background-color: var(--color-primary);
  color: var(--color-button-text);
  font-family: 'Brockmann', sans-serif;
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.button:hover,  input[type="submit"]:hover {
  background-color: #374BFF;
}

/* ------------------------------
   BADGES / DESTACADOS
------------------------------ */
.badge, .highlight-badge {
  background-color: var(--color-secondary);
  color: var(--color-accent)
/* --- HEADZ: Estilo personalizado del menú principal --- */
.header__menu-item {
  color: rgba(20, 20, 20, 0.9); /* Gris oscuro más visible */
  text-decoration: none; /* Quitamos el subrayado si quieres un look más limpio */
  font-family: 'High Cruiser', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.header__menu-item span {
  font-size: 1.5rem;
}

.header__menu-item:hover {
  color: rgb(80, 86, 85); /* gris verdoso HEADZ */
  text-decoration: underline; /* subrayado solo al pasar el ratón */
  text-underline-offset: 0.2rem;
}

.header__menu-item svg {
  width: 1rem;
  height: auto;
  margin-left: 0.6rem;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.header__menu-item[aria-expanded="true"] svg {
  transform: rotate(180deg);
}


/* FREE SHIPPING BAR */
.free-shipping-wrapper {
  margin: 15px 0;
}

.shipping-text {
  font-size: 14px;
  margin-bottom: 6px;
}

.shipping-success {
  font-size: 14px;
  color: #00c853;
  font-weight: 600;
  margin-bottom: 6px;
}

.shipping-progress {
  width: 100%;
  height: 8px;
  background: #eeeeee;
  border-radius: 20px;
  overflow: hidden;
}

.shipping-progress-bar {
  height: 100%;
  background: #ff9800;
  transition: width 0.4s ease;
}

.shipping-progress-bar[style*="100%"] {
  background: #00c853;
}