/** Shopify CDN: Minification failed

Line 4940:27 Expected ":"
Line 10854:0 Unexpected "}"

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

html[scroll-lock] {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

input:hover {
  background-color: var(--color-input-hover-background);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.resource-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  will-change: transform, box-shadow;
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

.product-card__content slideshow-component {
  --cursor: pointer;
}

/* ===============================
   PRODUCT LIST (solo esta sección)
   =============================== */
.ui-test-product-list .product-card__content{
  --product-card-gap: 0px;
}

/* 1) Título */
.ui-test-product-list [class*="__product_title_cb7GMf"] p{
  font-weight: 700;
  margin: 0;
  padding-top: 10px;
}

/* 2) Descripción */
.ui-test-product-list [class*="__text_4DFkRX"] p{
  color: #000 !important;
  margin: 0;
  padding-top: 20px;
}

/* =================================================
   3) ESTRELLAS — respeta rating real (review.liquid)
   ================================================= */
.ui-test-product-list .rating-wrapper{
  /* variables usadas por el snippet review.liquid */
  --star-fill-color: #c79859;
  --star-fill-color-rgb: 199 152 89;

  padding-bottom: 15px;
  margin-top: 2px;
  margin-bottom: 6px;
}

/* SOLO las estrellas llenas */
.ui-test-product-list .rating-wrapper .filled-star{
  fill: var(--star-fill-color) !important;
}

/* Si el estilo es outline, el borde usa stroke */
.ui-test-product-list .rating-wrapper .stars use[stroke]{
  stroke: var(--star-fill-color) !important;
}

/* (Opcional) si quieres que las vacías queden un poco más suaves */
.ui-test-product-list .rating-wrapper .stars{
  /* no forzamos fill aquí, solo controlamos opacidad visual si aplica */
  opacity: 1;
}

/* 4) Ajustes de espaciado */
.ui-test-product-list [class*="__product_title_cb7GMf"]{
  --padding-block-start: 6px !important;
  --padding-block-end: 2px !important;
}

.ui-test-product-list [class*="__text_4DFkRX"]{
  --padding-block-start: 0px !important;
  --padding-block-end: 4px !important;
}

/* precio */
.ui-test-product-list product-price{
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
}

/* ===============================
   FIN PRODUCT LIST
   =============================== */


/* =============================
   PRODUCT CARD - MÁS INFO
   ============================= */
.product-card__more-info {
  color: #cc977f;
  font-weight: 600;
  text-align: center;
  margin-top: 0;
  letter-spacing: 0.02em;
  pointer-events: none;
}

 

.predictive-search-results__card .product-card,
.predictive-search-results__card .collection-card,
.predictive-search-results__card .resource-card {
  transition: none;
  will-change: auto;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift .resource-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-lift .header .product-card:hover,
  .card-hover-effect-lift .header .collection-card:hover,
  .card-hover-effect-lift .header .resource-card:hover,
  .card-hover-effect-lift .header-drawer .product-card:hover,
  .card-hover-effect-lift .header-drawer .collection-card:hover,
  .card-hover-effect-lift .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-scale .product-card:hover,
  .card-hover-effect-scale .collection-card:hover,
  .card-hover-effect-scale .resource-card:hover,
  .card-hover-effect-scale .predictive-search-results__card:hover {
    transform: scale(var(--hover-scale-amount));
  }

  .card-hover-effect-scale .header .product-card:hover,
  .card-hover-effect-scale .header .collection-card:hover,
  .card-hover-effect-scale .header .resource-card:hover,
  .card-hover-effect-scale .header-drawer .product-card:hover,
  .card-hover-effect-scale .header-drawer .collection-card:hover,
  .card-hover-effect-scale .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-subtle-zoom .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card__image {
    overflow: hidden;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .predictive-search-results__card .card-gallery,
  .predictive-search-results__card .collection-card__image,
  .predictive-search-results__card .product-card__image,
  .predictive-search-results__card .resource-card__image {
    transition: none;
  }

  .card-hover-effect-subtle-zoom .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }

  .card-hover-effect-subtle-zoom .header .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header-drawer .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .resource-card:hover .resource-card__image {
    transform: none;
  }

  .predictive-search-results__card .product-card:hover,
  .predictive-search-results__card .collection-card:hover,
  .predictive-search-results__card .resource-card:hover,
  .header .product-card:hover,
  .header .collection-card:hover,
  .header .resource-card:hover,
  .header-drawer .product-card:hover,
  .header-drawer .collection-card:hover,
  .header-drawer .resource-card:hover {
    transform: none;
    box-shadow: none;
  }
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
}

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow,
.page-width-content {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), calc(100% - (var(--page-margin) * 2)))) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart__summary-container) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

@media screen and (max-width: 749px) {
  .is-visually-hidden-mobile:not(:focus, :active) {
    /* stylelint-disable-next-line declaration-no-important */
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    /* stylelint-disable-next-line declaration-no-important */
    word-wrap: normal !important;
  }
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.flip-x {
  scale: -1 1;
}

.flip-y {
  scale: 1 -1;
}

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

.skip-to-content-link {
  position: absolute;
  overflow: hidden;
  height: 1px;
  left: -99999px;
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.skip-to-content-link:focus {
  z-index: var(--layer-temporary);
  overflow: auto;
  width: auto;
  height: auto;
  padding: var(--padding-lg) var(--padding-4xl);
  left: var(--margin-lg);
  top: var(--margin-lg);
  background-color: var(--color-background);
  box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}

.text-left {
  --text-align: left;

  text-align: left;
}

.text-center {
  --text-align: center;

  text-align: center;
}

.text-right {
  --text-align: right;

  text-align: right;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

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

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

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

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

placeholder-image {
  display: block;
  height: 100%;
  aspect-ratio: var(--ratio);
}

placeholder-image[data-type='product'] {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
  width: 100%;
}

/** Placeholder background for the placeholder image, the dimensions are the same as the product images */
placeholder-image[data-type='product']:not(:has(> img)) {
  aspect-ratio: var(--ratio);
  height: 350px;
}

placeholder-image > img {
  object-fit: cover;
  aspect-ratio: var(--ratio);
  height: 100%;
}

[data-placeholder='true'] * {
  cursor: default;
}

slideshow-component [data-placeholder='true'] * {
  cursor: grab;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > * {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > * {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color, var(--font-h1-color));
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > * {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color, var(--font-h2-color));
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > * {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color, var(--font-h3-color));
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > * {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color, var(--font-h4-color));
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > * {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color, var(--font-h5-color));
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > * {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color, var(--font-h6-color));
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  --button-color: var(--color, var(--color-primary));

  color: var(--button-color);
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  --button-color: var(--color, var(--color-primary-hover));
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-primary, .button-secondary)),
.rte
  :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6)
  a:where(:not(.button, .button-primary, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: transparent;
    color: var(--color-primary-hover);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary .icon-animated > svg {
  transform: rotate(180deg);
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: calc(var(--header-group-height) * -1);
}

body:has(.header[transparent]) #header-group > .header-section {
  z-index: var(--layer-sticky);
}

/* All other header group content should be beneath the floating header,
but above the rest of the page content */
body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: calc(var(--layer-sticky) - 1);
}

/* Featured collection block */
.featured-collection-block {
  width: 100%;
}

/* Product grid */
.product-grid-container {
  display: block;
  width: 100%;
  padding-block: var(--padding-block-start) var(--padding-block-end);

  @media screen and (min-width: 750px) {
    display: grid;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--product-grid-gap);
  margin: auto;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .product-grid {
    grid-template-columns: var(--product-grid-columns-desktop);
  }
}

.product-grid :is(h3, p) {
  margin: 0;
}

.product-grid__item {
  border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
}

.product-grid--organic[product-grid-view='default'] .product-grid__item {
  height: fit-content;
}

.product-grid__card.product-grid__card {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--product-card-gap);
  align-items: var(--product-card-alignment);
  text-decoration: none;
  color: var(--color, var(--color-foreground));
  padding-block: var(--padding-block-start) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  overflow: hidden;
}

[product-grid-view='zoom-out'] .product-grid__card {
  row-gap: var(--padding-xs);
}

[product-grid-view='default'] {
  --product-grid-gap: 16px;
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

[product-grid-view='default'] .product-grid__item {
  padding-block: 0;
}

[product-grid-view='mobile-single'],
.product-grid-mobile--large {
  @media screen and (max-width: 749px) {
    grid-template-columns: 1fr;
  }
}

.product-grid__card .group-block > * {
  @media screen and (max-width: 749px) {
    flex-direction: column;
  }
}

ul[product-grid-view='zoom-out'] .product-grid__card > * {
  display: none;
}

ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
  display: block;
}

[product-grid-view='zoom-out']
  .card-gallery
  > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
  display: none;
}

ul[product-grid-view='zoom-out'] .card-gallery > img {
  display: block;
}

[product-grid-view='zoom-out'] {
  --product-grid-columns-desktop: repeat(
    10,
    minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
  );
}

.product-grid-view-zoom-out--details {
  display: none;
}

.product-grid-view-zoom-out--details .h4,
.product-grid-view-zoom-out--details span,
.product-grid-view-zoom-out--details s {
  font-size: var(--font-size--xs);
  font-family: var(--font-paragraph--family);
}

.product-grid-view-zoom-out--details span {
  font-weight: 500;
}

.product-grid-view-zoom-out--details .h4 {
  line-height: 1.3;
  font-weight: 400;
}

.product-grid-view-zoom-out--details > span.h6,
.product-grid-view-zoom-out--details > div.h6 > product-price {
  display: inline-block;
  line-height: 0;
  margin-top: var(--margin-2xs);
}

.product-grid-view-zoom-out--details > span.h6 > *,
.product-grid-view-zoom-out--details > div.h6 > * > * {
  line-height: 1.2;
}

@media (prefers-reduced-motion: no-preference) {
  :root:active-view-transition-type(product-grid) {
    details[open] floating-panel-component {
      view-transition-name: panel-content;

      .checkbox *,
      .facets__pill-label {
        transition: none;
      }

      .facets--vertical & {
        view-transition-name: none;
      }
    }

    .product-grid {
      view-transition-name: product-grid;
    }

    footer {
      view-transition-name: footer;
    }

    .product-grid__item,
    floating-panel-component {
      transition: none;
    }
  }
}

::view-transition-group(panel-content) {
  z-index: 1;
}

::view-transition-new(product-grid) {
  animation-delay: 150ms;
  animation-name: fadeInUp;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
}

results-list[initialized] {
  .product-grid__item {
    transition: opacity var(--animation-speed) var(--animation-easing),
      transform var(--animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Collection and product list cards have equal heights */
:is(.product-grid__item, .resource-list__item) .product-card {
  display: grid;
  height: 100%;
}

/* Video background */
.video-background,
.video-background * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-background--cover * {
  object-fit: cover;
}

.video-background--contain * {
  object-fit: contain;
}

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
.text-block > style + * {
  margin-block-start: 0;
}

/* Dialog */
.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);

  @media screen and (min-width: 750px) {
    border-radius: var(--style-border-radius-popover);
    max-width: var(--normal-content-width);
  }

  @media screen and (max-width: 749px) {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100dvw;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  backdrop-filter: brightness(1);
  background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
}

.dialog-modal[open] {
  animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    opacity: 0;
  }
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: slideInLeft;
  --dialog-drawer-closing-animation: slideOutLeft;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: slideInRight;
  --dialog-drawer-closing-animation: slideOutRight;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer.dialog-closing {
  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

/* Buttons */
.button,
.button-secondary,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-background-color);
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: var(--color-input-text);
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

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

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: inherit;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Show more */

.show-more__button {
  color: var(--color-primary);
  cursor: pointer;
}

.show-more__button:hover {
  @media screen and (min-width: 750px) {
    color: var(--color-primary-hover);
  }
}

.show-more__label {
  text-align: start;
  font-size: var(--font-size--body-md);
  font-family: var(--font-paragraph--family);
}

.show-more__button .svg-wrapper {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.show-more[data-expanded='true'] .show-more__label--more,
.show-more[data-expanded='false'] .show-more__label--less {
  display: none;
}

.link {
  display: inline-block;
  text-align: center;
}

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

.product-form-buttons:has(.add-to-cart-button.button-secondary)
  :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

/* Collapsible row */

.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: var(--color-primary-hover);
}

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
  transition: transform var(--animation-speed) var(--animation-easing);
}

/* Shared plus/minus icon animations */
summary .icon-plus :is(.horizontal, .vertical),
.show-more__button .icon-plus :is(.horizontal, .vertical) {
  transition: transform var(--animation-speed) var(--animation-easing);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary .icon-plus .horizontal,
.details-open > summary .icon-plus .horizontal,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical,
.details-open > summary .icon-plus .vertical,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Product Media */
media-gallery {
  display: block;
  width: 100%;
}

:where(media-gallery, .product-grid__item) {
  .media-gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--image-gap);
  }
}

.product-media-gallery__slideshow--single-media slideshow-container {
  @media screen and (max-width: 749px) {
    grid-area: unset;
  }
}

:not(.dialog-zoomed-gallery) > .product-media-container {
  /* width and overflow forces children to shrink to parent width */
  --slide-width: round(up, 100%, 1px);

  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: 100%;

  /* Relative position needed for video and 3d models */
  position: relative;
  overflow: hidden;

  &:where(.constrain-height) {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: 300px;
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    margin-right: auto;
    margin-left: auto;
  }
}

media-gallery:where(.media-gallery--grid) .media-gallery__grid {
  display: none;
}

media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
  /* Needed for safari to stretch to full grid height */
  height: 100%;
}

.product-media :is(deferred-media, product-model) {
  position: absolute;
}

@media screen and (max-width: 749px) {
  .product-media-container.constrain-height {
    max-height: none;
  }
}

@media screen and (min-width: 750px) {
  .product-media-container.constrain-height {
    --viewport-offset: var(--header-height, 100px);
    --constrained-min-height: 500px;
  }

  body:has(header-component[transparent]) .product-media-container.constrain-height {
    --viewport-offset: 0px;
  }

  .media-gallery--two-column .media-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-gallery--large-first-image .product-media-container:first-child,
  .media-gallery--two-column .product-media-container:only-child {
    /* First child spans 2 columns */
    grid-column: span 2;
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    display: none;
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: grid;
  }
}

.product-media-container--model {
  /* Usefull when view in your space is shown */
  flex-direction: column;
}

.shopify-model-viewer-ui__controls-area {
  bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
}

.product-media-container img {
  aspect-ratio: inherit;
  object-fit: contain;
}

.product-media-container.media-fit-contain img {
  object-position: center center;
}

.product-media-container.media-fit {
  --product-media-fit: cover;

  img {
    object-fit: var(--product-media-fit);
  }
}

/* Media gallery zoom dialog */
.product-media-container__zoom-button {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: var(--layer-flat);
  cursor: zoom-in;
  background-color: transparent;

  &:hover {
    background-color: transparent;
  }
}

zoom-dialog dialog {
  width: 100vw;
  height: 100vh;
  border: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
  scrollbar-width: none;

  &[open] {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  &::backdrop {
    background: transparent;
  }
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.dialog-thumbnails-list-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  z-index: var(--layer-raised);
}

.dialog-thumbnails-list {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  bottom: 0;
  overflow-x: auto;
  opacity: 0;
  padding: var(--padding-lg);
  margin-inline: auto;
  scrollbar-width: none;
  animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
  animation-delay: calc(var(--animation-speed) * 1.5);
}

.dialog--closed .dialog-thumbnails-list {
  animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
}

@media screen and (min-width: 750px) {
  .dialog-thumbnails-list {
    position: fixed;
    flex-direction: column;
    inset: 50% var(--margin-lg) auto auto;
    right: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    animation: thumbnailsSlideInTop calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 2);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }
}

.dialog-thumbnails-list__thumbnail {
  width: var(--thumbnail-width);
  height: auto;
  transition: transform var(--animation-speed) var(--animation-easing);
  flex-shrink: 0;
  border-radius: var(--media-radius);

  img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--media-radius);
    aspect-ratio: var(--aspect-ratio);
  }

  &:is([aria-selected='true']) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
    border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
  }
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

/* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
.product-media__image ~ * .deferred-media__poster-image {
  display: none;
}

/* If the product media is playing, hide the preview image */
.product-media-container:has(.deferred-media__playing) .product-media__image {
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
}

/* Deferred media & Product model  */
:is(product-model, deferred-media) {
  /* Height needed to make sure when it's set to be stretched, it takes the full height */
  height: 100%;
  width: 100%;
  position: relative;
}

product-model model-viewer,
/* Media that have a poster button sibling providing the size should be absolute-positioned.
Otherwise, it should be a block to rely on its own size */
:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Required to make sure the absolute position respects the padding of the wrapper: */
  padding: inherit;
}

slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  bottom: var(--padding-sm);
  right: var(--padding-sm);
}

.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
  bottom: calc(var(--thumbnail-width) / calc(var(--media-preview-ratio)) + var(--padding-lg) * 2);
  right: var(--padding-lg);
}

@media screen and (max-width: 749px) {
  slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }
}

@media screen and (min-width: 750px) {
  slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls up to match the padding on the thumbnails */
    bottom: var(--padding-lg);

    /* Move the controls to the left of the thumbnails list on the right */
    right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
  }
}

:is(deferred-media, .video-placeholder-wrapper).border-style {
  /* Apply the border radius to the video */
  overflow: hidden;
}

deferred-media {
  /* The overflow hidden in the deferred-media won't let the button show the focus ring */
  &:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  @supports not selector(:focus-visible) {
    &:has(:focus) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }
}

.deferred-media__poster-button {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--video-aspect-ratio, auto);
}

.deferred-media__poster-button.deferred-media__playing {
  opacity: 0;
  transition: opacity 0.3s ease;
}

deferred-media img {
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

deferred-media iframe {
  width: 100%;
  height: 100%;
  border: none;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

deferred-media[data-media-loaded] img {
  opacity: 0;
}

.deferred-media__poster-icon,
.video-placeholder-wrapper__poster-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deferred-media__poster-icon svg,
.video-placeholder-wrapper__poster-icon svg {
  width: var(--button-size);
  height: var(--button-size);
  color: var(--color-white);
  filter: drop-shadow(var(--shadow-button));

  &:hover {
    color: rgb(var(--color-white-rgb) / var(--opacity-80));
  }

  @media screen and (min-width: 750px) {
    width: 4rem;
    height: 4rem;
  }
}

deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
  /* only apply this on the video block not product media */
  object-fit: cover;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

.button-shopify-xr {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding-md);
}

.button-shopify-xr > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  fill: currentcolor;
  margin-inline-end: var(--margin-md);
}

.button-shopify-xr[data-shopify-xr-hidden] {
  display: none;
}

/* Swatches */
.swatch {
  --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
  --min-width-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height: 16px;
  --min-width: 16px;

  /* mobile values */
  --scaling-factor: 0.5;
  --max-swatch-size: 28px;
  --max-pill-size: 20px;
  --max-filter-size: 32px;

  /* From the settings */
  --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
  --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

  /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
  --offset-scaled-width: calc(
    var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
  );
  --offset-scaled-height: calc(
    var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
  );
  --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

  /* width = min(m + sU, (m + s * W'/H' * M'), M) */
  --swatch-width: min(
    calc(var(--min-width) + calc(var(--scaling-factor) * var(--offset-swatch-width) * 1px)),
    calc(var(--min-width) + var(--offset-scaled-width)),
    var(--max-swatch-size)
  );

  /* height = min(m + sV, (m + s * H'/W' * M'), M) */
  --swatch-height: min(
    calc(var(--min-height) + calc(var(--scaling-factor) * var(--offset-swatch-height) * 1px)),
    calc(var(--min-height) + var(--offset-scaled-height)),
    var(--max-swatch-size)
  );

  display: block;
  background: var(--swatch-background);
  background-position: var(--swatch-focal-point, center);
  border-radius: var(--variant-picker-swatch-radius);
  border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
  width: var(--swatch-width);
  height: var(--swatch-height);

  /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
  background-size: var(--swatch-width) var(--swatch-height);

  &.swatch--unavailable {
    border-style: dashed;
  }

  &.swatch--unscaled {
    /* for when you want fixed sizing (e.g. pdp) */
    --swatch-width: var(--variant-picker-swatch-width);
    --swatch-height: var(--variant-picker-swatch-height);
  }

  &.swatch--filter {
    --swatch-width: var(--max-filter-size);
    --swatch-height: var(--max-filter-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  &.swatch--pill {
    --swatch-width: var(--max-pill-size);
    --swatch-height: var(--max-pill-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  /* swatches in filters and pills always have a border  */
  &.swatch--filter,
  &.swatch--pill {
    --style-border-swatch-width: var(--variant-picker-border-width);
    --style-border-swatch-style: var(--variant-picker-border-style);
    --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
  }

  @media screen and (min-width: 750px) {
    /* desktop values */
    --max-swatch-size: 32px;
    --max-pill-size: 16px;
    --max-filter-size: 28px;
    --scaling-factor: 0.65;
  }
}

.variant-picker .variant-option--buttons label:has(.swatch) {
  border-radius: var(--variant-picker-swatch-radius);
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

.price,
.compare-at-price,
.unit-price {
  white-space: nowrap;
}

.unit-price {
  display: block;
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

.tax-note.tax-note.tax-note {
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
  margin-block: 0;
}

.compare-at-price {
  opacity: 0.4;
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
}

.card-gallery {
  position: relative;
}

/* ============================= */
/* BOTÓN "COMPRA AHORA" EN 1 LÍNEA */
/* ============================= */

/* Evita salto de línea en el texto del botón */
.quick-add__button .add-to-cart-text,
.quick-add__button .add-to-cart-text__content,
add-to-cart-component .add-to-cart-text,
add-to-cart-component .add-to-cart-text__content {
  white-space: nowrap !important;
}

/* Ajusta el tamaño para que quepa en una línea */
.quick-add__button .add-to-cart-text__content,
add-to-cart-component .add-to-cart-text__content {
  font-size: 12px !important; /* prueba 11px si aún se parte */
  letter-spacing: 0.5px;
  font-weight: 500 !important;
}

/* Dale un poco más de ancho útil al botón (sin exagerar) */
.quick-add__button,
add-to-cart-component button.button {
  padding-inline: 18px !important;
  min-width: 150px; /* sube a 160px si aún se parte */
}

/* (Opcional) si el ícono está empujando el texto, reduce el gap */
.quick-add__button .add-to-cart-text,
add-to-cart-component .add-to-cart-text {
  gap: 8px !important;
}

/* ============================= */
/* FIN BOTÓN "COMPRA AHORA" EN 1 LÍNEA */
/* ============================= */

@media screen and (min-width: 750px) {
  product-card:focus-within .quick-add__button,
  .card-gallery:hover .quick-add__button {
    display: grid;
    will-change: margin, opacity;
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
  }
}

@container (max-width: 70px) {
  .card-gallery:hover .quick-add__button {
    display: none;
  }
}

/* Drawer */
.drawer {
  background-color: var(--color-background);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: var(--layer-raised);
  transform: translateX(-120%);
  transition: transform var(--animation-speed) var(--animation-easing);
}

.drawer[data-open='true'] {
  transform: translateX(0);
}

.drawer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--drawer-header-block-padding) var(--drawer-inline-padding);
}

.drawer__title {
  font-size: var(--font-h2--size);
  margin: 0;
}

.drawer__close {
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
}

.drawer__content {
  display: block;
  padding: var(--drawer-content-block-padding) var(--drawer-inline-padding);
  width: 100%;
}

/* Background overlay */
.background-overlay {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-overlay-color, rgb(0 0 0 / 15%));
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);
}

.spacing-style,
.inherit-spacing {
  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }
  }
}

@media (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:is(:focus, :hover) {
  box-shadow: var(--input-box-shadow-focus);
  background-color: var(--color-input-hover-background);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) clamp(1rem, 1em * 0.25, 2rem);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

.checkbox {
  --checkbox-size: 22px;
  --checkbox-top: 50%;
  --checkbox-left: 1.5px;
  --checkbox-offset: 3px;
  --checkbox-border-radius: 7px;
  --checkbox-label-padding: 8px;
  --checkbox-path-opacity: 0;
  --checkbox-cursor: pointer;
  --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

  position: relative;
  display: flex;
  align-items: center;

  @media screen and (min-width: 750px) {
    --checkbox-size: 16px;
    --checkbox-border-radius: 5px;
    --checkbox-label-padding: 6px;
  }

  &:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  &:has(.checkbox__input:disabled) {
    --checkbox-cursor: not-allowed;
  }
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);

  /* Outline is on the SVG instead, to allow it to have border-radius */
  &:focus-visible {
    outline: none;
  }

  &:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  &:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  &:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }
}

.checkbox__label {
  position: relative;
  display: inline-flex;
  cursor: var(--checkbox-cursor);
  line-height: var(--checkbox-size);
  min-width: var(--minimum-touch-target);
}

.checkbox .icon-checkmark {
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  flex-shrink: 0;
  border: var(--checkbox-border);
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
}

.checkbox__label-text {
  padding-inline-start: var(--checkbox-label-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox .icon-checkmark path {
  stroke: var(--color-background);
  opacity: var(--checkbox-path-opacity);
  transition: opacity var(--animation-speed) var(--animation-easing);
}

.checkbox__input:disabled + .checkbox__label {
  color: var(--input-disabled-text-color);
}

/* Add to cart button */
.button[id^='BuyButtons-ProductSubmitButton-'] {
  position: relative;
  overflow: hidden;
}

/* Cart bubble */
.cart-bubble {
  --cart-padding: 0.2em;

  position: relative;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  border-width: 0;
  display: flex;
  line-height: normal;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-button-text);
  padding-inline: var(--cart-padding);
}

.cart-bubble__background {
  position: absolute;
  inset: 0;
  background-color: #97b469;
  border-radius: var(--style-border-radius-lg);
}

.cart-bubble__text {
  font-size: var(--font-size--2xs);
  z-index: var(--layer-flat);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quantity selector */
.quantity-selector {
  --quantity-selector-width: 124px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: var(--style-border-width-inputs) solid var(--color-input-border);
  border-radius: var(--style-border-radius-inputs);
  flex: 1 1 var(--quantity-selector-width);
  align-self: stretch;
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    background-color: var(--color-input-hover-background);
  }
}

.product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
  border-radius: var(--style-border-radius-buttons-secondary);
}

.quantity-selector :is(.quantity-minus, .quantity-plus) {
  /* Unset button styles */
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  flex-shrink: 0;
  color: var(--color-input-text);
}

.quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-inputs);
  border-end-start-radius: var(--style-border-radius-inputs);
}

.quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-inputs);
  border-end-end-radius: var(--style-border-radius-inputs);
}

.product-details .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-buttons-primary);
  border-end-start-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-buttons-primary);
  border-end-end-radius: var(--style-border-radius-buttons-primary);
}

.quantity-selector .svg-wrapper {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.quantity-selector svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

:is(.quantity-minus, .quantity-plus):active .svg-wrapper {
  transform: scale(0.9);
}

.quantity-selector input[type='number'] {
  margin: 0;
  text-align: center;
  border: none;
  appearance: none;
  max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
  border-radius: var(--style-border-radius-buttons);
  color: var(--color-input-text);
  background-color: transparent;
}

/* Chrome, Safari, Edge, Opera */
.quantity-selector input[type='number']::-webkit-inner-spin-button,
.quantity-selector input[type='number']::-webkit-outer-spin-button {
  appearance: none;
}

/* Firefox */
.quantity-selector input[type='number'] {
  appearance: textfield;
}

/* Pills (used in facets and predictive search) */

.pills__pill {
  --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

  color: var(--color-foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  min-width: 48px;
  padding: 6px 12px;
  border-radius: var(--style-border-radius-pills);
  cursor: pointer;
  background-color: var(--pills-pill-background-color);
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  @media screen and (max-width: 749px) {
    padding: var(--padding-xs) var(--padding-md);
  }
}

.pills__pill > .svg-wrapper {
  --close-icon-opacity: 0.4;
  --icon-stroke-width: 1px;

  color: var(--color-foreground);
}

.pills__pill--swatch {
  @media screen and (max-width: 749px) {
    padding-inline-start: var(--padding-sm);
  }
}

.pills__pill--swatch .swatch {
  margin-right: -4px;
}

.pills__pill--desktop-small {
  @media screen and (min-width: 750px) {
    font-size: var(--font-size--xs);
  }
}

/* Fly to cart animation */
fly-to-cart {
  position: fixed;
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: calc(infinity);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
  transition: opacity 0.3s ease;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-foreground);
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--scale, 1));
}

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(var(--custom-transform-from, 100%));
  }

  to {
    transform: translateX(var(--custom-transform-to, 0));
  }
}

@keyframes slideInLeftViewTransition {
  from {
    transform: translateX(100px);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--custom-transform-to, -100%));
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slideInTop {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes slideOutBottom {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes slideInBottom {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideOutTop {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes cartBubbleSlideIn {
  from {
    transform: translateY(-1em);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

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

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

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

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

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

@keyframes dialogZoom {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(1em);
  }
}

@keyframes thumbnail-selected {
  0%,
  100% {
    box-shadow: 0 0 0 2px transparent;
    scale: 0.9;
  }

  50% {
    box-shadow: 0 0 0 2px #000;
    scale: 1;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

.bubble {
  display: inline-flex;
  height: calc(var(--variant-picker-swatch-height) / 1.5);
  font-size: var(--font-size--xs);
  border-radius: 20px;
  min-width: 20px;
  padding: 0 6px;
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  color: var(--color-foreground);
  align-items: center;
  justify-content: center;
}

.bubble svg {
  width: 12px;
  height: 12px;
}

.top-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .top-shadow--mobile::before {
    display: none;
  }
}

.bottom-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .bottom-shadow--mobile::before {
    display: none;
  }
}

.video-placeholder-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

:not(deferred-media) > .video-placeholder-wrapper {
  width: var(--video-placeholder-width);
}

.video-placeholder-wrapper > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Slideshow Component
 */
slideshow-component {
  --cursor: grab;

  position: relative;
  display: flex;
  flex-direction: column;
  timeline-scope: var(--slideshow-timeline);
}

.slideshow--single-media {
  --cursor: default;
}

a slideshow-component {
  --cursor: pointer;
}

/*
 * Slideshow Slides
 */
slideshow-slides {
  width: 100%;
  position: relative;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  gap: var(--slideshow-gap, 0);
  cursor: var(--cursor);

  @media (prefers-reduced-motion) {
    scroll-behavior: auto;
  }

  &::-webkit-scrollbar {
    width: 0;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
  }

  &[size='small'] {
    min-height: 17.5rem;
  }

  &[size='medium'] {
    min-height: 21.25rem;
  }

  &[size='large'] {
    min-height: 25rem;
  }

  @media screen and (min-width: 750px) {
    &[size='small'] {
      min-height: 26.25rem;
    }

    &[size='medium'] {
      min-height: 35rem;
    }

    &[size='large'] {
      min-height: 45rem;
    }
  }
}

slideshow-component[disabled='true'] slideshow-slides {
  overflow: hidden;
}

slideshow-component[mobile-disabled] slideshow-slides {
  @media screen and (max-width: 749px) {
    overflow: hidden;
  }
}

slideshow-slide {
  position: relative;
  scroll-snap-align: start;
  width: var(--slide-width, 100%);
  max-height: 100%;
  flex-shrink: 0;
  view-timeline-axis: inline;
  content-visibility: auto;
  contain-intrinsic-size: auto none;

  slideshow-component[actioned] &,
  &[aria-hidden='false'] {
    content-visibility: visible;
  }

  slideshow-component slideshow-slide:not([aria-hidden='false']) {
    content-visibility: hidden;
  }

  &[hidden]:not([reveal]) {
    display: none;
  }
}

slideshow-slide.product-media-container--tallest {
  content-visibility: visible;
}

@media screen and (max-width: 749px) {
  /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
  .media-gallery--hint
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
}

/*
 * Collection and Resource list carousels have peeking slides on both sides.
 * Card galleries preview the next or previous images on 'pointerenter', so we
 * try to kick load them beforehand (they are lazy loaded otherwise).
 */
:is(.resource-list__carousel, .card-gallery)
  :is(
    slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
    slideshow-slide[aria-hidden='false'] + slideshow-slide
  ) {
  content-visibility: auto;

  slideshow-component[actioned] & {
    content-visibility: visible;
  }
}

/*
 * Be specific about HTML children structure to avoid targeting nested slideshows.
 * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
 */
slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
  content-visibility: visible;
}

slideshow-slides[gutters*='start'] {
  padding-inline-start: var(--gutter-slide-width, 0);
  scroll-padding-inline-start: var(--gutter-slide-width, 0);
}

slideshow-slides[gutters*='end'] {
  padding-inline-end: var(--gutter-slide-width, 0);
}

slideshow-component[dragging] {
  --cursor: grabbing;

  * {
    pointer-events: none;
  }
}

slideshow-component[dragging] slideshow-arrows {
  display: none;
}

slideshow-container {
  width: 100%;
  display: block;
  position: relative;
  grid-area: container;
  container-type: inline-size;
}

/*
 * Slideshow Controls
 */
slideshow-controls {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  scrollbar-width: none;
  min-height: var(--minimum-touch-target);
  grid-area: controls;

  &[controls-on-media] {
    position: absolute;
    bottom: 0;
  }
}

slideshow-controls::-webkit-scrollbar {
  display: none;
}

slideshow-controls button {
  --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
  --color-active: var(--color-foreground);
  --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

  display: inline-block;
  height: var(--minimum-touch-target);
  width: var(--minimum-touch-target);
  cursor: pointer;
}

slideshow-controls .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-xs);
}

slideshow-controls[pagination-position='center'] {
  align-items: center;
  justify-content: center;
}

slideshow-controls[pagination-position='center'][thumbnails] {
  width: 100%;
}

slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
  justify-content: space-between;
}

slideshow-component:has(slideshow-controls[thumbnails]) {
  &:has(slideshow-controls[pagination-position='right']) {
    display: grid;
    grid-template:
      'container controls' auto
      'arrows controls' min-content
      / 1fr auto;
  }

  &:has(slideshow-controls[pagination-position='left']) {
    display: grid;
    grid-template:
      'controls container' auto
      'controls arrows' min-content
      / auto 1fr;
  }

  slideshow-controls[pagination-position='left'] {
    order: -1;
  }
}

slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;

  .slideshow-controls__thumbnails-container {
    overflow: hidden auto;
  }

  &:not([controls-on-media]) {
    .slideshow-controls__thumbnails-container {
      position: sticky;
      top: var(--sticky-header-offset, 0);
    }

    .slideshow-controls__thumbnails {
      padding-block-start: var(--focus-outline-offset);
    }
  }
}

slideshow-controls:not([controls-on-media])[icons-on-media] {
  &[pagination-position='right'] {
    justify-content: flex-end;
  }

  &[pagination-position='left'] {
    justify-content: flex-start;
  }
}

slideshow-controls:not([controls-on-media]):is([pagination-position='left'], [pagination-position='right'])
  .slideshow-controls__thumbnails {
  padding-block: var(--padding-2xs);
}

slideshow-controls:not([controls-on-media]) {
  &:is([pagination-position='right']) {
    .slideshow-controls__thumbnails {
      padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
    }
  }

  &:is([pagination-position='left']) {
    .slideshow-controls__thumbnails {
      padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
    }
  }
}

slideshow-controls[controls-on-media] {
  z-index: var(--layer-raised);

  &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
    --color-foreground: #fff;
    --color-foreground-rgb: var(--color-white-rgb);
  }

  &[pagination-position='right'] {
    right: 0;
  }

  &[pagination-position='left'] {
    left: 0;
  }

  &[pagination-position='center'] {
    width: 100%;
  }

  &:not([thumbnails])[pagination-position='left'] {
    width: fit-content;
    align-self: flex-start;
  }

  &:not([thumbnails])[pagination-position='right'] {
    width: fit-content;
    align-self: flex-end;
  }
}

slideshow-controls:is([pagination-position='right'], [pagination-position='left']) {
  .slideshow-controls__thumbnails {
    flex-direction: column;
  }
}

.slideshow-controls__arrows {
  display: flex;
  justify-content: space-between;
  height: var(--minimum-touch-target);
  grid-area: arrows;

  button {
    padding: 0 var(--padding-xs);
  }
}

.slideshow-controls__dots,
.slideshow-controls__counter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  list-style: none;

  button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }
}

