/** Shopify CDN: Minification failed

Line 5952:64 Unexpected "@media"
Line 6640:0 Unexpected "("

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

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

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

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

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

}

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

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

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

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

p:empty {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Utility */

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

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

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

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

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

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

.contents {
  display: contents;
}

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

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

  display: flex;
  flex-direction: column;
}

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

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

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

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

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

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

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

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

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

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

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

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

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

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

.relative {
  position: relative;
}

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

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

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

.icon-default {
  fill: currentColor;
}

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

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

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

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

/* Typography presets */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    footer {
      view-transition-name: footer;
    }

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

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

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

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

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

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

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

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

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

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

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

.text-block {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

  &::backdrop {
    opacity: 0;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Show more */

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

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

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

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

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

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

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

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

/* Collapsible row */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  &[open] {
    opacity: 1;
  }

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

  &::backdrop {
    background: transparent;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.price__hidden {
  display: none;
}

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

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

.card-gallery {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  animation-duration: 0.6s;
}

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

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

  animation-duration: 0.8s;
}

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

  5% {
    opacity: 1;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  50% {
    transform: scale(1.2);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  &[shimmer] {
    color: transparent;

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

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

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

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

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

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

/* Global scrollbar styles */

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

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

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

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

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

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

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

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

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

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

.product-recommendations {
  display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .burst {
    rotate: 20deg;
  }

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

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

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

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

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

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

  .tick {
    scale: 1.75;
  }

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

  .line {
    stroke-dashoffset: 1.5;
  }

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

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

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

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

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

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

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

@keyframes atc-slide {
  to {
    opacity: var(--atc-opacity, 1);
    translate: 0px var(--atc-destination, 0px);
  }
}
/* ORTHOPEDIC COMFORT PEARL WHITE GOLD SYSTEM
   Final theme-wide visual layer for Shopify Horizon.
   This file replaces all prior OC boutique/rescue/polish layers. */

:root {
  --oc-pearl-white: #fffdf8;
  --oc-luxury-cream: #fff7ea;
  --oc-soft-ivory: #fffaf3;
  --oc-champagne: #ead8ae;
  --oc-white-gold: #f4e7c8;
  --oc-boutique-gold: #d7bc86;
  --oc-deep-gold: #b9915a;
  --oc-pearl-glow: rgb(255 255 255 / 78%);
  --oc-warm-brown: #4a3321;
  --oc-coffee: #6f4f2f;
  --oc-muted: #74675c;
  --oc-deep-text: #241f19;
  --oc-line: rgb(215 188 134 / 42%);
  --oc-line-soft: rgb(215 188 134 / 24%);
  --oc-line-strong: rgb(185 145 90 / 58%);
  --oc-glass: rgb(255 253 248 / 72%);
  --oc-glass-strong: rgb(255 253 248 / 90%);
  --oc-shadow-xs: 0 8px 22px rgb(74 51 33 / 6%);
  --oc-shadow-sm: 0 14px 34px rgb(74 51 33 / 9%);
  --oc-shadow-md: 0 24px 64px rgb(74 51 33 / 13%);
  --oc-shadow-lg: 0 38px 96px rgb(74 51 33 / 18%);
  --oc-radius-xs: 16px;
  --oc-radius-sm: 22px;
  --oc-radius-md: 32px;
  --oc-radius-lg: 44px;
  --oc-radius-xl: 56px;
  --oc-max: 1240px;
  --oc-page-pad: 32px;
  --oc-bg-page:
    radial-gradient(ellipse at 9% 0%, rgb(255 255 255 / 88%) 0, rgb(255 255 255 / 0%) 34%),
    radial-gradient(ellipse at 88% 8%, rgb(244 231 200 / 58%) 0, rgb(244 231 200 / 0%) 36%),
    radial-gradient(ellipse at 52% 32%, rgb(234 216 174 / 34%) 0, rgb(234 216 174 / 0%) 46%),
    linear-gradient(180deg, #fffdf8 0%, #fffaf3 34%, #fff7ea 66%, #fffdf8 100%);
  --oc-bg-mesh:
    linear-gradient(90deg, rgb(185 145 90 / 4%) 1px, transparent 1px),
    linear-gradient(180deg, rgb(185 145 90 / 3%) 1px, transparent 1px);
  --oc-bg-panel:
    linear-gradient(135deg, rgb(255 255 255 / 78%) 0%, rgb(255 253 248 / 92%) 26%, rgb(244 231 200 / 68%) 100%);
  --oc-bg-card:
    radial-gradient(ellipse at 12% 0%, rgb(255 255 255 / 86%) 0, transparent 36%),
    linear-gradient(145deg, #fffdf8 0%, #fffaf3 38%, #f4e7c8 100%);
  --oc-bg-media:
    radial-gradient(ellipse at 46% 6%, rgb(255 255 255 / 92%) 0, transparent 38%),
    linear-gradient(145deg, #fffdf8 0%, #fff7ea 42%, #f4e7c8 100%);
  --oc-bg-primary-button:
    linear-gradient(135deg, rgb(255 255 255 / 55%), #f4e7c8 18%, #ead8ae 42%, #d7bc86 70%, #b9915a 100%);
  --oc-bg-secondary-button:
    linear-gradient(135deg, rgb(255 255 255 / 86%) 0%, #fffdf8 32%, #f4e7c8 100%);
  --oc-focus: 0 0 0 4px rgb(215 188 134 / 34%);

  --color-background: var(--oc-pearl-white);
  --color-background-rgb: 255 253 248;
  --color-foreground: var(--oc-deep-text);
  --color-foreground-rgb: 36 31 25;
  --color-primary: var(--oc-deep-gold);
  --color-primary-hover: var(--oc-warm-brown);
  --color-border: var(--oc-line);
  --color-border-rgb: 215 188 134;
  --color-shadow: rgb(74 51 33 / 16%);
  --color-shadow-rgb: 74 51 33;
  --color-input-background: var(--oc-pearl-white);
  --color-input-hover-background: var(--oc-soft-ivory);
  --color-input-border: var(--oc-line);
  --color-input-text: var(--oc-warm-brown);
  --color-input-text-rgb: 74 51 33;
  --color-primary-button-text: var(--oc-deep-text);
  --color-primary-button-background: var(--oc-boutique-gold);
  --color-primary-button-border: var(--oc-line-strong);
  --color-primary-button-hover-text: var(--oc-deep-text);
  --color-primary-button-hover-background: var(--oc-deep-gold);
  --color-primary-button-hover-border: var(--oc-deep-gold);
  --color-secondary-button-text: var(--oc-warm-brown);
  --color-secondary-button-background: var(--oc-pearl-white);
  --color-secondary-button-border: var(--oc-line);
  --color-secondary-button-hover-text: var(--oc-deep-text);
  --color-secondary-button-hover-background: var(--oc-white-gold);
  --color-secondary-button-hover-border: var(--oc-line-strong);
  --color-variant-background: var(--oc-pearl-white);
  --color-variant-text: var(--oc-warm-brown);
  --color-variant-text-rgb: 74 51 33;
  --color-variant-border: var(--oc-line);
  --color-variant-hover-background: var(--oc-soft-ivory);
  --color-variant-hover-border: var(--oc-line-strong);
  --color-variant-hover-text: var(--oc-deep-text);
  --color-selected-variant-background: var(--oc-boutique-gold);
  --color-selected-variant-text: var(--oc-deep-text);
  --color-selected-variant-border: var(--oc-deep-gold);
  --color-selected-variant-hover-background: var(--oc-deep-gold);
  --color-selected-variant-hover-text: #fff;
  --color-selected-variant-hover-border: var(--oc-deep-gold);
  --style-border-radius-buttons-primary: 999px;
  --style-border-radius-buttons-secondary: 999px;
  --style-border-radius-inputs: 24px;
  --style-border-radius-popover: 34px;
  --style-border-radius-pills: 999px;
  --hover-lift-amount: 3px;
  --hover-scale-amount: 1.01;
  --hover-subtle-zoom-amount: 1.012;
}

html {
  background: var(--oc-pearl-white);
  scrollbar-color: rgb(185 145 90 / 44%) var(--oc-soft-ivory);
}

body {
  background: var(--oc-bg-page);
  background-attachment: fixed;
  color: var(--oc-muted);
  isolation: isolate;
  overflow-x: clip;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

body::before {
  background-image: var(--oc-bg-mesh);
  background-size: 46px 46px;
  opacity: .55;
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 90%), rgb(0 0 0 / 18%) 86%, transparent);
}

body::after {
  z-index: -1;
  background:
    radial-gradient(ellipse at 18% 18%, rgb(255 255 255 / 72%) 0, transparent 28%),
    radial-gradient(ellipse at 82% 16%, rgb(244 231 200 / 44%) 0, transparent 30%),
    radial-gradient(ellipse at 72% 72%, rgb(234 216 174 / 30%) 0, transparent 34%);
  filter: blur(1px);
  animation: oc-ambient-shift 18s ease-in-out infinite alternate;
}

body,
button,
input,
select,
textarea {
  letter-spacing: 0;
}

body,
.content-for-layout,
#MainContent,
main,
.shopify-section,
.section,
.section-background,
.cart-summary,
.color-scheme-1,
.color-scheme-2,
.color-scheme-3,
.color-scheme-4,
.color-scheme-5 {
  background-color: transparent;
}

.content-for-layout {
  position: relative;
  z-index: 0;
}

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

.shopify-section:not(.header-section)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0%, rgb(255 255 255 / 26%) 34%, transparent 62%),
    radial-gradient(ellipse at 8% 18%, rgb(244 231 200 / 18%), transparent 26%),
    radial-gradient(ellipse at 92% 62%, rgb(234 216 174 / 16%), transparent 30%);
  opacity: .82;
}

::selection {
  background: rgb(215 188 134 / 45%);
  color: var(--oc-deep-text);
}

:where(h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6, .title, .main-page-title, .collection-hero__title, .product__title, .card__heading, .product-card__title, .collection-card__title, .footer-block__heading, .drawer__title) {
  color: var(--oc-warm-brown);
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 10px 28px rgb(215 188 134 / 20%);
}

:where(p, li, .rte, .rte p, .text-block, .paragraph, .rich-text__text, .product__description, .collection-hero__description, .card-information, .product-card__content, .footer-block__details-content) {
  color: var(--oc-muted);
}

a {
  color: var(--oc-deep-gold);
  text-decoration-color: rgb(185 145 90 / 28%);
}

a:hover {
  color: var(--oc-warm-brown);
}

*:focus-visible {
  outline-color: var(--oc-deep-gold);
  box-shadow: var(--oc-focus);
}

/* Header, announcement, navigation */

:where(.announcement-bar, .announcement-bar-section, .utility-bar, .utility-bar__grid) {
  background:
    linear-gradient(100deg, rgb(255 255 255 / 44%), rgb(244 231 200 / 64%), rgb(234 216 174 / 76%)),
    var(--oc-bg-panel);
  border-bottom: 1px solid var(--oc-line);
  box-shadow: var(--oc-shadow-sm);
  color: var(--oc-warm-brown);
}

:where(.announcement-bar__message, .announcement-bar a, .utility-bar a) {
  color: var(--oc-warm-brown);
  font-weight: 900;
}

:where(.header-section, .header-wrapper, .header, header-component, #header-group > .shopify-section) {
  background:
    linear-gradient(180deg, rgb(255 253 248 / 92%), rgb(255 250 243 / 82%)),
    var(--oc-bg-panel);
  border-bottom: 1px solid var(--oc-line);
  box-shadow: 0 16px 44px rgb(74 51 33 / 10%);
  backdrop-filter: blur(18px) saturate(1.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.28);
}

.header {
  position: relative;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 28%), transparent 34%, rgb(244 231 200 / 22%)),
    radial-gradient(ellipse at 18% 0%, rgb(255 255 255 / 58%), transparent 34%);
}

.header > * {
  position: relative;
  z-index: 1;
}

:where(.header__heading-link, .header__heading, .header__heading-logo-wrapper, .header a, .header__menu-item, .list-menu__item, .list-menu__item--link, .header__active-menu-item, .menu-drawer__menu-item, .mega-menu__link, .menu-list__link) {
  color: var(--oc-warm-brown);
  font-weight: 850;
}

:where(.header__menu-item, .list-menu__item--link, .menu-list__link, .menu-drawer__menu-item, .mega-menu__link) {
  border-radius: 999px;
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease, color .22s ease;
}

:where(.header__menu-item, .list-menu__item--link, .menu-list__link) {
  padding: 10px 16px;
}

:where(.header__menu-item, .list-menu__item--link, .menu-list__link, .menu-drawer__menu-item, .mega-menu__link):hover,
.header__active-menu-item {
  background: linear-gradient(135deg, rgb(255 255 255 / 78%), rgb(244 231 200 / 74%));
  box-shadow: inset 0 0 0 1px var(--oc-line), var(--oc-shadow-xs);
  color: var(--oc-deep-text);
  transform: translateY(-1px);
}

:where(.header__icon, .header-actions__action, .header__icon svg, .header__icon .icon, header .svg-wrapper svg) {
  color: var(--oc-warm-brown);
  fill: currentColor;
  stroke: currentColor;
}

:where(.header__icon, .header-actions__action) {
  background: rgb(255 253 248 / 64%);
  border: 1px solid rgb(215 188 134 / 28%);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%), var(--oc-shadow-xs);
}

:where(.header__icon, .header-actions__action):hover {
  background: linear-gradient(135deg, #fff, var(--oc-white-gold));
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgb(185 145 90 / 16%);
}

:where(.menu-drawer, .menu-drawer__inner-container, .menu-drawer__navigation, .header__submenu, .mega-menu__content, .list-menu--disclosure) {
  background:
    radial-gradient(ellipse at 14% 0%, rgb(255 255 255 / 78%), transparent 38%),
    linear-gradient(145deg, rgb(255 253 248 / 98%), rgb(244 231 200 / 90%));
  border: 1px solid var(--oc-line);
  box-shadow: var(--oc-shadow-lg);
}

:where(.header__submenu, .mega-menu__content, .list-menu--disclosure) {
  border-radius: 0 0 var(--oc-radius-md) var(--oc-radius-md);
}

.menu-drawer {
  border-radius: 0 0 var(--oc-radius-lg) var(--oc-radius-lg);
}

/* Core panels and sections */

:where(
  .rich-text__blocks,
  .banner__box,
  .slideshow__text,
  .image-with-text__content,
  .multicolumn-card,
  .newsletter__wrapper,
  .contact form,
  .contact__fields,
  .collapsible-content__wrapper,
  .collection-hero__inner,
  .product__info-container,
  .shopify-policy__container,
  .main-page-title + .rte,
  .template-search__header,
  .facets-container,
  .facets__form,
  .facets-wrapper,
  .mobile-facets__inner,
  .sorting,
  .product-count,
  .active-facets,
  .dialog-modal,
  .predictive-search,
  .search-modal__content,
  .popup-modal__content,
  .quick-add-modal__content,
  .cart__footer,
  .cart-items,
  .cart__blocks
) {
  background: var(--oc-bg-panel);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius-xl);
  box-shadow: var(--oc-shadow-md);
  color: var(--oc-muted);
  overflow: hidden;
  position: relative;
}

:where(
  .rich-text__blocks,
  .banner__box,
  .image-with-text__content,
  .newsletter__wrapper,
  .product__info-container,
  .collection-hero__inner,
  .dialog-modal,
  .quick-add-modal__content,
  .cart__footer,
  .cart-items
)::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: calc(var(--oc-radius-xl) - 12px);
  pointer-events: none;
  z-index: 0;
}

:where(
  .rich-text__blocks,
  .banner__box,
  .image-with-text__content,
  .newsletter__wrapper,
  .product__info-container,
  .collection-hero__inner,
  .dialog-modal,
  .quick-add-modal__content,
  .cart__footer,
  .cart-items
) > * {
  position: relative;
  z-index: 1;
}

:where(.section-resource-list, .section-carousel, .featured-collection-block, .product-grid-container, .main-collection-grid) {
  background:
    linear-gradient(145deg, rgb(255 253 248 / 58%), rgb(244 231 200 / 28%));
  border-radius: var(--oc-radius-xl);
}

/* Buttons */

:where(
  .button,
  button.shopify-payment-button__button--unbranded,
  .shopify-payment-button__button,
  .product-form__submit,
  .add-to-cart-button,
  .quick-add__button,
  .quick-add__submit,
  .cart__checkout-button,
  .cart-drawer__checkout,
  .customer button,
  .contact button,
  .newsletter button,
  .search-modal button[type="submit"],
  [type="submit"]
):not(.button-unstyled):not(.drawer__close):not(.close-button):not(.slider-button):not(.header__icon):not(.quantity-minus):not(.quantity-plus):not(.quantity__button) {
  min-height: 50px;
  padding: 14px 28px;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 999px;
  background: var(--oc-bg-primary-button);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 74%), 0 18px 42px rgb(185 145 90 / 24%), 0 8px 20px rgb(74 51 33 / 8%);
  color: var(--oc-deep-text);
  font-weight: 950;
  letter-spacing: 0;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
}

:where(
  .button,
  button.shopify-payment-button__button--unbranded,
  .shopify-payment-button__button,
  .product-form__submit,
  .add-to-cart-button,
  .quick-add__button,
  .quick-add__submit,
  .cart__checkout-button,
  .cart-drawer__checkout,
  .customer button,
  .contact button,
  .newsletter button,
  [type="submit"]
):not(.button-unstyled):not(.drawer__close):not(.close-button):not(.slider-button):not(.header__icon):not(.quantity-minus):not(.quantity-plus):not(.quantity__button):hover {
  box-shadow: inset 0 1px 0 #fff, 0 26px 64px rgb(185 145 90 / 32%), 0 10px 26px rgb(74 51 33 / 10%);
  filter: saturate(1.08) brightness(1.02);
  transform: translateY(-2px);
}

:where(.button-secondary, .button--secondary, .button--tertiary, .shopify-payment-button__more-options) {
  background: var(--oc-bg-secondary-button);
  border: 1px solid var(--oc-line);
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs);
  color: var(--oc-warm-brown);
}

:where(.button-unstyled, .drawer__close, .close-button, .slider-button, .header__icon, .slideshow-control, .quantity__button, .quantity-minus, .quantity-plus) {
  min-height: unset;
}

/* Cards, product grid, collection grid */

.product-grid {
  gap: clamp(16px, 2vw, 30px);
}

:where(.product-grid__item, .resource-list__item) {
  border: 0;
  border-radius: var(--oc-radius-lg);
}

:where(.product-card, .product-grid__card, .card, .card--standard, .card--card, .product-card-wrapper .card, .collection-card, .collection-card__inner, .featured-blog-posts-card, .predictive-search-results__card, .predictive-search-results__card--product, .cart-item, .cart-notification-product, .predictive-search__item) {
  background: var(--oc-bg-card);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius-lg);
  box-shadow: var(--oc-shadow-sm), inset 0 1px 0 rgb(255 255 255 / 72%);
  color: var(--oc-muted);
  overflow: hidden;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, filter .3s ease;
}

:where(.product-card, .product-grid__card, .card, .collection-card__inner, .featured-blog-posts-card, .predictive-search-results__card)::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: calc(var(--oc-radius-lg) - 10px);
  pointer-events: none;
  z-index: 2;
}

