/** Shopify CDN: Minification failed

Line 7233:0 Unexpected "}"

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

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

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

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

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

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

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

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

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

.contents {
  display: contents;
}

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

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

  display: flex;
  flex-direction: column;
}

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

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

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

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

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

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

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

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

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary .icon-animated > svg {
  transform: rotate(180deg);
}

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

/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: calc(var(--header-group-height) * -1);
}

body:has(.header[transparent]) #header-group > .header-section {
  z-index: var(--layer-menu-drawer);
}

/* All other header group content should be beneath the floating header,
but above the rest of the page content */
body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: calc(var(--layer-menu-drawer) - 1);
}

/* Product grid */
.product-grid-container {
  display: block;
  width: 100%;
  padding-block: var(--padding-block-start) var(--padding-block-end);

  @media screen and (min-width: 750px) {
    display: grid;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--product-grid-gap);
  margin: auto;
  padding: 0;
  list-style: none;
}

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

.product-grid :is(h3, p) {
  margin: 0;
}

.product-grid__item {
  border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
}

.product-grid--organic[product-grid-view='default'] .product-grid__item {
  height: fit-content;
}

.product-grid__card.product-grid__card {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--product-card-gap);
  align-items: var(--product-card-alignment);
  text-decoration: none;
  color: var(--color, var(--color-foreground));
  padding-block: var(--padding-block-start) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  overflow: hidden;
}

[product-grid-view='zoom-out'] .product-grid__card {
  row-gap: var(--padding-xs);
}

[product-grid-view='default'] {
  --product-grid-gap: 16px;
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

[product-grid-view='default'] .product-grid__item {
  padding-block: 0;
}

[product-grid-view='mobile-single'],
.product-grid-mobile--large {
  @media screen and (max-width: 749px) {
    grid-template-columns: 1fr;
  }
}

.product-grid__card .group-block > * {
  @media screen and (max-width: 749px) {
    flex-direction: column;
  }
}

ul[product-grid-view='zoom-out'] .product-grid__card > * {
  display: none;
}

[product-grid-view='zoom-out'] {
  --product-grid-columns-desktop: repeat(
    10,
    minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
  );
}

.product-grid-view-zoom-out--details {
  display: none;
}

.product-grid-view-zoom-out--details .h4,
.product-grid-view-zoom-out--details span,
.product-grid-view-zoom-out--details s {
  font-size: var(--font-size--xs);
  font-family: var(--font-paragraph--family);
}

.product-grid-view-zoom-out--details span {
  font-weight: 500;
}

.product-grid-view-zoom-out--details .h4 {
  line-height: 1.3;
  font-weight: 400;
}

.product-grid-view-zoom-out--details > span.h6,
.product-grid-view-zoom-out--details > div.h6 > product-price {
  display: inline-block;
  line-height: 0;
  margin-top: var(--margin-2xs);
}

.product-grid-view-zoom-out--details > span.h6 > *,
.product-grid-view-zoom-out--details > div.h6 > * > * {
  line-height: 1.2;
}

@media (prefers-reduced-motion: no-preference) {
  :root:active-view-transition-type(product-grid) {
    details[open] floating-panel-component {
      view-transition-name: panel-content;

      .checkbox *,
      .facets__pill-label {
        transition: none;
      }

      .facets--vertical & {
        view-transition-name: none;
      }
    }

    .product-grid {
      view-transition-name: product-grid;
    }

    footer {
      view-transition-name: footer;
    }

    .product-grid__item,
    floating-panel-component {
      transition: none;
    }
  }
}

::view-transition-group(panel-content) {
  z-index: 1;
}

::view-transition-new(product-grid) {
  animation-delay: 150ms;
  animation-name: fadeInUp;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
}

results-list[initialized] {
  .product-grid__item {
    transition: opacity var(--animation-speed) var(--animation-easing),
      transform var(--animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Collection and product list cards have equal heights */
:is(.product-grid__item, .resource-list__item) .product-card {
  display: grid;
  height: 100%;
}

/* Video background */
.video-background,
.video-background * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-background--cover * {
  object-fit: cover;
}

.video-background--contain * {
  object-fit: contain;
}

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
.text-block > style + * {
  margin-block-start: 0;
}

/* Dialog */
.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);

  @media screen and (min-width: 750px) {
    border-radius: var(--style-border-radius-popover);
    max-width: var(--normal-content-width);
  }

  @media screen and (max-width: 749px) {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100dvw;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  backdrop-filter: brightness(1);
  background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
}

.dialog-modal[open] {
  animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    opacity: 0;
  }
}

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

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

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

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

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

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

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

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

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

/* Buttons */
.button,
.button-secondary,
.button-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;
}

/* Show more */

.show-more__button {
  color: var(--color-foreground);
  cursor: pointer;
}

.show-more__button:hover {
  @media screen and (min-width: 750px) {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }
}

.show-more__label {
  text-align: start;
  font-size: var(--font-size--body-md);
  font-family: var(--font-paragraph--family);
}

.show-more__button .svg-wrapper {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.show-more[data-expanded='true'] .show-more__label--more,
.show-more[data-expanded='false'] .show-more__label--less {
  display: none;
}

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

.product-form-buttons:has(.add-to-cart-button.button-secondary)
  :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

/* Collapsible row */

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

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

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

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

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
  transition: transform var(--animation-speed) var(--animation-easing);
}

/* Shared plus/minus icon animations */
summary .icon-plus :is(.horizontal, .vertical),
.show-more__button .icon-plus :is(.horizontal, .vertical) {
  transition: transform var(--animation-speed) var(--animation-easing);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary .icon-plus .horizontal,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Product Media */
media-gallery {
  display: block;
  width: 100%;
}

:where(media-gallery, .product-grid__item) {
  .media-gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--image-gap);
  }
}

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

  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: var(--slide-width, 100%);

  /* Relative position needed for video and 3d models */
  position: relative;
  overflow: hidden;

  &:where(.constrain-height) {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: 300px;
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    margin-right: auto;
    margin-left: auto;
  }

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

.product-media :is(deferred-media, product-model) {
  position: absolute;
}

@media screen and (max-width: 749px) {
  .product-media-container.constrain-height {
    max-height: none;
  }
}

@media screen and (min-width: 750px) {
  .product-media-container.constrain-height {
    --viewport-offset: var(--header-height, 100px);
    --constrained-min-height: 500px;
  }

  body:has(header-component[transparent]) .product-media-container.constrain-height {
    --viewport-offset: 0px;
  }

  .media-gallery--large-first-image .product-media-container:first-child,
  .media-gallery--two-column .product-media-container:only-child {
    /* First child spans 2 columns */
    grid-column: span 2;
  }
}

.product-media-container--model {
  /* Usefull when view in your space is shown */
  flex-direction: column;
}

.shopify-model-viewer-ui__controls-area {
  bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
}

.product-media-container img {
  aspect-ratio: inherit;
  object-fit: contain;
}

.product-media-container.media-fit-contain img {
  object-position: center center;
}

.product-media-container.media-fit {
  --product-media-fit: cover;

  img {
    object-fit: var(--product-media-fit);
  }
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

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

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

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

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

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

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

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

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

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

/* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
.product-media__image ~ * .deferred-media__poster-image {
  display: none;
}

/* If the product media is playing, hide the preview image */
.product-media-container:has(.deferred-media__playing) .product-media__image {
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
}

/* Deferred media & Product model  */
:is(product-model, deferred-media) {
  /* Height needed to make sure when it's set to be stretched, it takes the full height */
  height: 100%;
  width: 100%;
  position: relative;
}

product-model model-viewer,
/* Media that have a poster button sibling providing the size should be absolute-positioned.
Otherwise, it should be a block to rely on its own size */
:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Required to make sure the absolute position respects the padding of the wrapper: */
  padding: inherit;
}

:is(deferred-media, .video-placeholder-wrapper).border-style {
  /* Apply the border radius to the video */
  overflow: hidden;
}

deferred-media {
  /* The overflow hidden in the deferred-media won't let the button show the focus ring */
  &:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  @supports not selector(:focus-visible) {
    &:has(:focus) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }
}

.deferred-media__poster-button {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--video-aspect-ratio, auto);
}

.deferred-media__poster-button.deferred-media__playing {
  opacity: 0;
  transition: opacity 0.3s ease;
}

deferred-media img {
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

deferred-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

deferred-media[data-media-loaded] img {
  opacity: 0;
}

.deferred-media__poster-icon,
.video-placeholder-wrapper__poster-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deferred-media__poster-icon svg,
.video-placeholder-wrapper__poster-icon svg {
  width: var(--button-size);
  height: var(--button-size);
  color: var(--color-white);
  filter: drop-shadow(var(--shadow-button));

  &:hover {
    color: rgb(var(--color-white-rgb) / var(--opacity-80));
  }

  @media screen and (min-width: 750px) {
    width: 4rem;
    height: 4rem;
  }
}

deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
  /* only apply this on the video block not product media */
  object-fit: cover;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

.button-shopify-xr {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding-md);
}

.button-shopify-xr > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  margin-inline-end: var(--margin-md);
}

.button-shopify-xr[data-shopify-xr-hidden] {
  display: none;
}

/* Swatches */
.swatch {
  --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
  --min-width-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height: 16px;
  --min-width: 16px;

  /* mobile values */
  --scaling-factor: 0.5;
  --max-swatch-size: 28px;
  --max-pill-size: 20px;
  --max-filter-size: 32px;

  /* From the settings */
  --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
  --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

  /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
  --offset-scaled-width: calc(
    var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
  );
  --offset-scaled-height: calc(
    var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
  );
  --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

  /* width = min(m + sU, (m + s * W'/H' * M'), M) */
  --swatch-width: min(
    calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
    calc(var(--min-width) + var(--offset-scaled-width)),
    var(--max-swatch-size)
  );

  /* height = min(m + sV, (m + s * H'/W' * M'), M) */
  --swatch-height: min(
    calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
    calc(var(--min-height) + var(--offset-scaled-height)),
    var(--max-swatch-size)
  );

  display: block;
  background: var(--swatch-background);
  background-position: var(--swatch-focal-point, center);
  border-radius: var(--variant-picker-swatch-radius);
  border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
  width: var(--swatch-width);
  height: var(--swatch-height);

  /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
  background-size: var(--swatch-width) var(--swatch-height);

  &.swatch--unavailable {
    border-style: dashed;
  }

  &.swatch--unscaled {
    /* for when you want fixed sizing (e.g. pdp) */
    --swatch-width: var(--variant-picker-swatch-width);
    --swatch-height: var(--variant-picker-swatch-height);
  }

  &.swatch--filter {
    --swatch-width: var(--max-filter-size);
    --swatch-height: var(--max-filter-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  &.swatch--pill {
    --swatch-width: var(--max-pill-size);
    --swatch-height: var(--max-pill-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  /* swatches in filters and pills always have a border  */
  &.swatch--filter,
  &.swatch--pill {
    --style-border-swatch-width: var(--variant-picker-border-width);
    --style-border-swatch-style: var(--variant-picker-border-style);
    --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
  }

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

  @media screen and (min-width: 750px) {
    /* desktop values */
    --max-swatch-size: 32px;
    --max-pill-size: 16px;
    --max-filter-size: 28px;
    --scaling-factor: 0.65;
  }
}

.variant-picker .variant-option--buttons label:has(.swatch) {
  border-radius: var(--variant-picker-swatch-radius);
}

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

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

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

  width: 100%;

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

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

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

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

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

.variant-option--buttons legend,
.variant-option--dropdowns > label,
.variant-option[data-testid='variant-option-single'] {
  color: var(--variant-option-label-color, var(--color-foreground));
}

.variant-option__swatch-value {
  padding-inline-start: var(--padding-xs);
  color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
}

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

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

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

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

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

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

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

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

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

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

    background-color: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  color: var(--color-selected-variant-text);
  border-color: var(--color-selected-variant-border);
}

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

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

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

.variant-option__button-label--has-swatch:hover {
  outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
  outline-offset: var(--focus-outline-offset);
}

.variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
.variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
  stroke: var(--color-variant-border);
}

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

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

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
  .variant-option__button-label--has-swatch:has(:checked),
  .variant-option__button-label:has(:focus-visible) .swatch {
    outline: none;
    position: relative;
    overflow: visible;
  }

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

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

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

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

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

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

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

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

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

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

.price,
.compare-at-price,
.unit-price {
  white-space: nowrap;
}

.unit-price {
  display: block;
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.tax-note.tax-note.tax-note {
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

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

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

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

.compare-at-price {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
}

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

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

.price__hidden {
  display: none;
}

form.payment-terms {
  padding-top: 0.5em;
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
}

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

.card-gallery {
  position: relative;
}

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

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

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

/* Background overlay */
.background-overlay {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-overlay-color, rgb(0 0 0 / 15%));
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

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

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.checkbox {
  --checkbox-top: 50%;
  --checkbox-left: 1.5px;
  --checkbox-offset: 3px;
  --checkbox-path-opacity: 0;
  --checkbox-cursor: pointer;

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

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

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

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

  /* Outline is on the SVG instead, to allow it to have border-radius */
  &:focus-visible {
    outline: none;
  }

  &:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  &:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  &:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }
}

.checkbox__label {
  position: relative;
  display: inline-flex;
  cursor: var(--checkbox-cursor);
  line-height: var(--checkbox-size);
  min-width: var(--minimum-touch-target);
}

.checkbox .icon-checkmark {
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  flex-shrink: 0;
  border: var(--checkbox-border);
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
}

.checkbox__label-text {
  padding-inline-start: var(--checkbox-label-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox .icon-checkmark path {
  stroke: var(--color-background);
  opacity: var(--checkbox-path-opacity);
  transition: opacity var(--animation-speed) var(--animation-easing);
}

.checkbox__input:disabled + .checkbox__label {
  color: var(--input-disabled-text-color);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Quantity selector */
.quantity-selector {
  --quantity-selector-width: 124px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: var(--style-border-width-inputs) solid var(--color-input-border);
  border-radius: var(--style-border-radius-inputs);
  flex: 1 1 var(--quantity-selector-width);
  align-self: stretch;
}

.product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
  border-radius: var(--style-border-radius-buttons-secondary);
}

.quantity-selector :is(.quantity-minus, .quantity-plus) {
  /* Unset button styles */
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  flex-shrink: 0;
  color: var(--color-input-text);
}

.quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-inputs);
  border-end-start-radius: var(--style-border-radius-inputs);
}

.quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-inputs);
  border-end-end-radius: var(--style-border-radius-inputs);
}

.product-details .quantity-selector,
.quick-add-modal .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-minus,
.quick-add-modal .quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-buttons-primary);
  border-end-start-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-plus,