slideshow-controls:has(.slideshow-controls__dots),
slideshow-component[autoplay] slideshow-controls {
  mix-blend-mode: difference;
}

.slideshow-controls__dots {
  gap: 0.6rem;
  padding: var(--padding-sm) var(--padding-lg);
  border-radius: 3rem;
  overflow: hidden;

  button {
    --size: 0.5rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    margin: calc(var(--size) / -2);
    font-size: 0;
    border-radius: calc(var(--size));

    &::after {
      content: '';
      display: block;
      background-color: var(--color);
      height: var(--size);
      width: var(--size);

      /* This is at --size / 2 to remove a visual regression on subpixel rendering displays */
      border-radius: calc(var(--size) / 2);

      @supports not (view-timeline-axis: inline) {
        &[aria-selected='true'] {
          --color: var(--color-active);
        }
      }

      &:hover {
        --color: var(--color-hover);
      }
    }

    &[aria-selected='true'] {
      --color: var(--color-active);
    }
  }
}

.slideshow-controls__dots,
.slideshow-controls__counter {
  &:only-child {
    margin-inline: auto;
  }
}

.slideshow-controls__counter {
  color: var(--color-foreground);
  background-color: rgb(0 0 0 / 40%);
  width: auto;
  border-radius: 2rem;
  padding: 0.3rem var(--padding-sm);
  margin-inline: var(--margin-sm);
  backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size--xs);

  .slash {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
    padding-inline: var(--padding-2xs);
    margin-block-start: -0.1rem;
  }
}

.slideshow-control[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.slideshow-control--large {
  .icon-caret {
    --icon-stroke-width: 1px;
  }

  .icon-caret {
    --icon-stroke-width: 1px;
  }

  .svg-wrapper,
  svg {
    width: var(--slideshow-controls-icon);
    height: var(--slideshow-controls-icon);
  }
}

/* Slideshow control shape styles */
.button-unstyled.slideshow-control.slideshow-control--shape-square,
.button-unstyled.slideshow-control.slideshow-control--shape-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
}

.button-unstyled.slideshow-control.slideshow-control--shape-circle {
  border-radius: 50%;
}

.button-unstyled.slideshow-control.slideshow-control--shape-square {
  border-radius: 0;
}

.slideshow-control .icon-caret {
  rotate: -90deg;
}

/* Slideshow Thumbnails */
.slideshow-controls__thumbnails-container {
  display: flex;
  width: 100%;
  max-height: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
}

.slideshow-controls__thumbnails {
  display: inline-flex;
  padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
  padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
  gap: var(--gap-xs);
  margin-inline: auto;
  height: fit-content;

  .slideshow-control {
    border-radius: var(--media-radius);
    width: clamp(44px, 7vw, var(--thumbnail-width));
    height: auto;
    aspect-ratio: var(--aspect-ratio);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
    }
  }
}

.slideshow-controls__thumbnail {
  position: relative;
}

.slideshow-controls__thumbnail-badge {
  position: absolute;
  top: var(--padding-2xs);
  right: var(--padding-2xs);
  width: clamp(16px, 10%, 20px);
  height: clamp(16px, 10%, 20px);
  background-color: var(--color-background);
  border-radius: var(--style-border-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

.slideshow-controls__thumbnail-badge svg {
  width: 60%;
  height: 60%;
  fill: var(--color-foreground);
  opacity: 0.6;
}

/* Slideshow Play/Pause */
.slideshow-control:is(.icon-pause, .icon-play) {
  color: var(--color-active);

  &:hover {
    color: var(--color-hover);
  }

  svg {
    display: none;
  }
}

slideshow-component:is([autoplay]) {
  &:is([paused]) {
    .icon-play > svg {
      display: block;
    }
  }

  &:not([paused]) {
    .icon-pause > svg {
      display: block;
    }
  }
}

/* Slideshow Arrows */
slideshow-arrows {
  --cursor-previous: w-resize;
  --cursor-next: e-resize;

  position: absolute;
  inset: 0;
  display: flex;
  z-index: var(--layer-heightened);
  pointer-events: none;
  mix-blend-mode: difference;
  align-items: flex-end;

  &[position='left'] {
    justify-content: flex-start;
    padding-inline: var(--padding-xs);
  }

  &[position='right'] {
    justify-content: flex-end;
    padding-inline: var(--padding-xs);
  }

  &[position='center'] {
    justify-content: space-between;
    align-items: center;
  }
}

slideshow-arrows:has(.slideshow-control--shape-square),
slideshow-arrows:has(.slideshow-control--shape-circle) {
  mix-blend-mode: normal;
}

slideshow-component[disabled='true'] slideshow-arrows {
  display: none;
}

slideshow-arrows .slideshow-control {
  pointer-events: auto;
  opacity: 0;
  min-height: var(--minimum-touch-target);
  min-width: var(--minimum-touch-target);
  padding: 0 var(--padding-xs);
  color: var(--color-white);
}

slideshow-arrows .slideshow-control.slideshow-control--style-none {
  display: none;
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  padding-inline: 0 var(--padding-md);
}

.card-gallery slideshow-arrows .slideshow-control {
  /* Align icons with quick-add button */
  padding-inline: var(--padding-xl);

  @container (max-width: 249px) {
    padding-inline: 0 var(--padding-sm);
  }
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  opacity: 1;
}

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.block-resource-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap);
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  container-name: resource-list;
}

.section-resource-list {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__content:empty {
  display: none;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

/* ============================= */
/* AJUSTES TÍTULO PRODUCT LIST */
/* ============================= */

/* Quitar negrita aunque venga dentro de <strong> */
.section-resource-list__header h2 strong,
.section-resource-list__header h3 strong {
  font-weight: 400 !important;
}

/* (Opcional) por si el strong hereda */
.section-resource-list__header strong {
  font-weight: 400 !important;
}

/* Espacio y alineación con el carrusel */
.section-resource-list__header {
  margin-bottom: 48px !important;
  padding-left: 50px;
}

/* ============================= */
/* FIN AJUSTES TÍTULO PRODUCT LIST */
/* ============================= */

.section-resource-list.section--full-width product-card-link > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

.resource-list--carousel-mobile {
  display: block;

  @media screen and (min-width: 750px) {
    display: none;
  }
}

.resource-list {
  --resource-list-mobile-gap-max: 9999px;
  --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
  --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

  width: 100%;

  @media screen and (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }

  @container resource-list (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }
}

.resource-list--grid {
  display: grid;
  gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
  grid-template-columns: var(--resource-list-columns-mobile);

  @media screen and (min-width: 750px) {
    grid-template-columns: var(--resource-list-columns);
  }

  @container resource-list (max-width: 449px) {
    grid-template-columns: var(--resource-list-columns-mobile);
  }

  @container resource-list(min-width: 450px) and (max-width: 749px) {
    --resource-list-columns-per-row: 3;

    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    /* Avoid orphan in last row when there are 4, 7, or 10 items */
    &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
    /* Clean two full rows when there are 8 items */
    &:has(.resource-list__item:first-child:nth-last-child(8n)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 750px) {
    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
      --resource-list-columns-per-row: 4;
    }

    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 3;
    }

    &:has(.resource-list__item:first-child:nth-last-child(5)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 1200px) {
    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 6;
    }
  }
}

.resource-list__item {
  height: 100%;
  color: var(--color-foreground);
  text-decoration: none;
}

.resource-list__carousel {
  --slide-width: 60vw;

  width: 100%;
  position: relative;
  container-type: inline-size;
  container-name: resource-list-carousel;

  .slideshow-control[disabled] {
    display: none;
  }

  .slideshow-control--next {
    margin-inline-start: auto;
  }
}

@container resource-list-carousel (max-width: 749px) {
  .resource-list__carousel .resource-list__slide {
    --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
  }
}

@container resource-list-carousel (min-width: 750px) {
  .resource-list__carousel .resource-list__slide {
    --section-slide-width: calc(
      (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
        var(--column-count)
    );
    --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    --slide-width: var(--section-slide-width, var(--fallback-slide-width));
  }
}

.resource-list__carousel slideshow-slides {
  gap: var(--resource-list-column-gap);

  /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */

  margin-block: -16px;
  padding-block: 16px;
}

.resource-list__carousel slideshow-arrows {
  padding-inline: var(--util-page-margin-offset);
}

.resource-list__carousel .resource-list__slide {
  width: var(--slide-width);
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component),
.group-block:has(> .background-image-container) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

accordion-custom {
  details {
    &::details-content,
    .details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      interpolate-size: allow-keywords;
      transition: content-visibility var(--animation-speed-slow) allow-discrete,
        padding-block var(--animation-speed-slow) var(--animation-easing),
        opacity var(--animation-speed-slow) var(--animation-easing),
        block-size var(--animation-speed-slow) var(--animation-easing);
    }

    &:not([open]) {
      &::details-content,
      .details-content {
        padding-block: 0;
      }
    }

    &[open] {
      &::details-content,
      .details-content {
        opacity: 1;
        block-size: auto;

        @starting-style {
          block-size: 0;
          opacity: 0;
          overflow-y: clip;
        }

        &:focus-within {
          overflow-y: visible;
        }
      }
    }
  }
}

accordion-custom[data-disable-on-mobile='true'] summary {
  @media screen and (max-width: 749px) {
    cursor: auto;
  }
}

accordion-custom[data-disable-on-desktop='true'] summary {
  @media screen and (min-width: 750px) {
    cursor: auto;
  }
}

text-component {
  --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  --shimmer-speed: 1.25s;

  display: inline-block;
  position: relative;
  transition: color var(--animation-speed-slow) ease;
  line-height: 1;

  &::after {
    content: attr(value);
    position: absolute;
    inset: 0;
    color: transparent;
    opacity: 0;
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    pointer-events: none;
    background-image: linear-gradient(
      -85deg,
      var(--shimmer-text-color) 10%,
      var(--shimmer-color-light) 50%,
      var(--shimmer-text-color) 90%
    );
    background-clip: text;
    background-size: 200% 100%;
    background-position: 100% 0;
    place-content: center;
  }

  &[shimmer] {
    color: transparent;

    &::after {
      opacity: 1;
      animation: text-shimmer var(--shimmer-speed) infinite linear;
    }
  }
}

@keyframes text-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/* Animation transitions */
.transition-background-color {
  transition: background-color var(--animation-speed-medium) ease-in-out;
}

.transition-transform {
  transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
}

.transition-border-color {
  transition: border-color var(--animation-speed-medium) var(--animation-timing-hover);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Product card title truncation - applied only to zoom-out view */
[product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

/* Product card title truncation - applied on mobile regardless of view */
@media screen and (max-width: 749px) {
  :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
}

.product-card:hover,
.collection-card:hover,
.resource-card:hover,
.predictive-search-results__card--product:hover,
.predictive-search-results__card:hover {
  position: relative;
  z-index: var(--layer-raised);
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
}

.header .product-card:hover,
.header .collection-card:hover,
.header .resource-card:hover,
.header-drawer .product-card:hover,
.header-drawer .collection-card:hover,
.header-drawer .resource-card:hover {
  z-index: auto;
  transform: none;
  box-shadow: none;
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

cart-icon.header-actions__cart-icon:after {
  content: "COMPRA YA";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px;
  border-radius: 15px;
  border: 1px solid #6A8659;
  color: #000;
  white-space: nowrap;
  font-size: 11px;
}

button.button.header-actions__action.button-unstyled {
  overflow: visible !important;
}

cart-drawer-component {
  margin-right: 100px;
}

/* Boton de login */

/* El contenedor ya es flex, solo alineamos bien */
header-actions{
  align-items: center;
}

/* Deja que el botón de cuenta pueda “expandirse” para incluir el texto */
/* Mantén todo en una sola fila dentro del botón de cuenta */
.account-button{
  width: auto;
  min-width: var(--button-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;      /* <<< clave */
  gap: 6px;
  white-space: nowrap;
  margin-left: 20px;
  margin-right: 20px;
}

/* Asegura que el pseudo-elemento no se vaya abajo */
.account-button::after{
  content: "LOGIN";
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 15px;
  border: 1px solid #6A8659;
  color: #000;
  background: transparent;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}


/* ===============================
   TÍTULO SECCIÓN: "Cuidado de la Mujer"
   =============================== */

/* Forzar negrita SOLO en ese título */
#shopify-section-template--19589641404527__product_list_ghiwW3
  .text-block--AYmphN09QSWhUOXE0a__product_list_text_fzzhtb h2,
#shopify-section-template--19589641404527__product_list_ghiwW3
  .text-block--AYmphN09QSWhUOXE0a__product_list_text_fzzhtb h2 strong {
  font-weight: 700 !important;
}


/* ===============================
   TÍTULO SECCIÓN: "Salud Intestinal"
   =============================== */

#shopify-section-template--19589641404527__product_list_LhMpHX
  .text-block--AYkN0R0Z6Qnp5T0Rwb__product_list_text_gbgLhw h2,
#shopify-section-template--19589641404527__product_list_LhMpHX
  .text-block--AYkN0R0Z6Qnp5T0Rwb__product_list_text_gbgLhw h2 strong {
  font-weight: 700 !important;
}


/* Negrita solo en las 2 secciones */
#shopify-section-template--19589641404527__product_list_LhMpHX .product-card__more-info,
#shopify-section-template--19589641404527__product_list_ghiwW3 .product-card__more-info {
  font-weight: 700 !important;
}

.product-card__more-info{
  font-weight: 700 !important;
}


/* =====================================
   SALUD INTESTINAL – corregir colores
   ===================================== */

#shopify-section-template--19589641404527__product_list_LhMpHX {

  /* 1) Nombre del producto → VERDE */
  [class*="__product_title_"] p {
    color: #6f8f5f !important; /* verde usado en el resto del sitio */
    font-weight: 600;
  }

  /* 2) Precio → NEGRO */
  product-price,
  product-price .price {
    color: #000 !important;
    font-weight: 500;
  }
}




#shopify-section-template--19589641404527__1765328146404e34fa
  .skape-slider-item,
#shopify-section-template--19589641404527__1765328146404e34fa
  .skape-slider-item-image {
  transform: none !important;
}



/* =========================================================
   HERO: replicar panel izquierdo estilo referencia
   Sección: template--19589641404527__hero_qtHEKh
   ========================================================= */

#shopify-section-template--19589641404527__hero_qtHEKh #Hero-template--19589641404527__hero_qtHEKh {
  position: relative;
}

/* Crear el “panel” café a la izquierda */
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh .hero__container {
  position: relative;
}

#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh .hero__container::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;              /* ajusta 38% - 48% según tu gusto */
  background: #c79a5b;     /* café/tostado como referencia */
  z-index: 0;
}

/* El contenido encima del panel */
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh .hero__content-wrapper {
  position: relative;
  z-index: 2;
  padding-left: 60px;      /* margen interno como referencia */
  max-width: 520px;        /* ancho del bloque de texto */
}

/* Tipografía: todo blanco en el panel */
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh .hero__content-wrapper h2,
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh .hero__content-wrapper p {
  color: #fff !important;
}

/* “El elixir de la” (línea 1) */
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh
.text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp h2:first-child {
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.05;
  margin: 0;
}

/* Desactivar el efecto del <strong> dentro del h2 */
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh
.text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp h2 strong {
  font-weight: inherit;
  font-style: inherit;
}

/* “JUVENTUD” (línea 2) */
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh
.text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp h2:last-child {
  font-weight: 900 !important;
  font-size: clamp(54px, 5.2vw, 86px);
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}

/* Párrafo (suavizar un poco) */
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh .hero__content-wrapper p {
  opacity: 0.92;
  line-height: 1.6;
  margin: 0;
}

/* Botón pill “COMPRA AHORA” */
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh a.button {
  background: #f2e4cd !important; /* beige claro */
  color: #5f744e !important;      /* verde texto */
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-weight: 900 !important;
  border: none !important;
  text-transform: uppercase;
}

/* Responsive: en móvil, panel ocupa todo */
@media (max-width: 749px) {
  #shopify-section-template--19589641404527__hero_qtHEKh
  #Hero-template--19589641404527__hero_qtHEKh .hero__container::before {
    width: 100%;
  }

  #shopify-section-template--19589641404527__hero_qtHEKh
  #Hero-template--19589641404527__hero_qtHEKh .hero__content-wrapper {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 100%;
  }
}

/* ==========================
   Ajustes para pantallas grandes
   ========================== */

/* En desktop grande, limitamos el ancho real del contenido y lo alineamos como “layout de referencia” */
@media (min-width: 1200px) {
  #shopify-section-template--19589641404527__hero_qtHEKh
  #Hero-template--19589641404527__hero_qtHEKh .hero__content-wrapper {
    max-width: 560px;           /* evita que se estire raro */
    padding-left: clamp(40px, 4vw, 80px); /* escala sin desbordarse */
  }

  /* Panel izquierdo con ancho controlado y escalable */
  #shopify-section-template--19589641404527__hero_qtHEKh
  #Hero-template--19589641404527__hero_qtHEKh .hero__container::before {
    width: clamp(420px, 38vw, 720px); /* evita panel gigante en 4K */
  }
}

/* 2K y 4K: congelar aún más para que NO se desproporcione */
@media (min-width: 1600px) {
  #shopify-section-template--19589641404527__hero_qtHEKh
  #Hero-template--19589641404527__hero_qtHEKh .hero__container::before {
    width: 700px; /* panel consistente */
  }

  #shopify-section-template--19589641404527__hero_qtHEKh
  #Hero-template--19589641404527__hero_qtHEKh .hero__content-wrapper {
    max-width: 600px;
    padding-left: 80px;
  }
}

/* Seguridad: evitar overflow horizontal por pseudo-elementos */
#shopify-section-template--19589641404527__hero_qtHEKh
#Hero-template--19589641404527__hero_qtHEKh .hero__container {
  overflow: hidden;
}




/* ======================================================
   TE HACE BIEN – AJUSTE FINAL (SECCIÓN C7p6eG)
   ====================================================== */

/* Ajuste general de superposición con sección superior */
#shopify-section-template--19589641404527__section_C7p6eG{
  margin-top: -70px;
  padding-top: 70px;
}

/* Imagen de fondo */
#shopify-section-template--19589641404527__section_C7p6eG
.background-image-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Altura real (más baja, como diseño guía) */
#shopify-section-template--19589641404527__section_C7p6eG
.section.section--full-width{
  min-height: 360px !important;
}

/* ======================
   GRID PRINCIPAL
   ====================== */
#shopify-section-template--19589641404527__section_C7p6eG
.section-content-wrapper{
  display: grid !important;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  align-items: center;

  column-gap: clamp(24px, 5vw, 80px);
  row-gap: 14px;

  padding: clamp(20px, 3vw, 42px)
           clamp(28px, 6vw, 110px) !important;

  --padding-block-end: 0px !important;
  overflow-x: hidden;
}

/* ======================
   TEXTO DERECHO
   ====================== */

/* "Nuestro compromiso..." */
#shopify-section-template--19589641404527__section_C7p6eG
.section-content-wrapper > rte-formatter:nth-of-type(1){
  grid-column: 2;
  grid-row: 1;

  justify-self: start;
  align-self: center;

  max-width: 560px;
  margin: 0;
}

/* Tamaño del texto */
#shopify-section-template--19589641404527__section_C7p6eG
.section-content-wrapper > rte-formatter:nth-of-type(1) p{
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.05;
  font-weight: 800;
  margin: 0;
}

/* ======================
   BOTÓN LEE MÁS
   ====================== */
#shopify-section-template--19589641404527__section_C7p6eG
.section-content-wrapper > a.button-secondary{
  grid-column: 2;
  grid-row: 2;

  /* centrado respecto al párrafo */
  justify-self: start;
  align-self: start;

  margin-top: 16px;

  border-radius: 9999px;
  padding: 14px 40px;
  font-weight: 800 !important;
  max-width: fit-content;
}

/* ======================
   BLOQUE IZQUIERDO
   ====================== */

/* Te Hace Bien */
#shopify-section-template--19589641404527__section_C7p6eG
.section-content-wrapper > rte-formatter:nth-of-type(2){
  grid-column: 1;
  grid-row: 1 / span 2;

  justify-self: start;
  align-self: center;

  /* 🔽 bajamos círculo + texto suavemente */
  margin-top: clamp(90px, 11vw, 150px);
}

/* Texto grande */
#shopify-section-template--19589641404527__section_C7p6eG
.section-content-wrapper > rte-formatter:nth-of-type(2) h2{
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  margin: 0;
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 750px){
  #shopify-section-template--19589641404527__section_C7p6eG{
    margin-top: -40px;
    padding-top: 40px;
  }

  #shopify-section-template--19589641404527__section_C7p6eG
  .section.section--full-width{
    min-height: 420px !important;
  }

  #shopify-section-template--19589641404527__section_C7p6eG
  .section-content-wrapper{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 20px !important;
  }

  /* Texto derecho arriba */
  #shopify-section-template--19589641404527__section_C7p6eG
  .section-content-wrapper > rte-formatter:nth-of-type(1){
    grid-column: 1;
    grid-row: 1;
    max-width: 100%;
  }

  /* Te Hace Bien debajo del círculo */
  #shopify-section-template--19589641404527__section_C7p6eG
  .section-content-wrapper > rte-formatter:nth-of-type(2){
    grid-column: 1;
    grid-row: 2;
    margin-top: clamp(110px, 22vw, 160px);
  }

  #shopify-section-template--19589641404527__section_C7p6eG
  .section-content-wrapper > rte-formatter:nth-of-type(2) h2{
    white-space: normal;
  }

  /* Botón abajo */
  #shopify-section-template--19589641404527__section_C7p6eG
  .section-content-wrapper > a.button-secondary{
    grid-column: 1;
    grid-row: 3;
    margin-top: 18px;
  }
}

cart-icon.header-actions__cart-icon:after {
  content: "COMPRA YA";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px;
  border-radius: 15px;
  border: 1px solid #6A8659;
  color: #000;
  white-space: nowrap;
  font-size: 11px;
}

button.button.header-actions__action.button-unstyled {
  overflow: visible !important;
}

cart-drawer-component {
  margin-right: 100px;
}

.gm-menu .gm-image .gm-target .gm-text,
.gm-menu-installed .gm-menu .gm-submenu .gm-item .gm-image .gm-target .gm-text .gm-description{
  font-weight: bold !important;
}



/* ======================
   Correccion cards cuidado de la mujer
   ====================== */
.product-card p{
  color: #000;
  
}


.add-to-cart-button {
  margin-top: 11px;
  padding: 0px !important;s
}



/* ===== HERO: título como en la imagen (solo CSS) ===== */
#shopify-section-template--19589641404527__hero_jVaWmY .hero__content-wrapper{
  /* asegura que order funcione */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;          /* cámbialo a center si lo quieres centrado */
  gap: 10px !important;
}

/* 1) Orden: EL PODER arriba, de lo natural abajo */
#shopify-section-template--19589641404527__hero_jVaWmY .text-block--ARjVKUGg2bEZjVzJpM__text_AkALLj{
  order: 1 !important;
}

#shopify-section-template--19589641404527__hero_jVaWmY .text-block--AdVF4MFh4bXJncFRlY__text_Ydn3Fb{
  order: 2 !important;
  margin-top: -8px !important;      /* junta las líneas como en el banner */
}

/* 2) EL PODER (H2 dentro de rte-formatter) */
#shopify-section-template--19589641404527__hero_jVaWmY .text-block--ARjVKUGg2bEZjVzJpM__text_AkALLj h2{
  font-family: Montserrat, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 0.95 !important;
  margin: 0 !important;
  font-size: clamp(44px, 5.2vw, 86px) !important;
}

/* 3) de lo Natural (H1 del bloque custom) */
#shopify-section-template--19589641404527__hero_jVaWmY .text-block--AdVF4MFh4bXJncFRlY__text_Ydn3Fb h1{
  font-family: "Kaushan Script", cursive !important; /* o 'Dancing Script' si es la que usan */
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  font-size: clamp(34px, 4.2vw, 64px) !important;
  padding-bottom: 40px;
}

/* 4) Opcional: alinear a la izquierda aunque el wrapper esté en center */
#shopify-section-template--19589641404527__hero_jVaWmY .text-block,
#shopify-section-template--19589641404527__hero_jVaWmY .text-block > *{
  text-align: left !important;
}

/* 5) Botón (si ya lo moviste con margin-left gigante, mejor así) */
#shopify-section-template--19589641404527__hero_jVaWmY .button{
  order: 3 !important;
  margin-left: 0 !important;        /* elimina el -1115px */
  margin-top: 14px !important;
  align-self: flex-start !important;
}


/* ====== 1) Hacer el botón clickeable y visible ====== */
#shopify-section-template--19589641404527__hero_jVaWmY .hero__content-wrapper{
  pointer-events: auto !important;      /* habilita interacción en el contenido */
  z-index: 5 !important;                /* por encima del overlay */
}

#shopify-section-template--19589641404527__hero_jVaWmY .hero__media-wrapper{
  pointer-events: none !important;      /* la imagen no necesita clic */
}

/* Si algún overlay tapa el contenido, lo mandamos atrás */
#shopify-section-template--19589641404527__hero_jVaWmY .overlay{
  z-index: 1 !important;
}
#shopify-section-template--19589641404527__hero_jVaWmY .hero__content-wrapper{
  position: relative !important;
}

/* ====== 2) Botón debajo del texto ====== */
#shopify-section-template--19589641404527__hero_jVaWmY a.button{
  display: inline-flex !important;
  order: 3 !important;
  margin-left: 0 !important;            /* elimina el -1115px */
  margin-top: 18px !important;          /* separación bajo el título */
  align-self: flex-start !important;     /* debajo y alineado al texto */
  pointer-events: auto !important;      /* por si el tema bloquea clicks */
}

/* ====== 3) Mantener orden de títulos (por si acaso) ====== */
#shopify-section-template--19589641404527__hero_jVaWmY .text-block--ARjVKUGg2bEZjVzJpM__text_AkALLj{ order: 1 !important; }
#shopify-section-template--19589641404527__hero_jVaWmY .text-block--AdVF4MFh4bXJncFRlY__text_Ydn3Fb{ order: 2 !important; }



/* ================================
   TEXTO "Nuestro compromiso..."
   mover a la derecha + negrita suave
================================ */

/* 1) Mover el bloque al lado derecho del grid */
#shopify-section-template--19589641404527__section_C7p6eG
.section-content-wrapper
.text-block--Aa3Y2L1dZaDlvelRCL__text_6ELQPL{
  grid-column: 2 !important;     /* columna derecha */
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  text-align: left !important;
}

/* 2) Control fino del texto */
#shopify-section-template--19589641404527__section_C7p6eG
.text-block--Aa3Y2L1dZaDlvelRCL__text_6ELQPL p{
  font-family: Montserrat, sans-serif !important;
  font-size: clamp(28px, 3.5vw, 52px) !important;
  line-height: 1.05 !important;
  margin-left:130px !important;
  margin-top: 70px !important;
  color: rgb(var(--color-foreground-rgb)) !important;

}

/* 3) Reducir la negrita (SIN eliminarla) */
#shopify-section-template--19589641404527__section_C7p6eG
.text-block--Aa3Y2L1dZaDlvelRCL__text_6ELQPL strong{
  font-weight: 700 !important;  /* ← este es el punto clave */
}

/* Quitar padding horizontal del contenedor */
#shopify-section-template--19589641404527__section_C7p6eG
.section-content-wrapper{
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* texto te hace bien */
#shopify-section-template--19589641404527__section_C7p6eG
.text-block--ARlVGZFpVQnF0ZHBBN__text_kmw6dD h2 strong{
  font-weight: 600 !important;
  margin-left: 150px;
}

/* Botón "LEE MÁS..." – más padding horizontal */
#shopify-section-template--19589641404527__section_C7p6eG
.button-secondary--Aa2xsQ3R0UUVYcXBlR__button_eDJPG7{
  padding-left: 15px !important;
  padding-right: 100px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-right: 150px !important;
  font-size: 1.5em !important;
}

#shopify-section-template--19589641404527__section_C7p6eG 
.text-block--Aa3Y2L1dZaDlvelRCL__text_6ELQPL {
  transform: translateX(120px); /* ajusta 80px, 100px, 140px según necesites */
}


/* Botones "COMPRA AHORA" más delgados (menos alto) */
#shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-button.button{
  padding-block: 10px !important;   /* antes suele ser 16px */
  min-height: 36px !important;      /* opcional: asegura delgadez */
  height: auto !important;          /* evita que una altura fija lo engorde */
}

/* Si el theme está usando height por variable, la reducimos también */
#shopify-section-template--19589641404527__product_list_fa6P9H{
  --height-buy-buttons: 36px;
}

#shopify-section-template--19589641404527__section_C7p6eG .button-secondary {
    position: relative;
    left: 250px !important;
    top: -40px !important;
}

/* imagenes */

/* === Ajustar tamaño de imagen en cards: 263px -> 230px === */
.resource-list__slide .card-gallery .product-media-container,
.resource-list__slide .card-gallery .product-media {
  height: 230px !important;
  max-height: 230px !important;
}

.resource-list__slide .card-gallery img.product-media__image {
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important; /* usa cover si quieres que rellene recortando */
}

/* Precio en negrita */
.resource-list__slide product-price .price{
  font-weight: 600 !important;
}

/* Texto "MÁS INFO..." en negrita */
.resource-list__slide .product-card__more-info{
  font-weight: 600 !important;
}



/* =========================================================
   PRODUCT CARD – AJUSTES FINALES DE DISEÑO
   ========================================================= */

/* Contenedor general de la card */
.product-card__content {
  gap: 6px; /* compacta los elementos */
}

/* Descripción corta (metafield) */
.product-card__short-description {
  margin-top: 2px;
  margin-bottom: 4px;
  font-size: 17px !important;
  line-height: 1.35;
  opacity: 0.8;
  max-width: 80% !important;
  margin-inline: auto;
}

/* Elimina márgenes internos del rich text */
.product-card__short-description p {
  margin: 0;
}

/* ✅ SOLO NOPALINA: forzar que la descripción se parta en 2 líneas */
product-card[data-product-id="7896668209263"] .product-card__short-description,
product-card[data-product-id="7896668209263"] .product-card__short-description .metafield-rich_text_field {
  max-width: 12ch !important;  /* ajusta 11ch–14ch hasta que quede perfecto */
}



/* ===== HERO – hacer que el bloque del texto ocupe más ancho (como tu 2da imagen) ===== */
#shopify-section-template--19589641404527__hero_qtHEKh
.text-block--AYjN5UUtBZEtRcURZa__text_LgnnCh {
  /* Esto es CLAVE: deja de encogerse */
  --width: 100%;
  --max-width: 70ch; /* súbelo a 75ch si quieres aún más ancho */
}

/* Ahora sí el <p> puede estirarse y verse “más ancho” */
#shopify-section-template--19589641404527__hero_qtHEKh
.text-block--AYjN5UUtBZEtRcURZa__text_LgnnCh p {
  width: 100% !important;
  max-width: 100%;
  font-size: 1.2rem;
  line-height: 1.9;
}

/* Importante: elimina el efecto de los <br> para que el texto se adapte al ancho del div */
#shopify-section-template--19589641404527__hero_qtHEKh
.text-block--AYjN5UUtBZEtRcURZa__text_LgnnCh p br {
  display: none;
}

/* Desktop: un poco más ancho */
@media screen and (min-width: 990px) {
  #shopify-section-template--19589641404527__hero_qtHEKh
  .text-block--AYjN5UUtBZEtRcURZa__text_LgnnCh {
    --max-width: 78ch;
  }
}

/* Mobile: que no se vea exagerado */
@media screen and (max-width: 749px) {
  #shopify-section-template--19589641404527__hero_qtHEKh
  .text-block--AYjN5UUtBZEtRcURZa__text_LgnnCh {
    --max-width: 92%;
  }

  #shopify-section-template--19589641404527__hero_qtHEKh
  .text-block--AYjN5UUtBZEtRcURZa__text_LgnnCh p {
    font-size: 1rem;
  }
}

/* ===== HERO – agrandar solo “El elixir de la” ===== */
#shopify-section-template--19589641404527__hero_qtHEKh
.text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp h2:first-child {
  font-size: 4.5rem !important;     /* antes ~2.2–2.3rem */
  line-height: 1.15;
  font-weight: 400 !important;
}

/* Desktop grande */
@media screen and (min-width: 990px) {
  #shopify-section-template--19589641404527__hero_qtHEKh
  .text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp h2:first-child {
    font-size: 2.9rem;
  }
}

/* Mobile: controlado */
@media screen and (max-width: 749px) {
  #shopify-section-template--19589641404527__hero_qtHEKh
  .text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp h2:first-child {
    font-size: 2.1rem;
  }
}


/* Agrandar SOLO el H1 que dice "de lo natural" en ese hero */
#shopify-section-template--19589641404527__hero_jVaWmY
  .text-block--AdVF4MFh4bXJncFRlY__text_Ydn3Fb
  h1{
  font-size: clamp(48px, 6.2vw, 94px) !important;
}

/* ==============================
   COLLECTION BANNER — CONTROL REAL
================================ */

section.collection-banner{
  height: 420px !important;     /* 👈 aquí cambias la altura */
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  overflow: hidden !important;
}

/* columnas */
section.collection-banner .banner-text,
section.collection-banner .banner-image{
  height: 100% !important;
}

/* imagen */
section.collection-banner .banner-image{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

section.collection-banner .banner-image img{
  max-height: 100% !important;   /* 👈 controla tamaño real */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}


/* mobile */
@media (max-width: 900px){
  section.collection-banner{
    height: auto !important;
    flex-direction: column !important;
  }

  section.collection-banner .banner-image{
    height: 260px !important;
  }
}



/* 🔥 CTA Banner: botón más firme */
section.collection-banner .banner-text a {
  font-weight: 600 !important;
  letter-spacing: 0.5px;
}



/* ===== PRODUCT GRID – JERARQUÍA DE TEXTO ===== */

/* ==============================
   PRODUCT GRID – JERARQUÍA FINAL
================================ */

/* 1️⃣ TÍTULO DEL PRODUCTO */
.product-card > .contents .text-block p,
.product-card .text-block > p {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  margin-bottom: 4px;
}

/* 2️⃣ DESCRIPCIÓN CORTA (metafield) */
.product-card_short-description p,
.product-card_short-description .metafield-rich_text_field p {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  color: #666;
  margin-bottom: 6px;
}

/* 3️⃣ PRECIO */
product-price,
.product-card product-price {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #000;
}


/* ================================
   ZOOM SOLO AL CONTENIDO (IMAGEN)
   La card NO cambia de tamaño
================================ */

/* (Opcional) si quieres que el card tenga bordes redondeados
   y que el zoom no se salga del contenedor visual */
.skape-slider-item-image{
  overflow: hidden;
  border-radius: 12px; /* ajusta o elimina si no quieres */
}

/* transición suave SOLO para la imagen */
.skape-slider-item-image img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform 250ms ease;
  transform-origin: center;
}

/* mantiene el zoom mientras el mouse esté sobre el item */
.skape-slider-item:hover .skape-slider-item-image img{
  transform: scale(1.08);
}

/* ================================
   FIX: tu regla con transform:none !important
   (sin esto, el hover puede quedar bloqueado)
================================ */
#shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item:not(:hover),
#shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item-image:not(:hover){
  transform: none !important;
}

/* ================================
   Si se te “corta” el zoom, descomenta esto
   (solo si ves que algún contenedor recorta)
================================ */
/*
.blaze-track-container,
.blaze-container{
  overflow: visible !important;
}
*/





/* ================================
   COLLECTION PRODUCT CARDS – SIZE ONLY
   (Paste at the END of base.css)
================================== */

/* Desktop / Tablet */
@media (min-width: 750px) {
  /* Más espacio entre cards y columnas más “grandes” */
  .main-collection-grid .product-grid.product-grid--grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 56px 110px !important; /* row-gap / column-gap */
  }

  /* Centrar cada item dentro de su celda */
  .main-collection-grid .product-grid__item {
    display: flex !important;
    justify-content: center !important;
  }

  /* Tamaño máximo de la card */
  .main-collection-grid product-card.product-card {
    width: 100% !important;
    max-width: 360px !important;
  }

  /* Centrar contenido (sin cambiar textos) */
  .main-collection-grid .product-card__content {
    align-items: center !important;
    text-align: center !important;
  }

  /* Bloque de imagen con tamaño fijo tipo “catálogo” */
  .main-collection-grid .card-gallery {
    width: 280px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .main-collection-grid .product-media-container {
    aspect-ratio: 1 / 1 !important;
    max-height: 280px !important;
  }

  /* Mantener producto contenido, sin recortar */
  .main-collection-grid .product-media-container img,
  .main-collection-grid .card-gallery img {
    object-fit: contain !important;
  }
}