:where(.product-card, .product-grid__card, .card, .collection-card__inner, .featured-blog-posts-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgb(255 255 255 / 36%), transparent 22%, transparent 68%, rgb(244 231 200 / 24%));
  opacity: .74;
}

:where(.product-card:hover, .product-grid__item:hover .product-grid__card, .product-card-wrapper:hover .card, .collection-card:hover, .featured-blog-posts-card:hover, .predictive-search-results__card:hover) {
  border-color: var(--oc-line-strong);
  box-shadow: var(--oc-shadow-lg), 0 0 0 1px rgb(255 255 255 / 52%) inset;
  filter: saturate(1.03);
  transform: translateY(-6px) scale(1.006);
}

:where(.product-card__content, .card__content, .card__information, .collection-card__content, .featured-blog-posts-card__content) {
  color: var(--oc-muted);
  padding: 18px 18px 22px;
  position: relative;
  z-index: 3;
}

:where(.product-card a, .product-grid__card, .card__heading a, .full-unstyled-link, .product-card__title, .card__heading, .collection-card__content, .cart-item__name) {
  color: var(--oc-warm-brown);
  font-weight: 900;
}

/* Media windows */

:where(
  .media,
  .card-gallery,
  .card__media,
  .product-card__image,
  .collection-card__image,
  .featured-blog-posts-card__image,
  .product-media-container,
  .product__media,
  .product__media-item,
  .global-media-settings,
  .deferred-media,
  .banner__media,
  .image-with-text__media,
  .collection-hero__image-container,
  .slideshow__media,
  .multicolumn-card__image-wrapper,
  .article-card__image,
  .thumbnail,
  .cart-item__image-container,
  .predictive-search-results__card .media
) {
  background: var(--oc-bg-media);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius-lg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%), inset 0 0 0 10px rgb(255 255 255 / 16%), var(--oc-shadow-sm);
  overflow: hidden;
  position: relative;
}

:where(
  .media,
  .card-gallery,
  .card__media,
  .product-card__image,
  .collection-card__image,
  .product-media-container,
  .global-media-settings,
  .thumbnail
)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgb(255 255 255 / 42%) 0%, transparent 22%, transparent 74%, rgb(234 216 174 / 28%) 100%);
}

:where(.product-card, .product-grid__card, product-card, .predictive-search-results__card--product, .product-media-container, .product__media, .card-gallery, .thumbnail, .cart-item__image-container, .oc-cat-media, .oc-plp-main-media, .oc-plp-thumb, .oc-plp-story-img, .oc-img) img {
  object-fit: contain;
  object-position: center;
  background: transparent;
}

:where(.product-card, .product-grid__card, .card-gallery, .oc-cat-media, .oc-plp-main-media, .oc-plp-thumb, .oc-plp-story-img, .oc-img) img {
  padding: 10px;
}

:where(.banner__media, .slideshow__media, .background-image-container)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(255 253 248 / 54%), rgb(255 253 248 / 14%), rgb(244 231 200 / 24%));
}

/* Prices, badges, labels */

:where(.price, .compare-at-price, .unit-price, product-price, .price-item, .price__regular, .price-item--regular, .price__sale, .price-item--sale, .oc-price, .oc-cat-price, .oc-plp-price, .cart-item__price-wrapper, .totals__total-value) {
  color: var(--oc-warm-brown);
  font-weight: 950;
  letter-spacing: 0;
}

:where(.price-item--sale, .price__sale, .sale-price) {
  color: var(--oc-deep-gold);
}

:where(.compare-at-price, .price__compare, .price-item--compare) {
  color: rgb(116 103 92 / 60%);
  text-decoration-color: rgb(185 145 90 / 48%);
}

:where(.badge, .product__tax, .product__inventory, .card__badge .badge, .sale-badge, .sold-out-badge, .caption-with-letter-spacing, .product__sku, .vendor, .card__vendor, .active-facets__button, .facets__label, .pills__pill, .oc-label, .oc-kicker, .oc-cat-kicker, .oc-cat-badge, .oc-plp-kicker, .oc-plp-label, .oc-about-kicker, .oc-faq-kicker, .oc-contact-kicker, .oc-policy-kicker, .oc-ship-kicker) {
  background: linear-gradient(135deg, rgb(255 255 255 / 84%), var(--oc-white-gold));
  border: 1px solid var(--oc-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs);
  color: var(--oc-warm-brown);
  font-weight: 900;
}

:where(.badge--sale, .badge--on-sale, .card__badge .badge.color-accent-2) {
  background: var(--oc-bg-primary-button);
  color: var(--oc-deep-text);
}

/* Forms, search, quantity */

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"]), select, textarea, .field__input, .select__select, .customer .field input, .search__input, .quantity, .quantity-selector, .quantity__input, .disclosure__button, .oc-contact-field input, .oc-contact-field textarea, .oc-plp-form select, .oc-plp-form input) {
  background: linear-gradient(145deg, #fff, var(--oc-pearl-white) 45%, var(--oc-soft-ivory));
  border: 1px solid var(--oc-line);
  border-radius: var(--style-border-radius-inputs);
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs);
  color: var(--oc-warm-brown);
}

:where(.field)::before,
:where(.field)::after,
:where(.select)::before,
:where(.select)::after,
:where(.quantity)::before,
:where(.quantity)::after {
  border-radius: var(--style-border-radius-inputs);
  box-shadow: none;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .field__input, .search__input):focus {
  border-color: var(--oc-deep-gold);
  box-shadow: var(--oc-focus), var(--oc-shadow-sm);
  outline: none;
}

:where(input::placeholder, textarea::placeholder) {
  color: rgb(116 103 92 / 68%);
}

:where(.field__label, .form__label, label, legend) {
  color: var(--oc-warm-brown);
  font-weight: 850;
}

:where(.quantity__button, .quantity-selector :is(.quantity-minus, .quantity-plus)) {
  background: linear-gradient(135deg, #fff, var(--oc-white-gold));
  border: 0;
  color: var(--oc-warm-brown);
}

/* Product page */

.product {
  gap: clamp(22px, 4vw, 56px);
}

.product__info-container {
  padding: clamp(22px, 3vw, 38px);
}

:where(.product__title, .product__title h1) {
  color: var(--oc-warm-brown);
}

:where(.variant-option__button-label, .product-form__input input[type="radio"] + label, .product-form__input label, .swatch-input__label) {
  background: var(--oc-bg-secondary-button);
  border: 1px solid var(--oc-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs);
  color: var(--oc-warm-brown);
  font-weight: 900;
}

:where(.variant-option__button-label, .product-form__input label, .swatch-input__label):hover {
  border-color: var(--oc-line-strong);
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-sm);
}

.variant-option__button-label:has(:checked),
.product-form__input input[type="radio"]:checked + label {
  background: var(--oc-bg-primary-button);
  border-color: var(--oc-deep-gold);
  color: var(--oc-deep-text);
}

.variant-option__button-label:has([data-option-available="false"]) {
  border-style: dashed;
  color: rgb(74 51 33 / 58%);
}

.variant-option__button-label__pill {
  background: var(--oc-bg-primary-button);
}

.swatch {
  border-color: var(--oc-line-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 68%), var(--oc-shadow-xs);
}

/* Collection, catalog, filters */

:where(.collection, .collection-hero, .template-collection main, .template-search main, .main-collection-product-grid) {
  background: transparent;
}

.collection-hero__inner {
  margin-block: 22px;
  padding: clamp(24px, 4vw, 52px);
}

:where(.facets__heading, .facets__summary, .mobile-facets__heading, .product-count__text, .sorting .facet-filters__label, .facet-filters__label) {
  color: var(--oc-warm-brown);
  font-weight: 900;
}

:where(.facets__summary, .mobile-facets__open, .active-facets__button, .pagination__item, .pagination__item a, .pagination__item--current) {
  background: var(--oc-bg-secondary-button);
  border: 1px solid var(--oc-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs);
  color: var(--oc-warm-brown);
  font-weight: 900;
}

:where(.pagination-wrapper, .breadcrumb, .breadcrumbs) {
  background: rgb(255 253 248 / 76%);
  border: 1px solid var(--oc-line);
  border-radius: 999px;
  box-shadow: var(--oc-shadow-xs);
  padding: 10px 14px;
}

:where(.pagination__item--current, .pagination__item:hover) {
  background: var(--oc-bg-primary-button);
  color: var(--oc-deep-text);
}

/* Drawers, cart, search, modals */

:where(.drawer, .cart-drawer, .cart-drawer__inner, .cart-notification, .template-cart main, .dialog-modal, .search-modal, .predictive-search, .popup-modal__content, .quick-add-modal__content) {
  background:
    radial-gradient(ellipse at 16% 0%, rgb(255 255 255 / 86%), transparent 34%),
    linear-gradient(145deg, var(--oc-pearl-white), var(--oc-soft-ivory) 45%, var(--oc-white-gold));
  color: var(--oc-warm-brown);
}

:where(.drawer, .cart-drawer__inner, .dialog-modal, .popup-modal__content, .quick-add-modal__content, .predictive-search) {
  border: 1px solid var(--oc-line);
  box-shadow: var(--oc-shadow-lg);
}

:where(.drawer__heading, .drawer__title, .cart__empty-text, .cart-item__name, .totals__total, .totals__total-value, .cart-notification__heading) {
  color: var(--oc-warm-brown);
  font-weight: 950;
}

:where(.cart-item:not(tr), .cart-notification-product, .predictive-search__item) {
  padding: 14px;
}

:where(.cart-item__details, .cart-item__price-wrapper) {
  color: var(--oc-muted);
}

/* FAQ, accordions, tables */

:where(main details, .accordion, .product__accordion, .collapsible-content summary, .accordion summary) {
  background: var(--oc-bg-card);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius-sm);
  box-shadow: var(--oc-shadow-xs);
  color: var(--oc-muted);
  overflow: hidden;
}

:where(.accordion summary, main summary) {
  color: var(--oc-warm-brown);
  font-weight: 900;
}

:where(.accordion summary, main summary):hover {
  color: var(--oc-deep-gold);
}

:where(.accordion__content, details[open] > *) {
  color: var(--oc-muted);
}

:where(table, .customer table, .order-history, .addresses, .customer .field) {
  background: var(--oc-bg-card);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius-sm);
  box-shadow: var(--oc-shadow-xs);
  overflow: hidden;
}

