/** Shopify CDN: Minification failed

Line 5048:75 Unexpected "000000"
Line 5050:54 Unexpected ")"
Line 5231:84 Unexpected "}"
Line 6797:21 Expected identifier but found whitespace

**/
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'Brownhill Script';
    src: url('/cdn/shop/files/BrownhillScript.woff?v=1772864830') format('woff2'),
        url('/cdn/shop/files/BrownhillScript.woff?v=1772864830') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Behind The Nineties';
    src: url('/cdn/shop/files/Behind-The-Nineties-Md-It.woff2?v=1772865946') format('woff2'),
        url('/cdn/shop/files/Behind-The-Nineties-Md-It.woff?v=1772865946') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Behind The Nineties';
    src: url('/cdn/shop/files/Behind-The-Nineties-Blk.woff2?v=1772013944') format('woff2'),
        url('/cdn/shop/files/Behind-The-Nineties-Blk.woff?v=1772013944-The-Nineties-Blk.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Behind The Nineties';
    src: url('/cdn/shop/files/Behind-The-Nineties-Bd.woff2?v=1772013945') format('woff2'),
        url('/cdn/shop/files/Behind-The-Nineties-Bd.woff?v=1772013945') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Behind The Nineties';
    src: url('/cdn/shop/files/Behind-The-Nineties-Md.woff2?v=1772013945') format('woff2'),
        url('/cdn/shop/files/Behind-The-Nineties-Md.woff?v=1772013945') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Behind The Nineties';
    src: url('/cdn/shop/files/Behind-The-Nineties-Rg.woff2?v=1772013944') format('woff2'),
        url('/cdn/shop/files/Behind-The-Nineties-Rg.woff?v=1772013944') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Behind The Nineties';
    src: url('/cdn/shop/files/Behind-The-Nineties-Smbd.woff2?v=1772013944') format('woff2'),
        url('/cdn/shop/files/Behind-The-Nineties-Smbd.woff?v=1772013944') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


* {
  box-sizing: border-box;
}

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

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

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

html[scroll-lock] {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

input:hover,
textarea:hover {
  background-color: var(--color-input-hover-background);
}

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

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

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

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

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

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

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

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

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

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

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

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

.product-card__content slideshow-component {
  --cursor: pointer;
}

.predictive-search-results__card .product-card,
.predictive-search-results__card .collection-card,
.predictive-search-results__card .resource-card {
  transition: none;
  will-change: auto;
}

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

  .card-hover-effect-lift .header .product-card:hover,
  .card-hover-effect-lift .header .collection-card:hover,
  .card-hover-effect-lift .header .resource-card:hover,
  .card-hover-effect-lift .header-drawer .product-card:hover,
  .card-hover-effect-lift .header-drawer .collection-card:hover,
  .card-hover-effect-lift .header-drawer .resource-card:hover {
    transform: none;
  }

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

  .card-hover-effect-scale .header .product-card:hover,
  .card-hover-effect-scale .header .collection-card:hover,
  .card-hover-effect-scale .header .resource-card:hover,
  .card-hover-effect-scale .header-drawer .product-card:hover,
  .card-hover-effect-scale .header-drawer .collection-card:hover,
  .card-hover-effect-scale .header-drawer .resource-card:hover {
    transform: none;
  }

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

  .predictive-search-results__card .card-gallery,
  .predictive-search-results__card .collection-card__image,
  .predictive-search-results__card .product-card__image,
  .predictive-search-results__card .resource-card__image {
    transition: none;
  }

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

  .card-hover-effect-subtle-zoom .header .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header-drawer .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .resource-card:hover .resource-card__image {
    transform: none;
  }

  .predictive-search-results__card .product-card:hover,
  .predictive-search-results__card .collection-card:hover,
  .predictive-search-results__card .resource-card:hover,
  .header .product-card:hover,
  .header .collection-card:hover,
  .header .resource-card:hover,
  .header-drawer .product-card:hover,
  .header-drawer .collection-card:hover,
  .header-drawer .resource-card:hover {
    transform: none;
    box-shadow: none;
  }
}

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

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

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

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

p:empty {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

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

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

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

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

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

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

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

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

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

/* Utility */

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

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

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

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

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

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

.contents {
  display: contents;
}

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

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

  display: flex;
  flex-direction: column;
}

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

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

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

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

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

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

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

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

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

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

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

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

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

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

.relative {
  position: relative;
}

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

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

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

.icon-default {
  fill: currentColor;
}

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

slideshow-component [data-placeholder='true'] * {
  cursor: grab;
}

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

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

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

/* Typography presets */

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

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

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

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

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

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

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

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

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

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

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

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

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

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  --button-color: var(--color, var(--color-primary));

  color: var(--button-color);
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  --button-color: var(--color, var(--color-primary-hover));
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: transparent;
    color: var(--color-primary-hover);
  }
}

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

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

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

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

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

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

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

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

/* Featured collection block */
.featured-collection-block {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
  display: block;
}

[product-grid-view='zoom-out']
  .card-gallery
  > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
  display: none;
}

ul[product-grid-view='zoom-out'] .card-gallery > img {
  display: block;
}

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

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

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

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

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

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

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

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

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

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

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

    footer {
      view-transition-name: footer;
    }

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

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

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

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

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

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

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

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

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

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

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

.text-block {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

  &::backdrop {
    opacity: 0;
  }
}

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

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

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

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

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

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

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

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

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

/* Buttons */
.button,
.button-secondary,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-background-color);
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: var(--color-input-text);
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: inherit;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Show more */

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

.show-more__button:hover {
  @media screen and (min-width: 750px) {
    color: var(--color-primary-hover);
  }
}

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

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

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

.link {
  display: inline-block;
  text-align: center;
}

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

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

/* Collapsible row */

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

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

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

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

summary:hover {
  color: var(--color-primary-hover);
}

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

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

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

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

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

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

.product-media-gallery__slideshow--single-media slideshow-container {
  @media screen and (max-width: 749px) {
    grid-area: unset;
  }
}

:not(.dialog-zoomed-gallery) > .product-media-container {
  --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);
  }
}

media-gallery:where(.media-gallery--grid) .media-gallery__grid {
  display: none;
}

media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
  /* Needed for safari to stretch to full grid height */
  height: 100%;
}

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

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

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

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

  .media-gallery--two-column .media-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    display: none;
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: grid;
  }
}

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

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

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

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

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

  img {
    object-fit: var(--product-media-fit);
  }
}
.product-card__content .product-media-container img {
    object-fit: cover; margin-top:40px;
  } 
/* Media gallery zoom dialog */
.product-media-container__zoom-button {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: var(--layer-flat);
  cursor: zoom-in;
  background-color: transparent;

  &:hover {
    background-color: transparent;
  }
}

zoom-dialog dialog {
  width: 100vw;
  height: 100vh;
  border: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
  scrollbar-width: none;

  &[open] {
    opacity: 1;
  }

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

  &::backdrop {
    background: transparent;
  }
}

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

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

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

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

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

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

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

.dialog-thumbnails-list-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  z-index: var(--layer-raised);
}

.dialog-thumbnails-list {
  --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  bottom: 0;
  overflow-x: auto;
  opacity: 0;
  padding: var(--padding-lg);
  margin-inline: auto;
  scrollbar-width: none;
  animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
  animation-delay: calc(var(--animation-speed) * 1.5);
}

.dialog--closed .dialog-thumbnails-list {
  animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
}

@media screen and (min-width: 750px) {
  .dialog-thumbnails-list {
    position: fixed;
    flex-direction: column;
    inset: 50% var(--margin-lg) auto auto;
    right: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
    animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }
}

.dialog-thumbnails-list__thumbnail {
  width: var(--thumbnail-width);
  height: auto;
  transition: transform var(--animation-speed) var(--animation-easing);
  flex-shrink: 0;
  border-radius: var(--media-radius);

  img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--media-radius);
    aspect-ratio: var(--aspect-ratio);
  }

  &:is([aria-selected='true']) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
    border: var(--style-border-width) solid var(--active-thumbnail-border-color);
  }
}

@supports (anchor-name: --test) {
  .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
    --inset-offset: calc(var(--focus-outline-offset) / 2);

    content: '';
    position: absolute;
    inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
    position-anchor: --selected-thumbnail;
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
    border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    border-radius: var(--media-radius);
    z-index: var(--layer-raised);
  }

  @media (prefers-reduced-motion: no-preference) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      transition-property: inset;
      transition-duration: var(--spring-d180-b0-duration);
      transition-timing-function: var(--spring-d180-b0-easing);
    }
  }

  .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
    outline: none;
    border: none;
    anchor-name: --selected-thumbnail;
  }
}

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

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

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

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

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

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

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

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

slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  bottom: var(--padding-sm);
  right: var(--padding-sm);
}

.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
  bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
  right: var(--padding-lg);
}

@media screen and (max-width: 749px) {
  slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }
}

@media screen and (min-width: 750px) {
  slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls up to match the padding on the thumbnails */
    bottom: var(--padding-lg);

    /* Move the controls to the left of the thumbnails list on the right */
    right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
  }
}

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

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

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

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

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

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

deferred-media iframe {
  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);
            width: 100%;
        height: 100%;
  }

  &.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--buttons,
.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);font-weight: 600;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.variant-option__button-label--has-swatch:hover {
  /* outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
   outline-offset: 3px;
    border-radius: 50%; */
}

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

  /* outline: var(--focus-outline); */
  /* outline-offset: var(--focus-outline-offset); */
      /* outline-offset: 3px;
    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. **/
  .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; letter-spacing:0;
}

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

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

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

.compare-at-price {
  /* opacity: 0.4; */
  text-decoration-line: line-through;margin-left: 0px;
  text-decoration-thickness: 1.5px;
}

.card-gallery {
  position: relative;
}
.product-card__content div[ref="priceContainer"] .price{margin-right:5px;}
.explore-sec rte-formatter.rte{padding:0 10px;}
@container (max-width: 70px) {
  .card-gallery:hover .quick-add__button {
    display: none;
  }
}

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

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

/* Drawer */
.drawer {
  background-color: var(--color-background);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: var(--layer-raised);
  transform: translateX(-120%);
  transition: transform var(--animation-speed) var(--animation-easing);
}

.drawer[data-open='true'] {
  transform: translateX(0);
}

.drawer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--drawer-header-block-padding) var(--drawer-inline-padding);
}

.drawer__title {
  font-size: var(--font-h2--size);
  margin: 0;
}

.drawer__close {
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
}

.drawer__content {
  display: block;
  padding: var(--drawer-content-block-padding) var(--drawer-inline-padding);
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }
  }
  
 
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:is(:focus, :hover) {
  box-shadow: var(--input-box-shadow-focus);
  background-color: var(--color-input-hover-background);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) clamp(1rem, 1em * 0.25, 2rem);
  }

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

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

.checkbox {
  --checkbox-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:1.3;
  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 bubble */
.cart-bubble {
  --cart-padding: 0.2em;

  position: relative;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  border-width: 0;
  display: flex;
  line-height: normal;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-button-text);
  padding-inline: var(--cart-padding);
}

.cart-bubble[data-maintain-ratio] {
  aspect-ratio: 1;
}

.cart-bubble[data-maintain-ratio] .cart-bubble__background {
  border-radius: var(--style-border-radius-50);
}

.cart-bubble__background {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-button-background);
  border-radius: var(--style-border-radius-lg);
}