/* Mobile */
@media (max-width: 749px) {
  .main-collection-grid .product-grid.product-grid--grid {
    gap: 28px 18px !important;
  }

  .main-collection-grid .product-grid__item {
    display: flex !important;
    justify-content: center !important;
  }

  .main-collection-grid product-card.product-card {
    width: 100% !important;
    max-width: 220px !important;
  }

  .main-collection-grid .product-card__content {
    align-items: center !important;
    text-align: center !important;
  }

  .main-collection-grid .card-gallery {
    width: 180px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .main-collection-grid .product-media-container {
    aspect-ratio: 1 / 1 !important;
    max-height: 180px !important;
  }

  .main-collection-grid .product-media-container img,
  .main-collection-grid .card-gallery img {
    object-fit: contain !important;
  }
}








/* ==========================================
   PRODUCT PAGE – "También te podría gustar"
   Ajuste de cards e imágenes (igual al grid de colección)
   Pegar al FINAL de base.css
========================================== */

/* Desktop / Tablet */
@media (min-width: 750px) {
  /* Controla tamaño del grid y separaciones */
  .resource-list.resource-list--grid {
    /* por si está definido vía variables inline */
    --resource-list-columns: repeat(4, 1fr) !important;
    --resource-list-column-gap-desktop: 110px !important;
    --resource-list-row-gap-desktop: 56px !important;
  }

  /* Centrar cada item y limitar el tamaño de la card */
  .resource-list.resource-list--grid .resource-list__item {
    display: flex !important;
    justify-content: center !important;
  }

  .resource-list.resource-list--grid product-card.product-card {
    width: 100% !important;
    max-width: 360px !important; /* ancho de card (ajusta si quieres) */
  }

  /* Bloque de imagen con tamaño fijo tipo catálogo */
  .resource-list.resource-list--grid .card-gallery {
    width: 280px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* Evita que el slideshow/contendor se vuelva gigante */
  .resource-list.resource-list--grid .product-media-container {
    aspect-ratio: 1 / 1 !important;
    max-height: 280px !important;
    width: 100% !important;
  }

  /* Mantener imagen contenida (sin recortar) */
  .resource-list.resource-list--grid .product-media-container img,
  .resource-list.resource-list--grid .card-gallery img,
  .resource-list.resource-list--grid .card-gallery picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  /* Opcional: centra texto igual que el otro grid */
  .resource-list.resource-list--grid .product-card__content {
    align-items: center !important;
    text-align: center !important;
  }
}

/* Mobile */
@media (max-width: 749px) {
  .resource-list.resource-list--grid {
    --resource-list-column-gap-desktop: 18px !important;
    --resource-list-row-gap-desktop: 28px !important;
  }

  .resource-list.resource-list--grid .resource-list__item {
    display: flex !important;
    justify-content: center !important;
  }

  .resource-list.resource-list--grid product-card.product-card {
    width: 100% !important;
    max-width: 220px !important;
  }

  .resource-list.resource-list--grid .card-gallery {
    width: 180px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .resource-list.resource-list--grid .product-media-container {
    aspect-ratio: 1 / 1 !important;
    max-height: 180px !important;
    width: 100% !important;
  }

  .resource-list.resource-list--grid .product-media-container img,
  .resource-list.resource-list--grid .card-gallery img,
  .resource-list.resource-list--grid .card-gallery picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  .resource-list.resource-list--grid .product-card__content {
    align-items: center !important;
    text-align: center !important;
  }
}




/* ==========================================
   COLLECTION BANNER – Imagen a full height
   (quita espacios arriba/abajo)
========================================== */

/* El contenedor del banner debe recortar lo que sobresalga */
section.collection-banner {
  overflow: hidden;
}

/* La columna de la imagen ocupa todo el alto del banner */
section.collection-banner .banner-image {
  position: relative;
  display: block;       /* quita el flex centrado que causa "espacios" */
  height: 100%;
  overflow: hidden;
}

/* La imagen debe llenar todo el bloque */
section.collection-banner .banner-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;        /* clave: cubre todo el alto */
  object-position: center center !important;
  display: block;
}

/* Asegura que la sección tenga altura definida (ya tienes min-height:420px) */
section.collection-banner {
  min-height: 420px;
  align-items: stretch; /* para que ambos lados estiren a la misma altura */
}

/* Responsive: en móvil apila y define alto visible para la imagen */
@media (max-width: 749px) {
  section.collection-banner {
    flex-direction: column;
    min-height: auto;
  }

  section.collection-banner .banner-text,
  section.collection-banner .banner-image {
    width: 100%;
  }

  section.collection-banner .banner-image {
    height: 240px; /* ajusta a gusto: 220–320 */
  }
}


/* =========================================================
   COLLECTION BANNERS – AJUSTE TIPOGRÁFICO GLOBAL
   Aplica a TODOS los banners de colección
   (sobrescribe el <style> inline del section)
========================================================= */

/* TITULOS */
section.collection-banner .banner-text h1 {
  font-size: 80px !important;     /* antes 48px */
  line-height: 1.05 !important;
  font-weight: 700 !important;
  
}

section.collection-banner .banner-text{
  padding-top: 30px;
  padding-bottom: 30px;
}

/* TEXTO DESCRIPTIVO */
section.collection-banner .banner-text p {
  font-size: 22px !important;     /* antes 18px */
  line-height: 1.5 !important;
  
  margin-bottom: 32px !important;
}

/* RESPONSIVE – MÓVIL */
@media (max-width: 768px) {
  section.collection-banner .banner-text h1 {
    font-size: 40px !important;
    line-height: 1.1 !important;
  }

  section.collection-banner .banner-text p {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }
}










/* =========================================================
   ICONO OPCIONAL EN BANNER DE COLECCIÓN
   Solo aparece si existe el metafield banner_icon_image
   ========================================================= */

section.collection-banner .banner-text{
  position: relative;
}

section.collection-banner .banner-icon{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* no bloquea clics */
}

section.collection-banner .banner-icon__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media screen and (min-width: 990px) {
  .collection .grid[data-desktop-columns="3"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}









/* =========================================================
   COLLECTION GRID (esta sección) -> 4 columnas en pantallas grandes
   Pegar al FINAL de base.css
========================================================= */

/* 1) Desktop normal (mantén el comportamiento que ya tienes, si quieres 3 columnas) */
@media (min-width: 750px) and (max-width: 1199px) {
  #shopify-section-template--19589641306223__main
  .main-collection-grid
  .product-grid.product-grid--template--19589641306223__main.product-grid--grid {
    /* tu layout actual (auto-fill) */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 56px 70px !important; /* si 110px te queda muy abierto */
  }
}

/* 2) Pantallas grandes: FORZAR 4 columnas */
@media (min-width: 1200px) {
  #shopify-section-template--19589641306223__main
  .main-collection-grid
  .product-grid.product-grid--template--19589641306223__main.product-grid--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* ✅ 4 columnas fijas */
    gap: 48px 48px !important; /* ✅ reduce el gap para que entren */
  }

  /* Ajusta el tamaño máximo de la card para que entren 4 cómodas */
  #shopify-section-template--19589641306223__main
  .main-collection-grid product-card.product-card {
    max-width: 280px !important; /* prueba 260–300 según cómo lo veas */
  }

  /* Ajusta ancho de la galería (imagen) para que acompañe el nuevo ancho */
  #shopify-section-template--19589641306223__main
  .main-collection-grid .card-gallery {
    width: 220px !important; /* prueba 210–240 */
  }

  #shopify-section-template--19589641306223__main
  .main-collection-grid .product-media-container {
    max-height: 220px !important; /* acompaña al width */
  }
}

/* ===== Product tabs + Contraindicaciones (Nature's Garden) ===== */

/* Color y tamaño de los tabs */
.ng-tabs__tab{
  color: #C79859;
  font-size: 1.15rem;   /* más grande */
  font-weight: 700;
  opacity: 1;           /* quitamos el gris */
}

/* Subrayado SOLO para el tab activo */
.ng-tabs__tab.is-active{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* (Opcional) mantener el borde inferior del header suave */
.ng-tabs__header{
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* Contenido (texto) de los tabs en negro */
.ng-tabs__panel,
.ng-tabs__panel *{
  color: #000 !important;
}

/* Título de Contraindicaciones en el mismo color */
.ng-contra__title{
  color: #C79859;
  font-size: 1.15rem;  /* que se vea consistente con tabs */
  font-weight: 700;
}

/* Contenido de Contraindicaciones en negro */
.ng-contra__content,
.ng-contra__content *{
  color: #000 !important;
}






/* =========================================================
   PRODUCT PAGE: 50% media / 50% details (DESKTOP)
   ========================================================= */

/* Mobile: se mantiene en una sola columna (default del theme) */

/* Desktop */
@media (min-width: 990px) {
  /* Contenedor de las 2 secciones */
  .product-information__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; /* 50 / 50 */
    column-gap: 32px !important;
    align-items: start !important;
  }

  /* Asegurar que ambas columnas puedan “encogerse” sin romper el layout */
  .product-information__media,
  .product-details {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* El theme a veces pone max-width a la columna derecha: lo anulamos */
  .product-details {
    max-width: none !important;
  }
}

/* =========================================================
   ADD TO CART: cambiar color (botón principal)
   (Ajusta el HEX a tu color final si quieres otro)
   ========================================================= */

.product-form-buttons .add-to-cart-button,
.add-to-cart-button.button {
  background-color: #c79a59 !important;   /* <- color nuevo */
  border-color: #c79a59 !important;
  color: #ffffff !important;
}

.product-form-buttons .add-to-cart-button:hover,
.add-to-cart-button.button:hover {
  background-color: #b88a4d !important;   /* <- hover */
  border-color: #b88a4d !important;
  color: #ffffff !important;
}

/* Si el theme aplica estados especiales */
.add-to-cart-button.button:focus,
.add-to-cart-button.button:active {
  background-color: #b88a4d !important;
  border-color: #b88a4d !important;
  color: #ffffff !important;
}

/* =========================================================
   PRODUCT PAGE – padding lateral DESKTOP (default)
   ========================================================= */

/* Contenedor principal del producto */
.product-information__grid {
  padding-left: 120px !important;
  padding-right: 120px !important;
}

/* Aire entre imagen y texto */
.product-information__media {
  padding-right: 32px;
}

.product-details {
  padding-left: 32px;
}

/* =========================================================
   PRODUCT FORM: botón ancho “contenido” + alineación qty
   ========================================================= */

:root{
  --ng-accent: #c79a59; /* mismo color del botón (ajústalo si cambiaste el hex) */
  --ng-btn-h: 52px;     /* altura uniforme */
}

/* 1) Poner qty + add-to-cart en la misma fila y centrados */
.product-form-buttons{
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  justify-content: flex-start !important;
}

/* 2) Botón Agregar al carrito: NO full width */
.product-form-buttons .add-to-cart-button{
  width: auto !important;
  min-width: unset !important;
  max-width: none !important;
  flex: 0 0 auto !important;

  height: var(--ng-btn-h) !important;
  padding: 0 28px !important; /* “un poquito más” que el texto */
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* 3) Cantidad: misma altura, alineado y borde color accent */
.product-form-buttons .quantity-selector{
  height: var(--ng-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;

  border: 1px solid var(--ng-accent) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* Asegurar que botones + input estén centrados y no “subidos” */
.product-form-buttons .quantity-selector button,
.product-form-buttons .quantity-selector input{
  height: var(--ng-btn-h) !important;
  line-height: var(--ng-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* El input suele desalinear por padding/alto */
.product-form-buttons .quantity-selector input{
  line-height: normal !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* =========================================================
   TABS: títulos en MAYÚSCULAS
   ========================================================= */
.ng-tabs__tab{
  text-transform: uppercase !important;
}

/* =========================================================
   TABS: mismo tamaño de letra que el contenido (body)
   ========================================================= */

/* hereda el mismo tamaño que el texto normal del theme */
.ng-tabs__tab{
  text-transform: uppercase !important;
  font-size: inherit !important;         /* igual al contenido */
  line-height: inherit !important;
  font-weight: inherit !important;       /* opcional: si no quieres negrita extra */
  letter-spacing: normal !important;
}

/* por si el contenedor del tablist tiene otra tipografía */
.ng-tabs__header{
  font-size: inherit !important;
  line-height: inherit !important;
}





/* =========================================================
   FIX: quitar margin-top que desalineaba el botón add-to-cart
   ========================================================= */

/* El botón en sí */
.product-form-buttons .add-to-cart-button{
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  translate: none !important; /* por si algún estilo lo mueve */
}

/* Por si el margin viene del contenedor del botón */
.product-form-buttons add-to-cart-component,
.product-form-buttons [ref="addToCartButtonContainer"],
.product-form-buttons span[style*="--add-to-cart-font-case"]{
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  padding-top: 0 !important;
}

/* Asegura alineación vertical exacta dentro de la fila */
.product-form-buttons{
  align-items: center !important;
}






/* =========================================================
   TABS (NG): bullets dorados + alineación (no se salen del div)
   ========================================================= */

.ng-tabs__panel .metafield-rich_text_field ul{
  list-style: none !important;   /* quitamos viñeta nativa */
  padding-left: 0 !important;    /* quitamos sangría default */
  margin: 0 !important;
}

.ng-tabs__panel .metafield-rich_text_field li{
  position: relative !important;
  padding-left: 18px !important; /* espacio para la viñeta */
  margin: 8px 0 !important;
}

.ng-tabs__panel .metafield-rich_text_field li::before{
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;            /* queda alineado con la primera línea */
  color: #c79a59 !important;    /* color solicitado */
  font-weight: 900 !important;
  line-height: inherit !important;
}

/* opcional: asegura que el panel no tenga padding raro */
.ng-tabs__panel{
  padding-left: 0 !important;
}





/* ================================
   PRODUCT PAGE: color negro + precio más grande
   ================================ */

/* Descripción del producto a negro */
main .product-details rte-formatter,
main .product-details rte-formatter *{
  color: #000 !important;
}

/* Precio a negro */
main .product-details product-price{
  --color: #000 !important; /* variable usada por el componente */
}

/* Precio más grande y destacado */
main .product-details product-price .price{
  color: #000 !important;
  font-size: 24px !important;   /* puedes subir a 26px si lo quieres más fuerte */
  font-weight: 700 !important;
  line-height: 1.2 !important;
}








/* === Product Gallery Custom (PGC) === */
.pgc-gallery {
  display: grid;
  gap: 14px;
}

.pgc-main {
  width: 100%;
}

.pgc-main__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.pgc-thumbs {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  gap: 10px;
  align-items: center;
}

.pgc-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.pgc-thumb {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 0;
  background: transparent;
  flex: 0 0 auto;
  cursor: pointer;
  width: 78px;
  height: 78px;
  overflow: hidden;
}

.pgc-thumb.is-active {
  border-color: rgba(0,0,0,.45);
}

.pgc-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pgc-nav {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 22px;
}

@media (max-width: 749px) {
  .pgc-thumb { width: 64px; height: 64px; }
}










/* === PGC: fixed main image size like design === */
.pgc-main {
  width: 100%;
  max-width: 720px;         /* ajusta si quieres un poco más/menos ancho */
  margin: 0 auto;
}

/* “marco” fijo para que no cambie de tamaño al cambiar de imagen */
.pgc-main__img {
  width: 100%;
  height: 520px;            /* tamaño fijo (referencia del diseño) */
  object-fit: contain;      /* mantiene proporción sin recortar */
  background: transparent;
  border-radius: 0;         /* en el diseño no hay bordes redondeados */
  display: block;
}

/* Responsive */
@media (max-width: 989px) {
  .pgc-main__img { height: 420px; }
}
@media (max-width: 749px) {
  .pgc-main__img { height: 320px; }
}

/* === PGC: arrows like design (green triangles) === */
.pgc-nav {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-size: 0;             /* ocultamos el ‹ › */
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* Triángulo */
.pgc-nav::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Izquierda */
.pgc-nav--prev::before {
  border-right: 14px solid #6f8d4b;  /* verde del diseño (ajústalo si quieres) */
}

/* Derecha */
.pgc-nav--next::before {
  border-left: 14px solid #6f8d4b;
}

/* Hover */
.pgc-nav:hover::before {
  filter: brightness(0.9);
}




/* =========================================================
   PGC – Ajustes para que se vea como el diseño
   1) Flechas superpuestas (no ocupan columnas)
   2) Imagen grande en “marco” fijo centrado y sin huecos raros
========================================================= */

/* 1) Cambiamos el layout de thumbs: ya NO 3 columnas */
.pgc-thumbs{
  display: block;            /* en vez de grid */
  position: relative;
  margin-top: 16px;          /* separa de la imagen grande */
}

/* El track queda centrado y con padding lateral para no chocar con flechas */
.pgc-track{
  justify-content: center;   /* centra thumbs como en tu diseño */
  padding: 0 56px;           /* espacio interno para flechas superpuestas */
  overflow: hidden;          /* ocultar el scroll visible (si quieres) */
}

/* Flechas flotantes encima, a los lados del track */
.pgc-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 0;              /* ocultar ‹ › */
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.pgc-nav--prev{ left: 10px; }
.pgc-nav--next{ right: 10px; }

/* Triángulos verdes */
.pgc-nav::before{
  content:"";
  width:0; height:0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.pgc-nav--prev::before{ border-right: 16px solid #6f8d4b; }
.pgc-nav--next::before{ border-left: 16px solid #6f8d4b; }

/* 2) Imagen grande: marco fijo + centrado real */
.pgc-main{
  display: flex;
  justify-content: center;
}

.pgc-main__img{
  width: min(720px, 100%);
  height: 440px;             /* ajusta a tu diseño */
  object-fit: contain;
  object-position: center center;  /* asegura centrado */
  display: block;
  border-radius: 0;
}

.pgc-thumb__img{
  margin: 0px !important;
}

/* Responsive */
@media (max-width: 989px){
  .pgc-main__img{ height: 360px; }
  .pgc-track{ padding: 0 46px; }
  .pgc-nav--prev{ left: 6px; }
  .pgc-nav--next{ right: 6px; }
}

@media (max-width: 749px){
  .pgc-main__img{ height: 300px; }
  .pgc-track{ padding: 0 42px; }
}

/* (Opcional) si aún ves hueco arriba con algunas imágenes
   puedes probar alinear un poco hacia arriba:
   object-position: center 40%;
*/









/* =========================================================
   HOME STORIES
   ========================================================= */

.home-stories__header {
  text-align: left;
  margin-bottom: 24px;
}

.home-stories__title {
  margin: 0;
  font-family: var(--hs-font-family);
  font-weight: var(--hs-font-weight);
  text-transform: var(--hs-text-transform);
  color: var(--hs-color);
  font-size: var(--hs-font-size-desktop);
  letter-spacing: 0.02em;
}

.home-stories__subtitle {
  margin: 6px 0 0;
  font-family: var(--hs-font-family);
  font-weight: var(--hs-font-weight);
  text-transform: var(--hs-text-transform);
  color: var(--hs-color);
  font-size: var(--hs-font-size-desktop);
  font-style: italic;
}

@media (max-width: 749px) {
  .home-stories__title {
    font-size: var(--hs-font-size-mobile);
  }
  .home-stories__subtitle {
    font-size: var(--hs-font-size-mobile);
  }
}

/* =======================
   Rail / Carrusel
   ======================= */

.home-stories__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 18px;
}

@media (max-width: 749px) {
  .home-stories__rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }

  .home-stories__rail::-webkit-scrollbar {
    display: none;
  }
}

/* =======================
   Card
   ======================= */

.home-stories__card {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (max-width: 749px) {
  .home-stories__card {
    scroll-snap-align: start;
  }
}

/* 🔧 AJUSTE REAL: card más alta para evitar recorte */
.home-stories__card-media {
  position: relative;
  height: 420px;        /* ⬅️ antes 380px */
  min-height: 420px;    /* ⬅️ acompaña el height */
  border-radius: 18px;
  overflow: hidden;
  background: rgb(var(--color-foreground-rgb) / 0.05);
}

.home-stories__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge */

.home-stories__badge {
  position: absolute;
  left: 12px;
  bottom: 16px;
  background: #f1d04b;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

/* =======================
   Icono redondo inferior
   (NO SE TOCA)
   ======================= */

.home-stories__icon-wrap {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: rgb(var(--color-background-rgb) / 0.95);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.15);
  z-index: 3;

  overflow: hidden;
  display: block !important;
}

.home-stories__icon {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
  transform: scale(1.75);
  transform-origin: center;
}

/* =======================
   MODAL / STORIES VIEWER
   ======================= */

.home-stories__dialog {
  width: min(420px, 94vw);
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}

.home-stories__dialog::backdrop {
  background: rgb(0 0 0 / 0.65);
}

.home-stories__dialog-inner {
  position: relative;
  height: min(78vh, 720px);
  background: #000;
  color: #fff;
}

/* Close */

.home-stories__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgb(255 255 255 / 0.18);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 5;
}

/* Progress bar */

.home-stories__progress {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: grid;
  grid-auto-flow: column;
  gap: 6px;
  z-index: 4;
}

.home-stories__progress span {
  height: 3px;
  background: rgb(255 255 255 / 0.25);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.home-stories__progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: #fff;
}

.home-stories__progress span.is-active::after {
  transform: translateX(0);
  transition: transform var(--hs-duration, 3500ms) linear;
}

.home-stories__progress span.is-done::after {
  transform: translateX(0);
}

/* Viewer */

.home-stories__viewer {
  height: 100%;
}

.home-stories__viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-stories__text {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 6px 18px rgb(0 0 0 / 0.45);
}

/* Navigation */

.home-stories__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: rgb(255 255 255 / 0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 5;
}

.home-stories__nav--prev { left: 10px; }
.home-stories__nav--next { right: 10px; }


/* =========================================================
   HOME STORIES – ICONO INFERIOR (IMAGEN MÁS GRANDE)
   ========================================================= */

.home-stories__icon-wrap {
  bottom: 35px;
  background: transparent;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.15);
  overflow: hidden; /* asegura recorte perfecto del círculo */
}

/* Imagen más grande, cubre todo el círculo */
.home-stories__icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;

  transform: scale(1.25); /* ⬅️ CLAVE: elimina lo transparente */
  transform-origin: center;
}





/* =========================================================
   HOME STORIES – ESPACIADOS + HOVER SCALE
   (pegar al final de base.css)
   ========================================================= */

/* 1) Más espacio entre header y rail (doble del actual: 24px -> 48px) */
.home-stories__header {
  margin-bottom: 48px !important;
}

/* 2) Cards con 50% más separación (gap: 18px -> 27px) */
.home-stories__rail {
  gap: 27px !important;
}

/* 3) Hover: agrandar 20% con animación suave */
.home-stories__card {
  transition: transform 220ms ease, box-shadow 220ms ease;
  transform-origin: center;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .home-stories__card:hover {
    transform: scale(1.1);
    z-index: 10; /* para que no quede “tapada” por las otras */
  }
}







/* ================================
   SLIDESHOW HOME (slide 1) - Alinear logo "Te hace bien" con el botón
   ================================ */

#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:first-of-type .group-block-content.layout-panel-flex {
  /* el contenedor es flex en columna -> esto alinea a la izquierda */
  align-items: flex-start !important;
}

/* quita el desplazamiento negativo actual del botón (inline <style>) */
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:first-of-type a.button {
  margin-left: 0 !important;
}

/* asegúrate de que el bloque de imagen (logo) no se centre solo */
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:first-of-type .image-block {
  margin-left: 0 !important;
}

/* da un padding lateral para que logo y botón queden en la misma “columna” del diseño */
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:first-of-type .slide__content {
  padding-left: clamp(16px, 4vw, 90px) !important;
  padding-right: 0 !important;
} 






/* =========================================
   HERO Doctor en línea (kMPwfg)
   - Imágenes más grandes
   - No pegadas a esquinas (márgenes internos)
   - Derecha: primero LOGO, luego BOTÓN (aunque en HTML esté al revés)
   ========================================= */

#shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  column-gap: clamp(20px, 4vw, 80px) !important;

  /* evita “esquinas”: crea padding interno como el diseño */
  padding-inline: clamp(32px, 6vw, 140px) !important;
}

/* quitar el “hack” anterior del botón */
#shopify-section-template--19589641404527__hero_kMPwfg .button{
  position: static !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* --- IZQUIERDA: "Consultas..." más grande y no pegado --- */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="ESTRUCTURA_HOME_NG_letras_doctor_en_linea-27"]){
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;

  /* MÁS GRANDE */
  width: min(500px, 46vw) !important;
  max-width: none !important;
}

#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="ESTRUCTURA_HOME_NG_letras_doctor_en_linea-27"]) img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* --- DERECHA: LOGO más grande --- */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="logo_doctor_NG-16"]){
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: center !important;

  /* MÁS GRANDE */
  width: min(500px, 48vw) !important;
  max-width: none !important;

  /* IMPORTANTE: como en HTML el botón está antes, forzamos orden */
  order: 1 !important;
}

#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="logo_doctor_NG-16"]) img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* --- BOTÓN debajo del logo (aunque en HTML esté antes) --- */
#shopify-section-template--19589641404527__hero_kMPwfg a.button{
  grid-column: 2 !important;
  justify-self: center !important;

  /* lo bajamos y lo ponemos debajo del logo */
  margin-top: clamp(14px, 1.6vw, 30px) !important;

  /* fuerza orden para que vaya DESPUÉS del logo */
  order: 2 !important;

  /* micro ajuste horizontal extra (opcional pero recomendado) */
  transform: translateX(50px) translateY(-100px) !important;

}

/* Mobile: apilar centrado (logo y botón juntos) */
@media (max-width: 749px){
  #shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
    grid-template-columns: 1fr !important;
    padding-inline: 16px !important;
    row-gap: 14px !important;
    justify-items: center !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="ESTRUCTURA_HOME_NG_letras_doctor_en_linea-27"]),
  #shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="logo_doctor_NG-16"]){
    grid-column: 1 !important;
    justify-self: center !important;
    width: min(92vw, 680px) !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg a.button{
    grid-column: 1 !important;
    justify-self: center !important;
    margin-top: 10px !important;
  }
}






/* =========================================================
   HOME STORIES – VIEWER FULLSCREEN (como referencia)
   Pegar al final de base.css
   ========================================================= */

/* 1) Dialog a pantalla completa + todo negro (sin “contenedor”) */
.home-stories__dialog[open]{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}

.home-stories__dialog::backdrop{
  background: #000 !important; /* negro total */
}

.home-stories__dialog-inner{
  height: 100% !important;
  background: #000 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2) La imagen debe verse completa y “sin caja” */
.home-stories__viewer{
  width: min(440px, 92vw) !important;   /* ancho tipo story */
  height: min(82vh, 780px) !important;  /* alto tipo story */
  background: transparent !important;   /* sin contenedor visible */
  position: relative !important;
}

.home-stories__viewer > div{
  width: 100% !important;
  height: 100% !important;
}

.home-stories__viewer img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;       /* ✅ imagen completa */
  object-position: center !important;
  background: transparent !important;   /* que no “parezca caja” */
}

/* 3) Barra de progreso arriba, sobre el fondo negro (como referencia) */
.home-stories__progress{
  position: absolute !important;
  top: 14px !important;
  left: 18px !important;
  right: 18px !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

/* Opcional: que la barra sea un poco más “fina” */
.home-stories__progress span{
  height: 3px !important;
}

/* 4) Botón cerrar siempre arriba a la derecha */
.home-stories__close{
  top: 12px !important;
  right: 12px !important;
  z-index: 60 !important;
}

/* 5) Flechas centradas verticalmente */
.home-stories__nav{
  z-index: 60 !important;
}













/* === HERO: mover "hojita" (Artboard_19.png) a la izquierda y sobresalir arriba === */
#shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
  position: relative !important;
  overflow: visible !important; /* permite que sobresalga */
}

/* La hojita */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
#shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  /* que se vaya un poco fuera del borde superior/izquierdo */
  transform: translate(-35%, -45%) !important;

  /* tamaño responsive (ajusta si quieres) */
  width: clamp(120px, 10vw, 220px) !important;
  max-width: none !important;

  z-index: 6 !important;
  pointer-events: none !important;
}

@media (max-width: 749px){
  #shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
  #shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
    transform: translate(-25%, -35%) !important;
    width: clamp(110px, 28vw, 180px) !important;
  }
}




/* === HERO (kMPwfg): ajustes hojita + fondo completo + separación superior === */

/* 3) Separación con la sección superior */
#shopify-section-template--19589641404527__hero_kMPwfg{
  margin-top: 60px !important;
}

/* Necesario para posicionar la hojita y permitir que sobresalga */
#shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
  position: relative !important;
  overflow: visible !important;
}

/* 1) HOJITA (Artboard_19.png): un poco más a la derecha y más arriba */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
#shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  /* más a la derecha (-35% -> -10%) y más arriba (-45% -> -65%) */
  transform: translate(25%, -105%) !important;

  width: clamp(130px, 11vw, 230px) !important;
  max-width: none !important;

  z-index: 6 !important;
  pointer-events: none !important;
}






/* === FIX: que la hojita NO se corte + mover más a la derecha === */
#shopify-section-template--19589641404527__hero_kMPwfg,
#shopify-section-template--19589641404527__hero_kMPwfg .hero,
#shopify-section-template--19589641404527__hero_kMPwfg .hero__container,
#shopify-section-template--19589641404527__hero_kMPwfg .section,
#shopify-section-template--19589641404527__hero_kMPwfg .section-wrapper,
#shopify-section-template--19589641404527__hero_kMPwfg .hero-wrapper{
  overflow: visible !important;
}

/* Asegura contexto para el absoluto */
#shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
  position: relative !important;
  overflow: visible !important;
}

/* HOJITA */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
#shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  /* MÁS a la derecha y sobresaliendo más arriba */
  transform: translate(75%, -120%) !important;

  width: clamp(130px, 11vw, 240px) !important;
  max-width: none !important;

  z-index: 999 !important;
  pointer-events: none !important;
}

@media (max-width: 749px){
  #shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
  #shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
    transform: translate(35%, -105%) !important;
    width: clamp(120px, 30vw, 190px) !important;
  }
}










/* ===== Collection Banner - Ajustar proporción texto / imagen ===== */
.collection-banner {
  display: flex;
}

.collection-banner .banner-text {
  width: 55%;
  flex: 0 0 55%;
}

.collection-banner .banner-image {
  width: 45%;
  flex: 0 0 45%;
}






/* =========================================================
   COLLECTION BANNER
   - Texto más ancho
   - Imagen completa (sin recortes)
   - Título +15%
   ========================================================= */

/* Proporción texto / imagen */
.collection-banner {
  display: flex;
  min-height: unset;            /* evita recorte vertical */
  align-items: stretch;
}

.collection-banner .banner-text {
  width: 60%;
  flex: 0 0 60%;
}

.collection-banner .banner-image {
  width: 40%;
  flex: 0 0 40%;
  align-items: center;
}

/* Imagen completa, sin recorte */
.collection-banner .banner-image img {
  width: 100%;
  height: auto;                 /* clave */
  max-height: none;
  object-fit: contain;          /* muestra toda la imagen */
  display: block;
}







/* =========================================================
   COLLECTION BANNER
   - 55 / 45
   - NO recorte (la sección crece en alto para mostrar toda la imagen)
   - Forzar tamaño del H1 (aunque el theme lo fije)
   ========================================================= */

/* 1) Layout 55/45 + permitir crecer en alto */
section.collection-banner{
  display: flex !important;
  height: auto !important;
  min-height: unset !important;
  align-items: flex-start !important; /* evita “estirar” con alturas raras */
  overflow: visible !important;       /* por si el theme recorta acá */
}

section.collection-banner .banner-text{
  width: 55% !important;
  flex: 0 0 55% !important;
}

section.collection-banner .banner-image{
  width: 45% !important;
  flex: 0 0 45% !important;

  /* 2) Quitar cualquier causa de recorte del contenedor */
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: visible !important;
  aspect-ratio: auto !important;

  display: block !important; /* evita reglas flex que a veces meten height:100% */
}

/* 2) Imagen completa SIEMPRE (anula cover/height:100% del theme) */
section.collection-banner .banner-image img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  /* por si el theme mete positioning raro */
  position: static !important;
  inset: auto !important;
  transform: none !important;
}


/* === Product trust badges: texto en negro === */
.product-trust-badges__text {
  color: #000000 !important;
  opacity: 1 !important;
}

