/** Shopify CDN: Minification failed

Line 3028:9 Expected identifier but found whitespace
Line 3028:10 Unexpected "11px"

**/
* {
  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-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --submenu-animation-speed: 360ms;
}

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

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: auto;
    overflow: visible;
  }
}

html[scroll-lock],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-right var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: auto;
    overflow-y: visible;
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }
}

.page-wrapper--drawer-open {
  margin-right: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

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

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

.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;
  cursor: pointer;
}

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

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* 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. Gutters grow to the device safe-area insets (viewport-fit=cover)
   so section backgrounds bleed edge-to-edge while content stays clear of the notch; taking the
   larger of both insets keeps the centered page grid symmetric. */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: max(16px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: max(40px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

.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 {
  /* 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);
  background-color: var(--color-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;
  }
}

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

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

.flip-x {
  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;
}

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

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

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

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

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

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

@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 {
  color: currentcolor;
  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 {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* 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: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

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

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

/* Buttons */
.button,
.button-secondary,
.button-custom,
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-focus-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: rgb(var(--color-input-text-rgb) / var(--opacity-muted-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-focus-outline-color: var(--color-primary-button-focus-outline);
}

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

.button-custom {
  --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-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --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);
}

/* 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: var(--color-foreground);
  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;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

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

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

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

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;

  /* Keep the fixed close button clear of the status bar and right-side notch (viewport-fit=cover) */
  top: max(var(--margin-lg), var(--safe-area-inset-top, 0px));
  right: max(var(--margin-lg), var(--safe-area-inset-right, 0px));
  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;
}

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

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

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

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.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:focus {
  box-shadow: var(--input-box-shadow-focus);
}

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

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

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

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

slideshow-container[animate-arrows]:hover > slideshow-arrows .slideshow-control,
slideshow-component:focus-within > slideshow-container[animate-arrows] > 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__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));
  }
}

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

.group-block:has(> video-background-component) {
  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);
}

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

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

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    .spacing-style {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}

/* ==========================================================================
   % Arabica Minimalist Design System & Global Animated Buttons
   ========================================================================== */
:root {
  --color-background: #0B0A0A;
  --color-foreground: #FFFFFF;
}

body {
  background-color: #0B0A0A !important;
  color: #FFFFFF !important;
  letter-spacing: 0.02em;
}

/* Minimalist Button Styling */
.button:not(.button-unstyled):not(.close-button):not(.skip-to-content-link):not(.cart-items__empty-button):not(.predictive-search__search-button):not(.predictive-search__close-modal-button),
.button-secondary:not(.button-unstyled):not(.close-button):not(.skip-to-content-link):not(.cart-items__empty-button),
.button-primary:not(.button-unstyled):not(.close-button):not(.skip-to-content-link):not(.cart-items__empty-button),
a.button:not(.button-unstyled):not(.skip-to-content-link):not(.cart-items__empty-button),
a.button-secondary:not(.button-unstyled):not(.skip-to-content-link):not(.cart-items__empty-button),
button.button:not(.button-unstyled):not(.close-button):not(.skip-to-content-link):not(.predictive-search__search-button):not(.predictive-search__close-modal-button),
.product-form__submit,
.quick-add__button {
  position: relative;
  overflow: hidden;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 500;
  padding: 10px 22px !important;
  border-radius: 9999px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: globalButtonPulse 3.5s ease-in-out infinite;
}

.button-secondary:not(.button-unstyled):not(.skip-to-content-link):not(.cart-items__empty-button),
a.button-secondary:not(.button-unstyled):not(.skip-to-content-link):not(.cart-items__empty-button) {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

.button-primary:not(.button-unstyled),
a.button-primary:not(.button-unstyled),
.product-form__submit {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: 1px solid #000000 !important;
}

.button:not(.button-unstyled):not(.close-button)::after,
.button-secondary:not(.button-unstyled):not(.close-button)::after,
.button-primary:not(.button-unstyled):not(.close-button)::after,
a.button:not(.button-unstyled)::after,
a.button-secondary:not(.button-unstyled)::after,
button.button:not(.button-unstyled)::after,
.product-form__submit::after,
.quick-add__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-20deg);
  animation: globalButtonShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

.button-secondary:not(.button-unstyled):hover,
a.button-secondary:not(.button-unstyled):hover {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.button-primary:not(.button-unstyled):hover,
a.button-primary:not(.button-unstyled):hover,
.product-form__submit:hover {
  background-color: #222222 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

@keyframes globalButtonPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
    transform: scale(1.01);
  }
}

@keyframes globalButtonShimmer {
  0% {
    left: -100%;
  }
  28%, 100% {
    left: 160%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button-secondary,
  .button-primary,
  .product-form__submit,
  .quick-add__button {
    animation: none !important;
  }
  .button::after,
  .button-secondary::after,
  .button-primary::after,
  .product-form__submit::after,
  .quick-add__button::after {
    display: none !important;
  }
}

/* Minimalist % Arabica Product Cards & Typography */
.section-resource-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #FFFFFF !important;
}

.section-resource-list__header {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}

.section-resource-list__header h2,
.section-resource-list__header h3 {
  font-size: 1.15rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 500;
  color: #000000;
}

.section-resource-list .resource-list--grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  margin-inline: auto !important;
  max-width: 1200px !important;
  gap: 36px !important;
}

.section-resource-list .resource-list__item {
  flex: 0 1 480px !important;
  width: 100% !important;
  max-width: 480px !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.section-resource-list .product-card {
  width: 100% !important;
  max-width: 480px !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background-color: #FFFFFF !important;
  transition: transform 0.3s ease;
}

.section-resource-list .product-card:hover {
  transform: translateY(-4px);
}

.section-resource-list .product-card-gallery {
  width: 100% !important;
  max-width: 480px !important;
  margin-inline: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 6px;
  overflow: hidden;
  background: #FAFAFA;
}

.section-resource-list .product-card-gallery img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  margin-inline: auto !important;
}

.section-resource-list .product-card [role="heading"],
.section-resource-list .product-card a {
  font-size: 1.05rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #000000 !important;
  text-decoration: none !important;
  text-align: center !important;
}

.section-resource-list .product-card .price {
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  color: #444444 !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin-inline: auto !important;
}

.section-resource-list .product-card product-swatches,
.section-resource-list .product-card .swatches-container,
.section-resource-list .product-card .product-swatches__container {
  display: flex !important;
  justify-content: center !important;
  margin-inline: auto !important;
}

/* Minimalist Eyebrows & Paragraphs */
.section p {
  font-size: 0.85rem;
  line-height: 1.65;
  color: #222222;
}

.section strong {
  color: #000000;
  font-weight: 600;
}

/* Hero Section High-Contrast White Text & Button */
.hero {
  position: relative;
}

