/** Shopify CDN: Minification failed

Line 4839:0 Unexpected "="
Line 4986:0 Unexpected "="
Line 5126:0 Unexpected "="
Line 5194:0 Unexpected "="
Line 5247:0 Unexpected "="
Line 5311:0 Unexpected "="
Line 5684:15 Unexpected "/"
Line 5740:0 Unexpected "="
Line 5790:0 Unexpected "="
Line 5891:48 Expected identifier but found whitespace
... and 3 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);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

@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 .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

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

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

  .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 .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }

}

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;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 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) {
  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;
}

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

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  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 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  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 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  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 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  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 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  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 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  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 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, 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-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .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;
}

[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-weight: var(--font-paragraph--weight);
  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:not([type='checkbox'], [type='radio']) {
  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,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
  transform: rotate(90deg);
}

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

:not(.dialog-zoomed-gallery) > .product-media-container {
  --slide-width: 100%;

  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: var(--slide-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;
  }

  @supports (--test: round(up, 100%, 1px)) {
    /* width and overflow forces children to shrink to parent width */
    --slide-width: round(up, 100%, 1px);
  }
}

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

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

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

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

: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 {
  display: block;
  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);
}

/* Variant option component */
.variant-option {
  --options-border-radius: var(--variant-picker-button-radius);
  --options-border-width: var(--variant-picker-button-border-width);
  --variant-option-padding-inline: var(--padding-md);
}

.variant-option + .variant-option {
  margin-top: var(--padding-lg);
}

.variant-option--swatches {
  --options-border-radius: var(--variant-picker-swatch-radius);

  width: 100%;

  overflow-list::part(list) {
    padding-block: var(--overflow-list-padding-block, 0);
    padding-inline: var(--overflow-list-padding-inline, 0);
  }
}

.variant-option--swatches > overflow-list {
  justify-content: var(--product-swatches-alignment);

  @media screen and (max-width: 749px) {
    justify-content: var(--product-swatches-alignment-mobile);
  }
}

.variant-option--buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  border: none;
}

.variant-option--buttons legend {
  padding: 0;
  margin-block-end: var(--margin-xs);
}

.variant-option__swatch-value {
  padding-inline-start: var(--padding-xs);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
}

@media (prefers-reduced-motion: no-preference) {
  .variant-option__button-label,
  .variant-option__select-wrapper,
  .variant-option__button-label::before,
  .variant-option__button-label::after,
  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
    .variant-option__button-label__pill,
  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--animation-easing);
  }

  .variant-option__button-label__pill {
    transition-property: transform;
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
    transition-property: clip-path;
  }

  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
    .variant-option__button-label__pill {
    transition-property: transform;
  }

  .variant-option__button-label::after {
    transition-property: clip-path;
  }

  .variant-option__button-label::before {
    transition-property: border-color;
  }

  .variant-option__select-wrapper,
  .variant-option__button-label {
    transition-property: background-color, border-color, color;
  }
}

.variant-option__button-label {
  --variant-picker-stroke-color: var(--color-variant-border);

  cursor: pointer;
  display: flex;
  flex: 0 0 3.25em;
  align-items: center;
  position: relative;
  padding-block: var(--padding-sm);
  padding-inline: var(--padding-lg);
  border: var(--options-border-width) solid var(--color-variant-border);
  border-radius: var(--options-border-radius);
  overflow: clip;
  justify-content: center;
  min-height: 3.25em;
  min-width: fit-content;
  white-space: nowrap;
  background-color: var(--color-variant-background);
  color: var(--color-variant-text);
  gap: 0;

  &:hover,
  &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
    background-color: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

  /* so instead use the layered background image trick */
  &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
    border-width: 0;
  }

  /* ::after/::before act as a fake border for the button style variant */

  /* ::after is the unavailable variant border that clips in */
  &:not(.variant-option__button-label--has-swatch)::before,
  &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
    content: '';
    position: absolute;
    inset: 0;
    border: var(--options-border-width) solid var(--color-selected-variant-border);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(var(--clip, 0 0 0 0));
  }

  &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
    inset: 0;
  }

  &:not(.variant-option__button-label--has-swatch)::before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 0);
    border-color: var(--color-variant-border);
    inset: calc(var(--options-border-width) * -1);
  }

  &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
    border-color: var(--color-selected-variant-border);
  }

  /* setting left/right accounts for variant buttons of different widths */
  &:not(:has(:checked)):has(~ label > :checked),
  &:has(:checked):has(~ label > [data-previous-checked='true']) {
    .variant-option__button-label__pill {
      right: 0;
      left: unset;
    }
  }

  &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
  &:has(:checked) ~ label {
    .variant-option__button-label__pill {
      left: 0;
      right: unset;
    }
  }

  &:not(:has(:checked)):has(~ label > :checked) {
    --pill-offset: calc(100% + 1px);
  }

  &:has(:checked) ~ label {
    --pill-offset: calc(-100% - 1px);
  }

  &:has([data-current-checked='true']):first-of-type
    ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
  &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
    --clip: 0 0 0 100%;
  }

  &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
      .variant-option__button-label--has-swatch
    ),
  &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
    --clip: 0 100% 0 0;
  }

  &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
    width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
  }

  @media screen and (min-width: 750px) {
    padding: var(--padding-xs) var(--variant-option-padding-inline);
  }
}

/* wrap around only for 3 or more variants in a row */

/* the more complex selector rules here produce the wrap around effect for first/last variants */
.variant-option--buttons:has(:nth-of-type(3)) {
  .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
    --pill-offset: calc(100% + 1px);
  }

  .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
      ~ label:last-of-type > :checked
    ) {
    --pill-offset: calc(-100% - 1px);
  }
}

.variant-option__button-label__pill {
  background: var(--color-selected-variant-background);
  position: absolute;
  top: calc(var(--options-border-width) * -1);
  bottom: calc(var(--options-border-width) * -1);
  border-radius: inherit;
  pointer-events: none;
  width: 100%;
  transform: translateX(var(--pill-offset, 0));
}

.variant-option__button-label__text {
  pointer-events: none;
  text-align: start;
  text-wrap: auto;
  z-index: 2;
}

.variant-option--equal-width-buttons {
  --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

  .variant-option__button-label {
    min-width: var(--variant-min-width);
  }

  .variant-option__button-label__text {
    text-align: center;
    text-wrap: balance;
  }
}

.variant-option__button-label:has(:focus-visible) {
  --variant-picker-stroke-color: var(--color-foreground);

  border-color: var(--color-foreground);
  outline: var(--focus-outline-width) solid var(--color-foreground);
  outline-offset: var(--focus-outline-offset);
}

.variant-option__button-label--has-swatch {
  --focus-outline-radius: var(--variant-picker-swatch-radius);

  padding: 0;
  border: none;
  flex-basis: auto;
  min-height: auto;
}

/* Override global label:has(input) display rule with higher specificity */
.variant-option__button-label--has-swatch:has(input) {
  display: block;
}

.variant-option__button-label:has(:checked) {
  color: var(--color-selected-variant-text);
  border-color: var(--color-selected-variant-border);
}

.variant-option__button-label:has(:checked):hover {
  border-color: var(--color-selected-variant-hover-border);
  color: var(--color-selected-variant-hover-text);

  .variant-option__button-label__pill {
    background-color: var(--color-selected-variant-hover-background);
  }
}

.variant-option__button-label:has([data-option-available='false']) {
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
}

.variant-option__button-label--has-swatch:hover {
  outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
  outline-offset: var(--focus-outline-offset);
}

.variant-option__button-label--has-swatch:has(:checked) {
  --focus-outline: var(--focus-outline-width) solid var(--color-foreground);

  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* 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. **/
  .variant-option__button-label--has-swatch:has(:checked),
  .variant-option__button-label:has(:focus-visible) .swatch {
    outline: none;
    position: relative;
    overflow: visible;
  }

  .variant-option__button-label--has-swatch:has(:checked)::after,
  .variant-option__button-label:has(:focus-visible) .swatch::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline);
    border-radius: var(--focus-outline-radius, 50%);
    background-color: transparent;
    display: inherit;
  }
}

.variant-option__button-label:has([data-option-available='false']):has(:checked) {
  background-color: inherit;
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
}

.variant-option__button-label input {
  /* remove the checkbox from the page flow */
  position: absolute;

  /* set the dimensions to match those of the label */
  inset: 0;

  /* hide it */
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border: none;
  border-radius: 0;
  background: transparent;
  appearance: auto;
  display: block;
  cursor: pointer;
}

.variant-option__button-label svg {
  position: absolute;
  left: var(--options-border-width);
  top: var(--options-border-width);
  height: calc(100% - (var(--options-border-width) * 2));
  width: calc(100% - (var(--options-border-width) * 2));
  cursor: pointer;
  pointer-events: none;
  stroke-width: var(--style-border-width);
  stroke: var(--variant-picker-stroke-color);
}

.variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
  stroke: var(--color-variant-border);

  line {
    stroke-width: var(--options-border-width);
  }

  line:last-of-type {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(var(--clip, 0 0 0 0));
    stroke: rgb(var(--color-variant-text-rgb) / 1);
  }
}

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

.tax-note:empty {
  display: none;
}

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

/* Volume pricing note should match unit-price styling (small, grey text) */
product-price .volume-pricing-note,
product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
  display: block;
  font-family: var(--font-body--family);
  font-weight: normal;
  font-size: var(--font-size--xs);
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

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

.price-item__group {
  display: inline-block;
}

.price-item--sale {
  white-space: nowrap;
}

.price__hidden {
  display: none;
}

form.payment-terms {
  padding-top: 0.5em;
  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));
}

.installments:not(:has(shopify-payment-terms)) {
  display: none;
}

.card-gallery {
  position: relative;
}

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

/* Hide "Add" button when "Choose" button is shown */
[data-quick-add-button='choose'] add-to-cart-component {
  display: none;
}

/* Hide "Choose" button when "Add" button is shown */
[data-quick-add-button='add'] .quick-add__button--choose {
  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(--font-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);
    height: auto;

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

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (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) var(--font-heading--spacing);
  }

  :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-top: 50%;
  --checkbox-left: 1.5px;
  --checkbox-offset: 3px;
  --checkbox-path-opacity: 0;
  --checkbox-cursor: pointer;

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

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

  &.checkbox--disabled {
    --checkbox-cursor: not-allowed;
  }
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: unset;
  border: none;
  border-radius: 0;
  background: transparent;
  appearance: auto;
  display: block;
  cursor: pointer;

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

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Flexbox for labels wrapping radio buttons or checkboxes */
label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  cursor: pointer;
}

label:has(input[type='radio']:disabled),
label:has(input[type='checkbox']:disabled) {
  cursor: not-allowed;
}

/* Override for swatch labels to maintain block display */
.variant-option__button-label--has-swatch:has(input[type='radio']) {
  display: block;
}

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

/* Cart items component */
.cart-items-component {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Cart typography */
.cart-primary-typography {
  font-family: var(--cart-primary-font-family);
  font-style: var(--cart-primary-font-style);
  font-weight: var(--cart-primary-font-weight);
}

.cart-secondary-typography {
  font-family: var(--cart-secondary-font-family);
  font-style: var(--cart-secondary-font-style);
  font-weight: var(--cart-secondary-font-weight);
}

/* 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,
.quick-add-modal .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-minus,
.quick-add-modal .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,
.quick-add-modal .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 screen and (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);
  }
}

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

/* Collection Wrapper - Shared layout CSS for collection and search pages */

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

.collection-wrapper {
  @media screen and (min-width: 750px) {
    --facets-vertical-col-width: 6;

    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }

  @media screen and (min-width: 990px) {
    --facets-vertical-col-width: 5;
  }
}

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

.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
  @media screen and (min-width: 750px) {
    grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
  }
}

.collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
  @media screen and (min-width: 750px) {
    grid-column: 1 / -1;
    grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
  }
}

:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
  [product-grid-view='default']
  .product-grid__card {
  @media screen and (max-width: 749px) {
    padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
    padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
  }
}

:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
  [product-grid-view='mobile-single']
  .product-grid__card {
  @media screen and (max-width: 749px) {
    padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
    padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Make product media go edge-to-edge by using negative margins */
:is(.collection-wrapper--full-width) .card-gallery,
:is(.collection-wrapper--full-width-on-mobile) .card-gallery {
  @media screen and (max-width: 749px) {
    margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
    margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
  }
}

.collection-wrapper--full-width .main-collection-grid__title {
  margin-left: var(--page-margin);
}

.collection-wrapper--full-width-on-mobile .main-collection-grid__title {
  @media screen and (max-width: 749px) {
    margin-left: var(--page-margin);
  }
}

.collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
  @media screen and (min-width: 750px) {
    padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
  }
}

.collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
  @media screen and (max-width: 749px) {
    display: none;
  }
}

.collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
  @media screen and (min-width: 750px) {
    z-index: var(--facets-open-z-index);
  }
}

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

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

/* 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 screen and (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 screen and (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 Arrow Hover Animation - must stay in base.css for proper CSS cascade */

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

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

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .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;
}

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

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

.predictive-search-results__inner {
  flex-grow: 1;
  overflow-y: auto;
  padding-block: var(--padding-lg);
  container-type: inline-size;
  color: var(--color-foreground);
}

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

.product-recommendations {
  display: block;
}

.product-recommendations__skeleton-item {
  aspect-ratio: 3 / 4;
  background-color: var(--color-foreground);
  opacity: var(--skeleton-opacity);
  border-radius: 4px;
}

@media screen and (max-width: 749px) {
  .product-recommendations__skeleton-item:nth-child(2n + 1) {
    display: none;
  }
}

product-recommendations:has([data-has-recommendations='false']) {
  display: none;
}

.add-to-cart-button {
  --text-speed: 0.26;
  --base-delay: calc(var(--text-speed) * 0.25);
  --tick-speed: 0.1;
  --ring-speed: 0.2;
  --check-speed: 0.2;
  --burst-speed: 0.32;
  --step-delay: 3;
  --speed: 1;

  user-select: none;
  transition-property: color, box-shadow, background-color, scale, translate;
  transition-duration: var(--animation-speed);
  transition-timing-function: var(--ease-out-cubic);

  &:active {
    scale: 0.99;
    translate: 0 1px;
  }
}

.add-to-cart-button .svg-wrapper .checkmark-burst {
  width: 30px;
  height: 30px;
}

.add-to-cart-text {
  --atc-opacity: 0;
  --atc-destination: -1em;

  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
  justify-content: center;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
  animation-fill-mode: forwards;
  transition: width var(--animation-speed) var(--animation-easing),
    opacity var(--animation-speed) var(--animation-easing);
}

.add-to-cart__added {
  --atc-opacity: 1;
  --atc-destination: 0px;

  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.add-to-cart__added-icon {
  width: 32px;
  height: 32px;
}

[data-added='true'] .add-to-cart-text,
[data-added='true'] .add-to-cart__added {
  animation-name: atc-slide;
}

.checkmark-burst {
  opacity: 0;
  overflow: visible;

  .burst {
    rotate: 20deg;
  }

  .check {
    opacity: 0.2;
    scale: 0.8;
    filter: blur(2px);
    transform: translateZ(0);
  }

  :is(.ring, .line, .check, .burst, .tick) {
    transform-box: fill-box;
    transform-origin: center;
  }

  :is(.line) {
    stroke-dasharray: 1.5 1.5;
    stroke-dashoffset: -1.5;
    translate: 0 -180%;
  }

  g {
    transform-origin: center;
    rotate: calc(var(--index) * (360 / 8) * 1deg);
  }
}

.add-to-cart-button[data-added='true'] .checkmark-burst {
  opacity: 1;
}

.add-to-cart-button[data-added='true'] {
  .check {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }

  .tick {
    scale: 1.75;
  }

  .ring {
    opacity: 0;
    scale: 1;
  }

  .line {
    stroke-dashoffset: 1.5;
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(0% at 50% 50%);
    filter: blur(2px);
    opacity: 0;
    translate: 0 4px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .add-to-cart-button[data-added='true'] {
    .check {
      transition-property: opacity, scale, filter;
      transition-duration: calc(calc(var(--check-speed) * 1s));
      transition-delay: calc((var(--base-delay) * 1s));
      transition-timing-function: var(--ease-out-quad);
    }

    .tick {
      transition-property: scale;
      transition-duration: calc((calc(var(--tick-speed) * 1s)));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
      transition-timing-function: ease-out;
    }

    .ring {
      transition-property: opacity, scale;
      transition-duration: calc((calc(var(--ring-speed) * 1s)));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
      transition-timing-function: var(--ease-out-quad);
    }

    .line {
      transition-property: stroke-dashoffset;
      transition-duration: calc((calc(var(--burst-speed) * 1s)));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
      transition-timing-function: var(--ease-out-cubic);
    }
  }

  .add-to-cart-text {
    transition-property: clip-path, opacity, filter, translate;
    transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
    transition-timing-function: ease-out;
  }
}

.add-to-cart-text {
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  clip-path: circle(100% at 50% 50%);
}

@keyframes atc-slide {
  to {
    opacity: var(--atc-opacity, 1);
    translate: 0px var(--atc-destination, 0px);
  }
}

/* ================================
   KP TREASURES - BASE FINAL
   Header + pirate luxury style
================================ */

:root {
  --kp-black: #050505;
  --kp-black-soft: #0b0a08;
  --kp-gold: #d4af37;
  --kp-gold-light: #f2c75b;
  --kp-gold-pale: #ffe08a;
  --kp-border-gold: rgba(212, 175, 55, 0.45);
  --kp-glow: rgba(212, 175, 55, 0.25);
}

/* Fundo geral */
html,
body,
main,
.content-for-layout,
.shopify-section {
  background: var(--kp-black) !important;
}

body {
  color: var(--kp-gold-light) !important;
}

/* Header fixo */
#header-group,
.header-section,
#header-component,
.header {
  background: var(--kp-black) !important;
  z-index: 9999 !important;
}

.header-section,
.header-section:has(> #header-component[sticky='always']),
.header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

.header,
.header__row,
.header__row--top,
.header__columns,
.header__underlay,
.header__underlay-closed,
.header__underlay-open {
  background: var(--kp-black) !important;
  background-color: var(--kp-black) !important;
}

.header__row,
.header__row--top,
.header__columns {
  border-bottom: 1px solid var(--kp-border-gold) !important;
  box-shadow: 0 0 18px var(--kp-glow) !important;
}

/* Impede transparência do header na homepage */
.header[transparent],
.header[data-transparent],
#header-component[transparent] {
  position: relative !important;
  background: var(--kp-black) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: 0 !important;
}

/* Logo sempre visível */
.header-logo,
.header-logo[data-hidden-on-home-page],
a.header-logo,
a.header-logo[data-hidden-on-home-page],
.header__heading,
.header__heading-link {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--kp-gold-light) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.45) !important;
}

.header-logo img,
.header__heading-logo {
  max-height: 64px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.65));
}

/* Ícones e links do header */
.header a,
.header summary,
.header button,
.header svg,
.header .svg-wrapper,
.header-actions__action {
  color: var(--kp-gold) !important;
  fill: var(--kp-gold) !important;
}

/* Esconder menu textual desktop se ainda for renderizado */
.header-menu,
.header__menu,
.header__column--left nav,
.header__column--left .list-menu,
.header__navigation-bar-row {
  display: none !important;
}

/* Garantir que o drawer/menu existe visível */
header-drawer,
#header-component header-drawer,
#header-component details#Details-menu-drawer-container,
#header-component summary.header__icon--menu,
summary.header__icon--menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Esconder hamburger original */
summary.header__icon--menu svg,
summary.header__icon--menu .svg-wrapper {
  display: none !important;
}

/* Barco como botão menu */
summary.header__icon--menu::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  background-image: url("/cdn/shop/files/ChatGPT_Image_May_15_2026_01_17_39_AM_949875f6-702d-49d4-aaaa-a5bab6a702d8.png?v=1778800884");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.75));
  pointer-events: none;
}

summary.header__icon--menu {
  width: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  cursor: pointer !important;
}

/* Menu lateral / drawer */
.menu-drawer,
.drawer,
.dialog-drawer,
#menu-drawer,
[id*="menu-drawer"] {
  background: rgba(5, 5, 5, 0.98) !important;
  color: var(--kp-gold-light) !important;
  border-right: 1px solid var(--kp-border-gold) !important;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.18) !important;
}