/* === Product recommendations: texto "Lo que normalmente se suma..." en negro (GLOBAL) === */
product-recommendations .text-block.h4 p,
product-recommendations .text-block.h4 {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Ocultar controles de paginación del slideshow */
.slideshow-control {
  display: none !important;
}

/* Alternativa más específica si la anterior no funciona */
button.slideshow-control.button.button-unstyled {
  display: none !important;
  visibility: hidden !important;
}














/* =========================================================
   HOME STORIES – Alinear badge + icon y animación hover
   ========================================================= */

/* Aseguramos contexto */
.home-stories__card{
  position: relative;
}

/* --- BADGE (NUEVO) --- */
.home-stories__badge{
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%);
  
  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* --- ICON WRAP --- */
.home-stories__icon-wrap{
  left: 50%;
  right: auto;
  

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* --- HOVER: ambos desaparecen con animación --- */
.home-stories__card:hover .home-stories__badge,
.home-stories__card:hover .home-stories__icon-wrap{
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}

/* Mobile: ajustamos un poco las distancias */
@media (max-width: 749px){
  .home-stories__icon-wrap{
    bottom: 64px;
  }

  .home-stories__badge{
    bottom: 14px;
  }
}

/* =========================================================
   HOME STORIES – Badge por encima del icono (stacking)
   ========================================================= */

/* El icono queda atrás */
.home-stories__icon-wrap{
  z-index: 2;
}

/* El badge (texto NUEVO) queda delante */
.home-stories__badge{
  z-index: 3;
}













/* =========================================================
   HOME STORIES – Viewer: imagen completa (sin recorte) + bordes redondeados
   (solo se “recortan” las esquinas por el border-radius)
   ========================================================= */

/* El viewer (no importa que tenga width/height ya definidos por tu CSS) */
.home-stories__dialog-inner .home-stories__viewer{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Wrapper inline que está dentro del viewer */
.home-stories__dialog-inner .home-stories__viewer > div{
  width: 100% !important;
  height: 100% !important;

  border-radius: 18px !important;
  overflow: hidden !important;   /* <- aquí se recortan SOLO las esquinas */
  background: #000 !important;   /* barras negras si sobran espacios */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Imagen: que se vea COMPLETA, sin cortar arriba/abajo */
.home-stories__dialog-inner .home-stories__viewer img{
  /* importantísimo: NO forzar width/height 100% */
  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  border-radius: 18px !important;
}













/* =========================================================
   HOME STORIES – Progress bar animada (igual estilo stories)
   Requiere que el JS ponga .is-active y --hs-duration
   ========================================================= */

.home-stories__dialog-inner .home-stories__progress{
  position: absolute;
  top: 14px;
  left: 16px;
  right: 56px; /* deja espacio al botón cerrar */
  z-index: 30;

  display: flex;
  gap: 8px;
  align-items: center;

  pointer-events: none; /* no estorba clicks */
}

/* Cada “segmento” */
.home-stories__dialog-inner .home-stories__progress span{
  flex: 1 1 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28); /* tenue */
  position: relative;
  overflow: hidden;
}

/* Relleno interno (lo que se “pinta”) */
.home-stories__dialog-inner .home-stories__progress span::after{
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(255,255,255,0.95); /* intenso */
  border-radius: inherit;
}

/* Los ya completados se quedan llenos */
.home-stories__dialog-inner .home-stories__progress span.is-done::after{
  width: 100%;
}

/* El activo se anima según la duración que el JS pone en --hs-duration */
.home-stories__dialog-inner .home-stories__progress span.is-active::after{
  animation: hsProgressFill var(--hs-duration, 3500ms) linear forwards;
}

@keyframes hsProgressFill{
  from { width: 0%; }
  to   { width: 100%; }
}

/* Respeto a usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  .home-stories__dialog-inner .home-stories__progress span.is-active::after{
    animation: none;
    width: 100%;
  }
}



















/* =========================================================
   HOME STORIES – Topbar (icono + titulo) dentro del modal
   ========================================================= */

.home-stories__dialog-inner .home-stories__topbar{
  position: absolute;
  top: 14px;
  left: 16px;
  right: 56px; /* espacio para el botón cerrar */
  z-index: 40;

  display: flex;
  align-items: center;
  justify-content: space-between;

  pointer-events: none;
}

.home-stories__dialog-inner .home-stories__topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-stories__dialog-inner .home-stories__topbar-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 34px;

  border: 2px solid rgba(255,255,255,0.75);
}

.home-stories__dialog-inner .home-stories__topbar-avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-stories__dialog-inner .home-stories__topbar-title{
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;

  white-space: nowrap;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Deja la barra de progreso debajo del topbar */
.home-stories__dialog-inner .home-stories__progress{
  top: 60px; /* ajusta si quieres más separación */
  left: 16px;
  right: 56px;
  z-index: 39;
}













/* ===================== HOME STORIES - Centrar rail ===================== */
/* Centra el grupo completo de cards dentro del ancho disponible */
.home-stories .home-stories__rail{
  display: flex !important;            /* por si viene como grid o block */
  justify-content: center !important;  /* centra horizontal */
  align-items: stretch !important;
  flex-wrap: wrap !important;          /* si no caben, que bajen y queden centradas */
  gap: 16px !important;                /* ajusta si ya tienes gap en tu CSS */
  width: 100% !important;
  margin-inline: auto !important;
}

/* Por si tu CSS original tenía "justify-content: flex-start" o padding raro */
.home-stories .home-stories__rail{
  padding-inline: 0 !important;
}

/* Si en tu implementación el rail es horizontal con scroll (overflow-x),
   esto centra visualmente cuando NO hay scroll. Si hay scroll, lo normal
   es que quede alineado a la izquierda (UX estándar). */
@media (min-width: 990px){
  .home-stories .home-stories__rail{
    scroll-snap-type: x mandatory; /* no molesta si no usas scroll */
  }
}







/* ==========================================
   COLLECTION BANNER – Imagen a full height
   (quita espacios arriba/abajo)
========================================== */

/* El contenedor del banner debe recortar lo que sobresalga */
section.collection-banner {
  overflow: hidden;
}

/* La columna de la imagen ocupa todo el alto del banner */
section.collection-banner .banner-image {
  position: relative;
  display: block;       /* quita el flex centrado que causa "espacios" */
  height: 100%;
  overflow: hidden;
}

/* La imagen debe llenar todo el bloque */
section.collection-banner .banner-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;        /* clave: cubre todo el alto */
  object-position: center center !important;
  display: block;
}

/* Asegura que la sección tenga altura definida (ya tienes min-height:420px) */
section.collection-banner {
  min-height: 420px;
  align-items: stretch; /* para que ambos lados estiren a la misma altura */
}

/* Responsive: en móvil apila y define alto visible para la imagen */
@media (max-width: 749px) {
  section.collection-banner {
    flex-direction: column;
    min-height: auto;
  }

  section.collection-banner .banner-text,
  section.collection-banner .banner-image {
    width: 100%;
  }

  section.collection-banner .banner-image {
    height: 240px; /* ajusta a gusto: 220–320 */
  }
}


/* =========================================================
   COLLECTION BANNERS – AJUSTE TIPOGRÁFICO GLOBAL
   Aplica a TODOS los banners de colección
   (sobrescribe el <style> inline del section)
========================================================= */

/* TITULOS */
section.collection-banner .banner-text h1 {
  font-size: 80px !important;     /* antes 48px */
  line-height: 1.05 !important;
  font-weight: 700 !important;
  
}

section.collection-banner .banner-text{
  padding-top: 30px;
  padding-bottom: 30px;
}

/* TEXTO DESCRIPTIVO */
section.collection-banner .banner-text p {
  font-size: 22px !important;     /* antes 18px */
  line-height: 1.5 !important;
  
  margin-bottom: 32px !important;
}

/* RESPONSIVE – MÓVIL */
@media (max-width: 768px) {
  section.collection-banner .banner-text h1 {
    font-size: 40px !important;
    line-height: 1.1 !important;
  }

  section.collection-banner .banner-text p {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }
}










/* =========================================================
   ICONO OPCIONAL EN BANNER DE COLECCIÓN
   Solo aparece si existe el metafield banner_icon_image
   ========================================================= */

section.collection-banner .banner-text{
  position: relative;
}

section.collection-banner .banner-icon{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* no bloquea clics */
}

section.collection-banner .banner-icon__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media screen and (min-width: 990px) {
  .collection .grid[data-desktop-columns="3"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}









/* =========================================================
   COLLECTION GRID (esta sección) -> 4 columnas en pantallas grandes
   Pegar al FINAL de base.css
========================================================= */

/* 1) Desktop normal (mantén el comportamiento que ya tienes, si quieres 3 columnas) */
@media (min-width: 750px) and (max-width: 1199px) {
  #shopify-section-template--19589641306223__main
  .main-collection-grid
  .product-grid.product-grid--template--19589641306223__main.product-grid--grid {
    /* tu layout actual (auto-fill) */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 56px 70px !important; /* si 110px te queda muy abierto */
  }
}

/* 2) Pantallas grandes: FORZAR 4 columnas */
@media (min-width: 1200px) {
  #shopify-section-template--19589641306223__main
  .main-collection-grid
  .product-grid.product-grid--template--19589641306223__main.product-grid--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* ✅ 4 columnas fijas */
    gap: 48px 48px !important; /* ✅ reduce el gap para que entren */
  }

  /* Ajusta el tamaño máximo de la card para que entren 4 cómodas */
  #shopify-section-template--19589641306223__main
  .main-collection-grid product-card.product-card {
    max-width: 280px !important; /* prueba 260–300 según cómo lo veas */
  }

  /* Ajusta ancho de la galería (imagen) para que acompañe el nuevo ancho */
  #shopify-section-template--19589641306223__main
  .main-collection-grid .card-gallery {
    width: 220px !important; /* prueba 210–240 */
  }

  #shopify-section-template--19589641306223__main
  .main-collection-grid .product-media-container {
    max-height: 220px !important; /* acompaña al width */
  }
}

/* ===== Product tabs + Contraindicaciones (Nature's Garden) ===== */

/* Color y tamaño de los tabs */
.ng-tabs__tab{
  color: #C79859;
  font-size: 1.15rem;   /* más grande */
  font-weight: 700;
  opacity: 1;           /* quitamos el gris */
}

/* Subrayado SOLO para el tab activo */
.ng-tabs__tab.is-active{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* (Opcional) mantener el borde inferior del header suave */
.ng-tabs__header{
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* Contenido (texto) de los tabs en negro */
.ng-tabs__panel,
.ng-tabs__panel *{
  color: #000 !important;
}

/* Título de Contraindicaciones en el mismo color */
.ng-contra__title{
  color: #C79859;
  font-size: 1.15rem;  /* que se vea consistente con tabs */
  font-weight: 700;
}

/* Contenido de Contraindicaciones en negro */
.ng-contra__content,
.ng-contra__content *{
  color: #000 !important;
}






/* =========================================================
   PRODUCT PAGE: 50% media / 50% details (DESKTOP)
   ========================================================= */

/* Mobile: se mantiene en una sola columna (default del theme) */

/* Desktop */
@media (min-width: 990px) {
  /* Contenedor de las 2 secciones */
  .product-information__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; /* 50 / 50 */
    column-gap: 32px !important;
    align-items: start !important;
  }

  /* Asegurar que ambas columnas puedan “encogerse” sin romper el layout */
  .product-information__media,
  .product-details {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* El theme a veces pone max-width a la columna derecha: lo anulamos */
  .product-details {
    max-width: none !important;
  }
}

/* =========================================================
   ADD TO CART: cambiar color (botón principal)
   (Ajusta el HEX a tu color final si quieres otro)
   ========================================================= */

.product-form-buttons .add-to-cart-button,
.add-to-cart-button.button {
  background-color: #c79a59 !important;   /* <- color nuevo */
  border-color: #c79a59 !important;
  color: #ffffff !important;
}

.product-form-buttons .add-to-cart-button:hover,
.add-to-cart-button.button:hover {
  background-color: #b88a4d !important;   /* <- hover */
  border-color: #b88a4d !important;
  color: #ffffff !important;
}

/* Si el theme aplica estados especiales */
.add-to-cart-button.button:focus,
.add-to-cart-button.button:active {
  background-color: #b88a4d !important;
  border-color: #b88a4d !important;
  color: #ffffff !important;
}

/* =========================================================
   PRODUCT PAGE – padding lateral DESKTOP (default)
   ========================================================= */

/* Contenedor principal del producto */
.product-information__grid {
  padding-left: 120px !important;
  padding-right: 120px !important;
}

/* Aire entre imagen y texto */
.product-information__media {
  padding-right: 32px;
}

.product-details {
  padding-left: 32px;
}

/* =========================================================
   PRODUCT FORM: botón ancho “contenido” + alineación qty
   ========================================================= */

:root{
  --ng-accent: #c79a59; /* mismo color del botón (ajústalo si cambiaste el hex) */
  --ng-btn-h: 52px;     /* altura uniforme */
}

/* 1) Poner qty + add-to-cart en la misma fila y centrados */
.product-form-buttons{
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  justify-content: flex-start !important;
}

/* 2) Botón Agregar al carrito: NO full width */
.product-form-buttons .add-to-cart-button{
  width: auto !important;
  min-width: unset !important;
  max-width: none !important;
  flex: 0 0 auto !important;

  height: var(--ng-btn-h) !important;
  padding: 0 28px !important; /* “un poquito más” que el texto */
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* 3) Cantidad: misma altura, alineado y borde color accent */
.product-form-buttons .quantity-selector{
  height: var(--ng-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;

  border: 1px solid var(--ng-accent) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* Asegurar que botones + input estén centrados y no “subidos” */
.product-form-buttons .quantity-selector button,
.product-form-buttons .quantity-selector input{
  height: var(--ng-btn-h) !important;
  line-height: var(--ng-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* El input suele desalinear por padding/alto */
.product-form-buttons .quantity-selector input{
  line-height: normal !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* =========================================================
   TABS: títulos en MAYÚSCULAS
   ========================================================= */
.ng-tabs__tab{
  text-transform: uppercase !important;
}

/* =========================================================
   TABS: mismo tamaño de letra que el contenido (body)
   ========================================================= */

/* hereda el mismo tamaño que el texto normal del theme */
.ng-tabs__tab{
  text-transform: uppercase !important;
  font-size: inherit !important;         /* igual al contenido */
  line-height: inherit !important;
  font-weight: inherit !important;       /* opcional: si no quieres negrita extra */
  letter-spacing: normal !important;
}

/* por si el contenedor del tablist tiene otra tipografía */
.ng-tabs__header{
  font-size: inherit !important;
  line-height: inherit !important;
}





/* =========================================================
   FIX: quitar margin-top que desalineaba el botón add-to-cart
   ========================================================= */

/* El botón en sí */
.product-form-buttons .add-to-cart-button{
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  translate: none !important; /* por si algún estilo lo mueve */
}

/* Por si el margin viene del contenedor del botón */
.product-form-buttons add-to-cart-component,
.product-form-buttons [ref="addToCartButtonContainer"],
.product-form-buttons span[style*="--add-to-cart-font-case"]{
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  padding-top: 0 !important;
}

/* Asegura alineación vertical exacta dentro de la fila */
.product-form-buttons{
  align-items: center !important;
}






/* =========================================================
   TABS (NG): bullets dorados + alineación (no se salen del div)
   ========================================================= */

.ng-tabs__panel .metafield-rich_text_field ul{
  list-style: none !important;   /* quitamos viñeta nativa */
  padding-left: 0 !important;    /* quitamos sangría default */
  margin: 0 !important;
}

.ng-tabs__panel .metafield-rich_text_field li{
  position: relative !important;
  padding-left: 18px !important; /* espacio para la viñeta */
  margin: 8px 0 !important;
}

.ng-tabs__panel .metafield-rich_text_field li::before{
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;            /* queda alineado con la primera línea */
  color: #c79a59 !important;    /* color solicitado */
  font-weight: 900 !important;
  line-height: inherit !important;
}

/* opcional: asegura que el panel no tenga padding raro */
.ng-tabs__panel{
  padding-left: 0 !important;
}





/* ================================
   PRODUCT PAGE: color negro + precio más grande
   ================================ */

/* Descripción del producto a negro */
main .product-details rte-formatter,
main .product-details rte-formatter *{
  color: #000 !important;
}

/* Precio a negro */
main .product-details product-price{
  --color: #000 !important; /* variable usada por el componente */
}

/* Precio más grande y destacado */
main .product-details product-price .price{
  color: #000 !important;
  font-size: 24px !important;   /* puedes subir a 26px si lo quieres más fuerte */
  font-weight: 700 !important;
  line-height: 1.2 !important;
}








/* === Product Gallery Custom (PGC) === */
.pgc-gallery {
  display: grid;
  gap: 14px;
}

.pgc-main {
  width: 100%;
}

.pgc-main__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.pgc-thumbs {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  gap: 10px;
  align-items: center;
}

.pgc-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.pgc-thumb {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 0;
  background: transparent;
  flex: 0 0 auto;
  cursor: pointer;
  width: 78px;
  height: 78px;
  overflow: hidden;
}

.pgc-thumb.is-active {
  border-color: rgba(0,0,0,.45);
}

.pgc-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pgc-nav {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 22px;
}

@media (max-width: 749px) {
  .pgc-thumb { width: 64px; height: 64px; }
}










/* === PGC: fixed main image size like design === */
.pgc-main {
  width: 100%;
  max-width: 720px;         /* ajusta si quieres un poco más/menos ancho */
  margin: 0 auto;
}

/* “marco” fijo para que no cambie de tamaño al cambiar de imagen */
.pgc-main__img {
  width: 100%;
  height: 520px;            /* tamaño fijo (referencia del diseño) */
  object-fit: contain;      /* mantiene proporción sin recortar */
  background: transparent;
  border-radius: 0;         /* en el diseño no hay bordes redondeados */
  display: block;
}

/* Responsive */
@media (max-width: 989px) {
  .pgc-main__img { height: 420px; }
}
@media (max-width: 749px) {
  .pgc-main__img { height: 320px; }
}

/* === PGC: arrows like design (green triangles) === */
.pgc-nav {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-size: 0;             /* ocultamos el ‹ › */
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* Triángulo */
.pgc-nav::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Izquierda */
.pgc-nav--prev::before {
  border-right: 14px solid #6f8d4b;  /* verde del diseño (ajústalo si quieres) */
}

/* Derecha */
.pgc-nav--next::before {
  border-left: 14px solid #6f8d4b;
}

/* Hover */
.pgc-nav:hover::before {
  filter: brightness(0.9);
}




/* =========================================================
   PGC – Ajustes para que se vea como el diseño
   1) Flechas superpuestas (no ocupan columnas)
   2) Imagen grande en “marco” fijo centrado y sin huecos raros
========================================================= */

/* 1) Cambiamos el layout de thumbs: ya NO 3 columnas */
.pgc-thumbs{
  display: block;            /* en vez de grid */
  position: relative;
  margin-top: 16px;          /* separa de la imagen grande */
}

/* El track queda centrado y con padding lateral para no chocar con flechas */
.pgc-track{
  justify-content: center;   /* centra thumbs como en tu diseño */
  padding: 0 56px;           /* espacio interno para flechas superpuestas */
  overflow: hidden;          /* ocultar el scroll visible (si quieres) */
}

/* Flechas flotantes encima, a los lados del track */
.pgc-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 0;              /* ocultar ‹ › */
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.pgc-nav--prev{ left: 10px; }
.pgc-nav--next{ right: 10px; }

/* Triángulos verdes */
.pgc-nav::before{
  content:"";
  width:0; height:0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.pgc-nav--prev::before{ border-right: 16px solid #6f8d4b; }
.pgc-nav--next::before{ border-left: 16px solid #6f8d4b; }

/* 2) Imagen grande: marco fijo + centrado real */
.pgc-main{
  display: flex;
  justify-content: center;
}

.pgc-main__img{
  width: min(720px, 100%);
  height: 440px;             /* ajusta a tu diseño */
  object-fit: contain;
  object-position: center center;  /* asegura centrado */
  display: block;
  border-radius: 0;
}

.pgc-thumb__img{
  margin: 0px !important;
}

/* Responsive */
@media (max-width: 989px){
  .pgc-main__img{ height: 360px; }
  .pgc-track{ padding: 0 46px; }
  .pgc-nav--prev{ left: 6px; }
  .pgc-nav--next{ right: 6px; }
}

@media (max-width: 749px){
  .pgc-main__img{ height: 300px; }
  .pgc-track{ padding: 0 42px; }
}

/* (Opcional) si aún ves hueco arriba con algunas imágenes
   puedes probar alinear un poco hacia arriba:
   object-position: center 40%;
*/









/* =========================================================
   HOME STORIES
   ========================================================= */

.home-stories__header {
  text-align: left;
  margin-bottom: 24px;
}

.home-stories__title {
  margin: 0;
  font-family: var(--hs-font-family);
  font-weight: var(--hs-font-weight);
  text-transform: var(--hs-text-transform);
  color: var(--hs-color);
  font-size: var(--hs-font-size-desktop);
  letter-spacing: 0.02em;
}

.home-stories__subtitle {
  margin: 6px 0 0;
  font-family: var(--hs-font-family);
  font-weight: var(--hs-font-weight);
  text-transform: var(--hs-text-transform);
  color: var(--hs-color);
  font-size: var(--hs-font-size-desktop);
  font-style: italic;
}

@media (max-width: 749px) {
  .home-stories__title {
    font-size: var(--hs-font-size-mobile);
  }
  .home-stories__subtitle {
    font-size: var(--hs-font-size-mobile);
  }
}

/* =======================
   Rail / Carrusel
   ======================= */

.home-stories__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 18px;
}

@media (max-width: 749px) {
  .home-stories__rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }

  .home-stories__rail::-webkit-scrollbar {
    display: none;
  }
}

/* =======================
   Card
   ======================= */

.home-stories__card {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (max-width: 749px) {
  .home-stories__card {
    scroll-snap-align: start;
  }
}

/* 🔧 AJUSTE REAL: card más alta para evitar recorte */
.home-stories__card-media {
  position: relative;
  height: 420px;        /* ⬅️ antes 380px */
  min-height: 420px;    /* ⬅️ acompaña el height */
  border-radius: 18px;
  overflow: hidden;
  background: rgb(var(--color-foreground-rgb) / 0.05);
}

.home-stories__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge */

.home-stories__badge {
  position: absolute;
  left: 12px;
  bottom: 16px;
  background: #f1d04b;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

/* =======================
   Icono redondo inferior
   (NO SE TOCA)
   ======================= */

.home-stories__icon-wrap {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: rgb(var(--color-background-rgb) / 0.95);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.15);
  z-index: 3;

  overflow: hidden;
  display: block !important;
}

.home-stories__icon {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
  transform: scale(1.75);
  transform-origin: center;
}

/* =======================
   MODAL / STORIES VIEWER
   ======================= */

.home-stories__dialog {
  width: min(420px, 94vw);
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}

.home-stories__dialog::backdrop {
  background: rgb(0 0 0 / 0.65);
}

.home-stories__dialog-inner {
  position: relative;
  height: min(78vh, 720px);
  background: #000;
  color: #fff;
}

/* Close */

.home-stories__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgb(255 255 255 / 0.18);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 5;
}

/* Progress bar */

.home-stories__progress {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: grid;
  grid-auto-flow: column;
  gap: 6px;
  z-index: 4;
}

.home-stories__progress span {
  height: 3px;
  background: rgb(255 255 255 / 0.25);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.home-stories__progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: #fff;
}

.home-stories__progress span.is-active::after {
  transform: translateX(0);
  transition: transform var(--hs-duration, 3500ms) linear;
}

.home-stories__progress span.is-done::after {
  transform: translateX(0);
}

/* Viewer */

.home-stories__viewer {
  height: 100%;
}

.home-stories__viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-stories__text {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 6px 18px rgb(0 0 0 / 0.45);
}

/* Navigation */

.home-stories__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: rgb(255 255 255 / 0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 5;
}

.home-stories__nav--prev { left: 10px; }
.home-stories__nav--next { right: 10px; }


/* =========================================================
   HOME STORIES – ICONO INFERIOR (IMAGEN MÁS GRANDE)
   ========================================================= */

.home-stories__icon-wrap {
  bottom: 35px;
  background: transparent;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.15);
  overflow: hidden; /* asegura recorte perfecto del círculo */
}

/* Imagen más grande, cubre todo el círculo */
.home-stories__icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;

  transform: scale(1.25); /* ⬅️ CLAVE: elimina lo transparente */
  transform-origin: center;
}





/* =========================================================
   HOME STORIES – ESPACIADOS + HOVER SCALE
   (pegar al final de base.css)
   ========================================================= */

/* 1) Más espacio entre header y rail (doble del actual: 24px -> 48px) */
.home-stories__header {
  margin-bottom: 48px !important;
}

/* 2) Cards con 50% más separación (gap: 18px -> 27px) */
.home-stories__rail {
  gap: 27px !important;
}

/* 3) Hover: agrandar 20% con animación suave */
.home-stories__card {
  transition: transform 220ms ease, box-shadow 220ms ease;
  transform-origin: center;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .home-stories__card:hover {
    transform: scale(1.1);
    z-index: 10; /* para que no quede “tapada” por las otras */
  }
}







/* ================================
   SLIDESHOW HOME (slide 1) - Alinear logo "Te hace bien" con el botón
   ================================ */

#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:first-of-type .group-block-content.layout-panel-flex {
  /* el contenedor es flex en columna -> esto alinea a la izquierda */
  align-items: flex-start !important;
}

/* quita el desplazamiento negativo actual del botón (inline <style>) */
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:first-of-type a.button {
  margin-left: 0 !important;
}

/* asegúrate de que el bloque de imagen (logo) no se centre solo */
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:first-of-type .image-block {
  margin-left: 0 !important;
}

/* da un padding lateral para que logo y botón queden en la misma “columna” del diseño */
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:first-of-type .slide__content {
  padding-left: clamp(16px, 4vw, 90px) !important;
  padding-right: 0 !important;
} 






/* =========================================
   HERO Doctor en línea (kMPwfg)
   - Imágenes más grandes
   - No pegadas a esquinas (márgenes internos)
   - Derecha: primero LOGO, luego BOTÓN (aunque en HTML esté al revés)
   ========================================= */

#shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  column-gap: clamp(20px, 4vw, 80px) !important;

  /* evita “esquinas”: crea padding interno como el diseño */
  padding-inline: clamp(32px, 6vw, 140px) !important;
}

/* quitar el “hack” anterior del botón */
#shopify-section-template--19589641404527__hero_kMPwfg .button{
  position: static !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* --- IZQUIERDA: "Consultas..." más grande y no pegado --- */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="ESTRUCTURA_HOME_NG_letras_doctor_en_linea-27"]){
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;

  /* MÁS GRANDE */
  width: min(500px, 46vw) !important;
  max-width: none !important;
}

#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="ESTRUCTURA_HOME_NG_letras_doctor_en_linea-27"]) img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* --- DERECHA: LOGO más grande --- */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="logo_doctor_NG-16"]){
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: center !important;

  /* MÁS GRANDE */
  width: min(500px, 48vw) !important;
  max-width: none !important;

  /* IMPORTANTE: como en HTML el botón está antes, forzamos orden */
  order: 1 !important;
}

#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="logo_doctor_NG-16"]) img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* --- BOTÓN debajo del logo (aunque en HTML esté antes) --- */
#shopify-section-template--19589641404527__hero_kMPwfg a.button{
  grid-column: 2 !important;
  justify-self: center !important;

  /* lo bajamos y lo ponemos debajo del logo */
  margin-top: clamp(14px, 1.6vw, 30px) !important;

  /* fuerza orden para que vaya DESPUÉS del logo */
  order: 2 !important;

  /* micro ajuste horizontal extra (opcional pero recomendado) */
  transform: translateX(50px) translateY(-100px) !important;

}

/* Mobile: apilar centrado (logo y botón juntos) */
@media (max-width: 749px){
  #shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
    grid-template-columns: 1fr !important;
    padding-inline: 16px !important;
    row-gap: 14px !important;
    justify-items: center !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="ESTRUCTURA_HOME_NG_letras_doctor_en_linea-27"]),
  #shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="logo_doctor_NG-16"]){
    grid-column: 1 !important;
    justify-self: center !important;
    width: min(92vw, 680px) !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg a.button{
    grid-column: 1 !important;
    justify-self: center !important;
    margin-top: 10px !important;
  }
}






/* =========================================================
   HOME STORIES – VIEWER FULLSCREEN (como referencia)
   Pegar al final de base.css
   ========================================================= */

/* 1) Dialog a pantalla completa + todo negro (sin “contenedor”) */
.home-stories__dialog[open]{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}

.home-stories__dialog::backdrop{
  background: #000 !important; /* negro total */
}

.home-stories__dialog-inner{
  height: 100% !important;
  background: #000 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2) La imagen debe verse completa y “sin caja” */
.home-stories__viewer{
  width: min(440px, 92vw) !important;   /* ancho tipo story */
  height: min(82vh, 780px) !important;  /* alto tipo story */
  background: transparent !important;   /* sin contenedor visible */
  position: relative !important;
}

.home-stories__viewer > div{
  width: 100% !important;
  height: 100% !important;
}

.home-stories__viewer img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;       /* ✅ imagen completa */
  object-position: center !important;
  background: transparent !important;   /* que no “parezca caja” */
}

/* 3) Barra de progreso arriba, sobre el fondo negro (como referencia) */
.home-stories__progress{
  position: absolute !important;
  top: 14px !important;
  left: 18px !important;
  right: 18px !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

/* Opcional: que la barra sea un poco más “fina” */
.home-stories__progress span{
  height: 3px !important;
}

/* 4) Botón cerrar siempre arriba a la derecha */
.home-stories__close{
  top: 12px !important;
  right: 12px !important;
  z-index: 60 !important;
}

/* 5) Flechas centradas verticalmente */
.home-stories__nav{
  z-index: 60 !important;
}













/* === HERO: mover "hojita" (Artboard_19.png) a la izquierda y sobresalir arriba === */
#shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
  position: relative !important;
  overflow: visible !important; /* permite que sobresalga */
}

/* La hojita */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
#shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  /* que se vaya un poco fuera del borde superior/izquierdo */
  transform: translate(-35%, -45%) !important;

  /* tamaño responsive (ajusta si quieres) */
  width: clamp(120px, 10vw, 220px) !important;
  max-width: none !important;

  z-index: 6 !important;
  pointer-events: none !important;
}

@media (max-width: 749px){
  #shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
  #shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
    transform: translate(-25%, -35%) !important;
    width: clamp(110px, 28vw, 180px) !important;
  }
}




/* === HERO (kMPwfg): ajustes hojita + fondo completo + separación superior === */

/* 3) Separación con la sección superior */
#shopify-section-template--19589641404527__hero_kMPwfg{
  margin-top: 60px !important;
}

/* Necesario para posicionar la hojita y permitir que sobresalga */
#shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
  position: relative !important;
  overflow: visible !important;
}

/* 1) HOJITA (Artboard_19.png): un poco más a la derecha y más arriba */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
#shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  /* más a la derecha (-35% -> -10%) y más arriba (-45% -> -65%) */
  transform: translate(25%, -105%) !important;

  width: clamp(130px, 11vw, 230px) !important;
  max-width: none !important;

  z-index: 6 !important;
  pointer-events: none !important;
}






/* === FIX: que la hojita NO se corte + mover más a la derecha === */
#shopify-section-template--19589641404527__hero_kMPwfg,
#shopify-section-template--19589641404527__hero_kMPwfg .hero,
#shopify-section-template--19589641404527__hero_kMPwfg .hero__container,
#shopify-section-template--19589641404527__hero_kMPwfg .section,
#shopify-section-template--19589641404527__hero_kMPwfg .section-wrapper,
#shopify-section-template--19589641404527__hero_kMPwfg .hero-wrapper{
  overflow: visible !important;
}

/* Asegura contexto para el absoluto */
#shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper{
  position: relative !important;
  overflow: visible !important;
}

/* HOJITA */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
#shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  /* MÁS a la derecha y sobresaliendo más arriba */
  transform: translate(75%, -120%) !important;

  width: clamp(130px, 11vw, 240px) !important;
  max-width: none !important;

  z-index: 999 !important;
  pointer-events: none !important;
}

@media (max-width: 749px){
  #shopify-section-template--19589641404527__hero_kMPwfg .image-block:has(img[src*="Artboard_19"]),
  #shopify-section-template--19589641404527__hero_kMPwfg .shopify-block.image:has(img[src*="Artboard_19"]){
    transform: translate(35%, -105%) !important;
    width: clamp(120px, 30vw, 190px) !important;
  }
}










/* ===== Collection Banner - Ajustar proporción texto / imagen ===== */
.collection-banner {
  display: flex;
}

.collection-banner .banner-text {
  width: 55%;
  flex: 0 0 55%;
}

.collection-banner .banner-image {
  width: 45%;
  flex: 0 0 45%;
}






/* =========================================================
   COLLECTION BANNER
   - Texto más ancho
   - Imagen completa (sin recortes)
   - Título +15%
   ========================================================= */

/* Proporción texto / imagen */
.collection-banner {
  display: flex;
  min-height: unset;            /* evita recorte vertical */
  align-items: stretch;
}

.collection-banner .banner-text {
  width: 60%;
  flex: 0 0 60%;
}

.collection-banner .banner-image {
  width: 40%;
  flex: 0 0 40%;
  align-items: center;
}

/* Imagen completa, sin recorte */
.collection-banner .banner-image img {
  width: 100%;
  height: auto;                 /* clave */
  max-height: none;
  object-fit: contain;          /* muestra toda la imagen */
  display: block;
}







/* =========================================================
   COLLECTION BANNER
   - 55 / 45
   - NO recorte (la sección crece en alto para mostrar toda la imagen)
   - Forzar tamaño del H1 (aunque el theme lo fije)
   ========================================================= */

/* 1) Layout 55/45 + permitir crecer en alto */
section.collection-banner{
  display: flex !important;
  height: auto !important;
  min-height: unset !important;
  align-items: flex-start !important; /* evita “estirar” con alturas raras */
  overflow: visible !important;       /* por si el theme recorta acá */
}

section.collection-banner .banner-text{
  width: 55% !important;
  flex: 0 0 55% !important;
}

section.collection-banner .banner-image{
  width: 45% !important;
  flex: 0 0 45% !important;

  /* 2) Quitar cualquier causa de recorte del contenedor */
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: visible !important;
  aspect-ratio: auto !important;

  display: block !important; /* evita reglas flex que a veces meten height:100% */
}

/* 2) Imagen completa SIEMPRE (anula cover/height:100% del theme) */
section.collection-banner .banner-image img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  /* por si el theme mete positioning raro */
  position: static !important;
  inset: auto !important;
  transform: none !important;
}


/* === Product trust badges: texto en negro === */
.product-trust-badges__text {
  color: #000000 !important;
  opacity: 1 !important;
}

