/** Shopify CDN: Minification failed

Line 7528:0 Unexpected "}"
Line 8366:1 Unexpected "#"
Line 8366:3 Unexpected "{"
Line 8366:15 Expected ":"
Line 8375:2 Unexpected "#"
Line 8375:4 Unexpected "{"
Line 8375:16 Expected ":"
Line 8380:2 Unexpected "#"
Line 8380:4 Unexpected "{"
Line 8380:16 Expected ":"
... and 183 more hidden warnings

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

.collection-card,
.featured-blog-posts-card {
  width: 100%;
  position: relative;
  height: 100%;
}

/* Editorial layout */
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
  .collection-card__image,
  .featured-blog-posts-card__image,
  .blog-placeholder-svg {
    aspect-ratio: 99;
    height: 100%;
  }

  .collection-card__inner,
  .featured-blog-posts-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .collection-card__content,
  .featured-blog-posts-card__content {
    flex-shrink: 0;
  }

  &:not(.collection-card--image-bg) .collection-card__content,
  .featured-blog-posts-card__content {
    height: auto;
  }
}

.collection-card__inner,
.featured-blog-posts-card__inner {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: var(--layer-flat);
  pointer-events: none;
}

.collection-card__content,
.featured-blog-posts-card__content {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  gap: var(--gap);
}

.collection-card__link,
.featured-blog-posts-card__link {
  position: absolute;
  inset: 0;

  /* allows focus outline to have radius in supported browsers */
  border-radius: var(--border-radius);
}

.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);
  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;
}

.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), 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;
}

@media screen and (max-width: 749px) {
  .section--mobile-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);
}

.icon-default {
  fill: currentColor;
}

[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: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  --start-x: var(--custom-transform-from, 100%);
  --end-x: var(--custom-transform-to, 0px);
  --start-opacity: 1;

  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer[open].dialog-closing {
  --start-x: 0px;
  --end-x: 100%;
  --start-opacity: 1;
  --end-opacity: 1;

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

.dialog-drawer--right[open] {
  --start-x: -100%;
  --start-opacity: 1;
}

.dialog-drawer--right[open].dialog-closing {
  --start-x: 0px;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 1;

  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) / 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);
  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) + 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) + 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));
  }

  &.swatch--variant-image {
    background-size: cover;
  }

  @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;
}

@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;
  }

  &.checkbox--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: var(--color-primary-button-background);
  border-radius: var(--style-border-radius-lg);
}

.cart-bubble__text {
  font-size: var(--font-size--3xs);
  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 {
  --offset-y: 10px;

  position: fixed;
  width: var(--width, 40px);
  height: var(--height, 40px);
  left: 0;
  top: 0;
  z-index: calc(infinity);
  pointer-events: none;
  border-radius: var(--style-border-radius-buttons-primary);
  overflow: hidden;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  opacity: 0;
  background-color: var(--color-foreground);
  translate: var(--start-x, 0) var(--start-y, 0);
  transform: translate(-50%, -50%);
  animation-name: travel-x, travel-y, travel-scale;
  animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
  animation-duration: 0.6s;
  animation-composition: accumulate;
  animation-fill-mode: both;
}

fly-to-cart.fly-to-cart--main {
  --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
  --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
  --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
}

fly-to-cart.fly-to-cart--quick {
  --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
  --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

  animation-duration: 0.6s;
}

fly-to-cart.fly-to-cart--sticky {
  --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
  --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
  --radius: var(--style-border-radius-buttons-primary);

  @media (max-width: 749px) {
    --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
  }

  animation-duration: 0.8s;
}

@keyframes travel-scale {
  0% {
    opacity: var(--start-opacity, 1);
  }

  5% {
    opacity: 1;
  }

  100% {
    border-radius: 50%;
    opacity: 1;
    transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
  }
}

@keyframes travel-x {
  to {
    translate: var(--travel-x, 0) 0;
  }
}

@keyframes travel-y {
  to {
    translate: 0 var(--travel-y, 0);
  }
}

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

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

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

/* 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 move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

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

@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;
  --slide-offset: 6px;

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

slideshow-component.slideshow--content-below-media slideshow-slide {
  display: grid;
}

.slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
  position: static;
}

.slideshow--content-below-media slideshow-slide {
  grid-template-rows: var(--grid-template-rows);

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

.slide__content {
  opacity: 0;
  animation: slide-reveal both linear;
  animation-timeline: var(--slideshow-timeline);

  @media (prefers-reduced-motion) {
    opacity: 1;
    animation: none;
  }
}

.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);
  min-height: var(--slide-min-height);

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

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

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

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

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

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: center;
  width: var(--slide-width, 100%);
  max-height: 100%;
  flex-shrink: 0;
  view-timeline-name: var(--slideshow-timeline);
  view-timeline-axis: inline;
  content-visibility: auto;
  contain-intrinsic-size: auto none;
  border-radius: var(--corner-radius, 0);
  overflow: hidden;

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

  /* Make inactive slides appear clickable */
  &[aria-hidden='true'] {
    cursor: pointer;
  }
}

slideshow-slide .slide__image-container--rounded {
  border-radius: var(--corner-radius, 0);
}

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

@media screen and (min-width: 750px) {
  .media-gallery--carousel 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 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);
  opacity: 1;
}

.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);
  }
}

: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;
  }
}

@keyframes slide-reveal {
  0% {
    translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
    opacity: 0;
  }
}

.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,
.section-carousel {
  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;
}

.section-resource-list.section--full-width product-card-link > .group-block,
.section-carousel.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);
    }

    /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
    &:not(:focus-within)::details-content,
    &:not(:focus-within) .details-content {
      transition: none;
    }

    &: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%);
  }
}


/* ===== Flechas carrusel - visibles y centradas (sin pelear con flip-x) ===== */

/* Asegura un padre relativo (por si no es .slideshow en tu theme) */
.slideshow,
.slideshow-component,
.slideshow__container,
.slideshow-container {
  position: relative;
}

/* Botón flecha */
.slideshow-control.slideshow-control--style-arrow {
  position: absolute !important;
  top: 50% !important;

  /* Centrado real SIN transform (para no chocar con flip-x) */
  width: 54px !important;
  height: 54px !important;
  margin-top: -27px !important; /* mitad del alto */

  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important; /* más visible */
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 12px 30px rgba(0,0,0,.55) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;
  visibility: visible !important;
  z-index: 50 !important;
}

/* Posición izquierda/derecha */
.slideshow-control--previous { left: 14px !important; }
.slideshow-control--next     { right: 14px !important; }

/* Ícono más grande y blanco */
.slideshow-control .icon-arrow svg {
  width: 22px !important;
  height: 22px !important;
  color: #fff !important;
}

/* Hover pro */
.slideshow-control.slideshow-control--style-arrow:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
}

/* Foco teclado */
.slideshow-control:focus-visible {
  outline: 2px solid rgba(245, 196, 81, 0.9);
  outline-offset: 3px;
}

/* =========================================================
   GS CUSTOM SEARCH OVERLAY – PRO VERSION
   ========================================================= */

/* Overlay fondo */
.gs-so {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.gs-so.is-open {
  display: block;
}

.gs-so__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
}

/* Panel central */
.gs-so__panel {
  position: relative;
  width: min(1600px, 94vw);
  margin: 40px auto;
  color: #fff;
}

/* Botón cerrar arriba derecha */
.gs-so__close {
  position: fixed;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  z-index: 10000;
}

/* GRID GRANDE */
.gs-so__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 30px;
}

@media (max-width: 1200px) {
  .gs-so__grid {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }
}

@media (max-width: 900px) {
  .gs-so__grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

/* CARDS */
.gs-so__card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 18px;
  background: rgba(18,18,20,.78);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
  color: #fff;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  min-height: 110px;
}

.gs-so__card:hover {
  transform: translateY(-3px);
  border-color: rgba(168,85,247,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* Imagen tipo poster más grande */
.gs-so__thumb {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  overflow: hidden;
  flex: 0 0 auto;
}

.gs-so__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto */
.gs-so__title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.gs-so__price {
  font-weight: 800;
  color: #20f29b;
  margin-top: 6px;
}

/* =========================================================
   GS SEARCH OVERLAY – LOOK LIKE IMAGE 2 (BIG COVERS + ROW)
   ========================================================= */

/* Overlay full-screen limpio */
#gsSearchOverlay,
#gsSearchOverlayRoot,
#gsSearchOverlayResult {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}

/* Fondo (oscuro + blur suave) */
#gsSearchOverlay {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Contenedor interno: topbar + resultados */
#gsSearchOverlayResult {
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 22px 26px !important;
}

/* ✅ X de cerrar: ARRIBA A LA DERECHA (siempre) */
#gsSearchOverlayClose,
.gs-so__close,
.gs-search-close,
button[aria-label="Close search"],
button[aria-label="Cerrar búsqueda"]{
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 1000000 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

/* Barra de búsqueda arriba (estética tipo imagen 2) */
.gs-so__bar,
.gs-so__top,
.gs-so__searchbar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

/* Input grande */
#gsSearchOverlay input,
#gsSearchOverlayResult input,
.gs-so__input,
.gs-search-input {
  width: 100% !important;
  height: 58px !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(168,85,247,.35) !important;
  color: #fff !important;
  outline: none !important;
}

/* Botón buscar (la lupita morada a la derecha) */
#gsSearchOverlay button.gs-so__submit,
#gsSearchOverlay .gs-so__submit,
#gsSearchOverlayResult .gs-so__submit {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  background: #A855F7 !important;
  border: 0 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
}

/* =========================================================
   ✅ RESULTADOS como “portadas grandes” en FILA HORIZONTAL
   ========================================================= */

.gs-so__results {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-top: 8px !important;
}

/* En vez de grid apretado -> fila (scroll horizontal) */
.gs-so__results .gs-so__grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 10px 6px 18px !important;

  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Scrollbar discreta */
.gs-so__results .gs-so__grid::-webkit-scrollbar {
  height: 10px;
}
.gs-so__results .gs-so__grid::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.gs-so__results .gs-so__grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
}

/* Card: vertical, portada arriba, texto abajo */
.gs-so__results .gs-so__card {
  flex: 0 0 auto !important;
  width: 240px !important;          /* 👈 tamaño tipo imagen 2 */
  scroll-snap-align: start !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
  transition: transform .18s ease, border-color .18s ease !important;
}

.gs-so__results .gs-so__card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(168,85,247,.45) !important;
}

/* La imagen de portada (sirve si tu card tiene <img> dentro) */
.gs-so__results .gs-so__card img {
  width: 100% !important;
  height: 330px !important;          /* 👈 portada alta */
  object-fit: cover !important;
  display: block !important;
}

