/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 86:0 Unexpected "<"
Line 8516:0 Unexpected "{"
Line 8516:1 Expected identifier but found "%"
Line 8517:2 Unexpected "="
Line 8530:1 Expected identifier but found "%"
Line 8532:0 Unexpected "<"
Line 8587:28 Unexpected "{"
Line 8587:30 Expected identifier but found "'now'"
Line 8587:93 Expected identifier but found "<"
... and 1 more hidden warnings

**/
<style>
/* 1. REGISTRO (Usando tus nombres exactos) */
@font-face {
  font-family: 'Codec_Pro_Bold';
  src: url('https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Codec_Pro_Bold.ttf?v=1778786164') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'CodecPro-Regular';
  src: url('https://cdn.shopify.com/s/files/1/0532/9479/2901/files/CodecPro-Regular.ttf?v=1778785178') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* 2. ASIGNACIÓN GLOBAL A VARIABLES DE SHOPIFY */
:root {
  --font-body-family: 'CodecPro-Regular', sans-serif !important;
  --font-heading-family: 'Codec_Pro_Bold', sans-serif !important;
}


/* ==========================
   NOMBRE DEL PRODUCTO
========================== */

.card__heading,
.card__heading *,
.card__heading a,
.full-unstyled-link,
.card-information__text a {
    font-family: 'CodecPro-Regular', sans-serif !important;
    font-weight: 400 !important;
}

/* ==========================
   PRECIOS
========================== */

.price,
.price *,
.price-item,
.money {
    font-family: 'CodecPro-Regular', sans-serif !important;
    font-weight: 400 !important;
}

/* ==========================
   BOTÓN AGREGAR AL CARRITO
========================== */

.quick-add__submit,
.quick-add__submit *,
.button--full-width {
    font-family: 'CodecPro-Bold', sans-serif !important;
    font-weight: 700 !important;
}

/* 4. REFUERZO PARA TODA LA PÁGINA */
h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, strong, b {
  font-family: 'Codec_Pro_Bold', sans-serif !important;
  font-weight: 700 !important;
}

body, p, a, li, span, label, input, textarea, .rte {
  font-family: 'CodecPro-Regular', sans-serif !important;
  font-weight: 400 !important;
}

</style>

/* Evita que el menú cambie al pasar el cursor o abrir las categorías */
.header__menu-item:hover, 
details[open] > .header__menu-item {
  font-family: 'CodecPro' !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

:root {
  --font-body-family: 'CodecPro' !important;
  --font-heading-family: 'CodecPro' !important;
  --font-body-weight: 300 !important;
  --font-heading-weight: 700 !important;
}
:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

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

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

/* MARCA (VENDOR) - FUERZA BRUTA MÁXIMA */
  
  /* Usamos una ruta de etiquetas para que Shopify no pueda ignorarlo */
  .card__content div.caption-with-letter-spacing,
  .card__information div.caption-with-letter-spacing,
  .product-card-wrapper .caption-with-letter-spacing { 
    font-family: 'Codec_Pro_Bold', sans-serif !important; 
    font-weight: 900 !important; /* Negrita extrema */
    font-size: 14px !important;  /* Tamaño más grande y visible */
    color: #000000 !important;   /* Negro puro */
    
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08rem !important; /* Espaciado estilo marcas de lujo */
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
    
    /* Espacio para que el corazón no lo toque */
    padding-right: 45px !important; 
    
    /* Pequeño truco visual: si la fuente no se hace más gruesa, esto la "engorda" */
    -webkit-text-stroke: 0.5px #000;
  }
.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

.placeholder-svg {
  height: 100%;
  width: 100%;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon .svg-wrapper {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > .svg-wrapper {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message .svg-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message .svg-wrapper {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button .svg-wrapper {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

/* ==========================================================================
   Menu maquillaje 
   ========================================================================== */

/* 1. Forzamos el contenedor del menú a ser blanco y ocupar TODO el ancho */
.mega-menu__content, 
.mega-menu__content:has(.brabi-mega-wrapper) {
    background-color: #ffffff !important;
    background: #ffffff !important; /* Doble refuerzo */
    
    /* Esto elimina los bordes grises laterales haciéndolo del ancho de la cabecera */
    width: 100% !important; 
    left: 0 !important;
    margin-left: 0 !important;
    
    /* Eliminamos cualquier sombra o borde del tema que sea gris */
    border: none !important;
    box-shadow: none !important;
    
    /* Reseteamos variables internas de Shopify que suelen causar ese gris */
    --gradient-background: #ffffff !important;
    --color-foreground: 255, 255, 255 !important;
}

/* 2. Aseguramos que el envoltorio interno también sea blanco */
.brabi-mega-wrapper {
    background-color: #ffffff !important;
    background: #ffffff !important;
    max-width: 1200px !important; /* Esto mantiene tus fotos centradas */
    margin: 0 auto !important;
    padding: 30px 20px !important;
    display: block !important;
}

/* 3. Bloqueo de scroll y limpieza de barras */
.mega-menu__content::-webkit-scrollbar {
    display: none !important;
}

/* 4. Tu grid de fotos (Se mantiene igual pero asegurando fondo blanco) */
.brabi-grid-sistema {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    background-color: #ffffff !important;
}

/* 4. LAS TARJETAS (Ojos, Rostro, Labios) */
.brabi-card-sistema, 
.brabi-card {
    position: relative !important;
    height: 280px !important; /* Altura ideal balanceada */
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.brabi-card-sistema:hover {
    transform: translateY(-5px) !important; /* Efecto sutil hacia arriba */
}

/* 5. IMÁGENES: Ajuste perfecto sin deformar */
.brabi-card-sistema img, 
.brabi-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 6. TEXTO SOBRE IMAGEN: Blanco y legible */
.brabi-text-sistema, 
.brabi-card-txt {
    position: absolute !important;
    bottom: 25px !important;
    left: 25px !important;
    color: #ffffff !important; /* Texto blanco puro */
    margin: 0 !important;
    font-family: 'CodecPro-Bold', sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: bold !important;
    z-index: 2 !important;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Gradiente para que el texto siempre se lea bien */
.brabi-card-sistema::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50% !important;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent) !important;
    z-index: 1 !important;
}

/* 7. BLOQUEO DE SCROLL Y BORDES GRISES */
.mega-menu__content::-webkit-scrollbar {
    display: none !important;
}

/* 8. RESPONSIVE: Para celulares */
@media screen and (max-width: 749px) {
    .brabi-grid-sistema {
        grid-template-columns: 1fr !important; /* Una sola columna en móvil */
        gap: 15px !important;
    }
    .brabi-card-sistema {
        height: 200px !important;
    }
    .brabi-mega-wrapper {
        padding: 20px !important;
    }
}

/* ==========================================================================
   DISEÑO EXACTO IMAGEN 1 - SOLUCIÓN SKINCARE SIN SCROLL Y LOGO ROSA
   ========================================================================== */

/* 1. ELIMINAR BARRA GRIS Y ELIMINAR SCROLL (FORZAR AUTO-ALTURA) */
.mega-menu__content.brabi-skincare-elegant-mega,
.mega-menu__content,
.section-header .mega-menu__content,
.header-wrapper .mega-menu__content {
    background-color: #ffffff !important;
    border: none !important;            /* Elimina la barra gris */
    border-top: 0 !important;
    box-shadow: none !important;        /* Sin sombras de fondo */
    max-height: none !important;        /* ¡ELIMINA EL SCROLL VERTICAL! */
    overflow: visible !important;       /* ¡Evita que se corte el contenido! */
    width: 100vw !important;            /* Obliga al menú a usar todo el ancho de pantalla */
    left: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. REVELAR LOGO ORIGINAL (ELIMINAR GRIS/FILTROS Y FORZAR ROSA) */
.brabi-sidebar-logo,
.brabi-skincare-sidebar img {
    filter: none !important;            /* ¡Elimina cualquier filtro grisáceo del tema! */
    opacity: 1 !important;              /* Opacidad al 100% para que se vea rosa brillante */
    mix-blend-mode: normal !important;  /* Evita mezclas de color raras */
    display: block !important;
    width: 150px !important;            /* Ancho idóneo para el logo */
    margin-bottom: 25px !important;
     margin-left: 50px !important;
}

/* 3. COLORES SÓLIDOS DE LOS BOTONES DEL SIDEBAR (IMAGEN 1) */
.brabi-skincare-sidebar {
    flex: 0 0 250px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;                /* Espaciado mínimo entre bloques */
}

/* Base para los enlaces especiales del sidebar */
.brabi-skincare-sidebar .brabi-sidebar-extra {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-size: 1.5rem !important;
    padding: 18px 20px !important;
    display: block !important;
    text-transform: capitalize !important;
    font-weight: bold !important;
    text-align: left !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Botón 1: Tools y acessorios (Rosa Pastel Muy Claro) */
.brabi-skincare-sidebar .brabi-sidebar-extra:nth-of-type(1) {
    background-color: #ffe5ec !important;
    color: #000000 !important;
}

/* Botón 2: Best seller (Rosa Intenso / Texto Blanco) */
.brabi-skincare-sidebar .brabi-sidebar-extra:nth-of-type(2) {
    background-color: #f2a2b5 !important;
    color: #ffffff !important;
}

/* Botón 3: Kits y sets (Rosa Medio Pastel) */
.brabi-skincare-sidebar .brabi-sidebar-extra:nth-of-type(3) {
    background-color: #fbc4cb !important;
    color: #000000 !important;
}

/* Botón 4: Japones (Magenta Elegante / Texto Blanco) */
.brabi-skincare-sidebar .brabi-sidebar-extra:nth-of-type(4) {
    background-color: #b14074 !important;
    color: #ffffff !important;
}

/* Efectos hover para los bloques */
.brabi-skincare-sidebar .brabi-sidebar-extra:hover {
    opacity: 0.9 !important;
    transform: translateX(4px);
}

/* 4. TÍTULOS DE COLUMNA CON LÍNEA NEGRA INFERIOR (IMAGEN 1) */
.brabi-skincare-header {
    border-bottom: 2px solid #000000 !important; /* ¡Línea negra exacta! */
    padding-bottom: 12px !important;             /* Espacio para la línea */
    margin-bottom: 20px !important;              /* Separación con los enlaces */
}

.brabi-skincare-header a {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-size: 1.6rem !important;
    color: #000000 !important;
    text-transform: capitalize !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* 5. ENLACES INTERNOS (TEXTO PEQUEÑO Y MINÚSCULAS EXACTAS) */
.brabi-skincare-item-link {
    font-family: 'CodecPro-Regular', sans-serif !important;
    font-size: 1.3rem !important;                /* Legible pero compacto */
    color: #000000 !important;
    text-transform: lowercase !important;        /* Todo en minúsculas como Imagen 1 */
    margin-bottom: 10px !important;
    display: block !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

.brabi-skincare-item-link:hover {
    text-decoration: underline !important;
    color: #b14074 !important;                   /* Toque rosa elegante al hover */
}

/* Eliminar viñetas y espaciados residuales */
ul, li, .brabi-clean-li, .brabi-skincare-sublist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   FORZAR 5 COLUMNAS DE SKINCARE EN LA MISMA LÍNEA (IMAGEN 1)
   ========================================================================== */

/* 1. Forzar a que la cuadrícula tenga 5 espacios en la misma fila */
.brabi-skincare-grid-content {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* Fuerza 5 columnas exactas */
    gap: 20px !important;                             /* Separación horizontal entre ellas */
    width: 100% !important;
}

/* 2. Impedir que las columnas individuales se ensanchen de más */
.brabi-skincare-column {
    width: 100% !important;   /* Cancela el antiguo width: 25% para evitar que se baje la quinta */
    min-width: 0 !important;   /* Permite que se encojan de forma fluida */
    flex: 1 !important;
}
/* ==========================================================================
   DISEÑO PREMIUM EN TARJETAS SÓLO PARA EL SUBMENÚ "MAQUILLAJE" EN MÓVIL
   Este código aísla los cambios estrictamente dentro de la sección de Maquillaje.
   Garantiza que Skincare (rutinas, contorno de ojos, etc.) permanezca nativo.
   ========================================================================== */

@media screen and (max-width: 989px) {
  /* 1. Limpieza de bordes y espaciados nativos únicamente dentro de Maquillaje */
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu li:has([href*="ojos" i]),
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu li:has([href*="labios" i]),
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu li:has([href*="rostro" i]) {
    border-bottom: none !important; 
    margin: 0 !important; 
    padding: 0 !important;
  }

  /* 2. Estilo base premium para las tarjetas de Maquillaje (Ojos, Labios, Rostro) */
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important; /* Margen de 16px por lado */
    height: 120px !important;
    margin: 10px 16px !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    
    /* Soporte para recortar bordes redondeados en Safari de iOS */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    
    text-decoration: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* 2b. Desactivar líneas, sombras y flechas nativas de Shopify Dawn en Maquillaje */
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item::after,
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item::before,
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu li .menu-drawer__menu-item svg,
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu li .menu-drawer__menu-item .icon-caret {
    display: none !important;
    content: none !important;
  }

  /* 3. Asignación de imágenes de fondo exclusivas en Maquillaje */
  /* Tarjeta: OJOS */
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item[href*="ojos" i],
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item[id*="ojos" i] {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.40) 60%, rgba(0,0,0,0) 100%),
      url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ojos.webp?v=1775975550") !important;
  }

  /* Tarjeta: LABIOS */
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item[href*="labios" i],
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item[id*="labios" i] {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.40) 60%, rgba(0,0,0,0) 100%),
      url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/labios.webp?v=1775975550") !important;
  }

  /* Tarjeta: ROSTRO */
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item[href*="rostro" i],
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item[id*="rostro" i] {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.40) 60%, rgba(0,0,0,0) 100%),
      url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/rostro.webp?v=1775975549") !important;
  }

  /* 4. Textos Blancos Premium y legibles con sombra de contraste en Maquillaje */
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item,
  html body [id*="maquillaje" i] ~ .menu-drawer__submenu .menu-drawer__menu-item * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.35) !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
  }
}
/* --- FIX FINAL MARCAS BRABI --- */

/* 1. Forzar Fondo Blanco y Panel Flotante (Imagen 2 corregida) */
.mega-menu__content.brabi-marcas-panel {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-radius: 15px !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.15) !important;
    border: 1px solid #f0f0f0 !important;
    
    /* Posición exacta */
    position: absolute !important;
    width: 90% !important;
    max-width: 1100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 15px !important;
    
    /* Evitar scroll horizontal y permitir vertical */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 80vh !important;
}

/* 2. Contenedor Interno */
.brabi-modal-brands {
    padding: 40px !important;
    background: #fff !important;
}

.brabi-modal-top {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.brabi-modal-top img {
    height: 40px;
    width: auto;
}

.brabi-modal-line {
    border: 0;
    border-top: 1px solid #f2f2f2;
    margin-bottom: 30px;
}

/* 3. El Grid (6 columnas alineadas) */
.brabi-modal-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 30px 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. Quitar subrayados azules y colores de link */
.brabi-modal-link {
    text-decoration: none !important; /* MATA EL SUBRAYADO */
    color: #000 !important;          /* TEXTO NEGRO */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    outline: none !important;
}

.brabi-modal-link img {
    max-height: 35px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.brabi-modal-link:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Texto de las marcas */
.brabi-modal-text {
    font-size: 13px !important;
    color: #444 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-transform: capitalize;
}

/* 5. Oscurecer fondo al abrir */
.mega-menu[open] > .mega-menu__content::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.1);
    z-index: -1;
}

/* ==========================================================================
   FIX MARCAS MÓVIL: LOGOS SIN TOCAR LIQUID (ESTILO KOSMETICS)
   ========================================================================== */

@media screen and (max-width: 989px) {
  
  /* 1. Ajuste del contenedor de Marcas para que sea un Grid de 2 columnas */
  /* Buscamos el submenú que contiene las marcas */
  #link-marcas .menu-drawer__menu {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 15px !important;
    background: #ffffff !important;
  }

  /* 2. Estilo de las "Tarjetas" de cada marca */
  #link-marcas .menu-drawer__menu-item {
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 10px !important;
    height: 90px !important; /* Altura para el logo */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* TRUCO: Volvemos el texto invisible para que solo se vea el Logo */
    color: transparent !important; 
    font-size: 0 !important;
    
    /* Configuración de la imagen de fondo (Logo) */
    background-size: 70% auto !important; /* El logo ocupará el 70% del cuadro */
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 !important;
  }

  /* 3. ASIGNACIÓN DE LOGOS POR LINK  */
  /* Nota: Ajusta los links (/collections/...) según sean en tu tienda */

  .menu-drawer__menu-item[href*="/abib"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ABIB_1.svg?v=1776734371") !important;
  }
  .menu-drawer__menu-item[href*="/anua"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ANUA.svg?v=1776781882") !important;
  }
  .menu-drawer__menu-item[href*="/axis-y"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/AXIS-Y.svg?v=1776869740") !important;
  }
  .menu-drawer__menu-item[href*="/apieu"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/A_PIEU.svg?v=1776995920") !important;
  }
  .menu-drawer__menu-item[href*="/beauty-of-jeoson"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/BEAUTY_OF_JOSEON.png?v=1778696164") !important;
  }
  .menu-drawer__menu-item[href*="/skin1004"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/SKIN1004_a392c494-2e94-4c80-acd5-8499f732429b.png?v=1778696852") !important;
  }
  .menu-drawer__menu-item[href*="/biodance"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Biodance_1dadfd80-ffac-4946-b4bd-946d508a8a2f.png?v=1778696971") !important;
  }
  .menu-drawer__menu-item[href*="/tocobo"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/TOCOBO_ab17d185-4d34-48eb-83e8-2dee27ec3d26.png?v=1779671390") !important;
  }
  .menu-drawer__menu-item[href*="/cosrx"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/COSRX.png?v=1778699982") !important;
  }
  .menu-drawer__menu-item[href*="/ahc"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/AHC.png?v=1779423998") !important;
  }
  .menu-drawer__menu-item[href*="/medicube"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/medicube_1aaa6ad9-a985-470e-9fb0-8165fc2203e3.png?v=1778696331") !important;
  }
   .menu-drawer__menu-item[href*="/dr-althea"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Dr.Althea_62d8daac-8d3e-4243-9738-8e92242e12d4.png?v=1778696457") !important;
  }
  .menu-drawer__menu-item[href*="/rhode"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/rhode_c9646f65-ebc3-445f-826b-e012533de554.png?v=1778696785") !important;
  }
  .menu-drawer__menu-item[href*="/luvum"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/luvum_6e7b5a20-7324-425b-833a-8072132f3fb7.png?v=1778697351") !important;
  }
  .menu-drawer__menu-item[href*="/tirtir"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/TIRTIR.png?v=1778697959") !important;
  }
  .menu-drawer__menu-item[href*="/eqqualberry"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/EQQUALBERRY.png?v=1778698429") !important;
  }
  .menu-drawer__menu-item[href*="/arencia"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ARENCIA.png?v=1778698799") !important;
  }
  .menu-drawer__menu-item[href*="/mizon"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/MIZON.png?v=1778700138") !important;
  }
  .menu-drawer__menu-item[href*="/jumiso"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/JUMISO.png?v=1778700281") !important;
  }
  .menu-drawer__menu-item[href*="/torhop"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/TORSHOP.png?v=1778700539") !important;
  }
  .menu-drawer__menu-item[href*="/braye"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/BRAYE.png?v=17787006709") !important;
  }
  .menu-drawer__menu-item[href*="/fwee"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Fwee.png?v=1778700881") !important;
  }
    .menu-drawer__menu-item[href*="/peripera"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/PERIPERA.png?v=1778700977") !important;
  }
    .menu-drawer__menu-item[href*="/unleashia"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/UNLEASHIA.png?v=1778701075") !important;
  }
   .menu-drawer__menu-item[href*="/alternative-stereo"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ALTERNATIVE_STEREO.png?v=1779423998") !important;
  }
   .menu-drawer__menu-item[href*="/benton"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/BENTON.png?v=1779424317") !important;
  }
  .menu-drawer__menu-item[href*="/banila-co"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/BANILA_CO.png?v=1779424317") !important;
  }
  .menu-drawer__menu-item[href*="/celimax"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/CELIMAX.png?v=1779425461") !important;
  }
    .menu-drawer__menu-item[href*="/centellian-24"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/CENTELLIAN24.png?v=1779425462") !important;
  }
  .menu-drawer__menu-item[href*="/clio"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/CLIO.png?v=1779425461") !important;
  }
   .menu-drawer__menu-item[href*="/conisha"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/CONISHA.png?v=1779425904") !important;
  }
  .menu-drawer__menu-item[href*="/dr-ceuracle"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/DR.CEURACLE.png?v=1779425905") !important;
  }
  .menu-drawer__menu-item[href*="/dalba"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/dAlba.png?v=1779425904") !important;
  }
  .menu-drawer__menu-item[href*="/dr-g"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/DR.G.png?v=1779425904") !important;
  }
   .menu-drawer__menu-item[href*="/esther-formula"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ESTHER_FORMULA.png?v=1779426305") !important;
  }
  .menu-drawer__menu-item[href*="/etude-house"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ETUDE.png?v=1779426306") !important;
  }
  .menu-drawer__menu-item[href*="/elizavecca"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ELIZAVECCA.png?v=1779426306") !important;
  }
   .menu-drawer__menu-item[href*="/espoir"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ESPOIR.png?v=1779426306") !important;
  }
  .menu-drawer__menu-item[href*="/ginger-6"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Ginger6.png?v=1779466522") !important;
  }
  .menu-drawer__menu-item[href*="/innisfree"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/INNISFREE.png?v=1779466522") !important;
  }
  .menu-drawer__menu-item[href*="/heimish"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/HEIMISH.png?v=1779466522") !important;
  }
  .menu-drawer__menu-item[href*="/haruharu"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/HARUHARU.png?v=1779466522") !important;
  }
   .menu-drawer__menu-item[href*="/hamel"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Hamel.png?v=1779466522") !important;
  }
   .menu-drawer__menu-item[href*="/goodal"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Goodal_48c7d9dc-d3fa-4605-a5a5-503ff7d6eb12.png?v=1779466522") !important;
  }
  .menu-drawer__menu-item[href*="/farmstay"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Farmstay.png?v=1779466522") !important;
  }
    .menu-drawer__menu-item[href*="/kahi"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/KAHI.png?v=1779468883") !important;
  }
    .menu-drawer__menu-item[href*="/isntree"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ISNTREE.png?v=1779468883") !important;
  }
  .menu-drawer__menu-item[href*="/pyunkang-yul"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/PYUNKANG_YUL.png?v=1779468882") !important;
  }
   .menu-drawer__menu-item[href*="/mixsoon"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/MIXSOON.png?v=1779468882") !important;
  }
  .menu-drawer__menu-item[href*="/one-day-s-you"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ONE_DAYS_YOU.png?v=1779468883") !important;
  }
  .menu-drawer__menu-item[href*="/laneige"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/LANEIGE.png?v=1779468882") !important;
  }
  .menu-drawer__menu-item[href*="/round-lab"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ROUND_LAB.png?v=1779468882") !important;
  }
  .menu-drawer__menu-item[href*="/rom-and"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/ROM_AND.png?v=1779468882") !important;
  }
   .menu-drawer__menu-item[href*="/klavuu"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/KLAVUU.png?v=1779468882") !important;
  }
   .menu-drawer__menu-item[href*="/mediheal"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/MEDIHEAL.png?v=1779468882") !important;
  }
     .menu-drawer__menu-item[href*="/mary-may"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/MARY_MAY.png?v=1779468882") !important;
  }
     .menu-drawer__menu-item[href*="/neogen"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/neogen.png?v=1781891123") !important;
  }
   .menu-drawer__menu-item[href*="/tiam"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/TIAM.png?v=1779471867") !important;
  }
  .menu-drawer__menu-item[href*="/titto"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/TITTO.png?v=1779471868") !important;
  }
   #link-marcas .menu-drawer__menu-item[href*="/some-by-mi"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/SOMEBYMY.png?v=1779471868") !important;
    background-size: 50% auto !important; /* Ahora con el selector #link-marcas sí te hará caso el 45% */
}
   .menu-drawer__menu-item[href*="/vt-cosmetics"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/VTCOMESTICS.png?v=1779471868") !important;
  }
  .menu-drawer__menu-item[href*="/the-ordinary-1"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/THE_ORDINARY.png?v=1779471867") !important;
  }
  .menu-drawer__menu-item[href*="/3ce"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/3CE.png?v=1779471868") !important;
  }
  .menu-drawer__menu-item[href*="/skinfood"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/SKINFOOD.png?v=1779471868") !important;
  }
   .menu-drawer__menu-item[href*="/amuse"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/AMUSE_3a4f662c-677f-4c95-a57b-8263b64daace.png?v=1779671390") !important;
  }
  .menu-drawer__menu-item[href*="/g9skin"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/G9SKIN.png?v=1779671390") !important;
  }
  .menu-drawer__menu-item[href*="/g9skin"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Authentique.png?v=1785353159") !important;
  }
  .menu-drawer__menu-item[href*="/g9skin"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Torriden.png?v=1785344478") !important;
  }
  .menu-drawer__menu-item[href*="/g9skin"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/Purito.png?v=1785343965") !important;
  }
  .menu-drawer__menu-item[href*="/g9skin"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/hince.png?v=1785281243") !important;
  }
   .menu-drawer__menu-item[href*="/g9skin"] {
    background-image: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/9_wishes.png?v=1785278827") !important;
  }
  /* 4. Quitar la flechita que sale a la derecha en los cuadros de marcas */
  #link-marcas .icon-arrow, 
  #link-marcas .icon-caret {
    display: none !important;
  }
}
/* --- RECUPERAR FLECHA DE REGRESAR EN MARCAS --- */

