/** Shopify CDN: Minification failed

Line 1904:1 Unexpected "/"
Line 1905:39 Expected ":"
Line 1906:57 Expected ":"
Line 1907:49 Expected ":"
Line 1908:43 Expected ":"
Line 1909:57 Expected ":"
Line 1912:43 Expected ":"
Line 1913:57 Expected ":"
Line 1914:101 Expected ":"
Line 1915:43 Expected ":"
... and 39 more hidden warnings

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

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

:root {
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

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

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: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    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;
}

.product-card__content {
  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 */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  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;
  }
}

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

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

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

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

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

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

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

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

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

/* Utility */

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

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

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

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

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

.contents {
  display: contents;
}

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

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

  display: flex;
  flex-direction: column;
}

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

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

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

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

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

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

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

.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;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

/* 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 */
    :is(.spacing-style, .inherit-spacing) {
      --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);
  }
}

/* Paak Pehnawa Custom Styles */
.custom-gold-text {
  color: #c4a35c !important;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.custom-script-text {
  color: #c4a35c !important;
  font-family: 'Playfair Display', serif, cursive; /* Assuming a classic serif/script fallback */
  font-style: italic;
  font-weight: 300;
}

.custom-hero-heading {
  font-size: clamp(3rem, 5vw, 5rem) !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  font-weight: 800;
}

.custom-hero-desc {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 400px;
}



/* Paak Pehnawa Hero Styles (Overriding standard tags) */
.hero h6 strong {
  color: #c4a35c !important;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.hero h1 em {
  color: #c4a35c !important;
  font-family: 'Playfair Display', serif, cursive; 
  font-style: italic;
  font-weight: 300;
}

.hero h1 {
  font-size: clamp(3rem, 5vw, 5rem) !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  font-weight: 800;
}

.hero p {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 400px;
}

/* Philosophy Section Styles */
.custom-philosophy-subheading {
  color: #c4a35c;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.custom-divider-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  max-width: 100%;
}

.custom-divider-wrapper::before,
.custom-divider-wrapper::after {
  content: '';
  height: 1px;
  background-color: #d8cdb8;
}

.custom-divider-wrapper::before {
  flex: 0 0 100px;
}

.custom-divider-wrapper::after {
  flex: 1;
}

.custom-divider-icon {
  margin: 0 15px;
  color: #d8cdb8;
  font-size: 0.7rem;
}

.custom-philosophy-heading {
  font-size: clamp(2.5rem, 4vw, 3.8rem) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  color: #1a1a1a;
  margin-bottom: 30px;
}

.custom-philosophy-heading em {
  font-family: 'Playfair Display', serif, cursive;
  font-style: italic;
  font-weight: 400;
  color: #8c6239; /* Darker brown/gold as per design */
}

.custom-philosophy-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: #666;
  margin-bottom: 1.5rem;
}

/* Offset Image Border */
media-with-content {
  overflow: visible !important;
}

.media-with-content__media {
  position: relative;
  z-index: 1;
}

.media-with-content__media::after {
  content: '';
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  border: 1px solid #ebdcc5;
  z-index: -1;
  pointer-events: none;
}