.menu-drawer a,
.menu-drawer summary,
.drawer a,
.drawer summary,
.dialog-drawer a,
.dialog-drawer summary {
  color: var(--kp-gold-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Títulos gerais */
h1,
h2,
h3,
.h1,
.h2,
.h3,
.title,
.collection-hero__title,
.banner__heading {
  color: var(--kp-gold-light) !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}

p,
.rte,
.text-block,
.collection-hero__description {
  color: #e6c16a !important;
}

/* Botões */
.button,
.button-secondary,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button,
.customer button,
button:not(.button-unstyled) {
  background: linear-gradient(135deg, #6f4a0a, #d4af37, #8a6114) !important;
  color: #050505 !important;
  border: 1px solid var(--kp-gold-pale) !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.38), inset 0 0 8px rgba(255, 236, 160, 0.35) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.button:hover,
.button-secondary:hover,
button.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button:hover,
.customer button:hover,
button:not(.button-unstyled):hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #d4af37, #ffe08a, #9b6b16) !important;
  box-shadow: 0 0 24px rgba(255, 215, 100, 0.65), inset 0 0 12px rgba(255, 236, 160, 0.45) !important;
}

/* Cards de produto / coleções */
.product-card,
.card,
.product-card-wrapper,
.card-wrapper,
.collection-card,
.collection-card-wrapper,
.product-grid__item,
.resource-list__item {
  background: linear-gradient(180deg, #0b0a08 0%, #050505 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.32) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 18px rgba(212, 175, 55, 0.12) !important;
  overflow: hidden;
}

.product-card:hover,
.card:hover,
.collection-card:hover,
.product-card-wrapper:hover,
.collection-card-wrapper:hover,
.product-grid__item:hover {
  border-color: rgba(255, 215, 100, 0.72) !important;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.28), 0 0 45px rgba(0, 0, 0, 0.9) !important;
}

.product-card img,
.card img,
.collection-card img {
  filter: contrast(1.05) saturate(1.08);
}

.card__heading,
.card__heading a,
.product-card a,
.product__title,
.product__title h1,
.product-grid__card,
.product-grid__card a {
  color: var(--kp-gold-light) !important;
}

.price,
.price-item,
product-price,
.compare-at-price,
.unit-price {
  color: var(--kp-gold-pale) !important;
}

/* Inputs / newsletter / contacto */
input,
textarea,
select,
.field__input {
  background: #090909 !important;
  color: var(--kp-gold-light) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(245, 210, 122, 0.55) !important;
}

/* Footer */
.footer,
.shopify-section-group-footer-group {
  background: #030303 !important;
  border-top: 1px solid var(--kp-border-gold) !important;
  box-shadow: 0 -8px 22px rgba(212, 175, 55, 0.08) !important;
}

.footer h2,
.footer h3,
.footer-block__heading,
.footer a,
.footer p {
  color: var(--kp-gold-light) !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  summary.header__icon--menu {
    width: 58px !important;
    height: 58px !important;
  }

  summary.header__icon--menu::before {
    width: 48px;
    height: 48px;
  }

  .header-logo img,
  .header__heading-logo {
    max-height: 52px !important;
  }

  h1,
  .h1,
  .banner__heading {
    font-size: 32px !important;
  }
}

/* ================================
   KP TREASURES - MENU DRAWER FIX
   Mantém o barco clicável e permite abrir links/submenus
================================ */

/* O bloco anterior escondia .header-menu globalmente.
   Aqui voltamos a mostrar o menu DENTRO do drawer lateral. */
.menu-drawer .header-menu,
.menu-drawer .header__menu,
.menu-drawer .list-menu,
.menu-drawer nav,
.menu-drawer details,
.menu-drawer summary,
.menu-drawer ul,
.menu-drawer li,
.menu-drawer a,
.drawer .header-menu,
.drawer .header__menu,
.drawer .list-menu,
.drawer nav,
.drawer details,
.drawer summary,
.drawer ul,
.drawer li,
.drawer a,
.dialog-drawer .header-menu,
.dialog-drawer .header__menu,
.dialog-drawer .list-menu,
.dialog-drawer nav,
.dialog-drawer details,
.dialog-drawer summary,
.dialog-drawer ul,
.dialog-drawer li,
.dialog-drawer a,
#menu-drawer .header-menu,
#menu-drawer .header__menu,
#menu-drawer .list-menu,
#menu-drawer nav,
#menu-drawer details,
#menu-drawer summary,
#menu-drawer ul,
#menu-drawer li,
#menu-drawer a,
[id*="menu-drawer"] .header-menu,
[id*="menu-drawer"] .header__menu,
[id*="menu-drawer"] .list-menu,
[id*="menu-drawer"] nav,
[id*="menu-drawer"] details,
[id*="menu-drawer"] summary,
[id*="menu-drawer"] ul,
[id*="menu-drawer"] li,
[id*="menu-drawer"] a {
  display: revert !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Links do menu em coluna dentro do drawer */
.menu-drawer a,
.drawer a,
.dialog-drawer a,
#menu-drawer a,
[id*="menu-drawer"] a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 14px 22px !important;
  color: var(--kp-gold-light) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  pointer-events: auto !important;
}

/* Submenus/dropdowns dentro do drawer */
.menu-drawer summary,
.drawer summary,
.dialog-drawer summary,
#menu-drawer summary,
[id*="menu-drawer"] summary {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 14px 22px !important;
  color: var(--kp-gold-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.menu-drawer details[open] > ul,
.menu-drawer details[open] > .list-menu,
.menu-drawer details[open] > .menu-drawer__submenu,
.drawer details[open] > ul,
.drawer details[open] > .list-menu,
.drawer details[open] > .menu-drawer__submenu,
#menu-drawer details[open] > ul,
#menu-drawer details[open] > .list-menu,
#menu-drawer details[open] > .menu-drawer__submenu,
[id*="menu-drawer"] details[open] > ul,
[id*="menu-drawer"] details[open] > .list-menu,
[id*="menu-drawer"] details[open] > .menu-drawer__submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding-left: 16px !important;
}

/* Garante que o botão/barco abre o menu */
header-drawer,
.menu-drawer-container,
details#Details-menu-drawer-container,
#header-component header-drawer,
#header-component .menu-drawer-container,
#header-component details#Details-menu-drawer-container {
  pointer-events: auto !important;
  z-index: 100001 !important;
}

summary.header__icon--menu,
.header__icon--menu,
.header__icon--summary,
summary.header__icon,
#header-component summary.header__icon--menu {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 100002 !important;
}

summary.header__icon--menu::before {
  pointer-events: none !important;
}

summary.header__icon--menu *,
.header__icon--menu *,
.header__icon--summary * {
  pointer-events: none !important;
}

/* Quando o details abre, força o drawer a ficar visível por cima da página */
details[open] > .menu-drawer,
details[open] > #menu-drawer,
details[open] > [id*="menu-drawer"],
details[open] .menu-drawer,
details[open] #menu-drawer,
details[open] [id*="menu-drawer"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
  z-index: 100000 !important;
}

.menu-drawer,
.drawer,
.dialog-drawer,
#menu-drawer,
[id*="menu-drawer"] {
  pointer-events: auto !important;
  z-index: 100000 !important;
}

/* Evita que overlays/underlays do header fiquem por cima do menu aberto */
.header__underlay,
.header__underlay-closed,
.header__underlay-open {
  pointer-events: none !important;
}

/* Hover premium no menu lateral */
.menu-drawer a:hover,
.menu-drawer summary:hover,
.drawer a:hover,
.drawer summary:hover,
.dialog-drawer a:hover,
.dialog-drawer summary:hover,
#menu-drawer a:hover,
#menu-drawer summary:hover,
[id*="menu-drawer"] a:hover,
[id*="menu-drawer"] summary:hover {
  color: var(--kp-gold-pale) !important;
  background: rgba(212, 175, 55, 0.08) !important;
}

/* Mantém escondido apenas o menu textual do header, não o drawer */
#header-component > .header .header-menu,
#header-component > .header .header__menu,
#header-component > .header nav.header__inline-menu,
#header-component > .header .header__navigation-bar-row {
  display: none !important;
}


/* ================================
   KP TREASURES - MENU DRAWER CLICK FIX
   Correção leve: não cria círculo extra nem altera o X
================================ */

/* O botão do menu continua clicável */
#header-component summary.header__icon--menu,
summary.header__icon--menu,
.header__icon--menu {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* O barco/imagem não bloqueia o clique no botão */
summary.header__icon--menu::before,
summary.header__icon--menu img,
.header__icon--menu img,
summary.header__icon img {
  pointer-events: none !important;
}

/* O drawer fica acima da página */
.menu-drawer,
.header-drawer,
.menu-drawer-container,
#menu-drawer {
  z-index: 99990 !important;
}


/* ================================
   KP TREASURES - ESCONDER BARCO COM MENU ABERTO
   Só remove o ícone do barco quando o drawer/menu está aberto
================================ */

/* Quando o menu está aberto, esconde apenas o barco/imagem personalizada */
#header-component details[open] summary.header__icon--menu::before,
details[open] summary.header__icon--menu::before {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  background-image: none !important;
  content: none !important;
}

/* Caso o barco esteja como imagem dentro do botão */
#header-component details[open] summary.header__icon--menu img,
details[open] summary.header__icon--menu img,
#header-component details[open] .header__icon--menu img,
details[open] .header__icon--menu img {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

/* Mantém o botão real clicável para fechar o menu */
#header-component details[open] summary.header__icon--menu,
details[open] summary.header__icon--menu,
#header-component details[open] .header__icon--menu,
details[open] .header__icon--menu {
  pointer-events: auto !important;
  cursor: pointer !important;
}



   Mantém a zona dourada clicável quando o menu está aberto
================================ */

/* O header fica acima do menu aberto só na zona do botão */
#header-group,
#header-component,
.header-section,
.header {
  z-index: 100000 !important;
}

/* O botão do menu/barco fica por cima do drawer para abrir e fechar */
#header-component details summary.header__icon--menu,
#header-component details[open] summary.header__icon--menu,
details summary.header__icon--menu,
details[open] summary.header__icon--menu,
.header__icon--menu {
  position: relative !important;
  z-index: 100010 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Mantém a área clicável do botão, mesmo quando o barco desaparece */
#header-component details[open] summary.header__icon--menu,
details[open] summary.header__icon--menu {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* O barco continua escondido quando o menu está aberto */
#header-component details[open] summary.header__icon--menu::before,
details[open] summary.header__icon--menu::before,
#header-component details[open] summary.header__icon--menu img,
details[open] summary.header__icon--menu img {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
}

/* Qualquer ícone/desenho dentro do botão não deve roubar o clique */
#header-component details[open] summary.header__icon--menu *,
details[open] summary.header__icon--menu * {
  pointer-events: none !important;
}

/* O drawer fica acima da página, mas abaixo do botão dourado */
.menu-drawer,
.header-drawer,
.menu-drawer-container,
#menu-drawer {
  z-index: 99990 !important;
}

/* Se existir backdrop/overlay, ele não pode bloquear o botão do header */
.menu-drawer__backdrop,
.header-drawer__backdrop,
.drawer__backdrop,
[data-menu-drawer-backdrop],
.header__overlay,
.menu-drawer-overlay {
  z-index: 99980 !important;
}


/* ================================
   KP TREASURES - FECHAR MENU PELO CANTO DOURADO
   Cria uma área clicável invisível por cima do botão quando o menu está aberto
================================ */

/* Mantém o details inteiro acima do drawer quando está aberto */
#header-component details[open],
header-component details[open],
details[open]:has(summary.header__icon--menu) {
  position: relative !important;
  z-index: 2147483647 !important;
}

/* O botão real fica acima de tudo */
#header-component details[open] > summary.header__icon--menu,
header-component details[open] > summary.header__icon--menu,
details[open] > summary.header__icon--menu,
summary.header__icon--menu {
  position: relative !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Quando aberto, aumenta a área clicável do summary para apanhar a zona dourada */
#header-component details[open] > summary.header__icon--menu::after,
header-component details[open] > summary.header__icon--menu::after,
details[open] > summary.header__icon--menu::after {
  content: "" !important;
  position: fixed !important;
  top: 68px !important;
  left: 0 !important;
  width: 86px !important;
  height: 86px !important;
  display: block !important;
  background: transparent !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Esconde só o barco quando aberto */
#header-component details[open] > summary.header__icon--menu::before,
header-component details[open] > summary.header__icon--menu::before,
details[open] > summary.header__icon--menu::before,
#header-component details[open] > summary.header__icon--menu img,
header-component details[open] > summary.header__icon--menu img,
details[open] > summary.header__icon--menu img {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
}

/* Nada dentro do summary rouba o clique */
#header-component details[open] > summary.header__icon--menu *,
header-component details[open] > summary.header__icon--menu *,
details[open] > summary.header__icon--menu * {
  pointer-events: none !important;
}

/* Drawer e overlays abaixo da área clicável */
.menu-drawer,
.header-drawer,
.menu-drawer-container,
#menu-drawer,
.menu-drawer__backdrop,
.header-drawer__backdrop,
.drawer__backdrop,
[data-menu-drawer-backdrop],
.header__overlay,
.menu-drawer-overlay {
  z-index: 99990 !important;
}


   Barra acima do logo com Germania One
================================ */

:root {
  --kp-top-bar-height: 42px;
}

.kp-top-bar {
  width: 100%;
  min-height: var(--kp-top-bar-height);
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.18), transparent 42%),
    linear-gradient(90deg, #050505 0%, #151006 45%, #050505 100%);
  color: #d4af37;
  border-bottom: 1px solid rgba(212, 175, 55, 0.42);
  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.16),
    inset 0 -1px 0 rgba(255, 240, 180, 0.08);
  position: sticky;
  top: 0;
  z-index: 100010;
}

.kp-top-bar__inner {
  min-height: var(--kp-top-bar-height);
  padding: 6px 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.kp-top-bar__text {
  grid-column: 2;
  font-family: 'Germania One', serif !important;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  color: #d4af37;
  white-space: nowrap;
  text-shadow:
    0 0 6px rgba(212, 175, 55, 0.5),
    0 0 16px rgba(212, 175, 55, 0.24);
  animation: kpTopBarGlow 3.2s ease-in-out infinite;
}

.kp-top-bar__socials {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
}

.kp-top-bar__socials a {
  font-family: 'Germania One', serif !important;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1px;
  color: #d4af37 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid rgba(212, 175, 55, 0.48);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 0 8px rgba(212, 175, 55, 0.10),
    0 0 8px rgba(212, 175, 55, 0.10);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.kp-top-bar__socials a:hover {
  color: #fff1b8 !important;
  border-color: rgba(255, 225, 120, 0.9);
  background: rgba(212, 175, 55, 0.14);
  box-shadow:
    0 0 14px rgba(212, 175, 55, 0.46),
    inset 0 0 10px rgba(212, 175, 55, 0.16);
  transform: translateY(-1px);
}

@keyframes kpTopBarGlow {
  0%, 100% {
    opacity: 0.84;
    text-shadow:
      0 0 4px rgba(212, 175, 55, 0.28),
      0 0 12px rgba(212, 175, 55, 0.16);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0 9px rgba(212, 175, 55, 0.72),
      0 0 20px rgba(212, 175, 55, 0.36);
  }
}

@media screen and (max-width: 749px) {
  :root {
    --kp-top-bar-height: 68px;
  }

  .kp-top-bar__inner {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px 12px;
  }

  .kp-top-bar__spacer {
    display: none;
  }

  .kp-top-bar__text {
    grid-column: 1;
    font-size: 17px;
    letter-spacing: 1.1px;
  }

  .kp-top-bar__socials {
    grid-column: 1;
    justify-content: center;
    gap: 7px;
  }

  .kp-top-bar__socials a {
    font-size: 11px;
    padding: 6px 9px;
  }
}



   Barra social fixa em cima + header fixo por baixo
================================ */

:root {
  --kp-top-bar-height: 42px;
  --kp-header-safe-height: var(--header-height, 88px);
}

/* Barra superior sempre fixa no topo */
.kp-top-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-height: var(--kp-top-bar-height) !important;
  z-index: 100050 !important;
}

/* Header fica fixo imediatamente por baixo da barra */
#header-group {
  position: fixed !important;
  top: var(--kp-top-bar-height) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100040 !important;
}

/* Evita que elementos internos do header tentem voltar ao topo 0 */
#header-component,
.header-section,
.header {
  top: 0 !important;
}

/* Compensa o espaço ocupado pela barra + header fixos */
body {
  padding-top: calc(var(--kp-top-bar-height) + var(--kp-header-safe-height)) !important;
}

/* Quando o tema tenta puxar a primeira secção para baixo de header transparente, anulamos */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: 0 !important;
}

/* Mantém o drawer/menu acima do conteúdo e abaixo da zona de controlo do header */
.menu-drawer,
.header-drawer,
.menu-drawer-container,
#menu-drawer {
  z-index: 100030 !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  :root {
    --kp-top-bar-height: 68px;
    --kp-header-safe-height: var(--header-height, 82px);
  }

  body {
    padding-top: calc(var(--kp-top-bar-height) + var(--kp-header-safe-height)) !important;
  }
}



   A barra e o header ficam juntos, sem gap, e não se sobrepõem ao scroll