.cart-bubble__text {
  font-size: var(--font-size--3xs);
  z-index: var(--layer-flat);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

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

  &:hover {
    background-color: var(--color-input-hover-background);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  animation-duration: 0.6s;
}

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

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

  animation-duration: 0.8s;
}

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

  5% {
    opacity: 1;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  50% {
    transform: scale(1.2);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * Slideshow Component
 */
slideshow-component {
  --cursor: grab;
  --slide-offset: 6px;

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

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

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

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

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

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

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

/*
 * Force Safari to recalculate the timeline state on timeline refresh (after loop)
*/
slideshow-component[refreshing-timeline] .slide__content {
  animation: none;
}

.slideshow--single-media {
  --cursor: default;
}

a slideshow-component {
  --cursor: pointer;
}

/*
 * Slideshow Slides
 */
slideshow-slides {
  width: 100%;
  position: relative;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  gap: var(--slideshow-gap, 0);
  cursor: var(--cursor);
  min-height: var(--slide-min-height);

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

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

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

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

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

slideshow-component[disabled='true'] slideshow-slides {
  overflow: hidden;
}

/**
 * By default, slideshows have overflow: hidden (no compositor layer).
 * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
 */
slideshow-component:not([in-viewport]) slideshow-slides {
  overflow: hidden;
}

slideshow-component[mobile-disabled] slideshow-slides {
  @media screen and (max-width: 749px) {
    overflow: hidden;
  }
}

slideshow-slide {
  position: relative;
  scroll-snap-align: center;
  width: var(--slide-width, 100%);
  max-height: 100%;
  flex-shrink: 0;
  view-timeline-name: var(--slideshow-timeline);
  view-timeline-axis: inline;
  content-visibility: auto;
  contain-intrinsic-size: auto none;
  border-radius: var(--corner-radius, 0);
  overflow: hidden;

  slideshow-component[actioned] &,
  &[aria-hidden='false'] {
    content-visibility: visible;
  }

  slideshow-component slideshow-slide:not([aria-hidden='false']) {
    content-visibility: hidden;
  }

  &[hidden]:not([reveal]) {
    display: none;
  }

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

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

slideshow-slide.product-media-container--tallest {
  content-visibility: visible;
}

@media screen and (max-width: 749px) {
  /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
  .media-gallery--hint
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
}

/*
 * Collection and Resource list carousels have peeking slides on both sides.
 * Card galleries preview the next or previous images on 'pointerenter', so we
 * try to kick load them beforehand (they are lazy loaded otherwise).
 */
:is(.resource-list__carousel, .card-gallery)
  :is(
    slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
    slideshow-slide[aria-hidden='false'] + slideshow-slide
  ) {
  content-visibility: auto;

  slideshow-component[actioned] & {
    content-visibility: visible;
  }
}

/*
 * Be specific about HTML children structure to avoid targeting nested slideshows.
 * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
 */
slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
  content-visibility: visible;
}

slideshow-slides[gutters*='start'] {
  padding-inline-start: var(--gutter-slide-width, 0);
  scroll-padding-inline-start: var(--gutter-slide-width, 0);
}

slideshow-slides[gutters*='end'] {
  padding-inline-end: var(--gutter-slide-width, 0);
}

slideshow-component[dragging] {
  --cursor: grabbing;

  * {
    pointer-events: none;
  }
}

slideshow-component[dragging] slideshow-arrows {
  display: none;
}

slideshow-container {
  width: 100%;
  display: block;
  position: relative;
  grid-area: container;
  container-type: inline-size;
  background-color: var(--color-background);
}

@media screen and (min-width: 750px) {
  .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
    &:has(slideshow-controls[pagination-position='right']) {
      display: grid;
      grid-template:
        'container controls' auto
        'arrows controls' min-content
        / 1fr auto;
    }

    &:has(slideshow-controls[pagination-position='left']) {
      display: grid;
      grid-template:
        'controls container' auto
        'controls arrows' min-content
        / auto 1fr;
    }

    slideshow-controls[pagination-position='left'] {
      order: -1;
    }
  }
}

/* Slideshow Play/Pause */
.slideshow-control:is(.icon-pause, .icon-play) {
  color: var(--color-active);

  &:hover {
    color: var(--color-hover);
  }

  svg {
    display: none;
  }
}

slideshow-component:is([autoplay]) {
  &:is([paused]) {
    .icon-play > svg {
      display: block;
    }
  }

  &:not([paused]) {
    .icon-pause > svg {
      display: block;
    }
  }
}

/* Slideshow Arrows */
slideshow-arrows {
  --cursor-previous: w-resize;
  --cursor-next: e-resize;

  position: absolute;
  inset: 0;
  display: flex;
  z-index: var(--layer-heightened);
  pointer-events: none;
  /* mix-blend-mode: difference; */
  align-items: flex-end;

  &[position='left'] {
    justify-content: flex-start;
    padding-inline: var(--padding-xs);
  }

  &[position='right'] {
    justify-content: flex-end;
    padding-inline: var(--padding-xs);
  }

  &[position='center'] {
    justify-content: space-between;
    align-items: center;
  }
}

slideshow-arrows:has(.slideshow-control--shape-square),
slideshow-arrows:has(.slideshow-control--shape-circle) {
  mix-blend-mode: normal;
}

slideshow-component[disabled='true'] slideshow-arrows {
  display: none;
}

slideshow-arrows .slideshow-control {
  pointer-events: auto;
  opacity: 0;
  min-height: var(--minimum-touch-target);
  min-width: var(--minimum-touch-target);
  padding: 0 var(--padding-xs);
  color: var(--color-white);
}

slideshow-arrows .slideshow-control.slideshow-control--style-none {
  display: none;
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  padding-inline: 0 var(--padding-md);
  opacity: 1;
}

.card-gallery slideshow-arrows .slideshow-control {
  /* Align icons with quick-add button */
  padding-inline: var(--padding-xl);

  @container (max-width: 249px) {
    padding-inline: 0 var(--padding-sm);
  }
}

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

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

  to {
    opacity: 1;
  }
}

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

  50% {
    opacity: 1;
  }

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

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

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

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

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

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

.resource-list--carousel-mobile {
  display: block;

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

.resource-list {
  --resource-list-mobile-gap-max: 9999px;
  --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
  --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

  width: 100%;

  @media screen and (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }

  @container resource-list (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }
}

.resource-list--grid {
  display: grid;
  gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
  grid-template-columns: var(--resource-list-columns-mobile);

  @media screen and (min-width: 750px) {
    grid-template-columns: var(--resource-list-columns);
  }

  @container resource-list (max-width: 449px) {
    grid-template-columns: var(--resource-list-columns-mobile);
  }

  @container resource-list(min-width: 450px) and (max-width: 749px) {
    --resource-list-columns-per-row: 3;

    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    /* Avoid orphan in last row when there are 4, 7, or 10 items */
    &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
    /* Clean two full rows when there are 8 items */
    &:has(.resource-list__item:first-child:nth-last-child(8n)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 750px) {
    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
      --resource-list-columns-per-row: 4;
    }

    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 3;
    }

    &:has(.resource-list__item:first-child:nth-last-child(5)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 1200px) {
    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 6;
    }
  }
}

.resource-list__item {
  height: 100%;
  color: var(--color-foreground);
  text-decoration: none;
}

.resource-list__carousel {
  --slide-width: 60vw;

  width: 100%;
  position: relative;
  container-type: inline-size;
  container-name: resource-list-carousel;

  .slideshow-control[disabled] {
    display: none !important;        opacity: .5 !important;
  }

  .slideshow-control--next {
    margin-inline-start: auto;
  }
}

@container resource-list-carousel (max-width: 749px) {
  .resource-list__carousel .resource-list__slide {
    --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
  }
}

@container resource-list-carousel (min-width: 750px) {
  .resource-list__carousel .resource-list__slide {
    --section-slide-width: calc(
      (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
        var(--column-count)
    );
    --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    --slide-width: var(--section-slide-width, var(--fallback-slide-width));
  }
}

.resource-list__carousel slideshow-slides {
  gap: var(--resource-list-column-gap);

  /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */

  margin-block: -16px;
  padding-block: 16px;
}

.resource-list__carousel slideshow-arrows {
  padding-inline: var(--util-page-margin-offset);
}

.resource-list__carousel .resource-list__slide {
  width: var(--slide-width);
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

accordion-custom {
  details {
    &::details-content,
    .details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      interpolate-size: allow-keywords;
      transition: content-visibility var(--animation-speed-slow) allow-discrete,
        padding-block var(--animation-speed-slow) var(--animation-easing),
        opacity var(--animation-speed-slow) var(--animation-easing),
        block-size var(--animation-speed-slow) var(--animation-easing);
    }

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

    &:not([open]) {
      &::details-content,
      .details-content {
        padding-block: 0;
      }
    }

    &[open] {
      &::details-content,
      .details-content {
        opacity: 1;
        block-size: auto;

        @starting-style {
          block-size: 0;
          opacity: 0;
          overflow-y: clip;
        }

        &:focus-within {
          overflow-y: visible;
        }
      }
    }
  }
}

accordion-custom[data-disable-on-mobile='true'] summary {
  @media screen and (max-width: 749px) {
    cursor: auto;
  }
}

accordion-custom[data-disable-on-desktop='true'] summary {
  @media screen and (min-width: 750px) {
    cursor: auto;
  }
}

text-component {
  --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  --shimmer-speed: 1.25s;

  display: inline-block;
  position: relative;
  transition: color var(--animation-speed-slow) ease;
  line-height: 1;

  &::after {
    content: attr(value);
    position: absolute;
    inset: 0;
    color: transparent;
    opacity: 0;
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    pointer-events: none;
    background-image: linear-gradient(
      -85deg,
      var(--shimmer-text-color) 10%,
      var(--shimmer-color-light) 50%,
      var(--shimmer-text-color) 90%
    );
    background-clip: text;
    background-size: 200% 100%;
    background-position: 100% 0;
    place-content: center;
  }

  &[shimmer] {
    color: transparent;

    &::after {
      opacity: 1;
      animation: text-shimmer var(--shimmer-speed) infinite linear;
    }
  }
}

@keyframes text-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

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

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

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

/* Global scrollbar styles */

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

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

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

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

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

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

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

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

.header .product-card:hover,
.header .collection-card:hover,
.header .resource-card:hover,
.header-drawer .product-card:hover,
.header-drawer .collection-card:hover,
.header-drawer .resource-card:hover {
  z-index: auto;
  transform: none;
  box-shadow: none;
}

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

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

.product-recommendations {
  display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .burst {
    rotate: 20deg;
  }

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

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

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

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

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

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

  .tick {
    scale: 1.75;
  }

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

  .line {
    stroke-dashoffset: 1.5;
  }

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

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

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

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

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

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

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

@keyframes atc-slide {
  to {
    opacity: var(--atc-opacity, 1);
    translate: 0px var(--atc-destination, 0px);
  }
} 
h2, .h2.h2, .text-block.h2>*, .text-block.h2 :is(h1,h2,h3,h4,h5,h6),
h3, .h3.h3, .text-block.h3>*, .text-block.h3 :is(h1,h2,h3,h4,h5,h6),
h2, .h2.h4, .text-block.h4>*, .text-block.h4 :is(h1,h2,h3,h4,h5,h6),
h2, .h2.h5, .text-block.h5>*, .text-block.h5 :is(h1,h2,h3,h4,h5,h6),
h2,.h2,h3,.h3,h4,.h4,h5,.h5,
h1, .h1.h1, .text-block.h1>*, .text-block.h1 :is(h1,h2,h3,h4,h5,h6){    font-family: 'Behind The Nineties'; font-weight:500;  font-style:italic;}

.slideshow-section slideshow-controls{right:20px;
    top: 50%;
    transform: translate(0px, -50%);
    left: auto; 
    width: auto !important;}
    .slideshow-controls__dots{    flex-wrap: wrap;
    flex-direction: column;}
    .slide_show-3-item{padding-bottom:3rem;}
   .slide_show-3-item .slick-arrow{ bottom:50%;}
  .slide_show-3-item .slick-arrow.slick-prev{left: -20px;}
  .slick-arrow.slick-disabled{opacity:.3}
   .slide_show-3-item .slick-arrow.slick-next{right:-20px; transform: translateY(50%)}
.custom-section-content .image-block__image{    object-fit: contain;}
.slide_show-3-item .image-block__image{max-width:150px;margin-bottom:10px;}000000
.why-grid-section .group-block-content div {border-left:0;}
.why-grid-section .group-block-content div:last-child() {border-right:0;}
.slick-arrow {box-shadow:none;z-index:1;cursor:pointer; position:absolute; border-radius:50%; min-height:30px; padding:0; bottom:50%;background: rgba(255, 255, 255, .9) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzNzNBNDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0idGFibGVyLWljb24gdGFibGVyLWljb24tY2hldnJvbi1yaWdodCI+PHBhdGggZD0iTTkgNmw2IDZsLTYgNiI+PC9wYXRoPjwvc3ZnPg==) center / 80% no-repeat ;border:0 solid #3C1F4C; aspect-ratio:1/1;min-height:30px; min-width:30px; width:30px; height:30px;}
.slick-arrow:hover{filter:invert(1);}
.slick-arrow.slick-prev{transform:rotate(180deg) translateY(-50%);}
.grid-section .custom-section-content .text-block p {
  text-transform:uppercase;    font-family: "Hanken Grotesk", sans-serif; font-weight:400; font-size:18px;    letter-spacing: 4%;
}
.slide_show-3-item .slick-arrow:hover svg {
    color: #fff;
}
.slide_show-3-item .slick-arrow svg{width:26px; height:26px; opacity:0; visibility:hidden;}
.slide_show-3-item .slick-arrow svg *{stroke-width:1px;}
.why-grid-section .h3 {color:#000;}
.img-text-mid p{color:#696969; }

.footer-content .menu__heading {padding-top:0;}
.follow-us-section .text-block.custom p, .social-icons__wrapper ~ .text-block.custom p,
.footer-content .menu__heading .menu__heading__default{color:#fff;}
.follow-us-section .text-block.custom p{line-height:1.2}

.icon-text-btm img{max-height:80px;    max-width: max-content;}

.carousel-section-home .carousel-content slideshow-slides>.card{        width: calc((96% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-columns, 4));}
.newsletter-pro .background-image-container{top:auto; background-position: bottom center;}
.newsletter-pro .background-image-container img, .newsletter-pro .background-image-container svg{height:52px;}
.custom-section-content .newsletter-pro .image-block__image {
    object-position: bottom left;max-height:96px;
}
.custom-section-content .newsletter-pro .image-block:last-child .image-block__image {
    object-position: bottom right;
}

.custom-section-content .newsletter-pro .image-block:nth-child(6) .image-block__image {position:relative;left:35px;}
.custom-section-content .newsletter-pro .image-block:nth-child(5) .image-block__image {position:relative;left:8px;}
.join-home .email-signup__input-group{max-width:660px; margin:0 auto;    width: 100%;}
.join-home:before{content:"";background:url(/cdn/shop/files/p-Group.svg?v=1779346911) no-repeat;    width: 210px;
    height: 190px;
    position: absolute;
    bottom: 240px;
    left: 0px;
    background-position: bottom left;    background-size: contain;}
.join-home:after{content:"";background:url(/cdn/shop/files/right-patch.svg?v=1779353395) no-repeat; width:150px; height:150px; position:absolute;top:0px; right:0px;    background-position: right;    background-size: contain;}
.teamplate--tech .join-home:after,
.teamplate--about-us .join-home:after{top:0px !important;} 

.email-signup__input-group .email-signup__button {margin:0;    min-width: 180px;}
.email-signup__input-group a{color:#2B2B2B;}

.featured-blog-posts .section_header h2{margin-bottom:0;}

.featured-blog-inner{display:flex; gap:3rem}
.featured-blog-posts-card__content *{font-style:normal;}
.featured-blog-inner > * {
    width: 50%;
}
.right_article .featured-blog-posts-card__inner{    flex-direction: row;
    align-items: center;}
    .right_article .featured-blog-posts-card__inner .resource-image{    --border-radius: 0px;
    max-width: 170px;}
.insta-blocks .group-block-content .button::before{content:"";background: #0000004D; position:absolute; top:0; left:0; width:100%; height:100%;}
    .insta-blocks .group-block-content{    flex-wrap: wrap;}
    .insta-blocks deferred-media{width:calc(20% - 18px);min-height: 450px;}
     .real-reviews-sec .carousel-content slideshow-slides>.card {
        width: 32.333%;
    }
   .header__column .icons-wrap svg{   width: 30px;
    height: 30px;}
    .insta-blocks .button.deferred-media__poster-button{    --video-aspect-ratio: 1 !important;}
 .section-product-hotspots__wrapper .section-product-hotspots__header{   
    position: absolute; left:0; right:0;padding:6px 0;
    z-index: 11;
    max-width: calc(100% / 3);    justify-content: center;
    display: flex;
    margin: 0 auto -103px;
    width: 100%;}
    .star_main {
    display: flex;
}
 .section-product-hotspots__wrapper .section-product-hotspots__header *{ background:transparent;  }
img.auth_img {
    max-width: 30px;
    border-radius: 100%;
}
      .section-product-hotspots__wrapper .section-product-hotspots__header p{text-align:center;}
.two-image-text-sec .image-block--height-fill .image-block__image{ object-fit: cover;}
    .text-bg-sec .text-block p{position:relative;color: #696969;}
    .out-story-wrap .group-block-content .button{min-height: 44px; min-width: 170px;height: 44px;}
    .text-bg-sec .text-block p::before{content:"";position:absolute; left:-60px; top:-60px; background:url(/cdn/shop/files/col1.svg?v=1772692836) no-repeat; width:130px; height:100px; background-size:contain;}
    .text-bg-sec .text-block p::after{content:"";position:absolute; right:-50px; bottom:-90px; background:url(/cdn/shop/files/col2.svg?v=1772692836) no-repeat; width:130px; height:100px; background-size:contain;}
.product-recommendations .section-resource-list,
    .ui-test-product-list .resource-list{padding:0 10px;}
    media-gallery.media-gallery--grid .media-gallery__grid .product-media-container{    margin: 0 0px 0px -1px;    border: 1px solid;}
.product-grid .card-gallery,  .resource-list__carousel .card-gallery{border-bottom:1px solid rgb(var(--color-border-rgb) / 1.0);    padding: 0 10px 10px !important;}
.resource-list__carousel .product-card__content .contents *,  .product-card__content .contents *, .product-card__content product-price .compare-at-price,
.ui-test-product-list .product-card__content .price, .product-grid  .price, .resource-list__carousel .price,.product-grid  .price, .resource-list__carousel .price,
.ui-test-product-list .product-card__content .contents *{  font-family: "Hanken Grotesk", sans-serif; font-weight:500;    text-transform: uppercase;}
.section-resource-list slideshow-arrows, .ui-test-product-list slideshow-arrows{position: absolute;
    top: 42%;
    bottom: auto;padding: 0 1rem;
    height: auto;
    transform: translateY(-50%);}
.section-resource-list .slideshow-control.slideshow-control--shape-square,
.section-resource-list slideshow-arrows .slideshow-control, 
.section-resource-list .slideshow-control.slideshow-control--shape-circle,
.ui-test-product-list .slideshow-control.slideshow-control--shape-square,
 .ui-test-product-list .slideshow-control.slideshow-control--shape-circle,
    .ui-test-product-list slideshow-arrows .slideshow-control{    width: 30px; height:30px;  opacity: 1;
    visibility: visible;    display: flex !important;}
    .resource-list__carousel > slideshow-container{margin-bottom: 2.5rem;}
.section-resource-list slideshow-arrows .slideshow-control {
    background: rgba(255,255,255,.9) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzNzNBNDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0idGFibGVyLWljb24gdGFibGVyLWljb24tY2hldnJvbi1yaWdodCI+PHBhdGggZD0iTTkgNmw2IDZsLTYgNiI+PC9wYXRoPjwvc3ZnPg==') center/80% no-repeat!important;
    border: 0 solid #3C1F4C;padding:0;text-align: center; border-radius:50%;  justify-content: center;
    width: 30px;height:30px; min-width: 30px;min-height:30px;
}
.section-resource-list slideshow-arrows .slideshow-control:hover{    filter: invert(1);}
 .section-resource-list slideshow-arrows .slideshow-control svg,
.ui-test-product-list slideshow-arrows .slideshow-control svg{    height: 26px; min-width: 28px;     opacity: 0;
    visibility: hidden;   color: #060606;}
    .resource-list__carousel .slideshow-control svg path,
.ui-test-product-list slideshow-arrows .slideshow-control svg path{    stroke-width: 1px;}
.resource-list__carousel slideshow-arrows .slideshow-control:hover,
.ui-test-product-list slideshow-arrows .slideshow-control:hover{background-color: #3C1F4C;}
.resource-list__carousel slideshow-arrows .slideshow-control:hover svg,
.ui-test-product-list slideshow-arrows .slideshow-control:hover svg{ color: #fff;}
.resource-list__carousel .resource-list__slide,
.ui-test-product-list .resource-list__carousel .resource-list__slide {
    width: calc(33.333% - 14px);}
    .menu-list__submenu-inner{background-color:#fff;    border-radius: 0 0 5px 5px;}

         .quick-add__button{  font-size: 14px;} 
  
    .collection-wrapper{padding-bottom:2rem} 
    .collection-wrapper .facets-block-wrapper{ position:absolute;
    opacity: 0;transform: translate(-100%, 0px);top: 94px;
    visibility: hidden;    transition: all .3s}
    .collection-wrapper.active .facets-block-wrapper {transform: translate(0%, 0px);
    opacity: 1;
    visibility: visible; max-width: 100%;
    width: 22%;    z-index: 1;
}
    .facets  .facets__label{        color: #404040;
        font-weight: 500;
        font-size: 16px}
        .products-count-wrapper{    color: #414141;
    font-weight: 300;}
    .sorting-filter__container .sorting-filter__select{    color: #3D3C39;}
    .facets__label{font-weight: 500;}

    .pro-faq-section{max-width:1300px; margin:0 auto;} 
    .coupon_code-main {    margin-bottom: -1px;
    display: flex;    justify-content: space-between;
    padding: 20px 25px; gap:25px; align-items:flex-start;
    border-bottom: 0.5px solid #3C1F4C;
} 
.coupon_code-wrap {
    border: 0.45px solid #000000;
    text-align: center;
    min-width: 90px;
    border-radius: 4px;
    font-size: 15px;
}
.textToCopy {background-color: #E23D76;
    color: #fff;
    font-size: 13px;font-family:Poppins; 
    padding: 5px 2px;border-radius:4px;
}
.btn_copy{background:transparent; border:0;font-family:Poppins;  padding:6px 0 10px;}
.coupon_code-heading .heading{font-family: Urbanist;
    font-size: 18px;    color: #3C1F4C;    margin: 0;
    font-weight: 500;
    font-style: normal;}
    .coupon-text{opacity:.62; font-size:15px;}
    .product-information__grid .accordion .details__header{background: #FFEEF4;    font-family: Urbanist;
    font-weight: 600;    padding: 15px 25px;    border-bottom: 1px solid rgb(var(--color-border-rgb) / 1.0);
    font-size: 18px;
    color: #3C1F4C;}
    .pro-faq-section .details-content p{color: #00000099;  font-size: 18px;}
    .pro-faq-section .accordion .details__header{font-size:22px;    padding: 20px 20px;}
    .pro-faq-section summary .svg-wrapper, .pro-faq-section summary .svg-wrapper svg{width:18px; height:18px;}
    .pro-faq-section details[open] .svg-wrapper svg *{stroke:#E23D76;}
    .product-information__grid .price{font-weight: 600;    font-size: 25px;}
     .product-information__grid .compare-at-price{ color: #787878; font-size: 25px;}}
.variant-option--equal-width-buttons .variant-option__button-label{ 
    height: 41px;
    min-height: 40px;}
    .variant-option--equal-width-buttons .variant-option__button-label__text{font-size: 16px;}
     /* .variant-picker__form .variant-option--buttons:nth-child(1){gap:0;flex-wrap: wrap;
    max-width: 100%;    display: flex;
    width: 100%;} */
    .variant-picker .variant-picker__form .variant-option.variant-option--buttons{    --variant-ch: 1.5em;}
    .quantity-selector-wrapper .quantity-selector{height: 45px; min-width:170px;}
   .quantity-selector-wrapper .quantity-selector input[type=number]{font-weight:600;}
   .button.quantity-minus {width: 45px;
    border-right: var(--style-border-width-inputs) solid var(--color-input-border);
}
.button.quantity-plus {width: 45px;
    border-left: var(--style-border-width-inputs) solid var(--color-input-border);
}
.add-to-cart-button{    text-transform: uppercase;
    font-weight: 600;}
   .product-information__grid .accordion accordion-custom:last-child .details__header{border:0}
   .product-information__grid .accordion accordion-custom:last-child .coupon_code-main{border-bottom:0;}
   .accordion-img-text{border-top: 1px solid #000000}
  .product-details .accordion--dividers .details-content {
    padding-block-end: 0;color:#3C1F4C;
}

.elegance-text .text-block p{font-family: Brownhill Script;
    font-size: 90px;
    letter-spacing: -2%;
    line-height: 65px;}

    .featured-blog-posts .title{color:#3C1F4C}
.menu-drawer{background:#fff;}
.menu-drawer__menu-item-text{    font-size: 16px;}
  .menu-drawer .resource-card__title.paragraph,
.menu-drawer .resource-card__content{font-size: 12px;color: #000;}
  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end:0;
  }
  .announcement-bar__slider slideshow-arrows .slideshow-control svg *{stroke:#fff;}
.predictive-search-results__inner  .resource-card__image{object-fit: contain;}
.menu-drawer .resource-card__image{    object-fit: contain;}
.menu-drawer {
    background: #fff !important;
} 
.tab_main-main {
    margin: 0 auto;
    max-width: 1430px;
    padding: 0 4rem 4rem;
}
 .tab-btn {
    width: 33.333%;
    font-size: 22px;
    color: #3C1F4C;
    font-weight: 500;display: flex;
    align-items: center;
    letter-spacing: -0.4px;    justify-content: space-around;
    border-left: 1px solid #000000;
    padding: 12px;
}
/* .tab-btn::first-child{border:0} */
.tab-buttons {
    display: flex;    align-items: stretch;

    border-left: 0 solid #4C0362;
    text-align: center;
    justify-content: space-between; cursor:pointer;
    margin: 0 0 2rem;
}
.tab-btn.active {
    background: #E23D76;
    color: #fff;
}
.tab-content {
    display: none;
    padding: 0 3rem;
    gap: 4rem;
}
.tab-content.how-to-use-sec{gap:0;}
/* .tab-content.how-to-use-sec .custom-section-content .section-content-wrapper{    flex-wrap: wrap;
    flex-direction: column;} */
.tab-content-left {
    width: 100%;
    max-width: 350px;
}.tab-content-right {
    width: 100%;padding: 2rem 0;
}

.tab-content-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
}
.tab-content.active{display:flex; }
.tab-content-item {
    width: calc(33.33% - 3rem);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 3px;
}
.subheading {
    font-size: 14px;
    color: #828282;
}
.tab-content-item .heading {
    font-weight: 500;
    font-size: 20px;
    color: #000000;
   
    padding-bottom: 2rem;
}
.tab_main-wrap .tab-content-item{border-bottom: 0.5px solid #00000040;}
.metafield-rich_text_field h2{font-size:35px; margin:2rem 0 1rem;}
.product_feature-main {
    display: flex;
    padding: 0 4rem 4rem;
}
.product_feature-item .product_content{
    border-top: 1px solid #000; margin-top:0;
}
.product_feature-item img{display:block;}
.product_feature-item:nth-child(1) .product_content{border-left:0 solid #000;}
.product_content{padding:2rem;}
 .product_content h2{color: #3C1F4C;font-size:35px;    margin: 0 0 10px;}
 .product_content p{    color: #696969;}
.showstoppers__wrap {
    padding: 4rem;    background: #F6F6F6;
}
.showstoppers__main .title{text-align:center;}
.product-title {
    font-family: inherit;
    font-style: normal;
    padding: 2rem 0 1rem;
    text-align: center;
    text-transform: uppercase;
}
.features {
    display: flex;    max-width: 1000px;
    margin: 0 auto;    align-items: center;
    justify-content: center;
    gap: 3rem;
}
.features h4{margin:0; font-size:18px;    font-family: inherit;
    font-style: normal;color:#3C1F4C;}
.features p {
    margin: 0;
    color: #3C1F4C;
    font-weight: 300;
    font-size: 16px;
}
.feature ~ span{color: #3C1F4C;
    font-size: 30px;}
.prd-slide-show.slideshow-section .slideshow-controls__dots li {
    display: inline-block;
    width: auto;
    height: 3px;
}
.prd-slide-show.slideshow-section .slideshow-controls__dots button{height: 3px;
    width: 100%;
    margin: 0;
    font-size: 0;
    border-radius: 0;
    border: 0;}
.prd-slide-show.slideshow-section .slideshow-controls__dots button:after{height: 100%;    padding: 5px 30px;
    width: 100%;
    border-radius: 0;}
  .prd-slide-show.slideshow-section .slideshow-controls__dots{  gap: 4px;    flex-direction: row;
    max-width: 60%;        flex-wrap: nowrap;
    border-radius: 0;  width: 100%;}
  .prd-slide-show.slideshow-section slideshow-controls[controls-on-media]{bottom: 6px;
    top: auto;
    transform: none;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;}
    /* .prd-slide-show:before{content:"";position:absolute; background:url(/cdn/shop/files/patch-sliderbg.png?v=1773124008) repeat-x; width:100%; height:48px; } */
    /* .prd-slide-show:after{content:"";position:absolute; background:url(/cdn/shop/files/patch-sliderbg.png?v=1773124008) repeat-x; width:100%; height:48px; bottom:0px;} */
.swiper-button-prev svg{transform:rotate(180deg)}
.showstopper-section .swiper-button-next, .showstopper-section .swiper-button-prev {border: 0.94px solid #3C1F4C;
    svg {color: #060606;        width: 20px;}
    svg *{stroke-width:1px}
}
.why-grid-section .group-block.even-sec + .odd-sec,
.why-grid-section .group-block.even-sec{border-left:0;}
.showstopper-section .swiper-wrapper{align-items: center;margin-bottom:5rem}
.swiper-slide .show_topper{transform:scale(.7)}
.swiper-slide.swiper-slide-active .show_topper{transform:scale(1.2)}
.option_Color .variant-option__button-label__pill{background:none;}
label.variant-option__button-label.option_Color:before{content:none;}
label.variant-option__button-label.option_Color {    min-width: 100px !important;background-color: #F6F6F6 !important;border: 1px solid #000000;background-position:center !important; background-size:contain!important; background-repeat:no-repeat!important; width:100px; height:100px;}
.option_Color .variant-option__button-label__text {
    font-size: 16px;
    display: none;
}
.option_Color.variant-option__button-label:has(:checked):hover {
    .variant-option__button-label__pill {
        background-color: transparent;
    }
}

.variant-option--equal-width-buttons {
    .option_Color.variant-option__button-label {
        min-width: var(--variant-min-width);
        border: 1px solid #000000;
    }
}
.variant-picker__form .variant-option__button-label:has(:checked),
.variant-option--equal-width-buttons {
    .option_Color.variant-option__button-label:has(:checked){    border-color: var(--color-selected-variant-border);}
}
h4.facets--filters-title {
    color: #3D3C39; cursor:pointer;
    font-family: inherit;
    font-style: normal;    background: url(/cdn/shop/files/filterVector.svg?v=1773132091);
    background-repeat: no-repeat;
    background-size: 20px auto;padding-left: 28px;    background-position: left 2px;
}
.facets.facets--horizontal.facets-controls-wrapper {
    border: 0.5px solid #000000;
    margin: 1rem 0;
    border-left: 0;
    border-right: 0;
}
.red-itext p{    font-family: Brownhill Script;
    font-size: 100px;
    letter-spacing: -2%;
    line-height: 35px;color:#E23D76}
    .behind-headtext *{font-style:italic; font-family: 'Behind The Nineties';}
.founer-notes .red-itext p{    line-height: 1;}
.text-bottom p{text-align:left; margin-top: 8px !important;margin-left:360px;}
    .about-begining .beg-left:after{content:""; position:absolute; left:-45px;bottom:-70px; width:280px; height:150px;  background:url(/cdn/shop/files/patch-Group.png?v=1774257243) no-repeat;background-size:contain;}
.about-begining .custom-section-content .image-block__image{object-fit: cover;}
.beg-heading p{color:#3C1F4C;}
.beg-text p{color:#1f1f1f !important;}
.about-three-col .custom-section-content .image-block__image {
    object-fit: cover;
}
.para-text1 p{    line-height: 1.8;}
.founer-notes .red-itext{position:relative;}
.founer-notes .red-itext:before{content:""; position:absolute;     right: -110px; top: -60px; width:150px; height:70px; background:url(/cdn/shop/files/a1.svg?v=1774260490) no-repeat; background-size:contain;}
.founder-sec:after{content:""; position:absolute; right:20px; bottom: 0px;width:250px; height:150px; background:url(/cdn/shop/files/patch-svg.svg?v=1774260490) no-repeat; background-size:contain;}
.design-section .group-block-content{min-height: 400px;}
.ground-up .group-block-content .image-block__image{max-width: 100px;}
   .collection-wrapper .main-collection-grid {        grid-column: var(--grid-column--desktop) !important;width:100%;
        padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
    .product-grid-container .collection-wrapper{display:flex;}
    
       .collection-wrapper.active .main-collection-grid {width: 78%;
    justify-content: flex-end;
    margin-left: auto; padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);       grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number) !important;
    }
.header__column--right .icons-wrap {
    display: none;
}
.icons-wrap {
    display: flex;
    gap: 20px;
}
.block {
    display: flex; 
    width: 100%;
}
.mega-menu__link.mega-menu__link--parent {
    font-weight: 700;
}
.mega-menu__column.mega-menu__column--span-1 {
    padding: 2rem;
    border-right: 1px solid;    width: 100%;
}  

.header-menu .menu-list__submenu{border:1px solid #000;    box-shadow: 0px 44px 44px -7px #00000014;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.header-menu .mega-menu.section:before{content:"";    box-shadow: 0px 44px 44px -7px #00000014; position:absolute; width:100%; height:100%; bottom:0px;  left:0;}
.teamplate--about-us .hero__container {padding:0;}
.menu-list__submenu .menu-list__submenu-inner{padding:0;}
[data-menu-grid-id="MegaMenuList-2"] [data-menu-list-id="MegaMenuList-2"] {
    --menu-columns-desktop: auto;}
.mega-menu__grid .mega-menu__list{display:flex;justify-content: space-around;    width: 20%;
    gap: 0;}
.mega-menu__column li:last-child a{text-decoration:underline; font-weight:700;color:#18181B;    text-underline-offset: 3px;
    text-decoration-thickness: 1px;}
.mega-menu__grid[data-menu-grid-id="MegaMenuList-1"],.mega-menu__grid[data-menu-grid-id="MegaMenuList-3"],
.mega-menu__grid[data-menu-grid-id="MegaMenuList-2"]{display: flex;    gap: 0;}
.mega-menu__content.costom__content__type{width: 80%;grid-column:none;}
.mega-menu__content-list .item {
    display: flex;
    align-items: center; padding:10px; 
    gap: 6px;text-align:center; justify-content:center;
    min-width: 180px; max-width: 90%;
    margin: 0 auto 10px;
    border: 1px solid #000000;
}
.mega-menu__content-list .item p{margin:0;}
.size-content {
    padding: 2.1rem 2rem 0;    width: 35%; cursor: pointer;
}
.ar__link{display:flex; align-items:center; gap:5px;}
.mega-menu__content-list .size-content .item a{color:rgb(60 31 76 / 1.0) ; font-size:15px;}
.mega-menu__content-list .size-content .item p{min-width: 120px; font-size:15px;color:rgb(60 31 76 / 1.0) ;
    text-align: left;}
.list-image-bottom img{display:block; margin:0;position:relative; bottom:0;}
.menu-list__submenu .image-block h4{background: #4E49496B;
backdrop-filter: blur(9.399999618530273px);color: #FFFFFF;
font-weight: 500;
font-size: 15px; display:flex; align-items:center; justify-content:center; padding:15px;font-family: var(--menu-child-font-family); font-style:normal;
line-height: 24px;
letter-spacing: 0px;
text-align: center; position:absolute; bottom:0; left:0; right:0; width:100%;

}
.mega-menu__content-list--collections{ display: flex !important;
    align-items: stretch;
    height: 100%;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;}
.mega-menu__content-list-item .block{height:100%;justify-content: space-between;}
.menu-list__submenu .image-block img{    object-fit: cover;}
.costom__content__type .mega-menu__content-list li{width: 100%;}
.menu-list__submenu .image-block{position:relative;  border-left:1px solid #000;  width: 33%;}
.icon_minus {
    display: none;
}
.facets-block-wrapper accordion-custom .facets__summary .svg-wrapper{width:32px; height:32px;    margin: 0;}
.facets-block-wrapper accordion-custom .facets__summary .svg-wrapper svg{width:32px; height:32px;}
accordion-custom .facets__panel[open] .facets__summary .svg-wrapper .icon_minus{display:block;}
accordion-custom .facets__panel[open] .facets__summary .svg-wrapper .icon_plus{display:none;}
.product-card .icons-wrap{position: absolute;
    right: 15px; gap:15px;z-index:11111;
    top: 5px;}
    .product-card .swym-advanced-wishlist-collections-container, .ui-test-product-list div.swym-advanced-wishlist-collections-container{    left: 8px;    top: 7px;display:flex;}
    .product-card:hover .card-gallery .icons-wrap svg *,
    .resource-list__carousel .resource-list__slide:hover .card-gallery .icons-wrap svg * {
    fill: rgb(226 61 118 / 1.0);
    stroke: rgb(226 61 118 / 1.0);
}
header-actions .account-button{justify-content: flex-end;    margin: 0 -6px 0 0px;}
.sorting-filter accordion-custom .facets__summary .svg-wrapper {
    width: 20px;
    height: 20px;
}
header-actions .swym-advanced-header-icon  svg path{stroke-width:2px;}
.facets-block-wrapper .facets.facets--vertical.spacing-style {
    padding-right: 0;
}
.facets__filters-wrapper .variant-option__button-label .swatch{border-radius:50%;}
.range_label {margin-top: 6px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #000000;
    opacity: .5;
    font-weight: 600;
}
.facets__filters-wrapper .facets__panel-content.details-content price-facet-component{
    display: none;
}
.range_wrap {width:96%;
    margin: 0 0 20px;
}

input[type="range"] {
	-webkit-appearance: none;
	width: 100%;
	height: 100%;
	background: transparent;

	&:focus {
		outline: none;
	}

	&::-webkit-slider-runnable-track {
		width: 60%;
		height: 3px;
		background: #3c1f4c5c;
		border-radius: 20rem;
		transition: all 0.5s;
		cursor: pointer;
	}

&::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px; border-radius:50%;
  background: #3C1F4C;
  cursor: pointer;margin-top:-8px;
}

&::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #3C1F4C;margin-top:-8px;
  cursor: pointer;
}

}
.heels-wrap img{max-width:95px;}
.style-switch-sec p {
    max-width: 740px;
}
.styleswtch-sec2 .text-block h2{font-family: 'Hanken Grotesk';
    font-style: normal;
    letter-spacing: 2%;
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(85,85,85,1) 100%);
    position: absolute;
    bottom: 0;font-size: 20;
    background-blend-mode: multiply;    padding: 60px 10px 25px;}
    .style-tabs .tab-buttons{border: 0;
    justify-content: center;}
    .style-tabs .tab-buttons .tab-btn{border:1px solid #000000;}
     .style-tabs .tab-buttons .tab-btn:nth-child(1){border-right:0px solid #000000;}
    .tab-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    /* flex: 1 0 33%; */
}
 .style-tabs1 .tab-content ul li {
    flex: 1 0 calc(20% - 6px);
}
.style-tabs2 .tab-content ul{gap: 20px;}
.style-tabs2 .tab-content ul li {
    flex: 1 0 calc(33.333% - 20px);
}
.style-tabs .tab_main-main{    padding: 0 0rem 4rem;    max-width: 100%;}
/* .how-to-video .deferred-media__poster-button{min-height: 650px;} */
.style-tabs2 .product-grid__card.product-grid__card{border:1px solid; border-radius:0;    padding: 10px 0;}
.style-tabs2 .tab-content{gap:0;    padding: 0 1rem;
    width: 100%;}
.style-tabs2  .main-collection-grid{width:100%;}
.lux-section.section {
    border-bottom: 0.9px solid #000000;
}
.about-three-col {
    border-top: 0.9px solid #000000;
}
  
.size_button {
    border: 1px solid #000000;
    display: flex;
    gap: 10px;
    max-width:100%;cursor: pointer;
    padding: 15px 10px;    width: 100%;    line-height: 1;
    justify-content: center; font-size:14px; align-items:center;
}
.size_popup-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    padding: 20px; display:flex; justify-content:center; align-items:center;    z-index: 1111111;display:none;
}
.size_popup-main {    margin: 0 auto;
    max-width: 600px;width: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 13px 8px rgba(0, 0, 0, .2);
}
.size_wrapper .chart-table td{border: 1.5px solid #4C0362;}
.size_wrapper .chart-table tr:last-child td{border-bottom: 1.5px solid #4C0362;}
.icon_close {
    text-align: right;
    color: #fff;cursor:pointer;
    position: absolute;
    top: 20px;
    right: 20px;
}  
.icon_close svg{width:24px; height:24px; }
.active .size_popup-wrap{ 
    display: flex;
}
.material-tectsection{border-top:1px solid #000; border-bottom:1px solid #000}
.material-right div.image-block:nth-child(1) img{margin-bottom: -2.5rem;}
.material-right div.image-block:nth-child(2) img{margin-bottom: -3.1rem;    max-width: 70%; margin-right: 0; margin-left: auto;}
.material-right{    position: absolute;
    max-width: 38%;
    right: 0;
    height: 100%;}
.material-heading{line-height:1.3 !important;}
.material-tectsection deferred-media__poster-icon svg, .material-tectsection .video-placeholder-wrapper__poster-icon svg {
        width: 5rem;
        height: 5rem;
    }
.virtual-tryon .group-block-content,
.size-withAi .group-block-content{max-width:300px; color:#fff;    margin-left: auto;}
.size-withAi *{color:#fff;}
.icon-text-head p *{color:#fff;}
.virtual-tryon .button, .size-withAi .button-secondary{    min-width: 175px;    margin-top: 12px;
    height: 45px;}
.size-withAi .button-secondary {
    border: 1px solid #fff;
    box-shadow: none;
    border-radius: 0;
}
.text-two-col .virtual-tryon, .text-two-col .size-withAi{padding-top:270px;}
.text-two-col .size-withAi .background-image-container:before{ top:0; left:0;    mix-blend-mode: Multiply;content:""; position:absolute;width:100%; height:100%; pointer-events:none; background: linear-gradient(105.96deg, #FFFFFF 31.45%, #B4B0B0 102.53%);
}
.text-two-col .virtual-tryon .background-image-container:before{ top:0; left:0;    mix-blend-mode: Multiply;content:""; position:absolute;width:100%; height:100%; pointer-events:none; background: linear-gradient(105.96deg, #FFFFFF 31.45%, #737373 102.53%);
;
}
.ease-buying-sec .group-block:after {
    content: "";
    position: absolute;
    left: -30px;
    bottom: -90px;
    width: 350px;
    height: 200px;
    background: url(/cdn/shop/files/patch-Group.png?v=1774257243) no-repeat;
    background-size: contain;
}
.ease-buying-sec .group-block:before {
    content: "";
    position: absolute;
    left: -30px;
    bottom: -90px;
    width: 350px;
    height: 200px;
    background: url(/cdn/shop/files/patch-Group.png?v=1774257243) no-repeat;
    background-size: contain;
}
.tect-sec2-block .background-image-container:before{background: linear-gradient(180.96deg, #FFFFFF 31.45%, #737373 102.53%);mix-blend-mode: Multiply;content: "";
    position: absolute;
    top: 0;height: 100%;
    left: 0;
    width: 100%;
}
.tect-sec2-block  .group-block-content .text-block{position:relative;}
.tect-sec2-block  .group-block-content .text-block:before{content: "";
    position: absolute; 
    top: 16px; background:#fff; height:1px;
   right: 100%;  margin-right: 10px;
    width: 120px;
}
.stro-three-section .elegance-text{}
.accordion-img-text > .group-block-content{    margin: 0 auto;gap:0;
    max-width: max-content;}
.accordion-img-text rte-formatter h2 strong{    font-family: Brownhill Script;
    font-size: 90px;
    letter-spacing: -2%;
    line-height: 65px;font-weight:normal;}
 
.layout-panel-flex--row > .group-block--width-custom.material-left{    position: relative;    padding-left: 7rem;
    z-index: 1;}
    .style-video-sec1 deferred-media{max-height:550px;    height: 100%;}  
/* .elegance-text .text-block.pink-text p{color:#e23d76;} */
.gray-text.text-block p{color:#808080;}
.elegance-text h4{line-height:1.3 !important}
.resource-list__carousel .card-gallery svg{width:26px; height:26px;}
.heels-wrap .image-block img{max-width:60px;    min-height: 60px;min-width:60px;}
.custom-section-content .image-tec-sec .image-block__image {
    object-fit: cover;
}
.image-tec-sec .button{    position: absolute;
    right: 0;
    top: 0;}
.heels-wrap
 .degin-tech-text{max-width:15rem;}
 .design-tech-grid{border-right:1px solid #000;}
 .group-block div.design-tech-grid:last-child{border-right:0}
 .custom-section-content .why-section .image-block__image{ min-height: 200px;}
.beg-left .beg-text{    max-width: 90%;}
.group-block.bottom_text {    font-size: 20px;
    position: absolute;
    bottom: 40px;
    right: 0;
}
.bottom_text .text-block p{position:relative;width:100%;max-width:100%;}
.bottom_text .text-block{width:100%; max-width:100%;}
.bottom_text p:before{content:"";position:absolute;left: 22rem;
    width: 100%;
    background: #000;
    height: 2px;
    bottom: 12px;}

.product-details .view-product-title + .group-block .shopify-block{    width:calc(100% - 50px);}
.rating_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.shopify-app-block[data-block-handle="wishlist-pdp-button"]{    position: absolute;
    right: 0;width:auto !important;
    top: 0;}
.swym-atw-button-container #swym-atw-pdp-button svg *{stroke:#000;}
.swym-atw-button-container #swym-atw-pdp-button{background:transparent !important;}
.size_btn-wrap{    display: flex; gap: 10px;}
.estimate-delivery-main {
    margin-top: -15px;
}
.estimate-delivery-main button{
background:transparent; font-style:italic; text-decoration:underline;border:0;font-size:16px; padding:0; cursor:pointer;}
.product-details .save-price {
    font-size: 15px;
    background: #3C1F4C;
    color: #fff;
    max-width: max-content;
    padding: 7px 22px;
}
.product-details product-price{flex-direction:row; gap:10px;}
.estimate_product-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11111;
    background: rgba(0, 0, 0, .3);
    display: none;
    align-items: center;
    justify-content: center;
}
.estimated-delivery {background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 0 5px 7px rgba(0, 0, 0, .1);
}
.estimated-delivery label{text-align:center; font-size:25px; font-weight:600;    display: block;
    margin: 0 0 20px;}
.estimated-delivery p{margin:0 0 10px;}
.check-delivery-btn{border:0;background:rgb(226 61 118 / 1.0); padding:10px 20px; color:#fff; cursor:pointer}
#pincode-input{    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 0;
    width: 100%;    appearance: none;
    outline: 0;
    background: #fff;
    font-size: 14px;
  
  
  }
.estimated-delivery .input-group{    display: flex;}
p#delivery-result {
    font-size: 14px;
    margin-top: 7px;
    font-weight: 500;
}
.section.grid-section {
    padding-left: 3rem;
    padding-right: 3rem;  
} 
.join-home a{text-decoration:none;}
.join-home strong{color:#2b2b2b;}
.blog-post-details time:before{content:""; background:url(/cdn/shop/files/cal-vector.svg?v=1778297937) no-repeat; background-size:contain; width:15px; height:15px; display:inline-block; vertical-align:middle; margin:0 6px 0px 0; position:relative; top:-2px;}

.product-card .card-gallery slideshow-slide slideshow-arrows {position: absolute;
    top: 50%;
    height: auto;
    bottom: auto;
    width: 100%; cursor:pointer; pointer:auto; z-index:111;
    border: 0;    max-width: 100%;
    padding: 0;
    transform: translateY(-50%);}
.section-resource-list slideshow-arrows .card-gallery  .slideshow-control{border:0;}
.ui-test-product-list .product-badges--top-left{display:none;}
.sorting-filter accordion-custom{    display: flex;
    align-items: center;
    gap: 7px;}
.product-card .swym-advanced-wishlist-collections-container,
.ui-test-product-list .swym-advanced-wishlist-collections-container{ top:5px; padding:0;}
.group-block-content .text-scroller-wrap{    width: fit-content;
    max-width: 300px;
    margin: 0;}
    .elegance-text.strory-sec-r .group-block-content{margin:0 auto; max-width:max-content;}
.two-image-text-sec .group-block.img-text-mid{max-width:30%;}
.swym-atw-button-container #swym-atw-pdp-button.atw-button.atw-button-added svg * {
    fill: #000;
}
.swym-header-icon-html .swym-header-icon-count-bubble{border:0; top: -3px;}
.header header-actions .account-button{margin-left:4px;}
 .header .swym-header-icon-count{font-size:var(--font-size--3xs); padding-top:1px;}
.header .search-action .header-actions__action svg{    margin-right: 15px;
    width: 29px;
    height: 28px;}
.menu-drawer__menu-container.menu-open .menu-drawer__submenu{    position: static;
    height: auto;
    transform: none;    padding-left: 15px;
    overflow: inherit;}
.menu-drawer__submenu .menu-drawer__nav-buttons{display:none;}
.menu-drawer__menu.menu-drawer__menu--childlist{padding:0;}
.menu-drawer__navigation > .menu-drawer__menu{overflow-y: scroll;
    height: 100vh;}
.left_article .featured-blog-posts-card__content h4{order:2;}
.left_article .featured-blog-posts-card__content div.shopify-block:nth-child(2){order:1;} 
.left_article .featured-blog-posts-card__content div.shopify-block:nth-child(3){order:3;} 
.carousel-content .background-image-container img{object-fit:contain}
.menu-drawer__menu-container.menu-open[open] .svg-wrapper svg{transform:rotate(0deg);}
.product-grid .icons-wrap .svg_wrapper svg{width:26px; height:26px}
.product-grid .product-badges--top-left{    display: none;}
.product-information {padding-left:3rem; padding-right:3rem; position:relative;z-index:11;}
.product-information .variant-option__button-label{min-height: 2.6em;}
.swiper.shoeSlider {padding-bottom:2rem;position:relative;}
.showstopper-section {
    overflow: hidden;
    padding: 0 0 1rem;
}
.showstopper-section .shoeSlider .swiper-button-next, .showstopper-section .shoeSlider .swiper-button-prev{top: auto;transform: none; display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;   background: #f6f6f6;}
.showstopper-section .shoeSlider .swiper-button-next:hover, .showstopper-section .shoeSlider .swiper-button-prev:hover{background-color:#3C1F4C;}
.showstopper-section .shoeSlider .swiper-button-next:hover svg, .showstopper-section .shoeSlider .swiper-button-prev:hover svg{color:#fff;}
.showstopper-section .shoeSlider:before{content: "";
    width: calc(100% - 130px);
    height: 2px;
    position: absolute;
    bottom: 31px;
    left: 65px;
    border-bottom: 1px solid #A6A6A6;
    margin: 0 auto;
    right: 65px;
    display: flex;
    justify-content: center;
    align-items: center;}
.product-card__content .save-price{display:none;}
.collection-main-banner slideshow-arrows .slideshow-control{opacity:1;}
.collection-main-banner slideshow-arrows{    z-index: 11;}
.grid-section .group-block-content .image-block{justify-content: center;}
.grid-section .group-block-content{align-items:center;}
.mobile-show .group-block .out-story-wrap, .mobile-show .group-block.strory-first-r,
.mobile-show .group-block.strory-sec-r,.mobile-show .stro-three-section .elegance-text{max-height:inherit;}
.two-image-text-sec .mobile-show .group-block.img-text-mid{max-width:100%;}
.product-recommendations .product-badges{display:none;}
.explore-cate-sec.section.grid-section{padding:0;}
.explore-cate-sec.grid-section .section-content-wrapper.slide_show-3-item{        overflow: inherit;}
.real-revews-header .h2 p{    line-height: 1;
    display: block;
    margin: 0;}
 .slideshow-section .slide__image-container img{object-position:center bottom;}
.ui-test-product-list .section-resource-list__content .button-secondary{
    max-width: 200px;
    width: 100%; margin:0 auto 20px;
    border-radius: 0;
    padding: 11px;}
.newsletter-pro img.image-block__image{    top: -27px;  position: relative;}
.instafeed-new-layout-container{  margin-top: 3rem;}
.real-revews-header.text-block p{margin:0;}
.slide_show-3-item .slick-arrow svg{color:#3C1F4C;}
.sticky-add-to-cart__bar{z-index:1111;}
.product-details{min-width: 600px;}
    .social-icons__wrapper .social-icons__icon-wrapper {    border-right: 1px solid rgba(255, 255, 255, .26);
    width: 50px;min-width:50px;
    height: 50px;}
    .social-icons__wrapper .social-icons__icon-wrapper:last-child {    border-right: 0}
.social-icons__wrapper{  gap:0 !important;   border: 1.01px solid rgba(255, 255, 255, .26);
    border-radius: 5px;}
   /* .custom-section-content .newsletter-pro .image-block__image */
.share-button .share-button__fallback button{width:3.5rem; height:2.5rem;}
.share-button .share-button__fallback{background:#fff;border:1px solid #ccc;min-width:24rem;left:auto; right:15px;}
.share-button .share-button__fallback .field__label{    display: none;}
.share-button .share-button__fallback .field__input{font-size:14px;}
.share-button .share-button__fallback .icon{    width: 17px;}
 .founder-sec .image-block img{object-fit:cover;}
.shopify-section-group-header-group .header__row.header__row--bottom{background-color:transparent;}
:is(.header[transparent]:not([data-sticky-state=active]),.header[transparent=always][data-sticky-state=active]) .header__row:not(:has(.mega-menu__list:hover,.menu-list__link[aria-haspopup]:is(:hover,[aria-expanded=true]),.menu-list__list-item[slot=overflow] .menu-list__link:is(:hover,[aria-expanded=true]))){background-color:transparent;}
.ui-test-product-list .section-resource-list{position:relative;    padding-bottom: 0;
    gap: 0;
    margin-bottom: 3rem;}
    .social-icons__icon-wrapper  svg svg{width:24px; height:24px;}
.confidence-about-heading.text-block p{font-size: 32.09px; font-style:italic;line-height: 1.3;}
.lux-section .red-itext p{      line-height: 50px;  font-size: 140px;}
.resource-list__item:hover .card-gallery slideshow-component[disabled='true'] slideshow-arrows{display: flex;}
.ui-test-product-list .card-gallery slideshow-component[disabled='true'] slideshow-arrows,
.section-resource-list .card-gallery slideshow-component[disabled='true'] slideshow-arrows{top: 54%; padding:0 5px;}
.email-signup__input.paragraph{background-color:#fff;}
.mega-menu__grid{position:relative;}
.tab-buttons:first-child .tab-btn:first-child{border-right:0;}
input.paragraph.paragraph, input.paragraph.paragraph:not([type]), textarea.paragraph.paragraph, select.paragraph.paragraph{background-color:#fff;}
.search-modal .resource-card__content, .search-modal [ref="priceContainer"]{font-size:12px}
.search-modal .resource-card__title.paragraph{font-size:13px;} 
.tech-grid-block .image-block{max-width:60px; width:60px; height:60px; margin-bottom:15px;}
.banner-beown-text h1{text-shadow: -1px -1px 0px #fff;}
.shopify-policy__title h1{color:#4C0362;}
.product-form-buttons button{font-weight:600}
.pro-try-add-btn{display:flex; gap:10px;align-items: flex-start;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;}
    .pro-try-add-btn add-to-cart-component{width:100% !important}
    .pro-try-add-btn #wearfits-tryon-injected{    margin: 0; width:100%;}
@media (min-width:1700px) {
.insta-blocks deferred-media{min-height:540px;}

}


  @media (min-width:750px){
     .group-block .out-story-wrap, .group-block.strory-first-r{        border-bottom: 0;
        border-top: 0;}
        .first-img{border-top:0; border-right:0;}
.group-block.strory-sec-r, .stro-three-section .elegance-text{border-left:0;}
.second-img.strory-first-r{border-right:0;}
.text-bg-sec.strory-sec-r{border-left:1px solid}
    .real-revews-header .h2 p br{display:none;}
    .mobile-show{display:none;}
  .group-block.strory-sec-r,
 .stro-three-section .elegance-text{max-height:47%;}
    .group-block .out-story-wrap, .group-block.strory-first-r{max-height:53%;}
.icon-text-btm{padding-left:4rem; padding-right:4rem}
.slide__image.mobile_image {
    display: none;
}

}

@media (min-width:1101px) and (max-width:1400px){
.custom-section-content .newsletter-pro .image-block__image{    max-height: 66px;}
}

@media (min-width:750px) and (max-width:1100px){
  .material-right{    max-width: 60%;}
  .product_content h2{font-size:25px;}
  .product_content p{font-size:15px;}
  .product_feature-item .product_content{padding:15px;}
  .product_feature-main{padding:0 1.5rem 2rem}
  .metafield-rich_text_field h2 {
    font-size: 30px;
    margin: 2rem 0 .5rem;}
.tab_main-main{    padding: 0 2rem 3rem;}
    .tab-buttons .tab-btn {
        font-size: 14px;
    }
    .subheading {
    font-size: 12px;}
    .tab-content-item .heading{    font-size: 17px;padding-bottom:2rem;}
    .tab-content-item {
    width: calc(33.33% - 1rem);}
    .tab-content-items{gap:1.5rem;}
    .tab-content-right{padding:0;}
    .tab_main-main .tab-content{padding:0 1rem; gap:2rem;}
  .accordion-img-text rte-formatter h2 strong{font-size: 50px;    line-height: 1;}
  .size_button{padding: 10px;}
  label.variant-option__button-label.option_Color{min-width: 70px !important;width: 70px;
    height: 70px;}
  .product-details .save-price{font-size: 13px;padding: 7px 11px;}
  .product-information__grid .compare-at-price,
  .product-information__grid .price{font-size: 20px;}
  .product-information.section {
    padding: 20px;
}
  .product-details {
    min-width: 360px;        padding-right: 0 !important;
}
.pro-title.text-block p{font-size:22px;}
.pro-title.text-block{padding:0;font-size:30px;}
     .product-information .product-information__grid:not(.product-information--media-none).product-information--media-left .product-information__media {
        padding-right: 0;
    }
.section-content-wrapper.how-to-use-slider {
    flex-direction: column;
}
  .how-to-use-slider .group-block--width-custom,
  .layout-panel-flex--row > .group-block--width-custom.how-to-video{flex-basis: 100%; width: 100%;}
  .how-to-use-sec.tab-content.active{flex-wrap: wrap; display:block; flex-direction: column;}
  .real-reviews-sec .carousel-content slideshow-slides>.card {
    width: 40%;
}
  .real-reviews-sec slideshow-slides{gap:2rem;    padding-right: 15px;}
  .right_article .featured-blog-posts-card__inner .resource-image{    max-width: 110px; width:110px; height:110px;}
  .real-reviews-sec .star_main svg{height:20px;}
  .header__column .icons-wrap svg {
    width: 25px;
    height: 25px;
}
  .real-reviews-sec .card__content .card__inner{gap: 2px;}
  .real-view-icontext  p, .real-reviews-sec slideshow-component rte-formatter.text-block p, .real-reviews-sec slideshow-component .text-block p,
  .real-view-icontext rte-formatter.text-block p{font-size:13px;}
  .patch-icon .image-block__image{    width: 80px;         object-fit: contain;margin: 9px auto 0;}
  .real-reviews-sec .image-block__image{    max-width: 50px; width:50px; height:50px;}
  .section-resource-list slideshow-arrows, .ui-test-product-list slideshow-arrows{      top: 34%;  padding: 0 .5rem;}
  .header .header__column--left,  .header .header__column--center{gap:0;}
 #MainContent .home-top-slider.slideshow-section{padding-top:0;}
  .slide_show-3-item .slick-arrow.slick-prev{    left: -30px;}
  .slide_show-3-item .slick-arrow.slick-next{ transform: translateY(0);   right: -30px;}
  .slide_show-3-item .slick-arrow {
    bottom: 52%;
}
.slick-arrow.slick-prev {
    transform: rotate(180deg) translateY(0%);
}
.custom-section-content .why-section .image-block__image {
    min-height: 110px;
}
  .slide_show-3-item .image-block__image{width:130px; height:130px;max-width: 120px;min-width:120px; min-height:120px;}
  .lux-section .red-itext p{font-size:100px;}
  .icon-text-btm {
        padding-left: 2rem;
        padding-right: 2rem;
    }
  .founer-notes .red-itext{padding:0;}
  .about-begining .custom-section-content .image-block__image{    object-fit: contain;}
  .footer-outer-sec > .group-block-content{gap:30px;} 
  .footer-outer-sec > .group-block-content .footer-menu-link > .group-block-content{gap:20px;} 
  .footer-menu-link .menu__details a{font-size:14px;}
  .about-three-col .group-block.group-block--width-custom{padding:25px;}    
  
  .about-begining .beg-left{padding:0}
  .about-three-col .rte.text-block p,
  .about-begining .beg-text.text-block p{font-size:15px;}
  .about-begining .beg-heading.text-block{padding:0;}
  .beg-heading.text-block p{font-size:30px;}
 
 .founder-sec .founer-notes {padding:40px 25px;}
  .founer-notes p{font-size: 14px;
    line-height: 1.4}
  .founer-notes .red-itext:before{right:-50px; width:60px; height:30px; top:10px;}
  .founer-notes .red-itext p{font-size:65px;line-height:1;}
  .we-design-section .text-block.everything-text p{font-size:15px;}
 .design-section .text-block p{font-size:16px;}
  .design-section .group-block-content{    align-items: flex-start;}
   .design-section .group-block-content .group-block-content{    align-items:center;}
  .about-sectwo-col .heels-sec-icon{padding:20px 25px;}
.about-sectwo-col .group-block.heels-wrap{padding-bottom:0;}
  .about-sectwo-col .group-block.heels-wrap .text-block p {
        font-size: 15px;
    }
.about-sectwo-col .heels-sec-icon .text-block.h2{    padding-bottom: 10px;}
  .about-sectwo-col .heels-sec-icon .h2 p{font-size:30px;}
  .ui-test-product-list .section-resource-list__content .button-secondary{bottom:0}
  .custom-section-content .newsletter-pro .image-block__image{max-height:66px; object-position:bottom left;}
  .custom-section-content .newsletter-pro  .image-block:last-child .image-block__image {object-position:bottom right;}
  .how-to-video .deferred-media__poster-button {
    min-height: 450px;
}
  .follow-us-section .text-block.custom p{    font-size: 18px;}
  .tab-btn{    font-size: 18px;}
  .styleswtch-sec2 .text-block h2{    font-size: 16px;}
  .group-block.heels-wrap {
           padding-right: 20px;
        padding-left: 20px;
}
 .group-block.heels-wrap .text-block p{font-size: 18px;}
  .video-tech > .group-block-content{    gap: 2rem;}
.layout-panel-flex--column > .group-block--height-fill.video-tech {padding:0;}
  .group-block.text-bg-sec {
    padding: 0;
}
.elegance-text .text-block p{font-size: 50px;}
.grid-section .custom-section-content .text-block p{    font-size: 14px;}
.why-section .group-block.style-text{    padding: 10px 15px 30px;}
.style-text .text-block h3{font-size:26px;}
.style-text .text-block p{font-size:16px;}
.elegance-text .text-block h4{font-size: 30px;        min-width: 200px;        text-align: left;}
.group-block .out-story-wrap{padding:30px;}
.text-bg-sec .text-block p:before{top: -14px;
        width: 50px;
        left: -25px;
        height: 30px}
.text-bg-sec .text-block p:after{bottom: -20px;width: 50px;    right: -10px;
    height:30px;}
    
.text-bg-sec .text-block p{    font-size: 13px; line-height:1.3;}
.two-image-text-sec .group-block.img-text-mid {
    max-width: 40%;
}
.elegance-text.strory-sec-r .group-block-content{min-width:200px; text-align:left;}
.group-block-content .text-scroller-wrap{min-width:200px; max-width: 200px;}
.text-bg-sec .text-block{padding: 25px 30px;}
.insta-blocks deferred-media {width: 100%;
    min-height: 450px;
    max-width: 100%;
    min-width: 200px;
}
.insta-blocks .group-block-content{    flex-wrap: nowrap;
    overflow: auto;    justify-content: flex-start;
    padding: 0 10px;}

.newsletter-pro .layout-panel-flex--row:not(.mobile-column),
 .icon-text-btm .layout-panel-flex--row:not(.mobile-column){
        flex-wrap: nowrap;
        overflow: auto;        justify-content: flex-start;
        gap: 2rem;}
       .newsletter-pro .layout-panel-flex--row:not(.mobile-column)>.image-block,
        .newsletter-pro .layout-panel-flex--row>.group-block--width-fill,
       .icon-text-btm .layout-panel-flex--row>.group-block--width-fill {
    min-width: 120px;padding-top:2rem;
}
.icon-text-btm .layout-panel-flex--row>.group-block--width-fill{        padding-left: 0; padding-top:0;}
.icon-text-btm img{max-height:60px; min-width:60px; min-height:60px; width:60px; }
.carousel-section-home .carousel-content slideshow-slides{    padding: 0 10px;}
.carousel-section-home .carousel-content slideshow-slides .card{    width: 100%;
    max-width: 170px;}
    .featured-blog-posts-card__content h4 *{font-size:16px;}
.icon-text-btm .text-block p{font-size:14px}
.featured-blog-inner{    gap: 1rem;}
.right_article .featured-blog-posts-card__inner{gap:18px;}
.featured-blog-posts-card__content{gap: 5px;
    font-size: 12px;}
.blog-post-details{gap:5px;}
.featured-blog-posts-card__content .blog-post-card__content-text{font-size: 16px;}
.active-toggle-w .home-multi-grd-sc, .active-toggle-w .explore-sec,
.collection-wrapper.active .main-collection-grid {
    width: 70%;}
    .collection-wrapper.active .facets-block-wrapper{width: 30%;}    
    .facets-block-wrapper .button.facets__apply-all,
    .facets-block-wrapper .facets__drawer-actions button.facets__clear-all{min-width:inherit; width:100%;}
.header-menu .menu-list__link-title{    padding-inline: calc(var(--gap-xl) / 1);}
.tech-sec2 .text-block p{font-size:15px;} 
.tech-sec2 .tect-sec2-block, .custom-section-content .tect-sec2-block{padding:10px;}
.tect-sec2-block .group-block-content .text-block:before{width:50px; top:12px;}
.virtual-tryon .group-block-content, .size-withAi .group-block-content{    max-width: 230px;}
.virtual-tryon .group-block-content .icon-text-head p, .size-withAi .group-block-content .icon-text-head p{font-size:22px;}
.text-two-col .virtual-tryon .text-block p, .text-two-col .size-withAi .text-block p{font-size:15px;}
.text-two-col .virtual-tryon, .text-two-col .size-withAi {
    padding-top: 170px;
}
.virtual-tryon .button, .size-withAi .button{    min-width: 140px; width:auto;
    margin-top: 8px;padding: 6px;
    height: 38px;}
   
.group-block.heels-wrap.tech-heels-sec {
        padding-right: 10px;
        padding-left: 10px;
    }
    .heels-wrap.tech-heels-sec .text-block p{font-size:14px;}
.layout-panel-flex--row > .group-block--width-custom.material-left h2{    font-size: 30px;}
    .layout-panel-flex--row > .group-block--width-custom.material-left{padding-left:2rem; width:60%;}
.material-right div.image-block:nth-child(2) img{width:95%;}
.layout-panel-flex--row > .group-block--width-custom.material-left .image-block{width:60%;}
}
 
 
@media (max-width:749px){
  .home-top-slider.slideshow-section slideshow-slides {
        min-height: 30rem !important;max-height:80vh;
    }
  .slide__image.desktop_image {
    display: none;
}
   .icon-text-head p strong{font-size:25px;} 
   .heels-wrap.tech-heels-sec .text-block p{font-size:14px;}
  .layout-panel-flex--row > .group-block--width-custom.material-left h2{    font-size: 30px;}
  .virtual-tryon .button, .size-withAi .button{    min-width: 140px;width:auto;
    margin-top: 8px;padding: 6px;
    height: 38px;}
.text-two-col .virtual-tryon, .text-two-col .size-withAi {
    padding-top: 170px;
}
  .facets__form-wrapper .facets__summary{padding-bottom:0;}
  .facets-block-wrapper .facets__drawer-actions facet-remove-component{    padding: 0 10px;}
  .facets__drawer-actions button.facets__clear-all{display:block;;}
   .group-block .out-story-wrap, .group-block.strory-first-r,
        .first-img,
.group-block.strory-sec-r, .stro-three-section .elegance-text,
.second-img.strory-first-r,
.text-bg-sec.strory-sec-r{border:0}

  .desktop-show{display:none;}
  .grid-section.home-multi-grd-sc .custom-section-content .text-block p{font-size:13px;}
      .section.grid-section.home-multi-grd-sc .section-content-wrapper.section-content-wrapper {
        gap: 10px; overflow:inherit;
    }
  .grid-section.home-multi-grd-sc .group-block{min-width:35%;}
  .product-card .swym-advanced-wishlist-collections-container, .ui-test-product-list .swym-advanced-wishlist-collections-container {
    top:5px;
}
.ui-test-product-list .card-gallery{padding-left:5px; padding-right:5px;}
.ui-test-product-list product-price{padding-left:10px; padding-right:10px;}
.ui-test-product-list .user-select-text .text-block{padding:10px 10px 0;}
.product-card .icons-wrap{top: 5px; right:6px;   gap: 8px;}
.ui-test-product-list .product-card .icons-wrap{top:3px; right: 8px}
.ui-test-product-list .product-card .swym-advanced-wishlist-collections-container, .ui-test-product-list .swym-advanced-wishlist-collections-container {
        top: 0px;
    }
    .product-grid__item .product-card__content product-price.text-block{padding:10px 10px 15px;} 
  .product-grid__item .product-card__content a.contents .text-block{padding:10px 10px 0;} 
   .product-grid__item .product-card__content a.contents .text-block p{font-size:13px;font-weight: 500;}
  .product-grid__item .product-card .product-card__content{padding:0;}
  .header .swym-header-icon-count{padding:0;}
  .swym-header-icon-html .swym-header-icon-count-bubble{top:3px; width:16px; height:16px;}
.header .search-action .header-actions__action svg{    margin-right: 0px;}
  .header .header-actions__cart-icon .cart-bubble{    width: 16px;
    top:0px;    padding-top: 0;
    right: 0;}
  .header .header__column--right header-actions{margin-inline-start:0;}
  .two-image-text-sec .group-block.img-text-mid{max-width:100%;}
  .collection-wrapper.active .main-collection-grid, .active-toggle-w .home-multi-grd-sc, .active-toggle-w .explore-sec,
    .collection-wrapper.active .facets-block-wrapper{width: 100%;}
 .header .account-drawer .account-button{    width: 38px;        margin-right: -7px;        margin-left:-2px;}
 .header__row .header-actions__action svg {
    /* width: 25px;
    height: 25px; */
}
  .header .header__columns .cart-drawer{    align-items: center;
    display: flex;}
  .header .header-actions__action .svg-wrapper{width:25px;    height: 25px;    vertical-align: middle;}
 .header__columns .header__column--right{display:flex; gap:10px;position: absolute;
        right: 6px; align-items: center; padding-inline-end: 6px;}
  .header__column .icons-wrap{gap:1px; margin-left:-5px;}
  .header__column .icons-wrap svg{width:20px; height:16px;}
  .header__column.header__column--right .search-action--hidden-on-drawer {
        display: block;grid-area:rightA;
    }
    .svg_wrapper.open_foot_scan {
    margin-left: 5px;
}
  .header__column.header__column--left .search-action{display:none;}
  .product-information.section {
    padding: 0;
}
.coupon-text p{font-size:13px;}
.product-information__grid .accordion .details__header{font-size: 16px;}
.coupon_code-main{padding: 16px 15px;    gap: 15px;}
.product-information__grid .accordion .details__header{
    padding: 12px 15px;}
  .pro-faq-section .accordion .details__header {
    font-size: 16px;}
  .footer-content .menu__heading{ font-size:16px;         justify-content: space-between;  padding-bottom: 20px;}
  .footer-content .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: 0;
}
.shopify-section-group-footer-group .menu--accordion .menu__heading__accordion{justify-content: space-between;  display:flex; align-items:center; width:100%;}
  .footer-content .details-content{ padding-bottom: 30px !important;}
  .footer-menu-link .group-block-content{    gap: 20px;}
  .menu__heading__accordion{color:#fff;}
  .footer-outer-sec .follow-us-section .text-block p,
  .icon-text-btm .text-block p{font-size:18px}
   .pro-faq-section .details-content p,
  .footer-outer-sec .text-block p, .footer-outer-sec .follow-us-section rte-formatter.text-block p,
  .join-home .text-block.custom p{font-size:15px;}
  .featured-blog-posts-card__content h4 *{font-size:20px;}
  .featured-blog-posts-card__content .blog-post-card__content-text{font-size: 16px;}
  .grid-section .custom-section-content .text-block p{    font-size: 16px;}
  .slideshow-section .text-block h1 {line-height:1;}
  .product-information__media  .slideshow-controls__dots button,
 .slideshow-section .slideshow-controls__dots button{height: 3px;
    width: 100%;
    margin: 0;
    font-size: 0;
    border-radius: 0;
    border: 0;}
    .product-information__media  .slideshow-controls__dots li,
  .slideshow-section .slideshow-controls__dots li {
    display: inline-block;
    width: 100%;
    height: 3px;
}
.product-information__media .slideshow-controls__dots button:after,
.slideshow-section .slideshow-controls__dots button:after{height: 100%;
    width: 100%;
    border-radius: 0;}
    .product-information__media .slideshow-controls__dots,
  .slideshow-section .slideshow-controls__dots{  gap: 4px;    flex-direction: row;
    max-width: 60%;        flex-wrap: nowrap;
    border-radius: 0;  width: 100%;}
    .product-information__media slideshow-controls[controls-on-media],
  .slideshow-section slideshow-controls[controls-on-media]{bottom: 0;
    top: auto;
    transform: none;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;}
    .style-text .text-block p,
    .slideshow-section .text-block p{font-size:16px;}
/* .slideshow-section  slideshow-slides{    min-height: 37rem;} */
  .why-grid-section .image-block__image{ max-width: 70%;}
  .grid-section .layout-panel-flex--row:not(.mobile-column){ flex-wrap: nowrap;
        overflow: auto;}
        .why-section .layout-panel-flex--row:not(.mobile-column){ flex-wrap: wrap; padding: 0 15px; gap: 0px;}
        .grid-section .group-block{    width: 100%;
    max-width: 100%;
    min-width: 80%;}
    .group-block.bottom_text{    bottom: 29px;}
    .why-section h3{font-size:20px;}
    .why-grid-section .section-content-wrapper.section-content-wrapper{padding-bottom:60px}
    .why-section .text-block.custom p{font-size:14px;}
   .why-section  .layout-panel-flex--row > .group-block--width-fill{flex:inherit;}
    .why-section > .group-block-content > .group-block{ width: 100%;        margin-bottom: 0px;
    max-width: calc(50% - 0px);  border-left:1px solid; border-bottom: 0;}
    .why-section > .group-block-content > .group-block.even-sec{border-left:0;} 
    .group-block.first-img-mob{border:0; height:65%}
    .why-section > .group-block-content > .group-block:nth-child(3),.why-section > .group-block-content > .group-block:nth-child(4){border-bottom:1px solid;}
     .why-section > .group-block-content,  .why-section .layout-panel-flex--column > .group-block--height-fill{height:auto; ;}
  .why-section .carousel-content slideshow-slides{    justify-content: flex-start;
    padding: 0 15px;}
  .text-bg-sec .text-block p:after{ width: 50px;
    height: 40px; bottom:-20px;}
  .text-bg-sec .text-block p:before{top:-20px;    width: 50px;left: -37px;
    height: 40px;}
  .img-text-mid p{font-size: 16px;}
 .two-image-text-sec .text-bg-sec {
    padding: 0;
}
 .two-image-text-sec .out-story-wrap{padding:25px;}
  .elegance-text .text-block p{    font-size: 70px;}
  .resource-list__carousel .resource-list__slide, .ui-test-product-list .resource-list__carousel .resource-list__slide {
    width: calc(50% - 7px);
}
.real-reviews-sec .image-block__image{    max-width: 60px; width:60px; height:60px;object-fit:contain;
    margin-bottom: 0px;}
    .real-reviews-sec .patch-icon .image-block__image{margin-bottom:15px;width:40px; height:40px;}
.compare-at-price,
.resource-list__carousel .product-card__content .contents *, .ui-test-product-list .product-card__content .price, .product-grid .price, .resource-list__carousel .price, .ui-test-product-list .product-card__content .contents *{    font-size: 14px;}
  .section-resource-list .slideshow-control.slideshow-control--shape-square, .section-resource-list slideshow-arrows .slideshow-control, .section-resource-list .slideshow-control.slideshow-control--shape-circle, .ui-test-product-list .slideshow-control.slideshow-control--shape-square, .ui-test-product-list .slideshow-control.slideshow-control--shape-circle, .ui-test-product-list slideshow-arrows .slideshow-control {
    width: 25px; height:25px; min-width:25px; min-height:25px; }
     .real-reviews-sec{padding-left:10px; padding-right:10px;}
   .patch-icon{    margin: -30px 0 -80px;}
   .real-reviews-sec .card__content {padding:0;}
  .real-reviews-sec .card__content .text-block p{font-size:14px;}
  .real-reviews-sec .carousel-content slideshow-slides{    justify-content: flex-start;gap:25px;
    padding: 0 15px;}
    .real-reviews-sec .carousel-content slideshow-slides>.card {
    width: 75%;
}
.real-reviews-sec .card .card__content .card__inner {gap:10px;}

.real-reviews-sec .background-image-container img, .real-reviews-sec .background-image-container svg{         opacity: 1;
        /* was object-fit:fill, which stretched the frame to the card height and
           elongated the Nuvah triangle motifs (worst on long reviews: 1.8x at
           500px wide). contain keeps the artwork at its designed 700x392
           proportions; a long review simply extends past the frame.
           object-position:top because mobile card padding is 0, so the content
           starts at the card top - a centred frame would sit ~32px below the
           avatar. Anchoring it to the top lines the frame up with the content
           (as the 80px padding does on desktop) and lets long reviews run down
           past the frame instead of pushing it out of line. */
        object-fit: contain;
        object-position: top center;}
  .section-product-hotspots__wrapper .section-product-hotspots__header{margin:0 auto; position:static;  max-width: 100%;}

  .insta-blocks .group-block-content{    flex-wrap: nowrap;
    overflow: auto;
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 10px;}
    .insta-blocks deferred-media {
    width: 100%;
    min-height: 400px;
    min-width: 220px;
    max-width: 99%;
}
  .featured-blog-posts-card__content{    gap: 5px;}
  .right_article .featured-blog-posts-card__inner {
    align-items: flex-start;
    gap: 15px;
}
  .right_article .featured-blog-posts-card__inner .resource-image{    max-width: 100px;}
  .featured-blog-posts-card__content .blog-post-card__content-text,
  .featured-blog-posts-card__content .blog-post-card__content-text .text-block,
  .featured-blog-posts-card__content .blog-post-details{font-size:14px;}
  .featured-blog-inner>* {
    width: 100%;
}

.featured-blog-inner .left_article .resource-list--grid{--resource-list-columns-mobile: repeat(1, 1fr);
    --column-count-mobile: 1;}
  .featured-blog-inner{gap: 1rem;
    flex-wrap: wrap;}
  .featured-blog-posts .section_header h2 {
    margin-bottom: 1rem;
}
  .email-signup__input-group .email-signup__button{    min-width: 100px;}
   .join-home .section-content-wrapper.section-content-wrapper{    gap: 10px;}
  .email-signup__input.paragraph{    padding: 10px;}
  input.paragraph.paragraph, input.paragraph.paragraph:not([type]), textarea.paragraph.paragraph, select.paragraph.paragraph {
        font-size: 14px;
    }
  .join-home .email-signup-block {padding:0 10px;}
  .newsletter-pro .layout-panel-flex--row:not(.mobile-column),
 .icon-text-btm .layout-panel-flex--row:not(.mobile-column){
        flex-wrap: nowrap;padding-top:2rem;
        overflow: auto;        justify-content: flex-start;
        gap: 2rem;}
       .newsletter-pro .layout-panel-flex--row:not(.mobile-column)>.image-block,
        .newsletter-pro .layout-panel-flex--row>.group-block--width-fill,
       .icon-text-btm .layout-panel-flex--row>.group-block--width-fill {
    min-width: 130px;padding:2rem 0 0;
}
.custom-section-content .newsletter-pro .image-block__image{max-height:66px;    object-position: bottom left;}
.carousel-section-home .carousel-content slideshow-slides{    padding: 0 10px;}
.carousel-section-home .carousel-content slideshow-slides .card{    width: 100%;
    max-width: 170px;}
    .footer-outer-sec{padding:0 20px 30px;}
    .pro-faq-section summary .svg-wrapper, .pro-faq-section summary .svg-wrapper svg {
    width: 12px;
    height: 12px;
}
.pro-faq-section .text-block {padding-bottom:10px}
.quantity-selector-wrapper .quantity-selector{   min-width: 140px;}
.button.quantity-minus,
.button.quantity-plus {
    width: 43px;}
.tab_main-main{    padding: 0 1rem 2rem;}
.tab-btn{    font-size: 12px;}
.tab-content{    padding: 0 1rem;gap: 1rem;    flex-wrap: wrap;}
.tab_main-wrap .tab-content{padding:0;}
.tab-content-right,
.tab-content-left {
    width: 100%;
    max-width: 100%;
} 
    .template-product .section.why-grid-section {
        margin-top: 0;
    }
    .product_content p{font-size:14px;}
    .details-content > rte-formatter.text-block.rte{padding:16px 15px; font-size:15px;}
    .accordion-img-text{    padding: 35px 20px;}
     .section.why-grid-section .text-block.custom p{font-size:15px; padding:0 5px;}
.product_feature-main{    padding: 0 1rem 1rem;    flex-wrap: nowrap;
    overflow: auto;}
.product_feature-item{    min-width: 60%;}
.tab-content-items{    gap: 1rem;}
.tab-content-item {
    width: calc(33.33% - 1rem);}
.tab-content-item .heading{    padding-bottom: 1rem;    font-size: 16px;
}
.product_content {
    padding: 1rem;
}
.prd-slide-show.slideshow-section {
    padding: 0;
}
.product_content h2{    font-size: 30px;}
.showstoppers__wrap {
    padding: 3rem 1rem;}
.showstoppers__wrap .product-title{          margin: 0;  font-size: 20px;}
.features{    gap: 1rem;    padding: 1rem;
    overflow: auto;    justify-content: flex-start;}
.features p{font-size: 14px;
    line-height: 1.1;
    padding: 5px 0 0;}
.features h4{    font-size: 15px;}
.feature ~ span {
    font-size: 23px;
}
.feature {
    min-width: 200px;
}
.red-itext p{ font-size: 72px;}
.behind-headtext p{    font-size: 40px;}
.lux-section .text-bottom p{    display: block;        margin: 0 auto 0;
    text-align: center;}
    .about-begining .group-block.beg-left{padding:0 20px 60px 30px;}
.beg-heading.text-block {
    padding: 0 0 10px;
}
.para-text1 p,
.beg-text p{    font-size: 15px;}
.about-begining{grid-template-columns:1fr;}
.about-three-col .group-block{    padding: 30px;}
.founer-notes .red-itext p {
        font-size: 72px;
    }
.founer-notes.group-block{    padding: 50px 30px;}
.founer-notes .red-itext{padding:0 0 10px;}
.we-design-section > .group-block{    padding: 0px 15px 30px;}
.we-design-section .text-block.custom p{        font-size: 16px;
        padding: 0 10px;}
.design-section > .group-block-content{    flex-wrap: nowrap;
    overflow: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start}
.design-section > .group-block-content .group-block{             min-width: 80%;
        padding-bottom: 10px;   width: 100%;
      
}
.design-section .text-block p{font-size:15px;}
.design-section .ground-up .group-block-content .image-block__image {
    max-width:80px;
}
.about-sectwo-col .section-content-wrapper > .group-block{ padding: 40px 30px;}
.icon-text-btm .layout-panel-flex--row:not(.mobile-column){ padding: 20px 5px; gap: 10px;}
 .heels-sec-icon .custom.text-block p{font-size:18px;}
 .heels-sec-icon .heels-wrap .image-block {
            flex: 1 1 0; min-width:60px;
            max-width: 60px;
        }
        .styleswtch-sec2 .text-block h2{    font-size: 18px;}
        .styleswtch-sec2 .style-grid{min-width:70%;}
         .tect-sec2-block{    min-width: 80%;}
  .tect-sec2-block .group-block-content .group-block-content{     flex-flow: row var(--flex-wrap);
        align-items: center;padding-bottom: 0;
        justify-content: space-between;}
        .tect-sec2-block .image-block--height-fill .image-block__image{    max-width: 80px;}
        .tect-sec2-block .group-block-content .group-block-content .text-block p{
    white-space: nowrap;
    font-size: 16px;}
    .text-two-col .virtual-tryon, .text-two-col .size-withAi {
    padding-top: 5rem;
}
.custom-section-content .size-withAi .image-block__image,
.custom-section-content .virtual-tryon .image-block__image{    max-width: 32px;}
.virtual-tryon .group-block-content, .size-withAi .group-block-content {
    max-width: 100%;}
.tect-sec2-block .group-block-content .text-block:before{    width: 60px;
    top: 11px;
}
.layout-panel-flex--column > .group-block--height-fill.video-tech {padding:0;}
.video-tech > .group-block-content{    gap: 1rem;}
.styleswtch-sec2 .layout-panel-flex--row:not(.mobile-column),
.tech-sec2 .layout-panel-flex--row:not(.mobile-column) {flex-wrap: nowrap;        padding-bottom: 10px;overflow: auto;}
.material-tectsection .material-left{padding:0 1.5rem;}
.material-right div.image-block:nth-child(2) img{    margin-bottom: 0;}
.material-right{position: static;
    max-width: 100%;}
.style-tabs .tab_main-main {
    padding: 0 0rem 1rem;}
.style-tabs1 .tab-content ul li {
    flex: 1 0 calc(50% - 6px);
}
.how-to-video .deferred-media__poster-button {
    min-height: 280px;        --video-aspect-ratio: 100% !important;
}
.style-tabs2 .tab-content ul li {
    flex: 1 0 calc(50% - 20px);
}


.heels-wrap .group-block-content{    flex-wrap: nowrap;
    overflow: auto;justify-content:flex-start; align-items:center;
    flex-direction: row;}
 .heels-wrap .design-tech-grid{    width: 100%;
    min-width: 80%;
    padding: 20px;}
.heels-sec-icon .image-block{   }
    .heels-sec-icon .custom.text-block p {
        font-size: 15px;
    }
.bottom_text p:before{    bottom: 7px;    left: 16rem;}
.header .search-action .header-actions__action svg{width:21px; height:20px;}
header-actions .swym-header-icon-html svg{width:18px;}
.footer-outer-sec .follow-us-section .text-block p, .icon-text-btm .text-block p{font-size:14px;}
.footer-outer-sec > .group-block-content{gap:50px}
.nuvah-look-headline .real-rewies-sec{padding:0 10px;}
.section.grid-section{padding:0;}
.section.grid-section .section-content-wrapper.section-content-wrapper{gap:40px;}
.left_article .featured-blog-posts-card__content h4 *{font-size:16px; font-weight:bold;}
.featured-blog-posts-card__content h4 .text-block{font-size:14px; font-weight:bold;}
.featured-blog-inner .featured-blog-posts-card__content .blog-post-details > span{font-size:14px;}
 .featured-blog-inner .featured-blog-posts-card__content .blog-post-details{align-items:center;}
.featured-blog-inner .right_article .featured-blog-posts-card{padding:10px;border:1px solid #000;}
.star_wrap .star_svg svg{width:18px; height:18px;}
.grid-section .custom-section-content .image-block__image{max-width:110px; min-height:110px}
.section[data-testid="product-list"]{padding-top:1rem; padding-bottom:0;}
.ui-test-product-list .text-block.h2 {
}
.section.section-carousel.real-reviews-sec{padding-top:1rem;}
.ui-test-product-list .section-resource-list{margin-bottom:1rem}
.group-block-content .text-scroller-wrap .slick-track{min-width:100px;}
.group-block-content .text-scroller-wrap h4{display:block; width:100%;}
.group-block-content .text-scroller-wrap{max-width:260px; min-width:200px; width:100%;}
.ui-test-product-list .section-resource-list .section-resource-list__header .group-block-content{gap:0;}
.product-details .pro-title p{font-size:25px;}
.product-information__grid .compare-at-price,
.product-information__grid .price{font-size: 18px;letter-spacing:0;}
.compare-at-price{gap: 5px;}
.size_button{    padding: 7px 8px;    gap: 8px;font-size: 12px;    line-height: 1;}
.accordion-img-text rte-formatter h2 strong{    font-size: 70px;}
.showstopper-section .shoeSlider .swiper-button-next, .showstopper-section .shoeSlider .swiper-button-prev{    width: 35px;min-width: 35px;
    height: 35px;    bottom: 0;}
.swiper.shoeSlider{padding-bottom:4rem}
.showstopper-section .shoeSlider:before{bottom:17px;}
.swiper-slide .show_topper{transform:scale(1);}
.why-grid-section .image-block__image {
        max-width: 40%;
    }
.footer-content .menu__item a{font-size:14px;}
.product-grid .icons-wrap .svg_wrapper svg {
    width: 24px;
    height: 24px;
}
.custom-section-content .why-section .image-block__image{max-width:60%;min-height:155px;}
.tab_main-wrap{
    margin-top: 2rem;
}

.layout-panel-flex--row > .group-block--width-custom.how-to-video {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
}
.how-to-use-sec .image-block{max-width:100px;}
.sty-switch-why .why-section .group-block{        min-width: 45%;}
.sty-switch-why .custom-section-content .why-section .image-block__image{max-width: 70%;}
.sty-switch-why .custom-section-content .why-section h3{    font-size: 22px;}
.beg-left .beg-text p, .about-three-col  rte-formatter p,
.beg-left .beg-text {
    max-width: 100% !important;
    width: 100%;
} 
.founer-notes .red-itext:before{    top: -20px;
    width: 70px;
    height: 60px;right:-60px;}
    .founder-sec:after{right: 0;    width: 160px;
    height: 90px;}
 .product-grid-container .collection-wrapper .product-grid .card-gallery{margin:0;padding:0;}
 .product-grid-container .product-card .swym-advanced-wishlist-collections-container{        top: 5px;height:21px}
.teamplate--about-us .hero-wrapper.section-wrapper .hero{padding-top:47px}
.hero--no-blocks-auto-height .hero__media{min-height:310px}
.icon-text-btm img{max-width:45px; height:45px; width:45px; min-width:45px; min-height:45px;}
.icon-text-btm .layout-panel-flex--row>.group-block--width-fill{min-width:110px;padding:0;}
.patch-icon{margin: -10px 0 -30px}
.slide_show-3-item .slick-arrow{width:25px; height:25px; min-height:25px; min-width:25px;}
button.slick-prev.slick-arrow{left: 0px;
        transform: translate(-50%, 0px) rotate(180deg);}
button.slick-next.slick-arrow {
    width: 25px;right:0;
    min-width: 25px;
}
.slide_show-3-item .slick-arrow.slick-prev{left: 25px;
    bottom: 43%;}
.slide_show-3-item .slick-arrow.slick-next{    right: 7px;}
.slick-arrow  svg path{stroke-width:1px;}
button.slick-arrow[aria-disabled="true"] {opacity:.5}
.why-section .text-block.h3 h3{    font-size: 22px;}
.section.home-multi-grd-sc{margin:0 0 0rem}
.slide_show-3-item{padding-bottom:0;}
.product-information__media slideshow-controls[controls-on-media], .slideshow-section slideshow-controls[controls-on-media]{        bottom: -10px;}
.product-grid__card.product-grid__card{padding:5px 0 10px;}
.section .swym-advanced-wishlist-collections-container{padding:0;}
.resource-list__carousel .card-gallery svg{width:22px; height:22px;}
  .product-recommendations .card-gallery{padding-left:10px; padding-right:10px;}
.product-recommendations .product-card .icons-wrap{top:0;}
.product-recommendations .user-select-text .text-block{padding-left:10px; padding-right:10px;}
.product-recommendations product-price{padding-left:10px; padding-right:10px; padding-bottom:10px;}
.tab_main-wrap .product-grid .card-gallery,.tab_main-wrap .resource-list__carousel .card-gallery{margin:0;}
.about-begining .section-content-wrapper.section-content-wrapper{padding-bottom:0;}
.group-block.design-section{padding-bottom:2rem}
.teamplate--about-us .hero--no-blocks-auto-height .hero__media {
        padding-top: 14px;    } 
.section.why-grid-section {
    margin-top: 2rem;
}
.layout-panel-flex--row > .group-block--width-custom.material-left{padding-left:2rem;}
.teamplate--tech .hero--no-blocks-auto-height .hero__media {
        min-height: inherit;
    }
    .slideshow-section .text-block p{        font-size: 14px;}
    .slideshow-section.collection-main-banner .text-block p{font-display:25px;}
.section-resource-list slideshow-arrows[position=center], .ui-test-product-list slideshow-arrows[position=center]{padding:0 5px;margin:0; justify-content:flex-start;}
.ui-test-product-list .section-resource-list__content .button-secondary{max-width:160px;bottom: 0;        margin-bottom: 4px;
    padding: 10px;
    font-size: 14px;}
    .product-grid .card-gallery, .resource-list__carousel .card-gallery {
    border-bottom: 1px solid rgb(var(--color-border-rgb) / 1.0);
    padding: 0 5px 5px !important;
}
   .template-index .section[data-testid="product-list"]{padding-top:2rem;}
.join-home:after{width: 90px;
    height: 90px;}
.resource-list__item:hover .card-gallery slideshow-component[disabled='true'] slideshow-arrows{padding:0;}
.join-home:before{    width: 87px;
    height: 73px;bottom: 140px;}
.instafeed-new-layout-container {
    margin-top: 1.5rem;
}
.two-image-text-sec . first-img-mob .image-block--height-fill .image-block__image{--ratio: .95 !important;}
 .slideshow-section.home-top-slider slideshow-controls[controls-on-media]{  _background: linear-gradient(to right,  rgba(240,231,224,1) 0%,rgba(238,231,225,1) 6%,rgba(234,227,221,1) 7%,rgba(220,219,217,1) 7%,rgba(232,233,227,1) 7%,rgba(234,235,229,1) 8%,rgba(234,234,226,1) 8%,rgba(236,232,229,1) 9%,rgba(237,232,226,1) 13%,rgba(236,233,226,1) 16%,rgba(237,233,230,1) 16%,rgba(235,235,227,1) 17%,rgba(234,233,228,1) 18%,rgba(237,234,227,1) 19%,rgba(233,232,227,1) 19%,rgba(233,232,227,1) 21%,rgba(236,232,229,1) 23%,rgba(234,233,228,1) 26%,rgba(237,233,230,1) 26%,rgba(233,232,228,1) 28%,rgba(237,233,230,1) 28%,rgba(233,232,227,1) 29%,rgba(232,233,227,1) 31%,rgba(236,233,228,1) 32%,rgba(232,232,224,1) 32%,rgba(233,232,227,1) 32%,rgba(234,233,229,1) 34%,rgba(235,234,229,1) 36%,rgba(233,232,227,1) 36%,rgba(235,234,229,1) 37%,rgba(235,234,229,1) 39%,rgba(236,233,226,1) 39%,rgba(236,233,228,1) 40%,rgba(234,229,223,1) 40%,rgba(233,232,227,1) 41%,rgba(232,232,224,1) 41%,rgba(230,229,225,1) 42%,rgba(233,230,223,1) 43%,rgba(234,231,224,1) 44%,rgba(233,232,228,1) 44%,rgba(232,231,227,1) 45%,rgba(231,231,223,1) 45%,rgba(230,229,225,1) 46%,rgba(232,231,227,1) 47%,rgba(230,229,225,1) 47%,rgba(231,231,223,1) 49%,rgba(230,229,225,1) 50%,rgba(232,231,227,1) 50%,rgba(229,230,225,1) 50%,rgba(230,230,222,1) 52%,rgba(227,226,221,1) 52%,rgba(227,226,221,1) 53%,rgba(230,230,222,1) 54%,rgba(228,227,222,1) 54%,rgba(230,230,222,1) 55%,rgba(227,228,222,1) 55%,rgba(230,227,220,1) 56%,rgba(231,228,223,1) 57%,rgba(230,227,220,1) 57%,rgba(233,225,223,1) 57%,rgba(230,227,220,1) 58%,rgba(228,227,222,1) 58%,rgba(230,227,220,1) 59%,rgba(226,225,220,1) 63%,rgba(223,222,218,1) 63%,rgba(225,224,220,1) 63%,rgba(223,222,218,1) 64%,rgba(226,225,221,1) 64%,rgba(223,222,220,1) 65%,rgba(224,225,220,1) 66%,rgba(221,222,217,1) 66%,rgba(218,219,214,1) 69%,rgba(220,221,215,1) 69%,rgba(217,218,212,1) 71%,rgba(218,219,213,1) 72%,rgba(215,216,211,1) 72%,rgba(215,215,213,1) 74%,rgba(212,213,208,1) 75%,rgba(211,212,207,1) 76%,rgba(213,214,209,1) 77%,rgba(209,210,205,1) 79%,rgba(211,212,207,1) 79%,rgba(207,208,203,1) 81%,rgba(207,208,203,1) 84%,rgba(203,204,199,1) 86%,rgba(202,207,201,1) 87%,rgba(202,204,199,1) 90%,rgba(202,207,201,1) 90%,rgba(200,202,197,1) 90%,rgba(200,200,198,1) 91%,rgba(200,200,198,1) 92%,rgba(203,203,201,1) 93%,rgba(201,201,199,1) 93%,rgba(200,200,198,1) 93%,rgba(200,201,196,1) 97%,rgba(200,202,197,1) 97%,rgba(205,207,202,1) 100%,rgba(249,243,243,1) 100%);
      bottom: -42px;}
      .sorting-filter accordion-custom,
.button.facets__see-results {
    display: none;
}
.product-details {
    min-width: inherit;
}

label.variant-option__button-label.option_Color{    min-width: 70px !important;    width: 70px;
    height: 70px;}
.why-grid-section .why-section .group-block .group-block-content .group-block{padding:15px;}
.why-grid-section .group-block.even-sec + .odd-sec{border-left:1px solid;}
.about-begining .beg-left:after{    width: 170px;         height: 100px;
        bottom: -25px;}
.teamplate--tech .hero-wrapper .hero {min-height:42svh !important}
.teamplate--style-switch .tab_main-wrap .tab-content{padding: 0 1rem;}
.style-tabs2 .tab-content ul {
    gap: 10px;
}
.real-reviews-sec .text-block.rte p,
.gray-text.text-block p{font-size: 14px;}
.lux-section .red-itext p{font-size:80px; line-height:40px;}
.behind-headtext p{font-size:36px;}
.header__row .header__columns{        min-height: 60px;}
.group-block.newsletter-pro{padding-top:2rem;}
.tab-content-right{padding: 1rem 0;}
.metafield-rich_text_field h2 {
    font-size: 28px;
    margin: 1rem 0 5px;
}
.tab-content .metafield-rich_text_field p{font-size:14px;}
  .sticky-add-to-cart  .sticky-add-to-cart__price {
        font-size: 13px;
    }
.tech-grid-block .image-block {
    max-width: 50px;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}


    }
  
    img.size_icon { width: 20px;}
.teamplate--about-us .hero-wrapper.section-wrapper .hero{ padding-top: 34px;}




@media (max-width:480px){
  .grid-section .custom-section-content .image-block__image{max-width:100px;         min-width: 100px;
        min-height: 100px;}
  .right_article .featured-blog-posts-card__inner .resource-image{max-width:80px}
.header__row .header-actions__action svg{width:21px;}
    .swym-header-icon-html .swym-header-icon-count-bubble {
        width: 14px;
        height: 14px;
        right: -5px;
        left: auto;}
.header__row .header-logo__image{    width: 100px;}
.header .account-drawer .account-button{margin-right:-7px;margin-left:-10px}
.header .header-actions__cart-icon .cart-bubble{width:14px;}
.why-section .text-block.h3 h3{min-height:50px}


}
.handle__returns-exchanges-refunds-policy main, .handle__contact main, .policy-page main{background:url(/cdn/shop/files/page-bg.png?v=1782725763) no-repeat center 0; background-size:100%;    background-attachment: fixed;
    background-position: 0px 150px;
    transition: 0.3s ease;
  }
.home-top-slider .slide__content h1 {
    
    text-shadow: 0px 0px 5px #fff;color:#3c1f4c
}
.home-top-slider .slide__content h1 strong{color: #E31C79; font-weight:inherit;}
.dwell-sv-slider-wrap .dwell-sv-card a.dwell-sv-add-btn{background:#E31C79!important}
.product-information .fv-trigger,
.product-information .floating-video{box-shadow:0 25px 50px -12px #00000040;min-height: 150px;width:130px; border-radius:8px;}
.product-information .floating-video video{}
.video-popup-open .header-section{z-index:1;}
.video-popup-open .video-popup-overlay{background: color-mix(in oklab, #000 70%, transparent);}
.video-popup-open .announcement-bar__slider{    z-index: -1;}
.video-popup-open .video-popup{position:static;max-width: 365px;border-radius: 8px; box-shadow:none;}
.video-popup-open .video-popup-close{background:color-mix(in oklab,#000 70%,transparent);    line-height: 43px;    top: 42px;
    right: 4rem;    width: 44px;
    height: 44px;}
.video-popup-open .video-popup video{    background: transparent;}
.video-popup-open .sticky-add-to-cart .sticky-add-to-cart__bar{z-index:1;}
.fv-trigger .fv-unmute-pill{top:50%;     transform: translateY(-50%);    border-radius: 5px;
    background: #97979761;font-weight:400;    padding: 5px 7px; right:4px; margin:0 auto;    max-width: max-content;}
.fv-trigger .fv-wrapper{max-width:375px;}
.fv-image img {width:70px; height:auto;border-radius:4px;}
.video-popup-open .shopify-section-group-header-group.section-wrapp{z-index:-1;}
.pay_image{max-width:60px; filter:invert(1);}
.section-product-hotspots__content .hotspots-container{display:flex; width:100%; height:100%;}
.mob-hotspot-section{display:none;}
.custom-product-hotspoot-wrapp  {position:relative;}
.product-hotspot-title,
 .section-product-hotspots__wrapper .h4 p{font-size:48px; text-align:center;font-family: 'Behind The Nineties';
    font-weight: 500;color:#3c1f4c;
    font-style: italic;}
 .desk-hotspot-section .section-product-hotspots__wrapper .section-product-hotspots__header{margin:0 auto 4rem; position:static;  }
    .product-hotspot-title{position:absolute; background:#fff; padding:10px; top:0;width:100%;line-height:1; color:#3c1f4c}
 .home-top-slider slideshow-slides{max-height:90vh;}
 .desk-hotspot-section .section-product-hotspots__content .hotspots-container{  position:static; flex-wrap: wrap;}
.section-product-hotspots__content {
   .slick-arrow svg{display:none;}
.slick-next.slick-arrow{right:15px;}
.slick-prev.slick-arrow{left:15px;}
}
.hotspots-container __web-inspector-hide-shortcut,
.slick-list.draggable.__web-inspector-hide-shortcut__ {
    visibility: visible !important;
}
.desk-hotspot-section .section-product-hotspots__content{overflow:inherit ;}
.product_feature-item{border:1px solid #000; border-right:0;}
.product_feature-item:last-child {border-right:1px solid #000;}
button#fvCloseFloating {
    border: 0;
    left: auto;
    position: fixed;
    right: 22px;
    /* Follows the tile - see "Floating video tile and its close button" at the
       end of this file. 285px, the old hardcoded value, is what this resolves
       to at rest on desktop. */
    bottom: calc(var(--fv-tile-bottom, 90px) + 195px);
    background: rgba(0,0,0,0.2);
    z-index: 111;
    color: #fff;
    width: 30px;
    border-radius: 100%;
    height: 30px;cursor:pointer;
}
.template-product #MainContent .shopify-section:nth-child(1){z-index:1111;}
.slick-slide > div {
    display: block;
    width: 100%;
}
.custom-product-hotspoot-wrapp {
    position: relative;
    display: block;
    width: 100%;
}
.cust-product-image {
    width: 100%;
    display: block;
}
.hotspots-container .custom-product-hotspoot-wrapp, .hotspots-container  .cust-product-image,
.hotspots-container .group-hotspot-product{height:100%;}
.hotspots-container.slick-initialized .slick-slide{height:auto;}
.hotspots-container .slick-list{width:100%;}
.hotspots-container .slick-track{display: flex; align-items: stretch;}
.hotspots-container .slick-slide > div {height:100%;
    display: block;
    width: 100%;
}
.hotspots-container .slick-slide img{height:100%; object-fit:cover;}
.showstoppers__wrap .title{color:#3C1F4C;}
.quick-add-modal__content .breadcrumb{display:none;}
  header-actions .swym-advanced-header-icon{    margin-right: 12px;  margin-left: -3px;}

  /* ---- mobile header icon spacing ------------------------------------ */
  /* The right-hand icons rendered at uneven gaps: 2px between search and
     wishlist (the -3px left margin above pinned them together) against 25px
     and 18px for the rest. Each component also wrapped a similarly sized glyph
     in a different box - 44px around a 21px account icon, 23px around an 18px
     wishlist icon - so a uniform gap still looked uneven. Normalising the boxes
     and centring the glyphs makes the flex gap what the eye actually sees.
     Mobile only: desktop keeps the margins above. */
  @media (max-width: 749px) {
    header-actions .swym-advanced-header-icon{ margin-right: 0; margin-left: 0; }

    header-actions{ display: flex; align-items: center; gap: 10px; }

    .header__column--right search-button,
    .header__column--right .swym-advanced-header-icon,
    .header__column--right .account-popover,
    .header__column--right cart-drawer-component{
      width: 24px; min-width: 24px;
      display: flex; align-items: center; justify-content: center;
      margin: 0; padding: 0;
    }

    .header__column--right .account-popover .account-buttons{
      width: 100%; justify-content: center; margin: 0; padding: 0;
    }
  }

  /* Phone logo sizing, proportional.
     The header holds seven icons plus a ~7:1 wordmark. At a fixed 28px the logo
     is 182px wide, which at 360px runs under the search icon (left icons end at
     88, the icon cluster starts at ~234). A fixed smaller size fixes 360px but
     then every wider phone gets the same small logo with the spare width turned
     into empty space - a 412px screen has 52px more room but an identically
     sized logo, so it reads as sparse next to a 360px one.
     Scaling with the viewport keeps the logo the same *proportion* of the screen
     at every phone width: 5vw is 18px at 360, ~21px at 412, 25px at 500, and
     reaches 28px at 560 - which is exactly logo_height_mobile, so it hands back
     to the theme setting with no jump. */
  @media (max-width: 622px) {
    .header__column--center .header-logo__image,
    .header__column--center img{
      /* Cap on the theme's own logo_height_mobile setting (exposed by
         blocks/_header-logo.liquid as --header-logo-image-height-mobile) so
         changing it in the theme editor still takes effect here. The vw term
         only ever scales the logo DOWN on narrow screens; it never exceeds the
         merchant's chosen height. Fallback 28px if the variable is absent. */
      height: clamp(15px, 4.5vw, var(--header-logo-image-height-mobile, 28px));
      width: auto;
    }
  }

  @media (max-width: 430px) {
    /* Logo is centred on the SCREEN, not between the icon clusters. The two
       clusters are unequal (left 88px: burger + AR + AI; right ~109px: four
       icons), so a screen-centred logo has less room on its right - it has to
       stay narrow enough to clear search.
       At 360px: centre 180, cluster starts 245, so the logo may be at most
       ~2*(245-6-180) = 118px wide. 4.5vw = 16.2px = ~113px wide, leaving ~8px.
       Boxes drop 24->22 and the gap 6->5 to buy that room back. */
    .header__column--center a{ margin-inline-end: 0; }

    .header__column--right search-button,
    .header__column--right .swym-advanced-header-icon,
    .header__column--right .account-popover,
    .header__column--right cart-drawer-component{
      width: 22px; min-width: 22px;
    }

    /* Tighter icon gaps on narrow phones: keeps the four icons reading as one
       group and hands the spare width back to the logo.
       Measured 360px: icon gaps ~10px, logo clears the left icons by ~7px and
       the search icon by ~15px (was 10px at gap:8). */
    .header__columns .header__column--right{ gap: 5px; }
    header-actions{ gap: 5px; }
  }

  /* Below 360px a screen-centred logo cannot clear the search icon: the widest
     a centred logo can be is (viewport - 242px), which at 323px is 81px - about
     11px tall, too small to read. Devices this narrow (original iPhone SE) fall
     back to centring the logo in the gap between the icon clusters instead, so
     it stays legible and nothing overlaps. */
  @media (max-width: 359px) {
    .header__column--center a{ margin-inline-end: 30px; }
  }

/* ------------------------------------------------------------------ */
/* Search icon side in drawer mode                                      */
/*                                                                      */
/* The header renders two search buttons and toggles them by class:     */
/* .search-action--hidden-on-menu sits in the LEFT column, and          */
/* .search-action--hidden-on-drawer sits in the RIGHT column with the   */
/* other icons. layout/theme.liquid sets data-menu-style="drawer" for   */
/* ANY touch device, not just small screens - so on a touchscreen       */
/* tablet the theme showed the left-hand one, putting search beside the */
/* hamburger instead of with the cart, and overriding the section's     */
/* search_position:right setting.                                       */
/* The <=749px rules already force the right-hand one; this applies the */
/* same choice at every width so search stays with the other icons.     */
/* ------------------------------------------------------------------ */
#header-component[data-menu-style='drawer'] .header__column--left .search-action--hidden-on-menu {
  display: none;
}

#header-component[data-menu-style='drawer'] .header__column--right .search-action--hidden-on-drawer {
  display: flex;
}

/* ------------------------------------------------------------------ */
/* Desktop header icon spacing                                          */
/*                                                                      */
/* The four right-hand icons rendered at 10 / 27 / 25px apart. Causes,  */
/* all pre-existing and none of them a single gap value:                */
/*   - search carries margin -14.4px / -8px, wishlist -3px / +12px      */
/*     (the swym rule near line 6952 is not inside a media query, so it */
/*     applies here as well as on mobile)                               */
/*   - header-actions has margin-inline-start:-14.4px on desktop; the   */
/*     theme zeroes it for mobile only (see ~line 6317)                 */
/*   - boxes were 44 / 23 / 54 / 44 around glyphs of 29 / 23 / 24 / 24, */
/*     so even a uniform gap still rendered uneven                      */
/*   - the search glyph sat 7px outside its own box on a negative       */
/*     margin of an inner wrapper                                       */
/* Normalising box, glyph and margins makes the flex gap the only thing */
/* the eye sees: measured 20 / 20 / 20 at 1280px.                       */
/* ------------------------------------------------------------------ */
@media (min-width: 750px) {
  .header__columns .header__column--right {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .header .header__column--right header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-inline-start: 0;
  }

  .header__column--right search-button,
  .header__column--right .swym-advanced-header-icon,
  .header__column--right .account-popover,
  .header__column--right cart-drawer-component {
    width: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header__column--right .account-popover .account-buttons {
    width: 100%;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header__column--right .svg-wrapper {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header__column--right button {
    margin: 0 !important;
    padding: 0 !important;
  }

  .header__column--right svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin: 0 !important;
  }
}

  .account-popover .kp-old-theme.header--icon,   .account-drawer .kp-old-theme.header--icon--mobile{margin:0;}
.active-toggle-w .home-multi-grd-sc,
.active-toggle-w .explore-sec{width:78%; margin-left:auto;padding-left: 0;}
.facets__filters-wrapper .variant-option--swatches-disabled .variant-option__button-label .swatch{    opacity: .3;}
.facets__filters-wrapper .variant-option--swatches-disabled .variant-option__button-label svg{border-radius: 50px;}
.quick-add-modal .variant-option--equal-width-buttons .variant-option__button-label{width: 45px;}
/* .quick-add-modal .quick-add-modal__content{display:flex;} */
.showstoppers__wrap .swiper-slide{padding:3rem 0 0}
.product-grid__item{position:relative;}
.collection__slide--content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.collection__slide--content .collection__slide-heading{    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;}
.collection__slide--content .slide_btn{margin:auto 0 0;border: 0.88px solid #FFFFFF;font-family: Plus Jakarta Sans;
font-weight: 500;
font-size: 21.88px;
line-height: 119%; text-transform:uppercase; min-width:168px; min-height:48px;
text-align: center;background: transparent;
    padding: 0;
}
.collection__slide-heading .metafield-rich_text_field p{font-family: Plus Jakarta Sans;
font-weight: 300;
font-size: 36.4px;
letter-spacing: 2%;
text-transform: uppercase;color:#fff;
}

.collection__slide-heading .text{margin: 0 0 auto; position:relative;}
.collection__slide-heading .text:before{content:""; position:absolute; top:100%; height:calc(100% - 125px); background-color:rgba(255,255,255,.3); width:1px;}
.v-line{}
.home-top-slider .image_link{position:absolute; top:0; left:0; width:100%; height:100%; z-index:11;}
.ui-test-product-list .resource-list__carousel > slideshow-container > slideshow-arrows{    top: auto;
    bottom: -95px;
    max-width: max-content;padding:0;    gap: 10px;
    right: 0;
    left: auto;}
/* Wedges was capped at 165px while the other five category icons render at
   their natural 150px, and carried margin-bottom:-5px against their 10px -
   so it was both bigger and 15px higher than the rest of the row. Both now
   match. (The width cap itself is needed: the source asset is larger.) */
.slide_show-3-item .last-widges-img img.image-block__image{max-width: 150px; margin-bottom: 10px;}



@media (min-width:750px) and (max-width:1100px){
.quick-add-modal .quick-add-modal__content .product-information__media{        width: 20rem;}
.quick-add-modal .quick-add-modal__content .product-details{    width: 25rem;}
}
@media(max-width:749px){
  
  .slide_show-3-item .last-widges-img img.image-block__image{max-width:110px;margin-bottom: 10px;}
  .collection__slide--image img,px
  .collection__slide--image{height:100%;         object-fit: cover;}
  .swiper-slide.swiper-slide-active .show_topper{transform: scale(1.5);}
  .showstoppers__wrap .swiper-slide{padding: 2rem 1rem 0;}
  .showstopper-section .swiper-wrapper{margin-bottom:1rem;}
  .cart-drawer .cart-items__details * {
    font-size: 12px;
}
  .cart-drawer .cart-items__details a{    font-size: 14px;
    line-height: 1.2;
    display: block;}
header-actions .swym-advanced-header-icon {
    margin-right: 3px;
}
.account-drawer .kp-old-theme.header--icon--mobile{top:3px; width:22px;}
  .quick-add-modal .add-to-cart-text{    font-size: 14px;
    font-weight: 500;}
  .quick-add-modal .variant-picker .variant-picker__form .variant-option.variant-option--buttons{gap:0;}
  .quick-add-modal .variant-option--equal-width-buttons .variant-option__button-label{width:35px; height:35px; min-width:35px !important; min-height:35px !important;}
  .quick-add-modal__content .variant-option--equal-width-buttons .variant-option__button-label__text {
    font-size: 12px;
}
  .quick-add-modal__content .breadcrumb{display:none;}
.quick-add-modal__content .price{    font-size: 15px;
    font-weight: 600;}
    .quick-add-modal .quick-add-modal__content {font-size:14px;padding: 15px 10px;}
 .quick-add-modal .quick-add-modal__content .product-header a:not(product-price *){        font-size: 13px;}
.quick-add-modal product-price.text-block{    padding: 0;}
.quick-add-modal label.variant-option__button-label.option_Color{        min-width: 50px !important;height: 50px !important;
        width: 50px;}
  .group-block.why-header {
    padding-bottom: 18px;
}
  .why-header .group-block-content{gap:0;}
  .template-index .ui-test-product-list .product-card .swym-advanced-wishlist-collections-container,
  .template-index .ui-test-product-list .swym-advanced-wishlist-collections-container{top: 5px;
        height: auto;
        width: auto;
        text-align: left;}
.resource-list__carousel .swym-advanced-wishlist-collections, .resource-list__carousel .swym-advanced-wishlist-collections svg{height:24px;padding: 0; width:auto;}
  .section-product-hotspots__content {
    .slick-prev.slick-arrow {
        left: 20px; top:45.2%;
    }
}
  .section-product-hotspots__content {
    .slick-next.slick-arrow {
        right: 10px;
        height: 25px;
        min-height: 25px;
    }
}
   .product-hotspot-title{max-width:95%; margin:0 auto;    left: 0;
    right: 0}
   .section-product-hotspots__wrapper .h4 p,
 .section-product-hotspots__wrapper .h4 p{font-size:31px;}
 .product-hotspot-title{font-size:14px; color:#808080; font-family: var(--font-paragraph--family); font-style:normal; background:transform;position:static; }
  .mob-hotspot-section .custom-product-hotspoot-wrapp{position:relative;}
  .section.desk-hotspot-section{display:none;}
  .mob-hotspot-section{display:block;}  
  .product-card__content .product-media-container img{margin-top:32px; object-fit:cover}
  /* The 32px (and the 40px at ~1772) drop suited the old product shots with an empty band on top. Collection
     grid photos now fill the frame, so there the badge and wishlist sit over the image (28 Sep 2026). */
  :is(.product-grid, .section-resource-list) .product-card__content .product-media-container img{margin-top:0}
 .product-form-buttons button{padding-left: 3px;
    padding-right: 3px;}
    .pro-try-add-btn{gap:6px;}
    .mob-hotspot-section .section-product-hotspots__content{aspect-ratio:inherit;}
.mob-hotspot-section .hotspots-container{    position: static; overflow:auto; flex-wrap:nowrap;
    display: flex;}
.mob-hotspot-section .custom-product-hotspoot-wrapp{min-width:30%;}

}.group-hotspot-product{display:flex !important;}

.foot-scan-howto {
  z-index: 99999999999999999999 !important;
}
.scanner-modal, .foot-scan-qr-modal {
   z-index: 99999 !important;
}

.header-scrolled.handle__returns-exchanges-refunds-policy main,
.header-scrolled.handle__contact main, 
.header-scrolled.policy-page main {
    background-position: 0px 0px;
}
/* ------------------------------------------------------------------ */
/* Homepage testimonials — .real-reviews-sec                           */
/*                                                                     */
/* Everything that COULD be done with theme-editor settings is done    */
/* there (reviewer photo ratio, card content alignment, hidden spare   */
/* cards). Only equal card heights live here, because Horizon exposes  */
/* no setting for it. Do not extend this block without checking the    */
/* block schema for a setting first.                                   */
/*                                                                     */
/* The decorative frame is deliberately NOT stretched: it keeps its    */
/* designed 700x392 proportions (via the existing object-fit:contain   */
/* rule near line 5925) so the Nuvah triangle motifs never distort.    */
/* A review longer than ~320 characters simply extends past the frame, */
/* which is accepted - the frame is decoration, not a container.       */
/* ------------------------------------------------------------------ */
/* Equal card heights, at ALL widths. Two reasons: the desktop row reads as a
   ragged grid without it, and because the frame is centred inside each card,
   unequal heights put the triangle motifs at different y positions - they only
   line up across cards when the cards match.
   No native equivalent: _card.liquid downgrades the `aspect_ratio` setting to
   a min-height as soon as a card has child blocks (see _card.liquid, "if
   children != blank"), so the editor cannot make the cards match. .card also
   ships height:100%, which resolves to auto against an auto-height flex parent
   and cancels align-items:stretch — hence the height:auto reset. */
.real-reviews-sec .carousel-content slideshow-slides {
  align-items: stretch;
}

.real-reviews-sec .carousel-content slideshow-slides > .card {
  height: auto;
}

/* ------------------------------------------------------------------ */
/* Sticky top ribbon: announcement bar + header pinned together.       */
/* The header itself is sticky via the native "Sticky header" setting  */
/* (header-group.json -> enable_sticky_header: always). Stock Horizon  */
/* only sticks .header-section, so the announcement bar above it would */
/* scroll away; these rules pin it too and push the header down by its */
/* height. --announcement-bar-height is measured and kept fresh by     */
/* setStickyRibbonProperties() in layout/theme.liquid, which also       */
/* drives the data-sticky-state flag these and the stock rules use.     */
/* ------------------------------------------------------------------ */
/* `body` prefix so this beats the transparent-header z-index rule near
   line 1069, which would otherwise drop the bar to --layer-sticky - 1. */
body #header-group:has(#header-component[sticky]) > .shopify-section-group-header-group:not(.header-section) {
  position: sticky;
  top: 0;
  z-index: 11110;
}

/* Header sits directly under the pinned announcement bar; the -1px overlap
   keeps subpixel rounding from opening a hairline gap between the two.
   z-index restores the 11111 .header-section carries when not sticky - the
   stock sticky rule lowers it to 8, under the floating video and other
   overlays. Scoped through #header-group so it outranks the same-named rule
   in sections/header.liquid, whose {% stylesheet %} block loads after this
   file. */
#header-group > .header-section:has(> #header-component[sticky='always']),
#header-group > .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
  top: calc(var(--announcement-bar-height, 0px) - 1px);
  z-index: 11111;
}

/* The store override near line 5994 keeps the menu row transparent. Unstuck it
   simply showed the page background behind it; now that the ribbon is pinned,
   page content scrolls behind it instead - so the header element itself carries
   the background once it is stuck. On the transparent home/about header this is
   also what replaces the see-through overlay after the first pixel of scroll. */
#header-group > .header-section > #header-component[data-sticky-state='active'] {
  background-color: var(--color-background);
}

/* Sticky product details must clear the whole ribbon, not just the header. The
   `html` prefix outranks the equally specific rule in
   snippets/product-information-content.liquid, which only accounts for the header. */
html body:has(#header-group #header-component[sticky]) .sticky-content,
html body:has(#header-group #header-component[sticky]) .product-details.sticky-content--desktop {
  --sticky-header-offset: calc(var(--announcement-bar-height, 0px) + var(--header-height, 0px));
}

/* Same for the cart page's sticky order summary, which positions itself off
   --header-height directly (blocks/_cart-summary.liquid). */
html body:has(#header-group #header-component[sticky]) .cart-summary__inner {
  top: calc(var(--announcement-bar-height, 0px) + var(--header-height, 0px));
}

/* The floating video tile and the WhatsApp bubble are separate fixed widgets
   stacked in the same corner on phones, and their snippets set different right
   offsets - 12px in product-floating-video.liquid, 16px in whatsapp-float.liquid -
   so their right edges do not line up. Align the tile to the bubble's gutter,
   then stack both above any app bar pinned to the bottom of the viewport
   (Vitals' Sticky Add to Cart Bar, which is mobile-only and was sitting under
   the WhatsApp button). --bottom-bar-height is measured by
   trackBottomBarHeight() in custom.js and is 0px when no bar is showing, so
   these fall back to the original offsets.

   Selectors are scoped through a parent so they outrank the snippets' own
   mobile rules, which are inline <style> blocks and therefore load after this
   file. */
/* The close button (#fvCloseFloating, styled near line 6913) is a sibling of
   the tile rather than a child, so it sits in viewport coordinates and does not
   move when the tile does - which left it stranded mid-video once the tile
   started lifting over the app's bar. Both now derive from --fv-tile-bottom.

   The button's +195px is the tile's height minus the button's own 30px and a
   6px inset, tucking its corner inside the tile's: the tile is 130px wide at a
   9/16 ratio, so 231 - 30 - 6 = 195. Right edges already agree - tile at 16px,
   button at 22px, the same 6px inset. */
/* Three things stack in that corner, bottom up: the app bar, the WhatsApp
   bubble 20px above it, the video tile 10px above the bubble. Both resting
   offsets already encoded that stack (desktop 20 + 60 bubble + 10 = 90;
   mobile 16 + 55 + 12 = 83), so adding --bottom-bar-height to each keeps the
   spacing identical whether or not a bar is showing. Applies at every width:
   the Vitals bar renders on desktop as well as mobile. */
body {
  --fv-tile-bottom: calc(var(--bottom-bar-height, 0px) + 90px);
}

.product-information .fv-trigger {
  bottom: var(--fv-tile-bottom);

  /* the bar slides in partway down the page - glide with it, do not jump */
  transition: transform 0.35s ease, bottom 0.25s ease;
}

button#fvCloseFloating {
  transition: bottom 0.25s ease;
}

.whatsapp-float-wrapp .floating-whatsapp {
  bottom: calc(var(--bottom-bar-height, 0px) + 20px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, bottom 0.25s ease;
}

@media screen and (max-width: 768px) {
  body {
    --fv-tile-bottom: calc(var(--bottom-bar-height, 0px) + 83px);
  }

  .product-information .fv-trigger {
    right: 16px;
  }

  .whatsapp-float-wrapp .floating-whatsapp {
    bottom: calc(var(--bottom-bar-height, 0px) + 16px);
  }
}

/* Floating-video popup already drops .header-section behind its overlay;
   the announcement bar needs the same treatment now that it is pinned. */
.video-popup-open #header-group > .shopify-section-group-header-group:not(.header-section) {
  z-index: 1;
}

/* ------------------------------------------------------------------ */
/* Promo tile carousel in the collection product grid.                 */
/* main-collection.liquid renders one slide per image from the         */
/* collection's custom.grid_slides list; initCollectionAdSlider() in   */
/* custom.js turns two or more into a Slick carousel. With a single    */
/* image the markup is the original single <img> and none of this      */
/* applies, so collections without the list are untouched.             */
/* ------------------------------------------------------------------ */
/* Crossfade is pure CSS - no JS measures anything, so the runaway that clamped
   the grid at 16,777,215px on mobile cannot recur. Slides are stacked absolutely
   inside a container whose height comes from its own ratio and the grid column's
   width; nothing here can feed a measurement back into a layout pass.

   8 slides x 4s = a 32s loop, each slide held ~4s with a ~0.5s fade. If the
   number of images changes, --ad-slide-count and the nth-child delays below are
   the only things to touch. */
.collection-ad-slider.collection__slide--image {
  position: relative;

  /* Fills the grid row so no gap opens under it where the neighbouring card
     carries a title and price.

     No aspect-ratio here: the grid's columns are auto-sized, and a ratio against
     a definite height gives this element an intrinsic *width*, which inflated its
     column and squeezed the product column to 83px. The slides are absolutely
     positioned and contribute nothing to sizing, so with the ratio gone the tile
     no longer influences the column at all. min-height only guards the case where
     the tile has no neighbour to take the row height from. */
  height: 100%;
  min-height: 200px;
  min-width: 0;
  overflow: hidden;
}

.collection-ad-slider .collection-ad-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: nuvah-ad-fade 32s linear infinite;
}

.collection-ad-slider .collection-ad-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-ad-slider .collection-ad-slider__slide:nth-child(1) { animation-delay: 0s; }
.collection-ad-slider .collection-ad-slider__slide:nth-child(2) { animation-delay: 4s; }
.collection-ad-slider .collection-ad-slider__slide:nth-child(3) { animation-delay: 8s; }
.collection-ad-slider .collection-ad-slider__slide:nth-child(4) { animation-delay: 12s; }
.collection-ad-slider .collection-ad-slider__slide:nth-child(5) { animation-delay: 16s; }
.collection-ad-slider .collection-ad-slider__slide:nth-child(6) { animation-delay: 20s; }
.collection-ad-slider .collection-ad-slider__slide:nth-child(7) { animation-delay: 24s; }
.collection-ad-slider .collection-ad-slider__slide:nth-child(8) { animation-delay: 28s; }

@keyframes nuvah-ad-fade {
  0% { opacity: 0; }
  1% { opacity: 1; }
  12.5% { opacity: 1; }
  14% { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .collection-ad-slider .collection-ad-slider__slide {
    animation: none;
  }
  .collection-ad-slider .collection-ad-slider__slide:first-child {
    opacity: 1;
  }
}


/* Size guide popup close button.
   The shared .icon_close rule pins to top/right of the viewport (the fixed
   .size_popup-wrap is its containing block), which drops a white cross onto
   the white sticky header where nobody can see it. Anchor it to the popup
   card instead and give it a chip so it reads over the chart too. */
.size_popup-main { position: relative; }
.size_popup-main .icon_close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #4c0362;
  z-index: 2;
}
.size_popup-main .icon_close svg { width: 16px; height: 16px; }
.size_popup-main .icon_close svg path { stroke-width: 1.5px; }
/* Headroom so the close chip clears the chart's header row. */
.size_popup-main .size-chart-wrap { padding-top: 2.75rem; }
/* Vitals sticky add-to-cart bar (#bundle-sticky_add_to_cart) renders at
   z-index 20. The main product section is lifted to z-index 1111 above, so
   while any part of it overlaps the bottom of the viewport it paints over the
   bar and the bar looks "behind" the page. Lift the bar just past the section,
   and drop it back under the size-chart and floating-video popups, which live
   inside that section and would otherwise show the bar across their bottom. */
#bundle-sticky_add_to_cart.Vtl-StickyAddToCart { z-index: 1112 !important; }
body:has(.size_wrapper.active) #bundle-sticky_add_to_cart.Vtl-StickyAddToCart,
.video-popup-open #bundle-sticky_add_to_cart.Vtl-StickyAddToCart { z-index: 1 !important; }
/* The AI share block's "copied" toast sits 20px from the bottom inside that
   same section; keep it clear of the bar like the other floating widgets. */
[class*="ai-share-copy-feedback"] { bottom: calc(var(--bottom-bar-height, 0px) + 20px) !important; }
/* Sticky bar gate - see gateStickyBarOnAtcButton() in custom.js. Hidden until
   the product's own Add to cart button has been scrolled past, on every viewport. */
body.theme-atc-visible #bundle-sticky_add_to_cart.Vtl-StickyAddToCart { display: none !important; }
/* Pincode ("Check Delivery") popup close button - same problem as the size
   chart: the shared .icon_close rule pins it to the viewport corner. The span
   now lives inside .estimated-delivery (snippets/pincode.liquid), so anchor it
   to that card. */
.estimated-delivery { position: relative; }
.estimated-delivery .icon_close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #4c0362;
  z-index: 2;
}
.estimated-delivery .icon_close svg { width: 16px; height: 16px; }
.estimated-delivery .icon_close svg path { stroke-width: 1.5px; }

/* Collection hero (Figma, Sep 2026): shorter on phones. Figma is 393x220; cut to 393x182 (28 Sep 2026)
   so the first two product cards still fit on a 360x680 phone screen.
   Export mobile banners at 1080x500 (same ratio) so nothing is cropped. */
@media (max-width: 749px) {
  .collection-main-banner slideshow-slides { min-height: 0; }
  .collection-main-banner slideshow-slide { aspect-ratio: 393 / 182; min-height: 0; }
}

/* Collection filter bar (Figma, Sep 2026): on phones the stock filter toggle shows only the word
   "Filter", no border lines, no icon, no item count. Desktop bar untouched. */
@media (max-width: 749px) {
  .facets-toggle {
    --icon-offset: 0;
    margin-inline: 0;
    border: 0;
    border-bottom: 1px solid #efefef;
  }
  .facets-toggle__button .svg-wrapper { display: none; }
  /* Figma: "Filter" 33x18 at left 16, Hanken Grotesk 400 14px, line-height 100% */
  .facets-toggle__button { padding: 0; margin: 0; font-family: "Hanken Grotesk", var(--font-body--family), sans-serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; color: #3c1f4c; height: auto; min-height: 0; padding-block: 6px; }
  /* Stock styles.css pins the bar at --minimum-touch-target (44px) and loads after base.css, hence the
     extra class. The 6px sits on the button so the tap area stays; bar is ~27px. */
  .collection-wrapper .facets-toggle { padding-inline: 16px; height: auto; min-height: 0; padding-block: 0; }
  .facets-controls-wrapper .products-count-wrapper { display: none; }
}

/* Collection category icon row (Figma, Sep 2026): a group block inside the Collection section, rendered
   between the filter bar and the product grid. Scrolls sideways on phones, six compact tiles centred on desktop. */
.collection-blocks { width: 100%; flex: 0 0 auto; grid-column: 1 / -1; }
@media (min-width: 750px) { .product-grid-container .collection-wrapper { flex-wrap: wrap; } }
.collection-cate-row > .group-block-content {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px; /* keeps the first icon off the edge when snapping */
}
.collection-cate-row > .group-block-content::-webkit-scrollbar { display: none; }
.collection-cate-row .group-block { scroll-snap-align: start; padding-top: 0; }
.collection-cate-row .text-block p { text-align: center; }
.collection-cate-row .image-block__image { min-height: 0; object-fit: contain; }
@media (max-width: 749px) {
  /* Figma: row 537x86 at left 12, gap 28 -> five ~85px tiles: 60px icon + label.
     Vertical spacing kept tight (8/4 + 8px) so the first two product cards fit above the fold. */
  .collection-cate-row > .group-block-content { gap: 28px; padding: 8px 12px 4px; justify-content: flex-start; }
  .collection-blocks { margin-bottom: 8px; }
  .collection-cate-row .group-block { flex: 0 0 auto; width: auto; min-width: 85px; max-width: none; }
  .collection-cate-row .group-block > .group-block-content { gap: 6px; }
  .collection-cate-row .text-block { width: auto; max-width: none; }
  .collection-cate-row .text-block p { white-space: nowrap; }
  .collection-cate-row .image-block,
  .collection-cate-row .image-block__image { width: 60px; min-width: 0; max-width: 60px; --width: 60px; }
  .collection-cate-row .image-block__image { height: 60px; }
  .collection-cate-row .text-block p { font-family: "Hanken Grotesk", var(--font-body--family), sans-serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; color: #3c1f4c; margin: 0; }
}
@media (min-width: 750px) {
  .collection-cate-row > .group-block-content { gap: 64px; padding: 24px 0 12px; justify-content: center; }
  .collection-blocks { margin-bottom: 16px; }
  .collection-cate-row .group-block { flex: 0 0 auto; width: auto; min-width: 140px; max-width: none; }
  .collection-cate-row .image-block,
  .collection-cate-row .image-block__image { width: 100px; min-width: 0; max-width: 100px; --width: 100px; }
  .collection-cate-row .image-block__image { height: 100px; }
  .collection-cate-row .text-block p { white-space: nowrap; }
  .collection-cate-row .text-block p { font-size: 14px; }
}

/* Collection ticker: when it is the only announcement, use the full bar width (no arrow gutters). */
.announcement-bar__slides:has(.announcement-bar__slide--collection-ticker) { margin-inline: 0; padding-inline: 12px; width: 100%; max-width: none; flex: 1 1 100%; }

/* Product card (Figma, Sep 2026): "Try It On" pill bottom-right on the image, foot-scan icon top-right,
   two-line purple title, yellow stars. Shared by the collection grid, PDP recommendations and the homepage product rows (class ui-test-product-list). */
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .icons-wrap { position: absolute; inset: 6px; gap: 0; pointer-events: none; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .icons-wrap > * { pointer-events: auto; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .icons-wrap .ar_link {
  position: absolute; right: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px; background: transparent; border-radius: 3px; /* no white pill - transparent like the wishlist heart (9 Oct 2026) */
  font-size: 11px; line-height: 1; color: #3c1f4c; text-decoration: none;
}
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .icons-wrap .ar_link .open_foot_ai { display: inline-flex; width: 16px; height: 16px; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .icons-wrap .ar_link .open_foot_ai svg { width: 16px; height: 16px; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .icons-wrap .card-wishlist { position: absolute; top: 0; right: 0; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #411d50; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .icons-wrap .card-wishlist svg { width: 22px; height: 22px; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-title, :is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card h3.h4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Figma rating row: 94x17, stars with ~3px gap, count in parentheses. */
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .rating-wrapper { --star-fill-color: #f5b301; --empty-star-fill-color: #e6e6e6; gap: 4px; height: 17px; align-items: center; padding-block: 6px 0; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .rating-wrapper .rating { gap: 3px; --star-size: 12px !important; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .rating-wrapper .rating .stars { width: 12px; height: 12px; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .rating-wrapper .rating-count { margin: 0; font-family: "Hanken Grotesk", var(--font-body--family), sans-serif; font-size: 13px; font-weight: 400; line-height: 17px; color: #3c1f4c; }
/* Figma title: Hanken Grotesk 400, 13px, line-height 150%, aligned with the image edge (173px wide on a 177px card). */
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-title,
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-title *,
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-card__content .contents,
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-card__content .contents * { text-transform: none; color: #3c1f4c; font-family: "Hanken Grotesk", var(--font-body--family), sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.product-grid__item .product-card__content a.contents .text-block,
.product-grid__item .product-card__content .text-block,
.product-grid__item .product-card__content product-price.text-block,
.product-grid__item .product-card__content .rating-wrapper { padding-inline: 0 !important; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .contents,
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .contents *,
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-card__content .contents p { text-transform: none !important; }
/* Figma image: 177x221 (4:5), radius 8px on the image only. */
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card { --border-radius: 0; --card-corner-radius: 0; border-radius: 0 !important; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .card-gallery, :is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-media-container,
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-media, :is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-media img { border-radius: 0 !important; overflow: hidden; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .card-gallery { padding: 0 !important; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-media img { object-fit: cover; width: 100%; height: 100%; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .card-gallery { border-bottom: 0; }
@media (max-width: 749px) {
  /* Tighter text stack (store rules ~6305 add 10px above the title and 10/15px around the price). */
  .product-grid__item .product-card__content a.contents .text-block { padding-top: 6px; }
  .product-grid__item .product-card__content product-price.text-block { padding: 4px 0 0; }
}

/* Product card slide indicator (Figma: 177x2 bar under the image): the stock dots restyled as flat segments. */
:is(.product-grid, .section-resource-list) .product-card .card-gallery slideshow-component { position: relative; }
:is(.product-grid, .section-resource-list) .product-card .card-gallery slideshow-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; min-height: 0; height: auto; padding: 0; margin: 0; width: 100%; display: block; }
:is(.product-grid, .section-resource-list) .product-card .card-gallery slideshow-controls .slideshow-controls__arrows,
:is(.product-grid, .section-resource-list) .product-card .card-gallery slideshow-controls .slideshow-control.icon-pause,
:is(.product-grid, .section-resource-list) .product-card .card-gallery slideshow-controls .slideshow-control.icon-play { display: none !important; }
:is(.product-grid, .section-resource-list) .product-card .card-gallery .slideshow-controls__dots { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; height: 2px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none; }
:is(.product-grid, .section-resource-list) .product-card .card-gallery .slideshow-controls__dots li { flex: 1 1 0 !important; width: auto !important; max-width: none !important; height: 2px !important; min-height: 0 !important; margin: 0; padding: 0; }
:is(.product-grid, .section-resource-list) .product-card .card-gallery .slideshow-controls__dots .slideshow-control {
  display: block !important; width: 100% !important; height: 2px !important; min-height: 0 !important; min-width: 0 !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: #e4dfe8 !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; animation: none !important; opacity: 1 !important; transform: none !important;
}
:is(.product-grid, .section-resource-list) .product-card .card-gallery .slideshow-controls__dots .slideshow-control[aria-selected="true"] { background: #411d50 !important; }
/* The stock dot is drawn by a grey ::after overlay; drop it so the bar shows the button colours above. */
:is(.product-grid, .section-resource-list) .product-card .card-gallery .slideshow-controls__dots .slideshow-control::after,
:is(.product-grid, .section-resource-list) .product-card .card-gallery .slideshow-controls__dots .slideshow-control::before { display: none !important; }

/* Figma price: Hanken Grotesk 700 12px, line-height 150%, purple; compare-at price first, grey and struck through. */
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card product-price,
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card product-price .price,
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card product-price .compare-at-price { font-family: "Hanken Grotesk", var(--font-body--family), sans-serif; font-size: 12px; line-height: 1.5; letter-spacing: 0; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card product-price .price { font-weight: 700; color: #411d50; }
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card product-price .compare-at-price { font-weight: 400; color: #9a9a9a; text-decoration: line-through; margin-inline-end: 6px; }

/* Product card tag badges (New In / Most Loved / Trending / Selling Fast). Colours come from theme settings. */
/* Figma badge: 78x17 at 8px from the image corner, radius 4, padding 2px 6px, #FFF0D1 / #9A5841,
   Hanken Grotesk 500 10px, line-height 100%, letter-spacing 2%. */
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-badges__badge--tag,
.template-product .pdp-tag .product-badges__badge--tag {
  background: var(--card-badge-bg, #fff0d1) !important; color: var(--card-badge-text, #9a5841) !important;
  font-family: "Hanken Grotesk", var(--font-body--family), sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1 !important;
  letter-spacing: 0.02em !important; text-transform: uppercase; padding: 2px 6px !important; border-radius: 4px !important; min-height: 17px; display: inline-flex; align-items: center;
}
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-badges { display: flex !important; z-index: 3; --badge-inset: 8px; top: 8px; left: 8px; } /* store rule ~5928 hides grid badges */
:is(.product-grid, .template-product .section-resource-list, .ui-test-product-list) .product-card .product-badges:not(:has(.product-badges__badge)) { display: none !important; }

/* Collection promo tile (Figma: full-width banner after the 4th product, 361x203 inside the 16px margins on phones).
   The tile's position in the DOM comes from the Collection Grid metaobject (grid_index = 5).
   On desktop (3 columns) it is re-ordered to sit after the 6th product so rows stay full. */
.product-grid .product-grid__item:has(.collection__slide--image) { grid-column: 1 / -1; width: 100%; }
.product-grid .product-grid__item:has(.collection__slide--image) .collection__slide--image { height: auto; min-height: 0; width: 100%; position: relative; overflow: visible; }
.product-grid .product-grid__item:has(.collection__slide--image) .collection__slide--image > img,
.product-grid .product-grid__item:has(.collection__slide--image) .collection-ad-slider { aspect-ratio: 361 / 203; width: 100%; height: auto; min-height: 0; }
.product-grid .product-grid__item:has(.collection__slide--image) .collection__slide--image > img { object-fit: cover; display: block; }
.collection-ad-carousel slideshow-slides { aspect-ratio: 361 / 203; min-height: 0 !important; }
.collection-ad-carousel slideshow-slide { height: 100%; }
.collection-ad-carousel .collection-ad__media, .collection-ad-carousel .slide_link { display: block; width: 100%; height: 100%; object-fit: cover; }
.collection-ad-carousel slideshow-component { position: relative; }
.collection-ad-carousel slideshow-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; min-height: 0; height: auto; padding: 0; margin: 0; width: 100%; display: block; }
.collection-ad-carousel slideshow-controls .slideshow-controls__arrows,
.collection-ad-carousel slideshow-controls .slideshow-control.icon-pause,
.collection-ad-carousel slideshow-controls .slideshow-control.icon-play { display: none !important; }
.collection-ad-carousel .slideshow-controls__dots { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; height: 2px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none; }
.collection-ad-carousel .slideshow-controls__dots li { flex: 1 1 0 !important; width: auto !important; max-width: none !important; height: 2px !important; min-height: 0 !important; margin: 0; padding: 0; }
.collection-ad-carousel .slideshow-controls__dots .slideshow-control { display: block !important; width: 100% !important; height: 2px !important; min-height: 0 !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #e4dfe8 !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; animation: none !important; opacity: 1 !important; transform: none !important; }
.collection-ad-carousel .slideshow-controls__dots .slideshow-control::after,
.collection-ad-carousel .slideshow-controls__dots .slideshow-control::before { display: none !important; }
.collection-ad-carousel .slideshow-controls__dots .slideshow-control[aria-selected="true"] { background: #411d50 !important; }
@media (min-width: 750px) {
  .product-grid .product-grid__item:has(.collection__slide--image) .collection__slide--image > img,
  .product-grid .product-grid__item:has(.collection__slide--image) .collection-ad-slider,
  .collection-ad-carousel slideshow-slides { aspect-ratio: 3 / 1; }
  .product-grid .product-grid__item:has(.collection__slide--image) { order: 2; }
  .product-grid .product-grid__item:has(.collection__slide--image) ~ .product-grid__item { order: 3; }
  .product-grid .product-grid__item:has(.collection__slide--image) + .product-grid__item,
  .product-grid .product-grid__item:has(.collection__slide--image) + .product-grid__item + .product-grid__item { order: 1; }
}

/* ==========================================================================
   PDP redesign (Figma "Nuvah UI UX & CRO", frame "iPhone 16 - 17", 30 Sep 2026)
   Mobile-first; scoped to the product template. Text #411d50, Hanken Grotesk.
   ========================================================================== */
.template-product {
  --pdp-text: #411d50;
  --pdp-pink: #f62376;
  --pdp-media-bg: #f5f1ed;
}

/* Gallery: 4:5 on the beige photo background, 60px thumbnails radius 4, 10px apart */
.template-product media-gallery .product-media,
.template-product media-gallery .product-media-container {
  background: var(--pdp-media-bg);
}
/* Stock Horizon forces cover on fixed ratios; contain keeps today's square photos whole on the beige
   (identical to cover once 4:5 photos are uploaded) */
.template-product media-gallery .product-media-container img {
  object-fit: contain;
}
@media screen and (max-width: 749px) {
  .template-product media-gallery .slideshow-controls__thumbnails {
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 16px 16px 0;
  }
  .template-product media-gallery .slideshow-controls__thumbnail {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    background: var(--pdp-media-bg);
  }
  .template-product media-gallery .slideshow-controls__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }
}

/* Figma has no breadcrumb on the mobile PDP (desktop keeps it) */
@media screen and (max-width: 749px) {
  .template-product .product-information__media > .breadcrumb { display: none; }
}

/* Figma puts the title 16px under the thumbnails; the grid (20px) plus the empty floating-video block's
   flex gap (24px) left 44px */
@media screen and (max-width: 749px) {
  .template-product .product-details .group-block:has(> .group-block-content > .pro-title) { margin-top: -20px; }
}

/* Title, rating, chips, price */
.template-product .product-details .pro-title,
.template-product .product-details .pro-title p {
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pdp-text);
}
.template-product .product-details .pdp-chips {
  margin-block: 8px;
}
.template-product .product-details .pdp-chips > .group-block-content {
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 10px;
}
.template-product .product-details .pdp-chips > .group-block-content::-webkit-scrollbar { display: none; }
.template-product .product-details .pdp-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: auto;
}
.template-product .product-details .pdp-chip::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}
.template-product .product-details .pdp-chip p {
  margin: 0;
  font-family: 'Behind The Nineties', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.28px;
  white-space: nowrap;
  color: #783979;
}
.template-product .product-details product-price,
.template-product .product-details product-price .price {
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--pdp-text);
}
.template-product .product-details .pdp-tax-note {
  margin-top: -6px;
}
.template-product .product-details .pdp-tax-note p {
  margin: 0;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pdp-text);
}

/* ---- PDP buy box (Figma y 911-1501) ---- */
@media screen and (max-width: 749px) {
  .template-product .product-details > .group-block > .group-block-content { gap: 16px; }
}

/* Coupon price box: 362x70, dashed pink 1.2px, #fffbfa, radius 8 */
.template-product .pdp-coupon {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  padding: 11px 18px;
  border: 1.2px dashed var(--pdp-pink);
  border-radius: 8px;
  background: #fffbfa;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  color: var(--pdp-text);
}
.template-product .pdp-coupon__icon { display: flex; flex: 0 0 30px; }
.template-product .pdp-coupon__icon svg { width: 30px; height: 30px; }
.template-product .pdp-coupon__text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.template-product .pdp-coupon__price { font-size: 16px; font-weight: 700; line-height: 1.35; }
.template-product .pdp-coupon__price strong { color: var(--pdp-pink); font-weight: 700; }
.template-product .pdp-coupon__hint { font-size: 12px; font-weight: 500; line-height: 1.5; }
.template-product .pdp-coupon__hint strong { font-size: 13px; font-weight: 700; }
.template-product .pdp-coupon__copy {
  position: relative;
  display: flex;
  flex: 0 0 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pdp-text);
  cursor: pointer;
}
.template-product .pdp-coupon__copy svg { width: 24px; height: 24px; pointer-events: none; }
.template-product .pdp-coupon__copied {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--pdp-text);
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.template-product .pdp-coupon__copy.is-copied .pdp-coupon__copied { opacity: 1; }

/* Colour: "Color / Name", 64px swatches radius 8 on beige */
.template-product .variant_wrapper legend.variants__label {
  margin: 0 0 10px;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pdp-text);
}
.template-product .variant_wrapper legend.variants__label span {
  padding: 0;
  font-weight: 700;
  color: var(--pdp-text);
}
.template-product .variant_main { gap: 10px; }
.template-product .variant_main .product_variant {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pdp-media-bg);
}
.template-product .variant_main .product_variant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Size row: "Size" label with the Size Chart link on the same line (zero-height block pinned over the picker's label row) */
.template-product .shopify-block:has(> .size_wrapper--chart) { position: relative; z-index: 1; height: 0; margin-bottom: -16px; }
@media screen and (min-width: 750px) {
  .template-product .shopify-block:has(> .size_wrapper--chart) { margin-bottom: -28px; }
}
.template-product .size_wrapper--chart { position: absolute; top: 0; right: 0; }
.template-product .size_wrapper--chart .size_btn-wrap { justify-content: flex-end; }
.template-product variant-picker { padding-top: 0; }
.template-product variant-picker .variant-picker__form > fieldset.variant-option { margin-top: 0; padding-top: 0; }
.template-product variant-picker fieldset.variant-option--equal-width-buttons {
  grid-template-columns: repeat(auto-fill, 44px);
  column-gap: 10px;
  row-gap: 10px;
}
.template-product .size_wrapper--chart .size_button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pdp-pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.template-product .size_wrapper--chart .size_icon { width: 18px; height: 18px; object-fit: contain; }

.template-product variant-picker .variant-option__label,
.template-product variant-picker legend {
  margin-bottom: 10px;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pdp-text);
}
.template-product variant-picker .variant-option--buttons { gap: 10px; }
.template-product variant-picker .variant-option__button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff3ef;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pdp-text);
}
.template-product variant-picker .variant-option__button-label:has(input:checked) {
  border-color: var(--pdp-pink);
  background: #fff3ef;
  color: var(--pdp-pink);
}
.template-product variant-picker .variant-option__button-label .variant-option__button-label__pill {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.template-product variant-picker .variant-option__button-label .variant-option__button-label__text { color: inherit; }

/* Size with AI / Virtual Fit Check: 177x40 pills, 8px apart */
.template-product .size_wrapper--fit .size_btn-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.template-product .size_wrapper--fit .size_button,
.template-product .size_wrapper--fit .size_button .ar_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: #fff6f3;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pdp-pink);
  text-decoration: none;
}
.template-product .size_wrapper--fit .size_icon { display: none; }

/* Not sure about size? Chat with Us */
.template-product .pdp-chat {
  margin: 0;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pdp-text);
}
.template-product .pdp-chat a { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.template-product .pdp-chat a { display: inline-flex; align-items: center; gap: 4px; vertical-align: bottom; }
.template-product .pdp-chat__icon { flex: none; width: 18px; height: 18px; color: #25d366; }

/* ADD TO BAG 305x48 + heart 46x48 */
.template-product .product-details .pro-try-add-btn { display: flex; gap: 10px; width: 100%; }
.template-product .product-details .pro-try-add-btn .add-to-cart-button {
  flex: 1 1 auto;
  height: 48px;
  min-height: 0;
  border-radius: 8px;
  background: var(--pdp-pink);
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  color: #fff;
}
.template-product .product-details .pro-try-add-btn .add-to-cart-button .svg-wrapper { display: none; }
.template-product .pdp-wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff3ef;
  color: var(--pdp-text);
  cursor: pointer;
}

/* Returns + dispatch lines */
.template-product .pdp-trust {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.template-product .pdp-trust__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pdp-text);
}
.template-product .pdp-trust__item svg { flex: 0 0 18px; width: 18px; height: 18px; }

/* Inline pincode: 253x48 input + 101x48 CHECK, 8px apart */
.template-product .pdp-pincode { margin-top: 8px; }
.template-product .pdp-pincode__row { display: flex; gap: 8px; }
.template-product .pdp-pincode .pdp-pincode__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 15px;
  border: 1px solid #d3d4ed;
  border-radius: 8px;
  background: #fff;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--pdp-text);
}
.template-product .pdp-pincode .pdp-pincode__input::placeholder {
  font-size: 12px;
  text-transform: uppercase;
  color: #b7b8e1;
}
.template-product .pdp-pincode .pdp-pincode__button {
  flex: 0 0 101px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--pdp-text);
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  color: #fff;
}
.template-product .pdp-pincode__result {
  margin: 8px 0 0;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--pdp-text);
}
.template-product .pdp-pincode__result:empty { display: none; }

/* Figma gaps that differ from the 16px column gap */
.template-product .shopify-block:has(> .pdp-coupon) { margin-top: 2px; }
.template-product .shopify-block:has(> .variant_wrapper) { margin-top: 4px; }
.template-product .shopify-block:has(> .pdp-chat),
.template-product .product-details .shopify-block:has(.pro-try-add-btn) { margin-top: 2px; }

/* "More from Nuvah" heading sits on the 16px gutter like the other PDP headings */
.template-product .nuvah-pdp-heading--rec { padding-inline: 6px; }

/* Shared heading for the Nuvah PDP sections (sections/nuvah-pdp-*.liquid): Behind The Nineties italic 32,
   bold words in the section's accent colour */
.nuvah-pdp-heading,
.nuvah-pdp-heading p {
  margin: 0;
  font-family: 'Behind The Nineties', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.35;
  color: #411d50;
}
.nuvah-pdp-heading strong,
.nuvah-pdp-heading b {
  font-weight: inherit;
  color: var(--nc-accent, #af59b1);
}

/* PDP floating video: product pages have no WhatsApp bubble (layout/theme.liquid), so the tile takes the
   bubble's old spot. Lowering --fv-tile-bottom moves the tile AND its close button (both derive from it)
   and keeps the existing lift over the app's sticky bar via --bottom-bar-height. */
body.template-product {
  --fv-tile-bottom: calc(var(--bottom-bar-height, 0px) + 20px);
}
@media screen and (max-width: 768px) {
  body.template-product {
    --fv-tile-bottom: calc(var(--bottom-bar-height, 0px) + 16px);
  }
}

/* ==========================================================================
   Desktop PLP (Figma "Nuvah UI UX - CRO (Copy)", frame "MacBook Pro 14" - 3" 662:2404, 1512 wide)
   Desktop only (>= 990px); phones keep the mobile Figma. 4 columns come from the native
   card size setting (main > product_card_size: medium).
   ========================================================================== */
@media screen and (min-width: 990px) {
  /* Hero: 300px tall (Figma) */
  .template-collection .collection-main-banner slideshow-slides { min-height: 0; }
  .template-collection .collection-main-banner slideshow-slide { height: 300px; min-height: 0; aspect-ratio: auto; }

  /* Filter bar: 50px, "Filter" Hanken 14 at x=99, one line under it; item count hidden (not in Figma) */
  .template-collection .facets--horizontal.facets-controls-wrapper {
    min-height: 50px;
    height: 50px;
    margin: 0;
    padding: 0 40px 0 99px;
    border-top: 0;
    border-bottom: 1px solid #efefef;
    align-items: center;
  }
  .template-collection .facets--horizontal.facets-controls-wrapper .products-count-wrapper { display: none; }
  .template-collection .facets--horizontal h4.facets--filters-title {
    padding-left: 0;
    background: none;
    font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #000;
  }
  .template-collection .facets--horizontal .sorting-filter,
  .template-collection .facets--horizontal .sorting-filter * {
    font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
    font-size: 14px;
  }

  /* Category icons: 93px icons 30px apart, centred; Hanken 15 #411d50, current collection pink SemiBold */
  .template-collection .collection-blocks { margin: 20px 0 15px; }
  .template-collection .collection-cate-row > .group-block-content { justify-content: center; gap: 30px; padding: 0; }
  .template-collection .collection-cate-row .group-block { flex: 0 0 auto; width: 93px; min-width: 93px; max-width: 93px; }
  .template-collection .collection-cate-row .group-block > .group-block-content { gap: 11px; align-items: center; }
  .template-collection .collection-cate-row .image-block,
  .template-collection .collection-cate-row .image-block__image { width: 93px; height: 92px; min-height: 0; }
  .template-collection .collection-cate-row .text-block p {
    white-space: nowrap;
    font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #411d50;
  }
  .template-collection .collection-cate-row .group-block.is-current .text-block p { font-weight: 600; color: #f62376; }

  /* Grid: 4 x 343px cards, 40px side margins, 20px column / 80px row gaps. snippets/product-grid.liquid
     hardcodes minmax(30%, 1fr) (3 columns) over the card-size setting, so the column count is set here. */
  .template-collection .product-grid--grid { --product-grid-columns-desktop: repeat(4, minmax(0, 1fr)) !important; }
  .template-collection .main-collection-grid { padding-inline: 40px; }
  .template-collection .product-grid { column-gap: 20px; row-gap: 80px; }

  /* Card: 4:5 image radius 8 on #f5f1ed; title Regular 18 (18px below), stars 14, price Bold 16.
     The stock-half rule (~1772) pushes card photos 40px down at every width; the 28 Sep reset was phones-only. */
  .template-collection .product-grid .product-card__content .product-media-container img { margin-top: 0; }
  .template-collection .product-grid .product-card .card-gallery { border-radius: 8px; overflow: hidden; background: #f5f1ed; }
  .template-collection .product-grid__item .product-card__content a.contents .text-block { padding-top: 18px; }
  .template-collection .product-grid .product-card .product-card__content a.contents .text-block p,
  .template-collection .product-grid .product-card .product-card__content a.contents .text-block,
  .template-collection .product-grid .product-card .product-title {
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 400;
  }
  .template-collection .product-grid .product-card .rating-wrapper { padding-top: 8px !important; }
  .template-collection .product-grid .product-card .rating-wrapper .rating .stars,
  .template-collection .product-grid .product-card .rating-wrapper svg { width: 14px !important; height: 14px !important; }
  .template-collection .product-grid .product-card .rating-wrapper .rating-count { font-size: 13px !important; }
  .template-collection .product-grid__item .product-card__content product-price.text-block { padding-top: 11px !important; }
  .template-collection .product-grid .product-card product-price,
  .template-collection .product-grid .product-card product-price .price,
  .template-collection .product-grid .product-card product-price .compare-at-price { font-size: 16px; }

  /* Badge: 12px pill 12px in from the image corner; Try It On: 14px, 110x33 white tag */
  .template-collection .product-grid .product-card .product-badges { top: 12px; left: 12px; }
  .template-collection .product-grid .product-card .product-badges .product-badges__badge {
    height: 19px;
    padding: 2px 10px !important;
    font-size: 12px !important;
    letter-spacing: 0.24px;
  }
  .template-collection .product-grid .product-card .ar_link {
    min-height: 33px;
    padding: 2px 16px;
    font-size: 14px;
    letter-spacing: 0.28px;
  }
  .template-collection .product-grid .product-card .ar_link__label { font-size: 14px; }

  /* Promo tile: two columns (Figma row 2 = products 5, 6 + 726x441 tile) */
  .template-collection .product-grid .product-grid__item:has(.collection__slide--image) { grid-column: span 2; }
  .template-collection .product-grid .product-grid__item:has(.collection__slide--image) .collection__slide--image > img,
  .template-collection .product-grid .product-grid__item:has(.collection__slide--image) .collection-ad-slider,
  .template-collection .collection-ad-carousel slideshow-slides { aspect-ratio: 726 / 441; border-radius: 8px; overflow: hidden; }

  /* Loved By them: heading centred (left on phones), 14px between cards */
  .template-collection [id*="loved_by_them"] .dwell-sv-heading-wrap { text-align: center !important; }
  .template-collection [id*="loved_by_them"] .dwell-sv-track { gap: 14px !important; }
}

/* PDP product tag (same badge as the cards, snippets/product-tag-badge.liquid) over the gallery's top-left,
   16px in; anchored to .pdp-media-wrap so the desktop breadcrumb above the gallery does not shift it */
.template-product .pdp-media-wrap { position: relative; }
.template-product .pdp-media-wrap > .pdp-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  pointer-events: none;
}
.template-product .pdp-media-wrap > .pdp-tag:not(:has(.product-badges__badge)) { display: none; }

.template-product .pdp-tag .product-badges__badge--tag { font-size: 12px !important; padding: 2px 10px !important; min-height: 19px; }

/* PDP blocks moved into the details column (blocks/nuvah-cards-row, nuvah-highlights, nuvah-details) so they
   sit beside the gallery on desktop. Phones keep the old section spacing: 50px above Get Ready With Nuvah,
   cards scrolling to the screen edge, 60px under the details card. */
@media screen and (max-width: 989px) {
  .template-product .product-details .nuvah-cards--in-block { margin-top: 34px; }
  .template-product .product-details .nuvah-cards--in-block .nuvah-cards__track {
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
  .template-product .product-details .nuvah-details__card--in-block { margin-top: 16px; margin-bottom: 40px; }
}

/* ==========================================================================
   Desktop PDP (Figma "Nuvah UI UX - CRO (Copy)", frame "MacBook Pro 14" - 2" 573:528, 1512 wide)
   Desktop only (>= 990px). 40px page margins; gallery 851 (2 x 420 portrait tiles, 10px apart) + 40 gap +
   541 details column, scaled as fr below 1512.
   ========================================================================== */
@media screen and (min-width: 990px) {
  .template-product .product-information { padding-inline: 40px; padding-top: 40px; }
  /* !important: the stock nested :not(.product-information--media-none) rule out-ranks this, and adds
     --gap / 2 padding to each column */
  .template-product .product-information__grid.product-information--media-left {
    grid-template-columns: minmax(0, 851fr) minmax(0, 541fr) !important;
    column-gap: 40px;
  }
  .template-product .product-information__grid .product-information__media { padding-right: 0 !important; }
  .template-product .product-information__grid .product-details { padding-inline: 0 !important; min-width: 0; }
  .template-product .product-information__media > .breadcrumb { display: none; }

  /* Gallery: borderless 4:5 tiles, 10px apart */
  .template-product media-gallery { padding: 0; }
  .template-product media-gallery .media-gallery__grid { gap: 10px; }
  .template-product media-gallery .media-gallery__grid > .product-media-container { border: 0; }

  /* Buy box: 18px between rows, 30px where Figma opens up */
  .template-product .product-details > .group-block > .group-block-content { gap: 18px; }
  /* title 40px under the header: cancel the empty floating-video block's gap (as on phones) */
  .template-product .product-details .group-block:has(> .group-block-content > .pro-title) { margin-top: -18px; }
  .template-product .product-details .pdp-chips { margin-block: 13px 22px; }
  .template-product .shopify-block:has(> .pdp-coupon) { margin-top: 2px; }
  .template-product .pdp-coupon { max-width: 399px; min-height: 75px; }
  .template-product .pdp-coupon__icon { flex-basis: 32px; }
  .template-product .pdp-coupon__icon svg { width: 32px; height: 32px; }
  .template-product .pdp-coupon__price { font-size: 18px; }
  .template-product .pdp-coupon__hint { font-size: 14px; }
  .template-product .pdp-coupon__hint strong { font-size: 14px; }
  .template-product .pdp-coupon__copy { flex-basis: 30px; }
  .template-product .pdp-coupon__copy svg { width: 30px; height: 30px; }
  .template-product .shopify-block:has(> .variant_wrapper) { margin-block: 12px 18px; }
  .template-product .variant_wrapper legend.variants__label { margin-bottom: 19px; }

  /* Colour 72px swatches; Size 82x50 boxes; labels and Size Chart 16px */
  .template-product .variant_wrapper legend.variants__label,
  .template-product variant-picker .variant-option__label,
  .template-product variant-picker legend,
  .template-product .size_wrapper--chart .size_button { font-size: 16px; }
  .template-product .variant_main .product_variant { width: 72px; height: 72px; }
  /* 6 x 82 fit the 541 column with 9px gaps (Figma's 10 needs 542) */
  .template-product variant-picker fieldset.variant-option--equal-width-buttons { grid-template-columns: repeat(auto-fill, 82px); column-gap: 9px; }
  .template-product variant-picker .variant-option__button-label { width: 82px; min-width: 82px; height: 50px; font-size: 16px; }

  /* Size with AI / Virtual Fit Check: 2 x 265x50 */
  .template-product .size_wrapper--fit .size_btn-wrap { gap: 10px; }
  .template-product .size_wrapper--fit .size_button,
  .template-product .size_wrapper--fit .size_button .ar_link { height: 50px; font-size: 16px; }
  .template-product .pdp-chat { font-size: 16px; }

  /* ADD TO BAG 450x54 (bold 18) + heart 81x54 */
  .template-product .product-details .pro-try-add-btn .add-to-cart-button { height: 54px; font-size: 18px; font-weight: 700; }
  .template-product .pdp-wishlist { flex-basis: 81px; height: 54px; }

  /* Returns and dispatch on one line */
  .template-product .pdp-trust { flex-direction: row; flex-wrap: wrap; gap: 9px 22px; margin-top: 12px; }

  /* Pincode 410x54 + CHECK 120x54, 10px apart */
  .template-product .pdp-pincode { margin-top: 12px; }
  .template-product .pdp-pincode__row { gap: 10px; }
  .template-product .pdp-pincode .pdp-pincode__input,
  .template-product .pdp-pincode .pdp-pincode__button { height: 54px; }
  .template-product .pdp-pincode .pdp-pincode__input::placeholder { font-size: 14px; }
  .template-product .pdp-pincode .pdp-pincode__button { flex-basis: 120px; font-size: 16px; }

  /* Get Ready With Nuvah (36px heading, 162x220 cards), highlights, details card */
  .template-product .product-details .nuvah-cards--in-block { margin-top: 0; }
  .template-product .product-details .nuvah-cards--in-block .nuvah-pdp-heading,
  .template-product .product-details .nuvah-cards--in-block .nuvah-pdp-heading p { font-size: 36px; }
  .template-product .product-details .nuvah-cards--in-block .nuvah-cards__track { margin-top: 30px; }
  .template-product .product-details .nuvah-highlights__card--in-block { margin-top: 7px; padding: 30px 40px; }
  .template-product .nuvah-highlights__card--in-block .nuvah-highlights__text { font-size: 18px; letter-spacing: 0.36px; }
  .template-product .product-details .nuvah-details__card--in-block { margin-top: 12px; }

  /* Full-width sections: 48px centred headings */
  .template-product .nuvah-pdp-cards-section .nuvah-pdp-heading,
  .template-product .nuvah-pdp-cards-section .nuvah-pdp-heading p,
  .template-product .nuvah-story .nuvah-pdp-heading,
  .template-product .nuvah-story .nuvah-pdp-heading p,
  .template-product .nuvah-pdp-heading--rec,
  .template-product .nuvah-pdp-heading--rec p { font-size: 48px; line-height: 1.35; }

  /* The Most Modern Iteration (light + dark): 774px band, heading 941 wide centred, 4 x 342 square cards
     21px apart on the 40px margins, captions centred under them (more than four cards scroll) */
  .template-product .nuvah-pdp-cards-section .nuvah-cards { --nc-gutter: 40px; padding-block: 80px; }
  .template-product .nuvah-pdp-cards-section .nuvah-cards__heading { max-width: 941px; margin-inline: auto; text-align: center; }
  .template-product .nuvah-pdp-cards-section .nuvah-cards__track { gap: 21px; margin-top: 50px; }
  .template-product .nuvah-pdp-cards-section .nuvah-cards__item { flex: 0 0 calc((100% - 63px) / 4); width: calc((100% - 63px) / 4); }
  .template-product .nuvah-pdp-cards-section .nuvah-cards__media { aspect-ratio: 1; }
  .template-product .nuvah-pdp-cards-section .nuvah-cards--caption-below .nuvah-cards__caption {
    max-width: 257px;
    margin: 30px auto 0;
    text-align: center;
  }
  .template-product .nuvah-pdp-cards-section .nuvah-cards--caption-below .nuvah-cards__caption-title { font-size: 24px; }

  /* Comparison: 706px photo left, 706px table right */
  .template-product .nuvah-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-inline: 40px; }
  .template-product .nuvah-compare > * { max-width: none; margin: 0; }
  .template-product .nuvah-compare__heading { grid-column: 1 / -1; }
  .template-product .nuvah-compare__image { order: -1; max-width: none; aspect-ratio: 1; }
  .template-product .nuvah-compare__table { justify-content: stretch; }
  /* Figma 306 / 200 / 200 of 706, kept proportional below 1512 */
  .template-product .nuvah-compare__table::before { left: 43.34%; width: 28.33%; }
  .template-product .nuvah-compare__row { flex: 1 1 0; grid-template-columns: 43.34% 28.33% 1fr; padding: 0; }
  .template-product .nuvah-compare__row--head { flex: 0 0 130px; padding-top: 28px; }
  .template-product .nuvah-compare__label { max-width: none; padding-inline: 24px; font-size: 18px; }
  .template-product .nuvah-compare__row--head .nuvah-compare__us { padding-top: 26px; }
  .template-product .nuvah-compare__row--head .nuvah-compare__us img { width: 126px; }
  .template-product .nuvah-compare__row--head .nuvah-compare__them { padding-inline: 12%; font-size: 14px; }
  .template-product .nuvah-compare__us svg { width: 29px; height: 29px; }
  .template-product .nuvah-compare__them svg { width: 32px; height: 32px; }

  /* Inspiration: text left (631 wide), 706px photo right, vertically centred */
  .template-product .nuvah-story { padding-inline: 40px; }
  .template-product .nuvah-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 706px);
    grid-template-rows: 1fr repeat(4, auto) 1fr;
    column-gap: 20px;
    max-width: none;
  }
  .template-product .nuvah-story__inner > * { grid-column: 1; max-width: 631px; }
  .template-product .nuvah-story__heading { grid-row: 2; }
  .template-product .nuvah-story__text { grid-row: 3; }
  .template-product .nuvah-story__byline { grid-row: 4; }
  .template-product .nuvah-story__link { grid-row: 5; justify-self: start; }
  .template-product .nuvah-story__image { grid-column: 2; grid-row: 1 / -1; max-width: none; margin-top: 0; }
  .template-product .nuvah-story__text { margin-top: 40px; }
  .template-product .nuvah-story__byline { font-size: 16px; }

  /* More from Nuvah: centred heading, 4 x 343 cards like the desktop PLP */
  .template-product .nuvah-pdp-heading--rec { text-align: center; padding-inline: 30px; margin-bottom: 40px; }
  .template-product product-recommendations .resource-list--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
    padding-inline: 30px; /* + the section's 10px */
  }
  .template-product product-recommendations .product-card .card-gallery { border-radius: 8px; overflow: hidden; background: #f5f1ed; }
  .template-product product-recommendations .product-card .product-card__content .product-media-container img { margin-top: 0; }
  .template-product product-recommendations .product-card .product-card__content a.contents .text-block,
  .template-product product-recommendations .product-card .product-card__content a.contents .text-block p,
  .template-product product-recommendations .product-card .product-title { font-size: 18px !important; }
  .template-product product-recommendations .product-card product-price,
  .template-product product-recommendations .product-card product-price .price { font-size: 16px !important; }
  /* text on the card's left edge, as on the PLP */
  .template-product product-recommendations .product-card .product-card__content .text-block { padding-inline: 0; }
  .template-product .nuvah-pdp-heading--rec p { text-align: center; }
}

/* PDP zoom dialog on tablet/desktop: stock stacks each photo at full screen width (a square photo is
   1512px tall on a 900px screen, so it opens cropped). Fit each photo to the screen height instead;
   the thumbnails still scroll to each one. Phones open at 1x via assets/drag-zoom-wrapper.js. */
@media screen and (min-width: 750px) {
  .dialog-zoomed-gallery > .product-media-container { height: 100dvh; }
  .dialog-zoomed-gallery .product-media-container .product-media__drag-zoom-wrapper,
  .dialog-zoomed-gallery .product-media-container .product-media { width: 100%; height: 100%; aspect-ratio: auto; }
  .dialog-zoomed-gallery .product-media-container .product-media img { width: 100%; height: 100%; object-fit: contain; }
}

/* "More from Nuvah" (PDP recommendations): no prev/next arrows on the card photos; swipe still works.
   The arrows come from the site-wide product card carousel setting, so this is scoped here only. */
.template-product product-recommendations .product-card slideshow-arrows { display: none; }

/* ==========================================================================
   Desktop header (Figma "Nuvah UI UX - CRO (Copy)", frame "MacBook Pro 14" - 1" 496:2831, 1512 wide)
   One 80px row (Header: logo left, menu top row centred; logo 24px tall via Theme settings > Logo).
   Logo and icons 100px in at 1512 (page margin 40 + 60). The 3D / AI shortcuts are not in the desktop
   design (they live in the Shop panel tiles), so they stay phone-only.
   ========================================================================== */
@media screen and (min-width: 990px) {
  #header-component .header__row--top .header__columns {
    min-height: 80px;
    padding-inline: clamp(0px, 3.97vw, 60px);
  }
  #header-component .icons-wrap { display: none; }
  /* links 54px apart (Figma), tighter on smaller laptops so all five fit without the More overflow */
  #header-component .header-menu .menu-list__link { padding-inline: clamp(14px, 1.79vw, 27px); }
  #header-component .header-menu .menu-list__link-title { padding-inline: 0; }
  #header-component .header-actions { gap: 24px; }
  #header-component .header-actions__action svg,
  #header-component .search-action svg { width: 26px; height: 26px; }

  /* Shop has a chevron (Figma arrow-down 12px) */
  #header-component header-menu .menu-list__list-item:has(.menu-list__submenu) > .menu-list__link .menu-list__link-title::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 3px 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
}

/* Homepage product rows (sections/product-list.liquid, "Explore our collection" / "Much loved favourites")
   use the collection card (same card blocks as the collection template; the shared card rules ~7647 include
   .ui-test-product-list). The older store rules for this class (~5130-6300) pad the text 10px and the
   photo 5px; reset them to the collection card. */
.ui-test-product-list .product-card__content a.contents .text-block,
.ui-test-product-list .product-card__content .text-block,
.ui-test-product-list .product-card__content product-price.text-block,
.ui-test-product-list .product-card__content .rating-wrapper,
.ui-test-product-list product-price,
.ui-test-product-list .user-select-text .text-block { padding-inline: 0 !important; }
.ui-test-product-list .card-gallery { padding-inline: 0; }
.ui-test-product-list .product-card .product-card__content .product-media-container img { margin-top: 0; }
@media (max-width: 749px) {
  .ui-test-product-list .product-card__content a.contents .text-block { padding-top: 6px; }
  .ui-test-product-list .product-card__content product-price.text-block { padding: 4px 0 0; }
}
/* Desktop: same card as the desktop collection grid (image radius 8 on #f5f1ed, title 18, stars 14,
   price 16, 12px badge, 14px Try on) */
@media screen and (min-width: 990px) {
  .ui-test-product-list .product-card .card-gallery { border-radius: 8px; overflow: hidden; background: #f5f1ed; }
  .ui-test-product-list .product-card__content a.contents .text-block { padding-top: 18px; }
  .ui-test-product-list .product-card .product-card__content a.contents .text-block p,
  .ui-test-product-list .product-card .product-card__content a.contents .text-block,
  .ui-test-product-list .product-card .product-title { font-size: 18px !important; line-height: 1.5 !important; font-weight: 400; }
  .ui-test-product-list .product-card .rating-wrapper { padding-top: 8px !important; }
  .ui-test-product-list .product-card .rating-wrapper .rating .stars,
  .ui-test-product-list .product-card .rating-wrapper svg { width: 14px !important; height: 14px !important; }
  .ui-test-product-list .product-card .rating-wrapper .rating-count { font-size: 13px !important; }
  .ui-test-product-list .product-card__content product-price.text-block { padding-top: 11px !important; }
  .ui-test-product-list .product-card product-price,
  .ui-test-product-list .product-card product-price .price,
  .ui-test-product-list .product-card product-price .compare-at-price { font-size: 16px !important; }
  .ui-test-product-list .product-card .product-badges { top: 12px !important; left: 12px !important; }
  .ui-test-product-list .product-card .product-badges .product-badges__badge { height: 19px; padding: 2px 10px !important; font-size: 12px !important; letter-spacing: 0.24px; }
  .ui-test-product-list .product-card .icons-wrap .ar_link { min-height: 33px; padding: 2px 16px; font-size: 14px; letter-spacing: 0.28px; }
  .ui-test-product-list .product-card .ar_link__label { font-size: 14px; }
}

/* PDP floating video on phones: stays compact (84px wide, 9:16); a tap opens the full-screen player
   (no in-between grow step since 10 Oct 2026). The compact state is the .fv-compact class on
   #fvWrappeer, set by compactFloatingVideo() in custom.js.
   The close button tracks the tile: tile height (width x 16/9) minus its own 30px and a 6px inset. */
@media screen and (max-width: 768px) {
  .product-information .fv_wrapper .fv-trigger { transition: width 0.25s ease, min-height 0.25s ease, transform 0.35s ease, bottom 0.25s ease; }
  .product-information .fv_wrapper.fv-compact .fv-trigger { width: 84px; min-height: 0; }
  .product-information .fv_wrapper.fv-compact .fv-unmute-pill { padding: 5px; }
  .product-information .fv_wrapper.fv-compact .fv-unmute-pill span { display: none; }
  .fv_wrapper.fv-compact button#fvCloseFloating {
    bottom: calc(var(--fv-tile-bottom, 83px) + 113px);
    right: 20px;
    width: 24px;
    height: 24px;
  }
  .fv_wrapper.fv-compact button#fvCloseFloating svg { width: 12px; height: 12px; }
}

/* Phones: show the Vitals bar after a short scroll (150px, gateStickyBarOnAtcButton() in custom.js).
   The app itself only adds --isVisible once the Add to bag button has scrolled past, so once the theme
   gate releases it the bar is shown here regardless of the app's own trigger. */
@media screen and (max-width: 768px) {
  body.template-product:not(.theme-atc-visible) #bundle-sticky_add_to_cart.Vtl-StickyAddToCart { display: block !important; }
}

/* PDP on phones (Figma "iPhone 16 - 18", 672:2936, Oct 2026): shorter main photo (393x450 instead of 4:5),
   thumbnails 10px under it, and the benefit chips moved above the title (14px under the thumbnails,
   13px over the title). Desktop keeps 4:5 tiles and the chips under the rating. */
@media screen and (max-width: 749px) {
  .template-product media-gallery { --gallery-aspect-ratio: 393 / 450 !important; }
  .template-product media-gallery .slideshow-controls__thumbnails { padding-top: 10px; }
  .template-product .product-details .group-block-content > .pdp-chips { order: -1; margin-block: -2px 5px; }
}

/* Homepage hero slider, desktop: slides follow the desktop images' own shape (all 3840 x 1994) so nothing is cropped.
   "Large" (fixed 45rem, capped at 90vh above) cropped the top on wide, short windows and pushed the text baked
   into the images ("Worn, Forgotten, Finally You!") under the transparent header (10 Oct 2026). */
@media screen and (min-width: 750px) {
  .home-top-slider.slideshow-section slideshow-slides { min-height: calc(100vw * 1994 / 3840) !important; max-height: none; }
}

/* All product photos use 7:8 on every screen (10 Oct 2026: product images are shot at 7:8). Covers the PDP gallery
   (overrides the phone 393/450 rule above and the 4:5 section setting on desktop), the collection grid, the homepage
   product rows and the PDP "More from Nuvah" cards. */
.template-product media-gallery { --gallery-aspect-ratio: 7 / 8 !important; }
:is(.product-grid, .template-index .section-resource-list, .template-product .section-resource-list) .product-card .card-gallery { --gallery-aspect-ratio: 7 / 8 !important; }

/* PDP feature chips: the white dot shows an icon (theme files, interim until chips get an icon upload field).
   SteadyForm = IMG_3467, India-first sizing = India map, 100% Vegan = IMG_3481, Timeless = IMG_3468 (10 Oct 2026). */
.template-product .product-details .pdp-chip::before { flex-basis: 20px; width: 20px; height: 20px; background: #fff 50% calc(50% - 2px) / 19px 19px no-repeat; } /* icon scaled so the triangle fills the circle; nudged up 2px so it sits centred */
.template-product .product-details .pdp-chip[class*="__chip_steadyform"]::before { background-image: url(nuvah-hl-steadyform.png); }
.template-product .product-details .pdp-chip[class*="__chip_sizing"]::before { background-image: url(nuvah-hl-indian.png); }
.template-product .product-details .pdp-chip[class*="__chip_vegan"]::before { background-image: url(nuvah-hl-vegan.png); }
.template-product .product-details .pdp-chip[class*="__chip_timeless"]::before { background-image: url(nuvah-hl-elegance.png); }

/* PDP highlight box icons (same artwork as the chips): zoomed inside the 40px white circle (which clips) so the
   triangle fills it instead of sitting small in white space (10 Oct 2026). */
.template-product .nuvah-highlights__icon img { width: 40px; height: 40px; max-width: none; flex: none; object-fit: contain; transform: translateY(-4px); } /* triangle centre sits ~9% below the image centre */