/** Shopify CDN: Minification failed

Line 49:0 All "@import" rules must come first

**/
/* ==========================================================================
   Soulpaw Design System - Root Variables
   ========================================================================== */
:root {
  /* Colors */
  --color-bg-primary: #FAF7F2; /* Cream */
  --color-bg-secondary: #F5EFE4; /* Sand */
  --color-bg-dark: #2C1F10; /* Espresso */
  --color-bg-footer: #1A1008;
  
  /* Text Colors */
  --color-text-main: #2C1F10;
  --color-text-secondary: #5C4A35;
  --color-text-accent: #8B4513; /* For italics/highlights */
  --color-text-overline: #8B6F4E;
  --color-text-light: #FAF7F2;
  
  /* Typography */
  --font-serif: 'Times New Roman', Times, serif; /* Reemplazar con la fuente real si la hay */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Borders & Radius */
  --border-radius-sm: 2px;
  --border-radius-lg: 12px;
  --color-border-subtle: rgba(139, 69, 19, 0.12); /* Based on the #8B4513 hex */
}

/* ==========================================================================
   Fix: Remover el espacio blanco entre el Header y el Hero (Solo en la Home)
   ========================================================================== */
.template-index .main-content,
.template-index #MainContent {
  padding-top: 0 !important;
}

/* Por si Impulse también inyecta margen debajo del grupo del header */
.template-index #shopify-section-header-group {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   1. IMPORTAR FUENTES (Fraunces e Inter)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   2. SOULPAW DESIGN SYSTEM - ROOT VARIABLES (DESKTOP)
   ========================================================================== */
:root {
  /* Colors */
  --color-bg-primary: #FAF7F2; 
  --color-bg-secondary: #F5EFE4; 
  --color-bg-dark: #2C1F10; 
  --color-bg-footer: #1A1008;
  
  /* Text Colors */
  --color-text-main: #2C1F10;
  --color-text-secondary: #5C4A35;
  --color-text-accent: #8B4513; /* Acento oscuro como solicitaste */
  --color-text-italic: #3D2817; /* Oscuro para las cursivas Fraunces */
  --color-text-overline: #8B6F4E;
  --color-text-light: #FAF7F2;
  
  /* Typography Families */
  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;
  
  /* Typography Sizes - Desktop */
  --text-h1: 48px;
  --text-h2: 32px;
  --text-h3: 22px;
  --text-quote: 24px;
  
  --text-body-large: 17px;
  --text-body: 16px; /* Cumpliendo la regla: No bajar de 16px en body */
  --text-btn: 14px;
  --text-caption: 13px; /* Solo para captions permitidos */
  --text-eyebrow: 11px;

  /* Borders & Radius */
  --border-radius-sm: 2px;
  --border-radius-lg: 12px;
  --color-border-subtle: rgba(139, 69, 19, 0.12);
}

/* ==========================================================================
   3. SOULPAW DESIGN SYSTEM - MOBILE OVERRIDES
   ========================================================================== */
@media screen and (max-width: 768px) {
  :root {
    /* Al cambiar la variable aquí, todas las secciones se ajustan solas en móvil */
    --text-h1: 36px;
    --text-h2: 26px;
    --text-h3: 20px;
    --text-quote: 20px;
    
    --text-body-large: 16px;
    --text-body: 15px; /* Mínimo permitido 15px en móvil */
  }
}

/* ==========================================================================
   4. FIXES GLOBALES
   ========================================================================== */
/* Remover espacio blanco entre Header y Hero en Home */
.template-index .main-content,
.template-index #MainContent {
  padding-top: 0 !important;
}

.template-index #shopify-section-header-group {
  margin-bottom: 0 !important;
}

/* Forzar que las etiquetas <em> hereden la fuente Serif y el color oscuro por defecto */
em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-italic) !important;
}

/* Evita el scroll horizontal causado por el breakout de 100vw */
body, html {
  overflow-x: hidden;
}

/* ==========================================================================
   Kiwi Sizing "Size Guide" Button Adjustments
   ========================================================================== */

/* 1. Pull the Size Guide closer to the variant options above it */
#kiwi-sizing-target,
.ks-chart-container.sizing-chart-container {
  margin-top: 4px !important; /* Reduces the gap above the link */
  margin-bottom: 8px !important; /* Keeps it tight with the element below */
}

/* 2. Adjust the variant block margin if the size guide is injected inside it */
.pdp-variant:has(#kiwi-sizing-target) {
    margin-bottom: 12px; /* Reduces the large 24px default margin */
}

/* 3. Style the link to match your theme (Optional, but recommended) */
span.ks-chart-modal-link {
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--color-text-secondary) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

/* 4. Fix icon alignment */
span.ks-chart-modal-link.with-icon img,
span.ks-chart-modal-link.with-icon svg {
    margin-right: 6px !important;
    width: 14px !important;
    height: 14px !important;
}