th {
  background: linear-gradient(135deg, #fff, var(--oc-white-gold));
  color: var(--oc-warm-brown);
}

td {
  color: var(--oc-muted);
}

/* Sliders, arrows, carousel controls */

:where(.slider-button, .slideshow-control, .slideshow__control, .slider-counter__link, .slider-counter__link--dots .dot, .thumbnail-slider button, .product__media-toggle) {
  background: linear-gradient(135deg, #fff, var(--oc-white-gold));
  border: 1px solid var(--oc-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs);
  color: var(--oc-warm-brown);
}

:where(.slider-button svg, .slideshow__control svg, .thumbnail-slider button svg) {
  color: var(--oc-warm-brown);
  fill: currentColor;
  stroke: currentColor;
}

:where(.thumbnail[aria-current], .thumbnail:hover) {
  border-color: var(--oc-deep-gold);
  box-shadow: 0 0 0 3px rgb(215 188 134 / 28%);
}

/* Footer: pearl and champagne, not heavy brown */

:where(.footer, footer, .footer__content-top, .footer__content-bottom, .footer-group, footer .shopify-section) {
  background:
    linear-gradient(115deg, rgb(255 255 255 / 64%), transparent 36%, rgb(244 231 200 / 34%)),
    linear-gradient(180deg, #fffdf8 0%, #fff7ea 46%, #ead8ae 100%);
  color: var(--oc-warm-brown);
}

:where(.footer, footer) {
  border-top: 2px solid var(--oc-line-strong);
  box-shadow: 0 -18px 54px rgb(74 51 33 / 10%);
  overflow: hidden;
  position: relative;
}

.footer::before,
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(185 145 90 / 5%) 1px, transparent 1px),
    linear-gradient(180deg, rgb(255 255 255 / 32%), transparent 62%);
  background-size: 42px 42px, auto;
}

.footer > *,
footer > * {
  position: relative;
  z-index: 1;
}

:where(.footer-block, .footer__blocks-wrapper > *, .oc-footer-col, .oc-footer-service) {
  background: rgb(255 253 248 / 58%);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius-md);
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs);
  padding: 18px;
}

:where(.footer-block__heading, .footer__heading, .oc-footer-logo, .oc-footer h2, .oc-footer h3) {
  color: var(--oc-warm-brown);
  font-weight: 950;
}

:where(.footer a, .footer__list-social a, .footer-block__details-content a, .oc-footer a) {
  color: var(--oc-coffee);
  font-weight: 800;
}

.footer a:hover,
.oc-footer a:hover {
  color: var(--oc-deep-gold);
}

.footer__content-bottom {
  border-top: 1px solid var(--oc-line);
}

/* OC custom pages and landing systems */

:where(
  .oc-home-clean,
  .oc-about,
  .oc-faq,
  .oc-contact,
  .oc-contact-page,
  .oc-policy,
  .oc-ship,
  .oc-catalog,
  .oc-plp,
  .oc-baby-cap-landing,
  .oc-bathmat-landing,
  .oc-towel-landing,
  .oc-posture-landing,
  .oc-pregnancy-belt-landing,
  .oc-quilt-landing,
  .oc-travel-pillow-landing,
  .oc-baby-elevation-final-real,
  .oc-carrier-landing,
  .oc-carrier-landing-v5,
  .oc-butterfly-memory-final,
  .oc-neck-butterfly-final,
  .oc-pillow-boutique-luxury-v4,
  .oc-pillow-landing,
  .oc-sport-insoles,
  .oc-sport-insoles-locked-final,
  .oc-u-pillow-boutique-final,
  .oc-wedge-3p-rootfix-v2,
  .oc-back-belt-clean-v2
) {
  box-sizing: border-box;
  direction: rtl;
  text-align: right;
  background: var(--oc-bg-page) !important;
  color: var(--oc-muted) !important;
  font-family: inherit;
  overflow: hidden;
  padding-block: 42px 76px;
  position: relative;
}

:where(
  .oc-home-clean,
  .oc-about,
  .oc-faq,
  .oc-contact,
  .oc-contact-page,
  .oc-policy,
  .oc-ship,
  .oc-catalog,
  .oc-plp
) * {
  box-sizing: border-box;
}

:where(.oc-wrap, .oc-about-wrap, .oc-faq-wrap, .oc-contact-wrap, .oc-policy-wrap, .oc-ship-wrap, .oc-cat-wrap, .oc-plp-wrap) {
  width: min(var(--oc-max), calc(100% - var(--oc-page-pad)));
  margin-inline: auto;
}

:where(
  .oc-hero-card,
  .oc-about-hero,
  .oc-faq-hero,
  .oc-contact-hero,
  .oc-policy-hero,
  .oc-ship-hero,
  .oc-cat-hero,
  .oc-plp-shell,
  .oc-final-card,
  .oc-about-final,
  .oc-faq-cta,
  .oc-policy-cta,
  .oc-plp-final
) {
  background: var(--oc-bg-panel) !important;
  border: 1px solid var(--oc-line) !important;
  border-radius: var(--oc-radius-xl) !important;
  box-shadow: var(--oc-shadow-lg), inset 0 1px 0 #fff !important;
  color: var(--oc-muted) !important;
  overflow: hidden;
  padding: clamp(24px, 4vw, 58px);
  position: relative;
}

:where(
  .oc-hero-card,
  .oc-about-hero,
  .oc-faq-hero,
  .oc-contact-hero,
  .oc-policy-hero,
  .oc-ship-hero,
  .oc-cat-hero,
  .oc-plp-shell,
  .oc-final-card
)::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: calc(var(--oc-radius-xl) - 12px);
  pointer-events: none;
}

:where(.oc-hero-card, .oc-story, .oc-about-grid, .oc-contact-grid, .oc-policy-grid, .oc-ship-grid, .oc-plp-shell) {
  display: grid;
  gap: 24px;
}

.oc-hero-card,
.oc-story,
.oc-plp-shell {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}

:where(.oc-category-grid, .oc-products-grid, .oc-trust-grid, .oc-about-values, .oc-plp-grid, .oc-cat-grid) {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oc-plp-story {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oc-about-grid,
.oc-contact-grid,
.oc-policy-grid,
.oc-ship-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(
  .oc-category-card,
  .oc-product-card,
  .oc-hero-product,
  .oc-trust-item,
  .oc-benefit,
  .oc-about-card,
  .oc-about-value,
  .oc-faq-item,
  .oc-contact-card,
  .oc-contact-form-card,
  .oc-contact-info-card,
  .oc-contact-info-item,
  .oc-policy-item,
  .oc-policy-alert,
  .oc-ship-card,
  .oc-ship-box,
  .oc-plp-point,
  .oc-plp-buybox,
  .oc-plp-card,
  .oc-plp-story-card,
  .oc-cat-card,
  .oc-cat-empty
) {
  background: var(--oc-bg-card) !important;
  border: 1px solid var(--oc-line) !important;
  border-radius: var(--oc-radius-md) !important;
  box-shadow: var(--oc-shadow-sm), inset 0 1px 0 #fff !important;
  color: var(--oc-muted) !important;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

:where(.oc-category-card, .oc-product-card, .oc-hero-product, .oc-cat-card) {
  display: flex;
  flex-direction: column;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

:where(.oc-category-card, .oc-product-card, .oc-hero-product, .oc-cat-card):hover {
  border-color: var(--oc-line-strong) !important;
  box-shadow: var(--oc-shadow-lg), inset 0 1px 0 #fff !important;
  transform: translateY(-5px);
}

:where(.oc-img, .oc-cat-media, .oc-plp-main-media, .oc-plp-thumb, .oc-plp-story-img) {
  align-items: center;
  background: var(--oc-bg-media) !important;
  border: 1px solid var(--oc-line) !important;
  border-radius: var(--oc-radius-md) !important;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs) !important;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.oc-img,
.oc-cat-media,
.oc-plp-story-img {
  aspect-ratio: 1 / 1;
}

.oc-hero-product:first-child {
  grid-column: span 2;
}

.oc-plp-main-media {
  min-height: 420px;
}

.oc-plp-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.oc-plp-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 18px !important;
}

:where(.oc-brand, .oc-title, .oc-section-head h2, .oc-final-card h2, .oc-about h1, .oc-about-card h2, .oc-about-final h2, .oc-faq h1, .oc-faq-cta h2, .oc-contact-title, .oc-policy h1, .oc-ship h1, .oc-cat-title, .oc-plp-title, .oc-plp-head h2, .oc-plp-final h2, .oc-cat-info h2, .oc-product-body h3, .oc-category-body h3) {
  color: var(--oc-warm-brown) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.12;
}

:where(.oc-brand) {
  font-size: 4.4rem;
}

:where(.oc-title, .oc-cat-title, .oc-plp-title, .oc-about h1, .oc-faq h1, .oc-contact-title, .oc-policy h1, .oc-ship h1) {
  font-size: 3.2rem;
}

:where(.oc-section-head h2, .oc-final-card h2, .oc-plp-head h2, .oc-faq-cta h2, .oc-about-final h2) {
  font-size: 2.55rem;
}

:where(.oc-sub, .oc-about-lead, .oc-faq-lead, .oc-contact-lead, .oc-policy-lead, .oc-ship-lead, .oc-cat-lead, .oc-plp-sub, .oc-section-head p, .oc-final-card p, .oc-plp-head p, .oc-plp-final p, .oc-disclaimer, .oc-about-note, .oc-faq-note, .oc-contact-note, .oc-policy-note, .oc-ship-note, .oc-ship-legal, .oc-contact-legal) {
  color: var(--oc-muted) !important;
  line-height: 1.82;
}

:where(.oc-title span, .oc-brand span, .oc-about h1 span, .oc-faq h1 span, .oc-cat-title span, .oc-plp-title span, .oc-price, .oc-cat-price, .oc-plp-price) {
  color: var(--oc-deep-gold) !important;
}

:where(.oc-product-info, .oc-product-body, .oc-category-body, .oc-cat-info, .oc-plp-story-text) {
  padding: 18px;
  position: relative;
  z-index: 1;
}

:where(.oc-actions, .oc-about-actions, .oc-faq-actions, .oc-contact-actions, .oc-policy-actions, .oc-ship-actions, .oc-cat-nav) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

:where(.oc-btn, .oc-about-btn, .oc-faq-btn, .oc-contact-btn, .oc-policy-btn, .oc-ship-btn, .oc-plp-cta, .oc-contact-submit, .oc-plp-submit, .oc-cat-nav a, .oc-link, .oc-cat-link) {
  align-items: center;
  background: var(--oc-bg-primary-button) !important;
  border: 1px solid rgb(255 255 255 / 62%) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-sm) !important;
  color: var(--oc-deep-text) !important;
  display: inline-flex;
  font-weight: 950 !important;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  text-decoration: none;
}

:where(.oc-btn-secondary, .oc-about-btn-secondary, .oc-faq-btn-secondary, .oc-contact-btn-secondary, .oc-policy-btn-secondary, .oc-ship-btn-secondary) {
  background: var(--oc-bg-secondary-button) !important;
  border-color: var(--oc-line) !important;
  color: var(--oc-warm-brown) !important;
}

.oc-cat-toolbar {
  align-items: center;
  color: var(--oc-muted);
  display: flex;
  flex-wrap: wrap;
  font-weight: 850;
  gap: 16px;
  justify-content: space-between;
  margin: 18px 0 22px;
}

.oc-faq-grid,
.oc-policy-content,
.oc-ship-sections,
.oc-contact-list,
.oc-contact-info-list {
  display: grid;
  gap: 16px;
}

:where(.oc-faq-item summary, .oc-policy-item summary) {
  color: var(--oc-warm-brown) !important;
  cursor: pointer;
  font-weight: 950 !important;
  list-style: none;
  padding: 20px 22px;
}

:where(.oc-faq-answer, .oc-policy-content, .oc-policy-item div, .oc-ship-list, .oc-contact-message) {
  color: var(--oc-muted) !important;
  line-height: 1.82;
  padding: 0 22px 22px;
}

:where(.oc-contact-field, .oc-plp-form-row) {
  display: grid;
  gap: 8px;
}

:where(.oc-contact-field input, .oc-contact-field textarea, .oc-plp-form select, .oc-plp-form input[type="number"]) {
  min-height: 52px;
  padding: 0 16px;
  width: 100%;
}

.oc-contact-field textarea {
  min-height: 140px;
  padding-block: 14px;
}

/* Custom header/footer groups after inline-style cleanup */

.oc-topbar {
  background:
    linear-gradient(180deg, rgb(255 253 248 / 94%), rgb(255 250 243 / 86%)),
    var(--oc-bg-panel);
  border-bottom: 1px solid var(--oc-line);
  box-shadow: 0 16px 42px rgb(74 51 33 / 10%);
  direction: rtl;
  margin-inline: calc(50% - 50vw);
  position: sticky;
  text-align: right;
  top: 0;
  width: 100vw;
  z-index: 80;
}

.oc-topbar__inner {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: auto 1fr auto;
  margin-inline: auto;
  min-height: 82px;
  width: min(var(--oc-max), calc(100% - 28px));
}

.oc-topbar__brand {
  color: var(--oc-warm-brown);
  display: grid;
  gap: 4px;
  text-decoration: none;
  white-space: nowrap;
}

.oc-topbar__brand strong {
  color: var(--oc-warm-brown);
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
}

.oc-topbar__brand span {
  color: var(--oc-deep-gold);
  font-size: .78rem;
  font-weight: 850;
}

.oc-topbar__nav,
.oc-topbar__actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.oc-topbar__nav {
  flex-wrap: wrap;
  justify-content: center;
}

.oc-topbar__actions {
  justify-content: flex-end;
}

.oc-topbar__nav a,
.oc-topbar__actions a,
.oc-mobile-menu a {
  color: var(--oc-warm-brown);
  font-weight: 900;
  text-decoration: none;
}

.oc-topbar__nav a,
.oc-mobile-menu__panel a {
  background: rgb(255 255 255 / 58%);
  border: 1px solid var(--oc-line-soft);
  border-radius: 999px;
  box-shadow: var(--oc-shadow-xs);
  padding: 10px 13px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.oc-topbar__nav a:hover,
.oc-mobile-menu__panel a:hover {
  background: var(--oc-bg-secondary-button);
  box-shadow: var(--oc-shadow-sm);
  transform: translateY(-1px);
}

.oc-topbar__icon {
  align-items: center;
  background: linear-gradient(135deg, #fff, var(--oc-white-gold));
  border: 1px solid var(--oc-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.oc-topbar__menu-toggle {
  display: none;
}

.oc-mobile-menu summary {
  cursor: pointer;
  list-style: none;
}

.oc-mobile-menu summary::-webkit-details-marker {
  display: none;
}

.oc-mobile-menu__panel {
  background: linear-gradient(145deg, rgb(255 253 248 / 98%), rgb(244 231 200 / 94%));
  border: 1px solid var(--oc-line);
  border-radius: 24px;
  box-shadow: var(--oc-shadow-lg);
  display: grid;
  gap: 8px;
  inset-inline: 14px;
  padding: 14px;
  position: absolute;
  top: 76px;
}

.oc-footer {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.oc-footer-wrap {
  margin-inline: auto;
  width: min(1180px, calc(100% - var(--oc-page-pad)));
}

.oc-footer-grid {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: 1.35fr .85fr .95fr .95fr;
}

.oc-footer-bottom {
  align-items: center;
  border-top: 1px solid var(--oc-line);
  color: var(--oc-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  margin-top: 34px;
  padding-top: 22px;
}

/* Older product landing templates now share the same pearl system */

section[id^="oc-"],
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) {
  background: var(--oc-bg-page) !important;
  color: var(--oc-muted) !important;
  direction: rtl;
  overflow: hidden;
  position: relative;
  text-align: right;
}

section[id^="oc-"] :where([class*="-wrap"]),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-wrap"]) {
  margin-inline: auto;
  width: min(var(--oc-max), calc(100% - var(--oc-page-pad)));
}

section[id^="oc-"] :where([class*="-hero"], [class*="-panel"], [class*="-order-shell"], [class*="-spec-panel"], [class*="-final"]),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-hero"], [class*="-panel"], [class*="-order-shell"], [class*="-spec-panel"], [class*="-final"]) {
  background: var(--oc-bg-panel) !important;
  border: 1px solid var(--oc-line) !important;
  border-radius: var(--oc-radius-xl) !important;
  box-shadow: var(--oc-shadow-lg), inset 0 1px 0 #fff !important;
  color: var(--oc-muted) !important;
  overflow: hidden;
  padding: clamp(22px, 4vw, 54px);
  position: relative;
}

section[id^="oc-"] :where([class*="-card"], [class*="-offer"], [class*="-faq-item"], [class*="-list-item"], [class*="-spec-box"], [class*="-pill"]),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-card"], [class*="-offer"], [class*="-faq-item"], [class*="-list-item"], [class*="-spec-box"], [class*="-pill"]) {
  background: var(--oc-bg-card) !important;
  border: 1px solid var(--oc-line) !important;
  border-radius: var(--oc-radius-md) !important;
  box-shadow: var(--oc-shadow-sm), inset 0 1px 0 #fff !important;
  color: var(--oc-muted) !important;
  overflow: hidden;
}

section[id^="oc-"] :where([class*="-grid"], [class*="-benefits"], [class*="-offers"], [class*="-checks"], [class*="-faq-list"], [class*="-mini-gallery"], [class*="-spec-boxes"], [class*="-split"]),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-grid"], [class*="-benefits"], [class*="-offers"], [class*="-checks"], [class*="-faq-list"], [class*="-mini-gallery"], [class*="-spec-boxes"], [class*="-split"]) {
  display: grid;
  gap: 20px;
}

section[id^="oc-"] :where([class*="-hero-grid"], [class*="-split"], [class*="-specs"], [class*="-faq-grid"]),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-hero-grid"], [class*="-split"], [class*="-specs"], [class*="-faq-grid"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

section[id^="oc-"] :where([class*="-benefits"], [class*="-offers"], [class*="-checks"], [class*="-mini-gallery"], [class*="-spec-boxes"]),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-benefits"], [class*="-offers"], [class*="-checks"], [class*="-mini-gallery"], [class*="-spec-boxes"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

section[id^="oc-"] :where([class*="-frame"], [class*="-imgbox"], [class*="-offer-image"], [class*="-offer-img"], [class*="-image-card"], [class*="-ribbon"], [class*="-media"]),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-frame"], [class*="-imgbox"], [class*="-offer-image"], [class*="-offer-img"], [class*="-image-card"], [class*="-ribbon"], [class*="-media"]) {
  align-items: center;
  background: var(--oc-bg-media) !important;
  border: 1px solid var(--oc-line) !important;
  border-radius: var(--oc-radius-lg) !important;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-sm) !important;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

section[id^="oc-"] img,
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 10px;
}

section[id^="oc-"] :where([class*="-title"], [class*="-h2"], h1, h2, h3),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-title"], [class*="-h2"], h1, h2, h3) {
  color: var(--oc-warm-brown) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

section[id^="oc-"] :where([class*="-text"], [class*="-lead"], [class*="-note"], p, li),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-text"], [class*="-lead"], [class*="-note"], p, li) {
  color: var(--oc-muted) !important;
  line-height: 1.82;
}