/* === Product recommendations: texto "Lo que normalmente se suma..." en negro (GLOBAL) === */
product-recommendations .text-block.h4 p,
product-recommendations .text-block.h4 {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Ocultar controles de paginación del slideshow */
.slideshow-control {
  display: none !important;
}

/* Alternativa más específica si la anterior no funciona */
button.slideshow-control.button.button-unstyled {
  display: none !important;
  visibility: hidden !important;
}














/* =========================================================
   HOME STORIES – Alinear badge + icon y animación hover
   ========================================================= */

/* Aseguramos contexto */
.home-stories__card{
  position: relative;
}

/* --- BADGE (NUEVO) --- */
.home-stories__badge{
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%);
  
  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* --- ICON WRAP --- */
.home-stories__icon-wrap{
  left: 50%;
  right: auto;
  

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* --- HOVER: ambos desaparecen con animación --- */
.home-stories__card:hover .home-stories__badge,
.home-stories__card:hover .home-stories__icon-wrap{
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}

/* Mobile: ajustamos un poco las distancias */
@media (max-width: 749px){
  .home-stories__icon-wrap{
    bottom: 64px;
  }

  .home-stories__badge{
    bottom: 14px;
  }
}

/* =========================================================
   HOME STORIES – Badge por encima del icono (stacking)
   ========================================================= */

/* El icono queda atrás */
.home-stories__icon-wrap{
  z-index: 2;
}

/* El badge (texto NUEVO) queda delante */
.home-stories__badge{
  z-index: 3;
}













/* =========================================================
   HOME STORIES – Viewer: imagen completa (sin recorte) + bordes redondeados
   (solo se “recortan” las esquinas por el border-radius)
   ========================================================= */

/* El viewer (no importa que tenga width/height ya definidos por tu CSS) */
.home-stories__dialog-inner .home-stories__viewer{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Wrapper inline que está dentro del viewer */
.home-stories__dialog-inner .home-stories__viewer > div{
  width: 100% !important;
  height: 100% !important;

  border-radius: 18px !important;
  overflow: hidden !important;   /* <- aquí se recortan SOLO las esquinas */
  background: #000 !important;   /* barras negras si sobran espacios */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Imagen: que se vea COMPLETA, sin cortar arriba/abajo */
.home-stories__dialog-inner .home-stories__viewer img{
  /* importantísimo: NO forzar width/height 100% */
  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  border-radius: 18px !important;
}













/* =========================================================
   HOME STORIES – Progress bar animada (igual estilo stories)
   Requiere que el JS ponga .is-active y --hs-duration
   ========================================================= */

.home-stories__dialog-inner .home-stories__progress{
  position: absolute;
  top: 14px;
  left: 16px;
  right: 56px; /* deja espacio al botón cerrar */
  z-index: 30;

  display: flex;
  gap: 8px;
  align-items: center;

  pointer-events: none; /* no estorba clicks */
}

/* Cada “segmento” */
.home-stories__dialog-inner .home-stories__progress span{
  flex: 1 1 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28); /* tenue */
  position: relative;
  overflow: hidden;
}

/* Relleno interno (lo que se “pinta”) */
.home-stories__dialog-inner .home-stories__progress span::after{
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(255,255,255,0.95); /* intenso */
  border-radius: inherit;
}

/* Los ya completados se quedan llenos */
.home-stories__dialog-inner .home-stories__progress span.is-done::after{
  width: 100%;
}

/* El activo se anima según la duración que el JS pone en --hs-duration */
.home-stories__dialog-inner .home-stories__progress span.is-active::after{
  animation: hsProgressFill var(--hs-duration, 3500ms) linear forwards;
}

@keyframes hsProgressFill{
  from { width: 0%; }
  to   { width: 100%; }
}

/* Respeto a usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  .home-stories__dialog-inner .home-stories__progress span.is-active::after{
    animation: none;
    width: 100%;
  }
}



















/* =========================================================
   HOME STORIES – Topbar (icono + titulo) dentro del modal
   ========================================================= */

.home-stories__dialog-inner .home-stories__topbar{
  position: absolute;
  top: 14px;
  left: 16px;
  right: 56px; /* espacio para el botón cerrar */
  z-index: 40;

  display: flex;
  align-items: center;
  justify-content: space-between;

  pointer-events: none;
}

.home-stories__dialog-inner .home-stories__topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-stories__dialog-inner .home-stories__topbar-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 34px;

  border: 2px solid rgba(255,255,255,0.75);
}

.home-stories__dialog-inner .home-stories__topbar-avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-stories__dialog-inner .home-stories__topbar-title{
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;

  white-space: nowrap;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Deja la barra de progreso debajo del topbar */
.home-stories__dialog-inner .home-stories__progress{
  top: 60px; /* ajusta si quieres más separación */
  left: 16px;
  right: 56px;
  z-index: 39;
}













/* ===================== HOME STORIES - Centrar rail ===================== */
/* Centra el grupo completo de cards dentro del ancho disponible */
.home-stories .home-stories__rail{
  display: flex !important;            /* por si viene como grid o block */
  justify-content: center !important;  /* centra horizontal */
  align-items: stretch !important;
  flex-wrap: wrap !important;          /* si no caben, que bajen y queden centradas */
  gap: 16px !important;                /* ajusta si ya tienes gap en tu CSS */
  width: 100% !important;
  margin-inline: auto !important;
}

/* Por si tu CSS original tenía "justify-content: flex-start" o padding raro */
.home-stories .home-stories__rail{
  padding-inline: 0 !important;
}

/* Si en tu implementación el rail es horizontal con scroll (overflow-x),
   esto centra visualmente cuando NO hay scroll. Si hay scroll, lo normal
   es que quede alineado a la izquierda (UX estándar). */
@media (min-width: 990px){
  .home-stories .home-stories__rail{
    scroll-snap-type: x mandatory; /* no molesta si no usas scroll */
  }
}





/* ===================== Dancing Script (OTF) ===================== */
@font-face{
  font-family: "Dancing Script";
  src: url("DancingScript-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}




/* =========================================================
   FIX: Tabs producto - reemplazar bullet "•" por check "✓"
   (sobrescribe regla existente con !important)
   ========================================================= */

/* Mantén la lista sin viñeta nativa */
.ng-tabs__panel .metafield-rich_text_field ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Mismo selector que está metiendo el punto -> lo reemplazamos por ✓ */
.ng-tabs__panel .metafield-rich_text_field li{
  position: relative !important;
  padding-left: 22px !important;  /* ajusta espacio del icono */
  margin: 8px 0 !important;
}

.ng-tabs__panel .metafield-rich_text_field li::before{
  content: "✓" !important;        /* <-- aquí cambia el punto */
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #C79859 !important;      /* tu dorado */
  font-weight: 900 !important;
  line-height: inherit !important;
}












/* ===== Home Stories: asegurar que IMG/VIDEO se vean siempre ===== */
.home-stories__viewer{
  position: relative;
  width: 100%;
  height: 100%;
}

.home-stories__viewer > div{
  position: relative;
  width: 100%;
  height: 100%;
}

/* el media (img/video) ocupa todo el viewer */
.home-stories__viewer .home-stories__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;    /* NO recorta (como IG) */
  background: #000;       /* mientras carga poster/video */
}







/* ===============================
   PRODUCT META (FORMA + INFO)
   - Metafields:
     custom.forma_producto
     custom.info_producto
   =============================== */

/* Estilos (look como referencia) */
.product-details .product-meta-forma{
  margin-top: 6px;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f8b5a; /* verde similar al diseño */
}

.product-details .product-meta-info{
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
}

.product-details h1 {
  margin-bottom: 0px !important;
  font-weight: 700 !important;
}







/* =========================================================
   PRODUCT: reducir espacio alrededor del Judge.me preview badge
   (el espacio viene del GAP del contenedor, no del widget)
   Aplica a TODOS los productos (sin IDs)
   ========================================================= */

/* El bloque app de Judge.me */
.product-details .shopify-block.shopify-app-block.jdgm-horizon-widget{
  /* “come” la mitad del gap arriba y abajo */
  margin-top: calc(var(--gap, 28px) * -0.5) !important;
  margin-bottom: calc(var(--gap, 28px) * -0.5) !important;

  /* por si el tema mete spacing por variables */
  padding: 0 !important;
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;

  line-height: 1.1 !important;
}

/* Ajuste fino del widget (por si trae algo interno) */
.product-details .jdgm-widget.jdgm-preview-badge{
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* Animación para la hoja - Agrega esto en Personalizador > CSS Adicional */
.hoja-animada {
  animation: volarHoja 4s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes volarHoja {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-15px, -20px) rotate(-5deg);
  }
  50% {
    transform: translate(-25px, -10px) rotate(5deg);
  }
  75% {
    transform: translate(-10px, -25px) rotate(-3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.imagenes-personalizadas {
  width: 100%;
}

.imagenes-personalizadas .bloque-imagen {
  width: 100%;
  margin: 0;
}

.imagenes-personalizadas img {
  width: 100%;
  height: auto;
  display: block;
}








/* =========================================================
   Natures Garden – Colección (estilos base, SIN media queries)
   Objetivo:
   - Título más pequeño y menos “pesado”, con márgenes arriba/abajo
   - Contenedor de productos centrado (sin romper grid)
   - Título de producto sin negrita
   - Precio con texto blanco (y estilo tipo “pill”)
========================================================= */

/* 1) TÍTULO DE LA SECCIÓN (H2) */
.ng-collection-products-title {
  font-weight: 400 !important;          /* menos negrita */
  font-size: 25px !important;           /* más pequeño (ajusta si quieres) */
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin: 60px 0 80px !important;       /* margen superior e inferior */
  text-align: left !important;          /* como tu referencia (no centrado) */
  color: var(--ng-products-title-color, currentColor) !important;
}

/* 2) CONTENEDOR CENTRADO (sin cambiar el layout del tema) */
#ResultsList > div {
  max-width: var(--ecom-global-container-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* 3) TÍTULO DEL PRODUCTO sin negrita */
.product-card a[ref="productTitleLink"] .text-block p,
.product-card a[ref="productTitleLink"] .text-block strong,
.product-card a[ref="productTitleLink"] .text-block b {
  font-weight: 400 !important;
  font-size: 20px !important;
}

/* (Opcional) un pelín más “clean” como el diseño de referencia */
.product-card a[ref="productTitleLink"] .text-block p {
  margin: 0 !important;
  letter-spacing: 0.01em;
}

/* 4) DESCRIPCIÓN CORTA (ya la tienes centrada; solo aseguramos que no se vea pesada) */
.product-card__short-description {
  font-weight: 400 !important;
  opacity: 0.85;
  font-size: 15px !important;
}

/* 5) PRECIO: texto blanco */
.product-card product-price .price {
  color: #ffffff !important;
  font-size: 20px !important;
}

/* 6) PRECIO estilo “pastilla” (si ya existe, esto solo lo refuerza) */
.product-card product-price .price {
  background: var(--ng-price-bg, #c79859);
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  line-height: 1;
}

/* 7) Asegurar centrado del bloque de precio (sin tocar grid) */
.product-card product-price {
  text-align: center !important;
}











/* =========================================================
   Natures Garden – Reducir tamaño imagen + reducir espacio entre cards
   (según tu DOM: product-grid usa --product-grid-gap y el marco es .product-media-container)
========================================================= */

/* 1) MENOS ESPACIO ENTRE CARDS */
.product-grid[product-grid-view="default"]{
  --product-grid-gap: 10px !important; /* prueba 12px - 16px */
}

/* 2) REDUCIR TAMAÑO DEL “MARCO” DE LA IMAGEN (no el img) */
.product-card .card-gallery .product-media-container{
  width: 70% !important;              /* prueba 78% - 88% */
  margin: 0 auto !important;
}

/* 3) Asegurar que la imagen se adapte dentro del marco reducido */
.product-card .card-gallery img,
.product-card .card-gallery picture{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 4) (Opcional) Compactar un poco el alto general del bloque */
.product-card .product-grid__card{
  gap: 6px !important;
}









/* =========================================================
   Colección: mostrar SOLO la primera imagen (sin carrusel)
========================================================= */

/* 1) Quitar scroll + gap del carrusel dentro de la card */
.product-grid .product-card slideshow-slides{
  overflow: hidden !important;
  scroll-snap-type: none !important;
  gap: 0 !important;
}

/* 2) Forzar que el carrusel NO sea "fila", sino una sola vista */
.product-grid .product-card slideshow-slides{
  display: block !important;
}

/* 3) Ocultar todos los slides menos el primero */
.product-grid .product-card slideshow-slide{
  display: none !important;
}
.product-grid .product-card slideshow-slide:first-child{
  display: block !important;
}

/* 4) (Opcional) ocultar indicadores/controles si existieran */
.product-grid .product-card slideshow-component [class*="pagination"],
.product-grid .product-card slideshow-component [class*="nav"],
.product-grid .product-card slideshow-component button{
  display: none !important;
}








/* =========================================================
   Compactar grid de productos (reduce espacio entre cards)
========================================================= */

/* limitar ancho real del grid */
#ResultsList .product-grid{
  max-width: 1050px;   /* prueba este valor */
  margin-left: auto;
  margin-right: auto;
}

/* opcional: que no se estiren las columnas */
#ResultsList .product-grid__item{
  justify-self: center;
}










/* =========================================================
   SOLO en resource-list--grid: mostrar SOLO la primera imagen
   (sin carrusel dentro del product-card)
========================================================= */

/* 1) Quitar scroll + gap del carrusel dentro de la card */
.resource-list.resource-list--grid product-card.product-card slideshow-slides{
  overflow: hidden !important;
  scroll-snap-type: none !important;
  gap: 0 !important;
}

/* 2) Forzar que NO sea fila (solo una vista) */
.resource-list.resource-list--grid product-card.product-card slideshow-slides{
  display: block !important;
}

/* 3) Ocultar todos los slides menos el primero */
.resource-list.resource-list--grid product-card.product-card slideshow-slide{
  display: none !important;
}
.resource-list.resource-list--grid product-card.product-card slideshow-slide:first-child{
  display: block !important;
}

/* 4) (Opcional) ocultar indicadores/controles si existieran */
.resource-list.resource-list--grid product-card.product-card slideshow-component [class*="pagination"],
.resource-list.resource-list--grid product-card.product-card slideshow-component [class*="nav"],
.resource-list.resource-list--grid product-card.product-card slideshow-component button{
  display: none !important;
}

/* =========================================================
   Centrar imagen SOLO en resource-list (sin romper layout)
========================================================= */

/* 1) Centrar el slide (el contenedor visible) */
.resource-list.resource-list--grid product-card.product-card slideshow-slide:first-child{
  text-align: center !important; /* centra inline/inline-block */
}

/* 2) Asegurar que la imagen pueda centrarse */
.resource-list.resource-list--grid product-card.product-card .product-media__image{
  display: block !important;
  margin: 0 auto !important;
}

/* 3) (Opcional) Si el contenedor tiene alignment raro, fuerza centrado */
.resource-list.resource-list--grid product-card.product-card .product-media{
  width: 100%;
}

/* =========================================================
   Centrar texto dentro de las cards SOLO en resource-list
========================================================= */

/* Centrar título del producto */
.resource-list.resource-list--grid 
  product-card.product-card 
  a[ref="productTitleLink"] 
  .text-block{
    text-align: center !important;
    --text-align: center !important;
}

/* Centrar precio */
.resource-list.resource-list--grid 
  product-card.product-card 
  product-price{
    text-align: center !important;
}

/* Centrar h3 superior si existe */
.resource-list.resource-list--grid 
  product-card.product-card 
  .product-grid-view-zoom-out--details{
    text-align: center !important;
}












/* =========================================================
   SECCIÓN "LOS MÁS VENDIDOS" (resource-list__slide):
   - mostrar SOLO la primera imagen del product-card
   - centrar imagen y textos
========================================================= */

/* 1) El carrusel interno: sin scroll ni snap */
.resource-list__slide product-card.product-card slideshow-slides{
  overflow: hidden !important;
  scroll-snap-type: none !important;
  gap: 0 !important;
  position: relative !important;
}

/* 2) Ocultar todos los slides menos el primero
   (usa first-of-type para evitar problemas con nodos/otros elementos) */
.resource-list__slide product-card.product-card slideshow-slides > slideshow-slide{
  display: none !important;
}
.resource-list__slide product-card.product-card slideshow-slides > slideshow-slide:first-of-type{
  display: block !important;
}

/* 3) Ocultar indicadores/controles del slideshow interno */
.resource-list__slide product-card.product-card slideshow-component [class*="pagination"],
.resource-list__slide product-card.product-card slideshow-component [class*="nav"],
.resource-list__slide product-card.product-card slideshow-component button{
  display: none !important;
}

/* 4) IMPORTANTE: NO convertir .card-gallery a flex (eso te estaba ocultando la imagen) */
.resource-list__slide product-card.product-card .card-gallery{
  display: block !important;
}

/* 5) Centrar la imagen dentro del slide */
.resource-list__slide product-card.product-card .product-media{
  display: block !important;
  width: 100% !important;
}

.resource-list__slide product-card.product-card .product-media__image{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 6) Centrar textos (título y precio) SOLO en esta sección */
.resource-list__slide product-card.product-card .text-block,
.resource-list__slide product-card.product-card .product-grid-view-zoom-out--details{
  text-align: center !important;
}

.resource-list__slide product-card.product-card .text-block p,
.resource-list__slide product-card.product-card .product-grid-view-zoom-out--details h3{
  text-align: center !important;
}

/* Solo colección Alivio Muscular y Óseo */
body[data-page*="collection"] 
.product-card:hover .title {
  color: inherit;
}

/* Ahora solo cuando la URL sea esa colección */
@media all {
  html:has(body) {
  }
}

/* Hover título producto */
.product-card a:hover .title,
.product-card a:hover p,
.product-card a:hover {
  color: #c69c5d !important; /* cambia este color */
  transition: color 0.3s ease;
}

product-price .price {
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

product-price .price:hover {
  background-color: #6A8659 !important;
  color: #ffffff !important;
}

.product-card .price {
  font-weight: 500 !important;
}





























/* =====================================================
   FIX PRECIO – SOLO PARA RESOURCE LIST (CARRUSEL)
   ===================================================== */

/* Reset completo del estilo del precio en esta sección */
.resource-list__slide product-price .price {
  background: transparent !important;
  color: #000000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: default !important;
  transition: none !important;
}

/* Elimina cualquier efecto hover */
.resource-list__slide product-price .price:hover {
  background: transparent !important;
  color: #000000 !important;
  box-shadow: none !important;
}

/* Asegura que el contenedor también quede limpio */
.resource-list__slide product-price {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #000 !important;
}










/* ==========================================
   PRODUCT GRID (resource-list--grid)
   - Quita hover
   - Precio negro
   - Precio centrado
========================================== */

/* 1) Desactivar efectos de hover en la card */
.resource-list.resource-list--grid .resource-list__item,
.resource-list.resource-list--grid product-card.product-card,
.resource-list.resource-list--grid .product-card__content,
.resource-list.resource-list--grid .product-grid__card {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Por si el theme aplica hover específico */
.resource-list.resource-list--grid .resource-list__item:hover,
.resource-list.resource-list--grid product-card.product-card:hover,
.resource-list.resource-list--grid .product-card__content:hover,
.resource-list.resource-list--grid .product-grid__card:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Si el hover viene de variables globales del theme */
.resource-list.resource-list--grid {
  --hover-lift-amount: 0px !important;
  --hover-scale-amount: 1 !important;
  --hover-subtle-zoom-amount: 1 !important;
}

/* 2) Centrar el bloque del precio */
.resource-list.resource-list--grid product-card.product-card product-price {
  text-align: center !important; /* centra dentro del componente */
}

/* OJO: el product-price trae class text-left, esto lo anula */
.resource-list.resource-list--grid product-price.text-left,
.resource-list.resource-list--grid product-price.text-block--align-left {
  text-align: center !important;
  --text-align: center !important;
}

/* Asegurar que el contenedor interno no lo regrese a izquierda */
.resource-list.resource-list--grid product-price [ref="priceContainer"] {
  display: flex !important;
  justify-content: center !important;
}

/* 3) Precio en negro (y opcionalmente sin fondo tipo "pill") */
.resource-list.resource-list--grid product-price .price {
  color: #000 !important;
}

/* Si además quieres mantener el pill pero con borde/estilo neutro,
   comenta o ajusta estas líneas. Si lo quieres SIN pill, déjalo así: */
.resource-list.resource-list--grid {
  --ng-price-bg: transparent !important; /* quita el fondo dorado */
}
.resource-list.resource-list--grid product-price .price {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}






















/* =========================================================
   FBT – estilos alineados al look de Product Recommendations
   (sin cambiar color del checkbox)
   ========================================================= */

/* Grid */
.fbt__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap: 48px;
  row-gap: 40px;
  align-items:start;
}

/* Card centrada */
.fbt__item{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* --- Imagen: NO recorta, misma altura para todas --- */
.fbt__media{
  /* no fuerces flex aquí, déjalo simple */
  width:100%;
  max-width: 220px;       /* ancho visual de la card */
  margin: 0 auto;
  border-radius: 16px;
  overflow:hidden;
  background: transparent;
}

.fbt__media img{
  display:block !important;
  margin: 0 auto !important;

  /* clave: mismo alto y contain */
  height: 200px !important;
  width: 100% !important;
  object-fit: contain !important;
}

/* --- Checkbox debajo de la imagen, clickeable --- */
.fbt__check{
  /* anulamos cualquier absolute viejo */
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  width: 18px !important;
  height: 18px !important;

  margin: 12px auto 0 !important;   /* queda debajo */
  display:block !important;
  cursor:pointer;
  z-index: 2;
}

/* Asegura que el label no “salte” */
.fbt__check:focus{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* --- Texto: centrado, sin underline --- */
.fbt__meta{
  width:100%;
  text-align:center;
  margin-top: 10px;
}

.fbt__name{
  display:inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: #000 !important;
  text-decoration: none !important;
}

.fbt__name:hover,
.fbt__name:focus{
  text-decoration: none !important;
}

/* --- Precio centrado y negro --- */
.fbt__price{
  margin-top: 10px;
  text-align:center !important;
  display:block !important;
}

.fbt__price-current,
.fbt__price-compare{
  color:#000 !important;
  display:block;
}

.fbt__price-compare{
  opacity: .6;
}

/* Footer centrado */
.fbt__footer{
  margin-top: 26px;
  display:grid;
  gap: 14px;
  justify-items:center;
}

.fbt__total,
.fbt__total-label,
.fbt__total-value{
  color:#000 !important;
}

/* Responsive */
@media (max-width: 990px){
  .fbt__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap: 28px; row-gap: 32px; }
  .fbt__media img{ height: 180px !important; }
}

@media (max-width: 560px){
  .fbt__grid{ grid-template-columns:1fr; }
  .fbt__media{ max-width: 260px; }
  .fbt__media img{ height: 210px !important; }
}


/* Quitar fondo/box de la tarjeta de imagen */
.fbt__media{
  background: transparent !important;
  box-shadow: none !important;
}

.fbt__media img{
  background: transparent !important;
}

/* Color del checkbox */
.fbt__check{
  accent-color: #c79a59;
}







/* ===================================================
   Custom checkbox FBT (fondo dorado + visto blanco)
   =================================================== */

.fbt__check{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid #c79a59;
  background: #fff;
  cursor: pointer;
  margin: 12px auto 0;
  display: block;
  position: relative;
  transition: all .15s ease;
}

/* Estado activo */
.fbt__check:checked{
  background: #c79a59;
  border-color: #c79a59;
}

/* Visto blanco */
.fbt__check:checked::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* titulo de la seccion de productos comprados frecuentemente */


.fbt__title{
  font-size: 1.55rem !important;
  margin-top: 50px !important;
  margin-bottom: 28px !important;
  margin-left: 20px !important;
}


/* Product card badge (metafield custom.badge_image) */
.product-card {
  position: relative;
}

.product-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 42px; /* ajusta tamaño del badge */
  height: auto;
}

.product-card__badge-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================
   ANIMACIÓN MISIÓN - NATURE'S GARDEN
   Efecto: Scale + Fade + Slide Up Elegante
   ============================================ */

/* Contenedor principal de la tarjeta MISIÓN */
.gRccZjI42_.gp-relative.gp-flex.gp-flex-col {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  animation: missionReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.2s;
}

/* Animación de revelación principal */
@keyframes missionReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Imagen - efecto de zoom suave al cargar */
.gXe3Sf2V8M img {
  opacity: 0;
  transform: scale(1.1);
  animation: imageZoomIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

@keyframes imageZoomIn {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Título "Misión" - slide up con máscara */
.gXl9GlHe-e {
  opacity: 0;
  transform: translateY(20px);
  animation: textSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

@keyframes textSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
    clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

/* Texto descripción - fade in con delay */
.gPxoDQkEHp {
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.8s forwards;
}

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

/* Efecto HOVER en toda la tarjeta */
.gRccZjI42_.gp-relative.gp-flex.gp-flex-col:hover {
  transform: translateY(-8px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover en la imagen - zoom sutil */
.gRccZjI42_.gp-relative.gp-flex.gp-flex-col:hover .gXe3Sf2V8M img {
  transform: scale(1.05);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Animación de pulso sutil en el ícono al cargar */
.gXe3Sf2V8M {
  animation: iconPulse 2s ease-in-out 1.5s infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Responsive - animaciones más rápidas en móvil */
@media (max-width: 768px) {
  .gRccZjI42_.gp-relative.gp-flex.gp-flex-col {
    animation-duration: 0.6s;
  }
  
  .gXe3Sf2V8M img {
    animation-duration: 0.7s;
  }
}
/* Animación base */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Clase para aplicar la animación */
.animate-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Variantes de delay si tienes varios elementos */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }


/* AJUSTE DE TAMANOS TEXTOS EN BANNER SUPERIOR*/

/* MUJER ACTIVA TITULO Y TEXTO TAMANOS ID*/
#banner-mujer-activa .banner-text h1 {
  font-size: 60px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-mujer-activa .banner-text p {
  font-size: 23px !important;
  line-height: 1.1 !important;
}

/* SALUD DIGESTIVA TITULO Y TEXTO TAMANOS ID*/
#banner-salud-digestiva .banner-text h1 {
  font-size: 55px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-salud-digestiva .banner-text p {
  font-size: 20px !important;
  line-height: 1.1 !important;
}

/* ENERGIA VITAL TITULO Y TEXTO TAMANOS ID*/
#banner-energia-vital .banner-text h1 {
  font-size: 60px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-energia-vital .banner-text p {
  font-size: 23px !important;
  line-height: 1.1 !important;
}

/* PODER INMUNE TITULO Y TEXTO TAMANOS ID*/
#banner-poder-inmune .banner-text h1 {
  font-size: 60px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-poder-inmune .banner-text p {
  font-size: 23px !important;
  line-height: 1.1 !important;
}

/* RELAX Y DESCANSO TITULO Y TEXTO TAMANOS ID*/
#banner-relax-y-descanso .banner-text h1 {
  font-size: 55px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-relax-y-descanso .banner-text p {
  font-size: 22px !important;
  line-height: 1.1 !important;
}

/* HOMBRE ACTIVO TITULO Y TEXTO TAMANOS ID*/
#banner-hombre-activo .banner-text h1 {
  font-size: 60px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-hombre-activo .banner-text p {
  font-size: 25px !important;
  line-height: 1.1 !important;
}

/* NINOS ACTIVO TITULO Y TEXTO TAMANOS ID*/
#banner-salud-infantil .banner-text h1 {
  font-size: 60px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-salud-infantil .banner-text p {
  font-size: 23px !important;
  line-height: 1.1 !important;
}

/* ALIVIO MUSCULAR TITULO Y TEXTO TAMANOS ID*/
#banner-alivio-muscular-y-oseo .banner-text h1 {
  font-size: 50px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-alivio-muscular-y-oseo .banner-text p {
  font-size: 16px !important;
  line-height: 1.1 !important;
}

/* ALIVIO Y CUIDADO TOPICO TITULO Y TEXTO TAMANOS ID*/
#banner-alivio-y-cuidado-topico .banner-text h1 {
  font-size: 50px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-alivio-y-cuidado-topico .banner-text p {
  font-size: 17px !important;
  line-height: 1.1 !important;
}

/* SUPLEMENTOS TITULO Y TEXTO TAMANOS ID*/
#banner-suplementos .banner-text h1 {
  font-size: 60px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-suplementos .banner-text p {
  font-size: 23px !important;
  line-height: 1.1 !important;
}

/* VITAMINAS TITULO Y TEXTO TAMANOS ID*/
#banner-vitaminas .banner-text h1 {
  font-size: 60px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-vitaminas .banner-text p {
  font-size: 23px !important;
  line-height: 1.1 !important;
}

/* NATURALES TITULO Y TEXTO TAMANOS ID*/
#banner-naturales .banner-text h1 {
  font-size: 60px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-naturales .banner-text p {
  font-size: 23px !important;
  line-height: 1.1 !important;
}

/* MINERALES TITULO Y TEXTO TAMANOS ID*/
#banner-minerales .banner-text h1 {
  font-size: 60px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-minerales .banner-text p {
  font-size: 23px !important;
  line-height: 1.1 !important;
}

/* TRATAMIENTOS ESPECIFICOS TITULO Y TEXTO TAMANOS ID*/
#banner-tratamientos-especificos .banner-text h1 {
  font-size: 53px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#banner-tratamientos-especificos .banner-text p {
  font-size: 20px !important;
  line-height: 1.1 !important;
}

/* AJUSTE DE TAMANOS TEXTOS EN BANNER INFERIOR*/
/* SALUD DIGESTIVA*/
section#bottom-banner-salud-digestiva.collection-banner.bottom-banner .banner-text h1 {
  font-size: 65px !important;
}
section#bottom-banner-salud-digestiva.collection-banner.bottom-banner .banner-text p {
  font-size: 24px !important;
}
section#bottom-banner-salud-digestiva.collection-banner.bottom-banner .banner-text a {
  font-size: 16px !important;
}

/* MUJER ACTIVA*/
section#bottom-banner-mujer-activa.collection-banner.bottom-banner .banner-text h1 {
  font-size: 60px !important;
}
section#bottom-banner-mujer-activa.collection-banner.bottom-banner .banner-text h1 {
  color: #CC977F !important;
}
section#bottom-banner-mujer-activa.collection-banner.bottom-banner .banner-text p {
  font-size: 24px !important;
}
section#bottom-banner-mujer-activa.collection-banner.bottom-banner .banner-text a {
  font-size: 14px !important;
}
section#bottom-banner-mujer-activa.collection-banner.bottom-banner .banner-text a {
  background-color: #CC977F !important;
  color: #ffffff !important;
}

/* ENERGIA VITAL*/
section#bottom-banner-energia-vital.collection-banner.bottom-banner .banner-text h1 {
  font-size: 64px !important;
}
section#bottom-banner-energia-vital.collection-banner.bottom-banner .banner-text p {
  font-size: 21px !important;
}
section#bottom-banner-energia-vital.collection-banner.bottom-banner .banner-text a {
  font-size: 15px !important;
}

/* PODER INMUNE */
section#bottom-banner-poder-inmune.collection-banner.bottom-banner .banner-text h1 {
  font-size: 64px !important;
}
section#bottom-banner-poder-inmune.collection-banner.bottom-banner .banner-text h1 {
  color: #DEA15D !important;
}
section#bottom-banner-poder-inmune.collection-banner.bottom-banner .banner-text p {
  font-size: 21px !important;
}
section#bottom-banner-poder-inmune.collection-banner.bottom-banner .banner-text a {
  font-size: 15px !important;
}
section#bottom-banner-poder-inmune.collection-banner.bottom-banner .banner-text a {
  background-color: #6A8659 !important;
  color: #ffffff !important;
}

/* DESCANSO Y RELAX */
section#bottom-banner-relax-y-descanso.collection-banner.bottom-banner .banner-text h1 {
  font-size: 66px !important;
}
section#bottom-banner-relax-y-descanso.collection-banner.bottom-banner .banner-text h1 {
  color: #97B469 !important;
}
section#bottom-banner-relax-y-descanso.collection-banner.bottom-banner .banner-text p {
  font-size: 21px !important;
}
section#bottom-banner-relax-y-descanso.collection-banner.bottom-banner .banner-text a {
  font-size: 18px !important;
}
section#bottom-banner-relax-y-descanso.collection-banner.bottom-banner .banner-text a {
  background-color: #6A8659 !important;
  color: #ffffff !important;
}

/* HOMBRE ACTIVO */
section#bottom-banner-hombre-activo.collection-banner.bottom-banner .banner-text h1 {
  font-size: 56px !important;
}
section#bottom-banner-hombre-activo.collection-banner.bottom-banner .banner-text h1 {
  color: #EFE7CB !important;
}
section#bottom-banner-hombre-activo.collection-banner.bottom-banner .banner-text p {
  font-size: 17px !important;
}
section#bottom-banner-hombre-activo.collection-banner.bottom-banner .banner-text a {
  font-size: 15px !important;
}

/* NINOS ACTIVO */
section#bottom-banner-salud-infantil.collection-banner.bottom-banner .banner-text h1 {
  font-size: 56px !important;
}
section#bottom-banner-salud-infantil.collection-banner.bottom-banner .banner-text h1 {
  color: #DEA15D !important;
}
section#bottom-banner-salud-infantil.collection-banner.bottom-banner .banner-text p {
  font-size: 18px !important;
}
section#bottom-banner-salud-infantil.collection-banner.bottom-banner .banner-text p {
  color: #6A8659 !important;
}
section#bottom-banner-salud-infantil.collection-banner.bottom-banner .banner-text a {
  font-size: 15px !important;
}
section#bottom-banner-salud-infantil.collection-banner.bottom-banner .banner-text a {
  background-color: #6A8659 !important;
  color: #EFE7CB !important;
}

/* ALIVIO MUSCULAR Y OSEO */
section#bottom-banner-alivio-muscular-y-oseo.collection-banner.bottom-banner .banner-text h1 {
  font-size: 58px !important;
}
section#bottom-banner-alivio-muscular-y-oseo.collection-banner.bottom-banner .banner-text p {
  font-size: 25px !important;
}
section#bottom-banner-alivio-muscular-y-oseo.collection-banner.bottom-banner .banner-text a {
  font-size: 15px !important;
}

/* Controla tamaño de icono */
section.collection-banner .banner-icon {
  width: 125px !important;
  height: 125px !important;
}

section.collection-banner .banner-icon__img {
  width: 100% !important;
  height: 100% !important;
}

/* Controla tamaño de "NUEVO" */
.product-card__badge {
  width: 80px !important;
  height: 80px !important;
}
img.product-card__badge-image {
  width: 80px !important;
  height: auto !important;
}


/* CONTROL DE BANNERS MOBILE */

.collection-banner-mobile-top,
.collection-banner-mobile-bottom{
display:none;
}



@media screen and (max-width:768px){

.banner-desktop{
display:none !important;
}

.collection-banner-mobile-top,
.collection-banner-mobile-bottom{
display:block !important;
}

}


/* ===== BANNER SUPERIOR MOBILE ===== */

.collection-banner-mobile-top{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
width:100%;
}

.banner-mobile-image img{
width:100%;
height:auto;
display:block;
}

.banner-mobile-text{
padding:40px 24px;
max-width:600px;
margin:auto;
color:#fff;
position:relative;
}
/* TITULO EN DOS LINEAS */
.banner-mobile-text h2{
font-size:32px;
font-weight:700;
margin-bottom:12px;
line-height:1.2;
}

.banner-mobile-text h2{
  font-size:32px;
  font-weight:700;
  margin-bottom:12px;
  line-height:1.2;
  max-width: 220px; /* 👈 ajusta esto */
  margin-left: auto;
  margin-right: auto;
} 

.banner-mobile-text p{
font-size:16px;
line-height:1.5;
}


/* icono */

.banner-mobile-icon{
position:absolute;
top:20px;
right:20px;
width:60px;
height:60px;
}

.banner-mobile-icon img{
width:100%;
height:100%;
object-fit:contain;
}



/* ===== BANNER INFERIOR MOBILE ===== */

.collection-banner-mobile-bottom{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
width:100%;
margin-top:40px;
}

.banner-mobile-bottom-image img{
width:100%;
height:auto;
display:block;
}

.banner-mobile-bottom-text{
padding:40px 24px;
max-width:600px;
margin:auto;
}

.banner-mobile-bottom-text h2{
font-size:28px;
font-weight:700;
margin-bottom:12px;
}

.banner-mobile-bottom-text p{
font-size:16px;
line-height:1.5;
margin-bottom:20px;
}
}
/* botón */

.banner-mobile-btn{
display:inline-block;
padding:14px 28px;
border-radius:40px;
font-size:16px;
font-weight:600;
color:#fff;
text-decoration:none;
transition:0.2s ease;
}

.banner-mobile-btn:hover{
opacity:0.9;
}

@media screen and (max-width:768px){

  .banner-mobile-icon{
    width:50px !important;
    height:60px !important;
    margin-top:10px;
  }

  .banner-mobile-icon img{
    width:100% !important;
    height:100% !important;
    object-fit:contain;
  }
  

}


/* PARA CAMBIAR EL ESTILO DE LOS TITULOS VERSION MOVIL BANNER SUPERIOR */
@media screen and (max-width:768px){

  .banner-mobile-text h2,
  .banner-mobile-bottom-text h2{
    font-size:35px !important;
    font-weight:800 !important;
    line-height:1.1 !important;
  }

}

/* CAMBIOS PERSONALIZADOS BANNER INFERIOR */
@media screen and (max-width:768px){
/* NINOS ACTIVOS*/
#banner-mobile-bottom-salud-infantil h2{
  color:#C79859 !important;
}
/*PODER INMUNE*/
#banner-mobile-bottom-poder-inmune h2{
  color:#DEA15D !important;
}
/*ENERGIA VITAL*/
#banner-mobile-bottom-energia-vital h2{
  color:#F7EFD2 !important;
}
#banner-mobile-bottom-energia-vital p{
  color:#ffffff !important;
}
#banner-mobile-bottom-energia-vital a{
  color:#5C885E !important;
}
/*ALIVIO MUSCULAR*/
#banner-mobile-bottom-alivio-muscular-y-oseo h2{
  color:#FFFFFF !important;
}
#banner-mobile-bottom-alivio-muscular-y-oseo p{
  color:#ffffff !important;
}
#banner-mobile-bottom-alivio-muscular-y-oseo a{
  color:#5C885E !important;
}
/*HOMBRE ACTIVO*/
#banner-mobile-bottom-hombre-activo h2{
  color:#F7EFD2 !important;
}
#banner-mobile-bottom-hombre-activo p{
  color:#ffffff !important;
}
#banner-mobile-bottom-hombre-activo a{
  color:#5C885E !important;
}
/*MUJER ACTIVA*/
#banner-mobile-bottom-mujer-activa h2{
  color:#E3B59B !important;
}
#banner-mobile-bottom-mujer-activa p{
  color:#000000 !important;
}
#banner-mobile-bottom-mujer-activa a{
  color:#ffffff !important;
}
/*relax-y-descanso*/
#banner-mobile-bottom-relax-y-descanso h2{
  color:#97B469 !important;
}
/*SALUD DIGESTIVA*/
#banner-mobile-bottom-salud-digestiva h2{
  color:#FFFFFF !important;
}
#banner-mobile-bottom-salud-digestiva p{
  color:#FFFFFF !important;
}
#banner-mobile-bottom-salud-digestiva a{
  color:#6A8659 !important;
}
/*TRATAMIENTOS ESPECIFICOS */
#banner-mobile-top-tratamientos-especificos .banner-mobile-text {
  text-align: left !important;
  align-items: flex-start !important;
}
/* Asegura que el icono no se meta en el texto */
#banner-mobile-top-tratamientos-especificos .banner-mobile-icon {
  margin-bottom: 8px;
}
/* Mejora el título */
#banner-mobile-top-tratamientos-especificos h2 {
  margin-top: 0;
  line-height: 1.2;
}
}
















/* OCULTAR BANNERS MOBILE EN DESKTOP */
@media screen and (min-width:769px){

.collection-banner-mobile-top,
.collection-banner-mobile-bottom{
  display:none !important;
}

}

/* OCULTAR BANNERS DESKTOP EN MOBILE */
@media screen and (max-width:768px){

.collection-banner.banner-desktop{
  display:none !important;
}

.collection-banner-mobile-top,
.collection-banner-mobile-bottom{
  display:block !important;
}

}












/* =========================================================
   HERO HOME - hoja decorativa más pequeña y sobresaliendo
   Este bloque ajusta la imagen de la hoja para que ya no
   ocupe tanto espacio y quede flotando como elemento decorativo.
========================================================= */

/* Contenedor principal de esta sección hero */
#shopify-section-template--19589641404527__hero_kMPwfg {
  position: relative; /* Permite posicionar elementos absolutos dentro de esta sección */
  overflow: hidden;   /* Oculta cualquier parte de la hoja que se salga demasiado del contenedor */
}

/* Contenedor interno donde están los elementos visuales del hero */
#shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper {
  position: relative; /* Sirve como referencia para posicionar la hoja de forma absoluta */
}