.quick-add-modal .quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-buttons-primary);
  border-end-end-radius: var(--style-border-radius-buttons-primary);
}

.quantity-selector .svg-wrapper {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.quantity-selector svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

:is(.quantity-minus, .quantity-plus):active .svg-wrapper {
  transform: scale(0.9);
}

.quantity-selector input[type='number'] {
  margin: 0;
  text-align: center;
  border: none;
  appearance: none;
  max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
  border-radius: var(--style-border-radius-buttons);
  color: var(--color-input-text);
  background-color: transparent;
}

/* Chrome, Safari, Edge, Opera */
.quantity-selector input[type='number']::-webkit-inner-spin-button,
.quantity-selector input[type='number']::-webkit-outer-spin-button {
  appearance: none;
}

/* Firefox */
.quantity-selector input[type='number'] {
  appearance: textfield;
}

/* Pills (used in facets and predictive search) */

.pills__pill {
  --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

  color: var(--color-foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  min-width: 48px;
  padding: 6px 12px;
  border-radius: var(--style-border-radius-pills);
  cursor: pointer;
  background-color: var(--pills-pill-background-color);
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  @media screen and (max-width: 749px) {
    padding: var(--padding-xs) var(--padding-md);
  }
}

.pills__pill > .svg-wrapper {
  --close-icon-opacity: 0.4;
  --icon-stroke-width: 1px;

  color: var(--color-foreground);
}

.pills__pill--swatch {
  @media screen and (max-width: 749px) {
    padding-inline-start: var(--padding-sm);
  }
}

.pills__pill--swatch .swatch {
  margin-right: -4px;
}

.pills__pill--desktop-small {
  @media screen and (min-width: 750px) {
    font-size: var(--font-size--xs);
  }
}

/* Fly to cart animation */
fly-to-cart {
  --offset-y: 10px;

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

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

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

  animation-duration: 0.6s;
}

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

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

  animation-duration: 0.8s;
}

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

  5% {
    opacity: 1;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

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

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

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes dialogZoom {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(1em);
  }
}

@keyframes thumbnail-selected {
  0%,
  100% {
    box-shadow: 0 0 0 2px transparent;
    scale: 0.9;
  }

  50% {
    box-shadow: 0 0 0 2px #000;
    scale: 1;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

.bubble {
  display: inline-flex;
  height: calc(var(--variant-picker-swatch-height) / 1.5);
  font-size: var(--font-size--xs);
  border-radius: 20px;
  min-width: 20px;
  padding: 0 6px;
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  color: var(--color-foreground);
  align-items: center;
  justify-content: center;
}

.bubble svg {
  width: 12px;
  height: 12px;
}

.top-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
}

@media screen and (min-width: 750px) {
  .top-shadow--mobile::before {
    display: none;
  }
}

.bottom-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */
}

@media screen and (min-width: 750px) {
  .bottom-shadow--mobile::before {
    display: none;
  }
}

.video-placeholder-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

:not(deferred-media) > .video-placeholder-wrapper {
  width: var(--video-placeholder-width);
}

.video-placeholder-wrapper > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

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

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

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

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

.group-block:has(> video-background-component),
.group-block:has(> .background-image-container) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

/* Animation transitions */
.transition-background-color {
  transition: background-color var(--animation-speed-medium) ease-in-out;
}

.transition-transform {
  transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
}

.transition-border-color {
  transition: border-color var(--animation-speed-medium) var(--animation-timing-hover);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

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

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

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

/* Product card title truncation - applied only to zoom-out view */
[product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

/* Product card title truncation - applied on mobile regardless of view */
@media screen and (max-width: 749px) {
  :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
}

.product-card:hover,
.collection-card:hover,
.predictive-search-results__card--product:hover,
.predictive-search-results__card:hover {
  position: relative;
  z-index: var(--layer-raised);
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

.product-recommendations {
  display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .burst {
    rotate: 20deg;
  }

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

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

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

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

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

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

  .tick {
    scale: 1.75;
  }

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

  .line {
    stroke-dashoffset: 1.5;
  }

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

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

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

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

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

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

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

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

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

/* Accordion icons */
.accordion__title svg,
.accordion summary svg,
.accordion details summary svg{
    color:black;
    stroke:black;
}
/* ==========================================
   ADD TO CART BUTTON
========================================== */

.product-form__submit,
button.product-form__submit,
.product-form__submit.button,
button[name="add"],
button[type="submit"][name="add"] {
    background: #7A503A !important;
    border: 2px solid #7A503A !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.product-form__submit:hover,
button.product-form__submit:hover,
.product-form__submit.button:hover,
button[name="add"]:hover,
button[type="submit"][name="add"]:hover {
    background: #654130 !important;
    border-color: #654130 !important;
    color: #ffffff !important;
}

/* ===========================================
   QUANTITY SELECTOR
=========================================== */

.quantity{
    border:2px solid #6B412C !important;
    border-radius:14px;
    background:#F6F1EA;
}

.quantity__button,
.quantity__input{
    color:#6B412C !important;
}

.quantity__button:hover{
    background:#EFE6DE;
}
/* ===========================================
   HORIZON PRODUCT QUANTITY SELECTOR
=========================================== */

quantity-selector,
.quantity-selector,
product-quantity,
.product-form__quantity,
.product-form__quantity quantity-selector {
  border: 2px solid #6b412c !important;
  border-radius: 14px !important;
  background: #f6f1ea !important;
  overflow: hidden;
}

/* Inner quantity container */
quantity-selector .quantity,
.quantity-selector .quantity,
.product-form__quantity .quantity {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Minus, number and plus */
quantity-selector button,
quantity-selector input,
.quantity-selector button,
.quantity-selector input,
.product-form__quantity button,
.product-form__quantity input,
.quantity__button,
.quantity__input {
  color: #6b412c !important;
  background: transparent !important;
  border: 0 !important;
}

/* Hover */
quantity-selector button:hover,
.quantity-selector button:hover,
.product-form__quantity button:hover,
.quantity__button:hover {
  background: rgba(107, 65, 44, 0.08) !important;
}

/* Remove theme outlines and inset borders */
quantity-selector::before,
quantity-selector::after,
.quantity-selector::before,
.quantity-selector::after,
.quantity::before,
.quantity::after {
  border: 0 !important;
  box-shadow: none !important;
}
/* ===========================================
   PRODUCT PAGE TITLE
=========================================== */

product-information .text-block.h3 > h1,
.product-information .text-block.h3 > h1,
.text-block.h3 > h1 {
  font-family: var(--liebe-heading-font) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(42px, 4.5vw, 40px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  color: #43291e !important;
  text-transform: none !important;
}
@media screen and (max-width: 749px) {
  product-information .text-block.h3 > h1,
  .product-information .text-block.h3 > h1,
  .text-block.h3 > h1 {
    font-size: 42px !important;
    line-height: 1.05 !important;
  }
}
/* =========================================================
   LIEBE LEATHER — INDIVIDUAL PRODUCT CARD IMAGE CONTROL
========================================================= */

/*
  DEFAULT IMAGE SETTINGS

  Scale:
  0.60 = much smaller
  0.75 = smaller
  0.85 = medium
  1.00 = original contain size
  1.10 = larger

  X position:
  positive = right
  negative = left

  Y position:
  positive = down
  negative = up
*/

.product-card .card-gallery {
  --product-image-scale: 0.55;
  --product-image-x: 0px;
  --product-image-y: -40px;

  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Let the Horizon gallery fill the square frame */

.product-card .card-gallery slideshow-component,
.product-card .card-gallery slideshow-container,
.product-card .card-gallery slideshow-slide,
.product-card .card-gallery .product-media-container,
.product-card .card-gallery .product-media {
  width: 100%;
  height: 100%;
}

/* ============================
   PRODUCT CARD IMAGE CONTROLS
============================ */

.card-gallery[class*="product-image-"] img{
    transition:0.3s;
    object-fit:contain !important;
}

/* ============================
   PRODUCT CARD IMAGE CONTROLS
============================ */

.card-gallery[class*="product-image-"] img{
    transition:0.3s;
    object-fit:contain !important;
}

/* Brandy Bottle */
.product-image-brandy-bottle-holder-dispenser img{
    transform:translate(0px,-60px) scale(.60);
}

/* Single Wine Bag */
.product-image-single-wine-bag img{
    transform:translate(0px,-60px) scale(.65);
}

/* Double Wine Bag */
.product-image-double-wine-bag img{
    transform:translate(0px,-60px) scale(.55);
}

/* Braai Bag */
.product-image-classic-braai-bag img{
    transform:translate(0px,-60px) scale(.60);
}

/* Apron */
.product-image-classic-apron img{
    transform:translate(0px,-60px) scale(.70);
}

/* Laptop Bag */
.product-image-classic-laptop-bag img{
    transform:translate(0px,-60px) scale(.70);
}

/* Fold-Over Laptop Bag */
.product-image-fold-over-laptop-bag img{
    transform:translate(0px,-60px) scale(.70);
}

/* Essential Backpack */
.product-image-essential-backpack img{
    transform:translate(-10px,-60px) scale(.70);
}

/* Heritage Backpack */
.product-image-heritage-backpack img{
    transform:translate(0px,-60px) scale(.62);
}

/* Rustic Backpack */
.product-image-rustic-backpack img{
    transform:translate(0px,-60px) scale(.70);
}

/* Fold Over Backpack */
.product-image-fold-over-backpack img{
    transform:translate(0px,-50px) scale(.70);
}

/* Large Backpack */
.product-image-large-backpack img{
    transform:translate(0px,-60px) scale(.80);
}

/* Duffel */
.product-image-classic-duffel img{
    transform:translate(0px,-70px) scale(.92);
}

/* Essential Tote */
.product-image-essential-tote-bag img{
    transform:translate(0px,-70px) scale(.65);
}

/* Versatile Pouch */
.product-image-versatile-pouch img{
    transform:translate(0px,-60px) scale(.60);
}

/* Everyday Bag */
.product-image-classic-everyday-bag img{
    transform:translate(0px,-60px) scale(.70);
}

/* Moonbag */
.product-image-classic-moonbag img{
    transform:translate(0px,-60px) scale(.75);
}

/* Double Zip */
.product-image-double-zip-crossbody-bag img{
    transform:translate(0px,-60px) scale(.70);
}

/* Crossbody */
.product-image-classic-crossbody-bag img{
    transform:translate(0px,-60px) scale(.60);
}

/* Round Sling */
.product-image-classic-round-sling-bag img{
    transform:translate(0px,-60px) scale(.65);
}

/* Sling */
.product-image-sling-bag img{
    transform:translate(0px,-60px) scale(.70);
}

/* Classic Tote */
.product-image-classic-tote img{
    transform:translate(0px,-60px) scale(.65);
}

/* ==================================================
   CLASSIC TOILETRY BAG — CENTRE INSIDE FULL CARD
================================================== */

.product-image-classic-toiletry-bag
slideshow-slide:not([hidden])
.product-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Centre the visible variant image */
.product-image-classic-toiletry-bag
slideshow-slide:not([hidden])
.product-media img {
  position: absolute !important;
  top: 70% !important;
  left: 50% !important;

  width: 90% !important;
  height: 90% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform: translate(-50%, -50%) scale(1.00) !important;
  transform-origin: center center !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* ==================================================
   CLASSIC LEATHER VATLAP — EXACT IMAGE TARGET
================================================== */

.product-media:has(img[alt="Classic Leather Vatlap"]) {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.product-media img[alt="Classic Leather Vatlap"] {
  position: absolute !important;
  top: 33% !important;
  left: 50% !important;

  width: 55% !important;
  height: 55% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform: translate(-50%, -50%) scale(1) !important;
  transform-origin: center center !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==================================================
   CLASSIC OVEN MITTS — EXACT IMAGE TARGET
================================================== */

.product-media:has(img[alt="Classic Oven Mitts"]) {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.product-media img[alt="Classic Oven Mitts"] {
  position: absolute !important;
  top: 40% !important;
  left: 50% !important;

  width: 75% !important;
  height: 75% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: center center !important;

  transform: translate(-50%, -50%) scale(1) !important;
  transform-origin: center center !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================
   PRODUCT CARD COLOUR SWATCHES
========================================================== */

body.template-collection product-card [class*="swatch"],
body.template-collection .product-grid__card [class*="swatch"] {
  gap: 8px;
}

/* Individual colour circle */
body.template-collection product-card [class*="swatch"] input + label,
body.template-collection .product-grid__card [class*="swatch"] input + label,
body.template-collection product-card .swatch,
body.template-collection .product-grid__card .swatch {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(67, 41, 30, 0.28);
  border-radius: 50%;
}

/* Selected colour */
body.template-collection product-card [class*="swatch"] input:checked + label,
body.template-collection .product-grid__card [class*="swatch"] input:checked + label {
  outline: 2px solid #43291e;
  outline-offset: 3px;
}
/*==========================================================
  LUXURY LINEN BACKGROUND
==========================================================*/

main[data-template="collection"]{

    background-color:#F4EFE7;

    background-image:

    /* vertical threads */
    repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.14) 0px,
        rgba(255,255,255,.14) 1px,
        transparent 1px,
        transparent 6px
    ),

    /* horizontal threads */
    repeating-linear-gradient(
        0deg,
        rgba(110,82,58,.035) 0px,
        rgba(110,82,58,.035) 1px,
        transparent 1px,
        transparent 6px
    ),

    /* soft lighting */
    radial-gradient(
        circle at top,
        rgba(255,255,255,.45),
        transparent 60%
    );

    background-size:
        6px 6px,
        6px 6px,
        100% 100%;

    background-attachment:fixed;
}
/* ==========================================================
   COLLECTION PAGE HEADING
========================================================== */

main[data-template="collection"] h1 {
  font-family: var(--liebe-heading-font), serif !important;
  font-size: clamp(46px, 5vw, 66px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #4A2C20 !important;
}
/* Filter, item count and sorting text */
main[data-template="collection"] summary,
main[data-template="collection"] button,
main[data-template="collection"] select,
main[data-template="collection"] .facets,
main[data-template="collection"] [class*="product-count"],
main[data-template="collection"] [class*="sort"] {
  color: #4A2C20 !important;
}
/* ==========================================================
   COLLECTION PRODUCT CARDS
========================================================== */

main[data-template="collection"] product-card,
main[data-template="collection"] .product-grid__card {
  display: block;
  padding: 18px !important;
  overflow: hidden;

  border-radius: 14px;

  background: #FCF8F2 !important;
  color: #43291E !important;

  box-shadow: 0 8px 22px rgba(67, 41, 30, 0.05);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

main[data-template="collection"] product-card:hover,
main[data-template="collection"] .product-grid__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(67, 41, 30, 0.15);
}


/* ==========================================================
   BLEND IMAGE AREA INTO PRODUCT CARD
========================================================== */

/* Remove the separate inner image-box appearance */
main[data-template="collection"] .card-gallery,
main[data-template="collection"] slideshow-component,
main[data-template="collection"] slideshow-container,
main[data-template="collection"] slideshow-slide,
main[data-template="collection"] .product-media-container,
main[data-template="collection"] .product-media {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep the gallery neat but make it part of the same card */
main[data-template="collection"] .card-gallery {
  overflow: hidden;
  border-radius: 10px;
}

/* Remove any white background directly behind the PNG */
main[data-template="collection"] .product-media img {
  background: transparent !important;
}
/* ==========================================================
   COLLECTION PRODUCT TEXT
========================================================== */

main[data-template="collection"] product-card h3,
main[data-template="collection"] .product-grid__card h3,
main[data-template="collection"] product-card [class*="title"] {
  font-family: var(--liebe-heading-font), serif !important;
  color: #43291E !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

main[data-template="collection"] product-card [class*="price"],
main[data-template="collection"] .product-grid__card [class*="price"],
main[data-template="collection"] product-price {
  color: #7A503A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Remove the white block behind the collection grid */
main[data-template="collection"] #ResultsList,
main[data-template="collection"] .main-collection-grid {
  background: transparent !important;
  background-color: transparent !important;
}
main[data-template="collection"] .product-grid {
  background: transparent !important;
}

main[data-template="collection"] product-card [class*="title"],
main[data-template="collection"] .product-grid__card [class*="title"] {
  min-height: 2.4em;
}
/* ==========================================================
   LIEBE LEATHER FOOTER — GLOBAL FIX
========================================================== */

.liebe-footer {
  width: 100%;
  overflow: hidden;
  background: #43291e !important;
  color: #f6f1ea !important;
}

.liebe-footer__inner {
  width: min(1400px, calc(100% - 64px));
  margin: 0 auto;
  padding: 70px 0 28px;
}

/* Brand area */
.liebe-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.liebe-footer__brand img {
  display: block;
  width: auto;
  max-width: 330px;
  max-height: 140px;
  object-fit: contain;
}

.liebe-footer__brand p {
  max-width: 620px;
  margin: 28px auto 0;
  color: #f6f1ea;
  font-size: 17px;
  line-height: 1.6;
}

/* Divider */
.liebe-footer__divider {
  width: 100%;
  height: 1px;
  margin: 54px 0;
  background: rgba(246, 241, 234, 0.22);
}

/* Footer menu columns */
.liebe-footer__menus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  width: 100%;
}

.liebe-footer__column {
  min-width: 0;
  text-align: center;
}

.liebe-footer__heading {
  margin: 0 0 24px;
  color: #b9855a !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.liebe-footer__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.liebe-footer__links li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.liebe-footer__links a {
  color: #f6f1ea !important;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  transition: opacity 180ms ease;
}

.liebe-footer__links a:hover {
  opacity: 0.7;
}

/* Social links */
.liebe-footer__social {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  gap: 54px;
  margin-top: 58px;
}

.liebe-footer__social a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #f6f1ea !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

/* ==========================================================
   FOOTER SOCIAL ICONS
========================================================== */

.liebe-footer__social svg,
.liebe-footer__social img {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain;
  color: #b9855a !important;
}

/* Instagram — outlined icon */
.liebe-footer__social a:nth-child(1) svg {
  fill: none !important;
  stroke: #b9855a !important;
  stroke-width: 1.8px !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Facebook — filled icon */
.liebe-footer__social a:nth-child(2) svg {
  fill: #b9855a !important;
  stroke: none !important;
}

/* Email — outlined icon */
.liebe-footer__social a:nth-child(3) svg {
  fill: none !important;
  stroke: #b9855a !important;
  stroke-width: 1.8px !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Prevent individual SVG paths from becoming solid blocks */
.liebe-footer__social a:nth-child(1) svg path,
.liebe-footer__social a:nth-child(1) svg rect,
.liebe-footer__social a:nth-child(1) svg circle,
.liebe-footer__social a:nth-child(3) svg path,
.liebe-footer__social a:nth-child(3) svg rect,
.liebe-footer__social a:nth-child(3) svg circle {
  fill: none !important;
  stroke: inherit !important;
}

/* Hover */
.liebe-footer__social a {
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.liebe-footer__social a:hover {
  opacity: 0.72;
  transform: translateY(-2px);
}

/* Footer bottom line */
.liebe-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 241, 234, 0.18);
  color: rgba(246, 241, 234, 0.8);
  font-size: 13px;
  text-align: center;
}

.liebe-footer__bottom p {
  margin: 0;
}

/* ==========================================================
   FOOTER — TABLET
========================================================== */

@media screen and (max-width: 989px) {
  .liebe-footer__inner {
    width: min(100% - 40px, 900px);
    padding-top: 60px;
  }

  .liebe-footer__menus {
    gap: 36px;
  }

  .liebe-footer__social {
    gap: 38px;
  }
}

/* ==========================================================
   FOOTER — MOBILE
========================================================== */

@media screen and (max-width: 749px) {
  .liebe-footer__inner {
    width: calc(100% - 36px);
    padding: 48px 0 24px;
  }

  .liebe-footer__brand img {
    max-width: 230px;
    max-height: 100px;
  }

  .liebe-footer__brand p {
    margin-top: 22px;
    font-size: 15px;
  }

  .liebe-footer__divider {
    margin: 38px 0;
  }

  .liebe-footer__menus {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .liebe-footer__column {
    text-align: center;
  }

  .liebe-footer__heading {
    margin-bottom: 18px;
  }

  .liebe-footer__links {
    gap: 11px;
  }

  .liebe-footer__links a {
    font-size: 15px;
  }

  .liebe-footer__social {
    flex-wrap: wrap;
    gap: 30px 38px;
    margin-top: 42px;
  }

  @media screen and (max-width: 749px) {
  .liebe-footer__social svg,
  .liebe-footer__social img {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
  }
}

  .liebe-footer__bottom {
    margin-top: 36px;
    padding-top: 22px;
  }
}
/* ==========================================================
   YOU MAY ALSO LIKE HEADING
========================================================== */

.section-resource-list__content > .text-block h3,
.section-resource-list__content .text-block.h4 h3 {
  font-family: var(--font-h1--family), Georgia, serif !important;
  font-style: var(--font-h1--style, normal) !important;
  font-weight: 400 !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: #4a2c20 !important;
  text-transform: none !important;
  margin: 0 0 28px !important;
}
/* ==========================================================
   QUICK ADD / ADD-TO-CART ICON FIX
========================================================== */

.quick-add__button .add-to-cart-icon,
.quick-add__button .svg-wrapper.add-to-cart-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;

  color: #7a503c !important;
}

/* Size the actual SVG */
.quick-add__button .add-to-cart-icon svg,
.quick-add__button .svg-wrapper.add-to-cart-icon svg {
  display: block !important;

  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;

  color: inherit !important;
}

/* Restore the cart/bag drawing */
.quick-add__button .add-to-cart-icon svg path,
.quick-add__button .add-to-cart-icon svg line,
.quick-add__button .add-to-cart-icon svg rect,
.quick-add__button .add-to-cart-icon svg circle {
  stroke: currentColor !important;
  stroke-width: 1.7px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Keep the quick-add circle centred */
.quick-add__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* ==========================================================
   COLLECTION HERO — TITLE + DESCRIPTION
========================================================== */

/* Centre the heading area */
main[data-template="collection"] .main-collection-grid__title,
main[data-template="collection"] .collection-hero,
main[data-template="collection"] .collection-hero__inner,
main[data-template="collection"] .collection-description {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}

/* Collection title */
main[data-template="collection"] h1 {
  display: block !important;
  width: 100% !important;

  margin: 0 auto 24px !important;
  padding: 0 !important;

  font-family: var(--liebe-heading-font), serif !important;
  font-size: clamp(48px, 5vw, 60px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;

  color: #4a2c20 !important;
  text-align: center !important;
}

/* Give the intro area balanced spacing */
main[data-template="collection"] .main-collection-grid__title {
  padding-top: 56px !important;
  padding-bottom: 52px !important;
}

/* Subtle divider between introduction and products */
main[data-template="collection"] .main-collection-grid__title::after {
  content: "";
  display: block;

  width: min(720px, 80%);
  height: 1px;

  margin: 42px auto 0;

  background: rgba(74, 44, 32, 0.18);
}

/* Keep filters slightly separated from the divider */
main[data-template="collection"] .facets,
main[data-template="collection"] [class*="facets-controls"],
main[data-template="collection"] [class*="collection-controls"] {
  margin-top: 6px;
}

/* Mobile */
@media screen and (max-width: 749px) {
  main[data-template="collection"] .main-collection-grid__title {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  main[data-template="collection"] h1 {
    font-size: 42px !important;
    margin-bottom: 18px !important;
  }
main[data-template="collection"]
[data-testid="section-content"]
> rte-formatter.rte {
    max-width:92% !important;
}

main[data-template="collection"]
[data-testid="section-content"]
> rte-formatter.rte p {
    font-size:15px !important;
    line-height:1.65 !important;
}

  main[data-template="collection"] .main-collection-grid__title::after {
    width: 88%;
    margin-top: 30px;
  }
}
/* ==========================================================
   COLLECTION DESCRIPTION ONLY
========================================================== */

main[data-template="collection"]
[data-testid="section-content"]
> rte-formatter.rte {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

main[data-template="collection"]
[data-testid="section-content"]
> rte-formatter.rte p {
    margin: 0 auto !important;

    font-size: 17px !important;
    line-height: 1.75 !important;
    letter-spacing: .005em !important;

    color: #5d493f !important;
    text-align: center !important;
}

/* Product titles & prices stay left aligned */

main[data-template="collection"] product-card .text-block,
main[data-template="collection"] product-card .text-block p,
main[data-template="collection"] product-card product-price {
    text-align: left !important;
}
.text-block:has(> h1) {
    width: 100% !important;
    max-width: 100% !important;

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

    text-align: center !important;
}

/* ==========================================================
   OUR STORY PAGE
========================================================== */

main[data-template="page"] {

  --story-brown: #4a2c20;
  --story-text: #5d493f;

}

main[data-template="page"] .rte {

  max-width: 780px;
  margin: 0 auto;
  text-align: center;

}

main[data-template="page"] h1{

    font-family: var(--liebe-heading-font), serif;
    font-size: clamp(52px,6vw,68px);
    font-weight:400;
    color:var(--story-brown);

    margin-bottom:20px;

    text-align:center;

}

main[data-template="page"] h2{

    font-family: var(--liebe-heading-font), serif;
    font-size:38px;
    font-weight:400;

    color:var(--story-brown);

    margin-top:80px;
    margin-bottom:28px;

    text-align:center;

}

main[data-template="page"] p{

    font-size:18px;
    line-height:1.9;

    color:var(--story-text);

    margin-bottom:24px;

}

main[data-template="page"] blockquote{

    font-family: var(--liebe-heading-font), serif;

    font-size:30px;

    color:var(--story-brown);

    border:none;

    margin:60px auto;

    max-width:700px;

    font-style:italic;

}

main[data-template="page"] hr{

    border:none;

    border-top:1px solid rgba(74,44,32,.18);

    width:120px;

    margin:70px auto;

}
/* OUR STORY PAGE TITLE */

main[data-template="page"] h1{
    font-family: var(--liebe-heading-font), serif !important;
    font-size: clamp(52px,6vw,64px) !important;
    font-weight:400 !important;
    color:#4a2c20 !important;

    letter-spacing:-0.03em;
    line-height:1.05;

    text-align:center;
    margin-bottom:18px;
}
/* ==========================================================
   OUR STORY PAGE
========================================================== */

/* Small heading above page title */

.liebe-page-label{
    text-align:center;
    font-size:13px;
    letter-spacing:0.35em;
    text-transform:uppercase;

    color:#8b6a58;

    margin-top:40px;
    margin-bottom:12px;

    font-weight:600;
}

/* Main title */

main[data-template="page"] h1{
    font-family: var(--liebe-heading-font), serif !important;

    font-size:clamp(56px,6vw,68px);
    font-weight:400;

    color:#4a2c20;

    text-align:center;

    line-height:1.05;
    letter-spacing:-0.03em;

    margin-bottom:40px;
}

/* Paragraph styling */

main[data-template="page"] .rte{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

main[data-template="page"] .rte p{
    font-size:18px;
    line-height:1.9;
    color:#5d493f;

    margin-bottom:34px;
}
/* ==========================================
   LUXURY HEART DIVIDER
========================================== */

.liebe-heart-divider{
    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

    width:100%;
    margin:70px auto;

    color:#8b6a58;
    font-size:24px;
    line-height:1;
}

.liebe-heart-divider::before,
.liebe-heart-divider::after{
    content:"";
    width:70px;
    height:1px;

    background:rgba(139,106,88,.35);

    margin:0 18px;
}
.liebe-heart-divider + hr{
    display:none !important;
}

/* =====================================================
   LEGAL PAGES
   Privacy • Terms • Returns • Refunds
===================================================== */

.shopify-policy__container{
    max-width: 820px !important;
    margin: 80px auto !important;
    padding: 0 30px !important;
}

.shopify-policy__title{
    text-align:center;
    margin-bottom:70px;
}

.shopify-policy__title h1{

    font-family: var(--liebe-heading-font), serif !important;

    font-size: clamp(48px,6vw,64px);

    font-weight:400;

    color:#4a2c20;

    letter-spacing:-0.03em;

    margin:20px 0;
}

/* Remove the old hard-coded label */
.shopify-policy__title::before {
  content: none !important;
}

/* Privacy Policy label */
body:has(.shopify-policy__title h1) .shopify-policy__title::before {
  display: block;
  margin-bottom: 18px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #8b6b56;
}

.shopify-policy h3{

    color:#4a2c20;

    margin-top:45px;

    margin-bottom:15px;
}

.shopify-policy p,

.shopify-policy li{

    color:#5d493f;

    font-size:18px;

    line-height:1.9;
}

.shopify-policy ul{

    margin:20px 0 30px 24px;
}

.shopify-policy li{

    margin-bottom:14px;
}

.shopify-policy a{

    color:#7b4a31;

    text-decoration:none;

    border-bottom:1px solid rgba(123,74,49,.3);

    transition:.25s;
}

.shopify-policy a:hover{

    color:#4a2c20;

    border-bottom-color:#4a2c20;
}

.shopify-policy hr{

    margin:60px auto;

    width:180px;

    border:none;

    border-top:1px solid rgba(74,44,32,.18);
}
/* =====================================================
   LEGAL PAGE SECTION HEADINGS
===================================================== */

/* Main section headings */
.shopify-policy__body h2,
.shopify-policy__body h3,
.shopify-policy__body h4 {
  font-family: var(--liebe-heading-font), Georgia, serif !important;
  font-weight: 400 !important;
  color: #4a2c20 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  text-transform: none !important;
}

/* Large section headings */
.shopify-policy__body h2 {
  font-size: clamp(34px, 4vw, 46px) !important;
  margin-top: 64px !important;
  margin-bottom: 22px !important;
}

/* Smaller subheadings */
.shopify-policy__body h3 {
  font-size: clamp(25px, 3vw, 32px) !important;
  margin-top: 44px !important;
  margin-bottom: 16px !important;
}

.shopify-policy__body h4 {
  font-size: 23px !important;
  margin-top: 32px !important;
  margin-bottom: 14px !important;
}

/* Keep bold labels inside paragraphs and lists readable */
.shopify-policy__body p strong,
.shopify-policy__body li strong {
  font-family: inherit !important;
  font-weight: 700 !important;
  color: #4a2c20 !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .shopify-policy__body h2 {
    font-size: 32px !important;
    margin-top: 48px !important;
  }

  .shopify-policy__body h3 {
    font-size: 25px !important;
    margin-top: 36px !important;
  }
}
/* =====================================================
   POLICY PAGE LABELS
===================================================== */

.shopify-policy__title::before {
  display: block;
  margin-bottom: 18px;

  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #8b6b56;
}

/* Privacy Policy */
body:has(a[href*="/policies/privacy-policy"][aria-current="page"])
.shopify-policy__title::before {
  content: "PRIVACY POLICY";
}

/* Terms of Service */
body:has(a[href*="/policies/terms-of-service"][aria-current="page"])
.shopify-policy__title::before {
  content: "TERMS OF SERVICE";
}

/* Refund Policy */
body:has(a[href*="/policies/refund-policy"][aria-current="page"])
.shopify-policy__title::before {
  content: "RETURNS & REFUNDS";
}

/* Shipping Policy */
body:has(a[href*="/policies/shipping-policy"][aria-current="page"])
.shopify-policy__title::before {
  content: "SHIPPING POLICY";
}
/* Returns & Refunds */

.refund-policy h2,
.refund-policy h3{
    font-family: var(--liebe-heading-font), serif;
    color:#4a2c20;
    font-weight:400;
}

.refund-policy h2{
    font-size:42px;
    text-align:center;
    margin-bottom:28px;
}

.refund-policy h3{
    font-size:30px;
    margin-top:50px;
    margin-bottom:16px;
}

.refund-policy p{
    color:#5d493f;
    font-size:18px;
    line-height:1.9;
}

.refund-policy ul{
    margin:20px 0;
    padding-left:25px;
}

.refund-policy li{
    margin-bottom:12px;
}
/* Heart divider */
.heart-divider {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 55px auto;
    color: #8b6b56;
    font-size: 22px;
}

.heart-divider::before,
.heart-divider::after {
    content: "";
    width: 90px;
    height: 1px;
    background: rgba(74,44,32,.25);
}

.heart-divider::before {
    margin-right: 20px;
}

.heart-divider::after {
    margin-left: 20px;
}
/* Hide horizontal rules on legal pages */
.shopify-policy hr,
.rte hr {
    display: none !important;
}

/* ==========================================
   LIEBE LEATHER VARIANT BUTTONS
========================================== */

/* Button background */
.variant-option__button-label__pill{
    background:#FFFBF7 !important;
    border:1px solid rgba(139,90,66,.28) !important;
    border-radius:16px !important;

    transition:.25s ease;
}

/* Button text */
.variant-option__button-label__text{
    color:#5D493F !important;
    font-weight:500;
    z-index:2;
}

/* Hover */
.variant-option__button-label:hover .variant-option__button-label__pill{
    background:#F6EEE7 !important;
    border-color:#8B5A42 !important;
}

/* Selected */
.variant-option__button-label input:checked
~ .variant-option__button-label__pill{
    background:#8B5A42 !important;
    border-color:#8B5A42 !important;

    box-shadow:0 8px 22px rgba(139,90,66,.18);
}

/* Selected text */
.variant-option__button-label input:checked
~ .variant-option__button-label__text{
    color:#FFFDFB !important;
}

/* ==========================================================
   FIX ANNOUNCEMENT BAR ALIGNMENT
========================================================== */

aside.announcement-bar,
announcement-bar-component,
announcement-bar-component slideshow-component,
announcement-bar-component slideshow-slides,
announcement-bar-component slideshow-slide {
  width: 100% !important;
  max-width: none !important;
}

/* Centre the announcement-bar contents */
aside.announcement-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-inline: 0 !important;
}

/* Make each announcement slide use the full available width */
announcement-bar-component slideshow-slide {
  flex: 0 0 100% !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Centre the actual message */
.announcement-bar__text {
  display: block !important;
  width: 100% !important;
  max-width: none !important;

  margin: 0 auto !important;
  padding-inline: 20px !important;

  text-align: center !important;
}

/* ==========================================================
   LIEBE LEATHER — CUSTOM CONTACT PAGE
========================================================== */

.liebe-contact-page {
  padding: 88px 24px 100px;

  background-color: #f4eee7;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(74, 44, 32, 0.025) 0,
      rgba(74, 44, 32, 0.025) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(74, 44, 32, 0.018) 0,
      rgba(74, 44, 32, 0.018) 1px,
      transparent 1px,
      transparent 5px
    );
}

.liebe-contact-page__inner {
  width: min(1180px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(60px, 7vw, 105px);
  align-items: center;
}

/* Introduction */

.liebe-contact-page__intro {
  max-width: 500px;
  color: #655046;
}

.liebe-contact-page__label {
  margin-bottom: 20px;

  color: #9b6a4d;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.liebe-contact-page__intro h1 {
  margin: 0 0 30px;

  font-family: var(--liebe-heading-font), Georgia, serif;
  font-size: clamp(52px, 5.5vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.04em;

  color: #4a2c20;
}

.liebe-contact-page__intro p {
  margin: 0 0 20px;

  color: #655046;
  font-size: 17px;
  line-height: 1.8;
}

.liebe-contact-page__detail {
  display: flex;
  flex-direction: column;
  gap: 5px;

  margin-top: 28px;
}

.liebe-contact-page__detail strong {
  color: #4a2c20;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.liebe-contact-page__detail a,
.liebe-contact-page__detail span {
  color: #6a3d2c;
  font-size: 17px;
  text-decoration: none;
}

.liebe-contact-page__detail a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Heart divider */

.liebe-contact-page__divider {
  display: flex;
  align-items: center;

  margin-top: 44px;

  color: #9b6a4d;
  font-size: 21px;
  line-height: 1;
}

.liebe-contact-page__divider::before,
.liebe-contact-page__divider::after {
  content: "";
  width: 66px;
  height: 1px;
  background: rgba(155, 106, 77, 0.38);
}

.liebe-contact-page__divider::before {
  margin-right: 16px;
}

.liebe-contact-page__divider::after {
  margin-left: 16px;
}

/* Form card */

.liebe-contact-page__form-card {
  padding: clamp(30px, 4vw, 48px);

  background: #fbf6f0;
  border: 1px solid rgba(123, 80, 60, 0.18);
  border-radius: 24px;

  box-shadow:
    0 18px 45px rgba(74, 44, 32, 0.08),
    0 4px 12px rgba(74, 44, 32, 0.04);
}

.liebe-contact-page__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.liebe-contact-page__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.liebe-contact-page__form input,
.liebe-contact-page__form textarea {
  width: 100%;
  margin: 0;
  padding: 17px 20px;

  color: #4a2c20;
  background: #fffdf9;

  border: 1px solid rgba(139, 90, 66, 0.28);
  border-radius: 15px;
  outline: none;

  font: inherit;
  font-size: 16px;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.liebe-contact-page__form input {
  min-height: 62px;
}

.liebe-contact-page__form textarea {
  min-height: 230px;
  resize: vertical;
}

.liebe-contact-page__form input::placeholder,
.liebe-contact-page__form textarea::placeholder {
  color: #8b7569;
  opacity: 1;
}

.liebe-contact-page__form input:focus,
.liebe-contact-page__form textarea:focus {
  background: #ffffff;
  border-color: #8b5a42;
  box-shadow: 0 0 0 3px rgba(139, 90, 66, 0.12);
}

.liebe-contact-page__form button {
  width: 100%;
  min-height: 60px;
  padding: 18px 26px;

  color: #fffaf5;
  background: #7b452f;

  border: 1px solid #7b452f;
  border-radius: 15px;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;

  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.liebe-contact-page__form button:hover {
  background: #5e321f;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(94, 50, 31, 0.18);
}

.liebe-contact-page__success,
.liebe-contact-page__error {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.liebe-contact-page__success {
  color: #3d5d3c;
  background: #edf4e9;
}

.liebe-contact-page__error {
  color: #7a2d24;
  background: #f8e9e6;
}

/* Mobile */

@media screen and (max-width: 749px) {
  .liebe-contact-page {
    padding: 48px 14px 64px;
  }

  .liebe-contact-page__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .liebe-contact-page__intro {
    max-width: none;
    text-align: center;
  }

  .liebe-contact-page__intro h1 {
    font-size: 48px;
  }

  .liebe-contact-page__detail {
    align-items: center;
  }

  .liebe-contact-page__divider {
    justify-content: center;
  }

  .liebe-contact-page__form-card {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .liebe-contact-page__row {
    grid-template-columns: 1fr;
  }

  .liebe-contact-page__form textarea {
    min-height: 190px;
  }
}

/* ==========================================================
   MOBILE PRODUCT CARD IMAGE CONTROLS
========================================================== */

@media screen and (max-width: 749px) {

  .card-gallery[class*="product-image-"] img {
    object-fit: contain !important;
    transition: 0.3s;
  }

  /* Brandy Bottle */
  .product-image-brandy-bottle-holder-dispenser img {
    transform: translate(0px, -20px) scale(.65) !important;
  }

  /* Single Wine Bag */
  .product-image-single-wine-bag img {
    transform: translate(0px, -20px) scale(.72) !important;
  }

  /* Double Wine Bag */
  .product-image-double-wine-bag img {
    transform: translate(0px, -20px) scale(.62) !important;
  }

  /* Braai Bag */
  .product-image-classic-braai-bag img {
    transform: translate(0px, -20px) scale(.62) !important;
  }

  /* Apron */
  .product-image-classic-apron img {
    transform: translate(0px, -20px) scale(.72) !important;
  }

  /* Laptop Bag */
  .product-image-classic-laptop-bag img {
    transform: translate(0px, -20px) scale(.74) !important;
  }

  /* Fold-Over Laptop Bag */
  .product-image-fold-over-laptop-bag img {
    transform: translate(0px, -20px) scale(.74) !important;
  }

  /* Essential Backpack */
  .product-image-essential-backpack img {
    transform: translate(-5px, -20px) scale(.72) !important;
  }

  /* Heritage Backpack */
  .product-image-heritage-backpack img {
    transform: translate(0px, -20px) scale(.66) !important;
  }

  /* Rustic Backpack */
  .product-image-rustic-backpack img {
    transform: translate(0px, -20px) scale(.72) !important;
  }

  /* Fold Over Backpack */
  .product-image-fold-over-backpack img {
    transform: translate(0px, -15px) scale(.72) !important;
  }

  /* Large Backpack */
  .product-image-large-backpack img {
    transform: translate(0px, -20px) scale(.80) !important;
  }

  /* Duffel */
  .product-image-classic-duffel img {
    transform: translate(0px, -22px) scale(.88) !important;
  }

  /* Essential Tote */
  .product-image-essential-tote-bag img {
    transform: translate(0px, -20px) scale(.70) !important;
  }

  /* Versatile Pouch */
  .product-image-versatile-pouch img {
    transform: translate(0px, -20px) scale(.64) !important;
  }

  /* Everyday Bag */
  .product-image-classic-everyday-bag img {
    transform: translate(0px, -20px) scale(.72) !important;
  }

  /* Moonbag */
  .product-image-classic-moonbag img {
    transform: translate(0px, -20px) scale(.74) !important;
  }

  /* Double Zip */
  .product-image-double-zip-crossbody-bag img {
    transform: translate(0px, -20px) scale(.72) !important;
  }

  /* Crossbody */
  .product-image-classic-crossbody-bag img {
    transform: translate(0px, -20px) scale(.66) !important;
  }

  /* Round Sling */
  .product-image-classic-round-sling-bag img {
    transform: translate(0px, -20px) scale(.68) !important;
  }

  /* Sling */
  .product-image-sling-bag img {
    transform: translate(0px, -20px) scale(.72) !important;
  }

  /* Classic Tote */
  .product-image-classic-tote img {
    transform: translate(0px, -20px) scale(.68) !important;
  }
}
/* ==========================================================
   MOBILE COLLECTION TEXT
========================================================== */

@media screen and (max-width: 749px) {

  /* Product title only */
  main[data-template="collection"]
  product-card
  .text-block:not(product-price)
  p {
    font-size: 16px !important;
    line-height: 1.18 !important;
  }

  /* Product price */
  main[data-template="collection"]
  product-card
  product-price,
  main[data-template="collection"]
  product-card
  product-price * {
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
  }
}
@media screen and (max-width: 749px) {
  body.template-collection product-card .swatch,
  body.template-collection .product-grid__card .swatch {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }
}
/* ==========================================================
   MOBILE PRODUCT TITLE + PRICE SPACING
========================================================== */

@media screen and (max-width: 749px) {

  main[data-template="collection"]
  product-card
  .text-block:has(> p[role="heading"]) {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 4px !important;
  }

  main[data-template="collection"]
  product-card
  .text-block:has(> p[role="heading"]) p {
    margin-bottom: 0 !important;
  }

  main[data-template="collection"]
  product-card
  product-price {
    margin-top: 0 !important;
  }
}
/* ==========================================================
   MOBILE QUICK ADD BUTTON POSITION
========================================================== */

@media screen and (max-width: 749px) {

  main[data-template="collection"] .quick-add__button {
    position: absolute !important;

    top: 2px !important;
    right: 2px !important;

    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;

    padding: 0 !important;
    border-radius: 50% !important;

    transform: none !important;
    z-index: 5 !important;
  }
}
/* ==========================================================
   MOBILE STANDARD PAGES
   Leather Care • Our Story • Other normal pages
========================================================== */

@media screen and (max-width: 749px) {

  /* Main page title */
  main[data-template="page"] h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  /* Section headings */
  main[data-template="page"] h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  /* Smaller headings */
  main[data-template="page"] h3 {
    font-size: 20px !important;
  }

  /* Body text */
  main[data-template="page"] p,
  main[data-template="page"] li {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

}
/* ==========================================================
   LEATHER CARE — FINAL THOUGHT
========================================================== */

main[data-template="page"] h1,
main[data-template="page"] h2,
main[data-template="page"] h3,
main[data-template="page"] strong,
main[data-template="page"] em {
  color: #4a2c20 !important;
}
/* ==========================================================
   MOBILE PAGE LISTS
========================================================== */

@media screen and (max-width: 749px) {

  main[data-template="page"] ul,
  main[data-template="page"] ol {
    max-width: 320px;
    margin: 20px auto !important;
    padding-left: 24px !important;

    text-align: left !important;
  }

  main[data-template="page"] li {
    text-align: left !important;
    margin-bottom: 12px !important;
    line-height: 1.7 !important;
  }

}
/* ==========================================================
   PAGE LIST ALIGNMENT — DESKTOP + MOBILE
========================================================== */

/* Desktop */
@media screen and (min-width: 750px) {
  main[data-template="page"] .rte ul,
  main[data-template="page"] .rte ol {
    width: fit-content !important;
    max-width: 760px !important;

    margin: 24px auto !important;
    padding-left: 26px !important;

    text-align: left !important;
  }

  main[data-template="page"] .rte li {
    text-align: left !important;
    padding-left: 4px !important;
    margin-bottom: 10px !important;
  }
}

/* Mobile */
@media screen and (max-width: 749px) {
  main[data-template="page"] .rte ul,
  main[data-template="page"] .rte ol {
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;

    margin: 20px auto !important;
    padding-left: 22px !important;

    text-align: left !important;
  }

  main[data-template="page"] .rte li {
    text-align: left !important;
    padding-left: 3px !important;
    margin-bottom: 12px !important;
  }
}
/* ==========================================================
   MOBILE FINAL QUOTE
========================================================== */

@media screen and (max-width: 749px) {

  main[data-template="page"] blockquote {
    max-width: 300px !important;

    margin: 48px auto !important;
    padding: 0 10px !important;

    font-size: 16px !important;
    line-height: 1.55 !important;
    letter-spacing: -0.01em !important;
  }

  main[data-template="page"] blockquote p {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  /* Signature */
  main[data-template="page"] blockquote footer,
  main[data-template="page"] blockquote cite {
    font-size: 13px !important;
    letter-spacing: .22em !important;
    margin-top: 28px !important;
  }

  /* Decorative quotation mark */
  main[data-template="page"] blockquote::before {
    font-size: 64px !important;
    opacity: .12 !important;
  }

}
/* ==========================================================
   LIEBE LEATHER — FINAL HOMEPAGE MOBILE POLISH
========================================================== */

@media screen and (max-width: 749px) {

  /* --------------------------------------------------------
     HOMEPAGE TYPOGRAPHY HIERARCHY
  -------------------------------------------------------- */

  /* Main hero heading */
  main[data-template="index"] .liebe-hero h1,
  main[data-template="index"] [class*="hero"] h1 {
    font-size: 48px !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
  }

  /* Main section headings:
     Featured Collections
     Handcrafted with Purpose
     Featured Pieces
     Why Liebe Leather?
     Stay Connected
  */
  main[data-template="index"] h2 {
    font-size: 38px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
  }

  /* Smaller headings, including product names */
  main[data-template="index"] h3 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  /* General homepage wording */
  main[data-template="index"] p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  /* Eyebrow labels:
     OUR CRAFT, SHOP, OUR PROMISE, etc.
  */
  main[data-template="index"] [class*="label"],
  main[data-template="index"] [class*="eyebrow"],
  main[data-template="index"] [class*="kicker"] {
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.28em !important;
  }

  /* --------------------------------------------------------
     HERO
  -------------------------------------------------------- */

  main[data-template="index"] .liebe-hero p,
  main[data-template="index"] [class*="hero"] p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  main[data-template="index"] .liebe-hero .button,
  main[data-template="index"] [class*="hero"] .button {
    min-height: 56px !important;
    padding-block: 15px !important;
  }

  /* --------------------------------------------------------
     FEATURED PRODUCT TITLES AND PRICES
  -------------------------------------------------------- */

  main[data-template="index"] product-card p[role="heading"],
  main[data-template="index"] product-card .text-block p {
    font-size: 16px !important;
    line-height: 1.18 !important;
  }

  main[data-template="index"] product-card product-price,
  main[data-template="index"] product-card product-price * {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* --------------------------------------------------------
     FINAL QUOTE
  -------------------------------------------------------- */

  main[data-template="index"] blockquote {
    width: min(100%, 350px) !important;
    max-width: 350px !important;
    margin: 44px auto !important;
    padding-inline: 14px !important;

    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em !important;
  }

  main[data-template="index"] blockquote p {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  main[data-template="index"] blockquote cite,
  main[data-template="index"] blockquote footer {
    margin-top: 26px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2em !important;
  }

  main[data-template="index"] blockquote::before {
    font-size: 58px !important;
    opacity: 0.1 !important;
  }

  /* --------------------------------------------------------
     NEWSLETTER
  -------------------------------------------------------- */

  main[data-template="index"] input[type="email"] {
    min-height: 56px !important;
    height: 56px !important;
    padding-block: 14px !important;
    font-size: 16px !important;
  }

  main[data-template="index"] form button[type="submit"] {
    min-height: 56px !important;
    padding-block: 14px !important;
  }

  /* --------------------------------------------------------
     FOOTER SECTION LABELS
  -------------------------------------------------------- */

  .liebe-footer__heading {
    font-size: 14px !important;
  }
}
/* ==========================================================
   MOBILE COLLECTION DESCRIPTION
========================================================== */

@media screen and (max-width: 749px) {

  main[data-template="collection"]
  [data-testid="section-content"] > rte-formatter.rte p {

    font-size: 15px !important;
    line-height: 1.8 !important;
    max-width: 340px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

}
  /* --------------------------------------------------------
     MAIN PRODUCT IMAGE
  -------------------------------------------------------- */

  main[data-template="product"] media-gallery {
    width: 100% !important;
  }

  main[data-template="product"]
  media-gallery
  .product-media-container {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }

  main[data-template="product"]
  media-gallery
  .product-media {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
  }

  main[data-template="product"]
  media-gallery
  .product-media__image {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 78% !important;
    height: 78% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: translate(-50%, -50%) !important;
    transform-origin: center !important;

    margin: 0 !important;
    padding: 0 !important;
  }


/* ==========================================================
   MOBILE — YOU MAY ALSO LIKE IMAGES
   Centre images and make them fill the frame
========================================================== */

@media screen and (max-width: 749px) {

  /* Square recommendation image frame */
  main[data-template="product"]
  .section-resource-list product-card
  .card-gallery {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }

  /* Make every gallery layer fill the frame */
  main[data-template="product"]
  .section-resource-list product-card
  .card-gallery slideshow-component,

  main[data-template="product"]
  .section-resource-list product-card
  .card-gallery slideshow-container,

  main[data-template="product"]
  .section-resource-list product-card
  .card-gallery slideshow-slide,

  main[data-template="product"]
  .section-resource-list product-card
  .card-gallery .product-media-container,

  main[data-template="product"]
  .section-resource-list product-card
  .card-gallery .product-media {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Centre the actual visible product image */
  main[data-template="product"]
  .section-resource-list product-card
  .card-gallery slideshow-slide:not([hidden])
  .product-media__image,

  main[data-template="product"]
  .section-resource-list product-card
  .card-gallery slideshow-slide:not([hidden])
  .product-media img {
    position: absolute !important;

    top: 35% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: 82% !important;
    height: 82% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    translate: none !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;

    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ==========================================================
   MOBILE — TOILETRY BAG RECOMMENDATION IMAGE
========================================================== */

@media screen and (max-width: 749px) {

  main[data-template="product"]
  .section-resource-list product-card
  .product-image-classic-toiletry-bag
  slideshow-slide:not([hidden])
  .product-media img {
    top: 70% !important;
    left: 50% !important;

    width: 110% !important;
    height: 110% !important;

    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* ==========================================================
   LIEBE LEATHER
   INDIVIDUAL PRODUCT COLOUR IMAGE CONTROLS — DESKTOP
   ==========================================================

   HOW TO EDIT:

   translate(X, Y) scale(SIZE)

   X POSITION:
      0px = centre
     20px = move RIGHT
    -20px = move LEFT

   Y POSITION:
      0px = centre
     20px = move DOWN
    -20px = move UP

   SCALE:
     .50 = smaller
     .60 = smaller
     .70 = medium
     .80 = larger
     .90 = very large

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

@media screen and (min-width: 750px) {


  /* ========================================================
     CLASSIC APRON
  ======================================================== */

  /* TAN */
  img.product-media__image[src*="apron-tan"] {
    transform: translate(0px, -50px) scale(.60) !important;
    transform-origin: center center !important;
  }

  /* GREY */
  img.product-media__image[src*="apron-grey"] {
    transform: translate(0px, -50px) scale(.65) !important;
    transform-origin: center center !important;
  }


  /* ========================================================
     CLASSIC EVERYDAY BAG
  ======================================================== */

  /* TAN */
  img.product-media__image[src*="everyday"][src*="tan"] {
    transform: translate(0px, -50px) scale(.60) !important;
    transform-origin: center center !important;
  }

  /* BROWN */
  img.product-media__image[src*="everyday"][src*="brown"]:not([src*="red"]) {
    transform: translate(0px, -50px) scale(.60) !important;
    transform-origin: center center !important;
  }

  /* RED BROWN */
  img.product-media__image[src*="everyday"][src*="red"] {
    transform: translate(0px, -50px) scale(.60) !important;
    transform-origin: center center !important;
  }


  /* ==========================================================
   CLASSIC TOILETRY BAG — BROWN — DESKTOP
========================================================== */

@media screen and (min-width: 750px) {

  .product-image-classic-toiletry-bag
  slideshow-slide:not([hidden])
  .product-media
  img.product-media__image[src*="toiletry-brown"] {

    transform:
      translate(
        calc(-50% + 0px),
        calc(-50% + 0px)
      )
      scale(.70) !important;

    transform-origin: center center !important;
  }

}


  /* ========================================================
     CLASSIC TOTE
  ======================================================== */

  /* BROWN */
  img.product-media__image[src*="tote"][src*="brown"]:not([src*="red"]) {
    transform: translate(0px, -50px) scale(.60) !important;
    transform-origin: center center !important;
  }

  /* RED BROWN */
  img.product-media__image[src*="tote"][src*="red"] {
    transform: translate(0px, -50px) scale(.90) !important;
    transform-origin: center center !important;
  }


  /* ==========================================================
   ESSENTIAL BACKPACK — TAN — DESKTOP
========================================================== */

@media screen and (min-width: 750px) {

  .product-image-essential-backpack
  slideshow-slide:not([hidden])
  .product-media
  img.product-media__image[src*="backpack5-tan"] {

    transform:
      translate(
        calc(-50% + 100px),
        calc(-50% + 100px)
      )
      scale(.50) !important;

    transform-origin: center center !important;
  }

}


  /* ========================================================
     VERSATILE POUCH
  ======================================================== */

  /* BROWN */
  img.product-media__image[src*="versatile"][src*="brown"]:not([src*="red"]) {
    transform: translate(0px, -50px) scale(.70) !important;
    transform-origin: center center !important;
  }

  /* RED BROWN */
  img.product-media__image[src*="versatile"][src*="red"] {
    transform: translate(0px, -50px) scale(.70) !important;
    transform-origin: center center !important;
  }

  /* GREY */
  img.product-media__image[src*="versatile"][src*="grey"] {
    transform: translate(0px, -50px) scale(.70) !important;
    transform-origin: center center !important;
  }
}

/* ==========================================================
   CLASSIC TOILETRY BAG — BROWN — MOBILE
========================================================== */

@media screen and (max-width: 749px) {

  .product-image-classic-toiletry-bag
  slideshow-slide:not([hidden])
  .product-media
  img.product-media__image[src*="toiletry-brown"] {

    transform:
      translate(
        calc(-50% + 0px),
        calc(-50% + 0px)
      )
      scale(.88) !important;

    transform-origin: center center !important;
  }

}
/* ==========================================================
   CLASSIC TOTE — RED BROWN — MOBILE
========================================================== */

@media screen and (max-width: 749px) {

  .product-image-classic-tote
  slideshow-slide:not([hidden])
  .product-media
  img.product-media__image[src*="red"] {

    transform:
      translate(
        calc(-50% + 60px),
        calc(-50% + 50px)
      )
      scale(.90) !important;

    transform-origin: center center !important;
  }

}
/* ==========================================================
   ESSENTIAL BACKPACK — TAN — MOBILE
========================================================== */

@media screen and (max-width: 749px) {

  .product-image-essential-backpack
  slideshow-slide:not([hidden])
  .product-media
  img.product-media__image[src*="backpack5-tan"] {

    transform:
      translate(
        calc(-50% + 50px),
        calc(-50% + 50px)
      )
      scale(.55) !important;

    transform-origin: center center !important;
  }

}
@media screen and (min-width: 750px) {

  /* ========================================================
     REMOVE EXTRA GALLERY SPACING
  ======================================================== */

  .media-gallery__grid {
    padding: 0 !important;
    margin: 0 !important;
  }

  .product-media-container {
    padding: 0 !important;
    margin: 0 !important;
  }

  .media-gallery {
    padding-top: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* ========================================================
     CLASSIC EVERYDAY BAG
     Media ID: 34639094644927
  ======================================================== */

  .product-media[data-media-id="34639094644927"] {

    /* POSITION OF WHOLE IMAGE AREA */
    --image-x: -300px;
    --image-y: -300px;

    translate:
      var(--image-x)
      var(--image-y) !important;

    overflow: visible !important;

    padding: 0 !important;
    margin: 0 !important;
  }


  /* ACTUAL BAG SIZE */
  .product-media[data-media-id="34639094644927"]
  .product-media__image {

    --image-scale: 1.40;

    transform: scale(var(--image-scale)) !important;
    transform-origin: center center !important;

    object-fit: contain !important;
  }


  /* ========================================================
     VERSATILE POUCH
     Media ID: 34639075115199
  ======================================================== */

  .product-media[data-media-id="34639075115199"] {

    --image-x: -300px;
    --image-y: -300px;

    translate:
      var(--image-x)
      var(--image-y) !important;

    overflow: visible !important;

    padding: 0 !important;
    margin: 0 !important;
  }


  /* ACTUAL POUCH SIZE */
  .product-media[data-media-id="34639075115199"]
  .product-media__image {

    --image-scale: 1.40;

    transform: scale(var(--image-scale)) !important;
    transform-origin: center center !important;

    object-fit: contain !important;
  }


  /* ========================================================
     WRAPPER SIZING
  ======================================================== */

  .product-media-constraint-wrapper {
    width: 100% !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 !important;
  }

}
/* ==========================================================
   CLASSIC EVERYDAY BAG — BROWN
   Media ID: 34639094643199
========================================================== */

.product-media[data-media-id="34639094643199"] {

  /* LEFT / RIGHT
     negative = LEFT
     positive = RIGHT
  */
  --image-x: -300px;

  /* UP / DOWN
     negative = UP
     positive = DOWN
  */
  --image-y: -300px;

  translate:
    var(--image-x)
    var(--image-y) !important;

  overflow: visible !important;

  padding: 0 !important;
  margin: 0 !important;
}


/* ACTUAL BROWN BAG SIZE */
.product-media[data-media-id="34639094643199"]
.product-media__image {

  --image-scale: 1.40;

  transform: scale(var(--image-scale)) !important;
  transform-origin: center center !important;

  object-fit: contain !important;
}



/* ==========================================================
   CLASSIC EVERYDAY BAG — RED BROWN
   Media ID: 34638974779583
========================================================== */

.product-media[data-media-id="34638974779583"] {

  /* LEFT / RIGHT
     negative = LEFT
     positive = RIGHT
  */
  --image-x: -300px;

  /* UP / DOWN
     negative = UP
     positive = DOWN
  */
  --image-y: -300px;

  translate:
    var(--image-x)
    var(--image-y) !important;

  overflow: visible !important;

  padding: 0 !important;
  margin: 0 !important;
}


/* ACTUAL RED BROWN BAG SIZE */
.product-media[data-media-id="34638974779583"]
.product-media__image {

  --image-scale: 1.40;

  transform: scale(var(--image-scale)) !important;
  transform-origin: center center !important;

  object-fit: contain !important;
}
/* ==========================================================
   CLASSIC EVERYDAY BAG — BROWN
   Media ID: 34639046443199
========================================================== */

.product-media[data-media-id="34639046443199"] {

  /* LEFT / RIGHT
     negative = LEFT
     positive = RIGHT
  */
  --image-x: -300px;

  /* UP / DOWN
     negative = UP
     positive = DOWN
  */
  --image-y: -300px;

  translate:
    var(--image-x)
    var(--image-y) !important;

  overflow: visible !important;

  padding: 0 !important;
  margin: 0 !important;
}


/* ACTUAL BROWN BAG SIZE */
.product-media[data-media-id="34639046443199"]
.product-media__image {

  --image-scale: 1.40;

  transform: scale(var(--image-scale)) !important;
  transform-origin: center center !important;

  object-fit: contain !important;
}
/* ==========================================================
   CLASSIC EVERYDAY BAG
   MAIN PRODUCTS GRID ONLY
   Restore product card image
========================================================== */

@media screen and (min-width: 750px) {

  /* Target ONLY the Classic Everyday Bag image
     inside product cards / collection grid */
  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639075115199"] {

    /* Reset anything inherited from product-page adjustments */
    transform: none !important;
    translate: none !important;
    scale: 0.65 !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;

    --product-media-fit: contain !important;
  }

  /* Reset the media wrapper inside this card */
  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639075115199"]
  .product-media {

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;
  }


  /* Restore the ACTUAL image */
  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639075115199"]
  img {

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;

    display: block !important;
  }

}
/* ==========================================================
   CLASSIC EVERYDAY BAG
   MAIN GRID — VERTICAL POSITION CONTROL
========================================================== */

@media screen and (min-width: 750px) {

  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639075115199"]
  img {

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --grid-y: -65px;

    transform: translateY(var(--grid-y)) !important;
  }

}
/* ==========================================================
   CLASSIC EVERYDAY BAG
   MAIN GRID — RED BROWN VERTICAL POSITION CONTROL
========================================================== */

@media screen and (min-width: 750px) {

  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639094643199"]
  img {

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --grid-y: -65px;

    transform: translateY(var(--grid-y)) !important;
  }

}

  /* ========================================================
     CLASSIC EVERYDAY BAG
     MAIN PRODUCTS GRID — RED BROWN
     Slide ID: 34639094643199
  ======================================================== */

  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639094643199"] {

    transform: none !important;
    translate: none !important;
    scale: 0.65 !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;

    --product-media-fit: contain !important;
  }


  /* MEDIA WRAPPER */
  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639094643199"]
  .product-media {

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;
  }


  /* ACTUAL RED BROWN IMAGE */
  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639094643199"]
  img {

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;

    display: block !important;
  }

}
/* ==========================================================
   MAIN PRODUCT GRID — INDIVIDUAL IMAGE CONTROLS
   DESKTOP ONLY
========================================================== */

@media screen and (min-width: 750px) {

  /* ========================================================
     CLASSIC EVERYDAY BAG — RED BROWN
     Grid ID: 34638974779583
  ======================================================== */

  .product-card
  .card-gallery
  slideshow-slide[slide-id="34638974779583"]
  .product-media__image {

    /* SIZE */
    --grid-scale: 0.70;

    /* LEFT / RIGHT */
    --grid-x: 0px;

    /* UP / DOWN */
    --grid-y: -65px;

    transform:
      translate(var(--grid-x), var(--grid-y))
      scale(var(--grid-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  /* ========================================================
     VERSATILE POUCH — RED BROWN
     Grid ID: 34639115649215
  ======================================================== */

  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639115649215"]
  .product-media__image {

    /* SIZE */
    --grid-scale: 0.65;

    /* LEFT / RIGHT */
    --grid-x: 0px;

    /* UP / DOWN */
    --grid-y: -65px;

    transform:
      translate(var(--grid-x), var(--grid-y))
      scale(var(--grid-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

}
/* ==========================================================
   MAIN PRODUCT GRID
   BROWN EVERYDAY BAG + BROWN VERSATILE POUCH
   DESKTOP ONLY
========================================================== */

@media screen and (min-width: 750px) {


  /* ========================================================
     CLASSIC EVERYDAY BAG — BROWN
  ======================================================== */

  /* RESET THE WHOLE SLIDE */
  main[data-template="collection"]
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-brown"]
  ) {
    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;
  }


  /* RESET THE PRODUCT-MEDIA WRAPPER
     THIS IS THE IMPORTANT PART */
  main[data-template="collection"]
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-brown"]
  )
  .product-media {

    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ACTUAL BROWN EVERYDAY BAG IMAGE */
  main[data-template="collection"]
  img.product-media__image[src*="classic_everyday_bag-brown"] {

    /* =================================
       ADJUST ONLY THESE THREE VALUES
    ================================= */

    /* SIZE */
    --grid-scale: 0.65;

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT */
    --grid-x: 0px;

    /* UP / DOWN
       negative = UP
       positive = DOWN */
    --grid-y: -65px;


    /* DO NOT CHANGE BELOW */
    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--grid-x), var(--grid-y))
      scale(var(--grid-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }



  /* ========================================================
     VERSATILE POUCH — BROWN
  ======================================================== */

  /* RESET THE WHOLE SLIDE */
  main[data-template="collection"]
  slideshow-slide:has(
    img.product-media__image[src*="versatile_pouch-brown"]
  ) {
    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;
  }


  /* RESET THE PRODUCT-MEDIA WRAPPER */
  main[data-template="collection"]
  slideshow-slide:has(
    img.product-media__image[src*="versatile_pouch-brown"]
  )
  .product-media {

    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ACTUAL BROWN POUCH IMAGE */
  main[data-template="collection"]
  img.product-media__image[src*="versatile_pouch-brown"] {

    /* =================================
       ADJUST ONLY THESE THREE VALUES
    ================================= */

    /* SIZE */
    --grid-scale: 0.65;

    /* LEFT / RIGHT */
    --grid-x: 0px;

    /* UP / DOWN */
    --grid-y: -65px;


    /* DO NOT CHANGE BELOW */
    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--grid-x), var(--grid-y))
      scale(var(--grid-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

}
/* ==========================================================
   CLASSIC EVERYDAY BAG — RED BROWN
   MAIN PRODUCT GRID ONLY
   DESKTOP
========================================================== */

@media screen and (min-width: 750px) {

  /* RESET THE WHOLE SLIDE */
  main[data-template="collection"]
  slideshow-slide[slide-id="34638974779583"] {

    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;

    --product-media-fit: contain !important;
  }


  /* RESET THE PRODUCT MEDIA WRAPPER */
  main[data-template="collection"]
  slideshow-slide[slide-id="34638974779583"]
  .product-media {

    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ACTUAL RED BROWN BAG IMAGE */
  main[data-template="collection"]
  slideshow-slide[slide-id="34638974779583"]
  .product-media__image {

    /* =============================
       ADJUST ONLY THESE 3 VALUES
    ============================= */

    /* SIZE */
    --grid-scale: 0.55;

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --grid-x: 0px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --grid-y: -75px;


    /* DO NOT CHANGE BELOW */

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--grid-x), var(--grid-y))
      scale(var(--grid-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

}
/* ==========================================================
   CLASSIC EVERYDAY BAG — TAN
   MAIN PRODUCT GRID — MOVE UP/DOWN
========================================================== */

@media screen and (min-width: 750px) {

  main[data-template="collection"]
  slideshow-slide[slide-id="34639094644927"]
  .product-media__image {

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --grid-y: -25px;

    transform: translateY(var(--grid-y)) !important;
  }

}
/* ==========================================================
   VERSATILE POUCH — RED BROWN
   ACTUAL PRODUCT PAGE ONLY
   Media ID: 34639115649215
========================================================== */

@media screen and (min-width: 750px) {

  /* RESET THE PRODUCT MEDIA WRAPPER */
  main[data-template="product"]
  .product-media[data-media-id="34639115649215"] {

    /* =============================
       POSITION CONTROLS
    ============================= */

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --product-x: -450px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --product-y: -450px;


    /* APPLY POSITION */
    transform: none !important;

    translate:
      var(--product-x)
      var(--product-y) !important;

    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ACTUAL RED BROWN POUCH IMAGE */
  main[data-template="product"]
  .product-media[data-media-id="34639115649215"]
  .product-media__image {

    /* =============================
       SIZE CONTROL
    ============================= */

    --product-scale: 0.65;


    /* DO NOT CHANGE BELOW */
    translate: 0 0 !important;
    scale: 1 !important;

    transform: scale(var(--product-scale)) !important;
    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

}
/* ==========================================================
   VERSATILE POUCH — GREY
   ACTUAL PRODUCT PAGE ONLY
   Media ID: 34639104835775
========================================================== */

@media screen and (min-width: 750px) {

  /* RESET THE PRODUCT MEDIA WRAPPER */
  main[data-template="product"]
  .product-media[data-media-id="34639104835775"] {

    /* =============================
       POSITION CONTROLS
    ============================= */

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --product-x: -450px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --product-y: -450px;


    /* APPLY POSITION */
    transform: none !important;

    translate:
      var(--product-x)
      var(--product-y) !important;

    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ACTUAL GREY POUCH IMAGE */
  main[data-template="product"]
  .product-media[data-media-id="34639104835775"]
  .product-media__image {

    /* =============================
       SIZE CONTROL
    ============================= */

    --product-scale: 0.65;


    /* DO NOT CHANGE BELOW */

    translate: 0 0 !important;
    scale: 1 !important;

    transform: scale(var(--product-scale)) !important;
    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

}
/* ==========================================================
   LIEBE LEATHER — QUICK ADD POPUP
   INDIVIDUAL IMAGE CONTROLS BY PRODUCT + COLOUR
   DESKTOP
========================================================== */

@media screen and (min-width: 750px) {

  /* ========================================================
     GENERAL QUICK-ADD RESET
  ======================================================== */

  .quick-add-modal .product-media {
    overflow: visible !important;
  }

  .quick-add-modal img.product-media__image {
    object-fit: contain !important;
    object-position: center center !important;
    transform-origin: center center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ==========================================================
   CLASSIC EVERYDAY BAG — TAN
   QUICK ADD POPUP ONLY
========================================================== */

@media screen and (min-width: 750px) {

  /* RESET THE SLIDE CONTAINING THE TAN IMAGE */
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-tan"]
  ) {
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;
  }


  /* RESET THE PRODUCT-MEDIA WRAPPER */
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-tan"]
  )
  .product-media {

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* ACTUAL TAN EVERYDAY BAG */
  .quick-add-modal
  img.product-media__image[src*="classic_everyday_bag-tan"] {

    /* =============================
       CHANGE ONLY THESE 3 VALUES
    ============================= */

    /* SIZE */
    --popup-scale: 0.70;

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --popup-x: 280px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --popup-y: 280px;


    /* DO NOT CHANGE BELOW */

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--popup-x), var(--popup-y))
      scale(var(--popup-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

}

/* ========================================================
   CLASSIC EVERYDAY BAG — RED BROWN
======================================================== */

.quick-add-modal
img.product-media__image[src*="classic_everyday_bag-red_brown"] {
  --scale: 0.70;
  --x: 0px;
  --y: 0px;

  transform:
    translate(var(--x), var(--y))
    scale(var(--scale)) !important;
}

  /* ========================================================
     CLASSIC MOONBAG — BROWN
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="moonbag-brown"] {
    --scale: 0.65;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* CLASSIC MOONBAG — RED BROWN */

  .quick-add-modal
  img.product-media__image[src*="moonbag-red_brown"] {
    --scale: 0.65;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* ========================================================
     CLASSIC ROUND SLING — RED BROWN
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="round_sling"][src*="red_brown"] {
    --scale: 0.65;
    --x: 0px;
    --y: 25px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* CLASSIC ROUND SLING — BROWN */

  .quick-add-modal
  img.product-media__image[src*="round_sling"][src*="brown"]:not([src*="red_brown"]) {
    --scale: 0.65;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* ========================================================
     CLASSIC APRON — TAN
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="apron"][src*="tan"] {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* CLASSIC APRON — GREY */

  .quick-add-modal
  img.product-media__image[src*="apron"][src*="grey"] {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* ========================================================
     CLASSIC DUFFEL — GREY
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="duffel"][src*="grey"] {
    --scale: 0.80;
    --x: 0px;
    --y: 20px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* CLASSIC DUFFEL — RED BROWN */

  .quick-add-modal
  img.product-media__image[src*="duffel"][src*="red_brown"] {
    --scale: 0.80;
    --x: 0px;
    --y: 20px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* ========================================================
     CLASSIC TOILETRY BAG — TAN
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="toiletry"][src*="tan"] {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* CLASSIC TOILETRY BAG — BROWN */

  .quick-add-modal
  img.product-media__image[src*="toiletry"][src*="brown"]:not([src*="red_brown"]) {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* ========================================================
     CLASSIC TOTE — BROWN
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="classic_tote"][src*="brown"]:not([src*="red_brown"]) {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* CLASSIC TOTE — RED BROWN */

  .quick-add-modal
  img.product-media__image[src*="classic_tote"][src*="red_brown"] {
    --scale: 0.70;
    --x: 0px;
    --y: 280px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* ========================================================
     ESSENTIAL TOTE — BROWN
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="essential_tote"][src*="brown"] {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* ========================================================
     FOLDOVER LAPTOP — TAN
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="foldover"][src*="tan"] {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* FOLDOVER LAPTOP — RED BROWN */

  .quick-add-modal
  img.product-media__image[src*="foldover"][src*="red_brown"] {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* ========================================================
     SLING BAG — RED BROWN
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="sling_bag"][src*="red_brown"] {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* SLING BAG — BROWN */

  .quick-add-modal
  img.product-media__image[src*="sling_bag"][src*="brown"]:not([src*="red_brown"]) {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }



  /* VERSATILE POUCH — RED BROWN */

  .quick-add-modal
  img.product-media__image[src*="versatile_pouch"][src*="red_brown"] {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }


  /* VERSATILE POUCH — GREY */

  .quick-add-modal
  img.product-media__image[src*="versatile_pouch"][src*="grey"] {
    --scale: 0.70;
    --x: 0px;
    --y: 0px;

    transform:
      translate(var(--x), var(--y))
      scale(var(--scale)) !important;
  }

  /* ========================================================
   ESSENTIAL TOTE — RED BROWN
======================================================== */

.quick-add-modal
img.product-media__image[src*="essential_tote-red_brown"] {
  --scale: 0.50;
  --x: 0px;
  --y: 0px;

  transform:
    translate(var(--x), var(--y))
    scale(var(--scale)) !important;
}

}
/* ==========================================================
   CLASSIC EVERYDAY BAG
   QUICK ADD POPUP — TAN / BROWN / RED BROWN
   DESKTOP ONLY
========================================================== */

@media screen and (min-width: 750px) {

  /* ========================================================
     TAN
  ======================================================== */

  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-tan"]
  ),
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-brown"]
  ),
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-red_brown"]
  ) {
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;
  }


  /* RESET THE MEDIA WRAPPER FOR ALL 3 */
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-tan"]
  )
  .product-media,

  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-brown"]
  )
  .product-media,

  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-red_brown"]
  )
  .product-media {
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* ========================================================
     TAN IMAGE
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="classic_everyday_bag-tan"] {
    --popup-scale: 0.70;
    --popup-x: 280px;
    --popup-y: 280px;

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--popup-x), var(--popup-y))
      scale(var(--popup-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ========================================================
     BROWN IMAGE
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="classic_everyday_bag-brown"]:not([src*="red_brown"]) {
    --popup-scale: 0.70;
    --popup-x: 280px;
    --popup-y: 280px;

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--popup-x), var(--popup-y))
      scale(var(--popup-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ========================================================
     RED BROWN IMAGE
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="classic_everyday_bag-red_brown"] {
    --popup-scale: 0.70;
    --popup-x: 280px;
    --popup-y: 280px;

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--popup-x), var(--popup-y))
      scale(var(--popup-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

}

/* ==========================================================
   CLASSIC TOTE — RED BROWN
   QUICK ADD POPUP ONLY
========================================================== */

@media screen and (min-width: 750px) {

  /* RESET THE SLIDE */
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="tote-red_brown"]
  ) {
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;
  }


  /* RESET THE MEDIA WRAPPER */
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="tote-red_brown"]
  )
  .product-media {

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* ACTUAL RED BROWN TOTE IMAGE */
  .quick-add-modal
  img.product-media__image[src*="tote-red_brown"] {

    /* SIZE */
    --popup-scale: 0.90;

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --popup-x: 0px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --popup-y: 0px;


    /* DO NOT CHANGE BELOW */

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--popup-x), var(--popup-y))
      scale(var(--popup-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

}

/* ==========================================================
   VERSATILE POUCH — BROWN
   QUICK ADD POPUP — FINAL CLIPPING FIX
========================================================== */

@media screen and (min-width: 750px) {

  /* ========================================================
     1. FIX THE LI MEDIA CONTAINER THAT IS CLIPPING THE IMAGE
  ======================================================== */

  .quick-add-modal
  .product-media-container:has(
    img.product-media__image[src*="versatile_pouch-brown.png"]
  ) {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;

    position: relative !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
  }


  /* ========================================================
     2. RESET PRODUCT MEDIA WRAPPER
  ======================================================== */

  .quick-add-modal
  .product-media-container:has(
    img.product-media__image[src*="versatile_pouch-brown.png"]
  )
  .product-media {

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    overflow: visible !important;

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

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ========================================================
     3. ACTUAL BROWN VERSATILE POUCH IMAGE
  ======================================================== */

  .quick-add-modal
  img.product-media__image[src*="versatile_pouch-brown.png"] {

    /* =============================
       CHANGE ONLY THESE 3 VALUES
    ============================= */

    /* SIZE */
    --popup-scale: 0.70;

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --popup-x: 0px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --popup-y: 0px;


    /* =============================
       DO NOT CHANGE BELOW
    ============================= */

    width: auto !important;
    height: auto !important;

    max-width: 75% !important;
    max-height: 75% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--popup-x), var(--popup-y))
      scale(var(--popup-scale)) !important;

    transform-origin: center center !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

}
/* ==========================================================
   CLASSIC EVERYDAY BAG — BROWN
   QUICK ADD POPUP — MOBILE ONLY
========================================================== */

@media screen and (max-width: 749px) {

  /* RESET THE SLIDE CONTAINING THE BROWN IMAGE */
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-brown"]
  ) {
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;
  }


  /* RESET THE PRODUCT-MEDIA WRAPPER */
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-brown"]
  )
  .product-media {

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* ACTUAL BROWN EVERYDAY BAG */
  .quick-add-modal
  img.product-media__image[src*="classic_everyday_bag-brown"] {

    /* =============================
       CHANGE ONLY THESE 3 VALUES
    ============================= */

    /* SIZE */
    --popup-scale-mobile: 0.68;

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --popup-x-mobile: 0px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --popup-y-mobile: -10px;


    /* DO NOT CHANGE BELOW */

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(
        var(--popup-x-mobile),
        var(--popup-y-mobile)
      )
      scale(var(--popup-scale-mobile)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

}


/* ==========================================================
   CLASSIC EVERYDAY BAG — RED BROWN
   QUICK ADD POPUP — MOBILE ONLY
========================================================== */

@media screen and (max-width: 749px) {

  /* RESET THE SLIDE CONTAINING THE RED BROWN IMAGE */
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-red_brown"]
  ) {
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;
  }


  /* RESET THE PRODUCT-MEDIA WRAPPER */
  .quick-add-modal
  slideshow-slide:has(
    img.product-media__image[src*="classic_everyday_bag-red_brown"]
  )
  .product-media {

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* ACTUAL RED BROWN EVERYDAY BAG */
  .quick-add-modal
  img.product-media__image[src*="classic_everyday_bag-red_brown"] {

    /* =============================
       CHANGE ONLY THESE 3 VALUES
    ============================= */

    /* SIZE */
    --popup-scale-mobile: 0.68;

    /* LEFT / RIGHT */
    --popup-x-mobile: 0px;

    /* UP / DOWN */
    --popup-y-mobile: -10px;


    /* DO NOT CHANGE BELOW */

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(
        var(--popup-x-mobile),
        var(--popup-y-mobile)
      )
      scale(var(--popup-scale-mobile)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

}
/* ==========================================================
   CLASSIC EVERYDAY BAG
   MAIN PRODUCT GRID — MOBILE ONLY

   BROWN     = 34639046443199
   RED BROWN = 34638974779583
========================================================== */

@media screen and (max-width: 749px) {


  /* ========================================================
     BROWN
  ======================================================== */

  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639046443199"] {

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;
  }


  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639046443199"]
  .product-media {

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;
  }


  .product-card
  .card-gallery
  slideshow-slide[slide-id="34639046443199"]
  img.product-media__image {

    /* ===========================
       BROWN — CHANGE THESE
    =========================== */

    --grid-scale: 0.72;
    --grid-x: 0px;
    --grid-y: -20px;


    transform:
      translate(var(--grid-x), var(--grid-y))
      scale(var(--grid-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }



  /* ========================================================
     RED BROWN
  ======================================================== */

  .product-card
  .card-gallery
  slideshow-slide[slide-id="34638974779583"] {

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;
  }


  .product-card
  .card-gallery
  slideshow-slide[slide-id="34638974779583"]
  .product-media {

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;
  }


  .product-card
  .card-gallery
  slideshow-slide[slide-id="34638974779583"]
  img.product-media__image {

    /* ===========================
       RED BROWN — CHANGE THESE
    =========================== */

    --grid-scale: 0.72;
    --grid-x: 0px;
    --grid-y: -20px;


    transform:
      translate(var(--grid-x), var(--grid-y))
      scale(var(--grid-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

}
/* ==========================================================
   CLASSIC EVERYDAY BAG
   PRODUCT PAGE — MOBILE ONLY

   BROWN     = 34639046443199
   RED BROWN = 34638974779583
========================================================== */

@media screen and (max-width: 749px) {


  /* ========================================================
     BROWN
  ======================================================== */

  .product-media[data-media-id="34639046443199"] {

    /* WHOLE MEDIA POSITION */

    --product-x: -180px;
    --product-y: -180px;

    translate:
      var(--product-x)
      var(--product-y) !important;

    transform: none !important;

    overflow: visible !important;

    padding: 0 !important;
    margin: 0 !important;
  }


  .product-media[data-media-id="34639046443199"]
  img.product-media__image {

    /* BAG SIZE */

    --product-scale: 0.72;

    transform:
      scale(var(--product-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
  }



  /* ========================================================
     RED BROWN
  ======================================================== */

  .product-media[data-media-id="34638974779583"] {

    /* WHOLE MEDIA POSITION */

    --product-x: -180px;
    --product-y: -180px;

    translate:
      var(--product-x)
      var(--product-y) !important;

    transform: none !important;

    overflow: visible !important;

    padding: 0 !important;
    margin: 0 !important;
  }


  .product-media[data-media-id="34638974779583"]
  img.product-media__image {

    /* BAG SIZE */

    --product-scale: 0.72;

    transform:
      scale(var(--product-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

}
/* ==========================================================
   LIEBE LEATHER
   MOBILE PRODUCT GRID — INDIVIDUAL IMAGE CONTROLS

   MOBILE ONLY: 0px - 749px

   HOW TO ADJUST:
   --m-scale: image size
   --m-x:     left / right
   --m-y:     up / down

   SCALE:
   0.80 = smaller
   1.00 = original
   1.20 = bigger

   X:
   -20px = LEFT
    20px = RIGHT

   Y:
   -20px = UP
    20px = DOWN
========================================================== */

@media screen and (max-width: 749px) {


  /* ========================================================
     CLASSIC EVERYDAY BAG — TAN
  ======================================================== */

  img.product-media__image[src*="classic_everyday_bag-tan"] {
    --m-scale: 0.5;
    --m-x: 0px;
    --m-y: -20px
  }


  /* ========================================================
     CLASSIC EVERYDAY BAG — BROWN
  ======================================================== */

  img.product-media__image[src*="classic_everyday_bag-brown"] {
    --m-scale: 0.50;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     CLASSIC EVERYDAY BAG — RED BROWN
  ======================================================== */

  img.product-media__image[src*="classic_everyday_bag-red_brown"] {
    --m-scale: 0.50;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     CLASSIC EVERYDAY BAG — GREY
  ======================================================== */

  img.product-media__image[src*="classic_everyday_bag-grey"] {
    --m-scale: 0.50;
    --m-x: 0px;
    --m-y: -20px;
  }

  /* ========================================================
     CLASSIC APRON — TAN
  ======================================================== */

  img.product-media__image[src*="apron"][src*="tan"] {
    --m-scale: 0.6;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     CLASSIC APRON — BROWN
  ======================================================== */

  img.product-media__image[src*="apron"][src*="brown"] {
    --m-scale: 0.6;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     CLASSIC APRON — GREY
  ======================================================== */

  img.product-media__image[src*="apron"][src*="grey"] {
    --m-scale: 0.6;
    --m-x: 0px;
    --m-y: -20px;
  }

  /* ========================================================
     ESSENTIAL TOTE — BROWN
  ======================================================== */

  img.product-media__image[src*="essential"][src*="tote"][src*="brown"] {
    --m-scale: 0.65;
    --m-x: 0px;
    --m-y: -20px;
  }

   /* ========================================================
     ESSENTIAL TOTE — TAN
  ======================================================== */

  img.product-media__image[src*="essential"][src*="tote"][src*="tan"] {
    --m-scale: 0.65;
    --m-x: 0px;
    --m-y: -20px;
  }

  /* ========================================================
     SINGLE WINE BAG — TAN
  ======================================================== */

  img.product-media__image[src*="single"][src*="wine"][src*="tan"] {
    --m-scale: 0.75;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     SINGLE WINE BAG — BROWN
  ======================================================== */

  img.product-media__image[src*="single"][src*="wine"][src*="brown"]:not([src*="red"]) {
    --m-scale: 0.75;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     SINGLE WINE BAG — RED BROWN
  ======================================================== */

  img.product-media__image[src*="single"][src*="wine"][src*="red"] {
    --m-scale: 0.75;
    --m-x: 0px;
    --m-y: -20px;
  }



  /* ========================================================
     CLASSIC BRAAI BAG — TAN
  ======================================================== */

  img.product-media__image[src*="braai"][src*="tan"] {
    --m-scale: 0.7;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     CLASSIC BRAAI BAG — BROWN
  ======================================================== */

  img.product-media__image[src*="braai"][src*="brown"]:not([src*="red"]) {
    --m-scale: 0.7;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     CLASSIC BRAAI BAG — RED BROWN
  ======================================================== */

  img.product-media__image[src*="braai"][src*="red"] {
    --m-scale: 0.7;
    --m-x: 0px;
    --m-y: -20px;
  }



  /* ========================================================
     BRANDY BOTTLE HOLDER & DISPENSER — TAN
  ======================================================== */

  img.product-media__image[src*="brandy"][src*="tan"] {
    --m-scale: 0.5;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     BRANDY BOTTLE HOLDER & DISPENSER — BROWN
  ======================================================== */

  img.product-media__image[src*="brandy"][src*="brown"]:not([src*="red"]) {
    --m-scale: 0.5;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     BRANDY BOTTLE HOLDER & DISPENSER — RED BROWN
  ======================================================== */

  img.product-media__image[src*="brandy"][src*="red"] {
    --m-scale: 0.5;
    --m-x: 0px;
    --m-y: -20px;
  }


  /* ========================================================
     BRANDY BOTTLE HOLDER & DISPENSER — GREY
     Keep only if you actually have a grey image
  ======================================================== */

  img.product-media__image[src*="brandy"][src*="grey"] {
    --m-scale: 0.5;
    --m-x: 0px;
    --m-y: -20px;
  }
}

/* ==========================================================
   ESSENTIAL TOTE BAG — RED BROWN
   MAIN PRODUCT GRID ONLY
   DESKTOP
========================================================== */

@media screen and (min-width: 750px) {

  /* RESET THE WHOLE MEDIA ITEM */
  main[data-template="collection"]
  [data-media-id="34834755158207"] {

    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    --product-media-fit: contain !important;
  }


  /* RESET THE PRODUCT MEDIA WRAPPER */
  main[data-template="collection"]
  [data-media-id="34834755158207"]
  .product-media {

    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ACTUAL RED BROWN ESSENTIAL TOTE IMAGE */
  main[data-template="collection"]
  [data-media-id="34834755158207"]
  img.product-media__image {

    /* =============================
       ADJUST ONLY THESE 3 VALUES
    ============================= */

    /* SIZE */
    --grid-scale: 0.65;

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --grid-x: 0px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --grid-y: -50px;


    /* DO NOT CHANGE BELOW */

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(var(--grid-x), var(--grid-y))
      scale(var(--grid-scale)) !important;

    transform-origin: center center !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

}
/* ==========================================================
   ESSENTIAL TOTE BAG — RED BROWN
   PRODUCT PAGE — DESKTOP
   HARD RESET
   MEDIA ID: 34834755158207
========================================================== */

@media screen and (min-width: 750px) {

  /* ========================================================
     OUTER SLIDE
  ======================================================== */

  media-gallery
  li:has(.product-media[data-media-id="34834755158207"]) {

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }


  /* ========================================================
     MEDIA CONTAINER
  ======================================================== */

  media-gallery
  .product-media[data-media-id="34834755158207"] {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  /* ========================================================
     RED BROWN ESSENTIAL TOTE IMAGE
  ======================================================== */

  media-gallery
  .product-media[data-media-id="34834755158207"]
  img.product-media__image {

    /* =============================================
       ONLY CHANGE THESE 3 VALUES
    ============================================= */

    /* SIZE */
    --product-scale: 0.70;

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --product-x: 0px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --product-y: 0px;


    /* =============================================
       DO NOT CHANGE BELOW
    ============================================= */

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(
        calc(-50% + var(--product-x)),
        calc(-50% + var(--product-y))
      )
      scale(var(--product-scale)) !important;

    transform-origin: center center !important;

    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

}
/* ==========================================================
   ESSENTIAL TOTE BAG — BROWN
   PRODUCT PAGE — DESKTOP
   NO TRANSFORM METHOD
========================================================== */

@media screen and (min-width: 750px) {

  /* MEDIA BOX */
  .product-media[data-media-id="34102023880895"] {
    position: relative !important;
    overflow: hidden !important;
  }


  /* ACTUAL BROWN IMAGE */
  .product-media[data-media-id="34102023880895"]
  > img.product-media__image {

    /* ============================================
       ONLY CHANGE THESE 3 VALUES
    ============================================ */

    /* SIZE
       70% = smaller
       100% = original size
       120% = bigger
    */
    --brown-size: 80%;

    /* LEFT / RIGHT
       negative = LEFT
       positive = RIGHT
    */
    --brown-x: -280px;

    /* UP / DOWN
       negative = UP
       positive = DOWN
    */
    --brown-y: -380px;


    /* ============================================
       DO NOT CHANGE BELOW
    ============================================ */

    position: absolute !important;

    width: var(--brown-size) !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    left: calc(50% + var(--brown-x)) !important;
    top: calc(50% + var(--brown-y)) !important;

    transform: translate(-50%, -50%) !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

}
/* ==========================================================
   CLASSIC EVERYDAY BAG — TAN
   MAIN PRODUCT GRID ONLY
   MOBILE — FIX CLIPPING
========================================================== */

@media screen and (max-width: 749px) {

  /* OUTER PRODUCT MEDIA BOX */
  main[data-template="collection"]
  .product-media:has(
    img.product-media__image[src*="classic_everyday_bag-tan.png"]
  ) {

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    position: relative !important;

    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;

    --product-media-fit: contain !important;
  }


  /* ACTUAL TAN BAG IMAGE */
  main[data-template="collection"]
  img.product-media__image[src*="classic_everyday_bag-tan.png"] {

    /* =============================
       ONLY CHANGE THESE 3 VALUES
    ============================= */

    /* SIZE */
    --mobile-scale: 0.62;

    /* LEFT / RIGHT */
    --mobile-x: 0px;

    /* UP / DOWN */
    --mobile-y: -35px;


    /* =============================
       DO NOT CHANGE BELOW
    ============================= */

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    translate: 0 0 !important;
    scale: 1 !important;

    transform:
      translate(
        calc(-50% + var(--mobile-x)),
        calc(-50% + var(--mobile-y))
      )
      scale(var(--mobile-scale)) !important;

    transform-origin: center center !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

}