================================ */

:root {
  --kp-top-bar-height: 42px;
}

/* A barra fica no topo e mantém o seu espaço natural na página */
.kp-top-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100050 !important;
}

/* O header cola imediatamente por baixo da barra, sem criar padding extra */
#header-group {
  position: sticky !important;
  top: var(--kp-top-bar-height) !important;
  z-index: 100040 !important;
}

/* Evita offsets duplicados em elementos internos do header */
#header-component,
.header-section,
.header {
  top: 0 !important;
}

/* Remove o espaço extra que a versão anterior criava */
body {
  padding-top: 0 !important;
}

/* Evita que a primeira secção seja puxada para trás por header transparente */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: 0 !important;
}

/* Drawer acima do conteúdo */
.menu-drawer,
.header-drawer,
.menu-drawer-container,
#menu-drawer {
  z-index: 100030 !important;
}

@media screen and (max-width: 749px) {
  :root {
    --kp-top-bar-height: 68px;
  }
}


   Barra e header ficam juntos e, no scroll, o header fica abaixo da barra
================================ */

:root {
  --kp-top-bar-height: 42px;
}

/* Barra superior: fica presa no topo */
.kp-top-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100060 !important;
  min-height: var(--kp-top-bar-height) !important;
}

/* O grupo do header fica logo por baixo da barra durante o scroll */
#header-group {
  position: sticky !important;
  top: var(--kp-top-bar-height) !important;
  z-index: 100050 !important;
}

/* Alguns temas aplicam sticky diretamente na secção do header: forçamos o mesmo offset */
#header-group > .header-section,
.header-section:has(#header-component),
.shopify-section.header-section {
  position: sticky !important;
  top: var(--kp-top-bar-height) !important;
  z-index: 100050 !important;
}

/* Elementos internos não devem tentar colar no topo 0 independentemente */
#header-component,
#header-component .header,
.header {
  top: auto !important;
}

/* Remove qualquer compensação antiga que criava espaço extra */
body {
  padding-top: 0 !important;
}

/* Evita o tema puxar a primeira secção para baixo do header transparente */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: 0 !important;
}

/* Drawer continua acima do conteúdo, mas abaixo da barra/header */
.menu-drawer,
.header-drawer,
.menu-drawer-container,
#menu-drawer {
  z-index: 100040 !important;
}

/* Mobile: a barra tem duas linhas, logo é mais alta */
@media screen and (max-width: 749px) {
  :root {
    --kp-top-bar-height: 68px;
  }
}


   Barra acima do logo dentro do header-group
================================ */

:root {
  --kp-top-bar-height: 42px;
}

.kp-top-bar {
  width: 100%;
  min-height: var(--kp-top-bar-height);
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.18), transparent 42%),
    linear-gradient(90deg, #050505 0%, #151006 45%, #050505 100%);
  color: #d4af37;
  border-bottom: 1px solid rgba(212, 175, 55, 0.42);
  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.16),
    inset 0 -1px 0 rgba(255, 240, 180, 0.08);
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}

.kp-top-bar__inner {
  min-height: var(--kp-top-bar-height);
  padding: 6px 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.kp-top-bar__text {
  grid-column: 2;
  font-family: 'Germania One', serif !important;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  color: #d4af37;
  white-space: nowrap;
  text-shadow:
    0 0 6px rgba(212, 175, 55, 0.5),
    0 0 16px rgba(212, 175, 55, 0.24);
  animation: kpTopBarGlow 3.2s ease-in-out infinite;
}

.kp-top-bar__socials {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
}

.kp-top-bar__socials a {
  font-family: 'Germania One', serif !important;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1px;
  color: #d4af37 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid rgba(212, 175, 55, 0.48);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 0 8px rgba(212, 175, 55, 0.10),
    0 0 8px rgba(212, 175, 55, 0.10);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.kp-top-bar__socials a:hover {
  color: #fff1b8 !important;
  border-color: rgba(255, 225, 120, 0.9);
  background: rgba(212, 175, 55, 0.14);
  box-shadow:
    0 0 14px rgba(212, 175, 55, 0.46),
    inset 0 0 10px rgba(212, 175, 55, 0.16);
  transform: translateY(-1px);
}

/* Top bar e header agora pertencem ao mesmo grupo.
   Assim, quando o header-group fica sticky/fixed, sobem juntos e não se sobrepõem. */
#header-group {
  display: block !important;
  background: #050505 !important;
}

/* Remove offsets antigos que faziam a barra/header colidir ou abrir espaço */
.kp-top-bar,
#header-group,
#header-group > .header-section,
.header-section:has(#header-component),
.shopify-section.header-section,
#header-component,
#header-component .header,
.header {
  top: auto !important;
}

/* Garante que a primeira secção não é puxada para baixo do header transparente */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: 0 !important;
}

@keyframes kpTopBarGlow {
  0%, 100% {
    opacity: 0.84;
    text-shadow:
      0 0 4px rgba(212, 175, 55, 0.28),
      0 0 12px rgba(212, 175, 55, 0.16);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0 9px rgba(212, 175, 55, 0.72),
      0 0 20px rgba(212, 175, 55, 0.36);
  }
}

@media screen and (max-width: 749px) {
  :root {
    --kp-top-bar-height: 68px;
  }

  .kp-top-bar__inner {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px 12px;
  }

  .kp-top-bar__spacer {
    display: none;
  }

  .kp-top-bar__text {
    grid-column: 1;
    font-size: 17px;
    letter-spacing: 1.1px;
  }

  .kp-top-bar__socials {
    grid-column: 1;
    justify-content: center;
    gap: 7px;
  }

  .kp-top-bar__socials a {
    font-size: 11px;
    padding: 6px 9px;
  }
}

/* ================================
   KP TREASURES - TOP BAR / SOCIALS
   Barra única acima do logo
================================ */

:root {
  --kp-top-bar-height: 42px;
}

.kp-top-bar {
  width: 100%;
  min-height: var(--kp-top-bar-height);
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.18), transparent 42%),
    linear-gradient(90deg, #050505 0%, #151006 45%, #050505 100%);
  color: #d4af37;
  border-bottom: 1px solid rgba(212, 175, 55, 0.42);
  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.16),
    inset 0 -1px 0 rgba(255, 240, 180, 0.08);
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
}

.kp-top-bar__inner {
  min-height: var(--kp-top-bar-height);
  padding: 6px 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.kp-top-bar__text {
  grid-column: 2;
  font-family: 'Germania One', serif !important;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  color: #d4af37;
  white-space: nowrap;
  text-shadow:
    0 0 6px rgba(212, 175, 55, 0.5),
    0 0 16px rgba(212, 175, 55, 0.24);
  animation: kpTopBarGlow 3.2s ease-in-out infinite;
}

.kp-top-bar__socials {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
}

.kp-top-bar__socials a {
  font-family: 'Germania One', serif !important;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1px;
  color: #d4af37 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid rgba(212, 175, 55, 0.48);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 0 8px rgba(212, 175, 55, 0.10),
    0 0 8px rgba(212, 175, 55, 0.10);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.kp-top-bar__socials a:hover {
  color: #fff1b8 !important;
  border-color: rgba(255, 225, 120, 0.9);
  background: rgba(212, 175, 55, 0.14);
  box-shadow:
    0 0 14px rgba(212, 175, 55, 0.46),
    inset 0 0 10px rgba(212, 175, 55, 0.16);
  transform: translateY(-1px);
}

#header-group {
  display: block !important;
  background: #050505 !important;
}

.kp-top-bar,
#header-group,
#header-group > .header-section,
.header-section:has(#header-component),
.shopify-section.header-section,
#header-component,
#header-component .header,
.header {
  top: auto !important;
}

body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: 0 !important;
}

@keyframes kpTopBarGlow {
  0%, 100% {
    opacity: 0.84;
    text-shadow:
      0 0 4px rgba(212, 175, 55, 0.28),
      0 0 12px rgba(212, 175, 55, 0.16);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0 9px rgba(212, 175, 55, 0.72),
      0 0 20px rgba(212, 175, 55, 0.36);
  }
}

@media screen and (max-width: 749px) {
  :root {
    --kp-top-bar-height: 68px;
  }

  .kp-top-bar__inner {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px 12px;
  }

  .kp-top-bar__spacer {
    display: none;
  }

  .kp-top-bar__text {
    grid-column: 1;
    font-size: 17px;
    letter-spacing: 1.1px;
  }

  .kp-top-bar__socials {
    grid-column: 1;
    justify-content: center;
    gap: 7px;
  }

  .kp-top-bar__socials a {
    font-size: 11px;
    padding: 6px 9px;
  }
}
/* KP TREASURES - Contact page social icons */

.kp-contact-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 24px auto 28px !important;
  flex-wrap: nowrap !important;
}