/* Bloque específico de la imagen de la hoja decorativa */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block--AdzV6V21wWWdMZkN0d__image_aeWpKW {
  position: absolute !important; /* Saca la hoja del flujo normal para ubicarla libremente */
  top: -170px; /* La mueve hacia arriba para que sobresalga */
  left: 150px; /* La mueve hacia la izquierda para que sobresalga */
  width: clamp(90px, 10vw, 150px) !important; /* Tamaño responsive: mínimo 90px, ideal 10vw, máximo 150px */
  max-width: clamp(90px, 10vw, 150px) !important; /* Limita el ancho máximo al mismo valor */
  min-width: unset !important; /* Elimina un ancho mínimo previo que podría estar forzando un tamaño grande */
  z-index: 3; /* Hace que la hoja quede por encima de otros elementos */
  pointer-events: none; /* Evita que la hoja interfiera con clics o interacción del usuario */
}

/* Imagen interna de la hoja */
#shopify-section-template--19589641404527__hero_kMPwfg .image-block--AdzV6V21wWWdMZkN0d__image_aeWpKW img {
  display: block; /* Elimina espacios extra típicos de imágenes inline */
  width: 100% !important; /* Hace que la imagen ocupe todo el ancho del bloque contenedor */
  height: auto !important; /* Mantiene la proporción original de la imagen */
}

/* =========================================================
   AJUSTES PARA MOBILE
   Reduce el tamaño y cambia la posición para pantallas pequeñas
========================================================= */
@media screen and (max-width: 749px) {
  #shopify-section-template--19589641404527__hero_kMPwfg .image-block--AdzV6V21wWWdMZkN0d__image_aeWpKW {
    top: -14px; /* En móvil sobresale un poco menos hacia arriba */
    left: -14px; /* En móvil sobresale un poco menos hacia la izquierda */
    width: 72px !important; /* Tamaño fijo más pequeño para celulares */
    max-width: 72px !important; /* Asegura que no crezca más de 72px */
  }
}












/* =========================================================
   FBT - Fix checkbox suelto en esquina + palomita blanca visible
   Se aplica solo a la sección "Comprados frecuentemente juntos"
========================================================= */

#shopify-section-template--19589641568367__fbt_section .fbt__item {
  position: relative;
}

/* Forzamos que el checkbox se quede en su lugar normal
   y anulamos estilos globales del theme/app que lo puedan
   estar mandando a la esquina superior izquierda */
#shopify-section-template--19589641568367__fbt_section .fbt__check {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: 18px !important;
  height: 18px !important;
  margin: 12px auto 0 !important;
  display: block !important;

  border: 2px solid #c79a59 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 2 !important;
  vertical-align: middle !important;
}

/* Estado marcado: fondo dorado */
#shopify-section-template--19589641568367__fbt_section .fbt__check:checked {
  background: #c79a59 !important;
  border-color: #c79a59 !important;
}

/* Dibujamos la palomita blanca */
#shopify-section-template--19589641568367__fbt_section .fbt__check:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Estado hover opcional */
#shopify-section-template--19589641568367__fbt_section .fbt__check:hover {
  border-color: #c79a59 !important;
}

/* Estado focus accesible */
#shopify-section-template--19589641568367__fbt_section .fbt__check:focus-visible {
  box-shadow: 0 0 0 2px rgba(199, 152, 89, 0.18) !important;
}

/* Por seguridad: evita pseudo-elementos raros sobre el label
   si algún estilo global estuviera generando checks falsos */
#shopify-section-template--19589641568367__fbt_section .fbt__item::before,
#shopify-section-template--19589641568367__fbt_section .fbt__item::after {
  content: none !important;
}

.product-faqs{
  margin-top:50px;
  border-top:1px solid #eee;
  padding-top:30px;
}

.faq-title{
  font-size:22px;
  font-weight:600;
  margin-bottom:20px;
}

.faq-item{
  border-bottom:1px solid #eee;
  padding:15px 0;
}

.faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  font-weight:600;
  cursor:default;
  font-size:16px;
  padding:0;
}

.faq-answer{
  display:block;
  margin-top:10px;
  color:#555;
}

/* =========================================================
   PRODUCT FAQS - estilo centrado tipo bloque FAQ
========================================================= */

.product-faqs-section {
  text-align: center;
}

.product-faqs-section__inner {
  max-width: 900px;
  margin: 0 auto;
}

.product-faqs-section__top-border {
  display: none !important;
}

.product-faqs-section__title {
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  margin: 0 0 28px 0 !important;
  color: #6f8b5e !important;
  text-align: center;
}

.product-faqs-section__list {
  display: none; /* oculto por defecto */
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.product-faqs-section__item {
  border-bottom: none !important;
  padding: 10px 0 !important;
}

.product-faqs-section__question {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: #6f8b5e;
  text-align: center;
  margin-bottom: 12px;
}

.product-faqs-section__answer {
  font-size: 20px;
  line-height: 1.6;
  color: #6f8b5e;
  text-align: center;
}

.product-faqs-section__answer p {
  margin: 0 0 10px 0;
}

.product-faqs-section__answer p:last-child {
  margin-bottom: 0;
}

/* estado abierto */
.product-faqs-section.is-open .product-faqs-section__list {
  display: block;
}

/* cursor sobre el título para que parezca clickable */
.product-faqs-section__title {
  cursor: pointer;
  user-select: none;
}

/* responsive */
@media screen and (max-width: 749px) {
  .product-faqs-section__title {
    font-size: 32px !important;
    margin-bottom: 22px !important;
  }

  .product-faqs-section__question {
    font-size: 22px;
  }

  .product-faqs-section__answer {
    font-size: 18px;
  }
}






























/* ==========================================
   HEADER MOBILE RESPONSIVE
   Logo | Login icon | Search | Cart | Menu
   Oculta textos generados por ::after
   ========================================== */
@media screen and (max-width: 749px) {
  /* =========================
     Layout principal móvil
     ========================= */
  #header-component .header__row--top .header__columns {
    display: grid !important;
    grid-template-columns: minmax(96px, 1fr) 36px 36px 36px 36px !important;
    grid-template-areas: "logo login search cart menu" !important;
    align-items: center !important;
    column-gap: 8px !important;
    padding: 10px 12px !important;
    min-height: 60px !important;
  }

  #header-component .header__column {
    display: contents !important;
  }

  /* =========================
     Logo
     ========================= */
  #header-component .header-logo {
    grid-area: logo !important;
    justify-self: start !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #header-component .header-logo__image {
    width: 96px !important;
    max-width: 96px !important;
    height: auto !important;
    display: block !important;
  }

  /* =========================
     Ocultar cosas de escritorio
     ========================= */
  #header-component .header-menu,
  #header-component .header__row--bottom,
  #header-component .header__row--mobile,
  #header-component .dropdown-localization,
  #header-component .localization-form,
  #header-component .header__localization,
  #header-component .account-popover {
    display: none !important;
  }

  /* =========================
     Menú hamburguesa
     ========================= */
  #header-component .header__drawer.desktop\:hidden,
  #header-component .header__drawer {
    grid-area: menu !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header-component .header__icon--menu,
  #header-component .header__icon--summary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* =========================
     Search móvil
     ========================= */
  #header-component .header__column--left > .search-action.desktop\:hidden,
  #header-component search-button.search-action.desktop\:hidden {
    grid-area: search !important;
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header-component .header__column--right > .search-action.mobile\:hidden {
    display: none !important;
  }

  #header-component .search-action button {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* =========================
     Header actions
     ========================= */
  #header-component header-actions {
    display: contents !important;
  }

  /* =========================
     Login icono
     ========================= */
  #header-component dialog-component.account-drawer {
    grid-area: login !important;
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header-component dialog-component.account-drawer > .account-button.header-actions__action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* Quitar texto generado LOGIN */
  #header-component dialog-component.account-drawer > .account-button.header-actions__action::before,
  #header-component dialog-component.account-drawer > .account-button.header-actions__action::after {
    content: none !important;
    display: none !important;
  }

  #header-component dialog-component.account-drawer .account-button__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* =========================
     Carrito icono
     ========================= */
  #header-component cart-drawer-component.cart-drawer {
    grid-area: cart !important;
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header-component cart-drawer-component.cart-drawer > button[data-testid="cart-drawer-trigger"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* Quitar texto generado COMPRA YA */
  #header-component cart-drawer-component.cart-drawer > button[data-testid="cart-drawer-trigger"]::before,
  #header-component cart-drawer-component.cart-drawer > button[data-testid="cart-drawer-trigger"]::after,
  #header-component cart-icon::before,
  #header-component cart-icon::after {
    content: none !important;
    display: none !important;
  }

  #header-component cart-icon,
  #header-component .header-actions__cart-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  /* Burbuja del carrito */
  #header-component .cart-bubble {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    transform: none !important;
  }

  /* =========================
     Tamaño iconos
     ========================= */
  #header-component .search-action svg,
  #header-component .account-button__icon svg,
  #header-component cart-icon svg,
  #header-component .header__icon--menu svg,
  #header-component .header-drawer-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  #header-component cart-icon svg[style] {
    width: 20px !important;
    height: 20px !important;
  }

  /* =========================
     Limpieza
     ========================= */
  #header-component .header__row,
  #header-component .header__columns {
    overflow: visible !important;
  }
}



























/* ==========================================
   HOME - Slider de colecciones móvil
   Sección: template--19589641404527__1765328146404e34fa
   ========================================== */
@media screen and (max-width: 749px) {
  /* La sección no debe generar overflow horizontal */
  #shopify-section-template--19589641404527__1765328146404e34fa,
  #shopify-section-template--19589641404527__1765328146404e34fa .section,
  #shopify-section-template--19589641404527__1765328146404e34fa .custom-section-content,
  #shopify-section-template--19589641404527__1765328146404e34fa .section-content-wrapper,
  #shopify-section-template--19589641404527__1765328146404e34fa .shopify-app-block,
  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-slider,
  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-container,
  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-track-container,
  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-track {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fondo / contenedor general */
  #shopify-section-template--19589641404527__1765328146404e34fa .section {
    grid-template-columns: 1fr !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .section-content-wrapper {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* El bloque de la app debe ocupar todo el ancho disponible */
  #shopify-section-template--19589641404527__1765328146404e34fa .shopify-app-block {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Slider principal */
  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-slider.skape-slider_AYUtaQzBvcjE5SThXS__skape_slider_carousel_collections_c3VwRx {
    --slides-to-show: 2 !important;
    --slide-gap: 12px !important;
    width: 100% !important;
    padding: 0 12px 16px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* OJO: este es el causante principal del desborde */
  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-track-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-container {
    padding: 0 !important;
    width: 100% !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-track {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Tarjetas */
  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item {
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item-image {
    margin-bottom: 8px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 370 / 667 !important;
    object-fit: cover !important;
    border-radius: 24px !important;
  }

  /* Quitar animaciones hover que en móvil molestan y pueden romper layout */
  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item:hover .skape-slider-item-image.zoom-card,
  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item-image.zoom-card,
  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item:hover .skape-slider-item-buttons,
  #shopify-section-template--19589641404527__1765328146404e34fa .animate-buttons {
    transform: none !important;
  }

  /* Ocultar textos inferiores si no los quieres visibles en móvil */
  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item-title,
  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item-price,
  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item-buttons {
    display: none !important;
  }

  /* Navegación / paginación */
  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-navigation {
    margin-top: 4px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-pagination.line-style button {
    width: 38px !important;
    height: 4px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
  }

  /* Flechas fuera en móvil */
  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-prev,
  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-next {
    display: none !important;
  }

  /* El fondo decorativo de la sección que no empuje el contenido */
  #shopify-section-template--19589641404527__1765328146404e34fa .custom-section-background,
  #shopify-section-template--19589641404527__1765328146404e34fa .background-image-container {
    overflow: hidden !important;
  }
}

@media screen and (max-width: 749px) {
  /* Más separación con la sección superior */
  #shopify-section-template--19589641404527__1765328146404e34fa {
    margin-top: 0px !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-slider.skape-slider_AYUtaQzBvcjE5SThXS__skape_slider_carousel_collections_c3VwRx {
    --slides-to-show: 4 !important;
    --slide-gap: 8px !important;
    padding: 0 10px 14px !important;
    padding-top: 15px !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-track {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item-image {
    border-radius: 18px !important;
    margin-bottom: 0 !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .skape-slider-item img {
    border-radius: 18px !important;
  }

  #shopify-section-template--19589641404527__1765328146404e34fa .blaze-pagination.line-style button {
    width: 34px !important;
    height: 4px !important;
  }
}















































/* =========================================================
   SECCIÓN: LOS MÁS VENDIDOS
   SOLO MÓVIL
   SOLO ESTA SECCIÓN
   ID: #shopify-section-template--19589641404527__product_list_fa6P9H
   ========================================================= */
@media screen and (max-width: 749px) {

  /* =====================================================
     1) TÍTULO:
     - quitar padding izquierdo del bloque contenedor
     - quitar padding derecho para que quede realmente centrado
     - centrar todo el contenido del header
     ===================================================== */

     
  #shopify-section-template--19589641404527__product_list_fa6P9H .group-block {
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    padding-left: 0 !important;
    padding-right: 35px !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .section-resource-list__header {
    text-align: center !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .group-block-content {
    justify-content: center !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .section-resource-list__header h2,
  #shopify-section-template--19589641404527__product_list_fa6P9H .text-block--AVjExY0RWY05yWmRMZ__product_list_text_YFtzcL {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* =====================================================
     2) ESPACIO ENTRE CARDS:
     - aumenta separación horizontal entre slides
     - añade un poco de aire lateral a cada card
     ===================================================== */
  #shopify-section-template--19589641404527__product_list_fa6P9H .resource-list__carousel slideshow-slides {
    gap: 38px !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .resource-list__item {
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
  }

  /* =====================================================
     3) BOTÓN "COMPRA AHORA":
     - quitar el espacio interno que lo está apretando
     - centrar el bloque del botón
     - permitir que el botón use su ancho natural
     - evitar que el texto se corte
     ===================================================== */
  #shopify-section-template--19589641404527__product_list_fa6P9H .product-form-buttons {
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .product-form-buttons .add-to-cart-button,
  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-button.button {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 0 18px !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
    display: inline-grid !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-text,
  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-text__content {
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* =====================================================
     4) AJUSTE DEL ANCHO DE CADA CARD EN MÓVIL:
     - da un poquito más de espacio útil dentro de la card
     - ayuda a que el botón no quede apretado
     ===================================================== */
  #shopify-section-template--19589641404527__product_list_fa6P9H .resource-list {
    --mobile-card-size: 48cqw !important;
  }
}



































/* =========================================================
   SECCIÓN: Cuidado de la Mujer
   ID: #shopify-section-template--19589641404527__product_list_ghiwW3
   SOLO MÓVIL
   Ajustes:
   - reducir más el espacio izquierdo
   - hacer más pequeño el título principal
   ========================================================= */
@media screen and (max-width: 749px) {

  /* 1) Reducimos el padding lateral general de la sección */
  #shopify-section-template--19589641404527__product_list_ghiwW3 .section.section--page-width {
    --page-margin: 8px !important;
    padding-top: 50px !important;
  }

  /* 2) Quitamos por completo el padding izquierdo del header */
  #shopify-section-template--19589641404527__product_list_ghiwW3 .section-resource-list__header > .group-block {
    --padding-inline-start: 0px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* 3) Hacemos que el contenido del header use todo el ancho */
  #shopify-section-template--19589641404527__product_list_ghiwW3 .section-resource-list__header .group-block-content {
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* 4) Título principal: ancho completo y tamaño un poco menor */
  #shopify-section-template--19589641404527__product_list_ghiwW3 .text-block--AYmphN09QSWhUOXE0a__product_list_text_fzzhtb {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #shopify-section-template--19589641404527__product_list_ghiwW3 .text-block--AYmphN09QSWhUOXE0a__product_list_text_fzzhtb h2,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .text-block--AYmphN09QSWhUOXE0a__product_list_text_fzzhtb h2 strong {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 1.7rem !important;   /* más pequeño */
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  /* 5) Subtítulo script */
  #shopify-section-template--19589641404527__product_list_ghiwW3 .text-block--AWXZScktQNHA4RVdXc__text_UGdYPT {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #shopify-section-template--19589641404527__product_list_ghiwW3 .text-block--AWXZScktQNHA4RVdXc__text_UGdYPT h1,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .text-block--AWXZScktQNHA4RVdXc__text_UGdYPT h1 strong {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 1.9rem !important;
    line-height: 1.1 !important;
  }
}
































/* =========================================================
   SECCIÓN: Salud Digestiva
   ID: #shopify-section-template--19589641404527__product_list_LhMpHX
   SOLO MÓVIL
   Ajustes:
   - eliminar espacio izquierdo del título
   - permitir que el título use mejor el ancho
   - reducir un poco el tamaño para que se vea más limpio
   ========================================================= */
@media screen and (max-width: 749px) {

  /* 1) Reducimos el margen lateral general solo en esta sección */
  #shopify-section-template--19589641404527__product_list_LhMpHX .section.section--page-width {
    --page-margin: 8px !important;
    padding-top: 50px !important;
  }

  /* 2) Quitamos cualquier espacio lateral del bloque del header */
  #shopify-section-template--19589641404527__product_list_LhMpHX .section-resource-list__header > .group-block {
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) El contenedor interno del título también sin espacios */
  #shopify-section-template--19589641404527__product_list_LhMpHX .section-resource-list__header .group-block-content {
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }

  /* 4) Quitamos el padding-left inline que viene en el text-block */
  #shopify-section-template--19589641404527__product_list_LhMpHX .text-block--AYkN0R0Z6Qnp5T0Rwb__product_list_text_gbgLhw {
    --padding-inline-start: 0px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5) Ajustamos el h2 para que use mejor el ancho en móvil */
  #shopify-section-template--19589641404527__product_list_LhMpHX .text-block--AYkN0R0Z6Qnp5T0Rwb__product_list_text_gbgLhw h2,
  #shopify-section-template--19589641404527__product_list_LhMpHX .text-block--AYkN0R0Z6Qnp5T0Rwb__product_list_text_gbgLhw h2 strong {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 1.7rem !important;   /* un poco más pequeño */
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }
}
































/* =========================================================
   HOME STORIES - CARRUSEL MÓVIL FORZADO POR ID DE SECCIÓN
   ========================================================= */
@media screen and (max-width: 749px) {
  #shopify-section-template--19589641404527__home_stories_gmQedQ {
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories {
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .section.section--page-width.spacing-style {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-left: 16px !important;
    padding-right: 0 !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__header {
    display: block !important;
    margin: 0 0 18px 0 !important;
    padding-right: 16px !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__title,
  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__subtitle {
    max-width: 100% !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__rail {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;

    padding: 0 16px 14px 0 !important;
    margin: 0 !important;

    scrollbar-width: none !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__rail::-webkit-scrollbar {
    display: none !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__rail > .home-stories__card {
    position: relative !important;
    display: block !important;
    flex: 0 0 53% !important;
    width: 53% !important;
    min-width: 53% !important;
    max-width: 53% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    scroll-snap-align: start !important;
    background: transparent !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__card-media {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 3 / 4.2 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #f3f3f3 !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__card-media img,
  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__card-media video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__icon-wrap {
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    margin: 0 !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__icon {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
  }

  #shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__badge {
    position: absolute !important;
    left: 50% !important;
    bottom: 6px !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
}



























/* =========================================================
   HERO HOME MOBILE - CORRECCIONES
   - superponer hoja arriba
   - permitir cambiar tamaño real del texto blanco
   ========================================================= */
@media screen and (max-width: 749px) {

  /* ---------------------------------------------------------
     1) Permitir que elementos salgan del hero
     - necesario para que la hoja se monte sobre la sección superior
     --------------------------------------------------------- */
  #shopify-section-template--19589641404527__hero_kMPwfg,
  #shopify-section-template--19589641404527__hero_kMPwfg .hero,
  #shopify-section-template--19589641404527__hero_kMPwfg .hero__container,
  #shopify-section-template--19589641404527__hero_kMPwfg .hero__media-wrapper {
    overflow: visible !important;
  }

  /* ---------------------------------------------------------
     2) Mantener el banner con altura definida
     --------------------------------------------------------- */
  #shopify-section-template--19589641404527__hero_kMPwfg .hero__media-wrapper {
    position: relative !important;
    min-height: 470px !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 470px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  /* ---------------------------------------------------------
     3) Reactivar click del botón
     --------------------------------------------------------- */
  #shopify-section-template--19589641404527__hero_kMPwfg .hero__content-wrapper a.button {
    pointer-events: auto !important;
  }

  /* ---------------------------------------------------------
     4) HOJA SUPERIOR
     - ahora sí podrá subir y montarse sobre la sección de arriba
     - ajusta top y left aquí
     --------------------------------------------------------- */
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AdzV6V21wWWdMZkN0d__image_aeWpKW {
    position: absolute !important;
    top: -42px !important;          /* subir o bajar hoja */
    left: 40% !important;           /* mover izquierda/derecha */
    transform: translateX(-50%) !important;
    width: 84px !important;         /* tamaño hoja */
    max-width: 84px !important;
    min-width: 84px !important;
    z-index: 9999 !important;
    overflow: visible !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AdzV6V21wWWdMZkN0d__image_aeWpKW .image-block__image {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
  }

  /* ---------------------------------------------------------
     5) TEXTO BLANCO PRINCIPAL
     PROBLEMA:
     - el tema le mete size-style e inline vars
     SOLUCIÓN:
     - forzamos width/min/max/flex-basis del bloque
     --------------------------------------------------------- */
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AL2Z5VGNaY0FGYzVGU__image_xnkPDX {
    position: absolute !important;
    top: 50px !important;          /* subir/bajar texto */
    left: -44px !important;          /* mover izquierda/derecha */
    width: 100px !important;        /* tamaño REAL del bloque */
    min-width: 100px !important;
    max-width: 100px !important;
    flex: 0 0 265px !important;
    z-index: 30 !important;

    /* anulamos variables inline del tema */
    --size-style-width: 100px !important;
    --size-style-width-mobile: 100px !important;
    --size-style-width-mobile-min: 100px !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AL2Z5VGNaY0FGYzVGU__image_xnkPDX img,
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AL2Z5VGNaY0FGYzVGU__image_xnkPDX .image-block__image {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    aspect-ratio: auto !important;
  }

  /* ---------------------------------------------------------
     6) LOGO DraNG
     --------------------------------------------------------- */
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AV1JwMjBHajgrbEJXU__image_RPaxNN {
    position: absolute !important;
    top: 276px !important;
    left: 10px !important;
    width: 102px !important;
    min-width:102px !important;
    max-width: 102px !important;
    flex: 0 0 182px !important;
    z-index: 25 !important;

    --size-style-width: 102px !important;
    --size-style-width-mobile: 102px !important;
    --size-style-width-mobile-min: 102px !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AV1JwMjBHajgrbEJXU__image_RPaxNN img,
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AV1JwMjBHajgrbEJXU__image_RPaxNN .image-block__image {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
    aspect-ratio: auto !important;
  }

  /* ---------------------------------------------------------
     7) BOTÓN
     --------------------------------------------------------- */
  #shopify-section-template--19589641404527__hero_kMPwfg a.button,
  #shopify-section-template--19589641404527__hero_kMPwfg .button--AY01udmdwT0NlUzJtZ__button_99EzPk {
    position: absolute !important;
    top: 356px !important;
    left: 24px !important;
    transform: none !important;
    margin-top: 0 !important;
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    z-index: 40 !important;
  }

  /* ---------------------------------------------------------
     8) Overlay suave
     --------------------------------------------------------- */
  #shopify-section-template--19589641404527__hero_kMPwfg .overlay.overlay--gradient {
    opacity: 0.08 !important;
  }

  /* Quitar padding superior del hero */
#shopify-section-template--19589641404527__hero_kMPwfg .hero__container.spacing-style {
  --padding-block-start: 0px !important;
  padding-top: 0 !important;
}
}



@media screen and (max-width: 749px) {

  /* =========================================================
     TEXTO BLANCO - tamaño real controlado sobre la imagen
     ========================================================= */
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AL2Z5VGNaY0FGYzVGU__image_xnkPDX {
    position: absolute !important;
    top: 90px !important;
    left: -60px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 30 !important;

    --size-style-width: auto !important;
    --size-style-width-mobile: auto !important;
    --size-style-width-mobile-min: 0 !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AL2Z5VGNaY0FGYzVGU__image_xnkPDX img,
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AL2Z5VGNaY0FGYzVGU__image_xnkPDX .image-block__image {
    width: 280px !important;      /* <-- AQUI cambias el tamaño real */
    min-width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
  }

  /* =========================================================
     LOGO DRA NG - tamaño real controlado sobre la imagen
     ========================================================= */
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AV1JwMjBHajgrbEJXU__image_RPaxNN {
    position: absolute !important;
    top: 240px !important;
    left: -70px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 25 !important;

    --size-style-width: auto !important;
    --size-style-width-mobile: auto !important;
    --size-style-width-mobile-min: 0 !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AV1JwMjBHajgrbEJXU__image_RPaxNN img,
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AV1JwMjBHajgrbEJXU__image_RPaxNN .image-block__image {
    width: 220px !important;      /* <-- AQUI cambias el tamaño real */
    min-width: 220px !important;
    max-width: 220px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
  }

  /* =========================================================
     HOJA - tamaño real controlado sobre la imagen
     ========================================================= */
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AdzV6V21wWWdMZkN0d__image_aeWpKW {
    position: absolute !important;
    top: -42px !important;
    left: 40% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 9999 !important;
    overflow: visible !important;

    --size-style-width: auto !important;
    --size-style-width-mobile: auto !important;
    --size-style-width-mobile-min: 0 !important;
  }

  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AdzV6V21wWWdMZkN0d__image_aeWpKW img,
  #shopify-section-template--19589641404527__hero_kMPwfg 
  .image-block--AdzV6V21wWWdMZkN0d__image_aeWpKW .image-block__image {
    width: 110px !important;       /* <-- AQUI cambias el tamaño real */
    min-width: 110px !important;
    max-width: 110px !important;
    height: auto !important;
    display: block !important;
  }
}






































/* =========================================================
   HERO PRONAD - AJUSTE MÓVIL
   - deja solo el título arriba
   - oculta el párrafo
   - centra el botón debajo del título
   ========================================================= */
@media screen and (max-width: 749px) {

  /* Contenedor principal */
  #shopify-section-template--19589641404527__hero_qtHEKh .hero__container.spacing-style {
    --padding-block-start: 0px !important;
    --padding-block-end: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Altura del banner móvil */
  #shopify-section-template--19589641404527__hero_qtHEKh .hero__media-wrapper {
    position: relative !important;
    min-height: 420px !important; /* ajusta altura general */
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__hero_qtHEKh .hero__image--mobile {
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Capa de contenido encima de la imagen */
  #shopify-section-template--19589641404527__hero_qtHEKh .hero__content-wrapper {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 26px 20px 0 !important; /* separacion superior */
    margin: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  /* Solo el título visible */
  #shopify-section-template--19589641404527__hero_qtHEKh .text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #shopify-section-template--19589641404527__hero_qtHEKh .text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp h2 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
  }

  /* Primera línea: El elixir de la */
  #shopify-section-template--19589641404527__hero_qtHEKh 
  .text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp h2:first-child {
    font-size: 50px !important;
    font-weight: 400 !important;
    text-transform: none !important;
  }

  /* Segunda línea: JUVENTUD */
  #shopify-section-template--19589641404527__hero_qtHEKh 
  .text-block--AV0cwOUV6RW1MWjZEM__text_JCrenp h2:last-child {
    font-size: 50px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
    margin-bottom: 20px !important;
  }

  /* Ocultar párrafo en móvil */
  #shopify-section-template--19589641404527__hero_qtHEKh .text-block--AYjN5UUtBZEtRcURZa__text_LgnnCh {
    display: none !important;
  }

  /* Botón centrado debajo del título */
  #shopify-section-template--19589641404527__hero_qtHEKh a.button,
  #shopify-section-template--19589641404527__hero_qtHEKh .button--AT0JsNWpMVjgyVWZFR__button_wUPwLi {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 18px auto 0 !important;
    width: 300px !important;
    max-width: calc(100% - 48px) !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
    pointer-events: auto !important;
    z-index: 6 !important;
  }
}























































/* =========================================================
   HOME - Carruseles de productos en móvil
   Objetivos:
   1) Evitar que las cards "bailen" arriba/abajo/lados
   2) Hacer que entren 2 cards completas en pantalla
   3) Solo afectar móvil
========================================================= */
@media screen and (max-width: 749px) {

  /* Secciones de home con carrusel */
  #shopify-section-template--19589641404527__product_list_fa6P9H,
  #shopify-section-template--19589641404527__product_list_ghiwW3,
  #shopify-section-template--19589641404527__product_list_LhMpHX {
    overflow-x: hidden;
  }

  /* Quitar el ancho reducido del carrusel en móvil */
  #shopify-section-template--19589641404527__product_list_fa6P9H .resource-list__carousel,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .resource-list__carousel,
  #shopify-section-template--19589641404527__product_list_LhMpHX .resource-list__carousel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --slide-width-max: none !important;
    --mobile-card-size: calc((100cqw - 12px) / 2) !important;
  }

  /* Área que desliza */
  #shopify-section-template--19589641404527__product_list_fa6P9H slideshow-slides[ref="scroller"],
  #shopify-section-template--19589641404527__product_list_ghiwW3 slideshow-slides[ref="scroller"],
  #shopify-section-template--19589641404527__product_list_LhMpHX slideshow-slides[ref="scroller"] {
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: stretch !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-left: 8px !important;
    padding-right: 8px !important;
    scrollbar-width: none;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H slideshow-slides[ref="scroller"]::-webkit-scrollbar,
  #shopify-section-template--19589641404527__product_list_ghiwW3 slideshow-slides[ref="scroller"]::-webkit-scrollbar,
  #shopify-section-template--19589641404527__product_list_LhMpHX slideshow-slides[ref="scroller"]::-webkit-scrollbar {
    display: none;
  }

  /* Cada slide ocupa exactamente la mitad del ancho disponible */
  #shopify-section-template--19589641404527__product_list_fa6P9H .resource-list__slide,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .resource-list__slide,
  #shopify-section-template--19589641404527__product_list_LhMpHX .resource-list__slide {
    flex: 0 0 calc((100% - 12px - 16px) / 2) !important;
    width: calc((100% - 12px - 16px) / 2) !important;
    min-width: calc((100% - 12px - 16px) / 2) !important;
    max-width: calc((100% - 12px - 16px) / 2) !important;
    scroll-snap-align: start;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    align-self: stretch !important;
    height: auto !important;
  }

  /* Evitar diferencias raras de altura por animaciones internas */
  #shopify-section-template--19589641404527__product_list_fa6P9H .resource-list__item,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .resource-list__item,
  #shopify-section-template--19589641404527__product_list_LhMpHX .resource-list__item,
  #shopify-section-template--19589641404527__product_list_fa6P9H product-card.product-card,
  #shopify-section-template--19589641404527__product_list_ghiwW3 product-card.product-card,
  #shopify-section-template--19589641404527__product_list_LhMpHX product-card.product-card,
  #shopify-section-template--19589641404527__product_list_fa6P9H .product-card__content,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .product-card__content,
  #shopify-section-template--19589641404527__product_list_LhMpHX .product-card__content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Reducir tamaño general de la card */
  #shopify-section-template--19589641404527__product_list_fa6P9H .product-card__content,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .product-card__content,
  #shopify-section-template--19589641404527__product_list_LhMpHX .product-card__content {
    --product-card-gap: 4px !important;
  }

  /* Reducir bloque de imagen */
  #shopify-section-template--19589641404527__product_list_fa6P9H .card-gallery,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .card-gallery,
  #shopify-section-template--19589641404527__product_list_LhMpHX .card-gallery {
    --padding-block-start: 10px !important;
    --padding-block-end: 8px !important;
    --padding-inline-start: 10px !important;
    --padding-inline-end: 10px !important;
  }

  /* Imagen más compacta y estable */
  #shopify-section-template--19589641404527__product_list_fa6P9H .product-media-container,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .product-media-container,
  #shopify-section-template--19589641404527__product_list_LhMpHX .product-media-container {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .card-gallery img.product-media__image,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .card-gallery img.product-media__image,
  #shopify-section-template--19589641404527__product_list_LhMpHX .card-gallery img.product-media__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }

  /* Títulos */
  #shopify-section-template--19589641404527__product_list_fa6P9H .product-card__content h3,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .product-card__content h3,
  #shopify-section-template--19589641404527__product_list_LhMpHX .product-card__content h3,
  #shopify-section-template--19589641404527__product_list_fa6P9H .product-card__content .text-block p,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .product-card__content .text-block p,
  #shopify-section-template--19589641404527__product_list_LhMpHX .product-card__content .text-block p {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  /* Descripción corta */
  #shopify-section-template--19589641404527__product_list_fa6P9H .product-card__short-description,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .product-card__short-description,
  #shopify-section-template--19589641404527__product_list_LhMpHX .product-card__short-description {
    font-size: 11px !important;
    line-height: 1.25 !important;
    min-height: 32px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .product-card__short-description p,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .product-card__short-description p,
  #shopify-section-template--19589641404527__product_list_LhMpHX .product-card__short-description p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Rating */
  #shopify-section-template--19589641404527__product_list_fa6P9H .rating,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .rating,
  #shopify-section-template--19589641404527__product_list_LhMpHX .rating {
    --star-size: 12px !important;
    gap: 1px !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .rating-wrapper,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .rating-wrapper,
  #shopify-section-template--19589641404527__product_list_LhMpHX .rating-wrapper {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }

  /* Precio */
  #shopify-section-template--19589641404527__product_list_fa6P9H product-price .price,
  #shopify-section-template--19589641404527__product_list_ghiwW3 product-price .price,
  #shopify-section-template--19589641404527__product_list_LhMpHX product-price .price {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H product-price,
  #shopify-section-template--19589641404527__product_list_ghiwW3 product-price,
  #shopify-section-template--19589641404527__product_list_LhMpHX product-price {
    --padding-block-start: 4px !important;
    --padding-block-end: 4px !important;
  }

  /* Botones / texto "MÁS INFO" */
  #shopify-section-template--19589641404527__product_list_fa6P9H .product-card__more-info,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .product-card__more-info,
  #shopify-section-template--19589641404527__product_list_LhMpHX .product-card__more-info {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-button,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .add-to-cart-button,
  #shopify-section-template--19589641404527__product_list_LhMpHX .add-to-cart-button {
    min-height: 36px !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .product-form-buttons,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .product-form-buttons,
  #shopify-section-template--19589641404527__product_list_LhMpHX .product-form-buttons {
    --padding-block-start: 0px !important;
    --padding-block-end: 4px !important;
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
  }

  /* Ocultar flechas del carrusel en móvil para liberar espacio */
  #shopify-section-template--19589641404527__product_list_fa6P9H slideshow-arrows,
  #shopify-section-template--19589641404527__product_list_ghiwW3 slideshow-arrows,
  #shopify-section-template--19589641404527__product_list_LhMpHX slideshow-arrows {
    display: none !important;
  }

  /* Ajuste de encabezados de sección */
  #shopify-section-template--19589641404527__product_list_fa6P9H .section-resource-list__header,
  #shopify-section-template--19589641404527__product_list_ghiwW3 .section-resource-list__header,
  #shopify-section-template--19589641404527__product_list_LhMpHX .section-resource-list__header {
    margin-bottom: 8px !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H h1,
  #shopify-section-template--19589641404527__product_list_fa6P9H h2,
  #shopify-section-template--19589641404527__product_list_ghiwW3 h1,
  #shopify-section-template--19589641404527__product_list_ghiwW3 h2,
  #shopify-section-template--19589641404527__product_list_LhMpHX h1,
  #shopify-section-template--19589641404527__product_list_LhMpHX h2 {
    line-height: 1.15 !important;
  }

  /* La regla vieja de márgenes gigantes rompe el layout en móvil */
  #shopify-section-template--19589641404527__product_list_fa6P9H .blaze-track-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



