@media screen and (max-width: 989px) {
  /* 1. Aseguramos que el botón de Regresar sea visible y tenga texto negro */
  #link-marcas .menu-drawer__close-button {
    display: flex !important;
    color: #000 !important; /* Color del texto "Marcas" */
    font-size: 1.6rem !important;
    background: transparent !important;
    padding: 20px !important;
    text-align: left !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: none !important;
  }

  /* 2. Forzamos que la flecha de regresar aparezca */
  #link-marcas .menu-drawer__close-button svg,
  #link-marcas .menu-drawer__close-button .svg-wrapper,
  #link-marcas .menu-drawer__close-button .icon-arrow {
    display: block !important;
    visibility: visible !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    color: #000 !important;
  }

  /* 3. Evitamos que el botón de regresar se vuelva un cuadro del grid */
  /* (Esto hace que el botón ocupe todo el ancho arriba y no se meta en las 2 columnas) */
  #link-marcas .menu-drawer__inner-submenu > button {
    grid-column: span 2 !important; 
  }
}

/* BARRA DE ANUNCIOS */
.utility-bar,
.announcement-bar,
.section-announcement-bar {
    background: #000000 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
}

/* SLIDER */
.announcement-bar-slider .slider__slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
}

/* TEXTO */
.announcement-bar__message {
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 11px !important;
    margin: 0 !important;
    text-align: center !important;
}

/* FLECHAS */
.slider-button {
    height: 36px !important;
}
/* RESET Y CENTRADO DE BARRA DE ANUNCIOS SOLO EN MÓVIL */
@media screen and (max-width: 749px) {
  /* Forzamos a todos los contenedores a ser flexibles y centrar el contenido */
  .utility-bar, 
  .announcement-bar, 
  .announcement-bar-slider,
  .announcement-bar-slider .slider__slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Ajustamos el mensaje para que no tenga paddings que lo empujen */
  .announcement-bar__message {
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    width: auto !important; /* Deja que el texto use solo el espacio que necesita */
    font-size: 11px !important; /* Tamaño similar al de Need Beauty */
    line-height: 36px !important; /* Lo centra verticalmente en tu barra de 36px */
  }

  /* Ocultamos botones de flechas (si existen) para que no roben espacio */
  .announcement-bar .slider-buttons,
  .announcement-bar .slider-button {
    display: none !important;
  }
}

/* Cambiar el fondo del header al rosa específico */
.header-wrapper, 
.section-header, 
.header {
    background-color: #ffdde7 !important;
}

.announcement-bar__message,
.announcement-bar__message span,
.utility-bar p {
    font-family: 'Codec_Regular' !important;
    font-weight: normal !important;
    color: #ffffff !important;
}
/* Reemplazar el logo rosa por el logo blanco mediante el link */
.header__heading-logo {
    content: url("https://cdn.shopify.com/s/files/1/0532/9479/2901/files/logo_brabi_blanco.png?v=1777151035") !important;
    width: 90px !important; /* Ajusta el ancho según necesites */
    height: auto !important;
}

/* PASO 1: AGREGAR BORDE A LAS CARDS */
.product-card-wrapper {
  border: 1px solid #dcdcdc !important; /* El color gris claro de tu referencia */
  background-color: #fff !important;
  border-radius: 0 !important; /* Bordes rectos como en la imagen */
  overflow: hidden;
  display: flex !important;
}


/* --- DISEÑO CARRUSEL BRABI (ESTILO SAIE) --- */

/* 1. Ajuste del Carrusel: Para que las tarjetas se vean anchas pero permitan el deslizamiento */
@media screen and (min-width: 990px) {
  .slider--desktop .grid__item {
    width: 25% !important; /* Mantenemos el ancho para que se vean grandes */
    padding-bottom: 10px;
  }
}

/* 2. Estilo de la Card (Borde fino y fondo blanco) */
.product-card-wrapper {
  border: 1px solid #e0e0e0 !important;
  background-color: #fff !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
}

/* 3. MARCA (PROVEEDOR) - Estilo Saie */
/* Si ya activaste "Mostrar proveedor", este código lo pondrá elegante */
.card__information .caption-with-letter-spacing {
  font-family: 'Codec_Pro_Bold', sans-serif !important;
  font-size: 1.1rem !important;
  color: #000 !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 2px !important;
  visibility: visible !important;
}

/* --- HEADER: MENÚ MÁS GRANDE + UNA SOLA LÍNEA + CODEC_PRO_BOLD --- */

/* 1. Subir tamaño al Menú Principal (Skincare, Maquillaje, etc.) */
.header__inline-menu .list-menu__item,
.header__inline-menu details summary,
.header__inline-menu .header__menu-item,
.header__inline-menu .header__menu-item span {
  font-family: 'Codec_Pro_Bold' !important;
  font-weight: 800 !important;
  font-size: 15px !important; /* Aumentado de 11px a 14px */
  text-transform: capitalize !important; /* Primera Mayúscula */
  color: #000000 !important;
  white-space: nowrap !important;
}

/* 2. Subir tamaño a botones de la derecha (Buscar, Mi cuenta, Carrito) */
.header__icon--account::after, 
.header__icon--cart::after,
.header__search span,
.cart-count-bubble {
  font-family: 'Codec_Pro_Bold' !important;
  font-weight: 800 !important;
  font-size: 15.5px !important; /* Un poco más grande también */
  color: #000 !important;
  text-transform: capitalize !important;
}

/* 3. Corregir textos manuales para que tengan minúsculas */
.header__icon--account::after { content: "Mi cuenta" !important; }
.header__icon--cart::after { content: " Mi Carrito" !important; }

/* 4. Forzar que todo quepa en una línea (Ajuste de espacios) */
.header {
  display: flex !important;
  flex-wrap: nowrap !important; 
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 98% !important;
  width: 98% !important;
  column-gap: 15px !important; /* Espacio entre el logo y el menú */
}

.header__inline-menu .list-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important; /* Espacio entre cada palabra del menú */
}

/* 5. El Corazón */
.header__icon--wishlist {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 15px !important;
  width: auto !important;
}

.header__icon--wishlist .icon-heart-header {
  width: 2.3rem !important; /* Un poquito más grande para que no se vea pequeño */
  height: 2.3rem !important;
  color: #000 !important;
  stroke-width: 2px !important;
}

/* 6. Asegurar que el grupo de iconos no se amontone */
.header__icons {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 2. EL CORAZÓN (Espaciado ajustado para no separar mucho al carrito) */
.header__icon--wishlist {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  padding: 0 !important;
  
  /* Reducimos los márgenes para que 'Mi carrito' se acerque */
  margin-left: 25px !important;  
  margin-right: -5px !important; 
  
  width: auto !important;
}

.header__icon--wishlist .icon-heart-header {
  width: 2.2rem !important;
  height: 2.2rem !important;
  color: #000 !important;
  stroke-width: 2px !important; /* Corazón también en negrita */
}

/* --- AJUSTE POSICIÓN BOLITA CARRITO Y TAMAÑO DE LETRA --- */

/* 1. Unificamos el estilo de 'Mi Cuenta' y 'Mi Carrito' para que igualen al menú principal */
.header__icon--account,
.mi-carrito-label {
  font-family: 'Codec_Pro_Bold', sans-serif !important;
  font-weight: 700 !important; /* Peso ajustado para igualar al menú */
  font-size: 14px !important;   /* Tamaño ajustado para igualar al menú */
  color: #000 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}



/* 3. Contenedor del carrito (tu código base) */
.header__icon--cart {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 15px 10px 0 !important; 
  text-decoration: none !important;
}

/* --- CONTENEDOR DEL CARRITO --- */
.header__icon--cart {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important; /* Esto asegura que el contenedor mida lo mismo que todo el texto */
  text-decoration: none !important;
  padding: 10px 0 !important; 
}
/* --- SOLUCIÓN DE CHOQUE: BOLITA PEGADA A LA 'O' --- */

/* 1. Contenedor: Forzamos que todo esté pegado a la izquierda */
.header__icon--cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  position: relative !important;
  width: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  margin-left: -10px !important; /* <-- Jala el carrito suavemente a la izquierda en PC */
}

/* 2. Texto: Quitamos todo margen posible */
.mi-carrito-label {
  order: 1 !important; 
  font-family: 'Codec_Pro_Bold', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #000 !important;
  white-space: nowrap !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* 3. La Bolita: Usamos margen negativo para "jalarla" hacia la 'o' */
#cart-icon-bubble .cart-count-bubble {
  order: 2 !important;
  position: relative !important;
  
  /* AJUSTE DE POSICIÓN: */
  margin-left: -19px !important; /* Si la quieres más cerca, cambia a -7px o -8px */
  top: -8px !important;        /* La mantiene arriba como exponente */

  /* Diseño visual */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #b11354 !important;
  color: #ffffff !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  overflow: visible !important;
}

/* 4. Centrado del número para que NO se vea cortado */
#cart-icon-bubble .cart-count-bubble span[aria-hidden="true"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  
  /* --- ESTA ES LA LÍNEA PARA CENTRAR --- */
  margin-top: 1px !important;  /* Prueba con 1px o 0px hasta que lo veas perfecto */
  margin-left: 0 !important;
}