/* Clean Philosophy Section Styles */
.media-with-content h6 {
  color: #c4a35c !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}

.media-with-content h6 + p {
  color: #d8cdb8;
  font-size: 0.7rem;
  letter-spacing: -1px;
  margin-bottom: 25px;
}

.media-with-content h2 {
  font-size: clamp(2.5rem, 4vw, 3.8rem) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  color: #1a1a1a !important;
  margin-bottom: 30px !important;
}

.media-with-content h2 em {
  font-family: 'Playfair Display', serif, cursive !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #8c6239 !important;
}

.media-with-content p {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #666 !important;
  margin-bottom: 1.5rem !important;
}



/* Collection List Custom Styles */
.collection-list h6 {
  color: #c4a35c !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}
.collection-list h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  margin-bottom: 30px !important;
}

/* Card Zoom Effect */
.collection-card {
  overflow: hidden; /* Ensure zoomed image doesn't overflow */
}
.collection-card .resource-image__image, 
.collection-card .collection-card__image img,
.collection-card__image .resource-image__image {
  transition: transform 0.5s ease;
}
.collection-card:hover .resource-image__image,
.collection-card:hover .collection-card__image img,
.collection-card:hover .collection-card__image .resource-image__image {
  transform: scale(1.05);
}

/* Card Title override to ensure it's white */
/* Fixed Card Title */
.collection-card .text-block p,
.collection-card .text-block {
  color: #ffffff !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0px !important;
  text-transform: uppercase;
}

/* Hover Subtext Effect */
.collection-card p {
  color: #c4a35c !important; /* Gold */
  font-size: 0.8rem;
  font-style: italic;
  font-family: 'Playfair Display', serif, cursive;
  opacity: 0;
  max-height: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  margin: 0 !important;
}

.collection-card:hover .collection-card p {
  opacity: 1;
  max-height: 50px;
  transform: translateY(0);
}

/* Enhanced Hover Effect */
.collection-card {
  position: relative;
  overflow: hidden;
}

.collection-card__content {
  justify-content: flex-end; /* Push content to bottom */
}

.collection-hover-text {
  color: #c4a35c !important; /* Gold */
  font-size: 0.8rem !important;
  font-style: italic !important;
  font-family: 'Playfair Display', serif, cursive !important;
  opacity: 0;
  max-height: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
  margin: 0 !important;
  pointer-events: none;
}

.collection-card:hover .collection-hover-text {
  opacity: 1;
  max-height: 50px;
  transform: translateY(0);
  margin-top: 5px !important;
}

/* Explicit Collection Title */
.collection-fallback-title {
  color: #ffffff !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  margin: 0 0 5px 0 !important;
  text-transform: uppercase !important;
}

/* Editorial Hero Section Styles */
#shopify-section-hero_editorial h6 {
  color: #c4a35c !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  font-weight: 600 !important;
}

#shopify-section-hero_editorial h2 {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(3rem, 7vw, 6rem) !important;
  line-height: 0.9 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 30px !important;
}

#shopify-section-hero_editorial p {
  color: #d8cdb8 !important;
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 40px !important;
}

#shopify-section-hero_editorial .button.primary {
  background-color: #c4a35c !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 15px 30px !important;
  text-transform: uppercase !important;
}

/* Why Paak Pehnawa Section Styles */
[id$="__why_paak_pehnawa"] {
  background-color: #f8f5f0 !important;
}