/* =========================================================
   HEADER MÓVIL - corrección puntual del carrito
   Solo corrige icono + burbuja, sin tocar el layout general
========================================================= */
@media screen and (max-width: 749px) {

  /* Mantener desactivados los textos extra en móvil */
  #header-component cart-drawer-component.cart-drawer > button[data-testid="cart-drawer-trigger"]::before,
  #header-component cart-drawer-component.cart-drawer > button[data-testid="cart-drawer-trigger"]::after,
  #header-component cart-icon::before,
  #header-component cart-icon::after {
    content: none !important;
    display: none !important;
  }

  /* No alterar la columna derecha ni el grid del header */
  /* Solo estabilizamos el botón del carrito */
  #header-component cart-drawer-component.cart-drawer > button[data-testid="cart-drawer-trigger"] {
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    vertical-align: middle !important;
  }

  /* Contenedor del icono */
  #header-component cart-icon,
  #header-component .header-actions__cart-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    overflow: visible !important;
  }

  /* SVG del carrito */
  #header-component .header-actions__cart-icon .svg-wrapper,
  #header-component .header-actions__cart-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
  }

  /* Burbuja encima del carrito, sin mover el icono */
  #header-component .header-actions__cart-icon .cart-bubble {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    min-width: 18px !important;
    height: 18px !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  #header-component .header-actions__cart-icon .cart-bubble__background {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
  }

  #header-component .header-actions__cart-icon .cart-bubble__text,
  #header-component .header-actions__cart-icon .cart-bubble__text-count {
    font-size: 10px !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  /* Asegurar que no se recorte solo esta zona */
  #header-component cart-drawer-component.cart-drawer,
  #header-component cart-drawer-component.cart-drawer > button[data-testid="cart-drawer-trigger"],
  #header-component cart-icon,
  #header-component .header-actions__cart-icon {
    overflow: visible !important;
  }
}

























@media screen and (max-width: 749px) {
  /* Botón del menú */
  #header-component .header__icon--menu,
  #header-component .header__icon--summary {
    position: relative !important;
  }

  /* Estado base de ambos iconos */
  #header-component .header-drawer-icon--open,
  #header-component .header-drawer-icon--close {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #header-component .header-drawer-icon--open svg,
  #header-component .header-drawer-icon--close svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    overflow: visible !important;
  }

  /* CERRADO: mostrar hamburguesa, ocultar X */
  #header-component .menu-drawer-container:not([open]) .header-drawer-icon--open,
  #header-component details:not([open]) .header-drawer-icon--open {
    display: inline-flex !important;
  }

  #header-component .menu-drawer-container:not([open]) .header-drawer-icon--close,
  #header-component details:not([open]) .header-drawer-icon--close {
    display: none !important;
  }

  /* ABIERTO: ocultar hamburguesa, mostrar X */
  #header-component .menu-drawer-container[open] .header-drawer-icon--open,
  #header-component details[open] .header-drawer-icon--open {
    display: none !important;
  }

  #header-component .menu-drawer-container[open] .header-drawer-icon--close,
  #header-component details[open] .header-drawer-icon--close {
    display: inline-flex !important;
  }

  /* Tercera línea solo para la hamburguesa visible */
  #header-component .header-drawer-icon--open::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  /* Si la hamburguesa está oculta, también ocultar su línea extra */
  #header-component .menu-drawer-container[open] .header-drawer-icon--open::after,
  #header-component details[open] .header-drawer-icon--open::after {
    content: none !important;
  }
}

























/* =========================================================
   PRODUCT PAGE MOBILE FIX
   Igualar comportamiento en iPhone y Android
   ========================================================= */
@media screen and (max-width: 749px) {
  /* El contenedor no debe tener padding lateral de desktop */
  .product-information__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: stretch !important;
  }

  /* Quitar offsets laterales heredados */
  .product-information__media {
    padding-right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
  }

  .product-details {
    padding-left: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
    align-self: stretch !important;
    position: relative !important;
    top: auto !important;
  }

  /* Evita que el bloque de galería reserve altura rara */
  .pgc-gallery,
  .pgc-main,
  .product-information__media > div {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Imagen principal */
  #shopify-section-template--19589641568367__main .pgc-main__img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    margin: 20px auto 12px !important;
    object-fit: contain !important;
  }

  /* Quitar cualquier sticky raro en móvil */
  .sticky-content--desktop,
  .product-details.sticky-content--desktop {
    position: relative !important;
    top: auto !important;
  }

  /* El bloque interno del contenido más compacto */
  #ProductInformation-template--19589641568367__main .group-block {
    --padding-block-start: 12px !important;
    --padding-block-end: 12px !important;
  }
}






























































/* =========================================================
   IMAGENES PERSONALIZADAS - 3ra imagen más grande y centrada en móvil
   recorta lados y conserva el centro
   ========================================================= */
@media screen and (max-width: 749px) {
  .imagenes-personalizadas .bloque-imagen:nth-child(3) {
    overflow: hidden !important;
  }

  .imagenes-personalizadas .bloque-imagen:nth-child(3) img {
    display: block !important;
    width: 170% !important;
    max-width: none !important;
    height: auto !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
  }
}










































/* =========================================================
   HOME - LOS MÁS VENDIDOS
   Centrar realmente el botón "COMPRA AHORA" en móvil
   ========================================================= */
@media screen and (max-width: 749px) {
  #shopify-section-template--19589641404527__product_list_fa6P9H .product-form-buttons {
    --padding-block-start: 0px !important;
    --padding-block-end: 4px !important;
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    padding: 0 0 4px 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .buy-buttons-block,
  #shopify-section-template--19589641404527__product_list_fa6P9H product-form-component,
  #shopify-section-template--19589641404527__product_list_fa6P9H .shopify-product-form,
  #shopify-section-template--19589641404527__product_list_fa6P9H span[style*="--add-to-cart-font-case"],
  #shopify-section-template--19589641404527__product_list_fa6P9H add-to-cart-component {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .product-form-buttons .add-to-cart-button,
  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-button.button {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-text,
  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-text__content,
  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-text__content strong {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-text__content,
  #shopify-section-template--19589641404527__product_list_fa6P9H .add-to-cart-text__content strong {
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}




































/* =========================================================
   PRODUCT FAQS - ajuste global de tamaños
   aplica a todos los productos
   ========================================================= */

.product-faqs-section__title {
  font-size: 22px !important;
  line-height: 1.05 !important;
}

.product-faqs-section__question,
.product-faqs-section__answer,
.product-faqs-section__answer p,
.product-faqs-section__answer .metafield-rich_text_field,
.product-faqs-section__answer .metafield-rich_text_field p {
  font-size: 18px !important;
  line-height: 1.55 !important;
}
































/* =========================================================
   HOME - Carruseles de productos en escritorio
   Evita el drag visual raro de imágenes/cards dentro del carrusel
   sin bloquear el scroll normal de la página
========================================================= */
@media screen and (min-width: 750px) {

  /* El área del carrusel sigue permitiendo scroll normal de la página */
  .resource-list__carousel slideshow-slides[ref="scroller"] {
    overflow-y: hidden !important;
  }

  /* Evitar arrastre nativo del navegador sobre imágenes y medios */
  .resource-list__carousel img,
  .resource-list__carousel .product-media__image,
  .resource-list__carousel .product-media-container,
  .resource-list__carousel .card-gallery,
  .resource-list__carousel .resource-list__item,
  .resource-list__carousel .resource-list__slide {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Evitar que los links de la card se "arrastren" visualmente */
  .resource-list__carousel a,
  .resource-list__carousel .contents,
  .resource-list__carousel .product-card__link,
  .resource-list__carousel a[ref="productTitleLink"],
  .resource-list__carousel a[ref="cardGalleryLink"] {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Mantener cursor normal/clickable */
  .resource-list__carousel a,
  .resource-list__carousel button,
  .resource-list__carousel .add-to-cart-button {
    cursor: pointer;
  }
}


























/* =========================================
   SEARCH MODAL - imágenes y texto centrado
========================================= */
#search-modal .predictive-search-results__card--product .resource-card {
  row-gap: 10px;
}

#search-modal .predictive-search-results__card--product .resource-card__media {
  aspect-ratio: 4 / 5;
  min-height: 160px;
  max-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

#search-modal .predictive-search-results__card--product .resource-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
}

#search-modal .resource-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#search-modal .resource-card__title,
#search-modal .resource-card__content .price,
#search-modal .resource-card__content [ref="priceContainer"] {
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media screen and (max-width: 749px) {
  #search-modal .predictive-search-results__card--product .resource-card__media {
    min-height: 110px;
    max-height: 110px;
  }
}

































/* =========================================
   CARRITO - corregir SOLO imagen del producto
   ya agregado al carrito
   (no tocar upsells)
========================================= */

/* Item principal del carrito */
#w4root #w4-storefront-item {
  align-items: center;
}

/* Link/box de la miniatura del producto del carrito */
#w4root #w4-storefront-item > a.wizz-product-img-custom {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  min-height: 104px !important;
  flex: 0 0 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Wrapper interno SOLO del producto del carrito */
#w4root #w4-storefront-item > a.wizz-product-img-custom > div {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Imagen SOLO del producto del carrito */
#w4root #w4-storefront-item > a.wizz-product-img-custom > div > img,
#w4root #w4-storefront-item > a.wizz-product-img-custom img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* Móvil */
@media (max-width: 440px) {
  #w4root #w4-storefront-item > a.wizz-product-img-custom {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    flex: 0 0 90px !important;
  }

  #w4root #w4-storefront-item > a.wizz-product-img-custom > div > img,
  #w4root #w4-storefront-item > a.wizz-product-img-custom img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}





































/* =========================================
   FOOTER MÓVIL - reordenar bloques
   Solo móvil
========================================= */
@media screen and (max-width: 749px) {

  /* Convertimos el contenedor principal del footer en flex vertical */
  .ecom-qqlk5t643tc > .ecom-f12u27dudb5 > .core__row--columns {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 1. Contáctanos */
  .ecom-qqlk5t643tc > .ecom-f12u27dudb5 > .core__row--columns > .ecom-jttay4x64cn {
    order: 1 !important;
  }

  /* 2. Redes sociales */
  .ecom-qqlk5t643tc > .ecom-f12u27dudb5 > .core__row--columns > .ecom-7nrjay415wi {
    order: 2 !important;
  }

  /* 3. Legales */
  .ecom-qqlk5t643tc > .ecom-f12u27dudb5 > .core__row--columns > .ecom-pp7gophrjk,
  .ecom-qqlk5t643tc > .ecom-f12u27dudb5 > .core__row--columns > .ecom-column.ecom-pp7gophrjk {
    order: 3 !important;
  }

  /* Asegurar que cada bloque ocupe todo el ancho en móvil */
  .ecom-qqlk5t643tc > .ecom-f12u27dudb5 > .core__row--columns > .ecom-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Espaciado entre bloques */
  .ecom-qqlk5t643tc > .ecom-f12u27dudb5 > .core__row--columns > .ecom-column + .ecom-column {
    margin-top: 20px !important;
  }

  /* Redes sociales en 2 columnas y centradas */
  .ecom-7nrjay415wi .core__blocks--body {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px 28px !important;
  }

  .ecom-7nrjay415wi .ecom-row .core__row--columns {
    display: flex !important;
    justify-content: center !important;
    gap: 28px !important;
  }

  .ecom-7nrjay415wi .ecom-column {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  .ecom-7nrjay415wi img {
    display: block;
    margin: 0 auto;
  }

  /* Centrar el título de Contacto y Legales si así lo quieres mantener como en la captura */
  .ecom-jttay4x64cn .ecom__heading,
  .ecom-pp7gophrjk .ecom__heading {
    text-align: center !important;
  }
}





























/* Desktop - banner ALIVIO Y CUIDADO TÓPICO */
@media screen and (min-width: 769px) {
  #shopify-section-template--19589641306223__collection_banner_iqzGjV
  #banner-alivio-y-cuidado-topico
  .banner-text {
    align-items: left !important;
    text-align: left !important;
  }

  #shopify-section-template--19589641306223__collection_banner_iqzGjV
  #banner-alivio-y-cuidado-topico
  .banner-text h1 {
    width: 100% !important;
    max-width: 16ch !important;
    /* margin: 0 auto 16px !important; */
    word-spacing: 0.12em !important;
    line-height: 1.02 !important;
    text-align: left !important;
  }

  #shopify-section-template--19589641306223__collection_banner_iqzGjV
  #banner-alivio-y-cuidado-topico
  .banner-text p {
    width: 100% !important;
    text-align: left !important;
  }
}























/* Banner División Veterinaria - mover botón CONOCER MÁS */
#shopify-section-template--19589641404527__slideshow_n8hU6W .button--AUTdmK0xLZkF1SHpGR__button_KiWXhp {
  position: relative !important;
  left: 100px !important;
  top: 350px !important;
}





























/* =========================================================
   Colección - precio siempre visible
   SOLO en esta sección
========================================================= */
#shopify-section-template--19589641306223__main product-card product-price .price {
  background: #6f8b6b !important;
  color: #ffffff !important;
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#shopify-section-template--19589641306223__main product-card product-price {
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}




































/* ===== HERO NATURE'S GARDEN - SOLO DESKTOP, SIN RECORTE ===== */

/* Desktop y pantallas grandes */
@media screen and (min-width: 750px) {
  #shopify-section-template--19589641404527__hero_ENyiLp .hero {
    min-height: auto !important;
  }

  #shopify-section-template--19589641404527__hero_ENyiLp .hero__container {
    position: relative;
  }

  #shopify-section-template--19589641404527__hero_ENyiLp .hero__media-wrapper {
    position: relative;
    overflow: hidden;
    background: #cfd9b8;
    aspect-ratio: 4000 / 1476;
  }

  /* Mostrar solo la imagen desktop */
  #shopify-section-template--19589641404527__hero_ENyiLp .hero__image--desktop {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Ocultar la imagen mobile en desktop */
  #shopify-section-template--19589641404527__hero_ENyiLp .hero__image--mobile {
    display: none !important;
  }

  /* Capa del contenido */
  #shopify-section-template--19589641404527__hero_ENyiLp .hero__content-wrapper {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 6%;
    padding-top: 18%;
    pointer-events: none;
  }

  /* Botón */
  #shopify-section-template--19589641404527__hero_ENyiLp .button,
  #shopify-section-template--19589641404527__hero_ENyiLp .banner__buttons a,
  #shopify-section-template--19589641404527__hero_ENyiLp button,
  #shopify-section-template--19589641404527__hero_ENyiLp .btn {
    font-weight: 800 !important;
  }

  #shopify-section-template--19589641404527__hero_ENyiLp .hero__content-wrapper .button {
    position: relative;
    transform: none !important;
    margin-top: 0 !important;
    pointer-events: auto;
    z-index: 4;
  }

  /* Anular desplazamiento fijo viejo */
  #shopify-section-template--19589641404527__hero_ENyiLp .button {
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* Ajuste para laptops pequeñas / pantallas desktop más bajas */
@media screen and (min-width: 750px) and (max-width: 1366px) {
  #shopify-section-template--19589641404527__hero_ENyiLp .hero__content-wrapper {
    padding-left: 5%;
    padding-top: 16%;
  }
}

/* Mobile y tablet: dejar que Shopify maneje la imagen móvil normalmente */
@media screen and (max-width: 749px) {
  #shopify-section-template--19589641404527__hero_ENyiLp .hero__image--desktop {
    display: none !important;
  }

  #shopify-section-template--19589641404527__hero_ENyiLp .hero__image--mobile {
    display: block !important;
  }
}

/* Quitar espacio superior del hero solo en desktop */
@media screen and (min-width: 750px) {
  #shopify-section-template--19589641404527__hero_ENyiLp .hero__container.spacing-style {
    --padding-block-start: 0px !important;
    --padding-block-end: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

































/* =========================================================
   FIX FINAL - Predictive Search mobile / iPhone Safari
   Centra imágenes y evita que se corten o agranden de más
   ========================================================= */

#search-modal .predictive-search-results__list.predictive-search-results__wrapper-products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 24px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

#search-modal .predictive-search-results__list.predictive-search-results__wrapper-products > li,
#search-modal .predictive-search-results__card--product {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

#search-modal .predictive-search-results__card--product .resource-card {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  row-gap: 8px !important;
}

#search-modal .predictive-search-results__card--product .resource-card__media {
  width: 100% !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

#search-modal .predictive-search-results__card--product .resource-card__image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

#search-modal .predictive-search-results__card--product .resource-card__content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}

#search-modal .predictive-search-results__card--product .resource-card__title,
#search-modal .predictive-search-results__card--product .price,
#search-modal .predictive-search-results__card--product [ref="priceContainer"] {
  width: 100% !important;
  text-align: center !important;
}

/* Refuerzo específico para iPhone / Safari */
@supports (-webkit-touch-callout: none) {
  #search-modal .predictive-search-results__card--product .resource-card__media {
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  #search-modal .predictive-search-results__card--product .resource-card__image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}

































/* ===== SOLO slider móvil indicado: mostrar imagen completa sin recorte ===== */
@media screen and (max-width: 749px) {

  #shopify-section-template--19589641404527__slideshow_jPbNJy {
    display: block !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy slideshow-slide {
    position: relative !important;
    --product-media-fit: contain !important;
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__video-poster,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container > img,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container > video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content a,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content button {
    pointer-events: auto !important;
  }
}

/* ===== MÓVIL: mostrar solo el slider móvil y ocultar el desktop ===== */
@media screen and (max-width: 749px) {

  /* Oculta el slider desktop en móvil */
  #shopify-section-template--19589641404527__slideshow_n8hU6W {
    display: none !important;
  }

  /* Muestra el slider móvil en móvil */
  #shopify-section-template--19589641404527__slideshow_jPbNJy {
    display: block !important;
  }

  /* Evita recorte de imágenes en el slider móvil */
  #shopify-section-template--19589641404527__slideshow_jPbNJy slideshow-slide {
    --product-media-fit: contain !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__video-poster,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container > img,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container > video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Mantiene el contenido encima del banner */
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content a,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content button {
    pointer-events: auto !important;
  }
}

/* =========================================================
   CONTROL TOTAL DE SLIDERS
   Desktop: mostrar solo n8hU6W
   Móvil:   mostrar solo jPbNJy
   ========================================================= */

/* -------- MÓVIL -------- */
@media screen and (max-width: 749px) {
  #shopify-section-template--19589641404527__slideshow_n8hU6W {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* solo para el slider móvil: evitar recorte */
  #shopify-section-template--19589641404527__slideshow_jPbNJy slideshow-slide {
    --product-media-fit: contain !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__video-poster,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container > img,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container > video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content a,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content button {
    pointer-events: auto !important;
  }
}

/* -------- DESKTOP -------- */
@media screen and (min-width: 750px) {
  #shopify-section-template--19589641404527__slideshow_jPbNJy {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #shopify-section-template--19589641404527__slideshow_n8hU6W {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }
}

/* =========================================================
   SLIDER MÓVIL jPbNJy
   - solo aparece en móvil
   - sin recorte
   - sin espacio inferior
   ========================================================= */

@media screen and (max-width: 749px) {

  /* mostrar solo slider móvil */
  #shopify-section-template--19589641404527__slideshow_n8hU6W {
    display: none !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy {
    display: block !important;
  }

  /* quitar alturas forzadas del carrusel */
  #shopify-section-template--19589641404527__slideshow_jPbNJy slideshow-container,
  #shopify-section-template--19589641404527__slideshow_jPbNJy slideshow-slides,
  #shopify-section-template--19589641404527__slideshow_jPbNJy slideshow-slide {
    height: auto !important;
    min-height: 0 !important;
  }

  /* el slide debe ajustarse solo al alto real de la imagen */
  #shopify-section-template--19589641404527__slideshow_jPbNJy slideshow-slide {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    --product-media-fit: contain !important;
    background: transparent !important;
    line-height: 0 !important;
  }

  /* contenedor exacto de la imagen */
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    background: transparent !important;
  }

  /* imagen / poster / video sin espacios fantasmas */
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__video-poster,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container > img,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__image-container > video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    vertical-align: top !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* overlay del contenido encima de la imagen */
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    margin: 0 !important;
  }

  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content a,
  #shopify-section-template--19589641404527__slideshow_jPbNJy .slide__content button {
    pointer-events: auto !important;
  }
}

/* =========================================================
   DESKTOP
   ========================================================= */
@media screen and (min-width: 750px) {
  #shopify-section-template--19589641404527__slideshow_jPbNJy {
    display: none !important;
  }

  #shopify-section-template--19589641404527__slideshow_n8hU6W {
    display: block !important;
  }
}


































/* Mover el botón verde "DESCUBRE TU SOLUCIÓN" a la izquierda y reducir tamaño */
#shopify-section-template--19589641404527__slideshow_jPbNJy .button--AODd3eGZDTXdEQStPT__button_6qBaB3 {
  position: relative;
  right: 100px;        /* Mueve a la izquierda (aumenta el valor para mover más) */
  top: -110px;
  /* Reducir tamaño del botón */
  padding-inline: 15px !important;   /* Reduce el ancho interno (original: 24px) */
  padding-block: 10px !important;    /* Reduce el alto interno (original: 16px) */
  font-size: 10px !important;        /* Reduce el tamaño de fuente */
}
/* Resolución 1920 x 1080 - Alternativa con transform */
@media screen and (min-width: 1900px) and (max-width: 1950px) {
  
  #shopify-section-template--19589641404527__slideshow_jPbNJy .button--AODd3eGZDTXdEQStPT__button_6qBaB3 {
    position: relative !important;
    transform: translate(60px, -30px) !important; /* 60px a la derecha, 30px arriba */
    padding-inline: 18px !important;
    padding-block: 12px !important;
    font-size: 14px !important;
  }
  
}
/* Cambiar color de fondo y texto del botón "CONOCE MÁS" */
#shopify-section-template--19589641404527__slideshow_jPbNJy .button--AZENOVVEzd0FGZFh4R__button_EtCLrJ {
  --button-background-color: #6A8659 !important;
  --button-border-color: #6A8659 !important;
  --button-color: #ffffff !important; /* Texto blanco */
  background-color: #6A8659 !important;
  color: #ffffff !important;
}

/* Hover */
#shopify-section-template--19589641404527__slideshow_jPbNJy .button--AZENOVVEzd0FGZFh4R__button_EtCLrJ:hover {
  --button-background-color: #5a7550 !important;
  --button-color: #ffffff !important;
  background-color: #5a7550 !important;
  color: #ffffff !important;
}






/* FIX tamaño iconos contacto */
.ecom-iconlist--icon svg{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
}

/* opcional: si el contenedor también afecta */
.ecom-iconlist--icon{
  display: flex;
  align-items: center;
  justify-content: center;
}




































/* =========================================================
   AJUSTE FINAL SOLO PARA IMAGENES + BADGE
   NO TOCA PRECIOS
   ========================================================= */

/* 1) Mostrar solo la primera imagen del producto */
#shopify-section-template--19589641601135__main [ref="cardGallery"] slideshow-slides {
  display: flex !important;
  overflow: hidden !important;
}

#shopify-section-template--19589641601135__main [ref="cardGallery"] slideshow-slide {
  display: none !important;
  flex: 0 0 100% !important;
  width: 100% !important;
}

#shopify-section-template--19589641601135__main [ref="cardGallery"] slideshow-slide:first-child {
  display: flex !important;
}

/* ocultar controles del slider en esta seccion */
#shopify-section-template--19589641601135__main slideshow-arrows,
#shopify-section-template--19589641601135__main .slideshow-control {
  display: none !important;
}

/* 2) Igualar el area visual de imagen en todos los productos */
#shopify-section-template--19589641601135__main [ref="cardGallery"] {
  --gallery-aspect-ratio: 1 !important;
}

#shopify-section-template--19589641601135__main .product-media-container {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  min-height: 260px !important;
  max-height: 260px !important;
  height: 260px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* anular el --ratio variable que viene inline en algunos productos */
#shopify-section-template--19589641601135__main .product-media,
#shopify-section-template--19589641601135__main .product-media[style] {
  --ratio: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* imagen estable en todos */
#shopify-section-template--19589641601135__main .product-media__image,
#shopify-section-template--19589641601135__main .product-media-container img,
#shopify-section-template--19589641601135__main .card-gallery img,
#shopify-section-template--19589641601135__main .card-gallery picture {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 3) Badge NUEVO: fijarlo arriba derecha en todos los casos */
#shopify-section-template--19589641601135__main .product-card,
#shopify-section-template--19589641601135__main product-card.product-card {
  position: relative !important;
  overflow: visible !important;
}

/* caso 1: productos con badge real */
#shopify-section-template--19589641601135__main .product-card__badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 20 !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

#shopify-section-template--19589641601135__main .product-card__badge img,
#shopify-section-template--19589641601135__main .product-card__badge-image {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  object-fit: contain !important;
  display: block !important;
}

/* caso 2: productos sin .product-card__badge pero con contenedor de badges */
#shopify-section-template--19589641601135__main .product-badges--top-right {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 19 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* mobile */
@media screen and (max-width: 989px) {
  #shopify-section-template--19589641601135__main .product-media-container {
    min-height: 220px !important;
    max-height: 220px !important;
    height: 220px !important;
  }

  #shopify-section-template--19589641601135__main .product-card__badge {
    top: 8px !important;
    right: 8px !important;
  }

  #shopify-section-template--19589641601135__main .product-card__badge img,
  #shopify-section-template--19589641601135__main .product-card__badge-image {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  #shopify-section-template--19589641601135__main .product-badges--top-right {
    top: 8px !important;
    right: 8px !important;
  }
}

/* =========================================================
   SOLO PRECIO - SEARCH RESULTS
   ========================================================= */

#shopify-section-template--19589641601135__main product-price,
#shopify-section-template--19589641601135__main product-card product-price {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  margin-top: 8px !important;
}

/* anula el align-left de esta plantilla */
#shopify-section-template--19589641601135__main product-price.text-block--align-left,
#shopify-section-template--19589641601135__main product-price.text-left {
  text-align: center !important;
}

/* centra el contenedor interno del precio */
#shopify-section-template--19589641601135__main product-price [ref="priceContainer"],
#shopify-section-template--19589641601135__main product-price > div {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
}

/* precio siempre visible y centrado */
#shopify-section-template--19589641601135__main product-price .price {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
}

/* mata cualquier hover que lo esconda */
#shopify-section-template--19589641601135__main .product-card:hover product-price,
#shopify-section-template--19589641601135__main .product-card:not(:hover) product-price,
#shopify-section-template--19589641601135__main .product-card:hover product-price [ref="priceContainer"],
#shopify-section-template--19589641601135__main .product-card:not(:hover) product-price [ref="priceContainer"],
#shopify-section-template--19589641601135__main .product-card:hover product-price .price,
#shopify-section-template--19589641601135__main .product-card:not(:hover) product-price .price {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
}

/* =========================================================
   PRECIO - COPIADO DE LA SECCION QUE SI FUNCIONA
   ========================================================= */

#shopify-section-template--19589641601135__main product-card product-price {
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

#shopify-section-template--19589641601135__main product-card product-price .price {
  background: #6f8b6b !important;
  color: #ffffff !important;
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#shopify-section-template--19589641601135__main product-card product-price,
#shopify-section-template--19589641601135__main product-card product-price .price,
#shopify-section-template--19589641601135__main .product-card:hover product-price,
#shopify-section-template--19589641601135__main .product-card:hover product-price .price,
#shopify-section-template--19589641601135__main .product-card:not(:hover) product-price,
#shopify-section-template--19589641601135__main .product-card:not(:hover) product-price .price {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#shopify-section-template--19589641601135__main product-card product-price [ref="priceContainer"] {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#shopify-section-template--19589641601135__main product-price.text-block--align-left,
#shopify-section-template--19589641601135__main product-price.text-left {
  text-align: center !important;
}

/* =========================================================
   TITULOS CENTRADOS - SEARCH RESULTS
   ========================================================= */

#shopify-section-template--19589641601135__main [ref="productTitleLink"],
#shopify-section-template--19589641601135__main a.contents.user-select-text,
#shopify-section-template--19589641601135__main .product-grid-view-zoom-out--details,
#shopify-section-template--19589641601135__main .product-grid-view-zoom-out--details h3,
#shopify-section-template--19589641601135__main [class*="__product_title_"],
#shopify-section-template--19589641601135__main [class*="__product_title_"] p {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ajuste fino para mobile */
@media screen and (max-width: 989px) {
  #shopify-section-template--19589641601135__main [ref="productTitleLink"],
  #shopify-section-template--19589641601135__main a.contents.user-select-text,
  #shopify-section-template--19589641601135__main .product-grid-view-zoom-out--details,
  #shopify-section-template--19589641601135__main .product-grid-view-zoom-out--details h3,
  #shopify-section-template--19589641601135__main [class*="__product_title_"],
  #shopify-section-template--19589641601135__main [class*="__product_title_"] p {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

#shopify-section-template--19589641601135__main .product-grid-view-zoom-out--details,
#shopify-section-template--19589641601135__main .product-grid-view-zoom-out--details h3 {
  display: none !important;
}

#shopify-section-template--19589641601135__main .main-collection-grid__title {
  margin-bottom: 24px !important;
}






























/* BLOG TOP BANNER - full width real */
.shopify-section.section-blog-top-banner {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.shopify-section.section-blog-top-banner > .blog-top-banner {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.shopify-section.section-blog-top-banner .blog-top-banner__inner,
.shopify-section.section-blog-top-banner .blog-top-banner__media,
.shopify-section.section-blog-top-banner .blog-top-banner__image,
.shopify-section.section-blog-top-banner picture {
  width: 100% !important;
  max-width: 100% !important;
}

.shopify-section.section-blog-top-banner .blog-top-banner__inner {
  margin: 0 !important;
  padding: 0 !important;
}

.shopify-section.section-blog-top-banner .blog-top-banner__media {
  overflow: hidden !important;
  line-height: 0 !important;
}

.shopify-section.section-blog-top-banner .blog-top-banner__image {
  display: block !important;
  height: auto !important;
  object-fit: cover !important;
}

@media screen and (max-width: 749px) {
  .shopify-section.section-blog-top-banner > .blog-top-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .shopify-section.section-blog-top-banner .blog-top-banner__image {
    height: auto !important;
    object-fit: cover !important;
  }
}

























/* ===================== BOLD TEXTO DESCUBRE TU SOLUCION ===================== */

.hero-text-ng h3{
  font-family: "Montserrat", sans-serif !important;
  margin: 0;
  line-height: 1.2;
}

/* 2026 es tu año */
.hero-text-ng .pf-13_{
  font-weight: 800 !important;
  font-size: clamp(32px, 5vw, 64px);
}

/* para sentirte bien */
.hero-text-ng .pf-15_{
  font-weight: 800 !important;
  font-size: clamp(32px, 5vw, 64px);
}

/* texto descriptivo */
.hero-text-ng .pf-17_{
  font-weight: 500 !important;
  font-size: clamp(16px, 2vw, 24px);
  margin-top: 12px;
}

/* texto final bold */
.hero-text-ng .pf-19_{
  font-weight: 700 !important;
  font-size: clamp(18px, 2.2vw, 26px);
  margin-top: 4px;
}














/* BOTON CONOCE MAS BANNER PRINCIPAL HOME */
@media screen and (max-width: 768px){
  a.button--ARzdHRE0rbU0zNDFUa__button_ThWMaL{
    transform: translateX(-120px); /* mueve a la izquierda */
    margin-top: 300px !important;
  }
}

@media screen and (max-width: 430px) and (max-height: 932px){
  a.button--ARzdHRE0rbU0zNDFUa__button_ThWMaL{
    transform: translateX(-130px);
    margin-top: 300px !important;
  }
}
















/* TITULOS CENTRADOS DEL GRID DE LA PAGINA DE LAS CATEGORIAS */
@media screen and (max-width:768px){
  .ng-collection-products-title{
    text-align: center !important;
    display: block;
    width: 100%;
  }
}




















/* ===== BOTONES VARIABLES SIN FONDO EN HOVER/SELECCIONADO ===== */
.variant-option__button-label {
  background-color: transparent !important;
  box-shadow: none !important;
}

.variant-option__button-label__pill {
  display: none !important;
}

.variant-option__button-label:hover,
.variant-option__button-label:has(input:checked),
.variant-option__button-label:has(input:checked):hover {
  background-color: transparent !important;
}

.variant-option__button-label:focus,
.variant-option__button-label:focus-within,
input[type="radio"]:focus {
  outline: none !important;
  box-shadow: none !important;
}





html, body {
  overflow-x: hidden !important;
}



































/* Variantes estilo Olly */
.variant-option--buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.variant-option--buttons .variant-option__button-label {
  min-height: 78px;
  padding: 12px 16px;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  border: 1px solid #8f8f8f;
  border-radius: 6px;
  box-shadow: none;
}

.variant-option--buttons .variant-option__button-label:hover {
  background: #fff;
  box-shadow: none;
}

.variant-option--buttons .variant-option__button-label:has(:checked) {
  background: #fff;
  border: 1.5px solid #c58be2;
  color: inherit;
}

.variant-option--buttons .variant-option__button-label:has(:checked):hover {
  background: #fff;
  color: inherit;
}

.variant-option__button-label__pill {
  display: none !important;
}

.variant-option__button-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
}

.variant-option__button-thumb {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
}

.variant-option__button-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.variant-option__button-label__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  line-height: 1.2;
  font-size: 16px;
  font-weight: 500;
  color: #4f4f4f;
  white-space: normal;
}

@media screen and (max-width: 749px) {
  .variant-option--buttons {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .variant-option--buttons .variant-option__button-label {
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 6px;
  }

  .variant-option__button-content {
    gap: 10px;
  }

  .variant-option__button-thumb {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .variant-option__button-label__text {
    font-size: 15px;
  }
}

/* Bordes negros por defecto y dorados en hover/seleccionado */
.variant-option__button-label {
  border: 1px solid #000 !important;
}

.variant-option__button-label:hover {
  border-color: #C79A5B !important;
}

.variant-option__button-label:has(input:checked) {
  border-color: #C79A5B !important;
}

.variant-option__button-label:has(input:checked):hover {
  border-color: #C79A5B !important;
}









































html,
body {
  margin: 0 !important;
  overflow-x: hidden !important;
}

html {
  scrollbar-gutter: stable;
}

/* HOME SLIDESHOW: quitar márgenes laterales del grid solo en esa sección */
#shopify-section-template--19589641404527__slideshow_n8hU6W .section {
  --page-margin: 0px !important;
}

/* asegurar ancho total real */
#shopify-section-template--19589641404527__slideshow_n8hU6W,
#shopify-section-template--19589641404527__slideshow_n8hU6W .section,
#shopify-section-template--19589641404527__slideshow_n8hU6W .section--full-width,
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-component,
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-container,
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slides,
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slide__image-container,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slide__video,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slide__video-poster {
  width: 100% !important;
  max-width: 100% !important;
}

/* evita que algo del slideshow se salga horizontalmente */
#shopify-section-template--19589641404527__slideshow_n8hU6W {
  overflow: hidden !important;
}

/* deja solo el padding del contenido textual, no del contenedor general */
#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:first-of-type .slide__content {
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}


































/* PRUEBA TEMPORAL: eliminar scroll interno global */
html,
body,
main,
#MainContent,
.shopify-section-group-main,
.shopify-section-group-main-content,
.shopify-section-group-header-group,
.product-information,
.product-information__grid,
.product-details,
.product-details > .group-block {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  overflow-y: visible !important;
}




