section[id^="oc-"] :where([class*="-eyebrow"], [class*="-badge"], [class*="-icon"], [class*="-price"]),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-eyebrow"], [class*="-badge"], [class*="-icon"], [class*="-price"]) {
  background: var(--oc-bg-secondary-button) !important;
  border: 1px solid var(--oc-line) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-xs) !important;
  color: var(--oc-warm-brown) !important;
  display: inline-flex;
  font-weight: 950 !important;
  padding: 8px 16px;
}

section[id^="oc-"] :where([class*="-btn"], button),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-btn"], button) {
  background: var(--oc-bg-primary-button) !important;
  border: 1px solid rgb(255 255 255 / 62%) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 #fff, var(--oc-shadow-sm) !important;
  color: var(--oc-deep-text) !important;
  font-weight: 950 !important;
  min-height: 48px;
  padding: 0 24px;
  text-decoration: none;
}

section[id^="oc-"] :where([class*="-sticky"]),
:where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-sticky"]) {
  background: rgb(255 253 248 / 90%) !important;
  border: 1px solid var(--oc-line) !important;
  border-radius: 999px !important;
  box-shadow: var(--oc-shadow-lg) !important;
  color: var(--oc-warm-brown) !important;
}

/* Responsive */

@media screen and (max-width: 989px) {
  :root {
    --oc-page-pad: 24px;
  }

  :where(.header, .header-wrapper) {
    border-radius: 0 0 24px 24px;
  }

  .menu-drawer {
    border-radius: 0 0 var(--oc-radius-md) var(--oc-radius-md);
  }

  :where(.product-card, .product-grid__card, .card, .collection-card__inner) {
    border-radius: var(--oc-radius-md);
  }

  :where(.product__info-container, .banner__box, .rich-text__blocks, .image-with-text__content, .newsletter__wrapper, .collection-hero__inner) {
    border-radius: var(--oc-radius-md);
    padding: 22px;
  }

  .oc-hero-card,
  .oc-story,
  .oc-about-grid,
  .oc-contact-grid,
  .oc-policy-grid,
  .oc-ship-grid,
  .oc-plp-shell {
    grid-template-columns: 1fr;
  }

  .oc-plp-media-panel {
    order: -1;
  }

  .oc-category-grid,
  .oc-products-grid,
  .oc-trust-grid,
  .oc-about-values,
  .oc-plp-grid,
  .oc-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oc-plp-story {
    grid-template-columns: 1fr;
  }

  .oc-topbar__inner {
    min-height: 74px;
  }

  .oc-topbar__nav {
    display: none;
  }

  .oc-topbar__menu-toggle {
    display: block;
  }

  .oc-topbar__brand {
    justify-self: center;
    text-align: center;
  }

  .oc-topbar__brand strong {
    font-size: 1.4rem;
  }

  .oc-topbar__brand span {
    display: none;
  }

  .oc-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  section[id^="oc-"] :where([class*="-hero-grid"], [class*="-split"], [class*="-specs"], [class*="-faq-grid"]),
  :where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-hero-grid"], [class*="-split"], [class*="-specs"], [class*="-faq-grid"]) {
    grid-template-columns: 1fr;
  }

  section[id^="oc-"] :where([class*="-benefits"], [class*="-offers"], [class*="-checks"], [class*="-mini-gallery"], [class*="-spec-boxes"]),
  :where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-benefits"], [class*="-offers"], [class*="-checks"], [class*="-mini-gallery"], [class*="-spec-boxes"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 749px) {
  :root {
    --oc-page-pad: 20px;
  }

  body {
    overflow-x: clip;
  }

  .product-grid {
    gap: 16px;
  }

  :where(.button, .button-secondary, .product-form__submit, .quick-add__button, .cart__checkout-button):not(.button-unstyled):not(.drawer__close):not(.close-button):not(.slider-button):not(.header__icon) {
    min-height: 46px;
    padding: 12px 18px;
  }

  :where(.media, .card-gallery, .product-media-container, .global-media-settings) {
    border-radius: 24px;
  }

  :where(.oc-brand) {
    font-size: 3rem;
  }

  :where(.oc-title, .oc-cat-title, .oc-plp-title, .oc-about h1, .oc-faq h1, .oc-contact-title, .oc-policy h1, .oc-ship h1) {
    font-size: 2.25rem;
    text-align: center;
  }

  :where(.oc-section-head h2, .oc-final-card h2, .oc-plp-head h2, .oc-faq-cta h2, .oc-about-final h2) {
    font-size: 1.95rem;
    text-align: center;
  }

  :where(.oc-sub, .oc-about-lead, .oc-faq-lead, .oc-contact-lead, .oc-policy-lead, .oc-ship-lead, .oc-cat-lead, .oc-plp-sub) {
    text-align: center;
  }

  :where(.oc-actions, .oc-about-actions, .oc-faq-actions, .oc-contact-actions, .oc-policy-actions, .oc-ship-actions, .oc-cat-nav) {
    justify-content: center;
  }
}