[id$="__why_paak_pehnawa"] h6 {
  color: #c4a35c !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

[id$="__why_paak_pehnawa"] h2 {
  color: #1a1a1a !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

[id$="__why_paak_pehnawa"] p {
  color: #666666 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Ensure columns take 25% width roughly */
[id$="__why_paak_pehnawa"] .layout-panel-flex--row > * {
  flex: 1 1 200px;
  max-width: 300px;
  margin: 0 auto;
}

/* Style the icon image block container */
/* Style the icon image block container structurally */
[id$="__why_paak_pehnawa"] .layout-panel-flex--row .layout-panel-flex--column > *:first-child {
  width: 60px !important;
  height: 60px !important;
  border: 1px solid #d8cdb8 !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 10px auto !important;
  background: transparent !important;
}

[id$="__why_paak_pehnawa"] .layout-panel-flex--row .layout-panel-flex--column > *:first-child img,
[id$="__why_paak_pehnawa"] .layout-panel-flex--row .layout-panel-flex--column > *:first-child svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Customer Stories Section Styles */
[id$="__customer_stories"] {
  background-color: #f8f5f0 !important;
}

[id$="__customer_stories"] h6 {
  color: #c4a35c !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

[id$="__customer_stories"] h2 {
  color: #1a1a1a !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}





/* Stars */
[id$="__customer_stories"] h5 {
  color: #c4a35c !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.2em !important;
  margin: 0 !important;
}

/* Quote Text */
[id$="__customer_stories"] p em {
  font-family: 'Playfair Display', serif, cursive !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #555555 !important;
  font-style: italic !important;
}

/* Author Info */
[id$="__customer_stories"] .layout-panel-flex--row .layout-panel-flex--row p {
  color: #999999 !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}

/* Verified Tag */
[id$="__customer_stories"] .layout-panel-flex--row > .text-block p {
  color: #c4a35c !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: 1px solid #c4a35c !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  display: inline-block !important;
}

/* Enforce equal heights for Customer Stories cards */
[id$="__customer_stories"] .layout-panel-flex--row {
  align-items: stretch !important;
}

[id$="__customer_stories"] .layout-panel-flex--row > .layout-panel-flex--column {
  height: auto !important;
  justify-content: flex-start !important;
}

[id$="__customer_stories"] .layout-panel-flex--row > .layout-panel-flex--column > *:last-child {
  margin-top: auto !important;
}

/* Instagram Section Styles */
[id$="__instagram_feed"] {
  background-color: #f3efe6 !important;
}

[id$="__instagram_feed"] h6 {
  color: #c4a35c !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

[id$="__instagram_feed"] h2 {
  color: #1a1a1a !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

[id$="__instagram_feed"] p {
  color: #888888 !important;
  font-size: 1.1rem !important;
}

/* Make images perfectly square and flex evenly */
[id$="__instagram_feed"] .layout-panel-flex--row > .image-block,
[id$="__instagram_feed"] .layout-panel-flex--row > * {
  flex: 1 1 16% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

[id$="__instagram_feed"] .layout-panel-flex--row > * img,
[id$="__instagram_feed"] .layout-panel-flex--row > * svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Follow Us Button styling to match design */
[id$="__instagram_feed"] .button.secondary {
  border: 1px solid #1a1a1a !important;
  color: #1a1a1a !important;
  background-color: transparent !important;
  padding: 15px 40px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* Footer Custom Styles */
[id$="__footer_main"],
[id$="__footer_utilities_jLGE8U"] {
  background-color: #131313 !important;
  color: #888888 !important;
}

[id$="__footer_main"] h6 {
  color: #c4a35c !important;
  letter-spacing: 0.15em !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

[id$="__footer_main"] h2 {
  color: #ffffff !important;
  font-size: 2.2rem !important;
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

[id$="__footer_main"] p {
  color: #888888 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

/* Newsletter Form Adjustments */
[id$="__footer_main"] form {
  display: flex !important;
}
[id$="__footer_main"] form input[type="email"] {
  background-color: transparent !important;
  border: 1px solid #333333 !important;
  color: #ffffff !important;
  padding: 15px 20px !important;
  border-radius: 0 !important;
  border-right: none !important;
  outline: none !important;
}
[id$="__footer_main"] form button {
  background-color: #c4a35c !important;
  color: #131313 !important;
  font-weight: bold !important;
  border: none !important;
  padding: 15px 30px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

/* Divider */
[id$="__footer_main"] .divider-block {
  border-top: 1px solid #222222 !important;
  margin: 40px 0 !important;
  width: 100% !important;
}

/* Menus & Logo */
[id$="__footer_main"] .menu-block-heading {
  color: #c4a35c !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  font-weight: 700 !important;
}

[id$="__footer_main"] .menu-block-list a {
  color: #888888 !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  margin-bottom: 12px !important;
  display: block !important;
  transition: color 0.3s ease !important;
}
[id$="__footer_main"] .menu-block-list a:hover {
  color: #ffffff !important;
}

/* Brand Column Logo */
[id$="__footer_main"] h3 {
  color: #ffffff !important;
  font-family: 'Playfair Display', serif, cursive !important;
  font-size: 2rem !important;
  margin-bottom: 5px !important;
}

/* Social Icons */
[id$="__footer_main"] .social-links-block a {
  color: #888888 !important;
}
[id$="__footer_main"] .social-links-block a:hover {
  color: #ffffff !important;
}

[id$="__instagram_feed"] a {
  color: #888888 !important;
  text-decoration: none !important;
}

/* NEW HERO DESIGN */
[id$="__hero_jVaWmY"] .layout-panel-flex--row > .text-block h2 {
    font-family: 'Playfair Display', serif, cursive !important;
    color: #ffd700 !important; /* Gold logo color */
    font-size: 3rem !important;
    margin: 0 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
}
[id$="__hero_jVaWmY"] .layout-panel-flex--column h6 {
    color: #c4a35c !important;
    letter-spacing: 0.15em !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}
[id$="__hero_jVaWmY"] .layout-panel-flex--column h1 {
    color: #ffffff !important;
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
}
[id$="__hero_jVaWmY"] .layout-panel-flex--column p {
    color: #f0f0f0 !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
}

/* Ensure right alignment of text block container */
[id$="__hero_jVaWmY"] .layout-panel-flex--row > .layout-panel-flex--column {
    align-items: flex-end !important;
    text-align: right !important;
}

/* Primary Button exact match */
[id$="__hero_jVaWmY"] .button.primary {
    padding: 15px 35px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    border-radius: 0 !important;
    margin-top: 10px !important;
}

/* Hero Background Left-to-Right Gradient */
[id$="__hero_jVaWmY"] .overlay--gradient {
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%) !important;
}

/* EXCLUSIVE OFFERS SECTION */
[id$="__exclusive_offers"] {
  background-color: #f8f5f0 !important;
}

[id$="__exclusive_offers"] h6 {
  font-size: 1.1rem !important;
  letter-spacing: 0.25em !important;
  color: #1a1a1a !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* Card Styling */
[id$="__exclusive_offers"] .layout-panel-flex--row > .group-block {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

[id$="__exclusive_offers"] .layout-panel-flex--row > .group-block:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

/* Top-Right Decorative Arc */
[id$="__exclusive_offers"] .layout-panel-flex--row > .group-block::after {
  content: '' !important;
  position: absolute !important;
  top: -50px !important;
  right: -50px !important;
  width: 150px !important;
  height: 150px !important;
  background-color: #f1ebd8 !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* Bring text above the decorative arc */
[id$="__exclusive_offers"] .layout-panel-flex--row > .group-block > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Icon Box (First text block p) */
[id$="__exclusive_offers"] .layout-panel-flex--row > .group-block > .text-block:nth-child(1) p {
  width: 50px !important;
  height: 50px !important;
  background-color: #eee7d2 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  color: #a88d4d !important;
  font-size: 1.2rem !important;
  border: 1px solid #d3c7a7 !important;
}

/* Card Title */
[id$="__exclusive_offers"] .layout-panel-flex--row > .group-block > .text-block:nth-child(2) h3 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin: 10px 0 5px !important;
  font-family: 'Inter', 'Montserrat', sans-serif !important;
}

/* Card Description */
[id$="__exclusive_offers"] .layout-panel-flex--row > .group-block > .text-block:nth-child(3) p {
  font-size: 0.95rem !important;
  color: #555555 !important;
  margin: 0 0 20px !important;
  line-height: 1.5 !important;
}

/* Code Box (Fourth text block h4) */
[id$="__exclusive_offers"] .layout-panel-flex--row > .group-block > .text-block:nth-child(4) h4 {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #1a1a1a !important;
  padding: 15px !important;
  border: 1px dashed #c0b59b !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Card Icon (h5) */
[id$="__exclusive_offers"] .layout-panel-flex--row .group-block h5 {
  width: 48px !important;
  height: 48px !important;
  background-color: #f1ebd8 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 15px auto !important;
  color: #a88d4d !important;
  font-size: 1.1rem !important;
  border: 1px solid #d3c7a7 !important;
}

/* Card Title (h3) */
[id$="__exclusive_offers"] .layout-panel-flex--row .group-block h3 {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin: 0 0 10px 0 !important;
  text-transform: uppercase !important;
  font-family: 'Inter', 'Montserrat', sans-serif !important;
}

/* Card Description (p) */
[id$="__exclusive_offers"] .layout-panel-flex--row .group-block p {
  font-size: 0.95rem !important;
  color: #555555 !important;
  margin: 0 0 25px 0 !important;
  line-height: 1.5 !important;
}

/* Code Box (h4) */
[id$="__exclusive_offers"] .layout-panel-flex--row .group-block h4 {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #1a1a1a !important;
  padding: 12px !important;
  border: 1px dashed #c0b59b !important;
  margin: 0 !important;
  width: 100% !important;
  background-color: transparent !important;
}

/* FORCE ICON CIRCLE */
[id$="__exclusive_offers"] h5,
[id$="__exclusive_offers"] .group-block-content > .text-block:nth-child(1) p,
[id$="__exclusive_offers"] .group-block-content > .text-block:nth-child(1) h5 {
  width: 48px !important;
  height: 48px !important;
  background-color: #f1ebd8 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 10px auto !important;
  color: #a88d4d !important;
  font-size: 1.1rem !important;
  border: 1px solid #d3c7a7 !important;
}

[id$="__exclusive_offers"] .group-block-content > .text-block:nth-child(1) p strong {
  margin: auto !important;
}

/* FORCE CODE BOX DASHED BORDER */
[id$="__exclusive_offers"] .group-block-content > .text-block:nth-child(4),
[id$="__exclusive_offers"] .group-block-content > .text-block:nth-child(4) h4 {
  width: 100% !important;
  display: block !important;
}

[id$="__exclusive_offers"] .group-block-content > .text-block:nth-child(4) h4 {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #1a1a1a !important;
  padding: 12px !important;
  border: 1px dashed #c0b59b !important;
  margin: 0 !important;
  background-color: transparent !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* INSTAGRAM REELS SECTION */
[id$="__instagram_reels"] {
  background-color: #391f13 !important;
}

[id$="__instagram_reels"] h6 {
  color: #c4a35c !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.25em !important;
  font-weight: 600 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

[id$="__instagram_reels"] h2 {
  color: #ffffff !important;
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

/* Horizontal Scroller */
[id$="__instagram_reels"] .layout-panel-flex--row {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding: 0 20px 20px 20px !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

[id$="__instagram_reels"] .layout-panel-flex--row::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}

/* Reel Cards */
[id$="__instagram_reels"] .layout-panel-flex--row > .group-block {
  flex: 0 0 260px !important; /* Fixed width for each reel */
  scroll-snap-align: start;
  position: relative !important;
}

/* Video Styling */
[id$="__instagram_reels"] .layout-panel-flex--row .video-placeholder-wrapper,
[id$="__instagram_reels"] .layout-panel-flex--row video {
  aspect-ratio: 9/16 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Play Button Overlay */
[id$="__instagram_reels"] .layout-panel-flex--row .group-block .text-block:nth-child(2) p {
  position: absolute !important;
  top: 40% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 50px !important;
  height: 50px !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 1.2rem !important;
  pointer-events: none !important; /* Let clicks pass through to video */
  margin: 0 !important;
  z-index: 10 !important;
}

/* Shop This Look Button */
[id$="__instagram_reels"] .layout-panel-flex--row .button {
  background-color: transparent !important;
  border: 1px solid #4f3323 !important;
  color: #a88d4d !important;
  width: 100% !important;
  border-radius: 0 !important;
  padding: 15px !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-top: 5px !important;
  transition: all 0.3s ease !important;
}

[id$="__instagram_reels"] .layout-panel-flex--row .button:hover {
  background-color: #4f3323 !important;
  color: #ffffff !important;
}

/* DESKTOP LAYOUT (Fit 6 cards, No scroll) */
@media screen and (min-width: 769px) {
  [id$="__instagram_reels"] .layout-panel-flex--row {
    flex-wrap: nowrap !important;
    overflow-x: hidden !important; /* Force no scrolling */
    padding: 0 40px !important;
    gap: 15px !important;
    justify-content: center !important;
  }
  
  [id$="__instagram_reels"] .layout-panel-flex--row > .group-block {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    /* Exactly fit 6 items taking gaps into account */
    max-width: calc((100% - (15px * 5)) / 6) !important;
  }
}

/* MOBILE LAYOUT (Scrollable, NO scrollbar) */
@media screen and (max-width: 768px) {
  [id$="__instagram_reels"] .layout-panel-flex--row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 20px 20px 20px !important;
    gap: 15px !important;
    -webkit-overflow-scrolling: touch !important;
    /* Hide scrollbar entirely */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  [id$="__instagram_reels"] .layout-panel-flex--row::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  
  [id$="__instagram_reels"] .layout-panel-flex--row > .group-block {
    flex: 0 0 85% !important;
    scroll-snap-align: center !important;
  }
}

/* Hide Native Video Controls (Timeline, Play/Pause, Mute) */
[id$="__instagram_reels"] .layout-panel-flex--row video::-webkit-media-controls,
[id$="__instagram_reels"] .layout-panel-flex--row video::-webkit-media-controls-enclosure,
[id$="__instagram_reels"] .layout-panel-flex--row video::-webkit-media-controls-panel {
  display: none !important;
}

[id$="__instagram_reels"] .layout-panel-flex--row video {
  /* Prevent native controls from showing on click/focus if browser overrides */
  outline: none !important;
}

/* Play Button Hover Effect */
[id$="__instagram_reels"] .layout-panel-flex--row .group-block .text-block:nth-child(2) p {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

[id$="__instagram_reels"] .layout-panel-flex--row .group-block:hover .text-block:nth-child(2) p {
  opacity: 1 !important;
}

/* Permanently hide the center Play button as requested */
[id$="__instagram_reels"] .layout-panel-flex--row .group-block .text-block:nth-child(2) {
  display: none !important;
}

/* SIGNATURE COLLECTIONS */
[id$="__signature_collections"] {
  background-color: #391f13 !important;
}

[id$="__signature_collections"] .collection-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Gradient overlay for readability */
[id$="__signature_collections"] .collection-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60% !important;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Bring content above overlay */
[id$="__signature_collections"] .collection-card__content {
  z-index: 2 !important;
  padding-bottom: 25px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Title Styling */
[id$="__signature_collections"] .collection-card .text-block p {
  color: #fff !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

/* Button Hover Effect */
[id$="__signature_collections"] .collection-card .button {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(15px) !important;
  transition: all 0.3s ease !important;
  background-color: transparent !important;
  border: 1px solid #c4a35c !important;
  color: #c4a35c !important;
  padding: 8px 18px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  margin-top: 10px !important;
  min-height: auto !important;
}

[id$="__signature_collections"] .collection-card:hover .button {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

[id$="__signature_collections"] .collection-card .button:hover {
  background-color: #c4a35c !important;
  color: #fff !important;
}

/* Fix typography for Signature Collections header */
[id$="__signature_collections"] .group-block-content h2 {
  font-size: 2.5rem !important;
  margin: 0 !important;
}

[id$="__signature_collections"] .group-block-content h2 strong {
  font-family: "Inter", "Montserrat", sans-serif !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}

[id$="__signature_collections"] .group-block-content h2 em {
  font-family: "Playball", "Great Vibes", cursive, serif !important;
  color: #c4a35c !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1.5em !important;
  text-transform: none !important;
}

[id$="__signature_collections"] .group-block-content p {
  color: #c0b59b !important;
  font-size: 1.1rem !important;
  margin: 0 !important;
}

/* Fix Signature Collections Typography & Header Size */
[id$="__signature_collections"] .group-block-content h2 {
  font-size: 1.8rem !important; /* Smaller, crisper title like Vercel */
  margin: 0 !important;
}

[id$="__signature_collections"] .group-block-content h2 strong {
  font-family: "Inter", "Montserrat", sans-serif !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

[id$="__signature_collections"] .group-block-content h2 em {
  font-family: "Playball", "Great Vibes", cursive, serif !important;
  color: #c4a35c !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1.6em !important;
  text-transform: none !important;
  margin-left: 5px !important;
}

[id$="__signature_collections"] .group-block-content p {
  color: #c0b59b !important;
  font-size: 0.95rem !important;
  margin: 5px 0 0 0 !important;
}

/* Fix Card Layout and Hover States */
[id$="__signature_collections"] .collection-card__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-bottom: 25px !important;
  z-index: 2 !important;
}

/* Ensure title is above button */
[id$="__signature_collections"] .collection-card__content > *:first-child {
  order: 1 !important;
}
[id$="__signature_collections"] .collection-card__content > *:nth-child(2) {
  order: 2 !important;
}

/* Collection Title inside card */
[id$="__signature_collections"] .collection-card h5 {
  color: #ffffff !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
}

/* Shop Look Button */
[id$="__signature_collections"] .collection-card .button-secondary,
[id$="__signature_collections"] .collection-card .button {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(15px) !important;
  transition: all 0.3s ease !important;
  background-color: transparent !important;
  border: 1px solid #c4a35c !important;
  color: #c4a35c !important;
  padding: 8px 18px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  min-height: auto !important;
  pointer-events: none !important;
}

[id$="__signature_collections"] .collection-card:hover .button-secondary,
[id$="__signature_collections"] .collection-card:hover .button {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

[id$="__signature_collections"] .collection-card .button-secondary:hover,
[id$="__signature_collections"] .collection-card .button:hover {
  background-color: #c4a35c !important;
  color: #ffffff !important;
}

/* Subtle Gradient Overlay */
[id$="__signature_collections"] .collection-card__inner::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50% !important;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Make Sidebar Filters Sticky */
@media (min-width: 990px) {
  /* Only apply sticky to the filter column, don't break the existing grid layout */
  .collection-wrapper > *:nth-child(1) {
    position: sticky;
    top: 20px;
    align-self: start;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .collection-wrapper > *:nth-child(1)::-webkit-scrollbar {
    display: none;
  }
}

/* Sticky Heading Fix */
@media (min-width: 990px) {
  .hide-on-desktop { display: none !important; }
}
@media (max-width: 989px) {
  .desktop-only-heading { display: none !important; }
}

/* Standardize Mobile Menu Fonts */
.menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}
.menu-drawer__submenu .menu-drawer__menu-item-text,
.menu-drawer__menu-item--parent .menu-drawer__menu-item-text,
.menu-drawer__menu-item--child .menu-drawer__menu-item-text {
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}
.menu-drawer__menu-item {
  padding-top: 1.2rem !important;
  padding-bottom: 1.2rem !important;
}
.menu-drawer__submenu .menu-drawer__menu-item {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}