/** Shopify CDN: Minification failed

Line 4939:27 Expected ":"

**/
* {
  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 Dancing Script Home Stories ===================== */
#shopify-section-template--19589641404527__home_stories_gmQedQ .home-stories__subtitle{
  --hs-font-family: "Dancing Script" !important;
  font-family: "Dancing Script", cursive !important;
  font-weight: 400 !important;
}




/* =========================================================
   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;
}


/* Reducir tamaño del título del banner */
#bottom-banner-hombre-activo .banner-text h1 {
  font-size: 55px !important; /* ajusta si lo quieres más pequeño */
  line-height: 1.2;
}

/* Opción 1 - Muy específico con !important */
section.collection-banner .banner-text h1,
.collection-banner .banner-text h1 {
  font-size: 50px !important;
  line-height: 1.3 !important;
}

/* Opción 1 - Muy específico con !important */
section.collection-banner .banner-text p,
.collection-banner .banner-text p {
  font-size: 19px !important;
  line-height: 1.3 !important;
}

/* 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; }