@media screen and (max-width: 640px) {
  .oc-category-grid,
  .oc-products-grid,
  .oc-trust-grid,
  .oc-about-values,
  .oc-plp-grid,
  .oc-cat-grid {
    grid-template-columns: 1fr;
  }

  .oc-hero-product:first-child {
    grid-column: auto;
  }

  :where(.card__content, .card__information, .product-card__content, .oc-product-info, .oc-product-body, .oc-category-body, .oc-cat-info) {
    padding: 15px;
  }

  :where(.footer-block, .footer__blocks-wrapper > *, .oc-footer-col, .oc-footer-service) {
    border-radius: 22px;
  }

  .oc-plp-main-media {
    min-height: 300px;
  }

  .oc-footer-grid {
    grid-template-columns: 1fr;
  }

  .oc-footer-bottom {
    display: grid;
  }

  section[id^="oc-"] :where([class*="-benefits"], [class*="-offers"], [class*="-checks"], [class*="-mini-gallery"], [class*="-spec-boxes"]),
  :where(.ocp-lux, .ocu, .occ-luxury, .ocwr, .ocbe, .ocbb, .ocbn, .ocbm, .ocsi) :where([class*="-benefits"], [class*="-offers"], [class*="-checks"], [class*="-mini-gallery"], [class*="-spec-boxes"]) {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 390px) {
  :root {
    --oc-page-pad: 16px;
  }

  :where(.oc-hero-card, .oc-about-hero, .oc-faq-hero, .oc-contact-hero, .oc-policy-hero, .oc-ship-hero, .oc-cat-hero, .oc-plp-shell, .oc-final-card) {
    border-radius: 24px !important;
    padding: 18px 14px;
  }

  :where(.oc-btn, .oc-about-btn, .oc-faq-btn, .oc-contact-btn, .oc-policy-btn, .oc-ship-btn, .oc-plp-cta, .oc-contact-submit, .oc-plp-submit, .oc-cat-nav a) {
    min-height: 44px;
    padding-inline: 16px;
  }
}

/* Motion */

@keyframes oc-ambient-shift {
  0% {
    opacity: .9;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: .72;
    transform: translate3d(0, 18px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
css /* Mobile fix: prevent price overflow from product cards */ @media screen and (max-width: 749px) { .product-card, .card, .card__inner { overflow: visible !important; padding-bottom: 16px; } .card__content, .card__information, .product-card__info { padding-bottom: 20px; overflow: visible; } .price, .price-item, product-price { display: block; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.3; max-width: 100%; } }
/* Mobile fix: keep product prices inside cards */
@media screen and (max-width: 749px) {
  .product-card,
  .product-grid__card,
  .card,
  .card__inner,
  .resource-list__item {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }

  .product-card__content,
  .card__content,
  .card__information,
  .product-card__info {
    padding-bottom: 28px !important;
    overflow: visible !important;
    min-height: auto !important;
  }

  .price,
  .price-item,
  product-price,
  .card-information .price {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }
}
/* OC Cart remove button visibility fix */
.cart-remove-button,
.cart-item__remove,
.cart-item__quantity-wrapper .cart-remove-button,
.cart-item__quantity-wrapper .cart-item__remove,
a[href*="/cart/change"][href*="quantity=0"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  color: #8B6914 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  margin-top: 6px !important;
  cursor: pointer !important;
}

.cart-remove-button:hover,
.cart-item__remove:hover,
a[href*="/cart/change"][href*="quantity=0"]:hover {
  color: #5a4009 !important;
}

@media screen and (max-width: 749px) {
  .cart-remove-button,
  .cart-item__remove,
  a[href*="/cart/change"][href*="quantity=0"] {
    font-size: 14px !important;
    padding: 8px 0 !important;
  }
}
/* OC emergency mobile header fix: show menu links instead of broken hamburger */
@media screen and (max-width: 920px) {
  .oc-topbar {
    overflow: visible !important;
    z-index: 999999 !important;
  }

  .oc-topbar__inner {
    min-height: auto !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 10px !important;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  .oc-topbar__brand {
    grid-column: 1 !important;
    justify-self: start !important;
    text-align: right !important;
    min-width: 0 !important;
  }

  .oc-topbar__brand strong {
    font-size: 20px !important;
    white-space: normal !important;
    line-height: 1.05 !important;
  }

  .oc-topbar__actions {
    grid-column: 2 !important;
    justify-self: end !important;
  }

  /* Hide broken hamburger */
  .oc-topbar__menu-toggle,
  .oc-mobile-menu,
  .oc-mobile-menu__panel,
  .oc-mobile-menu__backdrop {
    display: none !important;
  }

  /* Show the real navigation on mobile as a horizontal scroll menu */
  .oc-topbar__nav {
    display: flex !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 2px 10px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .oc-topbar__nav::-webkit-scrollbar {
    display: none !important;
  }

  .oc-topbar__nav a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 10px 13px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(184,149,95,.22) !important;
    box-shadow: 0 6px 16px rgba(32,32,32,.06) !important;
  }
}

@media screen and (max-width: 390px) {
  .oc-topbar__brand strong {
    font-size: 18px !important;
  }

  .oc-topbar__icon {
    width: 38px !important;
    height: 38px !important;
  }

  .oc-topbar__nav a {
    font-size: 12px !important;
    padding: 9px 11px !important;
  }
}

/* ===== אורתופדיק קומפורט Footer RTL Fix ===== */

#shopify-section-footer,
#shopify-section-footer footer,
#shopify-section-footer .footer,
.shopify-section-group-footer-group,
.shopify-section-group-footer-group footer,
.shopify-section-group-footer-group .footer {
  direction: rtl !important;
  text-align: right !important;
}

#shopify-section-footer *,
.shopify-section-group-footer-group * {
  direction: rtl !important;
  text-align: right !important;
}

#shopify-section-footer .footer__content-top,
#shopify-section-footer .footer__blocks-wrapper,
.shopify-section-group-footer-group .footer__content-top,
.shopify-section-group-footer-group .footer__blocks-wrapper {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: right !important;
}

#shopify-section-footer .footer-block,
.shopify-section-footer .footer-block,
.shopify-section-group-footer-group .footer-block {
  text-align: right !important;
  direction: rtl !important;
}

#shopify-section-footer .footer-block__heading,
#shopify-section-footer .footer-block__details-content,
#shopify-section-footer .footer-block__details-content p,
#shopify-section-footer .footer-block__details-content li,
#shopify-section-footer .footer-block__details-content a,
.shopify-section-group-footer-group .footer-block__heading,
.shopify-section-group-footer-group .footer-block__details-content,
.shopify-section-group-footer-group .footer-block__details-content p,
.shopify-section-group-footer-group .footer-block__details-content li,
.shopify-section-group-footer-group .footer-block__details-content a {
  text-align: right !important;
  direction: rtl !important;
}

#shopify-section-footer ul,
#shopify-section-footer li,
.shopify-section-group-footer-group ul,
.shopify-section-group-footer-group li {
  padding-right: 0 !important;
  margin-right: 0 !important;
  text-align: right !important;
}

#shopify-section-footer .list-menu__item,
.shopify-section-group-footer-group .list-menu__item {
  justify-content: flex-end !important;
  text-align: right !important;
}

#shopify-section-footer .footer-block__newsletter,
#shopify-section-footer .newsletter-form,
#shopify-section-footer .newsletter-form__field-wrapper,
.shopify-section-group-footer-group .footer-block__newsletter,
.shopify-section-group-footer-group .newsletter-form,
.shopify-section-group-footer-group .newsletter-form__field-wrapper {
  direction: rtl !important;
  text-align: right !important;
  align-items: flex-end !important;
}

#shopify-section-footer input,
#shopify-section-footer textarea,
#shopify-section-footer select,
.shopify-section-group-footer-group input,
.shopify-section-group-footer-group textarea,
.shopify-section-group-footer-group select {
  direction: rtl !important;
  text-align: right !important;
}

#shopify-section-footer .footer__list-social,
.shopify-section-group-footer-group .footer__list-social {
  display: flex !important;
  justify-content: flex-end !important;
  direction: rtl !important;
}

#shopify-section-footer .footer__content-bottom,
#shopify-section-footer .footer__content-bottom-wrapper,
#shopify-section-footer .footer__copyright,
.shopify-section-group-footer-group .footer__content-bottom,
.shopify-section-group-footer-group .footer__content-bottom-wrapper,
.shopify-section-group-footer-group .footer__copyright {
  direction: rtl !important;
  text-align: right !important;
  justify-content: flex-end !important;
}

/* Mobile footer RTL */
@media screen and (max-width: 749px) {
  #shopify-section-footer .footer__blocks-wrapper,
  .shopify-section-group-footer-group .footer__blocks-wrapper {
    flex-direction: column !important;
    align-items: flex-end !important;
  }

  #shopify-section-footer .footer-block,
  .shopify-section-group-footer-group .footer-block {
    width: 100% !important;
    text-align: right !important;
  }
}
/* ===== אורתופדיק קומפורט Footer RTL Fix ===== */

#shopify-section-footer,
#shopify-section-footer footer,
#shopify-section-footer .footer,
.shopify-section-group-footer-group,
.shopify-section-group-footer-group footer,
.shopify-section-group-footer-group .footer {
  direction: rtl !important;
  text-align: right !important;
}

#shopify-section-footer *,
.shopify-section-group-footer-group * {
  direction: rtl !important;
  text-align: right !important;
}

#shopify-section-footer .footer__content-top,
#shopify-section-footer .footer__blocks-wrapper,
.shopify-section-group-footer-group .footer__content-top,
.shopify-section-group-footer-group .footer__blocks-wrapper {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: right !important;
}

#shopify-section-footer .footer-block,
.shopify-section-group-footer-group .footer-block {
  text-align: right !important;
  direction: rtl !important;
}

#shopify-section-footer .footer-block__heading,
#shopify-section-footer .footer-block__details-content,
#shopify-section-footer .footer-block__details-content p,
#shopify-section-footer .footer-block__details-content li,
#shopify-section-footer .footer-block__details-content a,
.shopify-section-group-footer-group .footer-block__heading,
.shopify-section-group-footer-group .footer-block__details-content,
.shopify-section-group-footer-group .footer-block__details-content p,
.shopify-section-group-footer-group .footer-block__details-content li,
.shopify-section-group-footer-group .footer-block__details-content a {
  text-align: right !important;
  direction: rtl !important;
}

#shopify-section-footer ul,
#shopify-section-footer li,
.shopify-section-group-footer-group ul,
.shopify-section-group-footer-group li {
  padding-right: 0 !important;
  margin-right: 0 !important;
  text-align: right !important;
}

#shopify-section-footer .list-menu__item,
.shopify-section-group-footer-group .list-menu__item {
  justify-content: flex-end !important;
  text-align: right !important;
}

#shopify-section-footer .footer-block__newsletter,
#shopify-section-footer .newsletter-form,
#shopify-section-footer .newsletter-form__field-wrapper,
.shopify-section-group-footer-group .footer-block__newsletter,
.shopify-section-group-footer-group .newsletter-form,
.shopify-section-group-footer-group .newsletter-form__field-wrapper {
  direction: rtl !important;
  text-align: right !important;
  align-items: flex-end !important;
}

#shopify-section-footer input,
#shopify-section-footer textarea,
#shopify-section-footer select,
.shopify-section-group-footer-group input,
.shopify-section-group-footer-group textarea,
.shopify-section-group-footer-group select {
  direction: rtl !important;
  text-align: right !important;
}

#shopify-section-footer .footer__list-social,
.shopify-section-group-footer-group .footer__list-social {
  display: flex !important;
  justify-content: flex-end !important;
  direction: rtl !important;
}

#shopify-section-footer .footer__content-bottom,
#shopify-section-footer .footer__content-bottom-wrapper,
#shopify-section-footer .footer__copyright,
.shopify-section-group-footer-group .footer__content-bottom,
.shopify-section-group-footer-group .footer__content-bottom-wrapper,
.shopify-section-group-footer-group .footer__copyright {
  direction: rtl !important;
  text-align: right !important;
  justify-content: flex-end !important;
}

@media screen and (max-width: 749px) {
  #shopify-section-footer .footer__blocks-wrapper,
  .shopify-section-group-footer-group .footer__blocks-wrapper {
    flex-direction: column !important;
    align-items: flex-end !important;
  }

  #shopify-section-footer .footer-block,
  .shopify-section-group-footer-group .footer-block {
    width: 100% !important;
    text-align: right !important;
  }
}
/* ===== אורתופדיק קומפורט פוטר בוטיק Override ===== */

#shopify-section-footer,
.shopify-section-group-footer-group {
  direction: rtl !important;
  text-align: right !important;
}

#shopify-section-footer .footer,
.shopify-section-group-footer-group .footer {
  background: linear-gradient(180deg, #fbf7ef 0%, #f1e5d1 100%) !important;
  border-top: 2px solid #c9a24f !important;
  padding: 48px 0 24px !important;
}

/* מרכז את הפוטר ברוחב יפה */
#shopify-section-footer .footer__content-top,
.shopify-section-group-footer-group .footer__content-top {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

/* 3 עמודות בוטיק מסודרות */
#shopify-section-footer .footer__blocks-wrapper,
.shopify-section-group-footer-group .footer__blocks-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 26px !important;
  align-items: stretch !important;
  direction: rtl !important;
}

/* קופסאות */
#shopify-section-footer .footer-block,
.shopify-section-group-footer-group .footer-block {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(180, 140, 60, 0.42) !important;
  border-radius: 24px !important;
  padding: 26px 24px !important;
  box-shadow: 0 12px 32px rgba(70, 45, 15, 0.08) !important;
  min-height: 220px !important;
  direction: rtl !important;
  text-align: right !important;
}

/* כותרות */
#shopify-section-footer .footer-block__heading,
.shopify-section-group-footer-group .footer-block__heading {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #2b2115 !important;
  margin: 0 0 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(180, 140, 60, 0.38) !important;
  direction: rtl !important;
  text-align: right !important;
}

/* טקסטים */
#shopify-section-footer .footer-block__details-content,
#shopify-section-footer .footer-block__details-content p,
#shopify-section-footer .footer-block__details-content li,
#shopify-section-footer .footer-block__details-content a,
.shopify-section-group-footer-group .footer-block__details-content,
.shopify-section-group-footer-group .footer-block__details-content p,
.shopify-section-group-footer-group .footer-block__details-content li,
.shopify-section-group-footer-group .footer-block__details-content a {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #3b3023 !important;
  direction: rtl !important;
  text-align: right !important;
}

/* רשימות נקיות */
#shopify-section-footer ul,
#shopify-section-footer li,
.shopify-section-group-footer-group ul,
.shopify-section-group-footer-group li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* קישורים זהב */
#shopify-section-footer a,
.shopify-section-group-footer-group a {
  color: #7a5520 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#shopify-section-footer a:hover,
.shopify-section-group-footer-group a:hover {
  color: #b08a3c !important;
  text-decoration: underline !important;
}

/* מסתיר ניוזלטר מכוער */
#shopify-section-footer .footer-block--newsletter,
#shopify-section-footer .footer-block__newsletter,
#shopify-section-footer .newsletter-form,
#shopify-section-footer .newsletter-form__field-wrapper,
.shopify-section-group-footer-group .footer-block--newsletter,
.shopify-section-group-footer-group .footer-block__newsletter,
.shopify-section-group-footer-group .newsletter-form,
.shopify-section-group-footer-group .newsletter-form__field-wrapper {
  display: none !important;
}

/* תחתית הפוטר */
#shopify-section-footer .footer__content-bottom,
.shopify-section-group-footer-group .footer__content-bottom {
  max-width: 1180px !important;
  margin: 30px auto 0 !important;
  padding: 18px 32px 0 !important;
  border-top: 1px solid rgba(180, 140, 60, 0.32) !important;
  text-align: center !important;
  direction: rtl !important;
}

#shopify-section-footer .footer__content-bottom-wrapper,
.shopify-section-group-footer-group .footer__content-bottom-wrapper {
  justify-content: center !important;
  text-align: center !important;
}

/* מסתיר Powered by Shopify */
#shopify-section-footer .footer__copyright a[href*="shopify"],
.shopify-section-group-footer-group .footer__copyright a[href*="shopify"] {
  display: none !important;
}

/* מובייל */
@media screen and (max-width: 749px) {
  #shopify-section-footer .footer,
  .shopify-section-group-footer-group .footer {
    padding: 32px 0 18px !important;
  }

  #shopify-section-footer .footer__content-top,
  .shopify-section-group-footer-group .footer__content-top {
    padding: 0 16px !important;
  }

  #shopify-section-footer .footer__blocks-wrapper,
  .shopify-section-group-footer-group .footer__blocks-wrapper {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #shopify-section-footer .footer-block,
  .shopify-section-group-footer-group .footer-block {
    min-height: auto !important;
    padding: 22px 20px !important;
    border-radius: 20px !important;
  }
}

/* OC global boutique CSS extracted from invalid inline style */

  html[lang],
  body {
    direction: rtl;
  }

  body {
    text-align: right;
  }

  a[href*="instagram"],
  a[href*="facebook"],
  a[href*="wa.me"],
  a[href*="tiktok"] {
    text-decoration: none !important;
  }

  .oc-socials {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
  }

  .oc-social {
    width: 66px !important;
    height: 66px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
      radial-gradient(circle at 32% 25%, rgba(255,255,255,.42), transparent 24%),
      linear-gradient(135deg, #f8dc91 0%, #c28a2d 55%, #8f5b18 100%) !important;
    border: 1px solid rgba(255,255,255,.66) !important;
    box-shadow:
      0 12px 25px rgba(151,95,25,.27),
      0 0 0 6px rgba(245,216,148,.12),
      inset 0 2px 12px rgba(255,255,255,.25) !important;
    font-size: 0 !important;
  }

  .oc-social svg {
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    fill: #fffdf7 !important;
    filter: drop-shadow(0 3px 6px rgba(75,43,20,.25)) !important;
  }

  .oc-social:hover {
    transform: translateY(-8px) scale(1.08) rotate(-2deg) !important;
    filter: brightness(1.08) !important;
    box-shadow:
      0 18px 34px rgba(151,95,25,.35),
      0 0 28px rgba(245,216,148,.72),
      0 0 0 8px rgba(245,216,148,.18) !important;
  }

  .oc-global-policy {
    direction: rtl;
    text-align: right;
    max-width: 1080px;
    margin: 42px auto;
    padding: clamp(26px, 4vw, 54px);
    border-radius: 42px;
    color: #3b2415;
    background:
      radial-gradient(circle at 8% 8%, rgba(255,239,198,.95), transparent 28%),
      radial-gradient(circle at 92% 10%, rgba(196,139,48,.24), transparent 26%),
      linear-gradient(135deg, #fffdf7 0%, #f7ead5 43%, #ead0a4 100%);
    border: 1px solid rgba(183,131,48,.36);
    box-shadow:
      0 28px 80px rgba(88,55,19,.16),
      inset 0 1px 0 rgba(255,255,255,.94);
    font-family: inherit;
  }

  .oc-global-policy h1 {
    margin: 0 0 18px;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.05;
    font-weight: 950;
    color: #4b2d16;
    text-align: center;
  }

  .oc-global-policy h2 {
    margin: 28px 0 10px;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.2;
    font-weight: 950;
    color: #5b361b;
  }

  .oc-global-policy p,
  .oc-global-policy li {
    color: #6e4c2a;
    font-size: 17px;
    line-height: 1.9;
    font-weight: 650;
  }

  .oc-global-policy ul {
    padding-right: 22px;
    margin: 10px 0 0;
  }

  .oc-global-policy .oc-policy-card {
    margin-top: 18px;
    padding: 22px;
    border-radius: 28px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(190,141,56,.24);
    box-shadow: 0 12px 30px rgba(91,57,19,.07);
  }

  .oc-global-policy strong {
    color: #9b641f;
    font-weight: 950;
  }

  .oc-global-hidden {
    display: none !important;
  }

/* /OC global boutique CSS */
/* OC invalid script removed from CSS; see assets/oc-global-repair.js */
(function () {
  function ocDecodePath() {
    try {
      return decodeURIComponent(window.location.pathname || "");
    } catch (e) {
      return window.location.pathname || "";
    }
  }

  function ocFixCollectionTitle() {
    var path = ocDecodePath();

    if (path.indexOf("/collections/") === -1) return;

    var title = document.querySelector(".oc-cat-title[data-oc-title], [data-oc-title], .oc-cat-title");
    if (!title) return;

    var cleanPath = path.toLowerCase();
    var newTitle = "";

    if (
      cleanPath.indexOf("כריות") !== -1 ||
      cleanPath.indexOf("sleep") !== -1 ||
      cleanPath.indexOf("pillow") !== -1
    ) {
      newTitle = "כריות שינה ותמיכה";
    }

    else if (
      cleanPath.indexOf("חגורות") !== -1 ||
      cleanPath.indexOf("מתקני") !== -1 ||
      cleanPath.indexOf("support") !== -1 ||
      cleanPath.indexOf("belt") !== -1
    ) {
      newTitle = "חגורות ומתקני תמיכה";
    }

    else if (
      cleanPath.indexOf("תינוק") !== -1 ||
      cleanPath.indexOf("אמהות") !== -1 ||
      cleanPath.indexOf("baby") !== -1 ||
      cleanPath.indexOf("mother") !== -1
    ) {
      newTitle = "מוצרי תינוקות ואמהות";
    }

    else if (
      cleanPath.indexOf("בית") !== -1 ||
      cleanPath.indexOf("נסיעות") !== -1 ||
      cleanPath.indexOf("home") !== -1 ||
      cleanPath.indexOf("travel") !== -1
    ) {
      newTitle = "נוחות לבית ולנסיעות";
    }

    if (!newTitle) return;

    title.textContent = newTitle;
  }

  document.addEventListener("DOMContentLoaded", ocFixCollectionTitle);
  window.addEventListener("load", ocFixCollectionTitle);

  setTimeout(ocFixCollectionTitle, 100);
  setTimeout(ocFixCollectionTitle, 400);
  setTimeout(ocFixCollectionTitle, 1000);
  setTimeout(ocFixCollectionTitle, 2000);
})();


/* OC final RTL/system polish */
html[dir="rtl"], body[dir="rtl"] { direction: rtl; }
body, main, .shopify-policy__container, .shopify-policy__body { text-align: right; }
.shopify-policy__container { max-width: 1080px; }
.oc-global-policy { direction: rtl; text-align: right; max-width: 1080px; margin: 42px auto; padding: clamp(26px,4vw,54px); border-radius: 42px; color: #3b2415; background: radial-gradient(circle at 8% 8%, rgba(255,239,198,.95), transparent 28%), radial-gradient(circle at 92% 10%, rgba(196,139,48,.24), transparent 26%), linear-gradient(135deg,#fffdf7 0%,#f7ead5 43%,#ead0a4 100%); border: 1px solid rgba(183,131,48,.36); box-shadow: 0 28px 80px rgba(88,55,19,.16), inset 0 1px 0 rgba(255,255,255,.94); }
.oc-global-policy h1 { margin: 0 0 18px; font-size: clamp(34px,5vw,62px); line-height: 1.05; font-weight: 950; color: #4b2d16; text-align: center; }
.oc-global-policy h2 { margin: 28px 0 10px; font-size: clamp(22px,3vw,34px); line-height: 1.2; font-weight: 950; color: #5b361b; }
.oc-global-policy p, .oc-global-policy li { color: #6e4c2a; font-size: 17px; line-height: 1.9; font-weight: 650; }
.oc-global-policy ul { padding-right: 22px; margin: 10px 0 0; }
.oc-policy-card { border-radius: 28px; padding: 22px; margin-top: 16px; background: rgba(255,255,255,.72); border: 1px solid rgba(183,131,48,.22); box-shadow: 0 12px 28px rgba(88,55,19,.08); }
.price, .product-card, .cart-items, .cart__items, .search-results, .predictive-search, .facets, .pagination { direction: rtl; text-align: right; }
@media (max-width: 720px) { .oc-global-policy { margin: 22px 12px; padding: 22px; border-radius: 28px; } .oc-global-policy h1 { font-size: 34px; } .oc-global-policy p, .oc-global-policy li { font-size: 15px; } }

/* OC FINAL REWORK 27JUN2026 — customer-facing cleanup */
html[dir="rtl"], body[dir="rtl"] { direction: rtl !important; }
body, main, #MainContent { text-align: right; }

/* Shopify legal policy pages: keep real Shopify Settings content, only make it premium/RTL */
.shopify-policy__container.oc-policy-pretty,
.shopify-policy__container {
  direction: rtl !important;
  text-align: right !important;
  max-width: 1080px !important;
  margin: 42px auto !important;
  padding: clamp(26px, 4vw, 54px) !important;
  border-radius: 42px !important;
  color: #3b2415 !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(255,239,198,.92), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(196,139,48,.24), transparent 26%),
    linear-gradient(135deg, #fffdf7 0%, #f7ead5 43%, #ead0a4 100%) !important;
  border: 1px solid rgba(183,131,48,.36) !important;
  box-shadow: 0 28px 80px rgba(88,55,19,.16), inset 0 1px 0 rgba(255,255,255,.94) !important;
  overflow: hidden !important;
  position: relative !important;
}
.shopify-policy__title { display: none !important; }
.oc-policy-hebrew-title {
  direction: rtl !important;
  text-align: center !important;
  margin: 0 0 28px !important;
  padding-bottom: 18px !important;
  color: #a96f22 !important;
  font-size: clamp(34px, 5vw, 60px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.8px !important;
  text-shadow: 0 1px 0 #fff, 0 12px 30px rgba(169,111,34,.24), 0 0 28px rgba(255,232,168,.45) !important;
}
.oc-policy-hebrew-title::after {
  content: "✦" !important;
  display: block !important;
  margin: 14px auto 0 !important;
  width: 190px !important;
  color: #c89436 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  border-top: 1px solid rgba(212,166,79,.55) !important;
  padding-top: 10px !important;
}
.shopify-policy__body { direction: rtl !important; text-align: right !important; position: relative !important; z-index: 2 !important; }
.shopify-policy__body h1 { display: none !important; }
.shopify-policy__body h2,
.shopify-policy__body h3 {
  direction: rtl !important;
  text-align: right !important;
  color: #8d5817 !important;
  font-size: clamp(22px, 2.4vw, 31px) !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  margin: 32px 0 14px !important;
  padding: 14px 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(212,166,79,.28) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,242,213,.78)) !important;
  box-shadow: 0 12px 26px rgba(91,61,24,.10) !important;
}
.shopify-policy__body p,
.shopify-policy__body li,
.shopify-policy__body div {
  direction: rtl !important;
  text-align: right !important;
  color: #604b32 !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.95 !important;
  font-weight: 650 !important;
}
.shopify-policy__body strong,
.shopify-policy__body b { color: #8d5817 !important; font-weight: 950 !important; }

/* Footer links and category routes */
.oc-royal-footer .oc-link[href*="/collections/all?occat="],
.oc-royal-footer .oc-link[href*="/policies/"] {
  display: grid !important;
  grid-template-columns: 42px 1fr 20px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 56px !important;
  padding: 11px 13px !important;
  border-radius: 19px !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Catalog: never show hidden cards and empty state together */
[data-oc-card][hidden] { display: none !important; }
[data-oc-empty][hidden] { display: none !important; }
.oc-cat-nav a[href*="occat="] { cursor: pointer; }

/* Price cleanup on product cards/search/cart */
.price, .product-card, .cart-items, .cart__items, .search-results, .predictive-search, .facets, .pagination { direction: rtl !important; text-align: right !important; }

@media (max-width: 720px) {
  .shopify-policy__container.oc-policy-pretty,
  .shopify-policy__container { margin: 22px 12px !important; padding: 22px !important; border-radius: 28px !important; }
  .oc-policy-hebrew-title { font-size: 34px !important; }
  .shopify-policy__body p, .shopify-policy__body li, .shopify-policy__body div { font-size: 15px !important; }
}
/* /OC FINAL REWORK */

/* OC final QA fixes: FAQ page, policy pages, footer policy links */
.oc-faq-page, .oc-faq-page * { box-sizing: border-box; }
.oc-faq-page { direction: rtl; text-align: right; padding: clamp(34px, 5vw, 72px) 0; background: radial-gradient(circle at 12% 0%, rgba(212,166,79,.18), transparent 32%), linear-gradient(180deg, #fffaf0 0%, #fffdf8 45%, #f5ead4 100%); color: #4a3321; }
.oc-faq-wrap { width: min(1120px, calc(100% - 28px)); margin: 0 auto; }
.oc-faq-hero { text-align: center; border-radius: 38px; padding: clamp(28px, 5vw, 58px); background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(246,235,212,.94)); border: 1px solid rgba(185,145,90,.32); box-shadow: 0 28px 72px rgba(80,52,19,.12); margin-bottom: 24px; }
.oc-faq-kicker { display: inline-flex; border-radius: 999px; padding: 9px 20px; background: rgba(185,145,90,.14); border: 1px solid rgba(185,145,90,.28); font-weight: 950; color: #8a622c; margin-bottom: 16px; }
.oc-faq-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: 1.08; color: #3a2717; font-weight: 950; letter-spacing: -.035em; }
.oc-faq-hero p { margin: 18px auto 0; max-width: 760px; color: #6f5b43; font-size: clamp(16px, 2vw, 20px); line-height: 1.85; }
.oc-faq-grid { display: grid; gap: 14px; }
.oc-faq-item { border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.82); border: 1px solid rgba(185,145,90,.24); box-shadow: 0 14px 34px rgba(80,52,19,.07); }
.oc-faq-item summary { cursor: pointer; list-style: none; padding: 20px 22px; color: #3a2717; font-size: 17px; font-weight: 950; }
.oc-faq-item summary::-webkit-details-marker { display: none; }
.oc-faq-item p { margin: 0; padding: 0 22px 22px; color: #6f5b43; line-height: 1.85; font-size: 16px; }
.oc-policy-pretty { direction: rtl !important; text-align: right !important; max-width: 980px !important; margin: 42px auto !important; padding: clamp(26px, 4vw, 46px) !important; border-radius: 34px !important; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,238,218,.94)) !important; border: 1px solid rgba(185,145,90,.28) !important; box-shadow: 0 24px 62px rgba(80,52,19,.10) !important; color: #4a3321 !important; }
.oc-policy-pretty h1, .oc-policy-pretty h2, .oc-policy-pretty h3 { color: #3a2717 !important; font-weight: 950 !important; }
.oc-policy-pretty p, .oc-policy-pretty li { color: #6f5b43 !important; line-height: 1.85 !important; }

/* =========================================================
   ORTHOPEDIC COMFORT — CLEAN FINAL CSS REPAIR
   קובץ נקי: בלי כפילויות תיקון קודמות
   ========================================================= */

/* 1) קטגוריות — מסתיר כותרת משנה קשיחה ומציג שם קטגוריה במסכת CSS */
.oc-cat-title[data-oc-title] span {
  display: none !important;
}

/* כריות שינה ותמיכה */
html:has(link[rel="canonical"][href*="%D7%9B%D7%A8%D7%99%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%9B%D7%A8%D7%99%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="כריות"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="כריות"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="pillow"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="pillow"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="sleep"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="sleep"]) .oc-cat-title[data-oc-title] {
  font-size: 0 !important;
  line-height: 1 !important;
}

html:has(link[rel="canonical"][href*="%D7%9B%D7%A8%D7%99%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%9B%D7%A8%D7%99%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="כריות"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="כריות"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="pillow"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="pillow"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="sleep"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="sleep"]) .oc-cat-title[data-oc-title]::before {
  content: "כריות שינה ותמיכה" !important;
  display: block !important;
  font-size: clamp(30px, 5vw, 62px) !important;
  line-height: 1.12 !important;
}

/* חגורות ומתקני תמיכה */
html:has(link[rel="canonical"][href*="%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="חגורות"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="חגורות"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="support"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="support"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="belt"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="belt"]) .oc-cat-title[data-oc-title] {
  font-size: 0 !important;
  line-height: 1 !important;
}

html:has(link[rel="canonical"][href*="%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="חגורות"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="חגורות"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="support"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="support"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="belt"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="belt"]) .oc-cat-title[data-oc-title]::before {
  content: "חגורות ומתקני תמיכה" !important;
  display: block !important;
  font-size: clamp(30px, 5vw, 62px) !important;
  line-height: 1.12 !important;
}

/* מוצרי תינוקות ואמהות */
html:has(link[rel="canonical"][href*="%D7%AA%D7%99%D7%A0%D7%95%D7%A7"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%AA%D7%99%D7%A0%D7%95%D7%A7"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="תינוק"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="תינוק"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="%D7%90%D7%9E%D7%94%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%90%D7%9E%D7%94%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="אמהות"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="אמהות"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="baby"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="baby"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="mother"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="mother"]) .oc-cat-title[data-oc-title] {
  font-size: 0 !important;
  line-height: 1 !important;
}

html:has(link[rel="canonical"][href*="%D7%AA%D7%99%D7%A0%D7%95%D7%A7"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%AA%D7%99%D7%A0%D7%95%D7%A7"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="תינוק"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="תינוק"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="%D7%90%D7%9E%D7%94%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%90%D7%9E%D7%94%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="אמהות"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="אמהות"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="baby"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="baby"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="mother"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="mother"]) .oc-cat-title[data-oc-title]::before {
  content: "מוצרי תינוקות ואמהות" !important;
  display: block !important;
  font-size: clamp(30px, 5vw, 62px) !important;
  line-height: 1.12 !important;
}

/* נוחות לבית ולנסיעות */
html:has(link[rel="canonical"][href*="%D7%91%D7%99%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%91%D7%99%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="בית"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="בית"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="%D7%A0%D7%A1%D7%99%D7%A2%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%A0%D7%A1%D7%99%D7%A2%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="נסיעות"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="נסיעות"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="home"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="home"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="travel"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="travel"]) .oc-cat-title[data-oc-title] {
  font-size: 0 !important;
  line-height: 1 !important;
}

html:has(link[rel="canonical"][href*="%D7%91%D7%99%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%91%D7%99%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="בית"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="בית"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="%D7%A0%D7%A1%D7%99%D7%A2%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%A0%D7%A1%D7%99%D7%A2%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="נסיעות"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="נסיעות"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="home"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="home"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="travel"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="travel"]) .oc-cat-title[data-oc-title]::before {
  content: "נוחות לבית ולנסיעות" !important;
  display: block !important;
  font-size: clamp(30px, 5vw, 62px) !important;
  line-height: 1.12 !important;
}

/* 2) הודעת ריקון קטגוריה — לא תופיע בטעות */
.oc-catalog .oc-cat-empty,
.oc-catalog [data-oc-empty],
.oc-cat-empty,
[data-oc-empty] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 3) תיקון שגיאת כתיב בעמוד הכרית */
#oc-pillow-boutique-luxury-v4 #ocp-gallery .ocp-eyebrow {
  font-size: 0 !important;
  line-height: 1 !important;
}

#oc-pillow-boutique-luxury-v4 #ocp-gallery .ocp-eyebrow::after {
  content: "תמונות מוצר ברורות" !important;
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* 4) הסתרת טקסט טכני פנימי בעמוד הכרית */
#oc-pillow-boutique-luxury-v4 #ocp-order .ocp-center > .ocp-text,
#oc-pillow-boutique-luxury-v4 #ocp-faq .ocp-faq-list .ocp-faq-item:nth-child(3) {
  display: none !important;
  visibility: hidden !important;
}

/* 5) פוטר — הסתרת דקורציה כפולה פעם אחת בלבד */
.oc-royal-footer .oc-lux-decor {
  display: none !important;
}

/* 6) מובייל — מניעת שבירת כותרות */
@media screen and (max-width: 749px) {
  .oc-cat-title[data-oc-title]::before {
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 1.15 !important;
    text-wrap: balance !important;
  }
}

/* 7) נגישות תנועה */
@media (prefers-reduced-motion: reduce) {
  .oc-cat-title[data-oc-title]::before,
  #oc-pillow-boutique-luxury-v4 #ocp-gallery .ocp-eyebrow::after {
    animation: none !important;
    transition: none !important;
  }
}
/* OC Emergency Visual Fixes */

#oc-pillow-boutique-luxury-v4 #ocp-gallery .ocp-eyebrow {
  font-size: 0 !important;
  line-height: 1 !important;
}

#oc-pillow-boutique-luxury-v4 #ocp-gallery .ocp-eyebrow::after {
  content: "תמונות מוצר ברורות" !important;
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

#oc-pillow-boutique-luxury-v4 #ocp-order .ocp-center > .ocp-text {
  display: none !important;
  visibility: hidden !important;
}

#oc-pillow-boutique-luxury-v4 #ocp-faq .ocp-faq-list .ocp-faq-item:nth-child(3) {
  display: none !important;
  visibility: hidden !important;
}

.oc-cat-empty,
[data-oc-empty] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* =========================================================
   OC FINAL CSS FIX — paste once at end of assets/base.css
   ========================================================= */


/* 1) תיקון שגיאת כתיב בעמוד הכרית */
#oc-pillow-boutique-luxury-v4 #ocp-gallery .ocp-eyebrow {
  font-size: 0 !important;
  line-height: 1 !important;
}

#oc-pillow-boutique-luxury-v4 #ocp-gallery .ocp-eyebrow::after {
  content: "תמונות מוצר ברורות" !important;
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}


/* 2) הסתרת טקסט טכני פנימי על שופיפיי/וריאציות */
#oc-pillow-boutique-luxury-v4 #ocp-order .ocp-center > .ocp-text,
#oc-pillow-boutique-luxury-v4 #ocp-faq .ocp-faq-list .ocp-faq-item:nth-child(3) {
  display: none !important;
  visibility: hidden !important;
}


/* 3) הסתרת הודעת “לא נמצאו מוצרים” אם היא קופצת בטעות */
.oc-cat-empty,
[data-oc-empty] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}


/* 4) כותרות קטגוריה — תיקון CSS חזותי לפי canonical / og:url */

/* מסתיר את כותרת המשנה הישנה */
.oc-cat-title[data-oc-title] span {
  display: none !important;
}

/* כריות */
html:has(link[rel="canonical"][href*="%D7%9B%D7%A8%D7%99%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%9B%D7%A8%D7%99%D7%95%D7%AA"]) .oc-cat-title[data-oc-title] {
  font-size: 0 !important;
  line-height: 1 !important;
}

html:has(link[rel="canonical"][href*="%D7%9B%D7%A8%D7%99%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%9B%D7%A8%D7%99%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before {
  content: "כריות שינה ותמיכה" !important;
  display: block !important;
  font-size: clamp(30px, 5vw, 62px) !important;
  line-height: 1.12 !important;
}


/* חגורות */
html:has(link[rel="canonical"][href*="%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA"]) .oc-cat-title[data-oc-title] {
  font-size: 0 !important;
  line-height: 1 !important;
}

html:has(link[rel="canonical"][href*="%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before {
  content: "חגורות ומתקני תמיכה" !important;
  display: block !important;
  font-size: clamp(30px, 5vw, 62px) !important;
  line-height: 1.12 !important;
}


/* תינוקות / אמהות */
html:has(link[rel="canonical"][href*="%D7%AA%D7%99%D7%A0%D7%95%D7%A7"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%AA%D7%99%D7%A0%D7%95%D7%A7"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="%D7%90%D7%9E%D7%94%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%90%D7%9E%D7%94%D7%95%D7%AA"]) .oc-cat-title[data-oc-title] {
  font-size: 0 !important;
  line-height: 1 !important;
}

html:has(link[rel="canonical"][href*="%D7%AA%D7%99%D7%A0%D7%95%D7%A7"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%AA%D7%99%D7%A0%D7%95%D7%A7"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="%D7%90%D7%9E%D7%94%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%90%D7%9E%D7%94%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before {
  content: "מוצרי תינוקות ואמהות" !important;
  display: block !important;
  font-size: clamp(30px, 5vw, 62px) !important;
  line-height: 1.12 !important;
}


/* בית / נסיעות */
html:has(link[rel="canonical"][href*="%D7%91%D7%99%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%91%D7%99%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(link[rel="canonical"][href*="%D7%A0%D7%A1%D7%99%D7%A2%D7%95%D7%AA"]) .oc-cat-title[data-oc-title],
html:has(meta[property="og:url"][content*="%D7%A0%D7%A1%D7%99%D7%A2%D7%95%D7%AA"]) .oc-cat-title[data-oc-title] {
  font-size: 0 !important;
  line-height: 1 !important;
}

html:has(link[rel="canonical"][href*="%D7%91%D7%99%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%91%D7%99%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(link[rel="canonical"][href*="%D7%A0%D7%A1%D7%99%D7%A2%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before,
html:has(meta[property="og:url"][content*="%D7%A0%D7%A1%D7%99%D7%A2%D7%95%D7%AA"]) .oc-cat-title[data-oc-title]::before {
  content: "נוחות לבית ולנסיעות" !important;
  display: block !important;
  font-size: clamp(30px, 5vw, 62px) !important;
  line-height: 1.12 !important;
}


/* 5) מובייל */
@media screen and (max-width: 749px) {
  .oc-cat-title[data-oc-title]::before {
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 1.15 !important;
  }
}

/* =========================================================
   OC MASTER FIX — cart icon, remove button, boutique finish
   ========================================================= */
html body header-actions [data-testid="cart-drawer-trigger"],
html body header-actions .action__cart,
html body header-actions button[aria-describedby="cart-bubble-text"],
html body header-actions a[aria-describedby="cart-bubble-text"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  color: #4a3321 !important;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.92), rgba(255,250,242,.72)) !important;
  border: 1px solid rgba(184,149,95,.38) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(120,82,28,.12), inset 0 1px 0 rgba(255,255,255,.7) !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

html body header-actions cart-icon,
html body header-actions cart-icon.header-actions__cart-icon,
html body header-actions [data-testid="cart-icon"],
html body header-actions .oc-cart-icon-fixed {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  color: #4a3321 !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  overflow: visible !important;
}

html body header-actions cart-icon > svg,
html body header-actions cart-icon .oc-cart-icon-fixed__svg,
html body header-actions cart-icon .oc-cart-icon-fixed__svg svg,
html body header-actions .oc-forced-cart-icon,
html body header-actions .oc-forced-cart-icon svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  color: #4a3321 !important;
  stroke: #4a3321 !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html body button.cart-items__remove,
html body .cart-items__quantity-controls > button.cart-items__remove,
html body button.oc-cart-remove-fixed {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 74px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-width: none !important;
  max-height: none !important;
  padding: 6px 13px !important;
  margin-inline-start: 10px !important;
  background: #fffaf2 !important;
  background-image: none !important;
  color: #4a3321 !important;
  border: 1px solid rgba(184,149,95,.65) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(120,82,28,.12), inset 0 1px 0 rgba(255,255,255,.74) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transform: none !important;
  filter: none !important;
}

html body button.cart-items__remove svg:not(.oc-keep),
html body button.cart-items__remove .svg-wrapper {
  display: none !important;
}

html body button.cart-items__remove .cart-items__remove-text,
html body button.cart-items__remove .oc-cart-remove-fixed__text,
html body button.cart-items__remove .oc-cart-remove-fixed__icon,
html body button.cart-items__remove .oc-cart-remove-fixed__icon svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  color: #4a3321 !important;
  stroke: #8b6914 !important;
  fill: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Boutique almond/gold finish */
:root {
  --oc-master-cream: #fffaf2;
  --oc-master-gold: #c79b45;
  --oc-master-brown: #4a3321;
  --oc-master-line: rgba(184,149,95,.32);
  --oc-master-shadow: 0 18px 46px rgba(95,61,28,.13);
}

html body :is(.product-card, product-card, .collection-card, .card, .product-media-container, .product__media, .media, .image, .cart-page__items, .cart-drawer__items, .cart-drawer__summary) {
  border-color: var(--oc-master-line) !important;
  box-shadow: var(--oc-master-shadow) !important;
}

html body :is(.product-card, product-card, .collection-card, .card, .product-media-container, .product__media, .media):not(.oc-no-blossom) {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

html body :is(.product-card, product-card, .collection-card, .card, .product-media-container, .product__media, .media):not(.oc-no-blossom)::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-end: 10px !important;
  top: 10px !important;
  width: clamp(34px, 5vw, 72px) !important;
  height: clamp(34px, 5vw, 72px) !important;
  pointer-events: none !important;
  z-index: 4 !important;
  opacity: .18 !important;
  background: url('oc-blossom.svg') center / contain no-repeat !important;
  filter: sepia(.25) saturate(1.15) drop-shadow(0 8px 18px rgba(120,82,28,.12)) !important;
}

html body :is(img, picture, video, .media) {
  border-radius: 20px;
}

html body :is(.button, a.button, button[type="submit"], .product-form__submit, .cart__checkout-button, .shopify-payment-button__button):not(.cart-items__remove):not(.close-button):not(.button-unstyled) {
  border-radius: 999px !important;
  border: 1px solid rgba(137,93,36,.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #efd58f 0%, #be8737 48%, #70431e 100%) !important;
  color: #fffaf2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 14px 34px rgba(119,71,30,.22) !important;
}
/* === CLEAN CART ICON FIX - ONLY ONE CART ICON === */

header-actions [data-testid="cart-drawer-trigger"],
header-actions .action__cart,
header a[href*="/cart"],
header button[aria-describedby*="cart"],
header button[aria-label*="cart" i],
header button[aria-label*="עגלה"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 999999 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Hide broken/original cart SVG to prevent double icon */
header-actions cart-icon svg,
header-actions cart-icon .svg-wrapper,
header cart-icon svg,
header cart-icon .svg-wrapper {
  display: none !important;
}

/* Draw ONE cart icon only */
header-actions [data-testid="cart-drawer-trigger"]::before,
header-actions .action__cart::before,
header a[href*="/cart"]::before,
header button[aria-describedby*="cart"]::before,
header button[aria-label*="cart" i]::before,
header button[aria-label*="עגלה"]::before {
  content: "" !important;
  display: block !important;
  width: 27px !important;
  height: 27px !important;
  background-color: #111 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.4'/%3E%3Ccircle cx='20' cy='21' r='1.4'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h8.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.4'/%3E%3Ccircle cx='20' cy='21' r='1.4'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h8.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  pointer-events: none !important;
}

/* Keep cart number bubble visible */
.cart-bubble,
[class*="cart-bubble"],
[id*="cart-bubble"] {
  z-index: 1000000 !important;
}
/* ORTHOPEDIC COMFORT — SOFT REALISTIC PEARL LUXURY HEADER */

/* שכבת ההדר הראשית */
body .header-wrapper,
body sticky-header,
body .site-header,
body [role="banner"],
body .section-header {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  z-index: 999 !important;
  min-height: 88px !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.62) 22%, transparent 46%),
    radial-gradient(circle at 78% 28%, rgba(255,244,218,.54) 0%, transparent 42%),
    radial-gradient(circle at 42% 120%, rgba(194,145,55,.20) 0%, transparent 54%),
    linear-gradient(120deg,
      #fffefa 0%,
      #fffaf2 22%,
      #f8ecd6 44%,
      #fffdf8 67%,
      #f4e4c4 100%
    ) !important;

  border-bottom: 1px solid rgba(170,118,39,.46) !important;

  box-shadow:
    0 10px 28px rgba(56,35,12,.13),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(145,96,28,.22) !important;
}

/* מבטל רקעים פנימיים שמכסים */
body .header-wrapper > *,
body sticky-header > *,
body .site-header > *,
body [role="banner"] > *,
body .section-header > * {
  position: relative !important;
  z-index: 20 !important;
  background: transparent !important;
}

/* מסגרת יוקרה רכה — לא תבניתית */
body .header-wrapper::before,
body sticky-header::before,
body .site-header::before,
body [role="banner"]::before,
body .section-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 9px 14px 10px 14px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 26px !important;

  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.62) 18%, transparent 38%),
    radial-gradient(circle at 12% 28%, rgba(255,255,255,.72), transparent 34%),
    radial-gradient(circle at 86% 20%, rgba(255,239,205,.36), transparent 42%) !important;

  border: 1px solid rgba(181,132,47,.38) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(155,102,31,.14),
    0 0 22px rgba(255,255,255,.42) !important;
}

/* פרחים ופנינים — אסימטרי, רך, מאחורי התוכן */
body .header-wrapper::after,
body sticky-header::after,
body .site-header::after,
body [role="banner"]::after,
body .section-header::after {
  content: "" !important;
  position: absolute !important;
  inset: -34px -90px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: .74 !important;

  background-image:
    radial-gradient(circle at 7% 42%, rgba(255,255,255,1) 0 5px, rgba(248,239,221,.92) 6px, rgba(184,143,69,.36) 9px, transparent 17px),
    radial-gradient(circle at 15% 22%, rgba(255,255,255,.96) 0 4px, rgba(248,239,221,.86) 5px, rgba(184,143,69,.28) 8px, transparent 15px),
    radial-gradient(circle at 87% 62%, rgba(255,255,255,1) 0 6px, rgba(248,239,221,.9) 7px, rgba(184,143,69,.36) 10px, transparent 18px),
    radial-gradient(circle at 93% 31%, rgba(255,255,255,.96) 0 4px, rgba(248,239,221,.86) 5px, rgba(184,143,69,.28) 8px, transparent 15px),

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1180' height='190' viewBox='0 0 1180 190'%3E%3Cdefs%3E%3CradialGradient id='p' cx='50%25' cy='35%25' r='70%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='62%25' stop-color='%23fff8ee'/%3E%3Cstop offset='100%25' stop-color='%23ead39d'/%3E%3C/radialGradient%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff1cc'/%3E%3Cstop offset='.5' stop-color='%23b9852f'/%3E%3Cstop offset='1' stop-color='%23f7dfaa'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='1.25' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M35 128 C118 78 215 68 312 100 C418 136 515 104 624 70 C720 40 810 42 900 76 C1000 114 1086 112 1144 72'/%3E%3Cpath d='M98 116 C148 94 202 91 256 101'/%3E%3Cpath d='M842 76 C902 62 968 68 1028 92'/%3E%3C/g%3E%3Cg opacity='.88'%3E%3Cg transform='translate(156 92) scale(1.06)'%3E%3Cellipse cx='0' cy='-16' rx='9' ry='20' fill='url(%23p)' stroke='%23d4b05d' stroke-width='.9'/%3E%3Cellipse cx='16' cy='-5' rx='9' ry='20' fill='%23fffaf2' stroke='%23d4b05d' stroke-width='.9' transform='rotate(61)'/%3E%3Cellipse cx='9' cy='15' rx='9' ry='20' fill='%23fffdf8' stroke='%23d4b05d' stroke-width='.9' transform='rotate(135)'/%3E%3Cellipse cx='-9' cy='15' rx='9' ry='20' fill='%23fff8ef' stroke='%23d4b05d' stroke-width='.9' transform='rotate(225)'/%3E%3Cellipse cx='-16' cy='-5' rx='9' ry='20' fill='%23fffaf3' stroke='%23d4b05d' stroke-width='.9' transform='rotate(299)'/%3E%3Ccircle cx='0' cy='0' r='3.6' fill='%23a96f77' opacity='.54'/%3E%3C/g%3E%3Cg transform='translate(958 82) scale(.96)'%3E%3Cellipse cx='0' cy='-16' rx='9' ry='20' fill='url(%23p)' stroke='%23d4b05d' stroke-width='.9'/%3E%3Cellipse cx='16' cy='-5' rx='9' ry='20' fill='%23fffaf2' stroke='%23d4b05d' stroke-width='.9' transform='rotate(61)'/%3E%3Cellipse cx='9' cy='15' rx='9' ry='20' fill='%23fffdf8' stroke='%23d4b05d' stroke-width='.9' transform='rotate(135)'/%3E%3Cellipse cx='-9' cy='15' rx='9' ry='20' fill='%23fff8ef' stroke='%23d4b05d' stroke-width='.9' transform='rotate(225)'/%3E%3Cellipse cx='-16' cy='-5' rx='9' ry='20' fill='%23fffaf3' stroke='%23d4b05d' stroke-width='.9' transform='rotate(299)'/%3E%3Ccircle cx='0' cy='0' r='3.6' fill='%23a96f77' opacity='.54'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x !important;
  background-size: auto, auto, auto, auto, 1180px 190px !important;
  background-position: 7% 42%, 15% 22%, 87% 62%, 93% 31%, 18px 50% !important;

  animation: ocSoftPearlMove 28s ease-in-out infinite alternate !important;
}

/* כל התוכן מעל הכול */
body .header-wrapper *,
body sticky-header *,
body .site-header *,
body [role="banner"] *,
body .section-header * {
  position: relative !important;
  z-index: 50 !important;
}

/* לוגו */
body .header-wrapper .header__heading-link,
body sticky-header .header__heading-link,
body .site-header a,
body [role="banner"] .header__heading-link {
  color: #21140d !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 12px rgba(255,255,255,.88) !important;
}

/* תפריט — יותר אלגנטי ופחות סוכרייה */
body .header-wrapper nav a,
body sticky-header nav a,
body .site-header nav a,
body [role="banner"] nav a,
body .header__menu-item,
body .list-menu__item {
  color: #24140b !important;
  font-weight: 750 !important;
  text-decoration: none !important;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,.82) 0%,
      rgba(255,248,232,.74) 36%,
      rgba(218,171,83,.46) 68%,
      rgba(255,255,255,.82) 100%
    ) !important;

  border: 1px solid rgba(161,105,29,.38) !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  margin: 3px 4px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 4px 12px rgba(64,39,14,.10) !important;
}

/* אייקונים */
body .header-wrapper .header__icon,
body sticky-header .header__icon,
body .site-header .site-header__icon,
body [role="banner"] .header__icon,
body .header-wrapper button,
body sticky-header button {
  color: #21140d !important;
  border-radius: 999px !important;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,.82),
      rgba(255,246,225,.66),
      rgba(215,166,75,.30)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 3px 10px rgba(64,39,14,.10),
    0 0 0 1px rgba(166,111,33,.22) !important;
}

body .header-wrapper svg,
body sticky-header svg,
body .site-header svg,
body [role="banner"] svg {
  color: #21140d !important;
  stroke: currentColor !important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,1))
    drop-shadow(0 0 4px rgba(255,255,255,.78)) !important;
}

/* שלא יהפוך כל דבר לכפתור מוגזם */
body .header-wrapper .header__heading-link,
body sticky-header .header__heading-link,
body [role="banner"] .header__heading-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: initial !important;
}

/* מובייל */
@media screen and (max-width: 989px) {
  body .header-wrapper,
  body sticky-header,
  body .site-header,
  body [role="banner"],
  body .section-header {
    min-height: 76px !important;
  }

  body .header-wrapper::after,
  body sticky-header::after,
  body .site-header::after,
  body [role="banner"]::after,
  body .section-header::after {
    opacity: .56 !important;
    background-size: auto, auto, auto, auto, 900px 160px !important;
  }
}

@keyframes ocSoftPearlMove {
  from {
    background-position: 7% 42%, 15% 22%, 87% 62%, 93% 31%, 18px 50%;
  }
  to {
    background-position: 8% 38%, 13% 25%, 85% 66%, 95% 28%, 86px 48%;
  }
}
/* =========================================================
   ORTHOPEDIC COMFORT — FULL SITE LUXURY PEARL GOLD SYSTEM
   Applies boutique pearl / gold / soft almond luxury style
   to pages, images, cards, buttons, catalog, products
   ========================================================= */

:root {
  --oc-pearl: #fffefa;
  --oc-pearl-soft: #fff8ec;
  --oc-cream: #f8ecd6;
  --oc-champagne: #e9c985;
  --oc-gold: #b9852f;
  --oc-honey: #d7a64f;
  --oc-brown: #24140b;
  --oc-soft-pink: #a96f77;
}

/* רקע כללי לכל האתר */
body {
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.95), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(255,244,218,.48), transparent 42%),
    linear-gradient(135deg, #fffefa 0%, #fff9ef 36%, #f7ead1 64%, #fffdf8 100%) !important;
  color: var(--oc-brown) !important;
}

/* שכבת יוקרה כללית לכל התוכן */
main,
#MainContent,
.template-index,
.template-collection,
.template-product,
.template-page,
.shopify-section {
  position: relative !important;
  isolation: isolate !important;
}

/* רקע פנינתי עדין מאחורי אזורי האתר */
#MainContent::before,
main::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .42 !important;

  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.95) 0 6px, rgba(248,239,221,.9) 7px, rgba(184,143,69,.25) 11px, transparent 22px),
    radial-gradient(circle at 92% 32%, rgba(255,255,255,.95) 0 7px, rgba(248,239,221,.88) 8px, rgba(184,143,69,.24) 12px, transparent 24px),
    radial-gradient(circle at 18% 78%, rgba(255,255,255,.86), transparent 32%),
    radial-gradient(circle at 82% 72%, rgba(255,238,205,.36), transparent 36%);
}

/* כל כרטיסי המוצרים / קטלוג / קולקציות */
.card,
.product-card-wrapper,
.collection-card-wrapper,
.contains-card,
.grid__item .card,
.product-grid .grid__item,
.collection-list .card,
.article-card,
.page-width > .grid__item {
  position: relative !important;
  border-radius: 26px !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.9), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,248,232,.58), rgba(232,196,126,.22)) !important;

  border: 1px solid rgba(181,132,47,.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 10px 28px rgba(64,39,14,.10) !important;
}

/* רקע פנינה וזהב מאחורי תמונות */
.media,
.card__media,
.product__media,
.product-media-container,
.collection-card__image,
.image-with-text__media,
.banner__media,
.slideshow__media,
.multicolumn-card__image-wrapper,
.video-section__media,
.global-media-settings {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,1), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(255,235,196,.52), transparent 42%),
    linear-gradient(135deg, #fffefa 0%, #fff7e8 38%, #e9c985 72%, #fffdf8 100%) !important;

  border: 1px solid rgba(181,132,47,.34) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(145,96,28,.14),
    0 12px 30px rgba(64,39,14,.12) !important;
}

/* מסגרת יוקרה מעל אזורי תמונה */
.media::before,
.card__media::before,
.product__media::before,
.product-media-container::before,
.image-with-text__media::before,
.banner__media::before,
.slideshow__media::before,
.multicolumn-card__image-wrapper::before,
.global-media-settings::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border-radius: 22px !important;

  border: 1px solid rgba(185,133,47,.34) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.48),
    inset 0 0 22px rgba(255,255,255,.36) !important;
}

/* פרחים ופנינים עדינים בתוך רקע התמונות */
.media::after,
.card__media::after,
.product__media::after,
.product-media-container::after,
.image-with-text__media::after,
.banner__media::after,
.slideshow__media::after,
.multicolumn-card__image-wrapper::after,
.global-media-settings::after {
  content: "" !important;
  position: absolute !important;
  inset: -30px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: .42 !important;

  background-image:
    radial-gradient(circle at 12% 24%, #fff 0 5px, #f8ecd2 6px, rgba(185,133,47,.28) 9px, transparent 17px),
    radial-gradient(circle at 88% 72%, #fff 0 6px, #f8ecd2 7px, rgba(185,133,47,.26) 10px, transparent 18px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='150' viewBox='0 0 620 150'%3E%3Cg fill='none' stroke='%23b9852f' stroke-width='1.35' opacity='.48'%3E%3Cpath d='M20 110 C110 42 210 56 300 92 C405 132 500 58 600 92'/%3E%3C/g%3E%3Cg opacity='.58'%3E%3Cg transform='translate(130 76) scale(.85)'%3E%3Cellipse cx='0' cy='-16' rx='9' ry='20' fill='%23fffaf0' stroke='%23d6ad55'/%3E%3Cellipse cx='16' cy='-5' rx='9' ry='20' fill='%23fff' stroke='%23d6ad55' transform='rotate(60)'/%3E%3Cellipse cx='9' cy='15' rx='9' ry='20' fill='%23fff7ec' stroke='%23d6ad55' transform='rotate(135)'/%3E%3Cellipse cx='-9' cy='15' rx='9' ry='20' fill='%23fffdf8' stroke='%23d6ad55' transform='rotate(225)'/%3E%3Cellipse cx='-16' cy='-5' rx='9' ry='20' fill='%23fff9ef' stroke='%23d6ad55' transform='rotate(300)'/%3E%3Ccircle cx='0' cy='0' r='3.6' fill='%23a96f77'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: no-repeat, no-repeat, repeat-x !important;
  background-size: auto, auto, 620px 150px !important;
  background-position: 12% 24%, 88% 72%, 0 50% !important;
}

/* התמונות עצמן — רכות, יוקרתיות, בלי להרוס מוצר */
img,
.card__media img,
.product__media img,
.media img {
  border-radius: inherit !important;
  filter:
    contrast(1.03)
    saturate(1.02)
    brightness(1.025) !important;
}

/* כפתורים בכל האתר */
.button,
button,
input[type="submit"],
.shopify-payment-button__button,
.product-form__submit,
.cart__checkout-button,
.quick-add__submit,
.customer button,
.newsletter-form__button,
.contact__button button,
.quantity__button,
.facets__button,
.pagination__item {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  color: #24140b !important;
  font-weight: 800 !important;
  letter-spacing: .018em !important;

  border-radius: 999px !important;
  border: 1px solid rgba(145,91,22,.52) !important;

  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,1) 0%, rgba(255,255,255,.72) 26%, transparent 52%),
    linear-gradient(135deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,249,235,.96) 26%,
      rgba(232,196,126,.72) 52%,
      rgba(203,145,52,.64) 72%,
      rgba(255,255,255,.96) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(145,91,22,.22),
    0 7px 18px rgba(64,39,14,.14),
    0 0 0 1px rgba(255,255,255,.42) !important;

  text-shadow: 0 1px 0 rgba(255,255,255,.9) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease !important;
}

/* ברק פנינה בכפתורים */
.button::before,
button::before,
input[type="submit"]::before,
.shopify-payment-button__button::before,
.product-form__submit::before,
.cart__checkout-button::before,
.quick-add__submit::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;

  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.68) 24%, transparent 46%, rgba(255,226,234,.18) 78%, transparent 100%) !important;

  opacity: .78 !important;
}

/* hover לכל כפתור */
.button:hover,
button:hover,
input[type="submit"]:hover,
.shopify-payment-button__button:hover,
.product-form__submit:hover,
.cart__checkout-button:hover,
.quick-add__submit:hover,
.customer button:hover,
.newsletter-form__button:hover,
.contact__button button:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(123,76,18,.68) !important;

  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,1) 0%, rgba(255,255,255,.84) 28%, transparent 54%),
    linear-gradient(135deg,
      rgba(255,255,255,1) 0%,
      rgba(255,247,229,.98) 26%,
      rgba(232,190,108,.82) 52%,
      rgba(185,119,38,.72) 72%,
      rgba(255,255,255,.98) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 24px rgba(64,39,14,.18),
    0 0 18px rgba(255,255,255,.72) !important;
}