/* Si tu JS mete wrapper para imagen (por si no es <img> directo) */
.gs-so__results .gs-so__thumb,
.gs-so__results .gs-so__image,
.gs-so__results .gs-so__media {
  width: 100% !important;
  height: 330px !important;
  overflow: hidden !important;
}
.gs-so__results .gs-so__thumb img,
.gs-so__results .gs-so__image img,
.gs-so__results .gs-so__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Área texto abajo */
.gs-so__results .gs-so__meta,
.gs-so__results .gs-so__info {
  padding: 12px 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Título */
.gs-so__results .gs-so__title,
.gs-so__results .gs-so__card h3,
.gs-so__results .gs-so__card .title {
  color: rgba(255,255,255,.95) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 0 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Precio (verde tipo ejemplo) */
.gs-so__results .gs-so__price,
.gs-so__results .price,
.gs-so__results .money {
  color: #00E676 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

/* Responsive: en pantallas pequeñas, card un poquito más angosta */
@media (max-width: 749px){
  .gs-so__results .gs-so__card { width: 210px !important; }
  .gs-so__results .gs-so__card img { height: 300px !important; }
}

/* Ocultar scrollbar horizontal */
.gs-so__results .gs-so__grid {
  scrollbar-width: none; /* Firefox */
}

.gs-so__results .gs-so__grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.gs-so__results-wrapper {
  position: relative;
}

.gs-so__grid {
  display: flex !important;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.gs-so__grid::-webkit-scrollbar {
  display: none;
}

.gs-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  transition: all .2s ease;
}

.gs-scroll-btn:hover {
  background: rgba(168,85,247,.35);
  border-color: rgba(168,85,247,.55);
  box-shadow: 0 0 18px rgba(168,85,247,.45);
}

.gs-scroll-left {
  left: 6px;
}

.gs-scroll-right {
  right: 6px;
}

/* ====== WRAPPER EN 3 COLUMNAS (FLECHAS AFUERA) ====== */
.gs-so__results-wrapper{
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  column-gap: 14px;
  width: 100%;
}

/* Carrusel */
.gs-so__grid{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 4px; /* airecito para sombras */
}

.gs-so__grid::-webkit-scrollbar{
  display: none;
}

/* Botones ya NO absolutos */
.gs-scroll-btn{
  position: static;              /* ✅ fuera del carrusel */
  transform: none;               /* ✅ */
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all .2s ease;
  display: grid;
  place-items: center;
}

.gs-scroll-btn:hover{
  background: rgba(168,85,247,.35);
  border-color: rgba(168,85,247,.55);
  box-shadow: 0 0 18px rgba(168,85,247,.45);
}

/* Ubicación natural por grid */
.gs-scroll-left{ justify-self: start; }
.gs-scroll-right{ justify-self: end; }

/* Responsive: flechas más pequeñas */
@media (max-width: 749px){
  .gs-so__results-wrapper{
    grid-template-columns: 44px 1fr 44px;
    column-gap: 10px;
  }
  .gs-scroll-btn{
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
}

/* =========================================================
   PRODUCTOS – estilo tipo "imagen 2"
   Basado en tu markup real: .card-gallery + .product-grid-view-zoom-out--details
   ========================================================= */

/* 1) Espaciado del grid */
.product-grid,
ul.product-grid,
.grid.product-grid {
  gap: 22px !important;
}

/* 2) La tarjeta base (contenedor visual) */
.card-gallery {
  position: relative !important;
  border-radius: 22px !important;
  overflow: hidden !important;

  background: rgba(15, 15, 15, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;

  /* que el poster “mande” */
  padding: 0 !important;
}

/* Hover premium */
@media (hover:hover) {
  .card-gallery:hover {
    border-color: rgba(168, 85, 247, 0.35) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65) !important;
    transform: translateY(-2px) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
}

/* 3) Imagen poster (proporción) */
.card-gallery .product-media {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;  /* poster */
  overflow: hidden !important;
  border-radius: 22px !important;
}

.card-gallery img.product-media__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4) Quitar/ocultar Quick Add dentro de la tarjeta (para que quede limpio como imagen 2) */
.card-gallery quick-add-component,
.card-gallery .quick-add {
  display: none !important;
}

/* 5) Badge de descuento (tu theme lo deja top-right; lo movemos a top-left y estilo verde) */
.card-gallery .product-badges {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  z-index: 5 !important;
}

.card-gallery .product-badges :is(.badge, .product-badge, .product-card__badge, .product-badges__badge) {
  background: #22c55e !important;
  color: #0b0b0b !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
}

/* Si no hay badge real y solo existe el contenedor vacío, no estorba */
.card-gallery .product-badges:empty {
  display: none !important;
}

/* 6) Bloque de info (título + precio) */
.product-grid-view-zoom-out--details {
  padding: 14px 14px 16px !important;
  background: transparent !important;
}

/* Título */
.product-grid-view-zoom-out--details h3.h4 {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  line-height: 1.15 !important;
  font-size: 14px !important;

  /* para truncar bonito como imagen 2 */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 7) Precio verde + tachado en compare (si existe) */
product-price .price {
  display: inline-block !important;
  margin-top: 10px !important;

  color: #22c55e !important;
  font-weight: 900 !important;
}

/* si tu theme imprime precio compare en algún span adicional, lo dejamos más tenue */
product-price :is(.compare-at-price, .price--compare, .price__compare, s, del) {
  color: rgba(255, 255, 255, 0.45) !important;
  text-decoration: line-through !important;
  font-weight: 700 !important;
  margin-right: 8px !important;
}

/* 8) Asegurar que el link “contents” no aplaste nada */
.card-gallery > a.contents {
  display: block !important;
}

/* 9) Responsive */
@media screen and (min-width: 990px) {
  .product-grid,
  ul.product-grid {
    gap: 26px !important;
  }
}

/* Product card rendering API fallback */
product-card.product-card--rendering {
  display: block !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: rgba(15,15,15,.92) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
}

product-card.product-card--rendering > a.product-card__link {
  display: block !important;
  padding: 14px !important;
  color: inherit !important;
  text-decoration: none !important;
}

product-card.product-card--rendering .product-grid-view-zoom-out--details {
  padding: 0 !important;
}

product-card.product-card--rendering product-price .price {
  color: #22c55e !important;
  font-weight: 900 !important;
}

/* Marco fijo para portadas (todas iguales) */
.product-media {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 18px;
}

/* La imagen rellena el marco */
.product-media__image,
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* clave */
  object-position: center;
  display: block;
}

/* === Margen lateral elegante para el carrusel === */
.section-carousel {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 60px;
}

body {
  max-width: 100vw;
  overflow-x: hidden !important;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #14161a;
}

::-webkit-scrollbar-thumb {
  background: #2f3238;
  border-radius: 20px;
}

/* =========================
   GS MOBILE HEADER BAR
   ========================= */
.gs-mheader { display: none; }

@media (max-width: 749px){
  .gs-mheader{
    display: block;
    padding: 10px 12px 8px;
    background: transparent;
  }

  /* buscador tipo pill */
  .gs-mheader__row{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .gs-mheader__search{
    position: relative;
    flex: 1;
  }

  .gs-mheader__search input{
    width: 100%;
    height: 38px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 0 44px 0 14px;
    outline: none;
  }

  .gs-mheader__search input::placeholder{
    color: rgba(255,255,255,0.75);
  }

  .gs-mheader__search button{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  .gs-mheader__search svg{
    width: 18px;
    height: 18px;
  }

  /* menú horizontal abajo */
  .gs-mheader__nav{
    margin-top: 10px;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none; /* firefox */
  }

  .gs-mheader__nav::-webkit-scrollbar{
    display:none;
  }

  .gs-mheader__nav a{
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    opacity: .92;
  }

  .gs-mheader__nav a:hover{
    opacity: 1;
  }
}



/* =========================
   MOBILE HEADER - CENTRADO NAV (PC/PLAYSTATION/XBOX)
   ========================= */
@media (max-width: 749px) {

  /* Asegura que el wrapper del header no quede “estrecho” */
  .gs-mobile-header,
  .gs-mheader,
  .gs-mheader__row {
    width: 100%;
  }

  /* La fila que contiene el nav: que sea full width */
  .gs-mheader__row {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* importante: que los hijos ocupen ancho */
    gap: 10px;
  }

  /* NAV: centrado real */
  nav.gs-mheader__nav[aria-label="Categorías"],
  .gs-mheader__nav {
    width: 100%;
    display: flex;
    justify-content: center;   /* <-- esto los centra */
    align-items: center;
    gap: 16px;                 /* separación entre PC/PLAYSTATION/XBOX */
    padding: 0 14px 10px;      /* margen a los lados */
    text-align: center;
    flex-wrap: nowrap;
  }

  /* Links del nav: consistentes y bien alineados */
  .gs-mheader__nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
  }

  /* Si el menú es más largo y se vuelve scrolleable, que no se vea la barra */
  .gs-mheader__nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox */
  }
  .gs-mheader__nav::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
  }
}

/* ===========================
   MOBILE HEADER TOP: CENTRADO + COMPACTO
   (NO toca el buscador)
   =========================== */
@media (max-width: 749px){

  /* La franja superior del header (la de menu/logo/iconos) */
  .header__row--top .header__columns{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: auto !important;
    align-items: center !important;
  }

  /* Grid/Wrapper mobile */
  .header__row--top .gs-mobile-header{
    display: grid !important;
    align-items: center !important;
  }

  /* Columna izquierda y derecha bien centradas verticalmente */
  .header__row--top .header__column--left,
  .header__row--top .header__column--right{
    display: flex !important;
    align-items: center !important;
  }

  /* Centro real para el logo (si tu logo queda en el medio) */
  .header__row--top .header__column--left{
    justify-content: center !important;
  }

  /* Derecha (iconos) alineados y sin tanto aire */
  .header__row--top .header__column--right{
    justify-content: center !important;
    gap: 10px !important;
  }

  /* Reduce margenes/paddings internos típicos del tema */
  .header__row--top .header__column--left *,
  .header__row--top .header__column--right *{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Ajusta logo para que no se vea enorme */
  .header__row--top .header-logo img,
  .header__row--top .header__logo img,
  .header__row--top img[alt]{
    max-height: 26px !important;
    width: auto !important;
    display: block !important;
  }
}

/* ===========================
   MOBILE: Header top más compacto (solo vertical)
   + Logo más grande
   =========================== */
@media (max-width: 749px){

  /* La franja superior (menu + logo + iconos) */
  .header__row--top{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: unset !important;
    height: auto !important;
  }

  /* Contenedor de columnas (a veces aquí está el “aire”) */
  .header__row--top .header__columns,
  .header__row--top .gs-mobile-header{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: unset !important;
    height: auto !important;
    align-items: center !important;
  }

  /* Reduce márgenes internos raros de items */
  .header__row--top .header__column,
  .header__row--top .header__column--left,
  .header__row--top .header__column--right{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-items: center !important;
  }

  /* ✅ Logo/ícono del centro: hacerlo más visible */
  .header__row--top .header-logo,
  .header__row--top .header__logo{
    display: flex !important;
    align-items: center !important;
  }

  .header__row--top .header-logo img,
  .header__row--top .header__logo img{
    max-height: 34px !important; /* súbelo a 38px si lo quieres más grande */
    height: 34px !important;
    width: auto !important;
    display: block !important;
  }

  /* Si el logo es SVG o icon font */
  .header__row--top .header-logo svg,
  .header__row--top .header__logo svg{
    height: 34px !important;
    width: auto !important;
    display: block !important;
  }
}
/* =========================================
   FIX FINAL: Header mobile más compacto
   (pegar al FINAL para que gane)
   ========================================= */
@media (max-width: 749px){

  /* 1) Reduce el aire vertical del contenedor mobile */
  .header__row--top .gs-mobile-header{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    row-gap: 6px !important; /* antes 10px */
  }

  /* 2) Quita padding extra del wrapper de columnas */
  .header__row--top .header__columns{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }

  /* 3) Logo: que no quede enano */
  .header__row--top .header-logo img,
  .header__row--top .header__logo img{
    max-height: 32px !important; /* prueba 30-36 */
    height: 32px !important;
    width: auto !important;
  }

  /* Si tu logo es SVG */
  .header__row--top .header-logo svg,
  .header__row--top .header__logo svg{
    height: 32px !important;
    width: auto !important;
  }

  /* 4) Iconos derecha (usuario / carrito) tamaño consistente */
  .header__row--top .header__icons a,
  .header__row--top .header__icons button{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .header__row--top .header__icons svg{
    width: 20px !important;
    height: 20px !important;
  }

  /* 5) Hamburguesa: que no se vea mini */
  .header__row--top .header__drawer button svg{
    width: 22px !important;
    height: 22px !important;
  }
}

/* =========================================
   MOBILE: separar TOP BAR vs SUB BAR
   + Logo más grande sin aumentar el alto total
   ========================================= */
@media (max-width: 749px){

  /* ====== A) TOP BAR (menu + logo + icons) ====== */
  .header__row--top .header__columns{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Si tu wrapper real es .gs-mobile-header */
  .header__row--top .gs-mobile-header{
    /* lo dejamos compacto */
    padding-top: 6px !important;
    padding-bottom: 6px !important;

    /* IMPORTANTE: si en tu grid incluías search/nav aquí,
       no pasa nada: visualmente los separaremos abajo */
    row-gap: 6px !important;
  }

  /* Logo más grande pero sin aumentar el header:
     subimos el logo y bajamos padding (arriba) */
  .header__row--top .header-logo img,
  .header__row--top .header__logo img{
    height: 36px !important;     /* prueba 34-40 */
    max-height: 36px !important;
    width: auto !important;
    display: block !important;
  }

  /* Si el logo es SVG */
  .header__row--top .header-logo svg,
  .header__row--top .header__logo svg{
    height: 36px !important;
    width: auto !important;
    display: block !important;
  }

  /* Iconos derecha: centrados y sin “aire” extra */
  .header__row--top .header__icons,
  .header__row--top [data-testid="header-top-right"]{
    align-items: center !important;
    gap: 10px !important;
  }

  /* ====== B) SUB BAR (buscador + categorías) ====== */
  /* Aquí le damos el look “barra separada” SIN cambiar tu HTML */
  .header__row--top form[action*="/search"],
  .header__row--top predictive-search,
  .header__row--top .gs-mheader,
  .header__row--top .gs-mheader__nav,
  .header__row--top .gs-mheader__row{
    /* visualmente: se ve como bloque separado */
    margin-top: 10px !important;
  }

  /* Si tu buscador está dentro de .gs-mheader, dale “panel” */
  .gs-mheader{
    padding: 10px 12px 10px !important;
    border-top: 1px solid rgba(124,58,237,0.35) !important; /* morado suave */
    background: rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Centrar el menú PC/PLAYSTATION/XBOX y alinear todo */
  .gs-mheader__nav{
    justify-content: center !important;
    padding-bottom: 0 !important;
  }
}

/* =========================================
   MOBILE: TOP BAR más compacto + logo grande
   (sin tocar tu buscador gs-mheader)
   ========================================= */
@media (max-width: 749px){

  /* Reduce aire SOLO en la franja superior del header */
  .header__row--top .header__columns{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .header__row--top .gs-mobile-header{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Logo más grande sin “inflar” el header */
  .header__row--top .header__logo img,
  .header__row--top .header-logo img{
    height: 38px !important;      /* prueba 34–42 */
    max-height: 38px !important;
    width: auto !important;
    display: block !important;
  }

  /* Si el logo es SVG */
  .header__row--top .header__logo svg,
  .header__row--top .header-logo svg{
    height: 38px !important;
    width: auto !important;
    display: block !important;
  }

  /* Centra verticalmente todo lo del top */
  .header__row--top [data-testid="header-top-left"],
  .header__row--top [data-testid="header-top-right"]{
    display: flex !important;
    align-items: center !important;
  }
}

/* =========================================
   MOBILE: “Sub-bar” (gs-mheader) separada y limpia
   ========================================= */
@media (max-width: 749px){

  .gs-mheader{
    display: block;
    padding: 10px 12px 10px;
    margin: 0; /* separado porque ahora está fuera del header-component */
    background: rgba(0,0,0,.35);
    border-top: 1px solid rgba(124,58,237,.35); /* morado suave */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Buscador tal cual, solo que consistente */
  .gs-mheader__search input{
    height: 40px;
  }

  /* Categorías centradas y alineadas */
  .gs-mheader__nav{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 16px;
    text-align: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .gs-mheader__nav::-webkit-scrollbar{ display:none; }

  .gs-mheader__nav a{
    white-space: nowrap;
    line-height: 1;
  }
}
/* =========================================================
   FIX REAL: TOP BAR mobile compacto + logo grande visible
   (solo afecta la franja superior del header)
   ========================================================= */
@media (max-width: 749px){

  /* 1) Mata el “aire” que mete spacing-style (variables) */
  .header__row--top .header__columns.spacing-style{
    --padding-block-start: 0px !important;
    --padding-block-end: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* A veces el theme mete altura mínima */
  .header__row--top,
  .header__row--top .header__columns,
  .header__row--top .gs-mobile-header{
    min-height: 0 !important;
    height: auto !important;
  }

  /* 2) Compacta SOLO arriba/abajo (lados igual) */
  .header__row--top .gs-mobile-header{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* 3) Asegura que el “row” y columnas no tengan márgenes raros */
  .header__row--top .header__column,
  .header__row--top .header__column--left,
  .header__row--top .header__column--right{
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 4) LOGO: este es el selector que normalmente usa Dawn-like:
        <a class="... header-logo"> */
  .header__row--top a.header-logo,
  .header__row--top a.header__logo,
  .header__row--top .header-logo,
  .header__row--top .header__logo{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* 5) Fuerza tamaño del LOGO (imagen) */
  .header__row--top a.header-logo img,
  .header__row--top a.header__logo img,
  .header__row--top .header-logo img,
  .header__row--top .header__logo img{
    height: 40px !important;      /* sube/baja: 36–44 */
    max-height: 40px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 6) Si tu logo es SVG (muy común) */
  .header__row--top a.header-logo svg,
  .header__row--top a.header__logo svg,
  .header__row--top .header-logo svg,
  .header__row--top .header__logo svg{
    height: 40px !important;
    width: auto !important;
    display: block !important;
  }
}

/* =========================================
   MOBILE: HEADER TOP ULTRA COMPACTO
   ========================================= */
@media (max-width: 749px){

  /* 1) Elimina padding vertical del wrapper section */
  .header__row--top.section{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 2) Mata las variables internas de spacing-style */
  .header__row--top .spacing-style{
    --padding-block-start: 0px !important;
    --padding-block-end: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 3) Quita altura mínima forzada */
  .header__row--top,
  .header__row--top .header__columns,
  .header__row--top .gs-mobile-header{
    min-height: unset !important;
    height: auto !important;
  }

  /* 4) Compacta solo el top bar */
  .header__row--top .gs-mobile-header{
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* 5) Asegura que columnas no metan aire */
  .header__row--top .header__column,
  .header__row--top .header__column--left,
  .header__row--top .header__column--right{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

}
/* ===========================
   MOBILE MENU DRAWER (limpio tipo imagen 2)
   =========================== */
@media (max-width: 749px){

  /* 1) El panel del menú (drawer) */
  .menu-drawer,
  .header__drawer .menu-drawer{
    width: min(86vw, 340px) !important;  /* angosto tipo sidebar */
    max-width: 340px !important;
    background: #14161a !important;
    color: #fff !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
  }

  /* Si tu tema usa un contenedor interno */
  .menu-drawer__inner-container,
  .menu-drawer__inner{
    background: #14161a !important;
  }

  /* 2) Quitar “cosas raras” (productos/cards/promos) dentro del menú */
  .menu-drawer .product-card,
  .menu-drawer product-card,
  .menu-drawer .card-gallery,
  .menu-drawer .collection,
  .menu-drawer .featured-collection,
  .menu-drawer .grid,
  .menu-drawer .product-grid,
  .menu-drawer .mega-menu,
  .menu-drawer .mega-menu__content,
  .menu-drawer .menu-drawer__promo,
  .menu-drawer .menu-drawer__featured,
  .menu-drawer [class*="product"],
  .menu-drawer [class*="collection"]{
    display: none !important;
  }

  /* 3) Dejar solo la navegación principal visible */
  .menu-drawer__navigation,
  .menu-drawer__menu{
    display: block !important;
  }

  /* 4) Espaciado general del drawer (más pro) */
  .menu-drawer__navigation-container,
  .menu-drawer__navigation{
    padding: 12px 14px !important;
  }

  /* 5) Links en lista vertical, con separadores */
  .menu-drawer__menu-item,
  .menu-drawer__menu a,
  .menu-drawer__navigation a{
    display: block !important;
    padding: 12px 8px !important;
    color: rgba(255,255,255,.92) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  /* Hover/active */
  .menu-drawer__menu-item:hover,
  .menu-drawer__menu a:hover,
  .menu-drawer__navigation a:hover{
    color: #ffffff !important;
    background: rgba(255,255,255,.04) !important;
  }

  /* Link activo (si el tema marca current) */
  .menu-drawer a[aria-current="page"],
  .menu-drawer a.active{
    color: rgb(138, 92, 201) !important;                 /* verde tipo ejemplo */
    position: relative;
  }
  .menu-drawer a[aria-current="page"]::after,
  .menu-drawer a.active::after{
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    background:rgb(138, 92, 201);
    border-radius: 999px;
  }

  /* 6) Botón cerrar más limpio */
  .menu-drawer__close-button,
  .menu-drawer .menu-drawer__close{
    color: #fff !important;
  }
}

/* =========================================================
   FIX: No romper el menú del drawer (vertical al abrir)
   y mantener horizontal SOLO la barra gs-mheader
   ========================================================= */
@media (max-width: 749px){

  /* ---------------------------------------------------------
     A) HEADER NORMAL: tu menú de categorías (horizontal)
     SOLO aplica a .gs-mheader__nav (no a "nav" genérico)
     --------------------------------------------------------- */
  .gs-mheader__nav{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  .gs-mheader__nav::-webkit-scrollbar{ display:none; }

  .gs-mheader__nav a{
    display: inline-flex !important;
    white-space: nowrap !important;
  }

  /* ---------------------------------------------------------
     B) DRAWER (al darle click al menú): forzar VERTICAL
     --------------------------------------------------------- */
  .menu-drawer nav ul,
  .menu-drawer__navigation ul,
  .menu-drawer__menu{
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .menu-drawer nav li,
  .menu-drawer__navigation li{
    display: block !important;
    width: 100% !important;
  }

  .menu-drawer nav a,
  .menu-drawer__navigation a,
  .menu-drawer__menu a{
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    white-space: normal !important;
  }

  /* Si el tema metió grid/flex raro dentro del drawer */
  .menu-drawer .grid,
  .menu-drawer .product-grid,
  .menu-drawer [class*="grid"]{
    display: block !important;
  }
}

/* =========================================================
   FIX "MÁS" (overflow menu): que el dropdown aparezca al hover
   y se sobreponga SOLO sobre el área del menú (sin tapar la derecha)
   ========================================================= */
@media (min-width: 750px){

  /* 1) Asegura que el contenedor del menú deje salir el dropdown */
  .gs-desktop-header,
  .gs-desktop-header .gs-left,
  .gs-desktop-header .gs-menu,
  .header,
  .header__row--top,
  .header__columns{
    overflow: visible !important;
  }

  /* 2) El área del menú será el "límite" para que el dropdown NO invada a la derecha */
  .gs-desktop-header .gs-left{
    position: relative !important;
    z-index: 20;
  }

  .gs-desktop-header .gs-menu{
    position: relative !important;
    z-index: 30;
  }

  /* 3) Shopify/Dawn-like: "Más" suele ser un <details> dentro del inline menu */
  .gs-desktop-header .gs-menu details{
    position: relative !important;
  }

  /* Abre en hover (sin necesidad de click) */
  .gs-desktop-header .gs-menu details:hover > summary + *{
    display: block !important;
  }

  /* 4) Dropdown (submenu) sobrepuesto encima del menú */
  .gs-desktop-header .gs-menu details > summary + *{
    display: none;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;

    /* Importante: que no se vaya a la derecha a tapar iconos/buscador */
    max-width: 100% !important;
    width: max-content !important;
    min-width: 220px;

    z-index: 9999 !important;

    background: #14161a !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    padding: 10px !important;

    box-shadow: 0 12px 30px rgba(0,0,0,.55) !important;
  }

  /* 5) Links del dropdown */
  .gs-desktop-header .gs-menu details > summary + * a{
    display: block !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,.92) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .gs-desktop-header .gs-menu details > summary + * a:hover{
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
  }
}

/* ============================
   LOGO: NUNCA ocultar
   ============================ */
@media (max-width: 1200px){
  /* Dawn/OS2.0 típicos */
  .header__heading,
  .header__heading-link,
  .header__heading-logo,
  .header__heading-logo-wrapper,
  .header__logo,
  .header__logo-wrapper,
  .header__heading img,
  .header__heading svg{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }

  /* Tu wrapper custom */
  .gs-logo,
  .gs-logo a,
  .gs-logo img,
  .gs-logo svg{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Evita que el logo se “encoga” hasta desaparecer */
  .gs-logo,
  .header__heading,
  .header__heading-link{
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
  }

  /* Tamaño real del logo */
  .gs-logo img,
  .header__heading img{
    height: 34px !important; /* ajusta 30-40 */
    width: auto !important;
    object-fit: contain !important;
  }
}
/* =========================================
   DESKTOP / TABLET: Logo más compacto
   para que el menú no se monte
   ========================================= */
@media (max-width: 1200px){

  /* Tu header desktop layout */
  .gs-desktop-header{
    align-items: center !important;
  }

  /* Bloque izquierdo: logo + menú */
  .gs-desktop-header .gs-left{
    display: flex !important;
    align-items: center !important;
    gap: 14px !important; /* <-- baja/ajusta el espacio entre logo y menú */
    min-width: 0 !important;
  }

  /* Logo: que NO reserve un bloque gigante */
  .gs-desktop-header .gs-logo{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* Si tu logo es <img> */
  .gs-desktop-header .gs-logo img{
    height: 34px !important;
    width: auto !important;
    max-width: 120px !important;   /* <-- CLAVE: evita que “empuje” todo */
    object-fit: contain !important;
    display: block !important;
  }

  /* Si tu logo es SVG */
  .gs-desktop-header .gs-logo svg{
    height: 34px !important;
    width: auto !important;
    max-width: 120px !important;
    display: block !important;
  }

  /* Menú: que pueda encogerse y no empuje a los iconos */
  .gs-desktop-header .gs-menu{
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Menú interno (si es lista): evita montarse */
  .gs-desktop-header .gs-menu ul{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    min-width: 0 !important;
  }
}

/* =========================================
   EXTRA: cuando la pantalla es más pequeña,
   reduce un poco el gap del menú
   ========================================= */
@media (max-width: 1024px){
  .gs-desktop-header .gs-left{ gap: 10px !important; }
  .gs-desktop-header .gs-menu ul{ gap: 14px !important; }
  .gs-desktop-header .gs-logo img,
  .gs-desktop-header .gs-logo svg{
    max-width: 95px !important;
    height: 32px !important;
  }
}

/* =========================================================
   FIX: Dropdown "Más" del overflow-list (desktop)
   - Evita wrap (clave)
   - Panel visible (z-index + sin recortes)
   - Fondo negro puro
   ========================================================= */
@media (min-width: 750px){

  /* 1) Que NADA del header recorte el dropdown */
  .header,
  .header__row--top,
  .header__columns,
  header-menu,
  .header-menu,
  .header-menu__inner,
  .menu-list{
    overflow: visible !important;
  }

  /* 2) El host debe ser referencia para el dropdown */
  overflow-list{
    position: relative !important;
    z-index: 50 !important;
  }

  /* 3) Lista principal: NO wrap + oculta lo que no cabe (para que "Más" tenga sentido) */
  overflow-list::part(list){
    display: flex !important;
    flex-wrap: nowrap !important;   /* <-- CLAVE (tu inline dice wrap) */
    overflow: hidden !important;
    align-items: center !important;
  }

  /* 4) El panel del "Más": negro puro, encima de todo */
  overflow-list::part(overflow){
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;

    background: #000 !important; /* negro puro */
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.65) !important;

    z-index: 99999 !important;
  }

  /* Solo cuando esté activo (tu div tiene data-active) */
  overflow-list::part(overflow):not([data-active]){
    display: none !important;
  }

  /* 5) Lista dentro del dropdown */
  overflow-list::part(overflow-list){
    padding: 10px 0 !important;
    min-width: 220px !important;
  }

  /* Estilo de los links dentro del dropdown para que parezca del header */
  overflow-list::part(overflow-list) a,
  overflow-list::part(overflow-list) button{
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 12px 14px !important;
    display: block !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }

  overflow-list::part(overflow-list) a:hover,
  overflow-list::part(overflow-list) button:hover{
    background: rgba(255,255,255,.06) !important;
  }
}

/* =========================================================
   DESKTOP: Header menu estable (sin montarse encima)
   + overflow "Más" visible
   ========================================================= */
@media (min-width: 750px){

  /* 1) Evita que el menú se estire infinito y se coma los íconos */
  .gs-desktop-header{
    display:flex !important;
    align-items:center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  /* Col izquierda (logo + menu) que pueda encogerse */
  .gs-desktop-header .gs-left{
    display:flex !important;
    align-items:center !important;
    gap: 14px !important;
    min-width: 0 !important;              /* CLAVE */
    flex: 1 1 auto !important;            /* CLAVE */
  }

  /* Logo no desaparece ni se encoge raro */
  .gs-desktop-header .gs-logo{
    flex: 0 0 auto !important;
  }

  /* Menú que pueda encogerse sin romper layout */
  .gs-desktop-header .gs-menu{
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Col derecha (social + search + actions) fija */
  .gs-desktop-header .gs-right{
    flex: 0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap: 12px !important;
  }

  /* 2) Overflow-list: que NO wrapee y que sí haga overflow con "Más" */
  overflow-list::part(list){
    display:flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  /* 3) El panel del "Más" encima y negro puro */
  overflow-list{
    position: relative !important;
    z-index: 100 !important;
  }

  overflow-list::part(overflow){
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    background: #000 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.65) !important;
    z-index: 99999 !important;
  }

  /* Si el tema lo está dejando "visible" pero vacío/colapsado */
  overflow-list::part(overflow-list){
    min-width: 220px !important;
    padding: 10px 0 !important;
  }

  /* Links del dropdown */
  overflow-list::part(overflow-list) a,
  overflow-list::part(overflow-list) button{
    color:#fff !important;
    font-weight:700 !important;
    font-size:13px !important;
    padding:12px 14px !important;
    display:block !important;
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
    text-align:left !important;
  }

  overflow-list::part(overflow-list) a:hover,
  overflow-list::part(overflow-list) button:hover{
    background: rgba(255,255,255,.06) !important;
  }
}

/* =========================================================
   DESKTOP PEQUEÑO: menú con scroll horizontal para ver TODO
   (recomendado)
   ========================================================= */

/* Ajusta este breakpoint a tu gusto: 1200, 1100, 1024... */
@media (max-width: 1100px) and (min-width: 750px){

  /* 1) Asegura layout estable */
  .gs-desktop-header{
    gap: 12px !important;
  }
  .gs-desktop-header .gs-left{
    min-width: 0 !important;
  }
  .gs-desktop-header .gs-menu{
    min-width: 0 !important;
  }

  /* 2) Convierte el UL del menú en “carrusel” horizontal */
  .gs-desktop-header .gs-menu ul,
  .gs-desktop-header .gs-menu [part="list"],
  .gs-desktop-header .gs-menu .menu-list__list{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 18px !important;
    white-space: nowrap !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important; /* Firefox */
  }

  .gs-desktop-header .gs-menu ul::-webkit-scrollbar,
  .gs-desktop-header .gs-menu [part="list"]::-webkit-scrollbar,
  .gs-desktop-header .gs-menu .menu-list__list::-webkit-scrollbar{
    display: none !important; /* Chrome/Safari */
  }

  /* 3) Evita que el tema te meta el "Más" (opcional) */
  .gs-desktop-header .gs-menu [slot="more"],
  .gs-desktop-header .gs-menu li[slot="more"]{
    display: none !important;
  }
}

/* =========================================================
   PRODUCT RIGHT COLUMN -> estilo "card" como imagen 2
   (manteniendo morados)
   ========================================================= */
:root{
  --gs-purple: #7C3AED;      /* tu morado actual */
  --gs-purple-2: #6D28D9;    /* morado más pro */
  --gs-panel: rgba(255,255,255,.08);
  --gs-border: rgba(255,255,255,.10);
  --gs-text: rgba(255,255,255,.92);
  --gs-muted: rgba(255,255,255,.65);
}

/* 1) Card contenedor (columna derecha) */
.template-product .product__info-wrapper,
.template-product .product__info-container{
  background: var(--gs-panel);
  border: 1px solid var(--gs-border);
  border-radius: 18px;
  padding: 18px 18px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
}

/* Separación interna ordenada */
.template-product .product__info-container > *{
  margin-top: 10px;
}
.template-product .product__info-container > *:first-child{
  margin-top: 0;
}

/* 2) Título y precio */
.template-product .product__title{
  margin: 0 0 10px !important;
}
.template-product .product__title h1,
.template-product h1.product__title{
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.1;
  font-size: clamp(20px, 2.2vw, 28px);
}

/* Precio: grande + acento */
.template-product .price,
.template-product .price__regular,
.template-product .price__sale{
  margin-top: 6px !important;
}
.template-product .price__current,
.template-product .price-item--sale,
.template-product .price-item--regular{
  font-weight: 900 !important;
  font-size: 32px !important;
  color: #22c55e !important; /* si quieres que sea morado: cambia a var(--gs-purple) */
}
.template-product .price-item--regular.price-item--compare{
  color: rgba(255,255,255,.45) !important;
  text-decoration-thickness: 2px;
}

/* 3) Labels tipo "Plataforma / Tipo" */
.template-product .product-form__input .form__label,
.template-product .product-form__input label{
  color: var(--gs-muted) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .3px;
  margin-bottom: 8px !important;
}

/* 4) Selects / dropdowns “pill” */
.template-product select,
.template-product .select__select,
.template-product .product-form__input select{
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.30) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  padding-left: 14px !important;
}

/* 5) Botones de variantes tipo “chips” (si usas pills/radios) */
.template-product .product-form__input input[type="radio"] + label,
.template-product variant-radios input[type="radio"] + label{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.9) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
}
.template-product .product-form__input input[type="radio"]:checked + label,
.template-product variant-radios input[type="radio"]:checked + label{
  border-color: rgba(124,58,237,.75) !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,.18) !important;
  background: rgba(124,58,237,.22) !important;
}

/* 6) Cantidad (cuadro tipo pill) */
.template-product .quantity{
  border-radius: 999px !important;
  background: rgba(124,58,237,.16) !important;
  border: 1px solid rgba(124,58,237,.35) !important;
  overflow: hidden;
}
.template-product .quantity__input{
  color: #fff !important;
  font-weight: 900 !important;
}
.template-product .quantity__button{
  color: #fff !important;
  opacity: .9;
}
.template-product .quantity__button:hover{
  opacity: 1;
}

/* 7) Botones principales (Agregar / Comprar) */
.template-product .product-form__buttons{
  gap: 12px !important;
}
.template-product .product-form__submit,
.template-product .shopify-payment-button__button{
  border-radius: 999px !important;
  min-height: 52px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
}

/* Agregar al carrito -> morado pro */
.template-product .product-form__submit{
  background: linear-gradient(90deg, var(--gs-purple), var(--gs-purple-2)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #0b0b0b !important; /* si lo quieres blanco: #fff */
}
.template-product .product-form__submit:hover{
  filter: brightness(1.08);
  box-shadow: 0 10px 30px rgba(124,58,237,.28);
}

/* Comprar ahora -> outline elegante */
.template-product .shopify-payment-button__button{
  background: transparent !important;
  border: 1px solid rgba(124,58,237,.55) !important;
  color: #fff !important;
}
.template-product .shopify-payment-button__button:hover{
  background: rgba(124,58,237,.16) !important;
}

/* 8) Texto de descripción debajo: más legible */
.template-product .product__description,
.template-product .rte{
  color: rgba(255,255,255,.86) !important;
}
.template-product .product__description strong,
.template-product .rte strong{
  color: #fff !important;
}

/* 9) Responsive: en pantallas pequeñas que no se sienta “apretado” */
@media (max-width: 749px){
  .template-product .product__info-wrapper,
  .template-product .product__info-container{
    padding: 14px 14px 12px;
    border-radius: 16px;
  }
  .template-product .price__current,
  .template-product .price-item--sale,
  .template-product .price-item--regular{
    font-size: 28px !important;
  }
}

.search-modal__close-button{
display:none !important;
}

/* =========================
   GS SEARCH OVERLAY - FIX MOBILE X NO SE MONTA
   ========================= */

/* Estructura general de la barra */
.gs-so__bar{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 52px; /* input + botón buscar */
  gap: 12px;
  align-items: center;
  padding: 18px 18px 14px;
}

/* Input ocupa su columna completa */
#gsSearchOverlayInput{
  width: 100%;
}

/* Botón buscar fijo en su columna */
.gs-so__submit{
  width: 52px;
  height: 52px;
  border-radius: 16px; /* o 999px si lo quieres más pill */
  display: grid;
  place-items: center;
}

/* El botón cerrar NO vive dentro de la grilla en desktop,
   pero en mobile lo sacamos para que no estorbe */
@media (max-width: 480px){

  /* En mobile, ponemos el X como botón flotante del panel */
  .gs-so__panel{
    position: relative;
  }

  .gs-so__clear{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    line-height: 1;
    font-size: 22px;

    /* look */
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Bajamos un poquito la barra para dejar espacio al X */
  .gs-so__bar{
    padding-top: 56px;
  }
}

/* =========================================
   GS SEARCH OVERLAY — FIX MOBILE (X fuera del botón morado)
   Usa data-gs-close y data-gs-submit (más confiable)
   ========================================= */
@media (max-width: 749px){

  /* Barra: tamaño y look */
  #gsSearchOverlay .gs-so__bar{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: min(92vw, 520px) !important;
    margin: 20px auto 14px !important;

    padding: 10px 12px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(124,58,237,0.35) !important;
  }

  /* Input */
  #gsSearchOverlay #gsSearchOverlayInput{
    flex: 1 !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: #fff !important;
    padding: 0 12px !important;
    min-width: 0 !important;
    outline: none !important;
  }

  /* ✅ Botón BUSCAR (lupa) — morado */
  #gsSearchOverlay button[data-gs-submit]{
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: #7c3aed !important;
    border: 0 !important;
    color: #fff !important;
    flex: 0 0 auto !important;
  }

  #gsSearchOverlay button[data-gs-submit] svg{
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  /* ✅ Botón CERRAR (X) — NO morado, NO encima */
  #gsSearchOverlay button[data-gs-close]{
    position: absolute !important;
    top: -14px !important;
    right: -14px !important;

    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;

    display: grid !important;
    place-items: center !important;

    background: rgba(0,0,0,0.70) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;

    font-size: 20px !important;
    line-height: 1 !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  /* Por si el theme le mete estilos raros */
  #gsSearchOverlay button[data-gs-close]::before,
  #gsSearchOverlay button[data-gs-close]::after{
    content: none !important;
  }
}

/* =========================================
   GS SEARCH OVERLAY — Close button fijo y bonito
   ========================================= */

#gsSearchOverlay .gs-so__panel{
  position: relative; /* necesario para ubicar la X */
}

/* La X nueva */
#gsSearchOverlay .gs-so__close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;

  font-size: 22px;
  line-height: 1;
  padding: 0;

  z-index: 20;
  cursor: pointer;
}

#gsSearchOverlay .gs-so__close:hover{
  background: rgba(124,58,237,0.35);
  border-color: rgba(124,58,237,0.7);
}

/* Asegura que nada raro "pinte" un círculo blanco */
#gsSearchOverlay .gs-so__close::before,
#gsSearchOverlay .gs-so__close::after{
  content: none !important;
}

/* Mobile: un poquito más pegada al borde, sin invadir barra */
@media (max-width: 749px){
  #gsSearchOverlay .gs-so__close{
    top: 10px;
    right: 10px;
  }

  /* Deja espacio arriba para que la X no se meta con la barra */
  #gsSearchOverlay .gs-so__bar{
    margin-top: 56px;
  }
}

/* Asegura que el panel sea el "contexto" */
.gs-so__panel{
  position: relative;
  padding-top: 56px; /* espacio arriba para la X */
}

/* La barra queda abajo del espacio de la X */
.gs-so__bar{
  position: relative;
}

/* X flotante arriba a la derecha, fuera de la barra */
.gs-so__clear{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;

  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* Hover/focus bonito */
.gs-so__clear:hover{
  background: rgba(0,0,0,.75);
  border-color: rgba(168,85,247,.45);
}
.gs-so__clear:focus-visible{
  outline: 2px solid rgba(168,85,247,.75);
  outline-offset: 2px;
}

/* En pantallas pequeñas, más pegadita y sin estorbar */
@media (max-width: 480px){
  .gs-so__panel{ padding-top: 52px; }
  .gs-so__clear{ top: 10px; right: 10px; width: 40px; height: 40px; }
}

/* ===== LINKS HEADER PREMIUM ===== */



/* Línea premium animada */
.header__menu-item::after,
nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #7b3fe4, #00eaff);
  transition: all .35s ease;
  transform: translateX(-50%);
  border-radius: 10px;
}

/* Hover elegante */
.header__menu-item:hover,
nav a:hover {
  color: #ffffff;
  transform: translateY(-2px);
  text-shadow: 0 0 12px rgba(123,63,228,.35);
}

/* Activación línea */
.header__menu-item:hover::after,
nav a:hover::after {
  width: 70%;
}

/* Hover ICONOS sociales */
.header .social-icons a,
.header__icons a {
  transition: all .3s ease;
}

.header .social-icons a:hover,
.header__icons a:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 18px rgba(0,234,255,.25);
  border-radius: 50%;
}

/* ===== MENU HOVER ONDA LUMINOSA ===== */

nav a {
  position: relative;
  padding: 8px 6px;
  border-radius: 12px;
  color: #eaeaea;
  overflow: hidden;
  transition: all .4s ease;
  font-size: 30px;
}

/* cápsula hover */
nav a:hover {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  transform: translateY(-2px);
}

/* onda luminosa */
nav a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );
  transform: skewX(-25deg);
  transition: all .7s ease;
}

/* animación */
nav a:hover::before {
  left: 140%;
}

.header * {
  font-size: 17px !important;
}

.custom-empty-cart {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:70vh;
  text-align:center;
  background:#050505;
  color:white;
}

.custom-empty-cart__icon svg {
  width:80px;
  height:80px;
  opacity:.08;
  margin-bottom:20px;
}

.custom-empty-cart__title {
  font-size:22px;
  font-weight:700;
  margin-bottom:25px;
}

.custom-empty-cart__button {
  background:#00ff84;
  color:#000;
  border-radius:999px;
  padding:12px 30px;
  font-weight:700;
}

/* ===== DARK CART DRAWER FULL ===== */

cart-drawer-component,
.cart-drawer,
.drawer,
.drawer__inner,
.drawer__contents,
.cart-items__wrapper {
  background:#050505 !important;
}

/* quitar padding lateral del contenedor */
.drawer__inner,
.drawer__contents {
  padding:0 !important;
}

/* que el empty cart ocupe todo */
.custom-empty-cart {
  width:100%;
  height:100vh;
  padding:40px 20px;
}

.cart-items__wrapper {
  max-width:100% !important;
}

.drawer__header {
  background:#050505 !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.drawer__close {
  color:white !important;
}

.drawer__header {
  background:#050505 !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.drawer__close {
  color:white !important;
}

/* ===== CART DRAWER FINAL LIMPIO ===== */

/* todo el drawer negro, sin bordes, sin sombras, sin scroll */
cart-drawer-component,
cart-drawer-component * {
  background: #050505 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
}

/* si algún wrapper trae esquinas o marco */
cart-drawer-component,
cart-drawer-component * {
  border-radius: 0 !important;
}

/* header superior del carrito */
cart-drawer-component .drawer__header,
cart-drawer-component .drawer__title,
cart-drawer-component h1,
cart-drawer-component h2,
cart-drawer-component h3,
cart-drawer-component p,
cart-drawer-component span,
cart-drawer-component a,
cart-drawer-component button {
  color: #ffffff !important;
}

/* estado vacío centrado */
.custom-empty-cart {
  min-height: 100vh !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 40px 24px !important;
  box-sizing: border-box !important;
}

/* icono */
.custom-empty-cart__icon,
.custom-empty-cart__icon svg {
  background: transparent !important;
  fill: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.08) !important;
  width: 84px !important;
  height: 84px !important;
  margin-bottom: 24px !important;
}

/* título interno */
.custom-empty-cart__title {
  background: transparent !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 24px !important;
}

/* botón morado */
.custom-empty-cart__button,
.custom-empty-cart a.button,
custom-empty-cart__button.button {
  background: linear-gradient(135deg, #6a00ff, #9b00ff) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 34px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* hover del botón */
.custom-empty-cart__button:hover,
.custom-empty-cart a.button:hover {
  background: linear-gradient(135deg, #7b1cff, #b02cff) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* botón cerrar */
cart-drawer-component .drawer__close,
cart-drawer-component .drawer__close svg,
cart-drawer-component [aria-label="Cerrar"],
cart-drawer-component [aria-label="Close"] {
  background: transparent !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* quitar cualquier scrollbar visual */
cart-drawer-component::-webkit-scrollbar,
cart-drawer-component *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.custom-empty-cart__icon {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
}

.custom-empty-cart__icon svg {
  width: 96px !important;
  height: 96px !important;
  display: block !important;
  opacity: 1 !important;
  fill: none !important;
  stroke: #1f1f1f !important;
  stroke-width: 1.8 !important;
  color: #1f1f1f !important;
}

.custom-empty-cart__icon svg {
  stroke: #2b2b2b !important;
  color: #2b2b2b !important;
}

.collection-toolbar,
.facets,
.facets-wrapper,
.facets-form,
details,
summary {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 20 !important;
}

.collection-toolbar::before,
.collection-toolbar::after,
.facets::before,
.facets::after {
  pointer-events: none !important;
}

.facets__summary {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 5;
}

.facets__summary * {
  pointer-events: none;
}

/* Asegurar que los filtros izquierdos reciban clic */
.facets,
.facets-form,
.facets__wrapper,
.facets__disclosure,
.facets details,
.facets__summary {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}

/* Evitar que wrappers vecinos tapen la izquierda */
.collection-toolbar__right,
.facets-toolbar__right,
.collection-toolbar__center,
.facets-toolbar__center,
.product-count,
.toolbar-count,
.sorting,
.facets-sorting {
  position: relative;
  z-index: 1 !important;
}

/* Todo lo de dentro del summary no captura el clic */
.facets__summary * {
  pointer-events: none !important;
}

.facets__summary {
  cursor: pointer !important;
}

/* El overlay interno del overflow-list no debe bloquear clics */
overflow-list::part(overflow) {
  pointer-events: none !important;
}

/* La lista visible normal sí debe recibir clics */
overflow-list::part(list) {
  pointer-events: auto !important;
}

/* Los items visibles del listado deben seguir siendo clickeables */
.facets__summary {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.facets__summary * {
  pointer-events: none !important;
}
/* =========================================
   FORCE FIX MOBILE HEADER
   Estructura final:
   logo | buscador ancho | menú
========================================= */
@media screen and (max-width: 749px) {
  /* contenedor principal */
  .gs-mobile-header,
  .gs-mobile-top {
    width: 100% !important;
  }

  .gs-mobile-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    min-height: 68px !important;
  }

  /* rompe el wrapper viejo para poder acomodar logo y menú por separado */
  .gs-mobile-left {
    display: contents !important;
  }

  /* LOGO */
  .gs-mobile-logo {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gs-mobile-logo img,
  .gs-mobile-logo svg {
    display: block !important;
    width: auto !important;
    max-width: 95px !important;
    max-height: 24px !important;
    height: auto !important;
  }

  /* SEARCH */
  .gs-mobile-search-inline {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gs-mobile-search-inline .gs-header-search,
  .gs-mobile-search-inline form,
  .gs-mobile-search-inline .search,
  .gs-mobile-search-inline .predictive-search {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .gs-mobile-search-inline input,
  .gs-mobile-search-inline input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    padding: 10px 12px !important;
  }

  .gs-mobile-search-inline button,
  .gs-mobile-search-inline .search__button,
  .gs-mobile-search-inline .predictive-search__search-button {
    flex: 0 0 auto !important;
  }

  /* MENU */
  .gs-mobile-menu {
    grid-column: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gs-mobile-menu button,
  .gs-mobile-menu .header__icon,
  .gs-mobile-menu summary,
  .gs-mobile-menu details > summary {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* oculta acciones viejas que dañan la estructura */
  .gs-mobile-actions {
    display: none !important;
  }

  /* evita que reglas globales colapsen el search */
  .gs-mobile-search-inline,
  .gs-mobile-search-inline * {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* por si el theme le pone ancho raro a wrappers */
  .gs-mobile-top > * {
    max-width: none !important;
  }
}

@media (max-width: 749px){

  .gs-drawer-btn{
  width:100%;
  min-width:0;
  min-height:64px;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px;
  padding:12px 16px !important;

  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.035) 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 4px 12px rgba(0,0,0,.18);
  backdrop-filter:blur(6px);

  color:#fff !important;
  text-decoration:none !important;
  text-align:left !important;
  transition:all .22s ease;
}

  .gs-drawer-btn:hover{
    transform:translateY(-1px);
    border-color:rgba(168,85,247,.38) !important;
    background:linear-gradient(180deg, rgba(168,85,247,.10) 0%, rgba(255,255,255,.045) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 8px 18px rgba(0,0,0,.22);
  }

  .gs-drawer-btn__icon{
    width:28px;
    height:28px;
    border-radius:999px;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 28px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    margin:0 !important;
  }

  .gs-drawer-btn__icon svg{
    width:14px;
    height:14px;
    display:block;
  }

  .gs-drawer-btn__text{
  display:inline-block !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-align:left !important;
  color:#f5f5f5 !important;
}
}

/* ===== SOCIAL ICONS SIZE FIX ===== */

.gs-right{
  display:flex;
  align-items:center;
  gap:14px;
}

/* contenedor redes */
.gs-social{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto; /* IMPORTANTE → no deja que empuje el buscador */
}

/* botones redes */
.gs-social__btn{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);

  transition:.25s ease;
}

/* icono */
.gs-social__btn svg{
  width:22px;
  height:22px;
}

/* hover morado gamer */
.gs-social__btn:hover{
  background:rgba(124,58,237,.18);
  border-color:rgba(124,58,237,.5);
  transform:translateY(-1px);
}

/* =========================================================
   CART PRO COMPLETO — DARK / GAMING / MORADO
   Horizon / Shopify
   ========================================================= */

:root{
  --cart-bg: #0a0b0f;
  --cart-panel: #111319;
  --cart-panel-2: #151821;
  --cart-border: rgba(255,255,255,.08);
  --cart-border-2: rgba(124,58,237,.28);
  --cart-text: #ffffff;
  --cart-muted: rgba(255,255,255,.68);
  --cart-soft: rgba(255,255,255,.05);

  --cart-purple: #7c3aed;
  --cart-purple-2: #a855f7;
  --cart-purple-glow: rgba(124,58,237,.28);
}

/* Fondo general */
.template-cart,
body:has(.cart),
main:has(.cart){
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(124,58,237,.08), transparent 55%),
    radial-gradient(900px 300px at 90% 0%, rgba(168,85,247,.06), transparent 45%),
    var(--cart-bg) !important;
  color: var(--cart-text);
}

/* Contenedor principal del carrito */
.cart,
.cart-items,
.cart__contents,
.cart__warnings,
.cart__footer{
  color: var(--cart-text);
}

/* Layout general desktop: productos izquierda / resumen derecha */
@media (min-width: 990px){
  .cart{
    display:grid !important;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 420px);
    gap: 28px;
    align-items:start;
  }

  .cart__contents,
  .cart-items,
  .main-cart-items{
    grid-column: 1;
  }

  .cart__footer,
  .cart__blocks,
  .totals{
    grid-column: 2;
    position: sticky;
    top: 110px;
  }
}

/* Panel izquierdo */
.cart-items,
.main-cart-items,
.cart__contents{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;
  border: 1px solid var(--cart-border) !important;
  border-radius: 22px !important;
  padding: 20px !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.03);
}

/* Título Cart */
.cart__contents h1,
.cart h1,
.main-cart-items h1{
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:.2px;
  margin-bottom: 18px !important;
}

/* Tabla / encabezados */
.cart-items thead th,
.cart-items__heading,
.cart__items th{
  color: var(--cart-purple-2) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--cart-border) !important;
  padding-bottom: 14px !important;
}

/* Filas producto */
.cart-item,
.cart-items tbody tr,
.cart__items .cart-item{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.cart-item td,
.cart-item__details,
.cart-item__totals,
.cart-item__quantity{
  vertical-align: middle !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Imagen producto */
.cart-item__media,
.cart-item media-gallery,
.cart-item img{
  border-radius: 14px !important;
  overflow: hidden !important;
}

.cart-item img{
  border: 1px solid rgba(255,255,255,.08) !important;
  background: #0c0e13 !important;
}

/* Nombre del producto */
.cart-item__name,
.cart-item__name:hover,
.cart-item__details a{
  color:#fff !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

/* Meta secundaria */
.product-option,
.cart-item__details .product-option,
.cart-item__details dl,
.cart-item__details dd,
.cart-item__details dt,
.cart-item__details .caption,
.cart-item__details .cart-item__discounted-prices{
  color: var(--cart-muted) !important;
}

/* Precio y subtotal */
.cart-item__price,
.cart-item__totals,
.cart-item__final-price,
.price,
.price *{
  color:#fff !important;
}

.cart-item__totals .price,
.cart-item__totals .price-item,
.cart-item__price-wrapper .price-item{
  font-weight: 800 !important;
}

/* Si quieres el subtotal morado */
.cart-item__totals .price,
.cart-item__totals .price-item{
  color: var(--cart-purple-2) !important;
}

/* Contador cantidad tipo cápsula */
.quantity{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  min-height: 48px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.quantity__button{
  color: #fff !important;
  background: transparent !important;
  width: 42px !important;
}

.quantity__button:hover{
  background: rgba(124,58,237,.12) !important;
  color: #fff !important;
}

.quantity__input{
  color:#fff !important;
  background: transparent !important;
  font-weight: 800 !important;
}

/* Botón eliminar */
.cart-remove-button button,
.cart-remove-button .button,
.cart-item__remove{
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
  border: 0 !important;
}

.cart-remove-button button:hover,
.cart-item__remove:hover{
  color: var(--cart-purple-2) !important;
}

/* Resumen derecho */
.cart__footer,
.cart__blocks,
.totals,
.cart__checkout-button-wrapper{
  background: transparent !important;
}

.cart__footer > *,
.cart__blocks > *,
.totals{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--cart-border) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.03);
}

/* Título del total */
.totals h2,
.cart__footer h2,
.totals__subtotal,
.totals__total{
  color:#fff !important;
  font-weight:900 !important;
}

/* Líneas subtotal / total */
.totals > *{
  border-color: rgba(255,255,255,.08) !important;
}

.totals__subtotal-value,
.totals__total-value,
.totals .price,
.totals .price-item{
  color: var(--cart-purple-2) !important;
  font-weight: 900 !important;
}

.totals__subtotal-value{
  font-size: 18px !important;
}

.totals__total-value{
  font-size: 28px !important;
}

/* Textos secundarios */
.tax-note,
.cart__ctas + p,
.cart__footer p,
.totals p,
.discounts,
.discount{
  color: var(--cart-muted) !important;
}

/* Checkout morado */
.cart__checkout-button,
button[name="checkout"],
.cart__ctas .button,
.shopify-payment-button__button{
  width:100% !important;
  min-height: 56px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(90deg, var(--cart-purple), var(--cart-purple-2)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
  box-shadow:
    0 14px 30px rgba(124,58,237,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.cart__checkout-button:hover,
button[name="checkout"]:hover,
.cart__ctas .button:hover,
.shopify-payment-button__button:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 18px 38px rgba(124,58,237,.38),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Cupón / descuentos */
.cart__note,
.cart-discount,
.discount-form,
.cart__discount{
  background: transparent !important;
  color: #fff !important;
}

.cart__note input,
.discount-form input,
.cart__discount input,
input[name*="discount"],
input[placeholder*="cup"],
input[placeholder*="cupón"]{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-radius: 999px !important;
  min-height: 48px !important;
  padding-inline: 16px !important;
}

.discount-form button,
.cart__discount button,
button[name*="discount"]{
  border-radius: 999px !important;
  min-height: 48px !important;
  background: linear-gradient(90deg, var(--cart-purple), var(--cart-purple-2)) !important;
  color:#fff !important;
  border: 0 !important;
  font-weight: 800 !important;
}

/* Badge cantidad en el título */
.cart-count-bubble,
.cart__count-bubble{
  background: rgba(124,58,237,.16) !important;
  color: #fff !important;
  border: 1px solid rgba(124,58,237,.34) !important;
}

/* Empty cart */
.is-empty,
.cart__warnings,
.cart--empty{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--cart-border) !important;
  border-radius: 22px !important;
  padding: 28px !important;
  color: #fff !important;
}

/* Recomendados / you may also like */
.cart .card-wrapper,
.related-products .card-wrapper,
.product-recommendations .card-wrapper{
  background: transparent !important;
}

.cart .card,
.related-products .card,
.product-recommendations .card{
  background: #111319 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.cart .card:hover,
.related-products .card:hover,
.product-recommendations .card:hover{
  border-color: rgba(124,58,237,.34) !important;
  box-shadow: 0 12px 26px rgba(124,58,237,.16) !important;
}

.cart .card__heading,
.related-products .card__heading,
.product-recommendations .card__heading,
.cart .card__heading a{
  color:#fff !important;
}

.cart .price,
.related-products .price,
.product-recommendations .price{
  color: var(--cart-purple-2) !important;
}

/* Enlaces generales del carrito */
.template-cart a{
  color: #fff;
}

.template-cart a:hover{
  color: var(--cart-purple-2);
}

/* Mobile */
@media (max-width: 989px){
  .cart,
  .cart__contents,
  .main-cart-items,
  .cart-items{
    display:block !important;
  }

  .cart-items,
  .main-cart-items,
  .cart__contents,
  .cart__footer > *,
  .cart__blocks > *,
  .totals{
    border-radius: 18px !important;
    padding: 16px !important;
  }

  .cart__footer,
  .cart__blocks,
  .totals{
    margin-top: 18px !important;
    position: static !important;
  }

  .totals__total-value{
    font-size: 24px !important;
  }
}

/* Quitar blancos raros heredados */
.template-cart .page-width,
.template-cart .gradient,
.template-cart .color-background-1,
.template-cart .color-background-2{
  background: transparent !important;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body {
  position: relative;
}

.shopify-section,
.section,
.page-width,
.header,
main,
footer {
  max-width: 100% !important;
  overflow-x: clip;
}
@media (max-width: 749px){

  .gs-mobile-drawer-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:16px 16px 8px !important;
    margin-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
  }

  .gs-drawer-btn{
  width:100%;
  min-width:0;
  min-height:64px;
  display:grid !important;
  grid-template-columns:28px 1fr !important;
  align-items:center !important;
  column-gap:14px !important;
  padding:12px 16px !important;

  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.035) 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 4px 12px rgba(0,0,0,.18);
  backdrop-filter:blur(6px);

  color:#fff !important;
  text-decoration:none !important;
  text-align:left !important;
  transition:all .22s ease;
}

  .gs-drawer-btn:hover{
    transform:translateY(-1px);
    border-color:rgba(168,85,247,.38) !important;
    background:linear-gradient(180deg, rgba(168,85,247,.10) 0%, rgba(255,255,255,.045) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 8px 18px rgba(0,0,0,.22);
  }

  .gs-drawer-btn__icon{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    flex:0 0 40px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    vertical-align:middle !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    margin:0 !important;
  }

  .gs-drawer-btn__icon svg{
    width:14px !important;
    height:14px !important;
    display:block !important;
  }
}


  @media (max-width: 749px){
  .gs-drawer-btn__text{
  display:inline-block !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-align:left !important;
  color:#f5f5f5 !important;
}
}

  /* por si el tema mete estilos raros a spans dentro del botón */
  .gs-drawer-btn > span{
    float:none !important;
    clear:none !important;
  }
}

@media (max-width: 768px) {

dialog[open] {
  padding: 0 !important;
  border: none;
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
}

dialog::backdrop {
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}
}

@media (max-width: 768px) {
  .sorting-filter__options {
    position: relative !important;
    overflow: visible !important;
  }

  .sorting-filter__options-inner {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;

    min-width: 220px;
    max-width: 280px;
    width: max-content;

    background: #111 !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    padding: 8px;
    z-index: 9999 !important;

    display: none;
  }

  /* cuando esté abierto */
  .sorting-filter__options[open] .sorting-filter__options-inner,
  .sorting-filter__options.is-open .sorting-filter__options-inner,
  .sorting-filter__options[aria-expanded="true"] .sorting-filter__options-inner {
    display: block;
  }

  .sorting-filter__option {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    color: #fff;
    background: transparent;
    cursor: pointer;
  }

  .sorting-filter__option:hover {
    background: rgba(140, 82, 255, 0.14);
  }
}

@media screen and (max-width: 749px) {
  .gs-mobile-menu .header__drawer summary,
  .gs-mobile-menu .header__drawer .header__icon,
  .gs-mobile-menu .header__drawer button {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;

    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
    border: 1px solid rgba(128, 0, 255, 0.35) !important;
    border-radius: 14px !important;

    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 8px 20px rgba(0,0,0,0.35),
      0 0 14px rgba(128, 0, 255, 0.18) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: all 0.25s ease !important;
  }

  .gs-mobile-menu .header__drawer summary:hover,
  .gs-mobile-menu .header__drawer .header__icon:hover,
  .gs-mobile-menu .header__drawer button:hover {
    background: linear-gradient(180deg, rgba(128,0,255,0.16), rgba(128,0,255,0.08)) !important;
    border-color: rgba(168, 85, 247, 0.7) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.05) inset,
      0 10px 24px rgba(0,0,0,0.42),
      0 0 18px rgba(168, 85, 247, 0.35) !important;
  }
}


@media (max-width: 768px) {
  .sorting-filter__options {
    position: relative !important;
    overflow: visible !important;
  }

  .sorting-filter__options-inner {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    display: none;
  }

  .sorting-filter__options[open] .sorting-filter__options-inner,
  .sorting-filter__options.is-open .sorting-filter__options-inner,
  .sorting-filter__options[aria-expanded="true"] .sorting-filter__options-inner {
    display: block;
  }
 }

 
 @media screen and (min-width: 990px) {
  .facets-vertical.page-width,
  .facets-vertical {
    --desktop-filter-width: 280px;
  }
}

/* Quitar flechas en inputs number (Chrome, Edge, Safari) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.facets-vertical input[type="number"] {
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ================================
   FILTROS MOBILE ESTILO PREMIUM
   ================================ */
@media screen and (max-width: 749px) {

  /* Fondo general del drawer */
  .facets-drawer,
  .facets__dialog,
  dialog.facets,
  .mobile-facets,
  .facets__form {
    background: #111 !important;
    color: #fff !important;
  }

  /* Caja principal interna */
  .facets__form {
    padding: 18px 16px 110px !important;
  }

  /* Header del drawer */
  .facets__header,
  .mobile-facets__header,
  .facets__title-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 16px !important;
    background: #0d0d0d !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
  }

  .facets__header *,
  .mobile-facets__header *,
  .facets__title-wrapper * {
    color: #fff !important;
  }

  /* Cada bloque del filtro */
  .facets__disclosure,
  .facets__filter,
  details.disclosure-has-popup,
  .facets-wrap,
  .mobile-facets__details {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Título de bloque */
  .facets__summary,
  .disclosure__button,
  .mobile-facets__summary,
  summary.facets__summary {
    list-style: none !important;
    cursor: pointer !important;
    padding: 18px 16px !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: transparent !important;
    border: none !important;
  }

  .facets__summary::-webkit-details-marker,
  .mobile-facets__summary::-webkit-details-marker,
  summary::-webkit-details-marker {
    display: none !important;
  }

  /* Contenido interno del acordeón */
  .facets__display,
  .facets__list,
  .mobile-facets__submenu,
  .details-content {
    padding: 0 16px 18px !important;
    background: transparent !important;
  }

  /* Separación entre opciones */
  .facets__item,
  .facets__list li,
  .mobile-facets__item {
    margin-bottom: 12px !important;
  }

  /* Labels */
  .facets__label,
  .mobile-facets__label,
  .facet-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    padding: 4px 0 !important;
  }

  /* Checkbox más bonito */
  .facets__label input[type="checkbox"],
  .facet-checkbox input[type="checkbox"],
  .mobile-facets input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: #0f0f0f !important;
    display: inline-grid !important;
    place-content: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .facets__label input[type="checkbox"]:checked,
  .facet-checkbox input[type="checkbox"]:checked,
  .mobile-facets input[type="checkbox"]:checked {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18) !important;
  }

  .facets__label input[type="checkbox"]:checked::after,
  .facet-checkbox input[type="checkbox"]:checked::after,
  .mobile-facets input[type="checkbox"]:checked::after {
    content: "✓";
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
  }

  /* Inputs de precio */
  .facets__price,
  .price-range,
  .facets__price-wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 10px !important;
    margin-bottom: 12px !important;
  }

  .facets__price .field,
  .facets__price .form-field,
  .facets__price .input,
  .facets__price-wrapper .field {
    margin: 0 !important;
  }

  .facets__price input,
  .facets__price-wrapper input,
  .facets__price .field__input,
  .price-range input {
    width: 100% !important;
    height: 50px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: #2a2a2a !important;
    color: #fff !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .facets__price input::placeholder,
  .facets__price-wrapper input::placeholder {
    color: rgba(255,255,255,0.45) !important;
  }

  /* Texto entre inputs: "a" */
  .facets__price span,
  .facets__price-wrapper span {
    color: rgba(255,255,255,0.75) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
  }

  /* Texto de ayuda del precio */
  .facets__price p,
  .facets__price-wrapper p,
  .facets__price .facets__caption {
    margin-top: 6px !important;
    color: rgba(255,255,255,0.68) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Select de ordenar */
  .facet-filters__field,
  .facets__sort,
  .mobile-facets__sort {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  .facet-filters__label,
  .facets__sort label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  .facet-filters__sort,
  .facets__sort select,
  .mobile-facets__sort select,
  select {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: #2a2a2a !important;
    color: #fff !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
  }

  /* Flechita del summary */
  .facets__summary svg,
  .mobile-facets__summary svg,
  summary svg {
    width: 16px !important;
    height: 16px !important;
    color: rgba(255,255,255,0.75) !important;
    flex-shrink: 0 !important;
  }

  /* Footer fijo con botón */
  .facets__actions,
  .mobile-facets__footer,
  .facets-drawer__footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
    background: linear-gradient(to top, #111 75%, rgba(17,17,17,0.0)) !important;
    padding: 16px !important;
    margin-top: 12px !important;
  }

  .facets__submit,
  .mobile-facets__submit,
  .facets__actions .button,
  .facets__actions button {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 18px !important;
    background: #000 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.28) !important;
  }

  /* Contadores tipo pastilla */
  .facets__count,
  .count-bubble,
  .facet-checkbox__count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.80) !important;
    font-size: 13px !important;
    margin-left: auto !important;
  }

  /* Scroll más elegante */
  .facets__form,
  .mobile-facets__main,
  .facets__display {
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,0.6) #111;
  }

  .facets__form::-webkit-scrollbar,
  .mobile-facets__main::-webkit-scrollbar,
  .facets__display::-webkit-scrollbar {
    width: 6px;
  }

  .facets__form::-webkit-scrollbar-track,
  .mobile-facets__main::-webkit-scrollbar-track,
  .facets__display::-webkit-scrollbar-track {
    background: #111;
  }

  .facets__form::-webkit-scrollbar-thumb,
  .mobile-facets__main::-webkit-scrollbar-thumb,
  .facets__display::-webkit-scrollbar-thumb {
    background: rgba(124,58,237,0.65);
    border-radius: 999px;
  }
}

@media screen and (max-width: 749px) {
  .facet-filters {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .facet-filters__field {
    width: 100% !important;
  }

  .facet-filters__label {
    margin-bottom: 8px !important;
    display: block !important;
  }

  .facet-filters__sort {
    display: block !important;
  }
}

@media screen and (max-width: 749px) {
  .facets__summary,
  .disclosure__button,
  .mobile-facets__summary {
    font-size: 17px !important;
    letter-spacing: 0.2px !important;
  }

  .facets__disclosure[open],
  .facets__filter[open],
  .mobile-facets__details[open] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
  }

  .facets__submit:hover,
  .mobile-facets__submit:hover {
    transform: translateY(-1px);
    transition: 0.2s ease;
  }
}

/* ===== LOGIN PREMIUM SHOPIFY ===== */

body:has(.shopify-login),
body:has(.customer.login),
.template-customers-login,
.template-login {
  background:
    radial-gradient(circle at top, rgba(120, 61, 255, 0.18), transparent 35%),
    radial-gradient(circle at bottom, rgba(88, 0, 255, 0.12), transparent 35%),
    linear-gradient(180deg, #050505 0%, #0b0b0f 100%);
  min-height: 100vh;
}

/* Contenedor general */
.shopify-login,
.customer.login,
.customer {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* Tarjeta principal */
.shopify-login form,
.customer.login form,
.customer form[action*="/account/login"],
.customer .form,
.customer .customer__login {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 38px 32px 30px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 40px rgba(111, 0, 255, 0.16);
  position: relative;
  overflow: hidden;
}

/* Efecto sutil arriba */
.shopify-login form::before,
.customer.login form::before,
.customer form[action*="/account/login"]::before,
.customer .form::before,
.customer .customer__login::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #6f00ff, #8f4dff, #5f27ff);
}

/* Logo */
.shopify-login img,
.customer.login img,
.customer .customer__login img,
.customer form img {
  display: block;
  margin: 0 auto 18px;
  max-width: 70px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(111, 0, 255, 0.22));
}

/* Título */
.shopify-login h1,
.customer.login h1,
.customer h1 {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  text-align: center;
  color: #ffffff;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

/* Subtexto */
.shopify-login p,
.customer.login p,
.customer .note,
.customer .form__message,
.customer .customer__login p {
  text-align: center;
  color: rgba(255,255,255,0.72);
  font-size: 0.98rem;
  margin-bottom: 22px;
}

/* Labels */
.shopify-login label,
.customer.login label,
.customer label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  margin-bottom: 8px;
}

/* Inputs */
.shopify-login input,
.customer.login input,
.customer input[type="email"],
.customer input[type="password"],
.customer input[type="text"] {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 0.98rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: all 0.25s ease;
}

.shopify-login input::placeholder,
.customer.login input::placeholder,
.customer input::placeholder {
  color: rgba(255,255,255,0.45);
}

.shopify-login input:focus,
.customer.login input:focus,
.customer input:focus {
  border-color: rgba(143, 77, 255, 0.95);
  background: rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 4px rgba(111, 0, 255, 0.14),
    0 10px 25px rgba(111, 0, 255, 0.12);
}

/* Espaciado entre campos */
.shopify-login .field,
.customer.login .field,
.customer .field,
.customer .form-field,
.customer .input-group {
  margin-bottom: 16px;
}

/* Botones principales */
.shopify-login button,
.shopify-login .button,
.customer.login button,
.customer.login .button,
.customer input[type="submit"],
.customer button[type="submit"] {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #6f00ff 0%, #8f4dff 45%, #5f27ff 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(111, 0, 255, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.shopify-login button:hover,
.shopify-login .button:hover,
.customer.login button:hover,
.customer.login .button:hover,
.customer input[type="submit"]:hover,
.customer button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 32px rgba(111, 0, 255, 0.40),
    inset 0 1px 0 rgba(255,255,255,0.18);
  filter: brightness(1.05);
}

/* Botón secundario tipo "continuar con shop" */
.shopify-login .shopify-button,
.shopify-login a.button,
.customer.login a.button,
.customer .button--secondary,
.customer .secondary-button {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  box-shadow: none;
}

.shopify-login .shopify-button:hover,
.shopify-login a.button:hover,
.customer.login a.button:hover,
.customer .button--secondary:hover,
.customer .secondary-button:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(143, 77, 255, 0.45);
}

/* Separador */
.shopify-login hr,
.customer.login hr,
.customer .divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.16),
    transparent
  );
  margin: 20px 0;
}

/* Links */
.shopify-login a,
.customer.login a,
.customer a {
  color: #b68cff;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.shopify-login a:hover,
.customer.login a:hover,
.customer a:hover {
  color: #d2b7ff;
}

/* Mensajes de error */
.shopify-login .errors,
.customer.login .errors,
.customer .form__message--error,
.customer .errors {
  background: rgba(255, 71, 87, 0.10);
  color: #ffd7dc;
  border: 1px solid rgba(255, 71, 87, 0.20);
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 0.92rem;
}

/* Política de privacidad abajo */
.shopify-login .privacy,
.customer.login .privacy,
.customer .privacy-policy,
.customer .shopify-policy__container {
  text-align: center;
  margin-top: 18px;
}

.shopify-login .privacy a,
.customer.login .privacy a,
.customer .privacy-policy a,
.customer .shopify-policy__container a {
  color: rgba(255,255,255,0.52);
  font-size: 0.9rem;
}

.shopify-login .privacy a:hover,
.customer.login .privacy a:hover,
.customer .privacy-policy a:hover,
.customer .shopify-policy__container a:hover {
  color: #b68cff;
}

/* Responsive */
@media (max-width: 768px) {
  .shopify-login,
  .customer.login,
  .customer {
    padding: 24px 16px;
  }

  .shopify-login form,
  .customer.login form,
  .customer form[action*="/account/login"],
  .customer .form,
  .customer .customer__login {
    max-width: 100%;
    border-radius: 20px;
    padding: 28px 20px 24px;
  }

  .shopify-login h1,
  .customer.login h1,
  .customer h1 {
    font-size: 1.65rem;
  }

  .shopify-login input,
  .customer.login input,
  .customer input[type="email"],
  .customer input[type="password"],
  .customer input[type="text"],
  .shopify-login button,
  .shopify-login .button,
  .customer.login button,
  .customer.login .button,
  .customer input[type="submit"],
  .customer button[type="submit"] {
    height: 50px;
  }
}

.header-actions__cart-icon:hover,
.header-actions__cart-icon:hover svg,
.header-actions__cart-icon:hover path {
  color: #a020f0 !important;
}

 #{{ section_id }}.gs-featured-games-section {
    background:
      radial-gradient(circle at top, rgba(96, 32, 173, 0.12), transparent 32%),
      linear-gradient(180deg, #0c0d11 0%, #090a0d 100%);
    padding: 56px 20px 70px;
    position: relative;
    overflow: hidden;
  }

  #{{ section_id }} .gs-featured-games-container {
    max-width: 1600px;
    margin: 0 auto;
  }

  #{{ section_id }} .gs-featured-games-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
  }

  #{{ section_id }} .gs-featured-games-header--bottom {
    margin-top: 70px;
  }

  #{{ section_id }} .gs-featured-games-title {
    margin: 0;
    color: #ffffff;
    font-size: 31px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  #{{ section_id }} .gs-featured-games-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    transition: all 0.25s ease;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  #{{ section_id }} .gs-featured-games-button:hover {
    background: rgba(124, 58, 237, 0.22);
    border-color: rgba(167, 139, 250, 0.32);
    transform: translateY(-1px);
  }

  #{{ section_id }} .gs-featured-games-button-arrow {
    font-size: 18px;
    line-height: 1;
  }

  #{{ section_id }} .gs-featured-games-carousel-wrap {
    position: relative;
  }

  #{{ section_id }} .gs-featured-games-carousel {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px 8px;
  }

  #{{ section_id }} .gs-featured-games-carousel::-webkit-scrollbar {
    display: none;
  }

  #{{ section_id }} .gs-featured-games-slide {
    flex: 0 0 calc((100% - 90px) / 6);
    min-width: 0;
  }

  #{{ section_id }} .gs-featured-game-card {
    display: block;
    text-decoration: none;
    color: #fff;
    transition: transform 0.28s ease, filter 0.28s ease;
  }

  #{{ section_id }} .gs-featured-game-card:hover {
    transform: translateY(-8px);
    filter: brightness(1.04);
  }

  #{{ section_id }} .gs-featured-game-image-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #111217;
    box-shadow:
      0 16px 35px rgba(0, 0, 0, 0.34),
      inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    aspect-ratio: 0.74 / 1;
  }

  #{{ section_id }} .gs-featured-game-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  #{{ section_id }} .gs-featured-game-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a1b22 0%, #111217 100%);
  }

  #{{ section_id }} .gs-featured-game-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, #30ff8e 0%, #00d26a 100%);
    color: #04140a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 18px rgba(0, 210, 106, 0.3);
  }

  #{{ section_id }} .gs-featured-game-info {
    position: relative;
    padding-top: 12px;
  }

  #{{ section_id }} .gs-featured-game-name {
    margin: 0 0 9px;
    color: #f5f7fb;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    min-height: 38px;
  }

  #{{ section_id }} .gs-featured-game-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding-right: 30px;
  }

  #{{ section_id }} .gs-featured-game-old-price {
    color: rgba(255, 255, 255, 0.38);
    text-decoration: line-through;
    font-size: 12px;
    font-weight: 600;
  }

  #{{ section_id }} .gs-featured-game-price {
    color: #00ff85;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.01em;
  }

  #{{ section_id }} .gs-featured-game-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.52);
  }

  #{{ section_id }} .gs-featured-game-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  #{{ section_id }} .gs-carousel-arrow {
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    z-index: 3;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.25s ease,
      background 0.25s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  #{{ section_id }} .gs-featured-games-carousel-wrap:hover .gs-carousel-arrow,
  #{{ section_id }} .gs-featured-games-carousel-wrap:focus-within .gs-carousel-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #{{ section_id }} .gs-carousel-arrow:hover {
    background: rgba(124, 58, 237, 0.85);
    transform: translateY(-50%) scale(1.06);
  }

  #{{ section_id }} .gs-carousel-arrow svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  #{{ section_id }} .gs-carousel-arrow--prev {
    left: -26px;
  }

  #{{ section_id }} .gs-carousel-arrow--next {
    right: -26px;
  }

  @media screen and (max-width: 1450px) {
    #{{ section_id }} .gs-featured-games-slide {
      flex: 0 0 calc((100% - 72px) / 5);
    }
  }

  @media screen and (max-width: 1199px) {
    #{{ section_id }} .gs-featured-games-container {
      max-width: 1180px;
    }

    #{{ section_id }} .gs-featured-games-slide {
      flex: 0 0 calc((100% - 54px) / 4);
    }

    #{{ section_id }} .gs-carousel-arrow--prev {
      left: -12px;
    }

    #{{ section_id }} .gs-carousel-arrow--next {
      right: -12px;
    }
  }

  @media screen and (max-width: 989px) {
    #{{ section_id }}.gs-featured-games-section {
      padding: 48px 18px 58px;
    }

    #{{ section_id }} .gs-featured-games-title {
      font-size: 26px;
    }

    #{{ section_id }} .gs-featured-games-slide {
      flex: 0 0 calc((100% - 32px) / 3);
    }

    #{{ section_id }} .gs-featured-games-header--bottom {
      margin-top: 52px;
    }

    #{{ section_id }} .gs-carousel-arrow {
      width: 46px;
      height: 46px;
    }
  }

  @media screen and (max-width: 749px) {
    #{{ section_id }}.gs-featured-games-section {
      padding: 36px 14px 44px;
    }

    #{{ section_id }} .gs-featured-games-header {
      gap: 12px;
      margin-bottom: 18px;
      align-items: center;
    }

    #{{ section_id }} .gs-featured-games-title {
      font-size: 22px;
    }

    #{{ section_id }} .gs-featured-games-button {
      padding: 9px 14px;
      font-size: 12px;
    }

    #{{ section_id }} .gs-featured-games-carousel {
      gap: 12px;
      padding-bottom: 4px;
    }

    #{{ section_id }} .gs-featured-games-slide {
      flex: 0 0 calc((100% - 12px) / 2.15);
    }

    #{{ section_id }} .gs-featured-game-image-wrap {
      border-radius: 14px;
    }

    #{{ section_id }} .gs-featured-game-name {
      font-size: 13px;
      min-height: 34px;
    }

    #{{ section_id }} .gs-featured-game-price {
      font-size: 13px;
    }

    #{{ section_id }} .gs-featured-game-old-price {
      font-size: 11px;
    }

    #{{ section_id }} .gs-featured-games-header--bottom {
      margin-top: 40px;
    }

    #{{ section_id }} .gs-carousel-arrow {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      width: 40px;
      height: 40px;
      top: 34%;
      background: rgba(10, 10, 12, 0.82);
    }

    #{{ section_id }} .gs-carousel-arrow--prev {
      left: 6px;
    }

    #{{ section_id }} .gs-carousel-arrow--next {
      right: 6px;
    }

    #{{ section_id }} .gs-carousel-arrow svg {
      width: 18px;
      height: 18px;
    }
  }

  @media screen and (max-width: 480px) {
    #{{ section_id }} .gs-featured-games-header {
      flex-wrap: wrap;
      align-items: flex-start;
    }

    #{{ section_id }} .gs-featured-games-title {
      font-size: 20px;
    }

    #{{ section_id }} .gs-featured-games-slide {
      flex: 0 0 68%;
    }

    #{{ section_id }} .gs-featured-game-badge {
      min-width: 42px;
      min-height: 22px;
      font-size: 10px;
      padding: 4px 8px;
    }

    #{{ section_id }} .gs-carousel-arrow {
      width: 36px;
      height: 36px;
    }

    #{{ section_id }} .gs-carousel-arrow--prev {
      left: 4px;
    }

    #{{ section_id }} .gs-carousel-arrow--next {
      right: 4px;
    }
  }

  .gs-featured-games-carousel-wrap:hover .gs-carousel-arrow,
  .gs-featured-games-carousel:hover .gs-carousel-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }


/* 🔹 Desktop grande */
@media (min-width: 1200px) {
  .gs-carousel-arrow--prev {
    left: -20px;
  }

  .gs-carousel-arrow--next {
    right: -20px;
  }
}

/* 🔹 Laptop / desktop normal */
@media (max-width: 1199px) {
  .gs-carousel-arrow--prev {
    left: 0;
  }

  .gs-carousel-arrow--next {
    right: 0;
  }
}

/* 🔹 Tablet */
@media (max-width: 989px) {
  .gs-carousel-arrow {
    width: 44px;
    height: 44px;
  }

  .gs-carousel-arrow--prev {
    left: 6px;
  }

  .gs-carousel-arrow--next {
    right: 6px;
  }
}

/* 🔹 Mobile */
@media (max-width: 749px) {
  .gs-carousel-arrow {
    width: 38px;
    height: 38px;
    top: 45%;
  }

  .gs-carousel-arrow--prev {
    left: 8px;
  }

  .gs-carousel-arrow--next {
    right: 8px;
  }
}