.hero h1,
.hero [role="heading"],
.hero .text-block--text_m9AcWC,
.hero .text-block--text_m9AcWC h1 {
  font-family: "Bodoni Moda", "Didot", "Bodoni MT", "Instrument Serif", "Cinzel", "Playfair Display", Georgia, serif !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  margin: 0 !important;
}

@media screen and (max-width: 749px) {
  .hero h1,
  .hero [role="heading"],
  .hero .text-block--text_m9AcWC,
  .hero .text-block--text_m9AcWC h1 {
    font-size: 15px !important;
    letter-spacing: 0.08em !important;
  }
}

.hero h2,
.hero p,
.hero .text {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.hero .button-secondary,
.hero a.button-secondary,
.hero .button,
.hero a.button {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero .button-secondary:hover,
.hero a.button-secondary:hover,
.hero .button:hover,
.hero a.button:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

/* Minimalist Social Icons */
.social-icons__wrapper {
  display: flex;
  gap: 12px !important;
  align-items: center;
  flex-wrap: wrap;
}

.social-icons__icon-wrapper a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #E5E5E5;
  background-color: #FFFFFF;
  color: #000000;
  transition: all 0.25s ease;
  text-decoration: none;
  box-shadow: none !important;
  outline: none !important;
}

.social-icons__icon-wrapper a:hover,
.social-icons__icon-wrapper a:focus,
.social-icons__icon-wrapper a:active {
  background-color: #000000;
  color: #FFFFFF;
  border-color: #000000;
  box-shadow: none !important;
  outline: none !important;
}

.social-icons__icon-wrapper svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  filter: none !important;
}

/* =========================================================
   CORAZON BLANCO: GLASSY BLACK FROSTED HEADER SYSTEM (All pages)
   ========================================================= */
#header-group,
.header-section,
body.template-index #header-group,
body.template-index .header-section {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: transparent !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none !important;
  border: none !important;
}

.site-header,
#header-component {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  transition: background 0.25s ease, background-color 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease !important;
}

/* =========================================================
   DE LA TIERRA AL CORAZÓN: DARK AT TOP / SEE-THROUGH ON SCROLL
   ========================================================= */