/* טקסטים וכותרות — גוון יוקרתי */
h1,
h2,
h3,
h4,
.title,
.collection-hero__title,
.product__title,
.card__heading,
.price,
.product__info-container {
  color: #24140b !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.86),
    0 0 10px rgba(255,255,255,.46) !important;
}

/* מחיר / תגיות / badges */
.badge,
.price__badge-sale,
.card__badge,
.product__tax,
.caption-with-letter-spacing {
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,243,218,.72), rgba(218,171,83,.38)) !important;
  color: #24140b !important;
  border: 1px solid rgba(161,105,29,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* שדות טופס */
input,
textarea,
select,
.field__input,
.select__select {
  border-radius: 18px !important;
  border: 1px solid rgba(161,105,29,.30) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,249,236,.78)) !important;
  color: #24140b !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 4px 12px rgba(64,39,14,.06) !important;
}

/* אזורי באנר / סקשנים */
.banner,
.image-with-text,
.rich-text,
.multicolumn,
.collage,
.featured-collection,
.collection,
.product,
.page-width {
  position: relative !important;
}

/* מובייל — פחות עומס */
@media screen and (max-width: 749px) {
  .media::after,
  .card__media::after,
  .product__media::after,
  .product-media-container::after,
  .image-with-text__media::after,
  .banner__media::after {
    opacity: .26 !important;
  }

  .card,
  .product-card-wrapper,
  .collection-card-wrapper {
    border-radius: 20px !important;
  }

  .button,
  button,
  input[type="submit"],
  .product-form__submit,
  .quick-add__submit {
    border-radius: 999px !important;
  }
}

/* ביטול תנועה למי שמוגדר אצלו */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}