/** Shopify CDN: Minification failed

Line 10:0 Unexpected "{"
Line 10:1 Unexpected "{"
Line 10:3 Expected identifier but found "'client-first-style.css'"
Line 705:0 Unexpected "}"
Line 745:1 Expected identifier but found "{"

**/
{{ 'client-first-style.css' | asset_url | stylesheet_tag }}


/**
 * CLIENT-FIRST SYSTEM - SHOPIFY THEME
 * Sistema de diseño basado en Client-First
 * Versión: 1.0.0
 */

/* ============================================
   VARIABLES CSS
   ============================================ */

:root {
  /* Colores de Marca */
  --color-brand: #4c0101;
  --color-accent: #4c0101;
  
  /* Colores Neutros */
  --color-primary: #4c0101;
  --color-secondary: #4c0101;
  --color-tertiary: #FFFFFF;
  
  /* Colores de Fondo */
  --bg-primary: #FFFFFF;
  --bg-secondary: #4c0101;
  --bg-tertiary: #4c0101;
  
  /* Colores de Estado */
  --color-success: #22C55E;
  --color-error: #EF4444;
  --color-warning: #F59E0B;
  --color-info: #3B82F6;
  
  /* Spacing System (8px base) */
  --spacing-tiny: 0.25rem;      /* 4px */
  --spacing-small: 0.5rem;      /* 8px */
  --spacing-medium: 1rem;       /* 16px */
  --spacing-large: 1.5rem;      /* 24px */
  --spacing-xlarge: 2rem;       /* 32px */
  --spacing-xxlarge: 3rem;      /* 48px */
  --spacing-huge: 4rem;         /* 64px */
  --spacing-xhuge: 6rem;        /* 96px */
  
  /* Padding Global */
  --padding-global: 2rem;       /* 32px - Tablet/Mobile default */
  
  /* Padding de Secciones (vertical) */
  --padding-section-small: 2rem;    /* 32px */
  --padding-section-medium: 2.5rem; /* 32px */
  --padding-section-large: 3.5rem;  /* 40px */
  --padding-section-huge: 5rem;     /* 56px */
  
  /* Tamaños de Fuente - Mobile First */
  --text-size-tiny: 0.75rem;     /* 12px */
  --text-size-small: 0.875rem;   /* 14px */
  --text-size-regular: 1rem;     /* 16px */
  --text-size-medium: 1rem;      /* 16px */
  --text-size-large: 1.125rem;   /* 18px */
  
  /* Headings - Mobile First */
  --heading-h1: 2.5rem;    /* 40px */
  --heading-h2: 2rem;      /* 32px */
  --heading-h3: 1.75rem;   /* 28px */
  --heading-h4: 1.5rem;    /* 24px */
  --heading-h5: 1.25rem;   /* 20px */
  --heading-h6: 1.125rem;  /* 18px */
  
  /* Line Heights */
  --line-height-heading: 1.2;
  --line-height-body: 1.6;
  --line-height-small: 1.4;
  
  /* Container */
  --container-max-width: 1450px;
  
  /* Gaps */
  --gap-tiny: 0.5rem;      /* 8px */
  --gap-small: 1rem;       /* 16px */
  --gap-medium: 1.5rem;    /* 24px */
  --gap-large: 2rem;       /* 32px */
  --gap-xlarge: 3rem;      /* 48px */
  --gap-huge: 4rem;        /* 64px */
  
  /* Border Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.15s ease;
}

/* Tablet Breakpoint */
@media screen and (min-width: 768px) {
  :root {
    --padding-global: 2rem; /* 32px */
    --padding-section-small: 2.5rem;   /* 40px */
    --padding-section-medium: 3rem;    /* 48px */
    --padding-section-large: 4rem;     /* 64px */
    --padding-section-huge: 6rem;      /* 96px */
    
    /* Text Sizes Tablet */
    --text-size-medium: 1.125rem;  /* 18px */
    --text-size-large: 1.25rem;    /* 20px */
    
    /* Headings Tablet */
    --heading-h1: 3.5rem;   /* 56px */
    --heading-h2: 2.5rem;   /* 40px */
    --heading-h3: 2rem;     /* 32px */
    --heading-h4: 1.75rem;  /* 28px */
    --heading-h5: 1.375rem; /* 22px */
    --heading-h6: 1.125rem; /* 18px */
  }
}

/* Desktop Breakpoint */
@media screen and (min-width: 1024px) {
  :root {
    --padding-global: 2.5rem; /* 40px */
    --padding-section-small: 3rem;    /* 48px */
    --padding-section-medium: 4rem;   /* 48px */
    --padding-section-large: 5rem;    /* 64px */
    --padding-section-huge: 7.5rem;   /* 80px */
    
    /* Headings Desktop */
    --heading-h1: 4rem;     /* 64px */
    --heading-h2: 3rem;     /* 48px */
    --heading-h3: 2.5rem;   /* 40px */
    --heading-h4: 2rem;     /* 32px */
    --heading-h5: 1.5rem;   /* 24px */
    --heading-h6: 1.25rem;  /* 20px */
  }
}

/* ============================================
   RESET Y BASE STYLES
   ============================================ */









/* ============================================
   LAYOUT - STRUCTURE
   ============================================ */

/* Padding Global */
.padding-global {
  padding-left: var(--padding-global);
  padding-right: var(--padding-global);
}

/* Container */
.container-large {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
}

.container-medium {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.container-small {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Page Wrapper */
.page-wrapper {
  overflow-x: hidden;
}

/* Main Wrapper */
.main-wrapper {
  position: relative;
}

/* ============================================
   PADDING DE SECCIONES
   ============================================ */

.padding-section-small {
  padding-top: var(--padding-section-small);
  padding-bottom: var(--padding-section-small);
}

.padding-section-medium {
  padding-top: var(--padding-section-medium);
  padding-bottom: var(--padding-section-medium);
}

.padding-section-large {
  padding-top: var(--padding-section-large);
  padding-bottom: var(--padding-section-large);
}

.padding-section-huge {
  padding-top: var(--padding-section-huge);
  padding-bottom: var(--padding-section-huge);
}

/* Padding Top/Bottom Individual */
.padding-top-small { padding-top: var(--padding-section-small); }
.padding-top-medium { padding-top: var(--padding-section-medium); }
.padding-top-large { padding-top: var(--padding-section-large); }
.padding-top-huge { padding-top: var(--padding-section-huge); }

.padding-bottom-small { padding-bottom: var(--padding-section-small); }
.padding-bottom-medium { padding-bottom: var(--padding-section-medium); }
.padding-bottom-large { padding-bottom: var(--padding-section-large); }
.padding-bottom-huge { padding-bottom: var(--padding-section-huge); }

/* ============================================
   TYPOGRAPHY - HEADINGS
   ============================================ */

.heading-style-h1,
.heading-style-h2,
.heading-style-h3,
.heading-style-h4,
.heading-style-h5,
.heading-style-h6 {
  font-weight: 700;
  line-height: var(--line-height-heading);
  margin-bottom: 0;
}
.brand-logos h2.title {
  font-size: var(--text-size-regular) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
  text-transform: none !important;
}

/* SUBHEADING — heading-style-h3 */
.slideshow .banner__sub_heading.heading-style-h3 {
  font-size: 40px !important;
  line-height: 1.2 !important;
}

/* HEADING — heading-style-h1 */
.slideshow .banner__heading.heading-style-h1 {
  font-size: 56px !important;
  line-height: 1.1 !important;
}

.heading-style-h1 {
  font-size: var(--heading-h1);
}

.heading-style-h2 {
  font-size: var(--heading-h2);
}

.heading-style-h3 {
  font-size: var(--heading-h3);
}

.heading-style-h4 {
  font-size: var(--heading-h4);
}

.heading-style-h5 {
  font-size: var(--heading-h5);
}

.heading-style-h6 {
  font-size: var(--heading-h6);
}

/* Variaciones de Headings */
.heading-style-h1-large {
  font-size: calc(var(--heading-h1) * 1.2);
}

.heading-style-h1-small {
  font-size: calc(var(--heading-h1) * 0.8);
}

.heading-style-h2-display {
  font-size: calc(var(--heading-h2) * 1.3);
}

/* ============================================
   TYPOGRAPHY - BODY TEXT
   ============================================ */

.text-style-body {
  font-size: var(--text-size-regular);
  line-height: var(--line-height-body);
}

.text-style-body-large {
  font-size: var(--text-size-large);
  line-height: var(--line-height-body);
}

.text-style-body-small {
  font-size: var(--text-size-small);
  line-height: var(--line-height-small);
}

/* Text Sizes */
.text-size-tiny { font-size: var(--text-size-tiny); }
.text-size-small { font-size: var(--text-size-small); }
.text-size-regular { font-size: var(--text-size-regular); }
.text-size-medium { font-size: var(--text-size-medium); }
.text-size-large { font-size: var(--text-size-large); }

/* Otros Estilos de Texto */
.text-style-link {
  color: var(--color-brand);
  text-decoration: underline;
  transition: var(--transition-base);
}

.text-style-link:hover {
  color: var(--color-secondary);
}

.text-style-label {
  font-size: var(--text-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.text-style-caption {
  font-size: var(--text-size-small);
  color: var(--color-secondary);
  line-height: var(--line-height-small);
}

.text-style-quote {
  font-size: var(--text-size-large);
  font-style: italic;
  border-left: 4px solid var(--color-brand);
  padding-left: var(--spacing-medium);
}

/* ============================================
   COLORES DE TEXTO
   ============================================ */

.text-color-brand { color: var(--color-brand); }
.text-color-accent { color: var(--color-accent); }
.text-color-primary { color: var(--color-primary); }
.text-color-secondary { color: var(--color-secondary); }
.text-color-tertiary { color: var(--color-tertiary); }
.text-color-white { color: #FFFFFF; }
.text-color-black { color: #000000; }

/* Colores de Estado */
.text-color-success { color: var(--color-success); }
.text-color-error { color: var(--color-error); }
.text-color-warning { color: var(--color-warning); }
.text-color-info { color: var(--color-info); }

/* ============================================
   COLORES DE FONDO
   ============================================ */

.background-color-brand { background-color: var(--color-brand); }
.background-color-accent { background-color: var(--color-accent); }
.background-color-primary { background-color: var(--bg-primary); }
.background-color-secondary { background-color: var(--bg-secondary); }
.background-color-tertiary { background-color: var(--bg-tertiary); }
.background-color-white { background-color: #FFFFFF; }
.background-color-black { background-color: #000000; }

/* Fondos de Estado */
.background-color-success { background-color: var(--color-success); }
.background-color-error { background-color: var(--color-error); }
.background-color-warning { background-color: var(--color-warning); }
.background-color-info { background-color: var(--color-info); }

/* ============================================
   BORDERS
   ============================================ */

.border-color-brand { border-color: var(--color-brand); }
.border-color-light { border-color: rgba(0, 0, 0, 0.1); }
.border-color-dark { border-color: rgba(0, 0, 0, 0.8); }

/* ============================================
   SPACING UTILITIES
   ============================================ */

/* Margins */
.margin-top { margin-top: var(--spacing-medium); }
.margin-top-small { margin-top: var(--spacing-small); }
.margin-top-medium { margin-top: var(--spacing-medium); }
.margin-top-large { margin-top: var(--spacing-large); }
.margin-top-xlarge { margin-top: var(--spacing-xlarge); }
.margin-top-xxlarge { margin-top: var(--spacing-xxlarge); }

.margin-bottom { margin-bottom: var(--spacing-medium); }
.margin-bottom-small { margin-bottom: var(--spacing-small); }
.margin-bottom-medium { margin-bottom: var(--spacing-medium); }
.margin-bottom-large { margin-bottom: var(--spacing-large); }
.margin-bottom-xlarge { margin-bottom: var(--spacing-xlarge); }
.margin-bottom-xxlarge { margin-bottom: var(--spacing-xxlarge); }

.margin-left { margin-left: var(--spacing-medium); }
.margin-right { margin-right: var(--spacing-medium); }

.margin-vertical {
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
}

.margin-horizontal {
  margin-left: var(--spacing-medium);
  margin-right: var(--spacing-medium);
}

/* ============================================
   FLEXBOX & GRID UTILITIES
   ============================================ */

/* Flex */
.flex {
  display: flex;
}

.flex-vertical {
  display: flex;
  flex-direction: column;
}

.flex-horizontal {
  display: flex;
  flex-direction: row;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* Gaps */
.gap-tiny { gap: var(--gap-tiny); }
.gap-small { gap: var(--gap-small); }
.gap-medium { gap: var(--gap-medium); }
.gap-large { gap: var(--gap-large); }
.gap-xlarge { gap: var(--gap-xlarge); }
.gap-huge { gap: --gap-huge); }

/* Grid */


.grid-2cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-medium);
}

.grid-3cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-medium);
}

.grid-4cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-medium);
}

/* Responsive Grids */
@media screen and (max-width: 991px) {
  .grid-3cols,
  .grid-4cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .grid-2cols,
  .grid-3cols,
  .grid-4cols {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

/* Hide on Mobile */
@media screen and (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Show on Mobile */
@media screen and (max-width: 767px) {
  .show-mobile {
    display: block !important;
  }
}

/* Hide on Tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Show on Tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .show-tablet {
    display: block !important;
  }
}

/* Hide on Desktop */
@media screen and (min-width: 992px) {
  .hide-desktop {
    display: none !important;
  }
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */

.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }

/* ============================================
   BUTTONS (ejemplo base)
   ============================================ */
   
   /* Poner los botones EN FILA */
.buttons-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
}
/* ==========================================================
   FIX FINAL — Botón del slideshow con estilo personalizado
   ========================================================== */

/* ==========================================================
   FIX FINAL — Botón del slideshow con estilo personalizado
   ========================================================== */

/* ==========================================================
   Botón blanco para el slideshow (igual que Two Ways to Shine)
   ========================================================== */

.slideshow__text-wrapper .banner__box .button-custom {
  display: inline-flex !important;
  width: auto !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  background-color: #ffffff !important;
  color: #000 !important;
  text-decoration: none !important;
  border: none !important;
  white-space: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
 
}
/* ==== FIX BOTONES SLIDESHOW ==== */

/* Remover width 100% obligado por Shopify */
.banner__buttons a,
.banner__buttons .button {
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  white-space: nowrap !important;
}

/* Mantenerlos en fila */
.banner__buttons.buttons-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Evitar que Shopify estire los botones del slideshow */
.slideshow__text-wrapper .button {
  width: auto !important;
  max-width: max-content !important;
  display: inline-flex !important;
  white-space: nowrap !important;
  margin: 0 !important;
}


/* Hover EXACTO como en Two Ways to Shine */
.slideshow__text-wrapper .banner__box .button-custom:hover {
  background-color: #f8f1f4 !important;
  color: #4c0101 !important;
}

/* Hover */
.slideshow__text-wrapper .banner__box .button-custom:hover {
  background-color: #f8f1f4 !important;
}


/* Hover */
.slideshow__text-wrapper .banner__box .button-custom:hover {
  background-color: #f8f1f4 !important;
}

/* Resetear el estilo nativo solo lo necesario */
.buttons-row .button {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

/* TU BOTÓN PERSONALIZADO */
.button-craze {
  background-color: #fff !important; /* blanco puro */
  color: #000 !important;            /* texto negro */
  border: 2px solid #fff !important; /* borde blanco */
  
  padding: 10px 24px !important;     /* padding según lo que querías */
  border-radius: 10px !important;   /* redondeado */
  font-weight: 400 !important;

  text-decoration: none !important;
  cursor: pointer;
  
}

/* Hover usando el estilo base de Shopify, pero controlado */
.button-craze:hover {
  background-color: #fff !important;
  opacity: .85 !important;
  color: #000 !important;
}

}
/* Poner los botones EN FILA */
.buttons-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Resetear el estilo nativo solo lo necesario */
.buttons-row .button {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}


/* CONTENEDOR DE BOTONES EN FILA */
.buttons-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Shopify pone margenes automáticos, esto los neutraliza */
.buttons-row .button-craze {
  margin: 0 !important;
  width: auto !important;
  display: inline-flex !important;
}



.button-hero:hover {
  background-color: #fff !important;
  color: #000 !important;
}


.{
  background-color: var(--color-brand);
  color: white;
}
button-primary{
  border-style:solid;
  
}

.button-primary:hover {
  background-color: var(--color-secondary);
  transform: translateY(-2px);
}

.button-secondary {
  background-color: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.button-secondary:hover {
  background-color: var(--color-brand);
  color: white;
}

/* ============================================
   BORDER RADIUS
   ============================================ */

.radius-small { border-radius: var(--radius-small); }
.radius-medium { border-radius: var(--radius-medium); }
.radius-large { border-radius: var(--radius-large); }
.radius-full { border-radius: var(--radius-full); }

/* ============================================
   WIDTH UTILITIES
   ============================================ */

.width-full { width: 100%; }
.width-half { width: 50%; }
.width-third { width: 33.333%; }
.width-quarter { width: 25%; }

/* ============================================
   POSITION UTILITIES
   ============================================ */

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* ===================================
   OVERRIDE PARA BOTONES CUSTOM
   =================================== */

a.perfect-nails-btn,
.perfect-nails-btn {
  text-transform: none !important;
  transition: transform 0.2s ease; 
}

a.perfect-nails-btn:hover,
.perfect-nails-btn:hover {
  transform: translateY(-4px); /* Sube un poco hacia arriba */
}

/* ===================================
   BUTTON OUT BLACK - RESPONSIVE
   =================================== */

/* Desktop (por defecto) */
.button-out-black {
  background-color: transparent !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  padding: 16px 40px !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: fit-content !important;
  max-width: fit-content !important;
  transition: all 0.3s ease, transform 0.25s ease !important;
  text-transform: none !important;
  text-decoration: none !important;
  position: relative !important;
}

/* Eliminar pseudo-elementos */
.button-out-black:before,
.button-out-black:after {
  display: none !important;
  content: none !important;
}

/* Hover Desktop */
.button-out-black:hover {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Mobile (max-width: 767px) */
@media screen and (max-width: 767px) {
  .button-out-black {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
  }
}

/* Tablet (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .button-out-black {
    padding: 15px 32px !important;
    font-size: 16px !important;
  }
}