.kp-contact-icons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.14) !important;
}

.kp-contact-icons img {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  display: block !important;
}

.kp-contact-icons a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35) !important;
}

@media screen and (max-width: 749px) {
  .kp-contact-icons {
    gap: 12px !important;
  }

  .kp-contact-icons a,
  .kp-contact-icons img {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
}

   Faz Contact / Policies / Terms / Shipping aproveitarem melhor o espaço
================================ */

/* Páginas legais nativas da Shopify */
.shopify-policy__container {
  max-width: 1400px !important;
  width: 100% !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* Corpo das políticas */
.shopify-policy__body {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Texto dentro das políticas */
.shopify-policy__body .rte {
  max-width: 1200px !important;
  width: 100% !important;
}

/* Páginas normais tipo Contact / About Us */
.template-page .page-width,
.main-page .page-width,
.page-width {
  max-width: 1400px !important;
}

/* Conteúdo das páginas normais */
.template-page .rte,
.main-page .rte {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .shopify-policy__container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .shopify-policy__body,
  .shopify-policy__body .rte,
  .template-page .rte,
  .main-page .rte {
    max-width: 100% !important;
  }
}

================================ */

/* Página Contact com largura semelhante à About Us */
body:has(a[href="/pages/contact"]) .content-for-layout,
body.template-page .content-for-layout {
  width: 100% !important;
}

/* Aplica especificamente à página Contact */
body:has(form[action*="/contact"]) .page-width,
body:has(form[action*="/contact"]) .main-page,
body:has(form[action*="/contact"]) .rte,
body:has(form[action*="/contact"]) .section,
body:has(form[action*="/contact"]) .section-content-wrapper {
  max-width: 1400px !important;
  width: 100% !important;
}

/* Texto/contact content mais largo */
body:has(form[action*="/contact"]) .rte {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* Formulário de contacto também mais largo e alinhado */
body:has(form[action*="/contact"]) form {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  body:has(form[action*="/contact"]) .rte {
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body:has(form[action*="/contact"]) form {
    max-width: 100% !important;
  }
}


   Usa a largura tipo About Us apenas na página Contact
   Deteta a página pelo bloco .kp-contact-icons
================================ */

body:has(.kp-contact-icons) .content-for-layout {
  width: 100% !important;
}

body:has(.kp-contact-icons) .content-for-layout .section {
  grid-template-columns:
    minmax(24px, 1fr)
    minmax(0, 1280px)
    minmax(24px, 1fr) !important;
}

body:has(.kp-contact-icons) .content-for-layout .section > *,
body:has(.kp-contact-icons) .content-for-layout .page-width,
body:has(.kp-contact-icons) .content-for-layout .main-page,
body:has(.kp-contact-icons) .content-for-layout .rte,
body:has(.kp-contact-icons) .content-for-layout .text-block {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:has(.kp-contact-icons) .content-for-layout .rte {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

body:has(.kp-contact-icons) .content-for-layout form {
  max-width: 920px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.kp-contact-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 24px auto 28px !important;
  flex-wrap: nowrap !important;
}

.kp-contact-icons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.14) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.kp-contact-icons a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35) !important;
}

.kp-contact-icons img {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  display: block !important;
}

@media screen and (max-width: 749px) {
  body:has(.kp-contact-icons) .content-for-layout .section {
    grid-template-columns:
      minmax(16px, 1fr)
      minmax(0, 100%)
      minmax(16px, 1fr) !important;
  }

  body:has(.kp-contact-icons) .content-for-layout .rte {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .kp-contact-icons {
    gap: 12px !important;
  }

  .kp-contact-icons a,
  .kp-contact-icons img {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
}


   Contact mais largo com classe direta no body.
   About Us alinhado.
   Policies mais largas.
================================ */

/* Páginas legais Shopify: Privacy / Return & Refund / Terms / Shipping */
.shopify-policy__container {
  max-width: 1400px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.shopify-policy__title,
.shopify-policy__body {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.shopify-policy__body .rte,
.shopify-policy__body .rte > * {
  max-width: 1280px !important;
}

/* CONTACT: força a página Contact a usar a largura da About Us */
body.kp-page-contact {
  --page-content-width: 1280px !important;
  --normal-content-width: 1280px !important;
  --normal-page-width: 1280px !important;
  --narrow-page-width: 1280px !important;
  --page-width: 1400px !important;
}

body.kp-page-contact .content-for-layout {
  width: 100% !important;
  max-width: none !important;
}

body.kp-page-contact .content-for-layout .shopify-section,
body.kp-page-contact .content-for-layout .section {
  width: 100% !important;
  max-width: none !important;
}

body.kp-page-contact .content-for-layout .section {
  --page-content-width: 1280px !important;
  --normal-content-width: 1280px !important;
  --normal-page-width: 1280px !important;
  --narrow-page-width: 1280px !important;
  --page-width: 1400px !important;
  --full-page-grid-central-column-width: min(1280px, calc(100vw - 48px)) !important;
  --full-page-grid-with-margins:
    minmax(24px, 1fr)
    minmax(0, min(1280px, calc(100vw - 48px)))
    minmax(24px, 1fr) !important;
  grid-template-columns:
    minmax(24px, 1fr)
    minmax(0, min(1280px, calc(100vw - 48px)))
    minmax(24px, 1fr) !important;
}

body.kp-page-contact .content-for-layout .section > *,
body.kp-page-contact .content-for-layout .page-width,
body.kp-page-contact .content-for-layout .page-width-content,
body.kp-page-contact .content-for-layout .page-width-normal,
body.kp-page-contact .content-for-layout .main-page,
body.kp-page-contact .content-for-layout .section-content-wrapper,
body.kp-page-contact .content-for-layout .rte,
body.kp-page-contact .content-for-layout .text-block,
body.kp-page-contact .content-for-layout .group-block,
body.kp-page-contact .content-for-layout .group-block-content {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.kp-page-contact .content-for-layout .section > * {
  grid-column: 2 !important;
}

body.kp-page-contact .content-for-layout .rte,
body.kp-page-contact .content-for-layout .text-block,
body.kp-page-contact .content-for-layout .group-block-content {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* Força elementos com largura inline/variáveis internas do tema a abrirem no Contact */
body.kp-page-contact .content-for-layout [style*="max-width"],
body.kp-page-contact .content-for-layout [style*="--width"],
body.kp-page-contact .content-for-layout [style*="--max-width"] {
  max-width: 1280px !important;
  width: 100% !important;
  --width: 1280px !important;
  --max-width: 1280px !important;
  --content-width: 1280px !important;
}

body.kp-page-contact .content-for-layout form {
  max-width: 920px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ABOUT US: texto alinhado com o início do título/bloco */
body.kp-page-about {
  --page-content-width: 1280px !important;
  --normal-content-width: 1280px !important;
  --normal-page-width: 1280px !important;
  --narrow-page-width: 1280px !important;
  --page-width: 1400px !important;
}

body.kp-page-about .content-for-layout .section {
  grid-template-columns:
    minmax(24px, 1fr)
    minmax(0, min(1280px, calc(100vw - 48px)))
    minmax(24px, 1fr) !important;
}

body.kp-page-about .content-for-layout .section > *,
body.kp-page-about .content-for-layout .page-width,
body.kp-page-about .content-for-layout .page-width-content,
body.kp-page-about .content-for-layout .page-width-normal,
body.kp-page-about .content-for-layout .main-page,
body.kp-page-about .content-for-layout .section-content-wrapper,
body.kp-page-about .content-for-layout .rte,
body.kp-page-about .content-for-layout .text-block {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.kp-page-about .content-for-layout .section > * {
  grid-column: 2 !important;
}

body.kp-page-about .content-for-layout .rte,
body.kp-page-about .content-for-layout .text-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.kp-page-about .content-for-layout .rte > *,
body.kp-page-about .content-for-layout .text-block > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

/* Ícones Contact pequenos e lado a lado */
.kp-contact-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 24px auto 28px !important;
  flex-wrap: nowrap !important;
}

.kp-contact-icons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.14) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.kp-contact-icons a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35) !important;
}

.kp-contact-icons img {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  display: block !important;
}

@media screen and (max-width: 749px) {
  .shopify-policy__container {
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .shopify-policy__title,
  .shopify-policy__body,
  .shopify-policy__body .rte,
  .shopify-policy__body .rte > * {
    max-width: 100% !important;
  }

  body.kp-page-contact .content-for-layout .section,
  body.kp-page-about .content-for-layout .section {
    grid-template-columns:
      minmax(16px, 1fr)
      minmax(0, 100%)
      minmax(16px, 1fr) !important;
  }

  body.kp-page-contact .content-for-layout .rte,
  body.kp-page-contact .content-for-layout .text-block,
  body.kp-page-contact .content-for-layout .group-block-content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .kp-contact-icons {
    gap: 12px !important;
  }

  .kp-contact-icons a,
  .kp-contact-icons img {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
}


   Estilo preto/dourado + sem sugestões antes de escrever
================================ */

/* Modal/popup principal da pesquisa */
predictive-search,
.search-modal,
.search-modal__content,
.predictive-search,
.predictive-search__results,
.predictive-search-results,
.predictive-search-results__inner,
.search__input,
.search__button,
.search__field,
.search-input,
.search-input__input {
  border-color: rgba(212, 175, 55, 0.36) !important;
}

/* Fundo geral dos blocos de pesquisa */
.search-modal,
.search-modal__content,
.predictive-search,
.predictive-search__results,
.predictive-search-results,
.predictive-search-results__inner,
.predictive-search__loading-state,
.predictive-search__list,
.search-input,
.search-input__input,
.search__input {
  background: #050505 !important;
  color: #f6e7b2 !important;
}

/* Caixa/modal com efeito premium */
.search-modal__content,
.predictive-search,
.predictive-search__results,
.predictive-search-results {
  border: 1px solid rgba(212, 175, 55, 0.42) !important;
  box-shadow:
    0 0 24px rgba(212, 175, 55, 0.18),
    inset 0 0 18px rgba(212, 175, 55, 0.05) !important;
}

/* Campo de pesquisa */
.search-modal input[type="search"],
.search-modal input[name="q"],
.predictive-search input[type="search"],
.predictive-search input[name="q"],
.search__input,
.search-input__input {
  background: rgba(0, 0, 0, 0.56) !important;
  color: #f6e7b2 !important;
  border: 1px solid rgba(212, 175, 55, 0.52) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 12px rgba(212, 175, 55, 0.12),
    inset 0 0 10px rgba(212, 175, 55, 0.08) !important;
}

.search-modal input[type="search"]::placeholder,
.search-modal input[name="q"]::placeholder,
.predictive-search input[type="search"]::placeholder,
.predictive-search input[name="q"]::placeholder,
.search__input::placeholder,
.search-input__input::placeholder {
  color: rgba(246, 231, 178, 0.58) !important;
}

/* Ícones/botões dentro da pesquisa */
.search-modal button,
.predictive-search button,
.search__button,
.reset__button,
.search-modal .svg-wrapper,
.predictive-search .svg-wrapper,
.search-modal svg,
.predictive-search svg {
  color: #d4af37 !important;
  fill: #d4af37 !important;
  stroke: #d4af37 !important;
}

/* Títulos de secções dos resultados */
.predictive-search h2,
.predictive-search h3,
.predictive-search .h5,
.predictive-search .h6,
.predictive-search__heading,
.predictive-search-results__heading,
.search-modal h2,
.search-modal h3 {
  font-family: 'Germania One', serif !important;
  color: #d4af37 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.28) !important;
}

/* Links/resultados */
.predictive-search a,
.predictive-search .predictive-search__item,
.predictive-search-results__card,
.predictive-search-results__card *,
.search-modal a {
  color: #f6e7b2 !important;
  text-decoration: none !important;
}

.predictive-search a:hover,
.predictive-search .predictive-search__item:hover,
.predictive-search-results__card:hover {
  color: #d4af37 !important;
  background: rgba(212, 175, 55, 0.08) !important;
}

/* Cards de produtos/coleções no search */
.predictive-search-results__card,
.predictive-search__item,
.predictive-search__list-item {
  background: rgba(0, 0, 0, 0.28) !important;
  border-color: rgba(212, 175, 55, 0.22) !important;
  border-radius: 14px !important;
}

/* Estado vazio/inicial personalizado */
.kp-search-empty-state {
  display: none;
  text-align: center;
  max-width: 720px;
  margin: 24px auto 10px;
  padding: 22px 24px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.12), transparent 48%),
    rgba(0, 0, 0, 0.36);
  color: rgba(246, 231, 178, 0.86);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.10);
}

.kp-search-empty-state strong {
  display: block;
  font-family: 'Germania One', serif !important;
  color: #d4af37;
  font-size: 22px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.kp-search-empty-state span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
}

/* Sem query: esconder sugestões/resultados automáticos */
body.kp-search-empty predictive-search [id*="predictive-search-results"],
body.kp-search-empty predictive-search .predictive-search__results,
body.kp-search-empty predictive-search .predictive-search-results,
body.kp-search-empty predictive-search .predictive-search-results__inner,
body.kp-search-empty predictive-search .predictive-search__list,
body.kp-search-empty .search-modal [id*="predictive-search-results"],
body.kp-search-empty .search-modal .predictive-search__results,
body.kp-search-empty .search-modal .predictive-search-results,
body.kp-search-empty .search-modal .predictive-search-results__inner,
body.kp-search-empty .search-modal .predictive-search__list {
  display: none !important;
}

/* Sem query: esconder mensagens tipo sugestões/produtos/no products found */
body.kp-search-empty .predictive-search__heading,
body.kp-search-empty .predictive-search-results__heading,
body.kp-search-empty .predictive-search [class*="resource"],
body.kp-search-empty .search-modal [class*="resource"],
body.kp-search-empty .predictive-search [class*="suggest"],
body.kp-search-empty .search-modal [class*="suggest"] {
  display: none !important;
}

/* Quando estiver vazio, mostrar a mensagem KP */
body.kp-search-empty .kp-search-empty-state {
  display: block !important;
}

/* Se existir texto "No products found" antes de escrever, escondemos */
body.kp-search-empty .predictive-search__results-groups-wrapper,
body.kp-search-empty .predictive-search-status,
body.kp-search-empty [role="status"] {
  display: none !important;
}

/* Com pesquisa escrita, mostra resultados normalmente */
body.kp-search-has-query .predictive-search__results,
body.kp-search-has-query .predictive-search-results,
body.kp-search-has-query .predictive-search-results__inner,
body.kp-search-has-query .predictive-search__list {
  display: revert !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .search-modal__content,
  .predictive-search,
  .predictive-search__results,
  .predictive-search-results {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  .kp-search-empty-state {
    margin: 18px 14px 8px;
    padding: 18px 16px;
  }

  .kp-search-empty-state strong {
    font-size: 19px;
  }
}


   2 cores: preto + dourado.
   Sem resultados/sugestões dentro da barra.
   Resultados só na página de pesquisa após submeter.
================================ */

:root {
  --kp-search-black: #050505;
  --kp-search-gold: #d4af37;
}

/* Modal/drawer/caixa da pesquisa */
.search-modal,
.search-modal *,
predictive-search,
predictive-search *,
.predictive-search,
.predictive-search *,
.predictive-search-results,
.predictive-search-results *,
.search-modal__content,
.search-modal__content *,
.search-input,
.search-input *,
.search__input,
.search__button,
.reset__button {
  border-color: var(--kp-search-gold) !important;
}

/* Fundo preto em todos os elementos visíveis da pesquisa */
.search-modal,
.search-modal__content,
.search-modal__form,
.search-modal form,
predictive-search,
.predictive-search,
.predictive-search__results,
.predictive-search-results,
.predictive-search-results__inner,
.search-input,
.search-input__input,
.search__input,
input[type="search"],
input[name="q"] {
  background: var(--kp-search-black) !important;
  color: var(--kp-search-gold) !important;
}

/* Campo de pesquisa */
.search-modal input[type="search"],
.search-modal input[name="q"],
predictive-search input[type="search"],
predictive-search input[name="q"],
.search__input,
.search-input__input,
input[type="search"][name="q"] {
  background: var(--kp-search-black) !important;
  color: var(--kp-search-gold) !important;
  border: 1px solid var(--kp-search-gold) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;
  caret-color: var(--kp-search-gold) !important;
}

/* Placeholder apenas dourado */
.search-modal input[type="search"]::placeholder,
.search-modal input[name="q"]::placeholder,
predictive-search input[type="search"]::placeholder,
predictive-search input[name="q"]::placeholder,
.search__input::placeholder,
.search-input__input::placeholder {
  color: var(--kp-search-gold) !important;
  opacity: 0.65 !important;
}

/* Botões/ícones dentro da pesquisa */
.search-modal button,
predictive-search button,
.search__button,
.reset__button,
.search-modal .svg-wrapper,
predictive-search .svg-wrapper,
.search-modal svg,
predictive-search svg {
  background: var(--kp-search-black) !important;
  color: var(--kp-search-gold) !important;
  fill: var(--kp-search-gold) !important;
  stroke: var(--kp-search-gold) !important;
  border-color: var(--kp-search-gold) !important;
}

/* Caixa principal com borda simples */
.search-modal__content,
predictive-search,
.predictive-search {
  background: var(--kp-search-black) !important;
  color: var(--kp-search-gold) !important;
  border: 1px solid var(--kp-search-gold) !important;
  box-shadow: none !important;
}

/* Remove qualquer branco de labels, headings, mensagens e links */
.search-modal h1,
.search-modal h2,
.search-modal h3,
.search-modal h4,
.search-modal p,
.search-modal span,
.search-modal label,
.search-modal a,
predictive-search h1,
predictive-search h2,
predictive-search h3,
predictive-search h4,
predictive-search p,
predictive-search span,
predictive-search label,
predictive-search a {
  color: var(--kp-search-gold) !important;
}

/* Estado inicial simples */
.kp-search-empty-state {
  display: block;
  text-align: center;
  max-width: 720px;
  margin: 22px auto 8px;
  padding: 18px 20px;
  border: 1px solid var(--kp-search-gold);
  border-radius: 18px;
  background: var(--kp-search-black);
  color: var(--kp-search-gold);
  box-shadow: none;
}

.kp-search-empty-state strong {
  display: block;
  font-family: 'Germania One', serif !important;
  color: var(--kp-search-gold);
  font-size: 22px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.kp-search-empty-state span {
  display: block;
  color: var(--kp-search-gold);
  font-size: 14px;
  line-height: 1.6;
}

/* IMPORTANTE:
   Esconde SEMPRE os resultados/sugestões dentro do modal da lupa.
   A pesquisa só mostra resultados depois de submeter e ir para a página /search. */
.search-modal [id*="predictive-search-results"],
.search-modal .predictive-search__results,
.search-modal .predictive-search-results,
.search-modal .predictive-search-results__inner,
.search-modal .predictive-search__list,
.search-modal .predictive-search__results-groups-wrapper,
.search-modal .predictive-search-results__card,
.search-modal .predictive-search__item,
.search-modal .predictive-search__list-item,
.search-modal [class*="suggest"],
.search-modal [class*="recommend"],
.search-modal [class*="resource"],
.search-modal [role="listbox"],
.search-modal [role="option"],
predictive-search [id*="predictive-search-results"],
predictive-search .predictive-search__results,
predictive-search .predictive-search-results,
predictive-search .predictive-search-results__inner,
predictive-search .predictive-search__list,
predictive-search .predictive-search__results-groups-wrapper,
predictive-search .predictive-search-results__card,
predictive-search .predictive-search__item,
predictive-search .predictive-search__list-item,
predictive-search [class*="suggest"],
predictive-search [class*="recommend"],
predictive-search [class*="resource"],
predictive-search [role="listbox"],
predictive-search [role="option"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Esconde mensagens internas tipo "No products found" dentro da barra */
.search-modal [role="status"],
predictive-search [role="status"],
.search-modal .predictive-search-status,
predictive-search .predictive-search-status {
  display: none !important;
}

/* Garante que o botão de submit continua funcional */
.search-modal form,
predictive-search form {
  display: flex !important;
}

.search-modal form button[type="submit"],
predictive-search form button[type="submit"],
.search__button {
  cursor: pointer !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .search-modal__content,
  predictive-search,
  .predictive-search {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  .kp-search-empty-state {
    margin: 18px 14px 8px;
    padding: 16px 14px;
  }

  .kp-search-empty-state strong {
    font-size: 19px;
  }
}

/* ================================
   KP TREASURES - SEARCH MODAL CLEAN FINAL
   Preto + dourado.
   Sem caixa de texto extra.
   Sem fundo branco atrás do campo.
   Sem resultados dentro do modal.
================================ */

:root {
  --kp-search-black: #050505;
  --kp-search-gold: #d4af37;
}

/* Força o modal inteiro a preto/dourado */
.search-modal,
.search-modal *,
predictive-search,
predictive-search *,
.predictive-search,
.predictive-search *,
.search-modal__content,
.search-modal__content *,
.search-modal__form,
.search-modal form,
.search-input,
.search-input *,
.search__input,
.search__button,
.reset__button {
  background-color: var(--kp-search-black) !important;
  background: var(--kp-search-black) !important;
  color: var(--kp-search-gold) !important;
  border-color: var(--kp-search-gold) !important;
  box-shadow: none !important;
}

/* Remove a caixa/mensagem grande que aparecia por baixo */
.kp-search-empty-state {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Campo de pesquisa sem caixa branca atrás */
.search-modal input[type="search"],
.search-modal input[name="q"],
predictive-search input[type="search"],
predictive-search input[name="q"],
.search__input,
.search-input__input,
input[type="search"][name="q"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--kp-search-black) !important;
  background: var(--kp-search-black) !important;
  color: var(--kp-search-gold) !important;
  border: 1px solid var(--kp-search-gold) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;
  caret-color: var(--kp-search-gold) !important;
}

/* Remove fundos brancos de wrappers comuns do input */
.search-modal label,
.search-modal .field,
.search-modal .field::before,
.search-modal .field::after,
.search-modal .search-field,
.search-modal .search-input,
.search-modal .search-input__wrapper,
.search-modal .search-modal__form,
.search-modal .search__input-wrapper,
.search-modal .input-wrapper,
predictive-search label,
predictive-search .field,
predictive-search .field::before,
predictive-search .field::after,
predictive-search .search-field,
predictive-search .search-input,
predictive-search .search-input__wrapper,
predictive-search .search__input-wrapper,
predictive-search .input-wrapper {
  background-color: var(--kp-search-black) !important;
  background: var(--kp-search-black) !important;
  box-shadow: none !important;
  border-color: var(--kp-search-gold) !important;
}

/* Placeholder */
.search-modal input[type="search"]::placeholder,
.search-modal input[name="q"]::placeholder,
predictive-search input[type="search"]::placeholder,
predictive-search input[name="q"]::placeholder,
.search__input::placeholder,
.search-input__input::placeholder {
  color: var(--kp-search-gold) !important;
  opacity: 0.65 !important;
}

/* Botões e ícones */
.search-modal button,
predictive-search button,
.search__button,
.reset__button,
.search-modal .svg-wrapper,
predictive-search .svg-wrapper,
.search-modal svg,
predictive-search svg {
  background-color: var(--kp-search-black) !important;
  background: var(--kp-search-black) !important;
  color: var(--kp-search-gold) !important;
  fill: var(--kp-search-gold) !important;
  stroke: var(--kp-search-gold) !important;
  border-color: var(--kp-search-gold) !important;
  box-shadow: none !important;
}

/* Caixa principal simples */
.search-modal__content,
predictive-search,
.predictive-search {
  background-color: var(--kp-search-black) !important;
  background: var(--kp-search-black) !important;
  color: var(--kp-search-gold) !important;
  border: 1px solid var(--kp-search-gold) !important;
  box-shadow: none !important;
}

/* Texto do modal */
.search-modal h1,
.search-modal h2,
.search-modal h3,
.search-modal h4,
.search-modal p,
.search-modal span,
.search-modal label,
.search-modal a,
predictive-search h1,
predictive-search h2,
predictive-search h3,
predictive-search h4,
predictive-search p,
predictive-search span,
predictive-search label,
predictive-search a {
  color: var(--kp-search-gold) !important;
}

/* Esconde SEMPRE resultados/sugestões dentro do modal */
.search-modal [id*="predictive-search-results"],
.search-modal .predictive-search__results,
.search-modal .predictive-search-results,
.search-modal .predictive-search-results__inner,
.search-modal .predictive-search__list,
.search-modal .predictive-search__results-groups-wrapper,
.search-modal .predictive-search-results__card,
.search-modal .predictive-search__item,
.search-modal .predictive-search__list-item,
.search-modal [class*="suggest"],
.search-modal [class*="recommend"],
.search-modal [class*="resource"],
.search-modal [role="listbox"],
.search-modal [role="option"],
.search-modal [role="status"],
.search-modal .predictive-search-status,
predictive-search [id*="predictive-search-results"],
predictive-search .predictive-search__results,
predictive-search .predictive-search-results,
predictive-search .predictive-search-results__inner,
predictive-search .predictive-search__list,
predictive-search .predictive-search__results-groups-wrapper,
predictive-search .predictive-search-results__card,
predictive-search .predictive-search__item,
predictive-search .predictive-search__list-item,
predictive-search [class*="suggest"],
predictive-search [class*="recommend"],
predictive-search [class*="resource"],
predictive-search [role="listbox"],
predictive-search [role="option"],
predictive-search [role="status"],
predictive-search .predictive-search-status {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mantém o form funcional */
.search-modal form,
predictive-search form {
  display: flex !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .search-modal__content,
  predictive-search,
  .predictive-search {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }
}

   Faz a página Copyrights & Trademarks parecer com Terms of Service
================================ */

body:has(a[href="/pages/copyrights-trademarks"]) main,
body:has(main) .content-for-layout {
  background: #050505 !important;
}

/* Aplica apenas à página Copyrights & Trademarks pelo URL */
body:has(.kp-footer-copyright-link) {
  background: #050505 !important;
}

/* Fallback mais direto por URL usando classe adicionada via script */
body.kp-page-copyrights .content-for-layout .section,
body.kp-page-copyrights .content-for-layout .page-width,
body.kp-page-copyrights .content-for-layout .main-page,
body.kp-page-copyrights .content-for-layout .rte,
body.kp-page-copyrights .content-for-layout .text-block {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Espaçamento lateral igual às páginas legais */
body.kp-page-copyrights .content-for-layout .section {
  grid-template-columns:
    minmax(24px, 1fr)
    minmax(0, 1280px)
    minmax(24px, 1fr) !important;
}

/* Caixa de conteúdo parecida com Terms of Service */
body.kp-page-copyrights .content-for-layout .rte,
body.kp-page-copyrights .content-for-layout .text-block {
  background: rgba(5, 5, 5, 0.55) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 22px !important;
  padding: 34px 30px !important;
  box-shadow:
    0 0 22px rgba(212, 175, 55, 0.12),
    inset 0 0 18px rgba(212, 175, 55, 0.04) !important;
}

/* Título principal */
body.kp-page-copyrights h1,
body.kp-page-copyrights .main-page-title {
  font-family: 'Germania One', serif !important;
  color: #d4af37 !important;
  text-align: center !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 8px rgba(212, 175, 55, 0.45),
    0 0 18px rgba(212, 175, 55, 0.22) !important;
  margin-bottom: 34px !important;
}

/* Texto igual ao estilo das políticas */
body.kp-page-copyrights .rte p,
body.kp-page-copyrights .rte li,
body.kp-page-copyrights .text-block p,
body.kp-page-copyrights .text-block li {
  color: rgba(255, 244, 210, 0.88) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* Links */
body.kp-page-copyrights .rte a,
body.kp-page-copyrights .text-block a {
  color: #d4af37 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  body.kp-page-copyrights .content-for-layout .section {
    grid-template-columns:
      minmax(16px, 1fr)
      minmax(0, 100%)
      minmax(16px, 1fr) !important;
  }

  body.kp-page-copyrights .content-for-layout .rte,
  body.kp-page-copyrights .content-for-layout .text-block {
    max-width: 100% !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  body.kp-page-copyrights .rte p,
  body.kp-page-copyrights .rte li,
  body.kp-page-copyrights .text-block p,
  body.kp-page-copyrights .text-block li {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}

/* ================================
   KP TREASURES - UNIFIED LEGAL / INFO PAGES STYLE
   Aplica o estilo da página Copyrights às páginas:
   About Us, Contact, Privacy, Shipping, Return & Refund, Terms.
================================ */

body.kp-page-styled,
body.kp-page-policy-styled {
  background: #050505 !important;
}

/* Fundo das páginas normais e legais */
body.kp-page-styled .content-for-layout,
body.kp-page-policy-styled .content-for-layout {
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 34%),
    #050505 !important;
}

/* Largura geral das páginas normais */
body.kp-page-styled .content-for-layout .section {
  --page-content-width: 1280px !important;
  --normal-content-width: 1280px !important;
  --normal-page-width: 1280px !important;
  --narrow-page-width: 1280px !important;
  --page-width: 1400px !important;
  grid-template-columns:
    minmax(24px, 1fr)
    minmax(0, min(1280px, calc(100vw - 48px)))
    minmax(24px, 1fr) !important;
}

body.kp-page-styled .content-for-layout .section > *,
body.kp-page-styled .content-for-layout .page-width,
body.kp-page-styled .content-for-layout .page-width-content,
body.kp-page-styled .content-for-layout .page-width-normal,
body.kp-page-styled .content-for-layout .main-page,
body.kp-page-styled .content-for-layout .section-content-wrapper,
body.kp-page-styled .content-for-layout .group-block,
body.kp-page-styled .content-for-layout .group-block-content,
body.kp-page-styled .content-for-layout .rte,
body.kp-page-styled .content-for-layout .text-block {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.kp-page-styled .content-for-layout .section > * {
  grid-column: 2 !important;
}

/* Card de conteúdo para páginas normais */
body.kp-page-styled .content-for-layout .rte,
body.kp-page-styled .content-for-layout .text-block {
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.10), transparent 42%),
    rgba(5, 5, 5, 0.66) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 22px !important;
  padding: 34px 30px !important;
  box-shadow:
    0 0 22px rgba(212, 175, 55, 0.12),
    inset 0 0 18px rgba(212, 175, 55, 0.04) !important;
}

/* Contact: mantém o formulário mais controlado dentro do card */
body.kp-page-contact .content-for-layout form {
  max-width: 920px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Páginas legais Shopify */
body.kp-page-policy-styled .shopify-policy__container {
  max-width: 1400px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 38%),
    transparent !important;
}

body.kp-page-policy-styled .shopify-policy__title,
body.kp-page-policy-styled .shopify-policy__body {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.kp-page-policy-styled .shopify-policy__body .rte {
  max-width: 1280px !important;
  width: 100% !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.10), transparent 42%),
    rgba(5, 5, 5, 0.66) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 22px !important;
  padding: 34px 30px !important;
  box-shadow:
    0 0 22px rgba(212, 175, 55, 0.12),
    inset 0 0 18px rgba(212, 175, 55, 0.04) !important;
}

/* Títulos */
body.kp-page-styled h1,
body.kp-page-styled .main-page-title,
body.kp-page-policy-styled .shopify-policy__title h1,
body.kp-page-policy-styled h1 {
  font-family: 'Germania One', serif !important;
  color: #d4af37 !important;
  text-align: center !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 8px rgba(212, 175, 55, 0.45),
    0 0 18px rgba(212, 175, 55, 0.22) !important;
  margin-bottom: 34px !important;
}

/* Texto */
body.kp-page-styled .rte p,
body.kp-page-styled .rte li,
body.kp-page-styled .text-block p,
body.kp-page-styled .text-block li,
body.kp-page-policy-styled .shopify-policy__body .rte p,
body.kp-page-policy-styled .shopify-policy__body .rte li {
  color: rgba(255, 244, 210, 0.88) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* Subtítulos/listas fortes */
body.kp-page-styled .rte strong,
body.kp-page-styled .text-block strong,
body.kp-page-policy-styled .shopify-policy__body .rte strong {
  color: #f2c75b !important;
}

/* Links */
body.kp-page-styled .rte a,
body.kp-page-styled .text-block a,
body.kp-page-policy-styled .shopify-policy__body .rte a {
  color: #d4af37 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

body.kp-page-styled .rte a:hover,
body.kp-page-styled .text-block a:hover,
body.kp-page-policy-styled .shopify-policy__body .rte a:hover {
  color: #f2c75b !important;
}

/* Contact icons continuam pequenos e lado a lado */
.kp-contact-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 24px auto 28px !important;
  flex-wrap: nowrap !important;
}

.kp-contact-icons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.14) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.kp-contact-icons a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35) !important;
}

.kp-contact-icons img {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  body.kp-page-styled .content-for-layout .section {
    grid-template-columns:
      minmax(16px, 1fr)
      minmax(0, 100%)
      minmax(16px, 1fr) !important;
  }

  body.kp-page-styled .content-for-layout .rte,
  body.kp-page-styled .content-for-layout .text-block,
  body.kp-page-policy-styled .shopify-policy__body .rte {
    max-width: 100% !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  body.kp-page-policy-styled .shopify-policy__container {
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.kp-page-policy-styled .shopify-policy__title,
  body.kp-page-policy-styled .shopify-policy__body,
  body.kp-page-policy-styled .shopify-policy__body .rte {
    max-width: 100% !important;
  }

  body.kp-page-styled .rte p,
  body.kp-page-styled .rte li,
  body.kp-page-styled .text-block p,
  body.kp-page-styled .text-block li,
  body.kp-page-policy-styled .shopify-policy__body .rte p,
  body.kp-page-policy-styled .shopify-policy__body .rte li {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .kp-contact-icons {
    gap: 12px !important;
  }

  .kp-contact-icons a,
  .kp-contact-icons img {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
}


/* ================================
   KP TREASURES - SAFE LANGUAGE DROPDOWN
   Position: top bar right side, with socials. Does not touch drawer/menu close button.
================================ */
.kp-top-bar__socials {
  position: relative !important;
  overflow: visible !important;
}

.kp-language-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20 !important;
}

.kp-language-dropdown summary {
  list-style: none !important;
  cursor: pointer !important;
  min-height: 29px !important;
  height: 29px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(212, 175, 55, 0.48) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.34) !important;
  color: #d4af37 !important;
  box-shadow:
    inset 0 0 8px rgba(212, 175, 55, 0.10),
    0 0 8px rgba(212, 175, 55, 0.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: 'Germania One', serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.kp-language-dropdown summary::-webkit-details-marker {
  display: none !important;
}

.kp-language-dropdown summary::marker {
  content: '' !important;
}

.kp-language-dropdown[open] summary,
.kp-language-dropdown summary:hover {
  color: #fff1b8 !important;
  border-color: rgba(255, 225, 120, 0.9) !important;
  background: rgba(212, 175, 55, 0.14) !important;
  box-shadow:
    0 0 14px rgba(212, 175, 55, 0.46),
    inset 0 0 10px rgba(212, 175, 55, 0.16) !important;
}

.kp-language-dropdown__current,
.kp-language-dropdown__caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.kp-language-dropdown__caret {
  font-size: 10px !important;
  transform: translateY(-1px) !important;
}

.kp-language-dropdown[open] .kp-language-dropdown__caret {
  transform: translateY(-1px) rotate(180deg) !important;
}

.kp-language-dropdown__panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 144px !important;
  padding: 7px !important;
  border: 1px solid rgba(212, 175, 55, 0.62) !important;
  border-radius: 14px !important;
  background: #050505 !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.52),
    0 0 18px rgba(212, 175, 55, 0.22) !important;
  z-index: 50 !important;
}

.kp-language-dropdown__form {
  display: grid !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 !important;
}

.kp-language-dropdown__option {
  appearance: none !important;
  width: 100% !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #d4af37 !important;
  font-family: 'Germania One', serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer !important;
}

.kp-language-dropdown__option:hover,
.kp-language-dropdown__option.is-active {
  color: #fff1b8 !important;
  border-color: rgba(212, 175, 55, 0.52) !important;
  background: rgba(212, 175, 55, 0.12) !important;
}

/* Keep the drawer/menu close area above everything if the menu is open. */
#Details-menu-drawer-container[open],
#Details-menu-drawer-container[open] summary.header__icon--menu {
  position: relative !important;
  z-index: 99999 !important;
}

@media screen and (max-width: 749px) {
  .kp-top-bar__socials {
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .kp-language-dropdown summary {
    min-height: 25px !important;
    height: 25px !important;
    padding: 6px 9px !important;
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
    gap: 4px !important;
  }

  .kp-language-dropdown__caret {
    font-size: 9px !important;
  }

  .kp-language-dropdown__panel {
    right: 50% !important;
    transform: translateX(50%) !important;
    min-width: 132px !important;
    top: calc(100% + 7px) !important;
    padding: 6px !important;
  }

  .kp-language-dropdown__option {
    min-height: 28px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }
}

/* ================================
   KP TREASURES - LANGUAGE DROPDOWN ABOVE HEADER FIX
   Fix: keep language dropdown panel above the header/logo row.
   Paste at the very end of assets/base.css.
================================ */

#header-group,
#header-group > .kp-top-bar,
.kp-top-bar,
.kp-top-bar__inner,
.kp-top-bar__socials,
.kp-language-dropdown {
  overflow: visible !important;
}

#header-group {
  position: relative !important;
  z-index: 999900 !important;
}

#header-group > .kp-top-bar,
.kp-top-bar {
  position: relative !important;
  z-index: 1000000 !important;
  isolation: isolate !important;
}

.kp-top-bar__inner,
.kp-top-bar__socials,
.kp-language-dropdown {
  position: relative !important;
  z-index: 1000010 !important;
}

.kp-language-dropdown[open] {
  z-index: 2147483000 !important;
}

.kp-language-dropdown[open] summary {
  position: relative !important;
  z-index: 2147483001 !important;
}

.kp-language-dropdown__panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 2147483002 !important;
  isolation: isolate !important;
  transform: none !important;
  background: #050505 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep the Shopify header/logo/action row below the custom top-bar dropdown. */
#header-group > .shopify-section,
#header-group > .header-section,
#header-component,
.header-section,
.header,
.header__row,
.header__columns {
  z-index: 10 !important;
}

/* But keep the drawer/menu close area usable when the drawer is open. */
#Details-menu-drawer-container[open],
#Details-menu-drawer-container[open] summary.header__icon--menu {
  position: relative !important;
  z-index: 2147483005 !important;
}

@media screen and (max-width: 749px) {
  .kp-language-dropdown__panel {
    top: calc(100% + 7px) !important;
    right: 0 !important;
    transform: none !important;
    z-index: 2147483002 !important;
  }
}


/* ================================
   KP TREASURES - MENU CLOSE X FINAL FIX
   Keeps the language dropdown above the header normally,
   but brings the menu close button above everything only while the drawer is open.
================================ */

/* When the drawer is open, raise only the header/menu layer above the top bar. */
body:has(#Details-menu-drawer-container[open]) #header-group > .shopify-section,
body:has(#Details-menu-drawer-container[open]) #header-group > .header-section,
body:has(#Details-menu-drawer-container[open]) #header-component,
body:has(#Details-menu-drawer-container[open]) .header-section,
body:has(#Details-menu-drawer-container[open]) .header,
body:has(#Details-menu-drawer-container[open]) .header__row,
body:has(#Details-menu-drawer-container[open]) .header__columns {
  position: relative !important;
  z-index: 2147483004 !important;
  overflow: visible !important;
}

/* Keep the top bar/dropdown below the open menu close button only while the menu is open. */
body:has(#Details-menu-drawer-container[open]) .kp-top-bar,
body:has(#Details-menu-drawer-container[open]) .kp-top-bar__inner,
body:has(#Details-menu-drawer-container[open]) .kp-top-bar__socials,
body:has(#Details-menu-drawer-container[open]) .kp-language-dropdown,
body:has(#Details-menu-drawer-container[open]) .kp-language-dropdown__panel {
  z-index: 1000000 !important;
}

/* Keep the menu button clickable and visible. Do not move the drawer layout. */
#Details-menu-drawer-container[open],
#Details-menu-drawer-container[open] summary.header__icon--menu {
  position: relative !important;
  z-index: 2147483006 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Hide the ship icon while the drawer is open. */
#Details-menu-drawer-container[open] summary.header__icon--menu::before {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Draw the golden close X without changing the menu/drawer dimensions. */
#Details-menu-drawer-container[open] summary.header__icon--menu::after {
  content: "×" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #d4af37 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.75) !important;
  z-index: 2147483007 !important;
  pointer-events: none !important;
}

@media screen and (max-width: 749px) {
  #Details-menu-drawer-container[open] summary.header__icon--menu::after {
    font-size: 38px !important;
  }
}
/* KP TREASURES - Hide native language selector inside drawer/menu */
#Details-menu-drawer-container localization-form-component,
#Details-menu-drawer-container .localization-form,
#Details-menu-drawer-container .language-selector,
#Details-menu-drawer-container .localization-form__select,
.menu-drawer localization-form-component,
.menu-drawer .localization-form,
.menu-drawer .language-selector,
.menu-drawer .localization-form__select {
  display: none !important;
}

/* ================================
   KP TREASURES - top bar shipping country note
   Main message + smaller "within Switzerland" line
================================ */

:root {
  --kp-top-bar-height: 52px;
}

.kp-top-bar__text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}

.kp-top-bar__text-main,
.kp-top-bar__text-sub {
  display: block !important;
  font-family: 'Germania One', serif !important;
  text-transform: uppercase !important;
  color: #d4af37 !important;
  text-align: center !important;
}

.kp-top-bar__text-main {
  font-size: 21px !important;
  letter-spacing: 1.4px !important;
  white-space: nowrap !important;
}

.kp-top-bar__text-sub {
  font-size: 11px !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  opacity: 0.92 !important;
  white-space: nowrap !important;
}

@media screen and (max-width: 749px) {
  :root {
    --kp-top-bar-height: 76px;
  }

  .kp-top-bar__text {
    gap: 1px !important;
  }

  .kp-top-bar__text-main {
    font-size: 15px !important;
    letter-spacing: 0.8px !important;
    white-space: normal !important;
  }

  .kp-top-bar__text-sub {
    font-size: 9px !important;
    letter-spacing: 0.7px !important;
  }
}



/* ================================
   KP TREASURES - TOP BAR CURRENCY SELECTOR + REMOVE DRAWER LOCALIZATION
   Adds CHF/EUR selector beside language selector and removes the native
   Shopify region/language selector from the drawer/menu.
================================ */

.kp-currency-dropdown {
  margin-left: 2px !important;
}

.kp-currency-dropdown summary {
  min-width: 70px !important;
}

.kp-currency-dropdown__panel {
  min-width: 96px !important;
}

.kp-currency-dropdown__option {
  min-height: 30px !important;
}

/* Ensure both top-bar dropdowns stay aligned and above the header. */
.kp-top-bar__socials,
.kp-language-dropdown,
.kp-currency-dropdown {
  overflow: visible !important;
}

.kp-currency-dropdown[open] {
  z-index: 2147483000 !important;
}

.kp-currency-dropdown[open] summary {
  position: relative !important;
  z-index: 2147483001 !important;
}

.kp-currency-dropdown__panel {
  z-index: 2147483002 !important;
}

/* Remove Shopify's native region/language selector from the drawer/menu.
   The custom language selector remains in the top bar. */
#Details-menu-drawer-container localization-form-component,
#Details-menu-drawer-container .localization-form,
#Details-menu-drawer-container .dropdown-localization,
#Details-menu-drawer-container .menu-drawer__localization,
#Details-menu-drawer-container [class*="localization"],
#Details-menu-drawer-container [class*="country-selector"],
#Details-menu-drawer-container [class*="market-selector"],
#header-component .menu-drawer localization-form-component,
#header-component .menu-drawer .localization-form,
#header-component .menu-drawer .dropdown-localization,
#header-component .menu-drawer .menu-drawer__localization,
#header-component .menu-drawer [class*="localization"],
#header-component .menu-drawer [class*="country-selector"],
#header-component .menu-drawer [class*="market-selector"] {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .kp-currency-dropdown summary {
    min-width: 55px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .kp-currency-dropdown__panel {
    min-width: 86px !important;
  }
}