/* 5. Limpieza */
#cart-icon-bubble .cart-count-bubble .visually-hidden {
  display: none !important;
}
#cart-icon-bubble svg {
  display: none !important;
}
/* ==========================================================================
   MI CUENTA (Texto en PC / OCULTO en Móvil)
   ========================================================================== */

/* --- 1. VERSIÓN PC (Mantenemos tu texto en una sola línea) --- */
@media screen and (min-width: 750px) {
  .header__icon--account svg { 
    display: none !important; 
  }
  
  .header__icon--account {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    white-space: nowrap !important; 
    width: auto !important;
  }

  .header__icon--account::after {
    content: "Mi cuenta" !important;
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15.5px !important;
    color: #000 !important;
    white-space: nowrap !important;
  }
}
/* --- ELIMINAR CORAZÓN BRABI SOLO EN MÓVIL (FUERZA MÁXIMA) --- */
@media screen and (max-width: 749px) {
    .brabi-wishlist-btn, 
    .header__icon.brabi-wishlist-btn,
    div[class*="brabi-wishlist"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
    }
}

/* --- ALINEACIÓN PERFECTA DE LOGOS (EFECTO PREMIUM) --- */

/* 1. Asegurar que la lista de logos no tenga espacios extraños */
.multicolumn-list {
  align-items: center !important; 
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* 2. El contenedor: Creamos una "caja" invisible de la misma altura para todos */
.multicolumn-card__image-wrapper {
  height: 60px !important; /* Altura de la fila */
  display: flex !important;
  align-items: center !important; /* Esto los alinea al centro vertical */
  justify-content: center !important; /* Centrado horizontal */
  padding: 0 15px !important; /* Espacio entre logos */
  background: transparent !important;
}

/* 3. La imagen del logo: Aquí está el truco del tamaño */
.multicolumn-card__image-wrapper img {
  /* Bajamos la altura para que los logos cuadrados no se vean gigantes */
  max-height: 28px !important; 
  
  /* Limitamos el ancho para que los logos largos no se estiren de más */
  max-width: 110px !important; 
  
  width: auto !important;
  height: auto !important;
  object-fit: contain !important; /* Mantiene la proporción sin deformar */
  
  /* Filtro opcional para que se vean uniformes en gris oscuro */
  filter: brightness(0) opacity(0.6); 
  transition: all 0.3s ease;
}

/* 4. Cuando pasas el mouse, el logo se aclara o toma color */
.multicolumn-card__image-wrapper:hover img {
  filter: brightness(0) opacity(1);
  transform: scale(1.05);
}

/* 5. Quitar márgenes del contenedor de la tarjeta */
.multicolumn-card {
  background: transparent !important;
  border: none !important;
}
/* --- Botón Agregar al Carrito Brabi Beauty --- */
.quick-add__submit, 
.card__content .button,
.quick-add__submit.button {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: 700 !important; /* Negrita */
    font-size: 1.4rem !important;
    color: #000000 !important; /* Letra inicial negra */
    transition: color 0.3s ease !important; /* Suaviza el cambio a rojo */
    
    /* TRUCO PARA MAYÚSCULA INICIAL: */
    text-transform: lowercase !important; /* Primero pone todo en minúsculas */
    display: inline-block !important;
}

/* Fuerza que la primera letra sea la única en Mayúscula */
.quick-add__submit::first-letter, 
.card__content .button::first-letter,
.quick-add__submit.button::first-letter {
    text-transform: uppercase !important;
}
.collection__view-all .button {
    background-color: #ffe9f0 !important; /* El rosa que pediste */
    color: #000000 !important; /* Letra negra para que se lea bien */
    border: none !important; /* Quita cualquier borde gris */
    font-family: 'Codec_Pro_Bold', sans-serif !important; /* Tu tipografía */
    box-shadow: none !important;
    transition: background-color 0.3s ease !important;
}

/* --- REPARACIÓN TOTAL FOOTER BRABI BEAUTY --- */

/* 1. FORZAR TODO A UNA SOLA FILA (Newsletter e Iconos a la Izquierda) */
.footer__content-top.page-width {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

/* Bloque Newsletter: Columna Izquierda */
.footer-block--newsletter {
    flex: 0 0 30% !important;
    order: -1 !important; /* Lo obliga a estar al principio (izquierda) */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
}

/* Contenedor de los 3 Menús: Columna Derecha */
.footer__blocks-wrapper {
    flex: 0 0 65% !important;
    display: flex !important;
    justify-content: space-between !important;
    margin: 0 !important;
}

/* 2. ESTILO NEWSLETTER (Cuadro blanco y Flecha Rosa) */
.footer-block__newsletter .field {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    border-radius: 100px !important;
    max-width: 320px !important;
    margin-top: 15px !important;
}

.footer-block__newsletter .newsletter-form__button {
    background: #ffe9f0 !important; /* BOTÓN ROSA */
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    top: 7px !important;
    right: 7px !important;
}

/* 3. ICONOS SOCIALES: Debajo del correo y alineados a la izquierda */
.footer__list-social {
    margin-top: 25px !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 12px !important;
}

.list-social__item .list-social__link {
    background-color: #e5d59f !important; /* Color Arena */
    border: 1px solid #000 !important;
    border-radius: 50% !important;
    padding: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. MENÚ LEGAL: Transformarlo en barra horizontal al fondo */
/* Seleccionamos el 4to bloque (el de Legales) */
.footer-block--menu:last-child {
    flex: 1 1 100% !important; /* Ocupa todo el ancho abajo */
    margin-top: 60px !important;
    border-top: 1px solid #000000 !important; /* Línea de división */
    padding-top: 25px !important;
}

.footer-block--menu:last-child .footer-block__heading {
    display: none !important; /* Oculta el título "Legales" */
}

.footer-block--menu:last-child .list-menu {
    display: flex !important;
    flex-direction: row !important; /* Los pone horizontales */
    gap: 35px !important;
    justify-content: flex-start !important;
}

/* 5. TIPOGRAFÍAS CODEC (Asegúrate de que los nombres sean exactos) */
/* Títulos Bold */
.footer-block__heading {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    text-transform: lowercase !important;
    font-size: 1.8rem !important;
}
.footer-block__heading::first-letter {
    text-transform: uppercase !important;
}

/* Textos Regular */
.footer-block__details-content .list-menu__item--link,
.footer-block--menu:last-child .list-menu__item--link {
    font-family: 'Codec_Regular', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
}

/* 6. PAGOS: Alineados a la derecha de la barra legal */
.footer__content-bottom-wrapper {
    margin-top: -65px !important; /* Los sube para alinearlos con los legales */
    justify-content: flex-end !important;
    border: none !important;
}

.footer__copyright { display: none !important; }


/* --- UNIFICAR TARJETAS DE PRODUCTO EN TODA LA TIENDA --- */

/* Forzar que todas las tarjetas usen el diseño de Brabi (Imagen 2) */
.template-collection .card-wrapper, 
.template-collection .card {
    border: 1px solid #e8e8e8 !important; /* Estilo Saie: bordes finos */
    background: #ffffff !important;
}

/* Estilo del botón "Agregar al carrito" en la página de colección */
.template-collection .quick-add__submit {
    background-color: #ffe9f0 !important; /* Rosa Brabi */
    color: #000000 !important;
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    text-transform: lowercase !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 0 !important; /* Botón cuadrado como Saie/Imagen 2 */
    width: 100% !important;
    padding: 15px !important;
}

.template-collection .quick-add__submit::first-letter {
    text-transform: uppercase !important;
}

/* --- UNIFICACIÓN TOTAL: COLECCIÓN = INICIO (ESTILO SAIE) --- */

/* 1. Botón "Agregar al carrito" (Rosa, Fuente Codec Bold, Minúsculas) */
.template-collection .quick-add__submit, 
.template-collection .card__content .button {
    background-color: #ffe9f0 !important;
    color: #000000 !important;
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    text-transform: lowercase !important; /* Forzamos minúsculas */
    padding: 15px !important;
    display: block !important;
    transition: color 0.3s ease !important;
}

/* Solo la primera letra en Mayúscula */
.template-collection .quick-add__submit::first-letter, 
.template-collection .card__content .button::first-letter {
    text-transform: uppercase !important;
}

/* --- LIMPIEZA TOTAL: ESTILO DE TARJETAS BRABI (COLECCIÓN) --- */

/* 1. Eliminar el recuadro gris y sombras del tema */
.template-collection .card, 
.template-collection .card-wrapper {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.template-collection .card__inner {
    border: none !important;
    background-color: transparent !important;
}

/* 2. Tipografía Codec Pro Bold para Brand, Título y Precio */
.template-collection .card__heading, 
.template-collection .card__heading a,
.template-collection .caption-with-letter-spacing, /* Marca */
.template-collection .price,
.template-collection .price-item {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    color: #000000 !important;
    text-transform: uppercase !important; /* Estilo Saie */
    letter-spacing: 1px !important;
    font-size: 1.3rem !important;
}

/* 3. Botón "Agregar al carrito" - Diseño Barra Inferior Rosa */
.template-collection .quick-add__submit {
    background-color: #ffe9f0 !important; /* Rosa Brabi */
    color: #000000 !important;
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: 700 !important;
    border: 1px solid #000 !important; /* Borde fino negro estilo Saie */
    border-radius: 0 !important; /* Cuadrado total */
    padding: 15px !important;
    margin-top: 10px !important;
    text-transform: lowercase !important;
}

.template-collection .quick-add__submit::first-letter {
    text-transform: uppercase !important;
}

/* BOTÓN AGREGAR AL CARRITO: HOVER Y CLICK */

/* 1. Estado cuando pasas el mouse (Hover) y cuando haces clic (Active) */
.quick-add__submit:hover, 
.quick-add__submit:active, 
.quick-add__submit:focus,
.button--full-width.quick-add__submit:hover {
    background-color: #b21163 !important; /* Rosa fuerte */
    color: #ffffff !important;           /* Letras blancas */
    border: 1px solid #b21163 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* 2. Forzar que el texto de adentro también sea blanco (a veces Shopify usa un span) */
.quick-add__submit:hover span, 
.quick-add__submit:active span {
    color: #ffffff !important;
}

/* 3. Suavizar la transición para que se vea profesional */
.quick-add__submit {
    transition: all 0.2s ease-in-out !important;
}

/* 4. Tu cuadrícula de líneas finas (Estilo Saie) corregida */
.template-collection .grid__item, 
.featured-collection .grid__item {
    padding: 0 !important;
    border: 0.5px solid #e5e5e5 !important;
}

.template-collection .product-grid, 
.featured-collection .grid {
    column-gap: 0 !important;
    row-gap: 0 !important;
}

/* 5. Ajuste de fuentes en filtros */
.facets__summary span {
  font-family: 'Codec_Pro_Bold', sans-serif !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  text-transform: lowercase !important;   
  font-size: 14px !important;           
  line-height: 1 !important;
  
  min-width: 0 !important;               
  min-height: 0 !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;    
  cursor: pointer !important;


}

.collection__view-all .button:hover {
  background-color: #b21163 !important;    /* Rosa fuerte */
  color: #ffffff !important;               /* Letras blancas */
  border-color: #b21163 !important;        /* Borde cambia a rosa fuerte */
  opacity: 1 !important;
  transform: scale(1.05);                  /* Pequeño efecto de pulsación */
}

/* 3. Suavizar la transición para que combine con los otros botones */
.collection__view-all .button {
    transition: all 0.2s ease-in-out !important;
}

/* --- TRANSFORMACIÓN TOTAL: PÁGINA DE COLECCIÓN ESTILO SAIE --- */

/* 1. Forzar que la página use TODO el ancho de la pantalla (esto hace las cards GRANDES) */
.template-collection .page-width {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Ajustar el contenedor de filtros y productos */
.template-collection .facets-vertical {
    display: flex !important;
    column-gap: 0 !important; /* Elimina espacio entre filtros y productos */
}

/* 3. El Sidebar de Filtros (Look minimalista) */
.template-collection .facets-wrapper {
    padding: 2rem !important;
    border-right: 0.5px solid #000 !important; /* Línea divisoria vertical */
    background-color: #ffe9f0 !important;
    min-width: 280px !important; /* Ancho fijo para que no apriete los productos */
}

/* 4. La Cuadrícula de Productos (Look Saie de líneas finas) */
.template-collection #product-grid {
    column-gap: 0 !important;
    row-gap: 0 !important;
    border-top: 0.5px solid #000 !important;
}

.template-collection .grid__item {
    padding: 0 !important;
    margin: 0 !important;
    border-right: 0.5px solid #000 !important;
    border-bottom: 0.5px solid #000 !important;
    background-color: #ffe9f0 !important;
}

/* 5. Imágenes Gigantes (Quitar el marco blanco interno) */
.template-collection .card__inner {
    padding: 0 !important;
    background: transparent !important;
}

.template-collection .card__media {
    margin: 0 !important;
}

/* 6. Textos y Precios (Codec_Pro_Bold) */
.template-collection .card__content {
    padding: 2rem !important;
}

.template-collection .card__heading, 
.template-collection .price,
.template-collection .facet-checkbox,
.template-collection .facets__summary {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    text-transform: uppercase !important;
    color: #000 !important;
}

/* 7. EL BOTÓN: Rosa fuerte #b21163 con letras blancas en Hover */
.template-collection .quick-add__submit {
    background-color: transparent !important;
    color: #000 !important;
    border: none !important;
    border-top: 0.5px solid #000 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 50px !important;
}

.template-collection .quick-add__submit:hover {
    background-color: #b21163 !important;
    color: #ffffff !important;
}

.template-collection .quick-add__submit:hover span {
    color: #ffffff !important;
}

/* 8. Limpieza de sombras y estilos Dawn */
.template-collection .card {
    box-shadow: none !important;
}
/* --- SOLUCIÓN DEFINITIVA: 3 COLUMNAS CON ESPACIO (ESTILO NEED) --- */

/* 1. Contenedor principal: le damos un ancho máximo para que no se estire infinito */
.template-collection .page-width {
    max-width: 1450px !important; 
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

/* 2. El Grid: Activamos el espacio entre columnas (gap) */
.template-collection #product-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    column-gap: 30px !important; /* Este es el espacio exacto entre las cajas */
    row-gap: 40px !important;    /* Espacio entre filas */
    justify-content: flex-start !important; /* La primera se queda a la izquierda */
}

/* 3. CÁLCULO PARA 3 COLUMNAS EXACTAS */
@media screen and (min-width: 990px) {
    .template-collection #product-grid .grid__item {
        /* Calculamos: (100% del espacio - 60px de los dos huecos) dividido entre 3 */
        width: calc((100% - 60px) / 3) !important; 
        max-width: calc((100% - 60px) / 3) !important;
        flex: 0 0 calc((100% - 60px) / 3) !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* 4. Estilo de la Card (la caja con borde gris) */
.template-collection .card-wrapper {
    border: 1px solid #e5e5e5 !important; /* Tu línea gris delimitadora */
    background: #ffffff !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 5. Ajuste de filtros para que no roben espacio de más */
.facets-vertical aside {
    width: 250px !important;
    padding-right: 20px !important;
}

/* 6. Móvil: 2 columnas con espacio pequeño */
@media screen and (max-width: 749px) {
    .template-collection #product-grid {
        column-gap: 15px !important;
    }
    .template-collection #product-grid .grid__item {
        width: calc((100% - 15px) / 2) !important;
        max-width: calc((100% - 15px) / 2) !important;
    }
}

/* --- REEMPLAZA TU CÓDIGO ANTERIOR POR ESTE --- */

/* 1. Contenedor principal del banner: centramos todo el contenido */
.collection-hero__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4rem 0 2rem 0 !important; /* Ajusta el aire arriba y abajo del banner */
}

/* 2. Envoltura de texto: forzamos que sea ancho completo y centrado */
.collection-hero__text-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* 3. El Título: Reseteamos lo anterior y centramos normal */
.collection-hero__title, 
.main-collection-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 10px 0 !important; /* 10px es el espacio entre título y descripción */
    padding: 0 !important;
    left: 0 !important; /* Quitamos el 50% anterior */
    right: 0 !important;
    position: relative !important;
}

/* 4. La Descripción: centrada y pegada al título */
.collection-hero__description {
    display: block !important;
    text-align: center !important;
    max-width: 850px !important; /* Ancho máximo para que no se vea una línea eterna */
    margin: 0 auto !important;
    padding: 0 20px !important; /* Aire a los lados en móvil */
    line-height: 1.4 !important;
}
/* 1. Centrado global de la descripción de la colección */
.collection-hero__description {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 800px !important; /* Limitamos el ancho para que sea fácil de leer */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* 2. Para acercarlo al título */
    margin-top: -15px !important; /* Valor negativo para subir el texto */
    line-height: 1.5 !important;
}

/* Ajuste extra al título para reducir el espacio inferior que le habías puesto */
.collection-hero__title, 
.main-collection-title {
    padding-bottom: 5px !important; /* Reducimos de 20px a 5px para que la descripción suba */
}

/* Aseguramos que el contenedor que envuelve ambos esté centrado */
.collection-hero__text-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* --- CORAZÓN FAVORITOS GLOBAL --- */
.brabi-wishlist-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 50 !important;
    transition: transform 0.2s ease;
}

.brabi-wishlist-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* --- CORAZÓN FAVORITOS: CONTROL TOTAL --- */

/* ESTADO INICIAL (VACÍO) */
.brabi-wishlist-btn svg path {
    fill: #ffffff !important; /* Fondo blanco inicial */
    stroke: #000000 !important; /* Borde negro */
    stroke-width: 1.5px !important;
    transition: all 0.3s ease !important;
}

/* ESTADO SELECCIONADO (ROSA) */
/* Esta regla se activa cuando el JS agrega la clase 'is-active' */
.brabi-wishlist-btn.is-active svg path {
    fill: #ffdde7 !important; /* Rosa Brabi */
    stroke: #ffdde7 !important; /* Borde también rosa */
}

/* Evita que el botón tenga fondo o bordes feos */
.brabi-wishlist-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}
/* Quitar la línea debajo del título al pasar el mouse o cliquear el corazón */
.card__heading a, 
.full-unstyled-link, 
.card__heading a:hover, 
.full-unstyled-link:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important; /* A veces Shopify usa sombras en lugar de subrayados */
}