/* SOLO banner: template--19589641404527__slideshow_n8hU6W */
@media screen and (min-width: 1681px) {
  #shopify-section-template--19589641404527__slideshow_n8hU6W {
    --section-height-medium: min(65vh, 708px) !important;
  }

  #shopify-section-template--19589641404527__slideshow_n8hU6W .section,
  #shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-component,
  #shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-container,
  #shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slides,
  #shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide,
  #shopify-section-template--19589641404527__slideshow_n8hU6W .slide__image-container {
    height: min(65vh, 708px) !important;
    min-height: min(65vh, 708px) !important;
    max-height: 708px !important;
  }

  #shopify-section-template--19589641404527__slideshow_n8hU6W .slide__image-container {
    position: relative !important;
    overflow: hidden !important;
  }

  /* imágenes */
  #shopify-section-template--19589641404527__slideshow_n8hU6W .slide__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* video + poster */
  #shopify-section-template--19589641404527__slideshow_n8hU6W .slide__video-poster,
  #shopify-section-template--19589641404527__slideshow_n8hU6W .slide__video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  #shopify-section-template--19589641404527__slideshow_n8hU6W .slide__video-poster {
    z-index: 1 !important;
  }

  #shopify-section-template--19589641404527__slideshow_n8hU6W .slide__video {
    z-index: 2 !important;
    background: transparent !important;
  }

  /* contenido */
  #shopify-section-template--19589641404527__slideshow_n8hU6W .slide__content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  #shopify-section-template--19589641404527__slideshow_n8hU6W .slide__content > * {
    pointer-events: auto !important;
  }

  /* botones generales */
  #shopify-section-template--19589641404527__slideshow_n8hU6W .button--ATjh4UUpRWThiM1pYU__button_zBPXGz,
  #shopify-section-template--19589641404527__slideshow_n8hU6W .button--ASGxhK3M3NkVhMCtlT__button_fwNAac,
  #shopify-section-template--19589641404527__slideshow_n8hU6W .button--AUTdmK0xLZkF1SHpGR__button_KiWXhp {
    position: absolute !important;
    z-index: 10 !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* slide 1 */
  #shopify-section-template--19589641404527__slideshow_n8hU6W .button--ATjh4UUpRWThiM1pYU__button_zBPXGz {
    left: clamp(50px, 4vw, 110px) !important;
    bottom: clamp(30px, 6vh, 80px) !important;
  }

  /* slide 2 */
  #shopify-section-template--19589641404527__slideshow_n8hU6W .button--ASGxhK3M3NkVhMCtlT__button_fwNAac {
    left: clamp(50px, 4vw, 110px) !important;
    bottom: clamp(30px, 6vh, 80px) !important;
  }

  /* slide 3 */
  #shopify-section-template--19589641404527__slideshow_n8hU6W .button--AUTdmK0xLZkF1SHpGR__button_KiWXhp {
    left: clamp(50px, 4vw, 110px) !important;
    bottom: clamp(30px, 6vh, 80px) !important;
  }
}

@media screen and (min-width: 1681px) {
  /* base general del banner */
  #shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide .slide__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* slides con imagen más alta: mover el recorte */
  #shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:nth-of-type(3) .slide__image,
  #shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:nth-of-type(4) .slide__image,
  #shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-slide:nth-of-type(5) .slide__image {
    object-position: center top !important;
  }
}







































/* Página Protección de datos: contenedor centrado + texto justificado + tipografía del sitio */
#shopify-section-template--19589641502831__main .section-content-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#shopify-section-template--19589641502831__main .text-block,
#shopify-section-template--19589641502831__main .shopify-block.rte,
#shopify-section-template--19589641502831__main .shopify-block.rte rte-formatter {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#shopify-section-template--19589641502831__main .shopify-block.rte pre.aLF-aPX-K0-aPE {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  /* evitar desborde */
  white-space: pre-wrap !important;
  overflow-wrap: break-word;
  word-break: normal;

  /* alineación */
  text-align: justify !important;
  text-justify: inter-word;

  /* tipografía igual al resto del sitio */
  font-family: var(--font-body--family) !important;
  font-style: var(--font-body--style) !important;
  font-weight: var(--font-body--weight) !important;
  font-size: var(--font-paragraph--size) !important;
  line-height: var(--font-paragraph--line-height) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--color-foreground) !important;
}

#shopify-section-template--19589641502831__main .text-block--AdDV0Zk1ZYUgzN2F2a__heading {
  width: 100%;
  max-width: 100%;
  margin: 0 0 24px 0;
  text-align: left;
}

#shopify-section-template--19589641502831__main .text-block--AdDV0Zk1ZYUgzN2F2a__heading h1 {
  margin: 0;
}












































/* Páginas de políticas: corregir bloque "Protección de datos personales" */
.shopify-policy__container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.shopify-policy__body,
.shopify-policy__body .rte {
  width: 100%;
  max-width: 100%;
}

.shopify-policy__body .rte pre.aLF-aPX-K0-aPE {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 24px 0 0;
  padding: 0;
  box-sizing: border-box;

  white-space: pre-wrap !important;
  overflow-wrap: break-word;
  word-break: normal;

  text-align: left !important;

  font-family: var(--font-body--family) !important;
  font-style: var(--font-body--style) !important;
  font-weight: var(--font-body--weight) !important;
  font-size: var(--font-paragraph--size) !important;
  line-height: var(--font-paragraph--line-height) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--color-foreground) !important;
}

.shopify-policy__body .rte pre.aLF-aPX-K0-aPE strong,
.shopify-policy__body .rte pre.aLF-aPX-K0-aPE b,
.shopify-policy__body .rte pre.aLF-aPX-K0-aPE span,
.shopify-policy__body .rte pre.aLF-aPX-K0-aPE a {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

@media screen and (max-width: 749px) {
  .shopify-policy__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .shopify-policy__body .rte pre.aLF-aPX-K0-aPE {
    font-size: var(--font-paragraph--size) !important;
    line-height: var(--font-paragraph--line-height) !important;
  }
}

.shopify-policy__body .rte pre.aLF-aPX-K0-aPE {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 24px 0 0;
  padding: 0;
  box-sizing: border-box;

  white-space: pre-wrap !important;
  overflow-wrap: break-word;
  word-break: normal;

  text-align: left !important;

  font-family: var(--font-paragraph--family) !important;
  font-style: var(--font-paragraph--style) !important;
  font-weight: var(--font-paragraph--weight) !important;
  font-size: var(--font-paragraph--size) !important;
  line-height: var(--font-paragraph--line-height) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--color-foreground) !important;
}













































/* =========================================
   PRODUCT PAGE - fijar galería para que
   no invada la columna derecha aunque
   el admin suba muchas imágenes
========================================= */

@media screen and (min-width: 990px) {
  .product-information__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 32px !important;
  }

  .product-information__media,
  .product-details {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .product-information__media {
    overflow: hidden !important;
  }

  .pgc-gallery {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    align-content: start !important;
  }

  .pgc-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .pgc-main__img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .pgc-thumbs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    overflow: hidden !important;
  }

  .pgc-track {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 0 !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .pgc-thumb {
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }

  .pgc-thumb__img {
    display: block !important;
    width: 100% !important;
    height: 80px !important;
    object-fit: contain !important;
  }

  .pgc-nav {
    flex: 0 0 auto !important;
    align-self: center !important;
    z-index: 2 !important;
  }
}

/* Móvil y tablet */
@media screen and (max-width: 989px) {
  .product-information__media {
    overflow: hidden !important;
  }

  .pgc-gallery,
  .pgc-main,
  .pgc-thumbs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .pgc-main__img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .pgc-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .pgc-thumb {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
  }

  .pgc-thumb__img {
    width: 100% !important;
    height: 72px !important;
    object-fit: contain !important;
  }
}

@media screen and (min-width: 990px) {
  .pgc-thumbs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    overflow: hidden !important;
    padding: 0 18px !important;
  }

  .pgc-track {
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100% - 120px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .pgc-nav {
    position: static !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    z-index: 1 !important;
  }
}






























/* =========================================================
   FLECHAS DEL SLIDER HOME
   - círculo verde fijo
   - flecha blanca
   - sin efecto de mezcla/inversión
   - posición manual para bajar/subir flechas
   ========================================================= */

#shopify-section-template--19589641404527__slideshow_n8hU6W slideshow-arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30 !important;
  pointer-events: none;

  /* IMPORTANTE:
     esto elimina el efecto raro de invertir colores */
  mix-blend-mode: normal !important;
}

#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--previous,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--next {
  position: absolute;

  /* =====================================================
     POSICIÓN VERTICAL DE LAS FLECHAS
     Cambia este valor si las quieres:
     - más abajo: aumenta el valor (ej: 52%, 54%, 56%)
     - más arriba: reduce el valor (ej: 48%, 46%)
     ===================================================== */
  top: 47%;

  /* Deja esto en 0 para que no vuelva a subirlas */
  transform: translateY(0);

  z-index: 31 !important;
  pointer-events: auto !important;

  /* fuerza visibilidad aunque el tema las oculte */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* =====================================================
     TAMAÑO DEL CÍRCULO
     Modifica estos 4 valores si quieres el botón
     más grande o más pequeño
     ===================================================== */
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;

  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;

  /* mismo verde del botón */
  background: rgb(106 134 89 / 1) !important;
  background-image: none !important;

  /* color de la flecha */
  color: #ffffff !important;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;

  /* quitar cualquier efecto raro heredado */
  mix-blend-mode: normal !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* evita desalineaciones raras del tema */
  line-height: 0 !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  align-content: center !important;
  overflow: visible !important;
}

/* =====================================================
   POSICIÓN HORIZONTAL
   - aumenta left/right para meterlas más hacia adentro
   - reduce left/right para pegarlas más al borde
   ===================================================== */
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--previous {
  left: 24px;
}

#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--next {
  right: 24px;
}

/* limpiar efectos heredados de elementos internos */
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--previous *,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--next * {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* contenedor del icono */
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--previous .icon-arrow,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--next .icon-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* =====================================================
     TAMAÑO DEL ÁREA DEL ÍCONO
     Puedes subirlo a 26px o 28px si lo quieres mayor
     ===================================================== */
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;

  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* SVG de la flecha */
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--previous svg,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--next svg {
  display: block !important;

  /* =====================================================
     TAMAÑO VISUAL DE LA FLECHA
     Si la quieres más grande:
     26px / 28px
     Si la quieres más pequeña:
     22px
     ===================================================== */
  width: 24px !important;
  height: 24px !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;

  stroke: #ffffff !important;
  stroke-width: 2.8px !important;
  fill: none !important;
}

/* hover */
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--previous:hover,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--next:hover {
  background: rgb(95 121 79 / 1) !important;

  /* Mantener la misma altura al hacer hover */
  transform: translateY(0) scale(1.04);
}






































/* =========================================================
   FLECHAS DEL SLIDER HOME MÓVIL
   Slider:
   #shopify-section-template--19589641404527__slideshow_jPbNJy
   ========================================================= */

#shopify-section-template--19589641404527__slideshow_jPbNJy slideshow-arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30 !important;
  pointer-events: none;

  /* Quita el efecto raro de inversión */
  mix-blend-mode: normal !important;
}

#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--previous,
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--next {
  position: absolute;

  /* =====================================================
     POSICIÓN VERTICAL DE LAS FLECHAS
     - súbelas bajando este valor
     - bájalas subiendo este valor
     Ejemplos:
     50% = más arriba
     55% = más abajo
     60% = todavía más abajo
     ===================================================== */
  top: 45%;

  /* Déjalo en 0 para no re-subirlas */
  transform: translateY(0);

  z-index: 31 !important;
  pointer-events: auto !important;

  /* Fuerza visibilidad aunque el tema las quiera ocultar */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* =====================================================
     TAMAÑO DEL CÍRCULO
     Cambia estos valores si quieres el botón
     más grande o más pequeño
     ===================================================== */
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;

  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;

  /* Mismo verde del botón */
  background: rgb(106 134 89 / 1) !important;
  background-image: none !important;

  /* Flecha blanca */
  color: #ffffff !important;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;

  /* Limpiar efectos heredados */
  mix-blend-mode: normal !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Evitar desalineaciones raras */
  line-height: 0 !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  align-content: center !important;
  overflow: visible !important;
}

/* =====================================================
   POSICIÓN HORIZONTAL
   - aumenta left/right para meterlas más hacia adentro
   - reduce left/right para pegarlas más al borde
   ===================================================== */
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--previous {
  left: 12px;
}

#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--next {
  right: 12px;
}

/* Limpieza de estilos heredados internos */
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--previous *,
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--next * {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Área interna del icono */
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--previous .icon-arrow,
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--next .icon-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* =====================================================
     TAMAÑO DEL ICONO
     Sube a 24px o 26px si lo quieres mayor
     ===================================================== */
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;

  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* SVG de la flecha */
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--previous svg,
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--next svg {
  display: block !important;

  /* =====================================================
     TAMAÑO VISUAL DE LA FLECHA
     ===================================================== */
  width: 22px !important;
  height: 22px !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;

  stroke: #ffffff !important;
  stroke-width: 2.8px !important;
  fill: none !important;
}

/* Hover */
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--previous:hover,
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--next:hover {
  background: rgb(95 121 79 / 1) !important;

  /* Mantener misma altura al hacer hover */
  transform: translateY(0) scale(1.04);
}










































/* ===== FAQs producto: fondo + texto justificado + mismo tamaño ===== */

#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section {
  /* CAMBIA AQUI el color de fondo si luego quieres ajustarlo */
  background-color: #FDF6E9 !important;
}

/* Contenedor general */
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Quitamos el centrado general que hoy viene aplicado en la sección */
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__list,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__item,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__answer,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__answer p,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__answer .metafield-rich_text_field {
  text-align: justify !important;
}

/* El encabezado principal puede quedarse alineado a la izquierda como en la guía */
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__toggle,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__heading-wrap,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__title {
  text-align: left !important;
}

/* Ancho del listado similar a la guía, pero sin centrar el texto */
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__list {
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* MISMO tamaño para preguntas y respuestas */
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__question,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__answer,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__answer p,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__answer .metafield-rich_text_field {
  font-size: 18px !important;   /* CAMBIA AQUI si lo quieres más pequeño o grande */
  line-height: 1.6 !important;
}

/* Preguntas con un poco más de peso visual, pero mismo tamaño */
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__question {
  font-weight: 700 !important;
  color: #7a8f63 !important;
  margin-bottom: 10px !important;
}

/* Respuestas */
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__answer,
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__answer p {
  color: #7a8f63 !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}

/* Espaciado entre bloques FAQ */
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__item {
  margin-bottom: 28px !important;
}

/* Espaciado interno general de la sección */
#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* ===== FAQs producto: preguntas alineadas a la izquierda ===== */

#shopify-section-template--19589641568367__product_faqs_custom .product-faqs-section__question {
  text-align: left !important;
}



















































/* ===== POPUP ===== */
.ng-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.ng-popup.hidden {
  display: none;
}

.ng-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

/* ===== FONDO ===== */
.ng-popup-bg {
  position: absolute;
  width: 1200px;
  max-width: 95%;
  height: 560px;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 🔥 CENTRADO REAL */

  border-radius: 16px;
  overflow: hidden;

  background-image: url("/cdn/shop/files/POP_UP_WEB_SIN_TEXTO-03-03.jpg?v=1775054239");
  background-size: cover;
  background-position: center;
  transform: translate(-50%, -50%) scale(0.8) !important;
  transform-origin: center center;
}
/* ===== LOGO SUPERIOR (CORREGIDO DE VERDAD) ===== */
.ng-popup-logo {
  position: absolute;
  top: 30px;
  left: 60%;
  transform: translateX(-50%);
  width: 140px;

  z-index: 0; /* 🔥 detrás de TODO */
}

/* ===== CARD (MISMA ALTURA QUE FONDO) ===== */
.ng-popup-card {
  position: absolute;
  right: -05px;
  top: 0; /* 🔥 antes 50% */

  height: 100%; /* 🔥 ocupa toda la altura del fondo */
  width: 605px;

  transform: none; /* 🔥 quitamos el centrado vertical */

  padding: 50px 70px 110px;

  background: #f6f3eb;
  border-radius: 16px;
  text-align: center;

  z-index: 2;
}

/* ===== TEXTOS ===== */
.ng-popup-small {
  color: #6A8659;
  font-size: 18px;
  margin-bottom: 5px;
}

.ng-popup-title {
  font-size: 54px;
  font-weight: 700;
  color: #6A8659;
  margin: 0 0 12px;
  line-height: 1;
}

.ng-popup-text {
  font-size: 15px;
  color: #C79859;
  margin-bottom: 25px;
  line-height: 1.5;
}

/* ===== INPUT ===== */
.ng-popup-form input {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  margin-bottom: 15px;
  background: #eeeeee;
  font-size: 14px;
}

/* ===== BOTÓN ===== */
.ng-popup-form button {
  width: 100%;
  padding: 16px;
  background: #6A8659;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.ng-popup-form button:hover {
  background: #5c7650;
}

/* ===== ICONO (AHORA SÍ FUNCIONA) ===== */
.ng-popup-icon {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);

  width: 70px;
  height: 70px;
  background: none;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 5; /* 🔥 por encima de TODO */
}

.ng-popup-icon img {
  width: 60px;
  height: auto;
  display: block;
}

/* ===== CLOSE ===== */
.ng-popup-close {
  position: absolute;
  top: 12px;
  right: 15px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 768px) {

  /* 🔥 CONTENEDOR PRINCIPAL */
  .ng-popup {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 🔥 OVERLAY (NO BLOQUEA CLICKS) */
  .ng-popup-overlay {
    pointer-events: none !important;
  }

  /* 🔥 FONDO */
  .ng-popup-bg {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    width: 92% !important;
    max-width: 360px !important;
    margin: 0 auto !important;

    display: block !important;

    border-radius: 20px !important;
    overflow: hidden !important;

    background-image: url("/cdn/shop/files/POP_UP_WEB_movil-04.jpg?v=1775058463") !important;
    background-size: cover !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;

    padding-top: 220px !important;
    background-color: #f6f3eb !important;

    z-index: 2 !important;
    transform: translate(0%, 0%) !important;
  }

  /* 🔥 CARD */
  .ng-popup-card {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    margin: 0 !important;

    padding: 10px 18px 60px !important;
    background: #f6f3eb !important;
    border-radius: 20px !important;

    z-index: 3 !important;
  }

  /* 🔥 TEXTOS */
  .ng-popup-title {
    font-size: 30px !important;
  }

  .ng-popup-small {
    font-size: 14px !important;
  }

  .ng-popup-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* 🔥 INPUT */
  .ng-popup-form input {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  /* 🔥 BOTÓN */
  .ng-popup-form button {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  /* 🔥 ICONO */
  .ng-popup-icon {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 50px !important;
    height: 50px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 5 !important;
    display: none !important;
  }

  .ng-popup-icon img {
    width: 34px !important;
    display: none !important;
  }

  /* 🔥 BOTÓN CLOSE */
  .ng-popup-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    font-size: 20px !important;

    z-index: 99999 !important;
    pointer-events: auto !important;
  }
}

/* 🔥 ESTA LÍNEA VA AL FINAL */
.ng-popup.hidden {
  display: none !important;
}


















/* ===== POSICION DEL BOTON BANNER SLIDESHOW  ===== */
a.button--AVThQWG81M1JDekEzQ__button_nwyNXW {
  position: absolute !important;
  top: 60%;
  left: 10%;
  transform: translate(-50%, -50%);
}
/* ===== POSICION DEL BOTON BANNER SLIDESHOW MOBILE ===== */
@media screen and (max-width: 768px){
  a.button--AV001d0FPQnJkbC9zO__button_mYPDpJ {
    position: relative !important;
    top: 430px !important;   /* baja el botón */
    left: 185px !important; /* lo mueve a la izquierda */
    display: inline-block !important;
  }
}



/* ===== ESTILO DEL BOTON BANNER COMPRA 3 ===== */
a.button--AVThQWG81M1JDekEzQ__button_nwyNXW,
a.button--AV001d0FPQnJkbC9zO__button_mYPDpJ {

  background: #2f4f2f !important;
  color: #ffffff !important;

  border: 1.5px solid #ffffff !important;
  border-radius: 999px !important;

  padding: 8px 22px !important;
  font-size: 14px !important;
  font-weight: 500 !important;

  box-shadow: none !important;
  transition: all 0.3s ease !important;

  /* CLAVE: resetear estilos del theme */
  appearance: none !important;
  -webkit-appearance: none !important;
}



/* ===== BOTÓN NUEVO (MISMO ESTILO PREMIUM) ===== */
a.button--AVWFJWWFiZ2RweHB5M__button_pQA9BA {

  background: #2f4f2f !important;
  color: #ffffff !important;

  border: 1.5px solid #ffffff !important;
  border-radius: 999px !important;

  padding: 8px 22px !important;
  font-size: 14px !important;
  font-weight: 500 !important;

  box-shadow: none !important;
  transition: all 0.3s ease !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* ===== HOVER ELEGANTE ===== */
a.button--AVWFJWWFiZ2RweHB5M__button_pQA9BA:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}












/* ===== BOTÓN MOBILE (ESTILO + POSICIÓN) ===== */
@media screen and (max-width: 768px){
  a.button--AcWp0cy9VSktKUjd5b__button_qbMqdp {

    /* ESTILO */
    background: #2f4f2f !important;
    color: #ffffff !important;

    border: 1.5px solid #ffffff !important;
    border-radius: 999px !important;

    padding: 6px 18px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;

    box-shadow: none !important;
    transition: all 0.3s ease !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    /* POSICIÓN (LO IMPORTANTE) */
    position: relative !important;
    top: 200px !important;   /* baja el botón */
    left: 60px !important; /* mueve horizontal */
    display: inline-block !important;
  }
}

/* ===== HOVER ===== */
a.button--AcWp0cy9VSktKUjd5b__button_qbMqdp:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}













































/* =========================================
   SLIDER "Salud Digestiva" solamente
   Aumenta el espacio entre cards para que
   no se vea el último producto cortado
========================================= */
#shopify-section-template--19589641404527__product_list_LhMpHX .resource-list[data-testid="resource-list-grid"] {
  --resource-list-column-gap-desktop: 60px !important; /* cambia este valor si lo quieres con más o menos espacio */
}

/* Refuerzo para el carrusel interno de este slider */
#shopify-section-template--19589641404527__product_list_LhMpHX .resource-list__carousel slideshow-slides {
  column-gap: 60px !important; /* mismo valor del espacio entre cards */
}

/* Opcional: un pequeño padding a la derecha para que no asome la siguiente card */
#shopify-section-template--19589641404527__product_list_LhMpHX .resource-list__carousel {
  padding-right: 16px !important; /* puedes subirlo o bajarlo */
}
































/* =========================================
   BANNER RELAX Y DESCANSO
   Pantallas grandes: 1700px en adelante
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Más espacio interno general del bloque de texto */
  #banner-relax-y-descanso .banner-text {
    padding: 52px 70px !important;
  }

  /* Aumenta el espacio entre el título y el texto */
  #banner-relax-y-descanso .banner-text h1 {
    margin-bottom: 28px !important;
  }

  /* Aumenta el tamaño del texto descriptivo */
  #banner-relax-y-descanso .banner-text p {
    font-size: 24px !important;
    line-height: 1.35 !important;
  }
}





/* =========================================
   BOTTOM BANNER RELAX Y DESCANSO
   Pantallas grandes: 1700px en adelante
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco el contenido sin cambiar el tamaño del contenedor */
  #bottom-banner-relax-y-descanso .banner-text {
    justify-content: flex-start !important;
    padding-top: 110px !important;
  }

  /* Hace el titulo un poco más grande */
  #bottom-banner-relax-y-descanso .banner-text h1 {
    font-size: 74px !important;
    line-height: 1.08 !important;
    margin-bottom: 34px !important;
  }

  /* Hace el botón un poco más grande */
  #bottom-banner-relax-y-descanso .banner-btn {
    font-size: 20px !important;
    padding: 16px 30px !important;
  }
}






/* =========================================
   BANNER VITAMINAS
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-vitaminas .banner-text {
    justify-content: flex-start !important;
    padding-top: 95px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-vitaminas .banner-text h1 {
    font-size: 56px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-vitaminas .banner-text p {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }
}













/* =========================================
   BANNER SUPLEMENTOS
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-suplementos .banner-text {
    justify-content: flex-start !important;
    padding-top: 85px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-suplementos .banner-text h1 {
    font-size: 56px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-suplementos .banner-text p {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }
}













/* =========================================
   BANNER ALIVIO Y CUIDADO TÓPICO
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-alivio-y-cuidado-topico .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-alivio-y-cuidado-topico .banner-text h1 {
    font-size: 54px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-alivio-y-cuidado-topico .banner-text p {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
}




















/* =========================================
   BANNER NATURALES
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-naturales .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-naturales .banner-text h1 {
    font-size: 56px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-naturales .banner-text p {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }
}














/* =========================================
   BANNER MINERALES
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-minerales .banner-text {
    justify-content: flex-start !important;
    padding-top: 95px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-minerales .banner-text h1 {
    font-size: 56px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-minerales .banner-text p {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }
}















/* =========================================
   BANNER TRATAMIENTOS ESPECIFICOS
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-tratamientos-especificos .banner-text {
    justify-content: flex-start !important;
    padding-top: 50px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-tratamientos-especificos .banner-text h1 {
    font-size: 60px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-tratamientos-especificos .banner-text p {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
}














/* =========================================
   BANNER SALUD DIGESTIVA
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-salud-digestiva .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-salud-digestiva .banner-text h1 {
    font-size: 54px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-salud-digestiva .banner-text p {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
}












/* =========================================
   BANNER MUJER ACTIVA
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-mujer-activa .banner-text {
    justify-content: flex-start !important;
    padding-top: 95px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-mujer-activa .banner-text h1 {
    font-size: 54px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-mujer-activa .banner-text p {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
}
















/* =========================================
   BANNER ENERGIA VITAL
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-energia-vital .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-energia-vital .banner-text h1 {
    font-size: 54px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-energia-vital .banner-text p {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
}
















/* =========================================
   BANNER PODER INMUNE
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-poder-inmune .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-poder-inmune .banner-text h1 {
    font-size: 54px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-poder-inmune .banner-text p {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
}


















/* =========================================
   BANNER RELAX Y DESCANSO
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-relax-y-descanso .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-relax-y-descanso .banner-text h1 {
    font-size: 54px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-relax-y-descanso .banner-text p {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
}














/* =========================================
   BANNER HOMBRE ACTIVO
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-hombre-activo .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-hombre-activo .banner-text h1 {
    font-size: 54px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-hombre-activo .banner-text p {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
}
















/* =========================================
   BANNER NIÑOS ACTIVOS
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-salud-infantil .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-salud-infantil .banner-text h1 {
    font-size: 54px !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-salud-infantil .banner-text p {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }
}


















/* =========================================
   BANNER ALIVIO MUSCULAR & ÓSEO
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco solo el contenido de texto */
  #banner-alivio-muscular-y-oseo .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta un poco el tamaño del título */
  #banner-alivio-muscular-y-oseo .banner-text h1 {
    font-size: 52px !important;
    line-height: 1.06 !important;
    margin-bottom: 22px !important;
  }

  /* Aumenta un poco el tamaño del texto */
  #banner-alivio-muscular-y-oseo .banner-text p {
    font-size: 23px !important;
    line-height: 1.2 !important;
  }
}


















/* =========================================
   BOTTOM BANNER SALUD DIGESTIVA
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco el contenido sin cambiar la altura del banner */
  #bottom-banner-salud-digestiva .banner-text {
    justify-content: flex-start !important;
    padding-top: 105px !important;
  }

  /* Aumenta el tamaño del título */
  #bottom-banner-salud-digestiva .banner-text h1 {
    font-size: 72px !important;
    line-height: 1.08 !important;
    margin-bottom: 26px !important;
  }

  /* Aumenta el tamaño del texto y separa más del botón */
  #bottom-banner-salud-digestiva .banner-text p {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin-bottom: 34px !important;
  }

  /* Aumenta el tamaño del botón */
  #bottom-banner-salud-digestiva .banner-btn {
    font-size: 20px !important;
    padding: 16px 30px !important;
  }
}














/* =========================================
   BOTTOM BANNER MUJER ACTIVA
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco el contenido sin cambiar la altura del banner */
  #bottom-banner-mujer-activa .banner-text {
    justify-content: flex-start !important;
    padding-top: 75px !important;
  }

  /* Aumenta el tamaño del título y separa más del botón */
  #bottom-banner-mujer-activa .banner-text h1 {
    font-size: 70px !important;
    line-height: 1.06 !important;
    margin-bottom: 34px !important;
  }

  /* Aumenta el tamaño del botón */
  #bottom-banner-mujer-activa .banner-btn {
    font-size: 20px !important;
    padding: 16px 30px !important;
  }
}

















/* =========================================
   BOTTOM BANNER ENERGIA VITAL
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco el contenido sin cambiar la altura del banner */
  #bottom-banner-energia-vital .banner-text {
    justify-content: flex-start !important;
    padding-top: 105px !important;
  }

  /* Aumenta el tamaño del título */
  #bottom-banner-energia-vital .banner-text h1 {
    font-size: 70px !important;
    line-height: 1.06 !important;
    margin-bottom: 24px !important;
  }

  /* Aumenta el tamaño del texto y separa más del botón */
  #bottom-banner-energia-vital .banner-text p {
    font-size: 25px !important;
    line-height: 1.24 !important;
    margin-bottom: 34px !important;
  }

  /* Aumenta el tamaño del botón */
  #bottom-banner-energia-vital .banner-btn {
    font-size: 25px !important;
    padding: 16px 30px !important;
  }
}















/* =========================================
   BOTTOM BANNER PODER INMUNE
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco el contenido sin cambiar la altura del banner */
  #bottom-banner-poder-inmune .banner-text {
    justify-content: flex-start !important;
    padding-top: 105px !important;
  }

  /* Aumenta el tamaño del título y separa más del botón */
  #bottom-banner-poder-inmune .banner-text h1 {
    font-size: 68px !important;
    line-height: 1.06 !important;
    margin-bottom: 34px !important;
  }

  /* Aumenta el tamaño del botón */
  #bottom-banner-poder-inmune .banner-btn {
    font-size: 20px !important;
    padding: 16px 30px !important;
  }
}




















/* =========================================
   BOTTOM BANNER HOMBRE ACTIVO
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco el contenido sin cambiar la altura del banner */
  #bottom-banner-hombre-activo .banner-text {
    justify-content: flex-start !important;
    padding-top: 105px !important;
  }

  /* Aumenta el tamaño del título */
  #bottom-banner-hombre-activo .banner-text h1 {
    font-size: 68px !important;
    line-height: 1.06 !important;
    margin-bottom: 24px !important;
  }

  /* Aumenta el tamaño del texto y separa más del botón */
  #bottom-banner-hombre-activo .banner-text p {
    font-size: 25px !important;
    line-height: 1.24 !important;
    margin-bottom: 34px !important;
  }

  /* Aumenta el tamaño del botón */
  #bottom-banner-hombre-activo .banner-btn {
    font-size: 20px !important;
    padding: 16px 30px !important;
  }
}



















/* =========================================
   BOTTOM BANNER SALUD INFANTIL
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco el contenido sin cambiar la altura del banner */
  #bottom-banner-salud-infantil .banner-text {
    justify-content: flex-start !important;
    padding-top: 85px !important;
  }

  /* Aumenta el tamaño del título */
  #bottom-banner-salud-infantil .banner-text h1 {
    font-size: 66px !important;
    line-height: 1.08 !important;
    margin-bottom: 24px !important;
  }

  /* Aumenta el tamaño del texto y separa más del botón */
  #bottom-banner-salud-infantil .banner-text p {
    font-size: 24px !important;
    line-height: 1.24 !important;
    margin-bottom: 34px !important;
  }

  /* Aumenta el tamaño del botón */
  #bottom-banner-salud-infantil .banner-btn {
    font-size: 20px !important;
    padding: 16px 30px !important;
  }
}















/* =========================================
   BOTTOM BANNER ALIVIO MUSCULAR Y ÓSEO
   Pantallas grandes: 1700px en adelante
   Sin cambiar tamaño del contenedor
   ========================================= */
@media screen and (min-width: 1700px) {

  /* Baja un poco el contenido sin cambiar la altura del banner */
  #bottom-banner-alivio-muscular-y-oseo .banner-text {
    justify-content: flex-start !important;
    padding-top: 105px !important;
  }

  /* Aumenta el tamaño del título */
  #bottom-banner-alivio-muscular-y-oseo .banner-text h1 {
    font-size: 66px !important;
    line-height: 1.08 !important;
    margin-bottom: 24px !important;
  }

  /* Aumenta el tamaño del texto y separa más del botón */
  #bottom-banner-alivio-muscular-y-oseo .banner-text p {
    font-size: 25px !important;
    line-height: 1.24 !important;
    margin-bottom: 34px !important;
  }

  /* Aumenta el tamaño del botón */
  #bottom-banner-alivio-muscular-y-oseo .banner-btn {
    font-size: 20px !important;
    padding: 16px 30px !important;
  }
}

















































/* ===== FIX REAL DEL BANNER + QUITAR ESPACIO ABAJO + DOBLE SCROLL ===== */

/* sección principal */
.__pf.__pf_b4z1pavy .pf-8_ {
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
}

/* contenedor interno de la sección */
.__pf.__pf_b4z1pavy .pf-8_ .pf-flex-section,
.__pf.__pf_b4z1pavy .pf-8_ .gdMpOS {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
}

/* bloque del banner */
.__pf.__pf_b4z1pavy .pf-63_ {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  flex: 0 0 100% !important;
  box-sizing: border-box !important;
}

/* wrapper inmediato de la imagen */
.__pf.__pf_b4z1pavy .pf-64_ {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* imagen y clase base de PageFly */
.__pf.__pf_b4z1pavy .pf-63_ img,
.__pf.__pf_b4z1pavy .pf-64_,
.__pf.__pf_b4z1pavy .pf-64_ img,
.__pf.__pf_b4z1pavy .clbmpw {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* esta clase venía con overflow:auto e inline-block */
.__pf.__pf_b4z1pavy .clbmpw {
  display: block !important;
  overflow: hidden !important;
}

/* ===== QUITAR DOBLE SCROLL VERTICAL ===== */

html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}

body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100% !important;
}

/* evita que wrappers raros hereden scroll */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  overflow-y: visible !important;
}

/* wrappers generales del tema */
html,
body,
main,
#MainContent,
.shopify-section-group-main,
.shopify-section-group-main-content,
.shopify-section-group-header-group,
.product-information,
.product-information__grid,
.product-details,
.product-details > .group-block {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}


































/* ===== Quitar fondo verde de las flechas del slider HOME ===== */
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--previous,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--next {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* hover sin fondo */
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--previous:hover,
#shopify-section-template--19589641404527__slideshow_n8hU6W .slideshow-control--next:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}



/* ===== Quitar fondo de las flechas del slider MOBILE ===== */
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--previous,
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--next {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* hover sin fondo */
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--previous:hover,
#shopify-section-template--19589641404527__slideshow_jPbNJy .slideshow-control--next:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}






























.ng-popup-card {
  border-radius: 0 16px 16px 0 !important;
}





















































/* ===== FIX iPhone: número de WhatsApp no debe verse negro ===== */

/* contenedor link del item de WhatsApp */
.ecom-core.ecom-auqtz92zvit .ecom-base-iconlist .ecom-iconlist--item a.ecom-iconlist--container,
.ecom-core.ecom-auqtz92zvit .ecom-base-iconlist .ecom-iconlist--item a.ecom-iconlist--container:link,
.ecom-core.ecom-auqtz92zvit .ecom-base-iconlist .ecom-iconlist--item a.ecom-iconlist--container:visited,
.ecom-core.ecom-auqtz92zvit .ecom-base-iconlist .ecom-iconlist--item a.ecom-iconlist--container:hover,
.ecom-core.ecom-auqtz92zvit .ecom-base-iconlist .ecom-iconlist--item a.ecom-iconlist--container:active {
  color: #ffffff !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* texto del número */
.ecom-core.ecom-auqtz92zvit .ecom-base-iconlist .ecom-iconlist--item a.ecom-iconlist--container .ecom-iconlist--des,
.ecom-core.ecom-auqtz92zvit .ecom-base-iconlist .ecom-iconlist--item a.ecom-iconlist--container .ecom-iconlist--des * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ícono del WhatsApp */
.ecom-core.ecom-auqtz92zvit .ecom-base-iconlist .ecom-iconlist--item a.ecom-iconlist--container .ecom-iconlist--icon,
.ecom-core.ecom-auqtz92zvit .ecom-base-iconlist .ecom-iconlist--item a.ecom-iconlist--container svg {
  color: #ffffff !important;
  fill: currentColor !important;
}

/* por si iPhone detecta el número automáticamente */
a[x-apple-data-detectors],
a[x-apple-data-detectors-type="telephone"],
a[href^="tel:"] {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-fill-color: inherit !important;
}




























/* ===== ESTILO BOTON EMPIEZA A ELEGIR ===== */
a.button--AcWp0cy9VSktKUjd5b__button_qbMqdp {

  background: #2f4f2f !important;
  color: #ffffff !important;

  border: 1.5px solid #ffffff !important;
  border-radius: 999px !important;

  padding: 8px 22px !important;
  font-size: 14px !important;
  font-weight: 500 !important;

  box-shadow: none !important;
  transition: all 0.3s ease !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* ===== HOVER ===== */
a.button--AcWp0cy9VSktKUjd5b__button_qbMqdp:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}




















/* ===== FIX REDES ABAJO ===== */

.solo-desktop,
.solo-mobile {
  order: 999 !important;
}