/* Ensure pure black foundation across the entire page */
body.template-story,
body.template-story #MainContent,
body.template-story .page-wrapper,
body:has(.cb-story-page),
body:has(.cb-story-page) #MainContent,
body:has(.cb-story-page) .page-wrapper,
body[class*="de-la-tierra-al-corazon"],
body[class*="de-la-tierra-al-corazon"] #MainContent,
body[class*="de-la-tierra-al-corazon"] .page-wrapper {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* 1. At the very top (scrolled all the way up): Solid Dark Header (never appears light) */
body:has(.cb-story-page) .site-header:not(.header--is-scrolled),
body[class*="de-la-tierra-al-corazon"] .site-header:not(.header--is-scrolled),
body.template-story .site-header:not(.header--is-scrolled),
html:not(.is-scrolled) body:has(.cb-story-page) .site-header,
html:not(.is-scrolled) body[class*="de-la-tierra-al-corazon"] .site-header {
  background: #000000 !important;
  background-color: #000000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 2. When scrolling: See-through frosted glass matching Café section */
body:has(.cb-story-page) .site-header.header--is-scrolled,
body:has(.cb-story-page) .site-header[data-scrolled="true"],
html.is-scrolled body:has(.cb-story-page) .site-header,
body[class*="de-la-tierra-al-corazon"] .site-header.header--is-scrolled,
body[class*="de-la-tierra-al-corazon"] .site-header[data-scrolled="true"],
html.is-scrolled body[class*="de-la-tierra-al-corazon"] .site-header {
  background: rgba(0, 0, 0, 0.65) !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}



#header-component .header__underlay,
#header-component .header__underlay-closed,
#header-component .header__underlay-open,
.header__underlay,
.header__underlay-closed,
.header__underlay-open {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Ensure hero section sits at the very top of the viewport with 0 gap */
html,
body,
.page-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.template-index,
html.template-index {
  --header-group-height: 0px !important;
  --header-height: 0px !important;
  --transparent-header-offset-boolean: 0 !important;
  background-color: #000000 !important;
}

body.template-index .content-for-layout,
.template-index #MainContent,
#MainContent {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.template-index .content-for-layout > .shopify-section:first-child,
.template-index #MainContent > .shopify-section:first-child,
.template-index .shopify-section:first-child .hero-wrapper,
.template-index .shopify-section:first-child .hero,
.template-index .hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
  --hero-height-offset: 0px !important;
  --section-height-offset: 0px !important;
}

.hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: transparent !important;
}

.hero__container,
.hero .hero__container,
.template-index .hero__container {
  --padding-block-start: 0px !important;
  --padding-block: 0px !important;
  --section-top-offset: 0px !important;
  padding-top: 0 !important;
  padding-block-start: 0 !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  border-top: none !important;
}

.template-index .shopify-section:first-child,
.template-index .hero,
.template-index .hero__container,
.template-index .hero__media-grid,
.template-index .hero__media,
.template-index .hero__media-wrapper,
.template-index .hero__media-wrapper--desktop,
.template-index .hero__media-wrapper--mobile,
.template-index .hero picture,
.template-index .hero img {
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
}

.template-index .hero__media-grid {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

.template-index .hero,
.template-index .hero__container {
  width: 100% !important;
}

@media screen and (min-width: 750px) {
  .template-index .hero,
  .template-index .hero__container {
    aspect-ratio: 16 / 9 !important;
    min-height: auto !important;
    max-height: 90vh !important;
  }
}

/* Mobile Hero: Stable height that does not jump/snap when address bar collapses */
@media screen and (max-width: 749px) {
  .template-index .hero,
  .template-index .hero__container,
  .template-index .shopify-section:first-child .hero-wrapper,
  .template-index .shopify-section:first-child .hero {
    height: calc(100svh - 48px) !important;
    min-height: calc(100svh - 48px) !important;
    max-height: calc(100svh - 48px) !important;
    aspect-ratio: unset !important;
  }

  .template-index .hero__media-grid {
    height: 100% !important;
  }

  .template-index .hero__media,
  .template-index .hero picture img,
  .template-index .hero img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

.template-index .hero__media,
.template-index .hero picture img,
.template-index .hero img {
  object-fit: cover !important;
  object-position: center center !important;
  height: 100% !important;
  width: 100% !important;
}

/* =========================================================
   EDITORIAL MAIN HEADER NAVIGATION & LAYOUT
   ========================================================= */

/* Header Layout: Logo Left & Actions Right */
.header__columns {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.header__column--left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
}

.header__column--center {
  display: none !important;
}

.header__column--right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* Hide desktop inline links in favor of the top-right sliding menu button */
.header-menu,
#header-component[data-menu-style='menu'] .header-menu {
  display: none !important;
}

/* Top-Right Sliding Menu Button */
.header__drawer,
#header-component .header__drawer,
#header-component[data-menu-style='menu'] .header__drawer,
#header-component[data-menu-style='drawer'] .header__drawer {
  display: flex !important;
  align-items: center !important;
  min-height: auto !important;
  order: 99 !important; /* Always far right */
}

.menu-drawer-container .header__icon--summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  list-style: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.menu-drawer-container .header__icon--summary::-webkit-details-marker {
  display: none !important;
}

.menu-drawer-container .header__icon--summary:hover {
  opacity: 0.75 !important;
}

.header__menu-btn-label {
  font-family: var(--font-body--family, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.header-drawer-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* Header Utility Action Icons (Search, Account, Cart) */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.header-actions__action,
.header__column--right button,
.header__column--right a,
.search-modal__button,
.header-actions__cart-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  cursor: pointer !important;
}

.header-actions__action:hover,
.header__column--right button:hover,
.header__column--right a:hover,
.search-modal__button:hover,
.header-actions__cart-icon:hover {
  opacity: 0.65 !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   3. ONYX COFFEE LAB INSPIRED EDITORIAL MENU OVERLAY
   ========================================================= */
@keyframes onyxItemEntrance {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    filter: blur(4px);
  }
  60% {
    opacity: 0.95;
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* Slideable Drawer Menu Panel - Compact Clean Dropdown with High Definition Physics Transition */
#header-component .menu-drawer,
.menu-drawer-container .menu-drawer,
.menu-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: min(440px, 100vw) !important;
  max-width: 440px !important;
  height: auto !important;
  max-height: 85vh !important;
  min-height: auto !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-bottom: 1px solid #EAEAEA !important;
  border-left: 1px solid #EAEAEA !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  filter: none !important;
  padding: 16px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(-100%) scale(0.97) !important;
  transform-origin: top right !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow-y: auto !important;
  /* Smooth, snappy exit animation */
  transition: transform 0.42s cubic-bezier(0.32, 0, 0.67, 0),
              opacity 0.35s cubic-bezier(0.32, 0, 0.67, 0),
              visibility 0.42s !important;
  will-change: transform, opacity !important;
  z-index: 100000 !important;
}

@media (max-width: 480px) {
  #header-component .menu-drawer,
  .menu-drawer-container .menu-drawer,
  .menu-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: none !important;
    padding: 14px 18px !important;
  }
}

/* Open State - Smooth Luxurious Entrance */
#header-component details.menu-open .menu-drawer,
#header-component .menu-open > .menu-drawer,
.menu-drawer-container details.menu-open .menu-drawer,
details.menu-open > .menu-drawer,
details.menu-open .menu-drawer,
.menu-open > .menu-drawer {
  transform: translateY(0) scale(1) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  /* Premium spring ease on open */
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hide / disable any dark backdrop and underlay shadow */
:root {
  --site-header-height: 52px;
}

@media screen and (max-width: 749px) {
  :root {
    --site-header-height: 48px;
  }
}

/* Glassy Frosted Overlay Backdrop - sits beneath the header */
#header-component .menu-drawer__backdrop,
.menu-drawer-container .menu-drawer__backdrop,
.menu-drawer__backdrop {
  display: block !important;
  position: fixed !important;
  top: var(--site-header-height, 52px) !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--site-header-height, 52px)) !important;
  height: calc(100dvh - var(--site-header-height, 52px)) !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 994 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease !important;
}

details.menu-open .menu-drawer__backdrop,
details[open] .menu-drawer__backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Glassy Black Header Drawer - Slides DOWN smoothly from behind/beneath the Header */
#header-component .menu-drawer,
.menu-drawer {
  position: fixed !important;
  top: var(--site-header-height, 52px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  max-height: calc(100vh - var(--site-header-height, 52px)) !important;
  max-height: calc(100dvh - var(--site-header-height, 52px)) !important;
  background: rgba(0, 0, 0, 0.86) !important;
  background-color: rgba(0, 0, 0, 0.86) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  z-index: 996 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 20px 24px 28px 24px !important;
  transform: translate3d(0, -100%, 0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  will-change: transform, opacity;
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.32s ease,
              visibility 0.44s ease !important;
}

details.menu-open > .menu-drawer,
details[open] > .menu-drawer {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Onyx Drawer Inner Container */
.onyx-drawer__container {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* Topbar inside Drawer */
.onyx-drawer__topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-bottom: 14px !important;
}

.onyx-drawer__brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.onyx-drawer__logo-img {
  height: 28px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: none !important;
}

.onyx-drawer__brand-sub {
  font-family: var(--font-body--family, sans-serif) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding-left: 12px !important;
}

@media (max-width: 480px) {
  .onyx-drawer__brand-sub {
    display: block !important;
    font-size: 8.5px !important;
    letter-spacing: 0.12em !important;
  }
}

.onyx-drawer__close-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  color: #FFFFFF !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.onyx-drawer__close-label {
  font-family: var(--font-body--family, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  transition: color 0.2s ease !important;
}

.onyx-drawer__close-button svg {
  width: 11px !important;
  height: 11px !important;
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.onyx-drawer__close-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}

.onyx-drawer__close-button:hover svg {
  transform: rotate(90deg) !important;
}

/* Primary Navigation in Drawer */
.onyx-drawer__grid {
  display: block !important;
  width: 100% !important;
}

.onyx-drawer__nav {
  width: 100% !important;
}

.onyx-drawer__col-header {
  font-family: var(--font-body--family, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 8px !important;
}

.onyx-drawer__menu-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.onyx-drawer__menu-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}

.onyx-drawer__menu-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 8px !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.onyx-drawer__link-num {
  font-family: var(--font-body--family, monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.1em !important;
  transition: color 0.2s ease !important;
}

.onyx-drawer__link-text {
  font-family: var(--font-heading--family, 'Instrument Serif', Georgia, serif) !important;
  font-size: clamp(18px, 4vw, 24px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  color: #FFFFFF !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
}

.onyx-drawer__link-arrow {
  font-size: 16px !important;
  margin-left: auto !important;
  color: #FFFFFF !important;
  opacity: 0.3 !important;
  transform: translateX(-6px) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.onyx-drawer__menu-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.onyx-drawer__menu-link:hover .onyx-drawer__link-text {
  transform: translateX(6px) !important;
  color: #FFFFFF !important;
}

.onyx-drawer__menu-link:hover .onyx-drawer__link-num {
  color: #FFFFFF !important;
}

.onyx-drawer__menu-link:hover .onyx-drawer__link-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.onyx-drawer__menu-link--active {
  background: rgba(255, 255, 255, 0.08) !important;
}

.onyx-drawer__menu-link--active .onyx-drawer__link-num,
.onyx-drawer__menu-link--active .onyx-drawer__link-text,
.onyx-drawer__menu-link--active .onyx-drawer__link-arrow {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Onyx Drawer Footer */
.onyx-drawer__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 14px !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}

.onyx-drawer__footer-socials {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.onyx-drawer__socials-label {
  font-family: var(--font-body--family, sans-serif) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.onyx-drawer__tagline {
  font-family: var(--font-body--family, sans-serif) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Staggered Item Transition System (fires reliably on EVERY open & close) */
.onyx-drawer__topbar,
.onyx-drawer__menu-item,
.onyx-drawer__footer {
  opacity: 0 !important;
  transform: translate3d(0, -10px, 0) !important;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.32s ease !important;
  will-change: transform, opacity;
}

details.menu-open .onyx-drawer__topbar,
details[open].menu-open .onyx-drawer__topbar {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 0.04s !important;
}

details.menu-open .onyx-drawer__menu-item:nth-child(1),
details[open].menu-open .onyx-drawer__menu-item:nth-child(1) {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 0.08s !important;
}

details.menu-open .onyx-drawer__menu-item:nth-child(2),
details[open].menu-open .onyx-drawer__menu-item:nth-child(2) {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 0.12s !important;
}

details.menu-open .onyx-drawer__menu-item:nth-child(3),
details[open].menu-open .onyx-drawer__menu-item:nth-child(3) {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 0.16s !important;
}

details.menu-open .onyx-drawer__menu-item:nth-child(4),
details[open].menu-open .onyx-drawer__menu-item:nth-child(4) {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 0.20s !important;
}

details.menu-open .onyx-drawer__footer,
details[open].menu-open .onyx-drawer__footer {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 0.24s !important;
}

/* Fast reset when closing */
details:not(.menu-open) .onyx-drawer__topbar,
details:not(.menu-open) .onyx-drawer__menu-item,
details:not(.menu-open) .onyx-drawer__footer {
  opacity: 0 !important;
  transform: translate3d(0, -10px, 0) !important;
  transition-delay: 0s !important;
  transition-duration: 0.2s !important;
}

/* Enforce crisp white text in menu drawer */
#header-component .menu-drawer,
#header-component .menu-drawer *:not(.menu-drawer__social-links-row a *),
.menu-drawer,
.menu-drawer *:not(.menu-drawer__social-links-row a *) {
  color: #FFFFFF;
}

.menu-drawer__social-links-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.menu-drawer__social-links-row a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.menu-drawer__social-links-row a:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
  transform: translateY(-1px) scale(1.08) !important;
}

.menu-drawer__social-links-row svg {
  width: 11px !important;
  height: 11px !important;
  fill: currentColor !important;
}
  height: 11px !important;
  fill: currentColor !important;
}


/* =========================================================
   3. HIGH-END DARK EDITORIAL FOOTER & NEWSLETTER STYLING
   ========================================================= */
footer,
.footer-group,
.footer-utilities,
.section-background.color-custom-footer,
.section-background.color-custom-utilities {
  background-color: #111111 !important;
  color: #FFFFFF !important;
}

footer .section,
footer .section-background,
footer .footer-content,
footer .utilities {
  background-color: #111111 !important;
}

/* Base text color inside footer */
footer,
footer p,
footer span,
footer div,
footer rte-formatter,
footer .text-block,
footer li,
footer .details-content {
  color: #AAAAAA !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* Headings & Uppercase Section Titles */
footer strong,
footer b,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  font-family: var(--font-body--family) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  display: inline-block !important;
  margin-bottom: 2px !important;
  text-align: center !important;
}

/* Brand Title (1st column) */
footer .footer-content > :first-child strong,
footer .footer-content > :first-child h3,
footer .footer-brand-title {
  font-family: var(--font-heading--family, 'Bodoni Moda', 'Instrument Serif', serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* Spread-out & Ultra-Compact Footer Columns */
#footer-group,
footer,
.footer,
.section-footer {
  padding-block: 8px 4px !important;
  text-align: center !important;
  border: none !important;
}

footer .footer-content,
#footer-group .footer-content,
.footer .footer-content {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  width: auto !important;
  max-width: 650px !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding-inline: 16px !important;
}

footer .footer-content > .group-block,
#footer-group .footer-content > .group-block,
.footer .footer-content > .group-block {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

footer .group-block,
footer .group-block-content,
#footer-group .group-block,
#footer-group .group-block-content {
  align-items: center !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Navigation Lists & Links */
footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  text-align: center !important;
}

footer ul li {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

footer a,
footer a:link,
footer a:visited,
footer .menu-list__link,
footer .details-content a {
  font-size: 10px !important;
  color: #AAAAAA !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
  display: inline-block !important;
  text-align: center !important;
}

footer a:hover,
footer a:focus,
footer .menu-list__link:hover {
  color: #FFFFFF !important;
}

/* Footer Brand Logo */
.footer__brand-logo-link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  margin: 0 auto 2px auto !important;
}

.footer__brand-logo-img {
  width: 48px !important;
  max-width: 48px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  filter: none !important;
  transition: opacity 0.2s ease !important;
}

.footer__brand-logo-img:hover {
  opacity: 0.8 !important;
}

/* Dark Footer Social Icons */
footer .social-icons__wrapper {
  margin: 2px auto 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
  align-items: center !important;
}

footer .social-icons__icon-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer .social-icons__icon-wrapper a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  box-shadow: none !important;
  outline: none !important;
}

footer .social-icons__icon-wrapper a:hover,
footer .social-icons__icon-wrapper a:focus {
  background-color: #FFFFFF !important;
  color: #111111 !important;
  border-color: #FFFFFF !important;
}

footer .social-icons__icon-wrapper svg,
footer .social-icons__icon {
  width: 11px !important;
  height: 11px !important;
  fill: currentColor !important;
  color: inherit !important;
  display: block !important;
  margin: auto !important;
}

footer .social-icons__icon-label {
  display: none !important;
}

/* Minimal Sub-Footer / Copyright Bar - Completely Seamless No Line */
footer .footer-utilities,
footer .utilities,
#footer-group .footer-utilities,
#footer-group .utilities {
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  background-color: #111111 !important;
  padding-block: 2px 6px !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

footer hr,
footer .divider,
footer [class*="divider"] {
  display: none !important;
}

footer .utilities a,
footer .utilities button,
footer .footer-utilities__text,
footer .footer-utilities__group-copyright {
  color: #666666 !important;
  font-size: 9px !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
}

footer .utilities a:hover,
footer .utilities button:hover {
  color: #FFFFFF !important;
}

/* Mobile-Specific: Small, Centered, Ultra-Compact & Short Footer */
@media screen and (max-width: 749px) {
  #footer-group,
  footer,
  .footer,
  .section-footer {
    padding-block: 6px 4px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  footer .footer-content,
  #footer-group .footer-content,
  .footer .footer-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 14px !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
    max-width: 360px !important;
    padding-inline: 12px !important;
  }

  .footer__brand-logo-img {
    width: 34px !important;
    max-width: 34px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  footer p,
  footer span,
  footer div,
  footer rte-formatter,
  footer .text-block,
  footer li {
    font-size: 9px !important;
    text-align: center !important;
  }

  footer .utilities,
  footer .footer-utilities {
    padding-block: 2px 6px !important;
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 auto !important;
  }
}

/* =========================================================
   4. STATIC BRAND BANNER / MARQUEE (NO SLIDING ANIMATION)
   ========================================================= */
marquee-component,
.marquee {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #F7F7F7 !important;
  border-top: 1px solid #EEEEEE !important;
  border-bottom: 1px solid #EEEEEE !important;
  padding-block: 14px !important;
  overflow: visible !important;
}

marquee-component .marquee__wrapper,
.marquee .marquee__wrapper {
  animation: none !important;
  transform: none !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

marquee-component .marquee__content,
.marquee .marquee__content {
  width: 100% !important;
  min-width: unset !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

marquee-component .marquee__repeated-items,
.marquee .marquee__repeated-items {
  width: 100% !important;
  min-width: unset !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

marquee-component [aria-hidden='true'] {
  display: none !important;
}

marquee-component,
.marquee,
.marquee__wrapper,
.marquee__content,
.marquee__repeated-items,
.marquee__content :is(p, h1, h2, h3, h4, h5, h6, span, a, div),
.marquee__repeated-items :is(p, h1, h2, h3, h4, h5, h6, span, a, div, .text-block),
marquee-component .text-block,
marquee-component p,
marquee-component h1,
marquee-component h2,
marquee-component h3,
marquee-component h4,
marquee-component h5,
marquee-component h6,
marquee-component a,
marquee-component span {
  color: #000000 !important;
  fill: #000000 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000000 !important;
}



/* Announcement Sliding Bar */
.announcement-bar,
announcement-bar-component,
.announcement-bar__slider,
.announcement-bar__slides,
.announcement-bar__slide,
.announcement-bar__text,
.announcement-bar__link,
.announcement-bar p,
.announcement-bar span,
.announcement-bar a,
.announcement-bar div,
announcement-bar-component .text-block,
#header-component .announcement-bar,
#header-component announcement-bar-component,
#header-component .announcement-bar__slide,
#header-component .announcement-bar__text {
  color: #000000 !important;
  fill: #000000 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000000 !important;
}

.announcement-bar__slider .slideshow-control,
.announcement-bar__slider .slideshow-control svg,
.announcement-bar__slider .svg-wrapper {
  color: #000000 !important;
  fill: #000000 !important;
}

/* Carousel / Slideshow Text Sliders */
.section-carousel .text-block :is(p, h1, h2, h3, h4, h5, h6, span, a),
.carousel-component .text-block :is(p, h1, h2, h3, h4, h5, h6, span, a),
slideshow-component .text-block :is(p, h1, h2, h3, h4, h5, h6, span, a) {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Menu Drawer Brand Logo */
.menu-drawer__logo-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-top: 4px !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #EBEBEB !important;
}

.menu-drawer__logo-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.menu-drawer__logo-img {
  width: 130px !important;
  max-width: 130px !important;
  height: auto !important;
  display: block !important;
  filter: invert(1) brightness(0) !important;
  object-fit: contain !important;
  transition: opacity 0.2s ease !important;
}

.menu-drawer__logo-img:hover {
  opacity: 0.7 !important;
}

/* Footer Brand Logo */
.footer__brand-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
}

.footer__brand-logo-img {
  width: 130px !important;
  max-width: 130px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: none !important;
  transition: opacity 0.2s ease !important;
}

.footer__brand-logo-img:hover {
  opacity: 0.8 !important;
}

/* Hero Section Typography Refinements - Furthest Right & Bottom */
.hero__content-wrapper {
  justify-content: flex-end !important;
  align-items: flex-end !important;
  padding-bottom: 45px !important;
  padding-left: 0 !important;
  padding-right: clamp(24px, 5vw, 60px) !important;
  text-align: right !important;
}

.hero .group-block,
.hero .group-block--group_mATTUY,
.hero__content-wrapper .group-block {
  max-width: 440px !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  align-items: flex-end !important;
  text-align: right !important;
}

.hero .button_hero,
.hero .button-block,
.hero [data-block-type="button"] {
  display: none !important;
}

.hero .text-block--text_subtitle,
.hero .text-block--text_subtitle p,
.hero-component .text-block--text_subtitle,
.hero-component .text-block--text_subtitle p {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  opacity: 0.95 !important;
  margin-bottom: 2px !important;
  color: #FFFFFF !important;
  text-align: right !important;
}

.hero .text-block--text_m9AcWC,
.hero .text-block--text_m9AcWC h1,
.hero-component .text-block--text_m9AcWC,
.hero-component .text-block--text_m9AcWC h1 {
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #FFFFFF !important;
  text-align: right !important;
}

@media screen and (max-width: 749px) {
  .hero__content-wrapper {
    padding-bottom: 30px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
  }

  .hero .group-block,
  .hero .group-block--group_mATTUY,
  .hero__content-wrapper .group-block {
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-items: flex-end !important;
  }

  .hero .text-block--text_subtitle,
  .hero .text-block--text_subtitle p,
  .hero-component .text-block--text_subtitle,
  .hero-component .text-block--text_subtitle p {
    font-size: 8.5px !important;
    letter-spacing: 0.14em !important;
    text-align: right !important;
  }

  .hero .text-block--text_m9AcWC,
  .hero .text-block--text_m9AcWC h1,
  .hero-component .text-block--text_m9AcWC,
  .hero-component .text-block--text_m9AcWC h1 {
    font-size: 16px !important;
    letter-spacing: 0.08em !important;
    text-align: right !important;
  }
}

/* ----------------------------------------------------
   CORAZON BLANCO: PRODUCT & COLLECTION BLACK & WHITE THEME
   ---------------------------------------------------- */
body.template-product,
body.template-collection,
body.template-product #MainContent,
body.template-collection #MainContent,
.template-product .page-wrapper,
.template-collection .page-wrapper {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

/* ----------------------------------------------------
   CORAZON BLANCO: COLLECTION / CAFÉ CLEAN THEMING
   ---------------------------------------------------- */
.template-collection,
.template-collection #MainContent,
.template-collection .page-wrapper {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

/* Ensure collection titles & text are white */
.template-collection h1,
.template-collection h2,
.template-collection h3,
.template-collection h4,
.template-collection p,
.template-collection a,
.template-collection span,
.template-collection .product-title,
.template-collection [class*="product-title"],
.template-collection .price,
.template-collection [class*="price"],
.template-collection .facets,
.template-collection .product-count {
  color: #FFFFFF !important;
}

/* Mobile: strictly 1 product per row from top to bottom */
@media screen and (max-width: 749px) {
  .template-collection .product-grid,
  .template-collection .product-grid--grid,
  .template-collection .product-grid-mobile--large {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .template-collection .product-grid__item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .template-collection .product-card [class*="product-title"],
  .template-collection .product-card h2,
  .template-collection .product-card h3,
  .template-collection .product-title {
    font-size: 24px !important;
  }

  .template-collection .product-card [class*="price"],
  .template-collection .product-card .price {
    font-size: 17px !important;
  }
}

/* Desktop: centered layout */
@media screen and (min-width: 750px) {
  .template-collection .product-grid {
    gap: 48px 36px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }

  .template-collection .product-card [class*="product-title"],
  .template-collection .product-card h2,
  .template-collection .product-card h3,
  .template-collection .product-title {
    font-size: 26px !important;
  }
}

/* Cards & image styling with ZOOM COMPLETELY DISABLED */
.template-collection .card-gallery img,
.template-collection .product-card img,
.template-collection .product-grid__item img {
  border-radius: 16px !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
  transform: none !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Disable all zoom / transform effects on hover and focus */
.template-collection .product-card:hover img,
.template-collection .product-grid__item:hover img,
.template-collection .card-gallery:hover img,
.template-collection a:hover img {
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8) !important;
}

/* Typography styles for product titles & prices */
.template-collection .product-card [class*="product-title"],
.template-collection .product-card h2,
.template-collection .product-card h3,
.template-collection .product-card h4,
.template-collection .product-title {
  font-family: var(--font-heading--family, 'Instrument Serif', Georgia, serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  margin-top: 16px !important;
  margin-bottom: 4px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.template-collection .product-card [class*="price"],
.template-collection .product-card .price,
.template-collection .price {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-align: center !important;
  margin-top: 4px !important;
}

/* ----------------------------------------------------
   ORIGINAL EDITORIAL SERIF TYPOGRAPHY (Instrument Serif)
   ---------------------------------------------------- */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
[class*="heading"],
[class*="title"],
.product-title,
.cb-intro__title,
.cb-story-heading,
.cb-banner-heading,
.cb-statement-text,
.cb-quote-text,
.cb-heritage-quote,
.section-title,
.main-collection-grid__title,
.hero h1,
.hero .hero__title,
.hero [class*="text_m9AcWC"] h1,
.hero_iLBwPd h1,
.hero_iLBwPd .hero__title,
[data-section-type="hero"] h1,
.hero-section h1 {
  font-family: var(--font-heading--family, 'Instrument Serif', 'Bodoni Moda', Georgia, serif) !important;
}

/* ----------------------------------------------------
   MODERN TYPOGRAPHY FOR ALL SUBTEXT & BODY COPY
   ---------------------------------------------------- */
body,
p,
span:not([class*="icon"]),
.cb-story-desc,
.cb-banner-desc,
.cb-spec-row,
.cb-spec-label,
.cb-spec-val,
.cb-stat-pill-label,
.cb-stat-pill-val,
.cb-story-eyebrow,
.cb-story-badge,
.site-header__nav-link,
.site-header__menu-label,
.button,
.btn,
.product-card__content p,
.price,
[class*="price"],
.facets,
.facets__summary,
.facets__label,
.facets__button {
  font-family: 'Plus Jakarta Sans', 'Inter', var(--font-body--family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* =========================================================
   BILINGUAL LANGUAGE TOGGLE SYSTEM (ES | EN)
   ========================================================= */
.cb-header-lang-switch {
  display: inline-flex;
  align-items: center;
}

.cb-lang-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 2px 3px;
  box-sizing: border-box;
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cb-lang-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: var(--font-body--family, sans-serif) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.cb-lang-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.cb-lang-btn.active {
  color: #000000 !important;
  background: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.cb-lang-divider {
  display: none !important;
}

/* Mobile Drawer Language Switcher */
.onyx-drawer__lang-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin: 16px 0 20px 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.onyx-drawer__lang-label {
  font-family: var(--font-body--family, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

/* =========================================================
   CART & CHECKOUT CONTRAST & LEGIBILITY
   ========================================================= */
.cart__checkout-button,
button[name="checkout"],
#checkout {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  border: 1px solid #FFFFFF !important;
}

.cart__checkout-button .button-text,
button[name="checkout"] .button-text,
#checkout .button-text,
.cart__checkout-button span,
#checkout span {
  color: #000000 !important;
  opacity: 1 !important;
}

.cart__checkout-button:hover,
button[name="checkout"]:hover,
#checkout:hover {
  background-color: #E5E5E5 !important;
  color: #000000 !important;
}

.cart-discount__input {
  background-color: #141414 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.cart-discount__input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.cart-discount__button {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

.cart-discount__button:hover {
  background-color: #E5E5E5 !important;
  color: #000000 !important;
}

/* =========================================================
   CART PAGE DARK THEME & TYPOGRAPHY LEGIBILITY
   ========================================================= */
body.template-cart,
html.template-cart,
.template-cart #MainContent,
.template-cart .page-wrapper,
.template-cart .cart-page,
.template-cart main .section-background,
.template-cart main .section,
.template-cart .cart-items__wrapper,
.template-cart .cart-summary__inner {
  background-color: #0B0A0A !important;
  background: #0B0A0A !important;
  color: #FFFFFF !important;
}

/* Ensure footer background matches seamlessly on cart page */
.template-cart footer,
.template-cart .shopify-section-group-footer-group,
.template-cart footer .shopify-section,
.template-cart footer .section,
.template-cart footer .section-background {
  background-color: #111111 !important;
  background: #111111 !important;
}

.template-cart footer {
  padding-block: 6px 8px !important;
  margin-top: 14px !important;
}

/* Subtle, clean gap between last cart product picture and footer */
.template-cart .cart-page {
  padding-bottom: 16px !important;
  --padding-block-end: 16px !important;
}

.template-cart .cart-page__items {
  padding-bottom: 0px !important;
  margin-bottom: 8px !important;
}

.template-cart .cart-items {
  padding-bottom: 0px !important;
}

.template-cart .cart-items__table-row:last-child {
  padding-bottom: 12px !important;
  margin-bottom: 0px !important;
}

.template-cart .cart-items__table-row:last-child .cart-items__media,
.template-cart .cart-items__table-row:last-child .cart-items__media-container {
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

.template-cart h1,
.template-cart h2,
.template-cart h3,
.template-cart h4,
.template-cart h5,
.template-cart p,
.template-cart span:not(.button-text),
.template-cart label,
.template-cart td,
.template-cart th,
.template-cart a:not(.button):not(.cart__checkout-button),
.template-cart .cart-title,
.template-cart .cart-items,
.template-cart .cart-items__title,
.template-cart .cart-items__price,
.template-cart .price,
.template-cart .cart-totals,
.template-cart .cart-totals__total-label,
.template-cart .cart-totals__total-value,
.template-cart .cart-totals__original-label,
.template-cart .cart-totals__original-value,
.template-cart .cart-totals__tax-note,
.template-cart text-component {
  color: #FFFFFF !important;
}

.template-cart .quantity-selector {
  background-color: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

.template-cart .quantity-selector input,
.template-cart .quantity-selector button {
  color: #FFFFFF !important;
  background-color: transparent !important;
}

/* ----------------------------------------------------
   PRODUCT TITLE TYPOGRAPHY (Matches computer's flagship font)
   ---------------------------------------------------- */
.product-title-block,
.product-title-block *,
.product-title-block p,
[ref="productTitleLink"],
[ref="productTitleLink"] *,
[ref="productTitleLink"] p,
[data-block-id*="product_title"],
[data-block-id*="product_title"] *,
[data-block-id*="product_title"] p,
[class*="product_title"],
[class*="product_title"] *,
[class*="product_title"] p,
.cb-product-title,
.view-product-title,
.view-product-title a {
  font-family: var(--font-heading--family, 'Instrument Serif', 'Bodoni Moda', Georgia, serif) !important;
  font-weight: 400 !important;
}

/* Mobile product title adjustments */
@media screen and (max-width: 768px) {
  .product-title-block,
  .product-title-block *,
  .product-title-block p,
  [ref="productTitleLink"],
  [ref="productTitleLink"] *,
  [ref="productTitleLink"] .text-block,
  [ref="productTitleLink"] .text-block > *,
  [ref="productTitleLink"] p,
  .product-title,
  .product-title h1,
  h1.product-title,
  .cb-product-title,
  product-title h1,
  [data-block-id*="product_title"],
  [data-block-id*="product_title"] *,
  [data-block-id*="product_title"] p,
  [class*="product_title"],
  [class*="product_title"] *,
  [class*="product_title"] p,
  .view-product-title,
  .view-product-title a {
    font-family: var(--font-heading--family, 'Instrument Serif', 'Bodoni Moda', Georgia, serif) !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
  }

  .product-title-block,
  [ref="productTitleLink"],
  .cb-product-title {
    margin-top: 20px !important;
    display: block !important;
  }

  /* Shorten gap between header and picture on mobile */
  .product-information,
  .product-information.section,
  .product-information.spacing-style,
  main > .shopify-section:first-child .section {
    padding-top: 6px !important;
    --padding-block-start: 6px !important;
    --section-top-offset: 0px !important;
  }

  .product-information__media,
  media-gallery,
  .media-gallery,
  .media-gallery__grid {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .cb-centerpiece-section {
    padding-top: 16px !important;
  }

  .cb-centerpiece-topbar {
    margin-bottom: 10px !important;
    padding-top: 0 !important;
  }

  .cb-media-frame {
    margin-top: 0 !important;
  }
}

/* =========================================================
   STRAY BUTTONS / PILL SUPPRESSION (From the Land to the Heart)
   ========================================================= */
.cb-image-pill-badge,
.cb-banner-badge,
.cb-story-page .cb-image-pill-badge,
.cb-story-page .cb-banner-badge,
.is-story-route .cb-image-pill-badge,
.is-story-route .cb-banner-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Eradicate any orphan quick-add, product-list, or 404 buttons on story page */
html.is-story-route .quick-add,
html.is-story-route quick-add-component,
html.is-story-route .quick-add__button,
html.is-story-route product-list,
html.is-story-route [id*="product_list"],
html.is-story-route .ui-test-product-list,
html.is-story-route [data-testid="product-list"],
html.is-story-route #cb-standard-404-wrapper,
html.is-story-route #cb-standard-404-wrapper *,
body.template-story .quick-add,
body.template-story quick-add-component,
body.template-story .quick-add__button,
body.template-story product-list,
body.template-story [id*="product_list"],
body.template-story .ui-test-product-list,
body.template-story [data-testid="product-list"],
body.template-story #cb-standard-404-wrapper,
body.template-story #cb-standard-404-wrapper *,
body.template-404.template-story .quick-add,
body.template-404.template-story .quick-add__button,
body.template-404.template-story product-list,
body.template-404.template-story #cb-standard-404-wrapper {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Permanent Suppression of Stray Bottom Buttons (Accessibility & Inactive Drawers)
   ========================================================================== */

/* 1. Skip-to-content accessibility links: absolutely hidden unless tabbed/focused */
.skip-to-content-link,
a.skip-to-content-link,
a.skip-to-content-link.button-secondary {
  display: none !important;
  position: absolute !important;
  inset-inline-start: -99999px !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

.skip-to-content-link:focus,
a.skip-to-content-link:focus,
a.skip-to-content-link.button-secondary:focus {
  display: inline-block !important;
  position: fixed !important;
  inset-inline-start: 16px !important;
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  z-index: 9999999 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 10px 22px !important;
  background-color: #0b0a0a !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 9999px !important;
  animation: none !important;
}

/* 2. Closed drawers and dialogs: completely seal all children from escaping */
theme-drawer:not([open]) *,
dialog:not([open]) *,
.theme-drawer__dialog:not([open]) *,
dialog-component:not([open]) * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 3. Empty cart button: never show outside an active/open drawer or cart page */
.cart-items__empty-button,
a.cart-items__empty-button,
[data-cart-drawer-empty] .cart-items__empty-button {
  display: none !important;
}

theme-drawer[open] .cart-items__empty-button,
.theme-drawer__dialog[open] .cart-items__empty-button,
.template-cart .cart-items__empty-button {
  display: inline-flex !important;
}

/* 4. Ensure no stray predictive-search buttons leak to page bottom */
dialog-component:not([open]) .predictive-search__close-modal-button,
dialog-component:not([open]) .predictive-search__search-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Modern % Arabica Luxury Product Page Redesign
   ========================================================================== */

/* Overall Product Page Wrapper & Spacing */
.template-product .product-information {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-inline: 24px !important;
}

/* Media Gallery Modern Styling */
.template-product .product-media-gallery,
.template-product .product-gallery,
.template-product .product-information__media {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.template-product .product-media-gallery img,
.template-product .product-gallery img {
  border-radius: 16px !important;
  background-color: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.4s ease !important;
}

/* Product Details Column */
.template-product .product-details {
  text-align: left !important;
}

.template-product .product-details .group-block-content {
  align-items: flex-start !important;
  text-align: left !important;
}

/* Eyebrow Badge */
.cb-product-eyebrow-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 2px !important;
}

.cb-product-eyebrow-pill {
  display: inline-block !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.cb-product-eyebrow-sub {
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #888888 !important;
  font-weight: 500 !important;
}

/* Product Title */
.template-product .product-title-block,
.template-product .product-title-block p {
  font-family: var(--font-heading--family, 'Bodoni Moda', serif) !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
  text-align: left !important;
  margin: 0 !important;
}

/* Product Price */
.template-product product-price,
.template-product product-price .price {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
}

/* Variant Picker (Sizes: 8oz, 16oz, etc.) */
.template-product .variant-picker {
  text-align: left !important;
  width: 100% !important;
}

.template-product .variant-picker legend {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #888888 !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.template-product .variant-picker .variant-option--buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.template-product .variant-option__button-label {
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  padding: 8px 20px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.template-product .variant-option__button-label:hover {
  border-color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.template-product .variant-option__button-label:has(input:checked),
.template-product .variant-option__button-label.checked,
.template-product .variant-option__button-label:has([data-current-checked="true"]) {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
  font-weight: 600 !important;
}

.template-product .variant-option__button-label:has(input:checked) .variant-option__button-label__text,
.template-product .variant-option__button-label:has([data-current-checked="true"]) .variant-option__button-label__text {
  color: #000000 !important;
}

/* Single Unified Quantity Selector & Buy Buttons */
.template-product .buy-buttons-block {
  width: 100% !important;
}

.template-product .product-form-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.template-product .product-form-buttons .quantity-selector-wrapper {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.template-product .product-form-buttons .quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 48px !important;
  background-color: #161616 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 9999px !important;
  padding: 0 4px !important;
  width: 120px !important;
  box-sizing: border-box !important;
}

.template-product .product-form-buttons .quantity-selector button {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: background-color 0.2s ease !important;
  padding: 0 !important;
}

.template-product .product-form-buttons .quantity-selector button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.template-product .product-form-buttons .quantity-selector input[type="number"] {
  width: 36px !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
}

.template-product .product-form-buttons .quantity-selector input::-webkit-outer-spin-button,
.template-product .product-form-buttons .quantity-selector input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Primary Add to Cart Button */
.template-product .product-form-buttons add-to-cart-component,
.template-product .product-form-buttons .add-to-cart-button {
  flex: 1 1 200px !important;
  height: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: 1px solid #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.template-product .product-form-buttons .add-to-cart-button:hover {
  background-color: #E6E6E6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15) !important;
}

/* Accelerated Checkout (Dynamic "Buy It Now" / Shop Pay) */
.template-product .product-form-buttons .shopify-payment-button,
.template-product .product-form-buttons [data-shopify="payment-button"] {
  width: 100% !important;
  margin-top: 4px !important;
}

.template-product .shopify-payment-button__button--unbranded {
  border-radius: 9999px !important;
  height: 48px !important;
  background-color: #0B0A0A !important;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
}

.template-product .shopify-payment-button__button--unbranded:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* Coffee Perks Row */
.cb-product-perks {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  padding: 16px !important;
  background-color: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 4px !important;
}

.cb-product-perk-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cb-perk-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.cb-perk-text strong {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.25 !important;
}

.cb-perk-text span {
  display: block !important;
  font-size: 10px !important;
  color: #888888 !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
}

@media screen and (max-width: 749px) {
  .cb-product-perks {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }
}

/* Product Description Container */
.product-description-container {
  width: 100% !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 20px !important;
  margin-top: 8px !important;
  text-align: left !important;
}

.product-description-container .product-description-text,
.product-description-container .rte {
  color: #CCCCCC !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
}

.product-description-container .rte p {
  color: #CCCCCC !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}

.product-description-container .rte strong,
.product-description-container .rte b {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.product-description-container .rte ul {
  padding-left: 20px !important;
  margin-bottom: 14px !important;
  color: #CCCCCC !important;
}

.product-description-container .rte li {
  margin-bottom: 6px !important;
  line-height: 1.6 !important;
}

/* ====================================================
   CHARCOAL ACCENTS: CHECKMARK & CART TRASH BUTTON
   ==================================================== */

/* 1. Coffee Section: Add to Cart Checkmark in Modern Charcoal */
.add-to-cart-button .add-to-cart__added,
.add-to-cart-button[data-added='true'] .add-to-cart__added,
.add-to-cart-button .checkmark-burst,
.quick-add__button .add-to-cart__added,
.quick-add__button[data-added='true'] .add-to-cart__added,
.sticky-add-to-cart__button[data-added='true'] .add-to-cart__added {
  color: #242424 !important;
}

.add-to-cart-button .checkmark-burst :is(.ring, .line, .check, .tick),
.add-to-cart-button[data-added='true'] .checkmark-burst :is(.ring, .line, .check, .tick),
.quick-add__button .checkmark-burst :is(.ring, .line, .check, .tick),
.quick-add__button[data-added='true'] .checkmark-burst :is(.ring, .line, .check, .tick),
.sticky-add-to-cart__button[data-added='true'] .checkmark-burst :is(.ring, .line, .check, .tick) {
  stroke: #242424 !important;
}

.add-to-cart-button .checkmark-burst .tick,
.quick-add__button .checkmark-burst .tick,
.sticky-add-to-cart__button .checkmark-burst .tick {
  stroke-width: 2.2px !important;
}

/* 2. Cart Section: Modern Charcoal Trash Buttons */
.cart-items__remove,
.cart-drawer .cart-items__remove,
.template-cart .cart-items__remove,
[class*="cart"] .cart-items__remove {
  background-color: #242424 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cart-items__remove svg,
.cart-drawer .cart-items__remove svg,
.template-cart .cart-items__remove svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: block !important;
  fill: #FFFFFF !important;
  pointer-events: none !important;
}

.cart-items__remove svg path,
.cart-drawer .cart-items__remove svg path,
.template-cart .cart-items__remove svg path {
  fill: #FFFFFF !important;
  stroke: none !important;
  transition: fill 0.2s ease !important;
}

.cart-items__remove:hover,
.cart-drawer .cart-items__remove:hover,
.template-cart .cart-items__remove:hover {
  background-color: #2D2020 !important;
  border-color: rgba(255, 107, 107, 0.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.cart-items__remove:hover svg,
.cart-items__remove:hover svg path,
.cart-drawer .cart-items__remove:hover svg,
.cart-drawer .cart-items__remove:hover svg path,
.template-cart .cart-items__remove:hover svg,
.template-cart .cart-items__remove:hover svg path {
  fill: #FF6B6B !important;
}

.cart-items__remove:active,
.cart-drawer .cart-items__remove:active,
.template-cart .cart-items__remove:active {
  transform: scale(0.94) !important;
  background-color: #1F1414 !important;
}