/* Asegurar que el botón de favoritos sea independiente */
.brabi-wishlist-btn {
    text-decoration: none !important;
    outline: none !important;
}
/* 1. Preparamos la sección para mover el botón */
.section-featured-collection {
  position: relative !important;
}

/* 2. Movemos el botón de abajo hacia arriba a la derecha */
.collection__view-all {
  position: absolute !important;
  top: 40px !important; /* Subimos de 15px a 40px para que baje a la línea del título */
  right: 40px !important; /* Le damos un poco más de aire desde el borde derecho */
  margin: 0 !important;
  z-index: 2 !important;
}

/* BOTÓN VER TODO: VERSIÓN GORDITA Y CORTA */
.collection__view-all .button {
  background-color: #fbe6ec !important;
  color: #000000 !important;
  border: 1.5px solid #000000 !important;
  border-radius: 50px !important;
  
  /* AJUSTE DE FORMA: 13px de alto y 18px de largo */
  padding: 13px 18px !important; 
  
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* TIPOGRAFÍA */
  font-weight: bold !important;
  text-transform: lowercase !important;
  font-size: 14px !important; 
  line-height: 1 !important;
  
  /* RESET DE DIMENSIONES */
  min-width: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  
  /* LIMPIEZA DE CONTORNOS Y CLIC */
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

/* ELIMINAR EL CONTORNO AL HACER CLIC */
.collection__view-all .button:focus,
.collection__view-all .button:active,
.collection__view-all .button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.collection__view-all .button:after {
  display: none !important;
}

/* EFECTO HOVER */
.collection__view-all .button:hover {
  background-color: #b21163 !important;
  color: #ffffff !important;
  border-color: #b21163 !important;
  transform: scale(1.05);
}
/* EL TRUCO PARA DAWN: Quitar el recuadro del pseudo-elemento ::after */
.collection__view-all .button::after {
  box-shadow: none !important;
  content: none !important; /* Esto elimina la capa que crea el cuadro */
  display: none !important;
}

/* Por si el navegador intenta ponerle un borde al contenedor */
.collection__view-all {
    outline: none !important;
}
/* Ajuste para que el título no choque con el botón en móviles */
@media screen and (max-width: 750px) {
  .collection__view-all {
    top: 35px !important; /* Un poco más arriba en móvil */
    right: 20px !important;
  }
}
/* ==========================================================================
   ELIMINAR DOBLE LÍNEA DEL BUSCADOR (QUITAR SOMBRA DE ATRÁS)
   ========================================================================== */

/* 1. MATAMOS EL BORDE FANTASMA (EL ":AFTER") */
/* Este es el que crea la segunda línea que ves atrás */
.footer__newsletter .field:after, 
.footer__newsletter .field:before {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2. LIMPIAMOS LA CAJA BLANCA */
.footer__newsletter .field {
  border: 1.5px solid #000000 !important; /* TU ÚNICA LÍNEA NEGRA */
  box-shadow: none !important;           /* ESTO QUITA EL BORDE DE ATRÁS */
  background-color: #ffffff !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}

/* 3. TU BOTÓN ROSA (SIN TOCAR EL DISEÑO) */
.newsletter-form__button {
  background-color: #b21163 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  margin-right: 4px !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* 4. LIMPIEZA FINAL DEL INPUT */
.footer__newsletter .field__input {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Burbuja del contador */
.header__icon--wishlist {
  position: relative;
}

.wishlist-count-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  background-color: #b21163; /* Tu color rosa */
  color: #ffffff;
  font-size: 10px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
  z-index: 1;
}

/* Estilo para el corazón cuando está seleccionado en la card */
.brabi-wishlist-btn.is-active svg {
  fill: #b21163 !important; /* Color relleno */
  stroke: #b21163 !important;
}

.brabi-wishlist-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.brabi-wishlist-btn:hover svg {
  transform: scale(1.1);
}

/*Pestaña variantes de color*/
/* --- MEJORAS GLOBALES BRABY BEAUTY --- */

/* 1. HEADER - Limpieza del Carrito para evitar textos rotos */
.header__icon--cart span:not(.link__text) { display: none !important; }
.header__icon--cart { display: flex !important; align-items: center !important; white-space: nowrap !important; }
.cart-count-bubble { position: absolute !important; background-color: #b21163 !important; color: #fff !important; font-size: 0.9rem !important; height: 1.8rem !important; width: 1.8rem !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; top: 5px !important; right: -10px !important; }

/* 2. CARRITO LATERAL (DRAWER) - Ancho y Estilo */
.drawer { width: 550px !important; max-width: 100vw !important; right: 0 !important; left: auto !important; }
.drawer__inner { background-color: #ffffff !important; width: 100% !important; }
.drawer__heading { font-family: 'Codec_Pro_Bold', sans-serif !important; text-align: center !important; width: 100% !important; text-transform: capitalize !important; font-size: 2.4rem !important; margin-bottom: 20px !important; }
.cart__empty-render .button, .cart__checkout-button { background-color: #000000 !important; color: #ffffff !important; font-family: 'Codec_Pro_Bold', sans-serif !important; border-radius: 50px !important; text-transform: lowercase !important; padding: 12px 30px !important; border: none !important; box-shadow: none !important; height: 50px !important; }



/* --- 2. FLECHAS ">" SÓLO EN EL MENÚ MÓVIL --- */
@media screen and (max-width: 989px) {
  /* Selector ultra-específico para que NO se pase al footer */
  .menu-drawer__navigation .menu-drawer__menu-item::after {
    content: ">" !important;
    position: absolute !important;
    right: 20px !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: normal !important;
    color: #000000 !important;
    display: block !important;
  }

  /* Evitamos que el logo blanco de la cabecera herede la flecha */
  .header__heading-link::after {
    content: none !important;
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  /* 1. Convertimos la galería de Dawn en un contenedor Flexbox dinámico */
  .product__media-wrapper .product__media-list,
  .product__media-wrapper .grid.product__media-list,
  .media-gallery .product__media-list {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    gap: 15px !important;
  }

  /* 2. Forzamos a que la imagen activa crezca al 100% (Ancho Completo) */
  .product__media-wrapper .product__media-list .product__media-item,
  .product__media-wrapper .grid__item.product__media-item,
  .media-gallery .product__media-item {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}
/* TEXTO (Título y Precio) */
.product__info-wrapper { 
    grid-area: texto !important; 
    text-align: left !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
}

/* 5. OCULTAR TODO LO SOBRANTE */
.product__vendor, .product__tax, .quantity, .product-form__quantity, 
.product__view-details, .share-button, .shopify-payment-button,
.cart-notification-product__name + dl {
    display: none !important;
}

/* 6. ESTILOS DE TEXTO */
.product__title h2 {
    font-family: 'CodecPro-Regular', sans-serif !important;
    font-size: 1.6rem !important;
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
}

.price {
    font-family: 'CodecPro-Regular', sans-serif !important;
    font-size: 1.5rem !important;
    justify-content: flex-start !important;
    margin-top: 5px !important;
}

/* 7. VARIANTES Y BOTÓN (ABAJO) */
.product-form {
    grid-area: opciones !important;
    width: 100% !important;
    margin-top: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
}

.product-form__input { text-align: left !important; margin-bottom: 20px !important; } 
.product-form__input .form__label { font-family: 'CodecPro-Regular', sans-serif !important; margin-bottom: 10px !important; }

.product-form__input input[type='radio'] + label {
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    margin: 4px 8px 4px 0 !important; 
    border: 1px solid #ddd !important;
}

/* BOTÓN "AGREGAR AL CARRITO" */
.product-form__submit {
    background-color: #ffe9f0 !important;
    color: #000 !important;
    border: 1.2px solid #000 !important;
    border-radius: 50px !important;
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    text-transform: lowercase !important;
    width: 100% !important;
    height: 52px !important;
    font-size: 1.5rem !important;
    outline: none !important;
    box-shadow: none !important;
}

.product-form__submit:focus, .product-form__submit:focus-visible, .product-form__submit:active {
    outline: none !important;
    box-shadow: none !important;
    border: 1.2px solid #000 !important;
}

/* 8. LA "X" DE CERRAR (Círculo Rosa y X Negra) */
.quick-add-modal__toggle {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 30px !important;
    height: 30px !important;
    background-color: #ffe9f0 !important; 
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    border: none !important;
    padding: 0 !important;
    opacity: 1 !important;
}

.quick-add-modal__toggle .icon-close,
.quick-add-modal__toggle svg {
    width: 10px !important; 
    height: 10px !important;
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
    display: block !important;
}
/* --- AJUSTE BOTÓN FINALIZAR PEDIDO (CARRITO) --- */

/* 2. Quitar el cuadro negro/rosa que sale al hacer clic */
.cart-drawer .cart__checkout-button:focus, 
.cart-drawer .cart__checkout-button:active, 
.cart-drawer .cart__checkout-button:focus-visible,
#Checkout:focus,
#Checkout:active {
    outline: none !important;
    box-shadow: none !important;
}
/* 3. Eliminar cualquier borde extra que Shopify ponga por detrás */
.cart-drawer .cart__checkout-button::after,
.cart-drawer .cart__checkout-button::before,
#Checkout::after {
    display: none !important;
    content: none !important;
}
/* --- FORZAR MAYÚSCULA EN BOTÓN DE CARRITO --- */

/* Seleccionamos el botón por su nombre técnico para que no falle */
button[name="checkout"], 
.cart__checkout-button, 
#CartDrawer-Checkout,
.drawer__footer button {
    text-transform: none !important; /* Quita el modo minúsculas */
    font-variant: normal !important; /* Asegura que no use letras pequeñas */
}

/* Por si acaso el tema usa un estilo de "capitalización" automática */
button[name="checkout"]::first-letter,
.cart__checkout-button::first-letter {
    text-transform: uppercase !important;
}

  /* 6. MI CUENTA */
  .header__icon--account::after {
    content: "Mi Cuenta" !important;
    font-family: 'Codec_Pro_Bold' !important;
    font-size: 15.5px !important;
    color: #000000 !important;
    display: block !important;
  }

  /* 7. MI CARRITO */
  .header__icon--cart::after {
    content: "Mi Carrito" !important;
    font-family: 'Codec_Pro_Bold' !important;
    font-size: 15.5px !important;
    color: #000000 !important;
    display: block !important;
    margin-right: 12px !important;
  }

  /* 8. BURBUJA ROSA */
  .cart-count-bubble {
    position: relative !important;
    background-color: #b21163 !important;
    color: #ffffff !important;
    top: -12px !important;
    left: -12px !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 10px !important;
  }

  /* 9. ALINEACIÓN GENERAL DEL MENÚ DE ICONOS */
  .header__icons {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
  }

  .header__icon--wishlist {
    display: flex !important;
    align-items: center !important;
  }


/* Forzar que el mega menú personalizado se vea cuando el padre está abierto */
details[open] .brabi-skincare-elegant-mega {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  position: absolute;
  left: 0;
  width: 100%;
  background: white;
  min-height: 300px;
  z-index: 10000;
}

/* Estructura Flex para Brabi */
.brabi-skincare-flex {
  display: flex !important;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0;
}

.brabi-skincare-sidebar {
  flex: 0 0 250px;
  border-right: 1px solid #f0f0f0;
}

.brabi-skincare-grid-content {
  flex: 1;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px;
}
/* 1. BLANCO TOTAL PARA EL FONDO GENERAL DE POLÍTICAS */
.template-policy, 
.template-policy #MainContent, 
.template-policy .gradient,
.template-policy .shopify-policy__container,
.template-policy .shopify-policy__title {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 2. AJUSTE DEL TÍTULO PRINCIPAL (Política de reembolso) */
.template-policy .shopify-policy__title h1,
.template-policy .main-page-title {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: 800 !important;
    color: #000000 !important;
    text-align: center;
    margin-top: 40px !important;
}

/* 3. CONTENEDOR DEL TEXTO */
.shopify-policy__container {
    max-width: 900px !important;
    padding: 40px 20px !important;
    margin: 0 auto !important;
}

/* 4. TÍTULOS Y TEXTOS INTERNOS */
.brabi-policy-container .policy-title {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.5rem;
    color: #000;
    margin-top: 30px;
}

.brabi-policy-container .policy-body {
    font-family: 'CodecPro-Regular', sans-serif !important;
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
}
/* Asegura que el menú de Skincare sea visible y tenga scroll si lo necesita */
.brabi-skincare-elegant-mega {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 80vh !important; /* Altura normal para que no se pierda nada */
    overflow-y: auto !important;   /* Este SÍ puede tener scroll si es muy largo */
    background-color: #ffffff !important;
}

/* Solo el de Maquillaje se queda congelado */
.mega-menu__content:has(.brabi-grid-sistema) {
    overflow: hidden !important;
    height: auto !important;
}
/* --- LIMPIEZA Y TIPOGRAFÍAS MEGA MENÚ --- */

/* 1. ELIMINAR LA BARRA GRIS DUPLICADA AL FINAL */
.brabi-skincare-elegant-mega + ul.mega-menu__list,
.mega-menu__content > ul.mega-menu__list {
    display: none !important;
}

/* 2. TIPOGRAFÍA PARA TÍTULOS (Rutina, Preocupación, etc. y Sidebar) */
/* Fuente: Codec_Pro_Bold */
.brabi-skincare-header a, 
.brabi-skincare-header,
.brabi-sidebar-extra {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.7rem !important;
    color: #000000 !important;
    text-transform: capitalize !important; /* "Rutina", "Preocupación" */
    text-decoration: none !important;
}

/* Línea negra debajo de los títulos */
.brabi-skincare-header {
    border-bottom: 1.5px solid #000000 !important;
    padding-bottom: 10px !important;
}

/* 3. TIPOGRAFÍA PARA TEXTOS DE PRODUCTOS */
/* Fuente: CodecPro-Regular */
.brabi-skincare-item-link {
    font-family: 'CodecPro-Regular', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.4rem !important;
    color: #333333 !important;
    text-transform: capitalize !important; /* Primera letra en mayúscula */
    line-height: 2 !important;
    text-decoration: none !important;
}

/* Hover rosa para los productos */
.brabi-skincare-item-link:hover {
    color: #b21163 !important;
    text-decoration: underline !important;
}

/* 4. AJUSTE DE LOGO SIDEBAR */
.brabi-sidebar-logo {
    opacity: 0.1 !important;
    filter: grayscale(1);
    margin-bottom: 25px !important;
}
@media screen and (min-width: 990px) {
  .product-grid-container {
    width: 100% !important;
    max-width: 100% !important;
}
}
/* ==========================================================================
   MI CARRITO (PC: TEXTO / MÓVIL: ICONO BOLSA)
   ========================================================================== */

/* --- 1. VERSIÓN PC: Solo texto "Mi Carrito" --- */
@media screen and (min-width: 750px) {
  /* Escondemos el icono original en PC */
  .header__icon--cart svg { 
    display: none !important; 
  }
  
  .header__icon--cart {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    width: auto !important;
  }

  /* Tu texto personalizado */
  .header__icon--cart::after {
    content: "Mi Carrito" !important;
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15.5px !important;
    color: #000 !important;
    margin-left: 8px !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }
}

/* --- 2. VERSIÓN MÓVIL: Icono de Bolsa--- */
@media screen and (max-width: 749px) {
  .header__icon--cart {
    display: block !important;
    visibility: visible !important;
    width: 30px !important; /* Tamaño del área del icono */
    height: 30px !important;
    position: relative !important;
    /* Inyectamos un icono de bolsa limpio como el de NEED */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px !important;
    font-size: 0 !important; /* Mata cualquier texto suelto */
  }

  /* Matamos el texto "Mi Carrito" que pusimos en PC */
  .header__icon--cart::after {
    content: none !important;
    display: none !important;
  }

  /* Matamos cualquier otro elemento (como el SVG original si existiera) */
  .header__icon--cart svg,
  .header__icon--cart span:not(.cart-count-bubble) {
    display: none !important;
  }
  
  /* Mantenemos la burbuja del número de artículos si la tienes */
  .cart-count-bubble {
    position: absolute !important;
    top: 0 !important;
    right: -5px !important;
  }
}
/* ==========================================================================
   ELIMINAR CORAZÓN (FAVORITOS) - ÚNICAMENTE EN MÓVIL
   ========================================================================== */

@media screen and (max-width: 749px) {
  /* Atacamos todas las posibles formas en que se llame el botón de favoritos */
  .brabi-wishlist-btn,
  .header__icon--wishlist,
  [class*="wishlist-btn"],
  [class*="header__icon--wishlist"],
  a[href*="wishlist"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

/* ==========================================================================
   RESTAURACIÓN PC: LOGO IZQUIERDA - MENÚ - BUSCAR SLIM - CUENTA - CARRITO
   ========================================================================== */
@media screen and (min-width: 990px) {
  
  /* 1. Alineación horizontal de toda la barra */
  .header {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* 2. Logo a la izquierda */
  .header__heading {
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }

  /* 3. Menú de navegación */
  .header__inline-menu {
    margin-left: 25px !important;
    flex: 1 1 auto !important;
  }

  /* 4. Iconos a la derecha */
  .header__icons {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Quitar lupa */
  .header__search summary.header__icon svg {
    display: none !important;
  }

  /* --- MI CUENTA --- */
  .header__icon--account svg { display: none !important; }
  .header__icon--account {
    display: flex !important;
    text-decoration: none !important;
  }
  .header__icon--account::after {
    content: "Mi Cuenta" !important;
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #000 !important;
  }

  /* --- MI CARRITO --- */
  .header__icon--cart svg { display: none !important; }
  .header__icon--cart {
    display: flex !important;
    text-decoration: none !important;
  }
  .header__icon--cart::after {
    content: "Mi Carrito" !important;
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #000 !important;
  }
  
  .cart-count-bubble {
    position: relative !important;
    top: -1px !important;
    margin-left: 4px !important;
  }
}
@media screen and (min-width: 990px) {
  /* AJUSTE DEL ÓVALO: MÁS CORTO Y MÁS GRUESO */
  .header__search summary.header__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    border: 1.5px solid #000 !important; /* Borde un poquito más marcado */
    border-radius: 100px !important;
    background-color: #ffffff !important;
    
    /* DIMENSIONES PEDIDAS */
    width: 105px !important;   /* Menos largo (horizontal) */
    height: 40px !important;  /* Más alto / grueso (vertical) */
    padding: 0 !important;     /* Quitamos paddings para que manden las medidas fijas */
    
    cursor: pointer !important;
    position: relative !important;
  }

  /* Ocultamos la lupa */
  .header__search summary.header__icon svg {
    display: none !important;
  }

}

/* --- FIX LOGO "BRABI" CLIQUEABLE Y CENTRADO --- */

/* 1. Mantenemos la posición central exacta pero lo "subimos" de capa */
.header__heading-link {
    z-index: 9999 !important; /* Lo pone por encima del menú */
    position: relative !important;
    pointer-events: auto !important; /* Habilita el click */
    display: inline-block !important; /* Mantiene su tamaño original */
}

/* 2. Aseguramos que el contenedor no se mueva */
.header__heading {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    z-index: 9999 !important;
}

/* 3. Evitamos que el menú móvil tape el área del logo */
.menu-drawer-container[open] .menu-drawer {
    z-index: 999 !important; /* Un nivel abajo del logo */
}

/* 4. Si el logo se llega a mover un poco, esto lo vuelve a centrar a la fuerza */
.header--middle-center .header__heading,
.header--top-center .header__heading {
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: absolute !important;
}

/* ==========================================================================
   BOTÓN "VER TODO" ABAJO DE LOS PRODUCTOS Y CENTRADO (MÓVIL)
   ========================================================================== */

@media screen and (max-width: 749px) {
  
  /* 1. Preparamos la sección para reordenar las piezas */
  .section-featured-collection .featured-collection {
    display: flex !important;
    flex-direction: column !important; /* Apila todo verticalmente */
  }

  /* 2. El Título se queda arriba (Orden 1) */
  .title-wrapper-with-link {
    order: 1 !important;
    display: block !important;
    text-align: left !important;
    padding-left: 1.5rem !important;
    margin-bottom: 20px !important;
  }

  /* 3. La cuadrícula de productos se queda en medio (Orden 2) */
  .featured-collection__items, 
  .grid, 
  slider-component {
    order: 2 !important;
  }

  /* 4. EL BOTÓN: Lo mandamos al final (Orden 3) y lo centramos */
  .collection__view-all, 
  .view-all {
    order: 3 !important; /* LO MANDA ABAJO DE LOS PRODUCTOS */
    position: static !important; /* MATA EL FLOTADO */
    display: flex !important;
    justify-content: center !important; /* LO CENTRA */
    width: 100% !important;
    margin: 30px 0 !important; /* Espacio arriba y abajo */
  }

  /* 5. Estilo del botón: Compacto y Redondeado (Estilo Need) */
  .collection__view-all .button {
    border-radius: 50px !important; /* Forma de píldora */
    text-transform: lowercase !important; /* "ver todo" en minúsculas */
    padding: 10px 35px !important;
    font-size: 14px !important;
    min-height: 40px !important;
    width: fit-content !important;
    background: #fdf0f5 !important; /* Tu color rosita */
    color: #000 !important;
    border: 1px solid #000 !important;
  }
}
 
/* 1. ARREGLAR BANNER (BIENVENIDO A BRABI) */
.banner__box .rte p, 
.banner__box .rte span,
.banner__content p {
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-align: center !important;
  background: transparent !important;
}


  



  


/* ==========================================================================
   6. SOLUCIÓN MÓVIL COMPLETA: SEPARACIÓN LATERAL + ALINEACIÓN + SÓLO REBAJAS
   ========================================================================== */
@media screen and (max-width: 990px) {
  /* 1. Fondo blanco en el menú lateral */
  .menu-drawer, .drawer__inner, .mobile-menu, .nav-drawer {
    background-color: #ffffff !important;
    background: #ffffff !important;
     /* NUEVO: Evita que el menú se desplace/mueva hacia abajo al deslizar el dedo */
    overscroll-behavior: contain !important;
  }
  

  /* 2. Margen de separación lateral único (20px) en el contenedor principal */
  .menu-drawer__inner-container, .menu-drawer, .drawer__inner, .mobile-menu__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* 2.1. Resetear padding/margin en listas internas para evitar doble margen lateral */
  .menu-drawer__navigation-container, 
  .menu-drawer__navigation, 
  .menu-drawer__menu, 
  .drawer__navigation, 
  .mobile-menu__navigation, 
  .list-menu {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    box-sizing: border-box !important;
  }

  /* 3. Enlaces principales: Negrita, negro y alineación sin margen individual */
  .menu-drawer__menu-item, .mobile-menu__nav-link, .drawer__menu-item, .list-menu__item {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: bold !important;
    font-size: 1.6rem !important;
    color: #000000 !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    border-bottom: 1px solid #f2f2f2 !important;
    box-sizing: border-box !important;
     /* SE AGREGA ESTA LÍNEA DE CORRECCIÓN */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* 4. Ocultar flechas viejas y SVGs por defecto */
  .menu-drawer__menu-item svg, .drawer__menu-item svg, .icon-arrow, .icon-caret {
    display: none !important;
  }

  /* 5. Dibujar chevron '>' fino alineado perfectamente a la derecha del contenedor */
  .menu-drawer__menu-item::after, .drawer__menu-item::after, .list-menu__item::after {
    font-family: Arial, sans-serif !important;
    font-size: 1.4rem !important;
    color: #000000 !important;
    position: absolute !important;
    right: 0px !important;
  }



/* 2. CORRECCIÓN DE COMENTARIOS ROTOS EN TU MÓVIL CSS:
      Usa esta estructura corregida para el orden de cabecera móvil sin errores: */
@media screen and (max-width: 749px) {
  .header-wrapper, .section-header {
    padding: 0 !important;
    position: relative !important;
  }
  
  /* Corregido: Ya no se rompe la lectura del CSS */
  .header,
  .header--has-menu,
  .header--has-local-menu,
  .header--mobile-center {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
  }
}

  /* 6. Estilos de las tarjetas (Banners complementarios) */
  .brabi-mobile-extras {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .brabi-mobile-cards {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .brabi-card-item {
    flex: 1 1 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important; /* Evita que una sola tarjeta se estire al 100% */
    min-height: 95px !important;
    border-radius: 12px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  }

  .brabi-card-yellow {
    background-color: #fbedc9 !important;
    border: 1px solid #fcd34d !important;
  }

  .brabi-card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .brabi-badge-new {
    font-size: 8px !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  .brabi-card-title {
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    font-weight: bold !important;
    font-size: 11px !important;
    color: #1e293b !important;
    margin-top: 8px !important;
  }

  .brabi-card-emoji {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    font-size: 24px !important;
  }

  /* 7. Botón Best Seller de píldora rosa */
  .brabi-best-seller-btn {
    background-color: #ffe8f0 !important;
    color: #000000 !important;
    font-family: 'Codec_Pro_Bold', sans-serif !important;
    border: 1px solid #fbc4cb !important;
    border-radius: 9999px !important;
    padding: 11px 16px !important; /* Grosor ideal sin verse tosco */
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
    font-size: 1.4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
/* 8. NUEVO: Fondo blanco en submenús (segundo nivel) y ocultar barra de desplazamiento */
  .menu-drawer__submenu, .drawer__submenu, .mobile-menu__submenu,
  .menu-drawer__submenu ul, .menu-drawer__submenu li {
    background-color: #ffffff !important;
    background: #ffffff !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE y Edge */
  }

  .menu-drawer__submenu::-webkit-scrollbar,
  .menu-drawer__submenu-container::-webkit-scrollbar,
  .drawer__submenu::-webkit-scrollbar,
  .mobile-menu__submenu::-webkit-scrollbar,
  .menu-drawer__submenu ul::-webkit-scrollbar,
  .menu-drawer__submenu li::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* 8.1. Asegurar que el botón de volver (close-button) siempre tenga la flecha de regreso "←" visible */
  .menu-drawer__close-button::before,
  .drawer__close-button::before {
    content: "← " !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.6rem !important;
    margin-right: 8px !important;
    display: inline-block !important;
    color: #000000 !important;
    vertical-align: middle !important;
  }

  /* 8.2. Evitar doble flecha en el submenú de Marcas (ya que tiene la suya nativa) */
  [id*="marcas"] .menu-drawer__close-button::before,
  [id*="brand"] .menu-drawer__close-button::before,
  [id*="Marcas"] .menu-drawer__close-button::before,
  [id*="marcas"] .drawer__close-button::before,
  [id*="brand"] .drawer__close-button::before,
  [id*="Marcas"] .drawer__close-button::before {
    content: none !important;
  }

  /* Ocultar iconos SVG duplicados de flecha en el botón de volver para un look limpio */
  .menu-drawer__close-button svg,
  .drawer__close-button svg {
    display: none !important;
  }

  /* 9. NUEVO: Cambiar flecha por signo de más "+" en el submenú (segundo nivel expandible) */
  .menu-drawer__submenu details summary::after,
  .menu-drawer__submenu details summary .menu-drawer__menu-item::after,
  .drawer__submenu details summary::after,
  .drawer__submenu details summary .drawer__menu-item::after {
    content: "+" !important;
    font-size: 1.6rem !important;
  }

  /* Desactivar signo "+" en enlaces simples o elementos no expandibles */
  .menu-drawer__submenu a::after,
  .menu-drawer__submenu li:not(details) a::after,
  .menu-drawer__submenu .grid a::after,
  .drawer__submenu a::after,
  .drawer__submenu li:not(details) a::after {
    content: none !important;
    display: none !important;
  }

  /* 9.1. Quitar la cruz (+) y cualquier flecha (::after) en los submenús de Maquillaje y Marcas */
  [id*="maquillaje"] ::after,
  [id*="makeup"] ::after,
  [id*="Maquillaje"] ::after,
  [id*="marcas"] ::after,
  [id*="brand"] ::after,
  [id*="Marcas"] ::after,
  .menu-drawer__submenu[id*="maquillaje"] ::after,
  .menu-drawer__submenu[id*="makeup"] ::after,
  .menu-drawer__submenu[id*="marcas"] ::after,
  .menu-drawer__submenu[id*="brand"] ::after,
  .brand-card::after,
  .makeup-card::after,
  .brand-grid-item::after {
    content: none !important;
    display: none !important;
  } 
  /* 10. NUEVO: Convertir submenús de segundo nivel en acordeón (desglose abajo) */
  .menu-drawer__submenu .menu-drawer__submenu {
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
    height: auto !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    border-top: none !important;
    padding-left: 15px !important;
    padding-right: 0px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    display: none !important;
  }

  /* Mostrar la lista hacia abajo de forma limpia cuando el details esté abierto */
  .menu-drawer__submenu details[open] > .menu-drawer__submenu {
    display: block !important;
  }

  /* Ocultar el signo "+" o "—" cuando el submenú se expande (desglose) para que quede limpio */
  .menu-drawer__submenu details[open] > summary::after,
  .menu-drawer__submenu details[open] > summary .menu-drawer__menu-item::after,
  .drawer__submenu details[open] > summary::after {
    content: none !important;
    display: none !important;
  }

  /* Cuando está expandido, quitar la negrita y usar la tipografía Codec Pro normal */
  .menu-drawer__submenu details[open] > summary,
  .menu-drawer__submenu details[open] > summary .menu-drawer__menu-item,
  .drawer__submenu details[open] > summary {
    font-weight: normal !important;
    font-family: 'CodecProRegular', 'Codec Pro', sans-serif !important;
    color: #000000 !important;
  }

  /* Ocultar el botón redundante de "Volver" en el submenú tipo acordeón */
  .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__close-button {
    display: none !important;
  }

  /* 11. NUEVO: Estilo limpio para el tercer nivel (Limpiadores, etc.) */
  /* Quitar el "+" de las opciones del tercer nivel una vez desglosadas */
  .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__menu-item::after,
  .menu-drawer__submenu .menu-drawer__submenu .list-menu__item::after,
  .menu-drawer__submenu .menu-drawer__submenu a::after {
    content: none !important;
    display: none !important;
  }

  /* Mostrar letra normal (no negrita), limpia en Codec Pro para el tercer nivel */
  .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__menu-item,
  .menu-drawer__submenu .menu-drawer__submenu .list-menu__item,
  .menu-drawer__submenu .menu-drawer__submenu a {
    font-weight: normal !important;
    font-family: 'CodecProRegular', 'Codec Pro', sans-serif !important;
    font-size: 1.4rem !important;
    color: #b02661 !important;
    transition: all 0.2s ease-in-out !important;
  }

  /* Efecto hover/touch: color rosa #b02661 y negrita */
  .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__menu-item:hover,
  .menu-drawer__submenu .menu-drawer__submenu a:hover,
  .menu-drawer__submenu .menu-drawer__submenu li:hover {
    color: #b02661 !important;
    font-weight: bold !important;
  }

}

/* ==========================================================================
   📱 ACORDEÓN MÓVIL "NEED BEAUTY" (SOLO CELULARES)
   ========================================================================== */

@media screen and (max-width: 989px) {
  
  /* 1. Transformamos los sub-submenús en acordeones verticales */
  /* Esto evita que el menú se deslice a pantalla completa y lo abre abajo */
  .menu-drawer__submenu .menu-drawer__submenu {
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
    display: none !important; /* Escondido hasta que se hace clic */
    width: 100% !important;
    height: auto !important;
    background-color: #ffffff !important;
    padding: 5px 0 10px 15px !important; /* Sangría para los hijos */
    border: none !important;
    box-shadow: none !important;
  }

  /* 2. Mostrar el contenido cuando se abre la sección (Rutina, Piel, etc.) */
  .menu-drawer__submenu details[open] > .menu-drawer__submenu {
    display: block !important;
  }

  /* 3. Colocar el signo "+" a la derecha */
  .menu-drawer__submenu summary.menu-drawer__menu-item::after {
    content: "+" !important;
    font-family: Arial, sans-serif !important;
    font-size: 2rem !important;
    position: absolute !important;
    right: 20px !important;
    color: #000 !important;
    font-weight: 300 !important;
  }

  /* 4. Cambiar "+" por "-" (raya) cuando está abierto */
  .menu-drawer__submenu details[open] > summary .menu-drawer__menu-item::after {
    content: "\2014" !important; /* Raya larga horizontal */
    font-size: 1.8rem !important;
    top: 0 !important;
  }

  /* 5. Estilo de los links finales (Limpiadores, Sueros, etc.) */
  .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__menu-item {
    font-family: 'CodecPro-Regular', sans-serif !important;
    font-size: 1.4rem !important;
    color: #b02661 !important;
    border: none !important;
    padding: 10px 0 !important;
    min-height: auto !important;
  }

  /* 6. Quitar el botón de "Volver" del acordeón */
  /* Como ya no es una página nueva, el botón de regresar ya no tiene sentido aquí */
  .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__close-button {
    display: none !important;
  }

  /* 7. Eliminar la flecha ">" original del submenú para que no se encime con el "+" */
  .menu-drawer__submenu summary .icon-arrow, 
  .menu-drawer__submenu summary .icon-caret {
    display: none !important;
  }
}
/* ==========================================================================
   ⚡ MENÚ MÓVIL SÚPER RÁPIDO (SIN RETRASOS)
   ========================================================================== */

/* 1. Aceleramos el desplazamiento del panel */
.menu-drawer {
  transition: transform 0.2s ease !important; /* Cambiado de 0.5s a 0.2s */
}

/* 2. Quitamos el efecto de "aparición lenta" (fade) */
.js details[open] > .menu-drawer {
  animation: none !important; /* Eliminamos animaciones de entrada lentas */
  transform: translateX(0) !important;
}

/* 3. Aceleramos la aparición del fondo oscuro (overlay) */
.menu-drawer-container .menu-drawer__overlay {
  transition: opacity 0.2s ease !important;
}

/* 4. Por si usas submenús, que también abran rápido */
.menu-drawer__submenu {
  transition: transform 0.2s ease !important;
}

/* ALINEAR "BIENVENIDO A BRABI" A LA IZQUIERDA EN PC */
@media screen and (min-width: 990px) {
  .banner__box .rte p, 
  .banner__box .rte span, 
  .banner__content p {
    text-align: left !important; /* Cambia de centrado a izquierda */
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: block !important;
  }
  
  /* Asegura que el contenedor de los textos no lo empuje */
  .banner__box {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* --- ESTILOS PERSONALIZADOS DEL PIE DE PÁGINA --- */

/* 1. Configuración del Botón de Newsletter */
.footer .newsletter-form__button {
  background-color: #b02661 !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.footer .newsletter-form__button svg {
  stroke: #ffffff !important;
  stroke-width: 3 !important;
  width: 18px !important;
}

/* 2. Configuración del campo de texto (Correo) */
.footer .footer__newsletter .field {
  border-radius: 50px !important;
  border: 1.5px solid #000000 !important;
}

/* 3. Ajuste del diseño inferior */
.footer .footer__content-bottom {
  display: block !important;
}

/* 1. DISEÑO DE NEWSLETTER (BOTÓN Y CAMPO) */
.footer .newsletter-form__button {
  background-color: #b02661 !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.footer .newsletter-form__button svg {
  stroke: #ffffff !important;
  stroke-width: 3 !important;
  width: 18px !important;
}
.footer .footer__newsletter .field {
  border-radius: 50px !important;
  border: 1.5px solid #000000 !important;
}
/* ==========================================================================
   SOLUCIÓN COMPLETA: NAVEGACIÓN PC INSTANTÁNEA Y CLIC DIRECTO EN LAS LETRAS
   ========================================================================== */

/* Se aplica en resoluciones de computadora (Shopify Dawn) */
@media screen and (min-width: 990px) {
  /* 1. Hace que toda la etiqueta <summary> y su contenido sea un gran bloque interactivo y rápido */
  header-menu details summary,
  .header__inline-menu details summary {
    position: relative !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* 2. TRUCO DE POINTER-EVENTS: Redirige cualquier clic en letras (span) o icono (svg) directamente al botón principal */
  header-menu details summary *,
  header-menu details summary span,
  header-menu details summary svg,
  .header__inline-menu details summary *,
  .header__inline-menu details summary span,
  .header__inline-menu details summary svg {
    pointer-events: none !important; /* Evita que los elementos internos intercepten o traben el clic */
  }

  /* 3. CAMBIO DE COLOR DINÁMICO (ROSA #b02661): Solo las letras cambian de color, manteniendo la flecha limpia */
  header-menu details:hover summary span,
  header-menu details[open] summary span,
  .header__inline-menu details:hover summary span,
  .header__inline-menu details[open] summary span,
  .header__menu-item:hover span,
  .header__menu-item:focus span,
  .header__active-menu-item {
    color: #b02661 !important;
  }

  /* Conservar la flecha (caret/svg) con color gris neutro suave, evitando que se pinte de rosa */
  header-menu details summary svg,
  header-menu details:hover summary svg,
  header-menu details[open] summary svg,
  .header__inline-menu details summary svg,
  .header__inline-menu details:hover summary svg,
  .header__inline-menu details[open] summary svg,
  .header__inline-menu details summary .icon-caret,
  .header__inline-menu details:hover summary .icon-caret,
  .header__inline-menu details[open] summary .icon-caret,
  .header__menu-item svg,
  .header__menu-item:hover svg,
  .header__menu-item .icon-caret,
  .header__menu-item:hover .icon-caret {
    color: #777777 !important; /* Mantiene la flecha limpia en gris neutro */
    fill: currentColor !important;
  }

  /* 4. RESPUESTA INSTANTÁNEA: Elimina cualquier retraso o animación de espera en los submenús */
  header-menu .header__submenu,
  header-menu .mega-menu,
  .header__submenu,
  .mega-menu,
  .header__submenu-list,
  .header__submenu *,
  .mega-menu * {
    transition: none !important;
    animation: none !important;
  }

  /* 5. DESPLIEGUE INSTANTÁNEO: Fuerza al menú a mostrarse de forma inmediata al abrirse */
  header-menu details[open] > .header__submenu,
  header-menu details[open] > .mega-menu,
  .header__inline-menu details[open] > .header__submenu,
  .header__inline-menu details[open] > .mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* 6. APERTURA POR HOVER AL PASAR EL CURSOR: Rápido y fluido */
  header-menu details:hover > .header__submenu,
  header-menu details:hover > .mega-menu,
  .header__inline-menu details-disclosure details:hover > .header__submenu,
  .header__inline-menu details-disclosure details:hover > .mega-menu,
  .header__inline-menu details:hover > .header__submenu,
  .header__inline-menu details:hover > .mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Rotación inmediata de la flecha al abrir o pasar el cursor */
  header-menu details:hover summary svg,
  header-menu details[open] summary svg,
  .header__inline-menu details-disclosure details:hover summary .icon-caret,
  .header__inline-menu details:hover summary .icon-caret,
  .header__inline-menu details[open] summary .icon-caret {
    transform: rotate(180deg) !important;
  }
}
/* 1. TUS ESTILOS DE NEWSLETTER (No cambian) */
.footer .newsletter-form__button {
  background-color: #b02661 !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.footer .newsletter-form__button svg {
  stroke: #ffffff !important;
  stroke-width: 3 !important;
  width: 18px !important;
}
.footer .footer__newsletter .field {
  border-radius: 50px !important;
  border: 1.5px solid #000000 !important;
}

/* 2. EL CAMBIO DE COLOR REALMENTE EFECTIVO */

/* Aplicamos el MAGENTA OSCURO a TODAS las capas del footer en todas las páginas */
.footer, 
.footer-section, 
.section-sections--footer-padding, 
.footer.gradient,
#shopify-section-sections--footer-group {
    background-color: #b02661 !important;
    background: #b02661 !important;
    --gradient-background: #b02661 !important;
    --color-background: #b02661 !important;
}

/* REVERTIMOS A ROSA CLARO SOLO EN EL INICIO */
/* Usamos selectores ultra específicos para que el inicio gane la pelea */
body.template-index .footer, 
body.template-index .footer-section, 
body.template-index .section-sections--footer-padding, 
body.template-index .footer.gradient,
body.template-index #shopify-section-sections--footer-group {
    background-color: #ffe8f0 !important;
    background: #ffe8f0 !important;
    --gradient-background: #ffe8f0 !important;
    --color-background: #ffe8f0 !important;
}

/* ==========================================================================
   SOLUCIÓN COMPLETA: LUPA EN MÓVIL, ÓVALO EN PC Y LOGOTIPO PERFECTO (TEMA DAWN)
   Copia y pega este bloque al final de tu archivo base.css o theme.css
   ========================================================================== */

/* 1. AJUSTES DEL LOGOTIPO BRABI (Mantiene su tamaño ideal en móvil sin encogerse) */
html body .header__heading-logo,
.header__heading-logo {
    display: block !important;
    height: auto !important;
    transition: width 0.2s ease-in-out !important;
}

/* Tamaño equilibrado en móvil para que quepa todo el menú en una sola línea */
@media screen and (max-width: 989px) {
  html body .header__heading-logo,
  .header__heading-logo {
    width: 90px !important; /* El tamaño original de 90px que se ve hermoso */
    max-width: 105px !important;
  }
}

/* Tamaño elegante en PC */
@media screen and (min-width: 990px) {
  html body .header__heading-logo,
  .header__heading-logo {
    width: 110px !important; /* Ajuste sutil para PC */
  }
}

/* 2. Mantenemos el óvalo blanco sin lupa en la versión de Escritorio (PC) */
@media screen and (min-width: 990px) {
  html body .header__search summary.header__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #000000 !important;
    border-radius: 100px !important;
    background-color: #ffffff !important;
    width: 105px !important;
    height: 40px !important;
    padding: 0 !important;
    position: relative !important;
    box-shadow: none !important;
  }

  /* Ocultamos únicamente la lupa original del botón summary en PC para que no haya doble lupa */
  html body .header__search summary.header__icon .svg-wrapper:not(.header__icon-close) svg,
  html body .header__search summary.header__icon svg.icon-search,
  html body .header__search summary.header__icon svg:not(.icon-close) {
    display: none !important;
  }
}

/* 3. FORZAMOS LA LUPA LIMPIA (Sin óvalo, sin bordes, sin textos) EN MÓVILES Y TABLETS */
@media screen and (max-width: 989px) {
  /* Reseteamos el contenedor: eliminamos fondo blanco, óvalo, borde, sombras y anchos de PC */
  html body .header__search summary.header__icon,
  html body .header__icon--search,
  html body details.search-modal summary.header__icon,
  html body summary.header__icon--search {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  /* OBLIGAMOS al SVG original de tu lupa a mostrarse con su diseño nativo sin romper sus trazos */
  html body .header__search summary.header__icon svg, 
  html body .header__search summary.header__icon .svg-wrapper svg,
  html body .icon-search,
  html body .header__icon--search svg,
  html body .header__icon--search .icon,
  html body details.search-modal summary.header__icon svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    color: #000000 !important; /* Asegura el color negro */
  }

  /* Eliminamos dobles bordes, contornos o capas fantasma de Shopify Dawn (::after/::before) */
  html body .header__search summary.header__icon::after,
  html body .header__search summary.header__icon::before,
  html body .header__icon--search::after,
  html body .header__icon--search::before,
  html body details.search-modal summary.header__icon::after {
    display: none !important;
    content: none !important;
  }
}

/* 4. ASEGURAR QUE LOS ELEMENTOS SALGAN EN UNA SOLA LÍNEA (Menú, Logo, Lupa, Cuenta, Carrito) */
@media screen and (max-width: 989px) {
  html body .header {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important; /* Menú | Logo | Iconos de acción */
    align-items: center !important;
    gap: 1rem !important;
  }

  /* Contenedor de iconos en la derecha: Lupa, Cuenta, Carrito */
  html body .header__icons {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1.2rem !important;
  }
}








/* =============================================================================
   GALERÍA DE FOTOS MOBILE - ESTILO NEED BEAUTY
   - Paso 1: Pega este código al final de tu archivo assets/base.css (o theme.css)
   ============================================================================= */

/* Oculta la galería predeterminada de tu tema en celulares (Dawn, Prestige, Sense, etc.) pero NO el contenedor principal */
@media screen and (max-width: 767px) {
  /* Selectores internos comunes de galerías nativas de Shopify para ocultar solo el slider nativo */
  media-gallery > slider-component,
  media-gallery .slider-mobile-gutter,
  media-gallery .thumbnail-slider,
  media-gallery .product__media-list,
  media-gallery .slider-buttons,
  .product__media-list,
  .product-media-container .slider-mobile-gutter,
  .product__gallery-items,
  .product-single__media-group {
    display: none !important;
  }
  
  .need-mobile-gallery-wrapper {
    display: block !important;
    width: 100%;
    margin: 12px 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
}

@media screen and (min-width: 768px) {
  .need-mobile-gallery-wrapper {
    display: none !important;
  }
}

.need-mobile-gallery-wrapper {
  display: none; /* Se oculta en pantallas de escritorio por defecto */
}

.need-mobile-slides-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Oculta scrollbar en Firefox */
  padding: 0 16px;
  margin-bottom: 12px;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

.need-mobile-slides-container::-webkit-scrollbar {
  display: none; /* Oculta scrollbar en Chrome/Safari */
}

.need-mobile-slide {
  scroll-snap-align: start;
  width: 46vw;
  max-width: 190px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.need-slide-inner {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: #FFFFFF;
  border: 1px solid #F0EFEA;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}

.need-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 8px;
}

.need-zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 0;
  outline: none;
  transition: transform 0.2s;
}

.need-zoom-btn:active {
  transform: scale(0.9);
}

.need-slide-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background-color: #ffe8f0;
  border: 1.5px solid #ffe8f0;
  border-radius: 50px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  color: #080808ff;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.need-mobile-thumbs-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 16px;
  box-sizing: border-box;
}

.need-mobile-thumbs-row::-webkit-scrollbar {
  display: none;
}

.need-thumb-item {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1.5px solid #EAE8E2;
  padding: 1.5px;
  background-color: #FFFFFF;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.need-thumb-item.active {
  border-color: #DB2777; /* Color rosa de NEED Beauty para la activa */
  transform: scale(1.05);
}

.need-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Lightbox de Zoom Pantalla Completa - Deslizable & Gestos */
.need-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 999999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.need-lightbox-slider {
  display: flex;
  width: 100%;
  height: 80%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.need-lightbox-slider::-webkit-scrollbar {
  display: none;
}

.need-lightbox-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

.need-lightbox-img {
  max-width: 95%;
  max-height: 80%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.need-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 300;
  background: rgba(0, 0, 0, 0.4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  outline: none;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.need-lightbox-close:hover {
  background: rgba(0, 0, 0, 0.6);
}

.need-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.need-lightbox-nav:hover {
  background: rgba(255,255,255,0.25);
}

.need-prev {
  left: 24px;
}

.need-next {
  right: 24px;
}

@media screen and (max-width: 767px) {
  .need-lightbox-nav {
    display: none;
  }
}

.need-lightbox-dots {
  position: absolute;
  bottom: 32px;
  display: flex;
  gap: 8px;
  z-index: 1000000;
}

.need-lightbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.need-lightbox-dot.active {
  background: #ffffff;
  transform: scale(1.25);
}

.need-lightbox-label {
  margin-top: 16px;
  background-color: #ffe8f0;
  border: 1.5px solid #ffe8f0;
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #000000ff;
  text-transform: lowercase;
}

/* ==========================================================================
   SOLUCIÓN COMPLETA: ICONOS JUNTOS EN PC, CARRITO A LA IZQUIERDA Y FAVORITOS EN SU LUGAR
   Copia y pega este bloque al final de tu base.css o theme.css
   ========================================================================== */

/* 1. CONFIGURACIÓN EXCLUSIVA PARA PC (ESCRITORIO) */
@media screen and (min-width: 990px) {
  /* Acerca los elementos: Buscar, Iniciar Sesión, Favoritos y Carrito */
  html body .header__icons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important; /* Une todos los elementos de manera compacta */
  }

  /* Eliminamos cualquier margen residual que pueda separarlos de más */
  html body .header__icons > * {
    margin: 0 !important;
  }

  /* El botón de Buscar (óvalo) se acerca ligeramente al de Iniciar Sesión */
  html body .header__search {
    margin-right: 4px !important;
  }

  /* El icono de favoritos se queda exactamente en su lugar (sin desfase manual) */
  html body .header__icon--wishlist {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* Desplazamos el botón de Mi Carrito un poco a la izquierda (acercándose a favoritos) */
  /* Usamos selectores de máxima especificidad para ganarle a cualquier script o app de Shopify que intente restaurarlo */
  html body .header__icons #cart-icon-bubble,
  html body .header__icons .header__icon--cart,
  html body #cart-icon-bubble,
  html body .header__icon--cart,
  html body .header__icons a[href*="/cart"],
  html body .header__icons a[href*="/cart"] * {
    position: relative !important;
    margin-left: -15px !important; /* Desplazamiento seguro con margen negativo */
    transform: translateX(-15px) !important; /* Desplazamiento seguro con transform */
  }
}

/* 2. COMPORTAMIENTO MÓVIL (COMPLETAMENTE INTACTO) */
/* (Mantiene la lupa limpia, el logo alineado y sin interferir con las dimensiones) */
@media screen and (max-width: 989px) {
  html body .header__search summary.header__icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  html body .header__search summary.header__icon svg, 
  html body .header__search summary.header__icon .svg-wrapper svg,
  html body .icon-search,
  html body .header__icon--search svg,
  html body details.search-modal summary.header__icon svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 2.2rem !important;
    height: 2.2rem !important;
    color: #000000 !important;
  }

  html body .header__search summary.header__icon::after,
  html body .header__search summary.header__icon::before,
  html body .header__icon--search::after {
    display: none !important;
    content: none !important;
  }
}
/* ==========================================================================
   DESPLAZAMIENTO DEL BOTÓN DE BUSCAR (PC / ESCRITORIO)
   ========================================================================== */
@media screen and (min-width: 990px) {
  /* Desplazamos el óvalo de Buscar ligeramente a la derecha hacia Iniciar Sesión */
  html body .header__search,
  html body .header__search summary.header__icon,
  html body summary.header__search,
  html body .header__search-button {
    position: relative !important;
    left: 17px !important; /* Desplazamiento de posición a la derecha */
    transform: translateX(10px) !important; /* Fuerza el desplazamiento tras cargas dinámicas */
  }
}
/* Fórmula 1: Método Flexbox Inteligente (Alinea la burbuja al lado de la "o") */
#cart-icon-bubble, 
.header__icon--cart,
.cart-link-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important; /* <--- DISTANCIA CON LA LETRA "O": Pon un número menor para pegarlo más */
  position: relative !important;
  text-decoration: none !important;
}

/* Forzar que la burbuja magenta se comporte como un elemento hermano flexible a un lado */
#cart-icon-bubble .cart-count-bubble,
.header__icon--cart .cart-count-bubble,
.cart-count-bubble {
  position: relative !important;
  
  /* ========================================================================= */
  /* 🛠️ ¡AQUÍ AJUSTAS LA POSICIÓN! */
  /* ========================================================================= */
  top: -8px !important;    /* <--- SUBIR/BAJAR: Si la quieres más arriba pon un valor más negativo (ej: -10px o -12px) */
  left: -4px !important;   /* <--- ACERCAR/ALEJAR: Si la quieres más pegada a la izquierda pon un valor más negativo (ej: -4px) */
  
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #b02661 !important; /* Tu color magenta */
  color: #ffffff !important;
  width: 17px !important;  /* Tamaño del círculo */
  height: 17px !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}

/* El Truco Mágico: Centra el número y mata la posición absoluta original de Dawn */
#cart-icon-bubble .cart-count-bubble span,
.header__icon--cart .cart-count-bubble span,
.cart-count-bubble span {
  position: static !important;
  transform: none !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}



/* ==========================================================================
   Iconos de Navegación Móvil (Menú y Lupa) con Grosor Uniforme
   Alinea el peso visual de la hamburguesa y búsqueda con cuenta y bolsa.
   ========================================================================== */
@media screen and (max-width: 989px) {
  /* Reseteamos el contenedor de la lupa en móviles para un diseño limpio sin óvalos */
  html body .header__search summary.header__icon,
  html body .header__icon--search,
  html body details.search-modal summary.header__icon,
  html body summary.header__icon--search {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  /* Forzamos las dimensiones nativas para que no se deformen */
  html body .header__search summary.header__icon svg, 
  html body .header__search summary.header__icon .svg-wrapper svg,
  html body .icon-search,
  html body .header__icon--search svg,
  html body .header__icon--search .icon,
  html body details.search-modal summary.header__icon svg {
    width: 2.2rem !important;
    height: 2.2rem !important;
    color: #000000 !important;
  }

  /* Ajustamos quirúrgicamente el grosor del trazo (stroke-width) de las líneas internas */
  html body .header__icon--menu svg path,
  html body .header__icon--menu svg line,
  html body .header__icon--menu svg rect,
  html body .header__icon--search svg path,
  html body .header__icon--search svg circle,
  html body .header__icon--search svg line,
  html body .icon-search path,
  html body .icon-search circle,
  html body .icon-hamburger path,
  html body .icon-hamburger line,
  .menu-drawer__navigation .icon-hamburger path,
  .menu-drawer__navigation .icon-hamburger line,
  .header__icon--menu .icon-hamburger path,
  .header__icon--menu .icon-hamburger line {
    stroke-width: 0.5px !important; /* Grosor perfecto y equilibrado */
    stroke: #000000 !important;
  }

  /* OBLIGAMOS a la lupa a heredar las dimensiones de visualización correctas en móvil */
  html body .header__search summary.header__icon svg, 
  html body .header__search summary.header__icon .svg-wrapper svg,
  html body .icon-search,
  html body .header__icon--search svg,
  html body .header__icon--search .icon,
  html body details.search-modal summary.header__icon svg {
    width: 2.0rem !important;  /* Ajustado de 2.2rem a 2.0rem */
    height: 2.0rem !important; /* Ajustado de 2.2rem a 2.0rem */
    color: #000000 !important;
  }

  /* Limpieza de contornos fantasma del tema Dawn */
  html body .header__search summary.header__icon::after,
  html body .header__search summary.header__icon::before,
  html body .header__icon--search::after,
  html body .header__icon--search::before,
  html body details.search-modal summary.header__icon::after {
    display: none !important;
    content: none !important;
  }
}
/* Alineación del botón "Seguir en Shop" en versión PC (Escritorio) */
@media screen and (min-width: 750px) {
  .footer__follow-on-shop,
  shop-follow-button {
    margin-left: -4px !important; /* Mueve el botón a la izquierda para alinearlo con el menú */
    display: flex !important;
    justify-content: flex-start !important;
  }
}

/* ==========================================================================
   BRABI - ALINEACIÓN PERFECTA (TÍTULO, DESCRIPCIÓN Y BOTONES)
   Pega este código AL FINAL de tu archivo base.css
   - Alinea en el MISMO EJE VERTICAL el Título, la Descripción y los Botones.
   - Tipografía Codec Pro Bold y Hover en color #b02661 con texto blanco.
   ========================================================================== */

/* 1. Unificar el contenedor flexible a la izquierda */
.collection-hero__inner,
.collection-hero__text-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 2. Forzar TÍTULO y DESCRIPCIÓN al mismo margen izquierdo (0px) */
.collection-hero__title,
.main-collection-title,
.collection-title,
.collection-hero__description,
.collection__description {
  text-align: left !important;
  margin-left: 0 !important; /* Mismo margen 0 para alinear perfectamente */
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. Contenedor principal de los botones (Mismo margen izquierdo 0px) */
.brabi-pills-container {
  width: 100% !important;
  margin: 18px 0 24px 0 !important; /* Mismo inicio horizontal */
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

/* 4. Wrapper Flex Multilínea para celular y PC */
.brabi-pills-wrapper {
  display: flex !important;
  flex-wrap: wrap !important; /* Permite varias filas si no caben */
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. Estilo de los Botones Rosa con Tipografía Codec Pro Bold */
.brabi-collection-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffe8f0 !important;
  color: #000000 !important;
  font-family: 'Codec Pro', 'Codec Pro Bold', 'CodecPro', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important; /* Codec Pro Bold */
  padding: 10px 18px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  border: none !important;
  cursor: pointer !important;
}

/* Hover: Cambia a fondo #b02661 con letras Blancas */
.brabi-collection-pill:hover,
.brabi-collection-pill.active-pill {
  background-color: #b02661 !important;
  color: #ffffff !important;
  border-color: #b02661 !important;
  transform: translateY(-1px) !important;
}

/* 6. Ajustes Responsivos para Celulares */
@media (max-width: 768px) {
  .collection-hero__title {
    font-size: 26px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  .collection-hero__description {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  .brabi-pills-container {
    margin: 14px 0 20px 0 !important;
    padding-left: 0 !important;
  }
  .brabi-pills-wrapper {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
  }
  .brabi-collection-pill {
    font-size: 13px !important;
    padding: 9px 15px !important;
  }
}

/* ==========================================================================
   ARREGLO DE "36 PRODUCTOS" EN CELULARES (MÓVIL)
   Pega este código al final de tu archivo assets/base.css
   ========================================================================== */
@media (max-width: 768px) {
  .product-count,
  .product-count__text,
  .facets__product-count,
  .facet-filters__total,
  .mobile-facets__count,
  #ProductCount,
  #ProductCountDesktop,
  .mobile-facets__info {
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    display: inline-block !important;
    word-break: normal !important;
    overflow: visible !important;
  }
}
/* ==========================================================================
   BRABI - CORRECCIÓN PARA "FILTRAR Y ORDENAR" EN UNA SOLA LÍNEA (SIN REPETIR "FILTRAR")
   Pega esto al final de tu archivo assets/base.css
   ========================================================================== */

/* 1. Forzar que el contenedor se mantenga en una sola línea horizontal */
.mobile-facets__open,
.mobile-facets__open-wrapper {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  gap: 4px !important;
}

.mobile-facets__open-label {
  white-space: nowrap !important;
  word-break: normal !important;
}

/* 2. Ocultar la etiqueta corta duplicada 'Filtrar' para dejar únicamente 'Filtrar y ordenar' */
.mobile-facets__open-label.medium-hide,
.mobile-facets__open-label.large-hide {
  display: none !important;
}

.mobile-facets__open-label.small-hide {
  display: inline-block !important;
}



/* ==========================================================================
   MOVER LOGO "BRABI" A LA IZQUIERDA Y CERCA DEL MENÚ (SÓLO MÓVIL)
   ========================================================================== */

@media screen and (max-width: 989px) {
  /* 1. Anular el centrado absoluto y posicionamiento central */
  .header--middle-center .header__heading,
  .header--top-center .header__heading,
  html body .header__heading,
  .header__heading-link {
    position: static !important;
    left: auto !important;
    transform: none !important;
    justify-self: start !important;
    text-align: left !important;
    margin-left: 0px !important; /* Sin espacio extra a la izquierda */
    margin-right: auto !important; /* Empuja los iconos de la derecha (lupa/bolsa) al final */
  }

  /* 2. Alineación directa del enlace del logo */
  .header__heading-link {
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-left: 2px !important; /* Ajuste sutil si quieres pegarlo más o despegarlo 2px */
  }

  /* 3. Reducir la separación entre el icono de Menú y el Logo */
  .header,
  .header--mobile-center,
  .header--mobile-left {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important; /* Distancia estrecha entre el botón de menú y el logo */
  }

  /* 4. Mantener el grupo de iconos (Lupa, Cuenta, Carrito) a la derecha */
  .header__icons {
    margin-left: auto !important;
  }
}

/* ==========================================================================
   CONVERTIR BANNER DE SHOPIFY EN CARRUSEL (ANCHO COMPLETO + OPACIDAD 10% + FLECHAS Y PUNTOS)
   ========================================================================== */

/* 1. Contenedor del Banner */
.banner:has(.banner__media + .banner__media) {
  position: relative !important;
  overflow: hidden !important;
}

/* 2. Forzar que cada imagen ocupe el 100% del ancho y alto (sin dividirse) */
.banner:has(.banner__media + .banner__media) .banner__media {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out !important;
  z-index: 1 !important;
}

/* Imagen activa ocupando todo el banner */
.banner:has(.banner__media + .banner__media) .banner__media.is-active,
.banner:has(.banner__media + .banner__media) .banner__media:first-child {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ajuste de imagen para cubrir 100% sin deformarse */
.banner:has(.banner__media + .banner__media) .banner__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 3. Opacidad del 10% en la capa superior (Overlay de lectura) */
.banner:has(.banner__media + .banner__media) .banner__media::after {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.10) !important; /* 10% de opacidad oscura */
  pointer-events: none !important;
  z-index: 2 !important;
}

/* 4. Mantener textos y botones por encima de las imágenes */
.banner:has(.banner__media + .banner__media) .banner__content {
  position: relative !important;
  z-index: 5 !important;
}

/* =========================================================
   FLECHAS DEL BANNER - SOLO EN COMPUTADORA (PC)
   ========================================================= */
@media screen and (min-width: 750px) {
  .brabi-banner-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    color: #000000 !important;
    border: none !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
  }

  .brabi-banner-arrow:hover {
    background: #ffffff !important;
    transform: translateY(-50%) scale(1.1) !important;
  }

  .brabi-banner-prev { 
    left: 20px !important; 
  }

  .brabi-banner-next { 
    right: 20px !important; 
  }
}

/* =========================================================
   OCULTAR FLECHAS EN CELULAR (SOLO PUNTITOS)
   ========================================================= */
@media screen and (max-width: 749px) {
  .brabi-banner-arrow {
    display: none !important;
  }
}

/* 6. Puntitos de navegación en la parte inferior */
.brabi-banner-dots {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.brabi-banner-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}
.brabi-banner-dot.is-active {
  background: #ffffff !important;
  width: 28px !important;
  border-radius: 12px !important;
  border-color: #000000 !important;
}

/* ==========================================================================
   TIRTIR GLOBAL STYLE - OVERRIDE DEFINITIVO ABSOLUTO PARA DAWN Y TEMAS SHOPIFY
   Pega este bloque al final de assets/base.css (o theme.css)
   ========================================================================== */

/* 1. ANULACIÓN DE BORDES Y SOMBRAS DE DAWN EXCLUSIVAMENTE EN EL BUSCADOR */
.search-modal__field,
.search-modal__field::after,
.search-modal__field::before,
.search-modal .field,
.search-modal .field::after,
.search-modal .field::before,
.search-modal .field__input,
.search-modal .field__input::after,
.search-modal .field__input::before {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* 2. OVERLAY PANTALLA COMPLETA FIXED (INMUNE A COMPRESIÓN O DEFORMACIÓN DEL HEADER) */

/* Evitar que el contenedor del buscador en Dawn altere la altura del Header */
details-modal.header__search,
.header__search details,
.header__search,
.header__icon--search {
  position: relative !important;
  height: auto !important;
}

/* Ocultar por defecto para no interferir con la navegación */
#TirtirSearchModal:not([open]):not(.is-open),
.search-modal:not(.is-open):not([open]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Mostrar como Capa Fija en toda la pantalla (Full Viewport Overlay) */
#TirtirSearchModal.is-open,
#TirtirSearchModal[open],
.search-modal.is-open,
.search-modal[open],
#TirtirSearchDetails[open] #TirtirSearchModal,
.header__search details[open] .search-modal,
details-modal.header__search details[open] .search-modal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  z-index: 2147483647 !important;
  overflow-y: auto !important;
}

/* 3. ALINEACIÓN SUPERIOR DEL CONTENIDO DEL MODAL (DESACTIVAR CENTRADO VERTICAL DE DAWN) */
html body .search-modal__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 24px 32px !important;
  position: relative !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  min-height: auto !important;
}

/* 4. FORMULARIO Y BARRA DE BÚSQUEDA SUPERIOR (LUPA + INPUT + CLEAR + X) */
html body .search-modal__form {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body .search-modal__field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #e5e5e5 !important;
  padding-bottom: 14px !important;
  position: relative !important;
  background: #ffffff !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.search__icon-left {
  display: flex !important;
  align-items: center !important;
  margin-right: 14px !important;
  color: #111111 !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.search__icon-left svg {
  width: 22px !important;
  height: 22px !important;
}

.search-modal__field .search__input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
  font-family: inherit !important;
  color: #111111 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  margin: 0 12px 0 0 !important;
  width: auto !important;
}

/* BOTÓN CLEAR & BOTÓN X ALINEADOS */
.search__button-clear {
  position: static !important;
  background: none !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: #777777 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  margin-right: 12px !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.search__button-clear.hidden {
  display: none !important;
}

.search-modal__close-button {
  position: static !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111111 !important;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
}

.search-modal__close-button svg {
  width: 22px !important;
  height: 22px !important;
}

/* 5. CONTENEDOR DE RESULTADOS PREDICTIVOS CON SCROLL */
.predictive-search,
#predictive-search-results {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  padding-top: 24px !important;
  background: #ffffff !important;
  width: 100% !important;
}

/* 6. LAYOUT PC: 2 COLUMNAS (IZQUIERDA: SUGGESTIONS/PAGES/SEARCH ALL, DERECHA: PRODUCTOS) */
@media screen and (min-width: 769px) {
  .tirtir-predictive-results {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
  }

  .tirtir-left-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .tirtir-products-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }

  .tirtir-product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  .tirtir-product-img {
    width: 100% !important;
    max-width: 220px !important;
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 12px !important;
  }

  .tirtir-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .tirtir-product-title {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    margin: 4px 0 !important;
  }

  .tirtir-product-price-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 13px !important;
  }
}

/* 7. LAYOUT MÓVIL: COLUMNA ÚNICA VERTICAL */
@media screen and (max-width: 768px) {
  .tirtir-predictive-results {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .tirtir-products-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .tirtir-product-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  .tirtir-product-img {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
  }

  .tirtir-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

.tirtir-section-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: 0.5px !important;
}

.tirtir-suggestions-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.tirtir-suggestion-link {
  text-decoration: none !important;
  color: #333333 !important;
  font-size: 13px !important;
  transition: color 0.15s ease !important;
}

.tirtir-suggestion-link:hover {
  color: #e11d48 !important;
}

.tirtir-search-footer {
  margin-top: 12px !important;
}

.tirtir-search-all-btn {
  display: block !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid #111111 !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

.tirtir-search-all-btn:hover {
  background: #111111 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   SOLUCIÓN DE BOTONES DE VARIANTE Y TAMAÑO PARA SHOPIFY
   Aplica este código en:
   Tienda en línea > Temas > Personalizar > Configuración del tema > CSS personalizado
   o al final del archivo base.css / theme.css
   ========================================================================== */

/* 1. CORRECCIÓN PRINCIPAL: Desactivar círculos rígidos y permitir texto legible */
.product-form__input label,
.variant-input input[type="radio"] + label,
fieldset.product-form__input input[type="radio"] + label,
.product-form__input--pill label,
.variant-input-wrapper label,
.variant-picker__option-values label {
  /* Anular la forma circular forzada de swatches de color */
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 20px !important;
  
  /* Dimensiones y espaciado adaptativo */
  min-width: 64px !important;
  padding: 8px 18px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Tipografía limpia */
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0px !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  
  /* Colores del estado NO seleccionado */
  background-color: #FFFFFF !important;
  color: #222222 !important;
  border: 1px solid #E2E8F0 !important;
  
  /* Transición suave */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  margin: 4px !important;
}

/* 2. EFECTO AL PASAR EL MOUSE (HOVER) */
.product-form__input label:hover,
fieldset.product-form__input input[type="radio"] + label:hover,
.variant-input input[type="radio"] + label:hover {
  background-color: #FFF5F7 !important;
  color: #111111 !important;
  border-color: #FBCFE8 !important;
}

/* 3. ESTADO SELECCIONADO (ACTIVO) */
.product-form__input input[type="radio"]:checked + label,
fieldset.product-form__input input[type="radio"]:checked + label,
.variant-input input[type="radio"]:checked + label,
.variant-picker__option-values input[type="radio"]:checked + label {
  background-color: #FCE8EE !important;
  color: #111111 !important;
  border-color: #F472B6 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* 4. ESTADO DESACTIVADO / SIN STOCK (OUT OF STOCK) */
.product-form__input input[type="radio"]:disabled + label,
fieldset.product-form__input input[type="radio"]:disabled + label,
.product-form__input label.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* 5. ELIMINAR CUALQUIER RECORTE O OVERFLOW EN EL CONTENEDOR */
.product-form__input,
fieldset.product-form__input,
.variant-input-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}

/* ==========================================================================
   6. MEJORA DEL SELECTOR DE CANTIDAD (-  1  +)
   Transforma la caja rígida de "Cantidad" en un selector suave con botones +/-
   ========================================================================== */
.quantity,
.quantity-input,
.product-form__quantity,
.product-form__input--quantity,
div[data-quantity-input-wrapper] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 4px 8px !important;
  min-height: 42px !important;
  width: 130px !important;
  box-sizing: border-box !important;
}

.quantity__button,
.quantity-button,
button[name="minus"],
button[name="plus"],
.quantity__button--minus,
.quantity__button--plus {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  border: none !important;
  color: #222222 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

.quantity__button:hover,
.quantity-button:hover,
button[name="minus"]:hover,
button[name="plus"]:hover {
  background-color: #FFF5F7 !important;
  color: #111111 !important;
}

.quantity__input,
.quantity-input input,
input[name="quantity"] {
  width: 38px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #222222 !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
}

/* Ocultar flechas por defecto de HTML input number */
input[name="quantity"]::-webkit-outer-spin-button,
input[name="quantity"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

{% comment %}
  =============================================================================
  PIE DE PÁGINA MAYORISTA CORPORATIVO - WHOLESALEMAYOREO B2B
  - Fondo blanco limpio (#FFFFFF) con borde superior sutil
  - Logotipo oficial wholesalemayoreo (ícono wm terracota + B2B WHOLESALE)
  - Información fiscal y corporativa a la derecha (Razón Social, RFC, Dirección México)
  - Menú horizontal centrado con separadores: Nosotros | ¿Por Qué WholesaleMayoreo? | FAQ Mayoreo
  - Copyright y correo oficial: contacto@wholesalemayoreo.com
  
  CÓMO USARLO EN SHOPIFY:
  Opción 1 (Recomendada): Agrega una sección "Liquid personalizado" (Custom Liquid)
  en Shopify > Temas > Personalizar, colócala al final de la página y pega este código.
  Opción 2: Reemplaza el contenido de sections/footer.liquid por este código.
  =============================================================================
{% endcomment %}

<footer class="wm-wholesale-footer">
  <div class="wm-footer-container">
    
    <!-- FILA SUPERIOR: Logo B2B + Datos Fiscales Corporativos -->
    <div class="wm-footer-top">
      
      <!-- LOGO B2B WHOLESALEMAYOREO (ÍCONO WM + TEXTO) -->
      <div class="wm-footer-brand">
        <a href="/" class="wm-footer-logo-link">
          <div class="wm-footer-logo-box">
            <div class="wm-badge-squircle">
              <span class="wm-badge-letters">wm</span>
            </div>
            <div class="wm-logo-text-group">
              <span class="wm-logo-brandname">wholesalemayoreo</span>
              <span class="wm-logo-subtag">B2B WHOLESALE</span>
            </div>
          </div>
        </a>
      </div>

      <!-- DATOS LEGALES Y CORPORATIVOS EN MÉXICO -->
      <div class="wm-footer-corporate">
        <p class="wm-corporate-line">
          <strong>WHOLESALEMAYOREO MÉXICO S.A. DE C.V.</strong>
          <span class="wm-sep">|</span>
          <span>RFC: WME230915K89</span>
          <span class="wm-sep">|</span>
          <span>Licencia Mayorista B2B No. 214-87-03359</span>
        </p>
        <p class="wm-corporate-line wm-corporate-address">
          <span>Insurgentes Sur #1602, Crédito Constructor, Benito Juárez, Ciudad de México, CP 03940, México</span>
        </p>
      </div>

    </div>

    <!-- FILA INFERIOR: Enlaces Centrados + Copyright -->
    <div class="wm-footer-bottom">
      
      <!-- ENLACES CON SEPARADORES | -->
      <nav class="wm-footer-nav" aria-label="Enlaces de pie de página">
        <a href="/pages/nosotros" class="wm-nav-link">About US</a>
        <span class="wm-pipe">|</span>
        <a href="/#por-que-elegirnos" class="wm-nav-link">Why WholesaleMayoreo?</a>
        <span class="wm-pipe">|</span>
        <a href="/pages/faq-mayoreo" class="wm-nav-link">FAQ Mayoreo</a>
        <span class="wm-pipe">|</span>
        <a href="/pages/terminos-y-condiciones" class="wm-nav-link">Términos y Condiciones</a>
        <span class="wm-pipe">|</span>
        <a href="/pages/contacto" class="wm-nav-link">Contacto</a>
      </nav>

      <!-- COPYRIGHT Y CORREO OFICIAL -->
      <div class="wm-footer-copyright">
        <span>Copyright © {{ 'now' | date: "%Y" }} WholesaleMayoreo.com All Rights Reserved.</span>
        <a href="mailto:contacto@wholesalemayoreo.com" class="wm-footer-email">contacto@wholesalemayoreo.com</a>
      </div>

    </div>

  </div>
</footer>

<style>
  /* ==========================================================================
     ESTILOS DEL PIE DE PÁGINA MAYORISTA - WHOLESALEMAYOREO B2B
     ========================================================================== */
  .wm-wholesale-footer {
    background-color: #ffffff !important;
    color: #4b5563 !important;
    border-top: 1px solid #e5e7eb;
    padding: 48px 16px 40px 16px;
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .wm-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
  }

  /* Fila superior: Logo y Datos Legales */
  .wm-footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 32px;
    text-align: center;
  }

  @media screen and (min-width: 860px) {
    .wm-footer-top {
      flex-direction: row;
      align-items: center;
      text-align: left;
      gap: 36px;
    }
  }

  /* Logotipo B2B wholesalemayoreo */
  .wm-footer-brand {
    flex-shrink: 0;
  }

  .wm-footer-logo-link {
    display: inline-flex;
    text-decoration: none !important;
  }

  .wm-footer-logo-box {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Ícono squircle wm terracota (#DE5E4E) */
  .wm-badge-squircle {
    width: 44px;
    height: 44px;
    background-color: #DE5E4E;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(222, 94, 78, 0.25);
  }

  .wm-badge-letters {
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .wm-logo-text-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.15;
  }

  .wm-logo-brandname {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111827;
    text-transform: lowercase;
  }

  .wm-logo-subtag {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.08em;
    color: #DE5E4E;
    text-transform: uppercase;
    margin-top: 2px;
  }

  /* Información Corporativa B2B */
  .wm-footer-corporate {
    flex: 1;
    max-width: 780px;
  }

  .wm-corporate-line {
    margin: 0 0 6px 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #4b5563;
  }

  .wm-corporate-line strong {
    color: #111827;
    font-weight: 700;
  }

  .wm-corporate-address {
    color: #6b7280;
    font-size: 12px;
  }

  .wm-sep {
    margin: 0 8px;
    color: #d1d5db;
    font-weight: 300;
  }

  /* Fila inferior: Menú Centrado & Copyright */
  .wm-footer-bottom {
    border-top: 1px solid #f3f4f6;
    padding-top: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Navegación horizontal con pipes | */
  .wm-footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    margin: 0;
    padding: 0;
  }

  .wm-nav-link {
    font-size: 13.5px;
    font-weight: 500;
    color: #374151 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
  }

  .wm-nav-link:hover {
    color: #DE5E4E !important;
    text-decoration: underline !important;
  }

  .wm-pipe {
    color: #9ca3af;
    font-size: 13px;
    user-select: none;
  }

  /* Copyright */
  .wm-footer-copyright {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.5;
  }

  .wm-footer-email {
    color: #4b5563 !important;
    text-decoration: none !important;
    font-weight: 500;
    margin-left: 2px;
  }

  .wm-footer-email:hover {
    color: #DE5E4E !important;
    text-decoration: underline !important;
  }
</style>

/* ==========================================================================
   CAMBIO GLOBAL DE COLOR PARA ACORDEONES MAYOREO B2B (#ffdcc3)
   ========================================================================== */
html body .custom-section-skincare .accordion-btn,
html body .product__description .accordion-btn,
html body .product-single__description .accordion-btn,
html body button.accordion-btn,
html body div.accordion-btn,
html body .accordion-btn {
  background-color: #ffdcc3 !important;
  background: #ffdcc3 !important;
  color: #000000 !important;
  border-bottom: 1px solid #e6caaf !important;
  font-weight: bold !important;
}

/* Evita que cambie de color al pasar el mouse o al abrirse */
html body .custom-section-skincare .accordion-btn:hover,
html body .custom-section-skincare .accordion-btn.active,
html body .accordion-btn:hover,
html body .accordion-btn.active,
html body .accordion-btn:focus {
  background-color: #ffdcc3 !important;
  background: #ffdcc3 !important;
  color: #000000 !important;
}

/* Flechas color Coral Mayoreo */
html body .accordion-btn .arrow-icon,
html body .arrow-icon {
  color: #e95a4a !important;
}
/* 1. Fondo blanco para filtros, cabeceras y ordenar */
.facets__header,
.facets__display,
.facet-filters,
.facet-filters__sort {
  background: #fff !important;
  color: #111 !important;
  border-color: #e5e7eb !important;
}

/* 2. Textos en negro para las flechas (Availability, Price) y opciones */
summary,
.facets__summary,
.facets__summary span,
select,
option {
  color: #111 !important;
}
.facet-filters__field,
.facet-filters__sort,
.facet-filters__sort:focus {
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: #d1d5db !important;
}
/* Números de paginación visibles en color naranja */
.pagination__list a,
.pagination__item,
.pagination__item--current {
  color: #d9534f !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}
/* ==========================================================================
   CARRITO LATERAL (DRAWER) MAYOREO - BRABI BEAUTY B2B
   ========================================================================== */

/* 1. Fondo blanco puro y dimensiones del panel lateral */
.drawer,
.cart-drawer {
  width: 520px !important;
  max-width: 100vw !important;
  background-color: #ffffff !important;
}

.drawer__inner,
.cart-drawer__inner {
  background-color: #ffffff !important;
  padding: 30px 24px !important;
}

/* 2. Encabezado del carrito (Tu Carrito Está Vacío) */
.drawer__heading,
.cart-drawer__heading,
.cart__empty-text {
  font-family: 'Codec_Pro_Bold', sans-serif !important;
  font-weight: 700 !important;
  font-size: 2.4rem !important;
  color: #000000 !important;
  text-align: center !important;
  margin-bottom: 24px !important;
  text-transform: capitalize !important;
}

/* 3. Botón "seguir comprando" / "continuar comprando" (Píldora negra con tipografía Codec) */
.cart__empty-render .button,
.cart__checkout-button,
.cart-drawer .button--full-width,
.cart-drawer .cart__checkout-button,
#CartDrawer-Checkout,
.cart-drawer a.button {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: 'Codec_Pro_Bold', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  border-radius: 50px !important;
  text-transform: lowercase !important;
  padding: 12px 35px !important;
  height: 48px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 15px auto !important;
}

.cart__empty-render .button::first-letter,
.cart-drawer a.button::first-letter {
  text-transform: uppercase !important;
}

/* 4. Bloque "¿Tienes una cuenta? Inicia sesión" */
.cart-b2b-login-prompt,
.cart-drawer__login-box {
  margin-top: 40px !important;
  text-align: center !important;
  border-top: 1px solid #f0f0f0 !important;
  padding-top: 25px !important;
}

.cart-b2b-login-prompt h3 {
  font-family: 'Codec_Pro_Bold', sans-serif !important;
  font-size: 1.7rem !important;
  color: #000000 !important;
  margin-bottom: 8px !important;
}

.cart-b2b-login-prompt p {
  font-family: 'CodecPro-Regular', sans-serif !important;
  font-size: 1.3rem !important;
  color: #555555 !important;
  line-height: 1.4 !important;
}

.cart-b2b-login-prompt a {
  color: #000000 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* 5. Cruz "X" de cerrar carrito limpia */
.drawer__close,
.cart-drawer .drawer__close {
  color: #000000 !important;
  top: 20px !important;
  right: 20px !important;
}

.drawer__close svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.5px !important;
}