/* Generated by apps/storefront/scripts/preset-css.ts from 53 file(s) in public/themes/nahleh/css, in cascade order. Do not edit: change the sources and run `pnpm --filter @raizn/storefront run css:bundles`. */
/* ---- base.css ---- */
product-component,
collection-component {
  display: block;
}

:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

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

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

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

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

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

.placeholder-svg {
  height: 100%;
  width: 100%;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon .svg-wrapper {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

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

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > .svg-wrapper {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message .svg-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message .svg-wrapper {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button .svg-wrapper {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

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

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

/* ---- nahleh-base.css ---- */
/* Nahleh design system — brand tokens + shape/type overrides for Dawn.
   Load order: base.css, then this file, so equal-specificity :root wins here. */

:root {
  /* Brand — Amber (commerce) */
  --nh-amber: #e3a11c;
  --nh-amber-gold: #ebb134;
  --nh-amber-deep: #b07d14;
  --nh-logo-top: #efb942;
  --nh-logo-bottom: #d4870f;

  /* Medical — Sage (trust) */
  --nh-sage: #4e7a60;
  --nh-sage-tint: #eaf0ea;
  --nh-sage-text: #9fbba9;

  /* Neutrals */
  --nh-charcoal: #2b2722;
  --nh-ink: #3a352d;
  --nh-body: #5a5347;
  --nh-muted: #9a9082;
  --nh-cream: #fbf8f3;
  --nh-cream-2: #fbf3e2;
  --nh-white: #ffffff;
  --nh-border: #efe6d6;
  --nh-border-2: #e7dece;

  /* Supporting tints */
  --nh-sand: #fbf1dc;
  --nh-blush: #f3e9e4;
  --nh-cool-grey: #edeef2;

  /* Alert & sale */
  --nh-coral: #c8543b;
  --nh-coral-soft: #fbe9e4;
  --nh-whatsapp: #25d366;

  /* Radii */
  --nh-radius-sm: 0.8rem;
  --nh-radius-md: 1.3rem;
  --nh-radius-lg: 1.6rem;
  --nh-radius-xl: 2.2rem;
  --nh-radius-pill: 3rem;

  /* Shadows */
  --nh-shadow-soft: 0 0.6rem 1.8rem rgba(43, 39, 34, 0.08);
  --nh-shadow-card: 0 1.2rem 2.8rem rgba(43, 39, 34, 0.1);
  --nh-shadow-amber: 0 0.8rem 2.2rem rgba(227, 161, 28, 0.34);
  --nh-shadow-amber-hover: 0 1rem 2.8rem rgba(227, 161, 28, 0.45);

  /* ---- Override Dawn's own tokens (non-color, non-scheme) ---- */
  --font-heading-family: 'Tajawal', 'Assistant', sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 800;
  --font-body-family: 'Tajawal', 'Assistant', sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 700;

  --page-width: 120rem;

  --media-radius: 22px;
  --product-card-corner-radius: 1.8rem;
  --collection-card-corner-radius: 1.8rem;
  --blog-card-corner-radius: 1.8rem;
  --badge-corner-radius: 3rem;
  --popup-corner-radius: 20px;
  --buttons-radius: 15px;
  --buttons-border-width: 0px;
  --buttons-border-opacity: 0;
  --inputs-radius: 13px;
  --variant-pills-radius: 30px;

  --product-card-shadow-opacity: 0;
  --collection-card-shadow-opacity: 0;
  --blog-card-shadow-opacity: 0;
}

/* Rating stars + sale price accents (shared by product cards and the buy box) */
.rating-star {
  --color-rating-star: var(--nh-amber-gold);
}

.price--on-sale .price-item--regular {
  color: var(--nh-muted) !important;
}

.price-item--sale {
  font-weight: 800;
}

/* Arabic-tuned type: Dawn's positive heading letter-spacing reads poorly in Arabic script */
h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  letter-spacing: -0.02em;
}

body {
  letter-spacing: normal;
}

/* ============ Nahleh component classes ============ */

.nahleh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border-radius: var(--nh-radius-pill);
  line-height: 1;
}

.nahleh-eyebrow--sage {
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
}

.nahleh-eyebrow--sand {
  background: var(--nh-sand);
  color: var(--nh-amber-deep);
}

.nahleh-eyebrow--coral {
  background: var(--nh-coral-soft);
  color: var(--nh-coral);
}

.nahleh-badge-sale {
  position: absolute;
  top: 1.6rem;
  inset-inline-start: 1.6rem;
  background: var(--nh-coral);
  color: var(--nh-white);
  font-size: 1.3rem;
  font-weight: 800;
  padding: 0.7rem 1.3rem;
  border-radius: var(--nh-radius-pill);
  box-shadow: 0 0.4rem 1.4rem rgba(200, 84, 59, 0.35);
  z-index: 2;
  white-space: nowrap;
}

.nahleh-save-chip {
  background: var(--nh-coral-soft);
  color: var(--nh-coral);
  font-size: 1.25rem;
  font-weight: 800;
  padding: 0.4rem 0.9rem;
  border-radius: 0.7rem;
  display: inline-block;
}

.nahleh-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border-radius: var(--nh-radius-pill);
  margin-bottom: 1.4rem;
}

.nahleh-trust-chip svg {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}

.nahleh-benefits {
  list-style: none;
  margin: 0 0 2.6rem;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-lg);
}

.nahleh-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--nh-ink);
}

.nahleh-benefits li .nahleh-check {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

.nahleh-btn {
  width: 100%;
  height: 5.8rem;
  border: none;
  border-radius: var(--nh-radius-md);
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition:
    transform 0.12s,
    box-shadow 0.2s,
    background-color 0.2s;
}

.nahleh-btn--amber {
  background: var(--nh-amber);
  color: var(--nh-white);
  box-shadow: var(--nh-shadow-amber);
}

.nahleh-btn--amber:not([disabled]):hover {
  box-shadow: var(--nh-shadow-amber-hover);
  transform: translateY(-1px);
}

.nahleh-btn--amber:not([disabled]):active {
  transform: translateY(0);
}

.nahleh-btn--charcoal {
  background: var(--nh-charcoal);
  color: var(--nh-cream-2);
}

.nahleh-btn--charcoal:not([disabled]):hover {
  background: #1c1915;
}

.nahleh-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.2rem;
}

.nahleh-trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  padding: 1.4rem 0.8rem;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-md);
}

.nahleh-trust-strip__item span {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--nh-ink);
}

.nahleh-trust-strip__item svg {
  color: var(--nh-sage);
  fill: currentColor;
  width: 2.2rem;
  height: 2.2rem;
}

.nahleh-section-heading {
  text-align: center;
  margin: 6.4rem 0 3.6rem;
}

.nahleh-section-heading h2 {
  font-size: 2.8rem;
  font-weight: 900;
  margin: 1.6rem 0 0;
  letter-spacing: -0.02em;
}

/* ============ Product page ============ */

.product__title h1,
.product__title .h1 {
  font-weight: 900;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.product__media-wrapper .product__media-item {
  background: linear-gradient(150deg, var(--nh-sand) 0%, var(--nh-blush) 55%, var(--nh-sage-tint) 100%);
  border-radius: var(--media-radius);
}

.product-form__submit.button {
  min-height: 5.8rem;
  font-size: 1.7rem;
  font-weight: 800;
  box-shadow: var(--nh-shadow-amber);
  transition:
    transform 0.12s,
    box-shadow 0.2s;
}

.product-form__submit.button:not([disabled]):hover {
  box-shadow: var(--nh-shadow-amber-hover);
  transform: translateY(-1px);
}

.product-form__submit.button:not([disabled]):active {
  transform: translateY(0);
}

.product__description {
  margin: 0 0 2.6rem;
  padding: 2rem 1.8rem;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-lg);
  color: var(--nh-body);
}

.product__description > *:first-child {
  margin-top: 0;
}

.product__description > *:last-child {
  margin-bottom: 0;
}

.product__description p {
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--nh-ink);
  margin: 0 0 1.3rem;
}

.product__description ul,
.product__description ol {
  margin: 0 0 1.3rem;
  padding-inline-start: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.product__description li {
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--nh-ink);
}

.product__description h2,
.product__description h3,
.product__description h4 {
  font-weight: 800;
  color: var(--nh-ink);
  margin: 0 0 1rem;
}

.product__description strong,
.product__description b {
  color: var(--nh-charcoal);
  font-weight: 800;
}

.product__description a {
  color: var(--nh-amber-deep);
  text-decoration-color: var(--nh-amber);
}

.product__description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nh-radius-md);
}

.product__description svg {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  flex-shrink: 0;
}

.product__accordion.accordion summary {
  font-weight: 700;
}

.product__accordion .icon-caret {
  color: var(--nh-amber);
}

.icon-with-text {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.icon-with-text__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  padding: 1.4rem 0.8rem;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-md);
}

.icon-with-text .icon-accordion,
.icon-with-text svg {
  color: var(--nh-sage);
}

.rating-wrapper .rating-count,
.rating-wrapper .rating-text {
  color: var(--nh-muted);
}

.nahleh-star-rating {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.nahleh-star-rating__value {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--nh-ink);
}

.nahleh-star-rating__count {
  color: var(--nh-muted);
  font-size: 1.35rem;
  font-weight: 500;
}

.nahleh-star-rating__availability {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--nh-sage);
  font-size: 1.3rem;
  font-weight: 700;
}

.nahleh-star-rating__availability svg {
  width: 1.4rem;
  height: 1.4rem;
}

.product-form__quantity .quantity {
  border-radius: var(--nh-radius-md);
  min-height: 5.2rem;
  background: var(--nh-white);
}

.product-form__quantity .quantity:after {
  border-radius: var(--nh-radius-md);
  box-shadow: inset 0 0 0 1px var(--nh-border-2);
}

.product-form__quantity .quantity:before {
  border-radius: var(--nh-radius-md);
  box-shadow: none;
}

.product-form__quantity .quantity__button:hover {
  color: var(--nh-amber);
}

.product-form__quantity .quantity__input {
  font-weight: 700;
  opacity: 1;
  color: var(--nh-ink);
}

.quantity__label {
  font-weight: 700;
  color: var(--nh-ink);
  margin-bottom: 0.8rem;
  display: inline-block;
}

/* The "forward" chevron (Icon.arrow) is drawn pointing left, since the whole site was RTL-only
   when it was authored. Flip it to point right by default (Dawn/LTR convention); nahleh-rtl.css
   flips it back for html[dir="rtl"] so Arabic is pixel-identical to before English existed. */
.icon-arrow-forward {
  transform: scaleX(-1);
}

.product-form__input--pill input[type='radio']:checked + label {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
}

@media screen and (max-width: 749px) {
  .nahleh-section-heading {
    margin: 4.4rem 0 2.8rem;
  }

  .nahleh-section-heading h2 {
    font-size: 2.2rem;
  }
}

/* Breadcrumbs (snippets/breadcrumbs.liquid) — used on product and collection pages */
.nh-breadcrumbs {
  margin: 0 0 1.6rem;
}

.nh-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: right;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nh-muted);
}

.nh-breadcrumbs__list a {
  color: var(--nh-muted);
  text-decoration: none;
}

.nh-breadcrumbs__list a:hover {
  color: var(--nh-ink);
}

.nh-breadcrumbs__list [aria-current='page'] {
  color: var(--nh-ink);
  font-weight: 600;
}

/* iOS horizontal-scroll fix. Dawn's closed header search modal is only faded
   out (opacity: 0) and its collapsed layout leaves the search input hanging
   ~50px past the screen edge — Safari on iOS counts that as scrollable
   overflow, so pages wiggle left-right. Drop the closed modal from layout
   entirely; the open state (details[open]) is untouched and renders
   full-width as before. */
details:not([open]) > .search-modal {
  display: none;
}

/* Safety net: never allow sideways page scroll. overflow-x: clip (unlike
   hidden) doesn't create a scroll container, so position: sticky — e.g. the
   sticky header — keeps working. */
html,
body {
  overflow-x: clip;
}

/* iOS auto-zoom fix. Safari on iPhone zooms the whole page in when a focused
   input's font-size is under 16px — and stays zoomed after the field is left,
   which makes the entire layout look about double size ("half a product card
   fills the screen"). Dawn's inputs are 1.3rem (~13px), and the search input
   is even autofocused when the search icon is tapped. Force a 16px floor on
   text-entry controls on touch-size screens so the zoom never triggers.
   max() keeps it correct even if the theme's body-scale setting changes. */
@media screen and (max-width: 989px) {
  .field__input,
  .select__select,
  .customer .field input,
  .customer select,
  .quantity__input,
  input[type='search'],
  textarea {
    font-size: max(16px, 1.6rem);
  }
}

/* ---- nahleh-rtl.css ---- */
/* Nahleh RTL layer — Dawn is authored with physical (left/right) properties
   throughout. This file mirrors the components used on the header, footer,
   and product page for html[dir="rtl"]. New Nahleh markup is authored
   logical-property-first (margin-inline-*, inset-inline-*) and needs no
   entry here.

   Scope note: drawer/menu-drawer slide-in directions are pure-CSS state
   (no JS sets inline transforms), so they are safely mirrored below.
   Deeper interaction nuances (e.g. horizontal slider scroll-snap math in
   component-slider.css, which depends on browser-specific scrollLeft sign
   conventions in RTL) are left as Dawn ships them and should get a manual
   QA pass once the Collection page phase brings sliders into daily use. */

html[dir='rtl'] {
  /* ============ Menu drawer ============ */
}

html[dir='rtl'] .menu-drawer {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

html[dir='rtl'] .menu-drawer summary.menu-drawer__menu-item {
  padding-right: 3rem;
  padding-left: 5.2rem;
}

html[dir='rtl'] .menu-drawer__menu-item > .svg-wrapper {
  right: auto;
  left: 3rem;
}

html[dir='rtl'] .js .menu-drawer__submenu {
  left: auto;
  right: 0;
  transform: translateX(-100%);
}

html[dir='rtl'] .menu-drawer__close-button {
  text-align: right;
  padding: 1.2rem 3rem 1.2rem 2.6rem;
}

html[dir='rtl'] .menu-drawer__close-button .svg-wrapper {
  margin-right: 0;
  margin-left: 1rem;
}

html[dir='rtl'] .menu-drawer__account account-icon > .svg-wrapper {
  margin-right: 0;
  margin-left: 1rem;
}

html[dir='rtl'] .menu-drawer__account shop-user-avatar {
  margin-right: -0.45rem;
  margin-left: 0.55rem;
}

html[dir='rtl'] .menu-drawer .list-social {
  margin-left: 0;
  margin-right: -1.25rem;
}

/* ============ Mega menu / list menu dropdowns ============ */

html[dir='rtl'] .mega-menu__content {
  left: auto;
  right: 0;
}

html[dir='rtl'] .header__submenu.list-menu--disclosure {
  border-left: 0.1rem solid rgba(var(--color-foreground), 0.08);
  border-right: 0;
}

html[dir='rtl'] .list-menu--right {
  right: auto;
  left: 0;
}

/* ============ Header search ============ */

html[dir='rtl'] .search__input.field__input {
  padding-right: 1.6rem;
  padding-left: 9.8rem;
}

html[dir='rtl'] .search__button {
  right: auto;
  left: var(--inputs-border-width);
}

html[dir='rtl'] .reset__button {
  right: auto;
  left: calc(var(--inputs-border-width) + 4.4rem);
}

html[dir='rtl'] .reset__button::after {
  right: auto;
  left: 0;
  border-right: 0;
  border-left: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

html[dir='rtl'] .predictive-search {
  left: auto;
  right: -0.1rem;
}

html[dir='rtl'] .predictive-search--header {
  right: auto;
  left: 0;
}

html[dir='rtl'] .predictive-search__item {
  text-align: right;
}

html[dir='rtl'] .predictive-search__item--term .icon-arrow {
  margin-left: 0;
  margin-right: calc(var(--font-heading-scale) * 2rem);
  transform: scaleX(-1);
}

/* ============ Cart notification ============ */

html[dir='rtl'] .cart-notification-wrapper {
  right: auto;
  left: 0;
}

html[dir='rtl'] .cart-count-bubble {
  left: auto;
  right: 2.2rem;
}

html[dir='rtl'] .cart-notification__heading svg,
html[dir='rtl'] .cart-notification-product svg {
  margin-right: 0;
  margin-left: 1rem;
}

/* ============ Cart drawer ============ */
/* Flexbox `justify-content: flex-end` on .drawer already flips sides with
   dir="rtl", moving the panel to the left edge — only the off-canvas
   transform + edge-touching border/close-button need re-mirroring. */

html[dir='rtl'] .drawer__inner {
  transform: translateX(-100%);
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.2);
  border-left: 0;
}

html[dir='rtl'] .drawer.active .drawer__inner {
  transform: translateX(0);
}

html[dir='rtl'] .drawer__close {
  right: auto;
  left: -10px;
}

html[dir='rtl'] .cart-drawer__warnings .drawer__close {
  left: 5px;
  right: auto;
}

html[dir='rtl'] .cart-drawer .cart-item__nested-line .cart-item__image {
  float: left;
}

html[dir='rtl'] .cart-drawer .cart-items thead th:nth-child(2) {
  padding-left: 0;
  padding-right: 0;
}

html[dir='rtl'] .cart-drawer .cart-item .loading__spinner {
  right: auto;
  left: 5px;
}

html[dir='rtl'] .cart-drawer .cart-item > td + td {
  padding-left: 0;
  padding-right: 1rem;
}

html[dir='rtl'] .cart-drawer .tax-note {
  text-align: right;
  margin: 1.2rem auto 2rem 0;
}

/* ============ Pagination ============ */

html[dir='rtl'] .pagination__list > li:not(:last-child) {
  margin-right: 0;
  margin-left: 1rem;
}

html[dir='rtl'] .pagination__item--next .icon {
  margin-left: 0;
  margin-right: -0.2rem;
  transform: rotate(-90deg);
}

html[dir='rtl'] .pagination__item--next:hover .icon {
  transform: rotate(-90deg) scale(1.07);
}

html[dir='rtl'] .pagination__item--prev .icon {
  margin-right: 0;
  margin-left: -0.2rem;
  transform: rotate(90deg);
}

html[dir='rtl'] .pagination__item--prev:hover .icon {
  transform: rotate(90deg) scale(1.07);
}

/* ============ Generic directional icon mirroring ============ */

html[dir='rtl'] .disclosure__button .icon-caret,
html[dir='rtl'] .facets__disclosure-vertical .icon-caret {
  transform: scaleX(-1);
}

/* Cancels the base LTR flip in nahleh-base.css, restoring the icon's raw (left-pointing) SVG path
   — the Arabic site's original, unflipped appearance. */
html[dir='rtl'] .icon-arrow-forward {
  transform: none;
}

html[dir='rtl'] .breadcrumbs__link + .breadcrumbs__link::before {
  transform: scaleX(-1);
}

/* ============ Product page ============ */

html[dir='rtl'] .product__media-wrapper .product__modal-opener--image {
  right: auto;
  left: 1.6rem;
}

html[dir='rtl'] .slider-buttons .slider-button--next .icon,
html[dir='rtl'] .slider-buttons .slider-button--prev .icon {
  transform: scaleX(-1);
}

/* ---- nahleh-animations.css ---- */
/* Nahleh motion — ported from the design's keyframe set. */

@keyframes nh-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes nh-slidein {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nh-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes nh-zoom {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes nh-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}

@keyframes nh-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

html[dir='rtl'] .nahleh-animate-marquee {
  animation-direction: reverse;
}

.nahleh-animate-pop {
  animation: nh-pop 0.4s ease;
}

.nahleh-animate-slidein {
  animation: nh-slidein 0.4s ease both;
}

.nahleh-animate-fade {
  animation: nh-fade 0.3s ease both;
}

.nahleh-animate-zoom {
  animation: nh-zoom 0.25s ease both;
}

.nahleh-animate-glow {
  animation: nh-glow 2.6s ease-in-out infinite;
}

.nahleh-animate-marquee {
  animation: nh-marquee 22s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .nahleh-animate-pop,
  .nahleh-animate-slidein,
  .nahleh-animate-fade,
  .nahleh-animate-zoom,
  .nahleh-animate-glow,
  .nahleh-animate-marquee {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- component-list-menu.css ---- */
.list-menu--right{right:0}.list-menu--disclosure{position:absolute;min-width:100%;width:20rem;border:1px solid rgba(var(--color-foreground),.2)}.list-menu--disclosure:focus{outline:none}.list-menu__item--active{text-decoration:underline;text-underline-offset:.3rem}.list-menu__item--active:hover{text-decoration-thickness:.2rem}.list-menu--disclosure.localization-selector{max-height:18rem;overflow:auto;width:10rem;padding:.5rem}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-list-menu.css.map */

/* ---- component-menu-drawer.css ---- */
.header__icon--menu{position:initial}.js menu-drawer>details>summary:before,.js menu-drawer>details[open]:not(.menu-opening)>summary:before{content:"";position:absolute;cursor:default;width:100%;height:calc(100vh - 100%);height:calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));top:100%;left:0;background:rgba(var(--color-foreground),.5);opacity:0;visibility:hidden;z-index:2;transition:opacity 0s,visibility 0s}menu-drawer>details[open]>summary:before{visibility:visible;opacity:1;transition:opacity var(--duration-default) ease,visibility var(--duration-default) ease}.menu-drawer{position:absolute;transform:translate(-100%);visibility:hidden;z-index:3;left:0;top:100%;width:100%;padding:0;background-color:rgb(var(--color-background));overflow-x:hidden;filter:drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow),var(--drawer-shadow-opacity)))}.js .menu-drawer{height:calc(100vh - 100%);height:calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)))}.js details[open]>.menu-drawer,.js details[open]>.menu-drawer__submenu{transition:transform var(--duration-default) ease,visibility var(--duration-default) ease}.js details[open].menu-opening>.menu-drawer,details[open].menu-opening>.menu-drawer__submenu{transform:translate(0);visibility:visible}.js .menu-drawer__navigation .submenu-open{visibility:hidden}@media screen and (min-width:750px){.menu-drawer{width:40rem;border-width:0 var(--drawer-border-width) 0 0;border-style:solid;border-color:rgba(var(--color-foreground),var(--drawer-border-opacity))}}.menu-drawer__inner-container{position:relative;height:100%}.menu-drawer__navigation-container{display:grid;grid-template-rows:1fr auto;align-content:space-between;overflow-y:auto;height:100%}.menu-drawer__navigation{padding:3rem 0}.menu-drawer__inner-submenu{height:100%;overflow-x:hidden;overflow-y:auto}.js .menu-drawer__menu li{margin-bottom:.2rem}.menu-drawer__menu-item{padding:1.1rem 3rem;text-decoration:none;font-size:1.8rem}.menu-drawer summary.menu-drawer__menu-item{padding-right:5.2rem}.menu-drawer__menu-item--active,.menu-drawer__menu-item:focus,.menu-drawer__close-button:focus,.menu-drawer__menu-item:hover,.menu-drawer__close-button:hover{color:rgb(var(--color-foreground));background-color:rgba(var(--color-foreground),.04)}.menu-drawer__menu-item--active:hover{background-color:rgba(var(--color-foreground),.08)}.js .menu-drawer__menu-item .icon-caret{display:none}.menu-drawer__menu-item>.svg-wrapper{width:15px;position:absolute;right:3rem;top:50%;transform:translateY(-50%)}.js .menu-drawer__submenu{position:absolute;top:0;width:100%;bottom:0;left:0;background-color:rgb(var(--color-background));z-index:1;transform:translate(100%);visibility:hidden}.js .menu-drawer__submenu .menu-drawer__submenu{overflow-y:auto}.menu-drawer__close-button{margin-top:1.5rem;padding:1.2rem 2.6rem 1.2rem 3rem;text-decoration:none;display:flex;align-items:center;font-size:1.4rem;width:100%;background-color:transparent;font-family:var(--font-body-family);font-style:var(--font-body-style);text-align:left}.menu-drawer__close-button .svg-wrapper{transform:rotate(180deg);margin-right:1rem;width:15px}.menu-drawer__utility-links{padding:0;background-color:rgba(var(--color-foreground),.03);position:relative}.header--has-social .menu-drawer__utility-links{padding:2rem 3rem}@media screen and (max-width:749px){.header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links{padding:2rem 3rem}}@media screen and (max-width:989px){.header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links{padding:2rem 3rem}}.menu-drawer__account{display:inline-flex;align-items:center;text-decoration:none;padding:1rem 0;font-size:1.4rem;color:rgb(var(--color-foreground));margin-bottom:0}.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account{margin:0}.menu-drawer__account account-icon>.svg-wrapper{height:2rem;width:2rem;margin-right:1rem}.menu-drawer__account shop-user-avatar{--shop-avatar-size: 2.4rem;margin-right:.55rem;margin-left:-.45rem}.menu-drawer__account:hover account-icon>.svg-wrapper{transform:scale(1.07)}.menu-drawer .list-social{justify-content:flex-start;margin-left:-1.25rem}.menu-drawer .list-social:empty{display:none}.menu-drawer .list-social__link{padding:1.1rem}@media screen and (max-width:749px){.menu-drawer.country-selector-open{transform:none!important;filter:none!important;transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-menu-drawer.css.map */

/* ---- component-search.css ---- */
.search__input.field__input{padding-right:9.8rem}.search__button{right:var(--inputs-border-width);top:var(--inputs-border-width)}.reset__button{right:calc(var(--inputs-border-width) + 4.4rem);top:var(--inputs-border-width)}.reset__button:not(:focus-visible):after{border-right:.1rem solid rgba(var(--color-foreground),.08);display:block;height:calc(100% - 1.6rem);content:"";position:absolute;right:0}.reset__button:not(:focus):after{border-right:.1rem solid rgba(var(--color-foreground),.08);display:block;height:calc(100% - 1.8rem);content:"";position:absolute;right:0}.search__button:focus-visible,.reset__button:focus-visible{background-color:rgb(var(--color-background));z-index:4}.search__button:focus,.reset__button:focus{background-color:rgb(var(--color-background));z-index:4}.search__button:not(:focus-visible):not(.focused),.reset__button:not(:focus-visible):not(.focused){box-shadow:inherit;background-color:inherit}.search__button:hover .icon,.reset__button:hover .icon{transform:scale(1.07)}.search__button .icon{height:1.8rem;width:1.8rem}.reset__button .icon.icon-close{height:1.8rem;width:1.8rem;stroke-width:.1rem}input::-webkit-search-decoration{-webkit-appearance:none}.template-search__results{position:relative}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-search.css.map */

/* ---- component-predictive-search.css ---- */
.predictive-search{display:none;position:absolute;top:calc(100% + .1rem);left:-.1rem;border-width:var(--popup-border-width);border-style:solid;border-color:rgba(var(--color-foreground),var(--popup-border-opacity));background-color:rgb(var(--color-background));z-index:3;border-bottom-right-radius:var(--popup-corner-radius);border-bottom-left-radius:var(--popup-corner-radius);box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity));overflow-y:auto;-webkit-overflow-scrolling:touch}.predictive-search--search-template{z-index:2;width:calc(100% + .2rem)}.predictive-search__results-groups-wrapper{display:flex;border-bottom:.1rem solid rgba(var(--color-foreground),.08);padding-bottom:1rem}@media screen and (max-width:749px){.predictive-search--header{right:0;left:0;top:100%}.predictive-search__results-groups-wrapper{flex-direction:column}.predictive-search__results-groups-wrapper:not(.predictive-search__results-groups-wrapper--no-suggestions){gap:2rem}}@media screen and (min-width:750px){.predictive-search{border-top:none;width:calc(100% + .2rem)}.header predictive-search{position:relative}}predictive-search[open] .predictive-search,predictive-search[loading] .predictive-search{display:block}.predictive-search__result-group{display:flex;flex-direction:column;flex:1 1 auto;gap:2rem}.predictive-search__result-group:first-child .predictive-search__pages-wrapper{display:none}@media screen and (min-width:750px){.predictive-search__results-groups-wrapper--no-products .predictive-search__result-group:nth-child(2),.predictive-search__result-group:last-child .predictive-search__pages-wrapper{display:none}.predictive-search__result-group:first-child .predictive-search__pages-wrapper{display:initial}.predictive-search__result-group:first-child{flex:0 0 26.4rem}.predictive-search__results-groups-wrapper--no-products .predictive-search__result-group:first-child,.predictive-search__result-group:only-child{flex-grow:1}}.predictive-search__heading{border-bottom:.1rem solid rgba(var(--color-foreground),.08);margin:0 2rem;padding:1.5rem 0 .75rem;color:rgba(var(--color-foreground),.7)}predictive-search .spinner{width:1.5rem;height:1.5rem;line-height:0}predictive-search:not([loading]) .predictive-search__loading-state,predictive-search:not([loading]) .predictive-search-status__loading{display:none}predictive-search[loading] .predictive-search__loading-state{display:flex;justify-content:center;padding:1rem}predictive-search[loading] .predictive-search__search-for-button{display:none}predictive-search[loading] .predictive-search__results-groups-wrapper~.predictive-search__loading-state{display:none}predictive-search[loading] .predictive-search__results-groups-wrapper~.predictive-search__search-for-button{display:initial}.predictive-search__list-item[aria-selected=true]>*,.predictive-search__list-item:hover>*,.predictive-search__item[aria-selected=true],.predictive-search__item:hover{color:rgb(var(--color-foreground));background-color:rgba(var(--color-foreground),.04)}.predictive-search__list-item[aria-selected=true] .predictive-search__item-heading,.predictive-search__list-item:hover .predictive-search__item-heading{text-decoration:underline;text-underline-offset:.3rem}.predictive-search__item{display:flex;padding:1rem 2rem;text-align:left;text-decoration:none;width:100%}.predictive-search__item--link-with-thumbnail{display:grid;grid-template-columns:5rem 1fr;grid-column-gap:2rem;grid-template-areas:"product-image product-content"}.predictive-search__item-content{grid-area:product-content;display:flex;flex-direction:column}.predictive-search__item-content--centered{justify-content:center}.predictive-search__item-vendor{font-size:.9rem}.predictive-search__item-heading{margin:0}.predictive-search__item-query-result *:not(mark){font-weight:bolder}.predictive-search__item-query-result mark{color:rgba(var(--color-foreground),.75)}.predictive-search__item-query-result mark{background-color:transparent}.predictive-search__item .price{color:rgba(var(--color-foreground),.7);font-size:1.2rem}.predictive-search__item-vendor+.predictive-search__item-heading,.predictive-search .price{margin-top:.5rem}.predictive-search__item--term{justify-content:space-between;align-items:center;padding:1.3rem 2rem;word-break:break-all;line-height:calc(1 + .4 / var(--font-body-scale))}@media screen and (min-width:750px){.predictive-search__item--term{padding-top:1rem;padding-bottom:1rem}}.predictive-search__item--term .icon-arrow{width:calc(var(--font-heading-scale) * 1.4rem);height:calc(var(--font-heading-scale) * 1.4rem);flex-shrink:0;margin-left:calc(var(--font-heading-scale) * 2rem);color:rgb(var(--color-link))}.predictive-search__image{grid-area:product-image;object-fit:contain;font-family:"object-fit: contain"}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-predictive-search.css.map */

/* ---- component-cart-notification.css ---- */
.cart-notification-wrapper{position:relative}.cart-notification-wrapper .cart-notification{display:block}.cart-notification{border-bottom-right-radius:var(--popup-corner-radius);border-bottom-left-radius:var(--popup-corner-radius);border-color:rgba(var(--color-foreground),var(--popup-border-opacity));border-style:solid;border-width:0 0 var(--popup-border-width);padding:2.5rem 3.5rem;position:absolute;right:0;transform:translateY(-100%);visibility:hidden;width:100%;box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity));z-index:-1}.cart-notification.focused{box-shadow:0 0 .2rem rgba(var(--color-foreground),.3),var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity))}.cart-notification:focus-visible{box-shadow:0 0 .2rem rgba(var(--color-foreground),.3),var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity))}@media screen and (min-width:750px){.header-wrapper:not(.header-wrapper--border-bottom)+cart-notification .cart-notification{border-top-width:var(--popup-border-width)}.cart-notification{border-width:0 var(--popup-border-width) var(--popup-border-width);max-width:36.8rem;right:2.2rem}}@media screen and (min-width:990px){.cart-notification-wrapper:is(.page-width)>.cart-notification{right:4rem}}.cart-notification.animate{transition:transform var(--duration-short) ease,visibility 0s var(--duration-short) ease}.cart-notification.active{transform:translateY(0);transition:transform var(--duration-default) ease,visibility 0s;visibility:visible}.cart-notification__header{align-items:flex-start;display:flex}.cart-notification__heading{align-items:center;display:flex;flex-grow:1;margin-bottom:0;margin-top:0}.cart-notification__heading .icon-checkmark{color:rgb(var(--color-foreground));margin-right:1rem;width:1.3rem}.cart-notification__close{margin-top:-2rem;margin-right:-3rem}.cart-notification__links{text-align:center}.cart-notification__links>*{margin-top:1rem}.cart-notification-product{align-items:flex-start;display:flex;padding-bottom:3rem;padding-top:2rem}.cart-notification-product dl{margin-bottom:0;margin-top:0}.cart-notification-product__image{display:inline-flex;margin-right:1.5rem;margin-top:.5rem}.cart-notification-product__image:after{content:none}.cart-notification-product__title{align-items:flex-start;display:flex;gap:.6rem;margin-bottom:.5rem}.cart-notification-product__title .cart-notification-product__name{margin:0}.cart-notification-product__title .cart-item__disclosure{font-size:calc(var(--font-heading-scale) * 1.5rem)}.cart-notification-product__name{margin-bottom:.5rem;margin-top:0}.cart-notification .cart-item__disclosure-tooltip{bottom:auto;top:calc(100% + .9rem)}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-cart-notification.css.map */

/* ---- component-cart-drawer.css ---- */
.drawer{position:fixed;z-index:1000;left:0;top:0;width:100vw;height:100%;display:flex;justify-content:flex-end;background-color:rgba(var(--color-foreground),.5);transition:visibility var(--duration-default) ease}.drawer.active{visibility:visible}.drawer__inner{height:100%;width:40rem;max-width:calc(100vw - 3rem);padding:0 1.5rem;border:.1rem solid rgba(var(--color-foreground),.2);border-right:0;overflow:hidden;display:flex;flex-direction:column;transform:translate(100%);transition:transform var(--duration-default) ease}.drawer__inner-empty{height:100%;padding:0 1.5rem;overflow:hidden;display:flex;flex-direction:column}.cart-drawer__warnings{display:flex;flex-direction:column;flex:1;justify-content:center}cart-drawer.is-empty .drawer__inner{display:grid;grid-template-rows:1fr;align-items:center;padding:0}cart-drawer.is-empty .drawer__header{display:none}cart-drawer:not(.is-empty) .cart-drawer__warnings,cart-drawer:not(.is-empty) .cart-drawer__collection{display:none}.cart-drawer__warnings--has-collection .cart__login-title{margin-top:2.5rem}.drawer.active .drawer__inner{transform:translate(0)}.drawer__header{position:relative;padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center}.drawer__heading{margin:0 0 1rem}.drawer__close{display:inline-block;padding:0;min-width:4.4rem;min-height:4.4rem;box-shadow:0 0 0 .2rem rgba(var(--color-button),0);position:absolute;top:10px;right:-10px;color:rgb(var(--color-foreground));background-color:transparent;border:none;cursor:pointer}.cart-drawer__warnings .drawer__close{right:5px}.drawer__close .svg-wrapper{height:2rem;width:2rem}.drawer__contents{flex-grow:1;display:flex;flex-direction:column}.drawer__footer{border-top:.1rem solid rgba(var(--color-foreground),.2);padding:1.5rem 0}cart-drawer-items.is-empty+.drawer__footer{display:none}.drawer__footer>details{margin-top:-1.5rem;border-bottom:.1rem solid rgba(var(--color-foreground),.2)}.drawer__footer>details[open]{padding-bottom:1.5rem}.drawer__footer summary{display:flex;position:relative;line-height:1;padding:1.5rem 2.8rem 1.5rem 0}.drawer__footer>details+.cart-drawer__footer{padding-top:1.5rem}cart-drawer{position:fixed;top:0;left:0;width:100vw;height:100%}.cart-drawer__overlay{position:fixed;top:0;right:0;bottom:0;left:0}.cart-drawer__overlay:empty{display:block}.cart-drawer__form{flex-grow:1;display:flex;flex-wrap:wrap}.cart-drawer__collection{margin:0 2.5rem 1.5rem}.cart-drawer .drawer__cart-items-wrapper{flex-grow:1}.cart-drawer .cart-items,.cart-drawer tbody{display:block;width:100%}.cart-drawer thead{display:inline-table;width:100%}cart-drawer-items{overflow:auto;flex:1}@media screen and (max-height:650px){cart-drawer-items{overflow:visible}.drawer__inner{overflow:scroll}}.cart-drawer .cart-item{display:grid;grid-template:repeat(2,auto) / repeat(4,1fr);gap:1rem;margin-bottom:0}.cart-drawer .cart-item:last-child{margin-bottom:1rem}.cart-drawer .cart-item__media{grid-row:1 / 3}.cart-drawer .cart-item__image{max-width:100%}.cart-drawer .cart-item__nested-line .cart-item__image{max-width:60%;float:right}.cart-drawer .cart-items thead{margin-bottom:.5rem}.cart-drawer .cart-items thead th:first-child,.cart-drawer .cart-items thead th:last-child{width:0;padding:0}.cart-drawer .cart-items thead th:nth-child(2){width:50%;padding-left:0}.cart-drawer .cart-items thead tr{display:table-row;margin-bottom:0}.cart-drawer .cart-items th{border-bottom:.1rem solid rgba(var(--color-foreground),.08)}.cart-drawer .cart-item:last-child{margin-bottom:1.5rem}.cart-drawer .cart-item .loading__spinner{right:5px;padding-top:2.5rem}.cart-drawer .cart-items td{padding-top:1.7rem}.cart-drawer .cart-items .cart-item__nested-line td:not(.cart-item__quantity){padding-top:1rem}.cart-drawer .cart-item>td+td{padding-left:1rem}.cart-drawer .cart-item__details{width:auto;grid-column:2 / 4}.cart-drawer .cart-item__totals{pointer-events:none;display:flex;align-items:flex-start;justify-content:flex-end}.cart-drawer.cart-drawer .cart-item__price-wrapper>*:only-child{margin-top:0}.cart-drawer .cart-item__price-wrapper .cart-item__discounted-prices{display:flex;flex-direction:column;gap:.6rem}.cart-drawer .unit-price{margin-top:.6rem}.cart-drawer .cart-items .cart-item__quantity{padding-top:0;grid-column:2 / 5}@media screen and (max-width:749px){.cart-drawer .cart-item cart-remove-button{margin-left:0}}.cart-drawer__footer>*+*{margin-top:1rem}.cart-drawer .totals{justify-content:space-between}.cart-drawer .price{line-height:1}.cart-drawer .tax-note{margin:1.2rem 0 2rem auto;text-align:left}.cart-drawer .product-option dd{word-break:break-word}.cart-drawer details[open]>summary .icon-caret{transform:rotate(180deg)}.cart-drawer .cart__checkout-button{max-width:none}.drawer__footer .cart__dynamic-checkout-buttons{max-width:100%}.drawer__footer #dynamic-checkout-cart ul{flex-wrap:wrap!important;flex-direction:row!important;margin:.5rem -.5rem 0 0!important;gap:.5rem}.drawer__footer [data-shopify-buttoncontainer]{justify-content:flex-start}.drawer__footer #dynamic-checkout-cart ul>li{flex-basis:calc(50% - .5rem)!important;margin:0!important}.drawer__footer #dynamic-checkout-cart ul>li:only-child{flex-basis:100%!important;margin-right:.5rem!important}@media screen and (min-width:750px){.drawer__footer #dynamic-checkout-cart ul>li{flex-basis:calc(100% / 3 - .5rem)!important;margin:0!important}.drawer__footer #dynamic-checkout-cart ul>li:first-child:nth-last-child(2),.drawer__footer #dynamic-checkout-cart ul>li:first-child:nth-last-child(2)~li,.drawer__footer #dynamic-checkout-cart ul>li:first-child:nth-last-child(4),.drawer__footer #dynamic-checkout-cart ul>li:first-child:nth-last-child(4)~li{flex-basis:calc(50% - .5rem)!important}}cart-drawer-items::-webkit-scrollbar{width:3px}cart-drawer-items::-webkit-scrollbar-thumb{background-color:rgba(var(--color-foreground),.7);border-radius:100px}cart-drawer-items::-webkit-scrollbar-track-piece{margin-top:31px}.cart-drawer .quantity-popover-container{padding:0}.cart-drawer .quantity-popover__info.global-settings-popup{transform:translateY(0);top:100%}.cart-drawer .cart-item__error{margin-top:.8rem}.cart-drawer .quantity-popover__info+.cart-item__error{margin-top:.2rem}@media screen and (min-width:750px){.cart-drawer .cart-item__quantity--info quantity-popover>*{padding-left:0}.cart-drawer .cart-item__error{margin-left:0}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-cart-drawer.css.map */

/* ---- component-price.css ---- */
.price{font-size:1.6rem;letter-spacing:.1rem;line-height:calc(1 + .5 / var(--font-body-scale));color:rgb(var(--color-foreground))}.price>*{display:inline-block;vertical-align:top}.price.price--unavailable{visibility:hidden}.price--end{text-align:right}.price .price-item{display:inline-block;margin:0 1rem 0 0}.price__regular .price-item--regular{margin-right:0}.price:not(.price--show-badge) .price-item--last:last-of-type{margin:0}@media screen and (min-width:750px){.price{margin-bottom:0}}.price--large{font-size:1.6rem;line-height:calc(1 + .5 / var(--font-body-scale));letter-spacing:.13rem}@media screen and (min-width:750px){.price--large{font-size:1.8rem}}.price--sold-out .price__availability,.price__regular{display:block}.price__sale,.price__availability,.price .price__badge-sale,.price .price__badge-sold-out,.price--on-sale .price__regular,.price--on-sale .price__availability{display:none}.price--sold-out .price__badge-sold-out,.price--on-sale .price__badge-sale,.volume-pricing--sale-badge .price__badge-sale{display:inline-block}.volume-pricing--sale-badge .price__badge-sale{margin-left:.5rem}.price--on-sale .price__sale{display:initial;flex-direction:row;flex-wrap:wrap}.price--center{display:initial;justify-content:center}.price--on-sale .price-item--regular{text-decoration:line-through;color:rgba(var(--color-foreground),.75);font-size:1.3rem}.unit-price{display:block;font-size:1.1rem;letter-spacing:.04rem;line-height:calc(1 + .2 / var(--font-body-scale));margin-top:.2rem;color:rgba(var(--color-foreground),.7)}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-price.css.map */

/* ---- component-card.css ---- */
.card-wrapper{color:inherit;height:100%;position:relative;text-decoration:none}.card{text-decoration:none;text-align:var(--text-alignment)}.card:not(.ratio){display:flex;flex-direction:column;height:100%}.card.card--horizontal{--text-alignment: left;--image-padding: 0rem;flex-direction:row;align-items:flex-start;gap:1.5rem}.card--horizontal.ratio:before{padding-bottom:0}.card--card.card--horizontal{padding:1.2rem}.card--card.card--horizontal.card--text{column-gap:0}.card--card{height:100%}.card--card,.card--standard .card__inner{position:relative;box-sizing:border-box;border-radius:var(--border-radius);border:var(--border-width) solid rgba(var(--color-foreground),var(--border-opacity))}.card--card:after,.card--standard .card__inner:after{content:"";position:absolute;z-index:-1;width:calc(var(--border-width) * 2 + 100%);height:calc(var(--border-width) * 2 + 100%);top:calc(var(--border-width) * -1);left:calc(var(--border-width) * -1);border-radius:var(--border-radius);box-shadow:var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity))}.card--card.gradient,.card__inner.gradient{transform:perspective(0)}.card__inner.color-scheme-1{background:transparent}.card .card__inner .card__media{overflow:hidden;z-index:0;border-radius:calc(var(--border-radius) - var(--border-width) - var(--image-padding))}.card--card .card__inner .card__media{border-bottom-right-radius:0;border-bottom-left-radius:0}.card--standard.card--text{background-color:transparent}.card-information{text-align:var(--text-alignment)}.card__media,.card .media{bottom:0;position:absolute;top:0}.card .media{width:100%}.card__media{margin:var(--image-padding);width:calc(100% - 2 * var(--image-padding))}.card--standard .card__media{margin:var(--image-padding)}.card__inner{width:100%}.card--media .card__inner .card__content{position:relative;padding:calc(var(--image-padding) + 1rem)}.card__content{display:grid;grid-template-rows:minmax(0,1fr) max-content minmax(0,1fr);padding:1rem;width:100%;flex-grow:1}.card__content--auto-margins{grid-template-rows:minmax(0,auto) max-content minmax(0,auto)}.card__information{grid-row-start:2;padding:1.3rem 1rem}.card:not(.ratio)>.card__content{grid-template-rows:max-content minmax(0,1fr) max-content auto}.card-information .card__information-volume-pricing-note{margin-top:.6rem;line-height:calc(.5 + .4 / var(--font-body-scale));color:rgba(var(--color-foreground),.75)}.card__information-volume-pricing-note--button,.card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label{position:relative;z-index:1;cursor:pointer;padding:0;margin:0;text-align:var(--text-alignment);min-width:auto}.card__information-volume-pricing-note--button:hover{text-decoration:underline}.card__information-volume-pricing-note--button+.global-settings-popup.quantity-popover__info{transform:initial;top:auto;bottom:4rem;max-width:20rem;width:calc(95% + 2rem)}.card__information-volume-pricing-note--button+.global-settings-popup.quantity-popover__info span:first-of-type{padding-right:.3rem}.card__information-volume-pricing-note--button-right+.global-settings-popup.quantity-popover__info{right:0;left:auto}.card__information-volume-pricing-note--button-center+.global-settings-popup.quantity-popover__info{left:50%;transform:translate(-50%)}.card__information-volume-pricing-note--button+.global-settings-popup.quantity-popover__info .quantity__rules{text-align:left}@media screen and (min-width:990px){.grid--6-col-desktop .card__content quick-add-bulk .quantity{width:auto}.grid--6-col-desktop .card__content quick-add-bulk .quantity__button{width:calc(3rem / var(--font-body-scale))}.grid--6-col-desktop .card__information-volume-pricing-note--button+.global-settings-popup.quantity-popover__info{left:50%;transform:translate(-50%);width:calc(100% + var(--border-width) + 3.5rem)}.grid--6-col-desktop .card--standard .card__information-volume-pricing-note--button+.global-settings-popup.quantity-popover__info{width:calc(100% + var(--border-width) + 1rem)}}@media screen and (max-width:749px){.grid--2-col-tablet-down .card__content quick-add-bulk .quantity__button{width:calc(3.5rem / var(--font-body-scale))}.grid--2-col-tablet-down .card--card .card__information-volume-pricing-note--button+.global-settings-popup.quantity-popover__info,.grid--2-col-tablet-down .card--standard .card__information-volume-pricing-note--button+.global-settings-popup.quantity-popover__info{left:50%;transform:translate(-50%)}.grid--2-col-tablet-down .card--standard .card__information-volume-pricing-note--button+.global-settings-popup.quantity-popover__info{width:100%}.grid--2-col-tablet-down .card--card .card__information-volume-pricing-note--button+.global-settings-popup.quantity-popover__info{width:calc(100% + var(--border-width) + 4rem)}.grid--2-col-tablet-down .card__content quick-add-bulk .quantity{width:auto}}.card-information quantity-popover volume-pricing{margin-top:0}@media screen and (max-width:989px){.card-information quantity-popover .quantity__rules~volume-pricing{margin-top:0}.card-information quantity-popover volume-pricing{margin-top:4.2rem}}@media screen and (min-width:750px){.card__information{padding-bottom:1.7rem;padding-top:1.7rem}}.card__badge{align-self:flex-end;grid-row-start:3;justify-self:flex-start}.card__badge.top{align-self:flex-start;grid-row-start:1}.card__badge.right{justify-self:flex-end}.card:not(.card--horizontal)>.card__content>.card__badge{margin:1.3rem}.card__media .media img{height:100%;object-fit:cover;object-position:center center;width:100%}.card__inner:not(.ratio)>.card__content{height:100%}.card__heading{margin-top:0;margin-bottom:0}.card__heading:last-child{margin-bottom:0}.card--horizontal .card__heading,.card--horizontal .price__container .price-item,.card--horizontal__quick-add{font-size:calc(var(--font-heading-scale) * 1.2rem)}.card--horizontal .card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note){margin-top:0}.card--horizontal__quick-add:before{box-shadow:none}@media only screen and (min-width:750px){.card--horizontal .card__heading,.card--horizontal .price__container .price-item,.card--horizontal__quick-add{font-size:calc(var(--font-heading-scale) * 1.3rem)}}.card--card.card--media>.card__content{margin-top:calc(0rem - var(--image-padding))}.card--standard.card--text a:after,.card--card .card__heading a:after{bottom:calc(var(--border-width) * -1);left:calc(var(--border-width) * -1);right:calc(var(--border-width) * -1);top:calc(var(--border-width) * -1)}.card__heading a:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}.card__heading a:after{outline-offset:.3rem}.card__heading a:focus:after{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3);outline:.2rem solid rgba(var(--color-foreground),.5)}.card__heading a:focus-visible:after{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3);outline:.2rem solid rgba(var(--color-foreground),.5)}.card__heading a:focus:not(:focus-visible):after{box-shadow:none;outline:0}.card__heading a:focus{box-shadow:none;outline:0}@media screen and (min-width:990px){.card .media.media--hover-effect>img:only-child,.card-wrapper .media.media--hover-effect>img:only-child{transition:transform var(--duration-long) ease}.card:hover .media.media--hover-effect>img:first-child:only-child,.card-wrapper:hover .media.media--hover-effect>img:first-child:only-child{transform:scale(1.03)}.card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child){opacity:0}.card-wrapper:hover .media.media--hover-effect>img+img{opacity:1;transition:transform var(--duration-long) ease;transform:scale(1.03)}.underline-links-hover:hover a{text-decoration:underline;text-underline-offset:.3rem}}.card--standard.card--media .card__inner .card__information,.card--standard.card--text:not(.card--horizontal)>.card__content .card__heading:not(.card__heading--placeholder),.card--standard:not(.card--horizontal)>.card__content .card__badge,.card--standard.card--text.article-card>.card__content .card__information,.card--standard>.card__content .card__caption{display:none}.card--standard:not(.card--horizontal) .placeholder-svg{width:100%}.card--standard>.card__content{padding:0}.card--standard>.card__content .card__information{padding-left:0;padding-right:0}.card--card.card--media .card__inner .card__information,.card--card.card--text .card__inner,.card--card.card--media>.card__content .card__badge{display:none}.card--horizontal .card__badge,.card--horizontal.card--text .card__inner{display:none}.card--extend-height{height:100%}.card--extend-height.card--standard.card--text,.card--extend-height.card--media{display:flex;flex-direction:column}.card--extend-height.card--standard.card--text .card__inner,.card--extend-height.card--media .card__inner{flex-grow:1}.card .icon-wrap{margin-left:.8rem;white-space:nowrap;transition:transform var(--duration-short) ease;overflow:hidden}.card-information>*+*{margin-top:.5rem}.card-information{width:100%}.card-information>*{line-height:calc(1 + .4 / var(--font-body-scale));color:rgb(var(--color-foreground))}.card-information>.price{color:rgb(var(--color-foreground))}.card--horizontal .card-information>.price{color:rgba(var(--color-foreground),.75)}.card-information>.rating{margin-top:.4rem}.card-information>*:not(.visually-hidden:first-child)+quantity-popover:not(.rating):not(.card__information-volume-pricing-note),.card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button{margin-top:0}.card-information>*:not(.visually-hidden:first-child)+*:not(.rating):not(.card__information-volume-pricing-note){margin-top:.7rem}.card-information .caption{letter-spacing:.07rem}.card-article-info{margin-top:1rem}.card--shape .card__content{padding-top:0}.card--shape.card--standard:not(.card--text) .card__inner{border:0;background-color:transparent;filter:drop-shadow(var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity)))}.card--shape.card--standard:not(.card--text) .card__inner:after{display:none}.grid__item:nth-child(2n) .shape--blob{clip-path:polygon(var(--shape--blob-2))}.grid__item:nth-child(3n) .shape--blob{clip-path:polygon(var(--shape--blob-3))}.grid__item:nth-child(4n) .shape--blob{clip-path:polygon(var(--shape--blob-4))}.grid__item:nth-child(5n) .shape--blob{clip-path:polygon(var(--shape--blob-5))}.grid__item:nth-child(7n) .shape--blob{clip-path:polygon(var(--shape--blob-6))}.grid__item:nth-child(8n) .shape--blob{clip-path:polygon(var(--shape--blob-1))}@media(prefers-reduced-motion:no-preference){.product-card-wrapper .shape--round{transition:clip-path var(--duration-long) ease}.product-card-wrapper:hover .shape--round{clip-path:ellipse(47% 47% at 50% 50%)}.product-card-wrapper .shape--blob{transition:clip-path var(--duration-long) ease-in-out}.product-card-wrapper:hover .shape--blob{clip-path:polygon(var(--shape--blob-5))}.grid__item:nth-child(2n) .product-card-wrapper:hover .shape--blob{clip-path:polygon(var(--shape--blob-6))}.grid__item:nth-child(3n) .product-card-wrapper:hover .shape--blob{clip-path:polygon(var(--shape--blob-1))}.grid__item:nth-child(4n) .product-card-wrapper:hover .shape--blob{clip-path:polygon(var(--shape--blob-2))}.grid__item:nth-child(5n) .product-card-wrapper:hover .shape--blob{clip-path:polygon(var(--shape--blob-3))}.grid__item:nth-child(7n) .product-card-wrapper:hover .shape--blob{clip-path:polygon(var(--shape--blob-4))}.grid__item:nth-child(8n) .product-card-wrapper:hover .shape--blob{clip-path:polygon(var(--shape--blob-5))}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-card.css.map */

/* ---- component-rating.css ---- */
.product--no-media .rating-wrapper{text-align:center}.rating{display:inline-block;margin:0}.product .rating-star{--letter-spacing: .8;--font-size: 1.7}.card-wrapper .rating-star{--letter-spacing: .7;--font-size: 1.4}.rating-star{--color-rating-star: rgb(var(--color-foreground));--percent: calc( ( var(--rating) / var(--rating-max) + var(--rating-decimal) * var(--font-size) / (var(--rating-max) * (var(--letter-spacing) + var(--font-size))) ) * 100% );letter-spacing:calc(var(--letter-spacing) * 1rem);font-size:calc(var(--font-size) * 1rem);line-height:1;display:inline-block;font-family:Times;margin:0}.rating-star:before{content:"\2605\2605\2605\2605\2605";background:linear-gradient(90deg,var(--color-rating-star) var(--percent),rgba(var(--color-foreground),.15) var(--percent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.rating-text{display:none}.rating-count{display:inline-block;margin:0}@media(forced-colors:active){.rating{display:none}.rating-text{display:block}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-rating.css.map */

/* ---- component-slider.css ---- */
slider-component{--desktop-margin-left-first-item: max( 5rem, calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2) );position:relative;display:block}slider-component.slider-component-full-width{--desktop-margin-left-first-item: 1.5rem}@media screen and (max-width:749px){slider-component.page-width{padding:0 1.5rem}}@media screen and (min-width:749px)and (max-width:990px){slider-component.page-width{padding:0 5rem}}.slider__slide{--focus-outline-padding: .5rem;--shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));--shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));scroll-snap-align:start;flex-shrink:0;padding-bottom:0}@media screen and (max-width:749px){.slider.slider--mobile{position:relative;flex-wrap:inherit;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:1.5rem;-webkit-overflow-scrolling:touch;margin-bottom:1rem}.slider--mobile:after{content:"";width:0;padding-left:1.5rem}.slider.slider--mobile .slider__slide{margin-bottom:0;padding-top:max(var(--focus-outline-padding),var(--shadow-padding-top));padding-bottom:max(var(--focus-outline-padding),var(--shadow-padding-bottom))}.slider.slider--mobile.contains-card--standard .slider__slide:not(.collection-list__item--no-media){padding-bottom:var(--focus-outline-padding)}.slider.slider--mobile.contains-content-container .slider__slide{--focus-outline-padding: 0rem}}@media screen and (min-width:750px){.slider.slider--tablet-up{position:relative;flex-wrap:inherit;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:1rem;-webkit-overflow-scrolling:touch}.slider.slider--tablet-up .slider__slide{margin-bottom:0}}@media screen and (max-width:989px){.slider.slider--tablet{position:relative;flex-wrap:inherit;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:1.5rem;-webkit-overflow-scrolling:touch;margin-bottom:1rem}.slider--tablet:after{content:"";width:0;padding-left:1.5rem;margin-left:calc(-1 * var(--grid-desktop-horizontal-spacing))}.slider.slider--tablet .slider__slide{margin-bottom:0;padding-top:max(var(--focus-outline-padding),var(--shadow-padding-top));padding-bottom:max(var(--focus-outline-padding),var(--shadow-padding-bottom))}.slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media){padding-bottom:var(--focus-outline-padding)}.slider.slider--tablet.contains-content-container .slider__slide{--focus-outline-padding: 0rem}}.slider--everywhere{position:relative;flex-wrap:inherit;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;margin-bottom:1rem}.slider.slider--everywhere .slider__slide{margin-bottom:0;scroll-snap-align:center}@media screen and (min-width:990px){.slider-component-desktop.page-width{max-width:none}.slider--desktop{position:relative;flex-wrap:inherit;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;margin-bottom:1rem;scroll-padding-left:var(--desktop-margin-left-first-item)}.slider--desktop:after{content:"";width:0;padding-left:5rem;margin-left:calc(-1 * var(--grid-desktop-horizontal-spacing))}.slider.slider--desktop .slider__slide{margin-bottom:0;padding-top:max(var(--focus-outline-padding),var(--shadow-padding-top));padding-bottom:max(var(--focus-outline-padding),var(--shadow-padding-bottom))}.slider--desktop .slider__slide:first-child{margin-left:var(--desktop-margin-left-first-item);scroll-margin-left:var(--desktop-margin-left-first-item)}.slider-component-full-width .slider--desktop{scroll-padding-left:1.5rem}.slider-component-full-width .slider--desktop .slider__slide:first-child{margin-left:1.5rem;scroll-margin-left:1.5rem}.slider-component-full-width .slider--desktop:after{padding-left:1.5rem}.slider--desktop.grid--5-col-desktop .grid__item{width:calc((100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-desktop-horizontal-spacing) * 2)}.slider--desktop.grid--4-col-desktop .grid__item{width:calc((100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3)}.slider--desktop.grid--3-col-desktop .grid__item{width:calc((100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-desktop-horizontal-spacing) * 4)}.slider--desktop.grid--2-col-desktop .grid__item{width:calc((100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-desktop-horizontal-spacing) * 5)}.slider--desktop.grid--1-col-desktop .grid__item{width:calc((100% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9)}.slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media){padding-bottom:var(--focus-outline-padding)}.slider.slider--desktop.contains-content-container .slider__slide{--focus-outline-padding: 0rem}}@media(prefers-reduced-motion){.slider{scroll-behavior:auto}}.slider{scrollbar-color:rgb(var(--color-foreground)) rgba(var(--color-foreground),.04);-ms-overflow-style:none;scrollbar-width:none}.slider::-webkit-scrollbar{height:.4rem;width:.4rem;display:none}.slider::-webkit-scrollbar-thumb{background-color:rgb(var(--color-foreground));border-radius:.4rem;border:0}.slider::-webkit-scrollbar-track{background:rgba(var(--color-foreground),.04);border-radius:.4rem}.slider-counter{display:flex;justify-content:center;min-width:4.4rem}@media screen and (min-width:750px){.slider-counter--dots{margin:0 1.2rem}}.slider-counter__link{padding:1rem}@media screen and (max-width:749px){.slider-counter__link{padding:.7rem}}.slider-counter__link--dots .dot{width:1rem;height:1rem;border-radius:50%;border:.1rem solid rgba(var(--color-foreground),.5);padding:0;display:block}.slider-counter__link--active.slider-counter__link--dots .dot{background-color:rgb(var(--color-foreground))}@media screen and (forced-colors:active){.slider-counter__link--active.slider-counter__link--dots .dot{background-color:CanvasText}}.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot{border-color:rgb(var(--color-foreground))}.slider-counter__link--dots .dot,.slider-counter__link--numbers{transition:transform .2s ease-in-out}.slider-counter__link--active.slider-counter__link--numbers,.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,.slider-counter__link--numbers:hover{transform:scale(1.1)}.slider-counter__link--numbers{color:rgba(var(--color-foreground),.5);text-decoration:none}.slider-counter__link--numbers:hover{color:rgb(var(--color-foreground))}.slider-counter__link--active.slider-counter__link--numbers{text-decoration:underline;color:rgb(var(--color-foreground))}.slider-buttons{display:flex;align-items:center;justify-content:center}@media screen and (min-width:990px){.slider:not(.slider--everywhere):not(.slider--desktop)+.slider-buttons{display:none}}@media screen and (max-width:989px){.slider--desktop:not(.slider--tablet)+.slider-buttons{display:none}}@media screen and (min-width:750px){.slider--mobile+.slider-buttons{display:none}}.slider-button{color:rgba(var(--color-foreground),.75);background:transparent;border:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center}.slider-button:not([disabled]):hover{color:rgb(var(--color-foreground))}.slider-button .icon{height:.6rem}.slider-button[disabled] .icon{color:rgba(var(--color-foreground),.3);cursor:not-allowed}.slider-button--next .icon{transform:rotate(-90deg)}.slider-button--prev .icon{transform:rotate(90deg)}.slider-button--next:not([disabled]):hover .icon{transform:rotate(-90deg) scale(1.1)}.slider-button--prev:not([disabled]):hover .icon{transform:rotate(90deg) scale(1.1)}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-slider.css.map */

/* ---- component-pagination.css ---- */
.pagination-wrapper{margin-top:4rem}@media screen and (min-width:990px){.pagination-wrapper{margin-top:5rem}}.pagination__list{display:flex;flex-wrap:wrap;justify-content:center}.pagination__list>li{flex:1 0 4.4rem;max-width:4.4rem}.pagination__list>li:not(:last-child){margin-right:1rem}.pagination__item{color:rgb(var(--color-foreground));display:inline-flex;justify-content:center;align-items:center;position:relative;height:4.4rem;width:100%;padding:0;text-decoration:none}a.pagination__item:hover:after{height:.1rem}.pagination__item .icon-caret{height:.6rem}.pagination__item--current:after{height:.1rem}.pagination__item--current:after,.pagination__item:hover:after{content:"";display:block;width:2rem;position:absolute;bottom:8px;left:50%;transform:translate(-50%);background-color:currentColor}.pagination__item--next .icon{margin-left:-.2rem;transform:rotate(90deg)}.pagination__item--next:hover .icon{transform:rotate(90deg) scale(1.07)}.pagination__item--prev .icon{margin-right:-.2rem;transform:rotate(-90deg)}.pagination__item--prev:hover .icon{transform:rotate(-90deg) scale(1.07)}.pagination__item-arrow:hover:after{display:none}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-pagination.css.map */

/* ---- component-accordion.css ---- */
.accordion summary{display:flex;position:relative;line-height:1;padding:1.5rem 0}.accordion .summary__title{display:flex;flex:1}.accordion .summary__title+.icon-caret{height:calc(var(--font-heading-scale) * .6rem)}.accordion+.accordion{margin-top:0;border-top:none}.accordion{margin-top:2.5rem;margin-bottom:0;border-top:.1rem solid rgba(var(--color-foreground),.08);border-bottom:.1rem solid rgba(var(--color-foreground),.08)}.accordion__title{display:inline-block;max-width:calc(100% - 6rem);min-height:1.6rem;margin:0;word-break:break-word}.accordion .svg-wrapper{align-self:center;fill:rgb(var(--color-foreground));height:calc(var(--font-heading-scale) * 2rem);margin-inline-end:calc(var(--font-heading-scale) * 1rem);width:calc(var(--font-heading-scale) * 2rem)}.accordion details[open]>summary .icon-caret{transform:rotate(180deg)}.accordion__content{margin-bottom:1.5rem;word-break:break-word;overflow-x:auto;padding:0 .6rem}.accordion__content img{max-width:100%}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-accordion.css.map */

/* ---- component-totals.css ---- */
.totals{display:flex;justify-content:center;align-items:flex-end}.totals>*{font-size:1.6rem;margin:0}.totals>h2{font-size:calc(var(--font-heading-scale) * 1.6rem)}.totals *{line-height:1}.totals>*+*{margin-left:2rem}.totals__total{margin-top:.5rem}.totals__total-value{font-size:1.8rem}.cart__ctas+.totals{margin-top:2rem}@media all and (min-width:750px){.totals{justify-content:flex-end}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-totals.css.map */

/* ---- component-cart-items.css ---- */
cart-items .title-wrapper-with-link{margin-top:0}.cart-items td,.cart-items th{padding:0;border:none}.cart-items th{text-align:left;padding-bottom:1.8rem;opacity:.85;font-weight:400}.cart-item__quantity-wrapper{display:flex}.cart-item__totals{position:relative}.cart-items *.right{text-align:right}.cart-item__image-container{display:inline-flex;align-items:flex-start}.cart-item__nested-line .cart-item__image-container{min-width:calc(10rem / var(--font-body-scale));justify-content:right}.cart-item__nested-line .cart-item__image-container img{width:60%}.cart-item__image-container:after{content:none}.cart-item__image{height:auto;max-width:calc(10rem / var(--font-body-scale))}@media screen and (min-width:750px){.cart-item__image{max-width:100%}}.cart-item__details{font-size:1.6rem;line-height:calc(1 + .4 / var(--font-body-scale))}.cart-item__details>*{margin:0;max-width:30rem}.cart-item__details>*+*{margin-top:.6rem}.cart-item__media{position:relative}.cart-item__link{display:block;bottom:0;left:0;position:absolute;right:0;top:0;width:100%;height:100%}.cart-item__name{text-decoration:none;display:block}.cart-item__title{align-items:flex-start;display:flex;font-size:calc(var(--font-heading-scale) * 1.5rem);gap:.6rem;line-height:calc(1 + .3/max(1,var(--font-heading-scale)))}.cart-item__title .cart-item__name{flex:0 1 auto;min-width:0}.cart-item__disclosure{-webkit-appearance:none;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;line-height:1;margin:0;padding:0;position:relative;top:.2rem}.cart-item__disclosure-indicator{--icon-stroke-width: 1.2;color:rgb(var(--color-foreground));height:1em;width:1em}.cart-item__disclosure-tooltip{--cart-disclosure-tooltip-symbol-height: 1.3rem;--cart-disclosure-tooltip-symbol-width: calc(var(--cart-disclosure-tooltip-symbol-height) * 40 / 31);background-color:rgb(var(--color-background));border:var(--popup-border-width) solid rgba(var(--color-foreground),var(--popup-border-opacity));bottom:calc(100% + .9rem);box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity));color:rgb(var(--color-foreground));display:flex;flex-direction:column;font-family:var(--font-body-family);font-size:1.2rem;font-style:var(--font-body-style);font-weight:var(--font-body-weight);gap:.6rem;left:50%;letter-spacing:0;line-height:1.35;max-width:min(36rem,calc(100vw - 4rem));opacity:0;padding:.8rem 1rem;pointer-events:none;position:absolute;text-align:left;transform:translate(calc(-50% + var(--cart-disclosure-tooltip-shift, 0px)));transition:opacity var(--duration-short) ease,visibility var(--duration-short) ease;visibility:hidden;width:max-content;z-index:3}.cart-item__disclosure-tooltip-row{align-items:flex-start;column-gap:.6rem;display:grid;grid-template-columns:var(--cart-disclosure-tooltip-symbol-width) minmax(0,1fr)}.cart-item__disclosure-tooltip-symbol-slot{align-items:flex-start;display:inline-flex;height:var(--cart-disclosure-tooltip-symbol-height);justify-content:center;margin-top:.16rem;width:var(--cart-disclosure-tooltip-symbol-width)}.cart-item__disclosure-tooltip-symbol{display:block;height:100%;max-width:100%;object-fit:contain;width:auto}.cart-item__disclosure-tooltip-title{min-width:0;overflow-wrap:anywhere;white-space:normal}@media(hover:hover)and (pointer:fine){.cart-item__disclosure:hover .cart-item__disclosure-tooltip{opacity:1;visibility:visible}}.cart-disclosure-modal{align-items:center;background:rgba(var(--color-foreground),.58);box-sizing:border-box;display:flex;height:100%;justify-content:center;left:0;opacity:0;overflow:auto;padding:2rem;pointer-events:none;position:fixed;top:0;visibility:hidden;width:100%;z-index:-1}.cart-disclosure-modal[open]{opacity:1;pointer-events:auto;visibility:visible;z-index:1001}.cart-disclosure-modal__content{background-color:rgb(var(--color-background));border:var(--popup-border-width) solid rgba(var(--color-foreground),var(--popup-border-opacity));border-radius:var(--popup-corner-radius);box-sizing:border-box;box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity));color:rgb(var(--color-foreground));margin:auto;max-height:calc(100vh - 4rem);max-width:min(100%,56rem);min-width:min(100%,39rem);overflow-y:auto;padding:2rem;position:relative;width:fit-content}.cart-disclosure-modal__close{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;color:rgba(var(--color-foreground),.65);cursor:pointer;display:flex;height:3.6rem;justify-content:center;margin:0;padding:0;position:absolute;right:.8rem;top:.8rem;width:3.6rem}.cart-disclosure-modal__close:hover{color:rgb(var(--color-foreground))}.cart-disclosure-modal__close .icon{height:1.6rem;width:1.6rem}.cart-disclosure-modal__title{font-family:var(--font-heading-family);font-size:calc(var(--font-heading-scale) * 1.8rem);font-weight:var(--font-body-weight-bold);line-height:calc(1 + .3/max(1,var(--font-heading-scale)));margin:0 4rem 1.8rem 0}.cart-disclosure-modal__item+.cart-disclosure-modal__item{margin-top:2.4rem}.cart-disclosure-modal__item-header{--cart-disclosure-modal-symbol-height: 1.8rem;--cart-disclosure-modal-symbol-width: calc(var(--cart-disclosure-modal-symbol-height) * 40 / 31);--cart-disclosure-modal-title-font-size: 1.4rem;--cart-disclosure-modal-title-line-height-ratio: calc(1 + .35 / var(--font-body-scale));--cart-disclosure-modal-title-line-height: calc( var(--cart-disclosure-modal-title-font-size) * var(--cart-disclosure-modal-title-line-height-ratio) );align-items:flex-start;display:grid;gap:.9rem;grid-template-columns:var(--cart-disclosure-modal-symbol-width) minmax(0,1fr);margin-bottom:.8rem}.cart-disclosure-modal__symbol-slot{align-items:flex-start;display:inline-flex;height:var(--cart-disclosure-modal-symbol-height);justify-content:center;margin-top:calc((var(--cart-disclosure-modal-title-line-height) - var(--cart-disclosure-modal-symbol-height)) / 2);width:var(--cart-disclosure-modal-symbol-width)}.cart-disclosure-modal__symbol{display:block;height:100%;max-width:100%;object-fit:contain;width:auto}.cart-disclosure-modal__item-title{font-size:var(--cart-disclosure-modal-title-font-size);font-weight:var(--font-body-weight-bold);line-height:var(--cart-disclosure-modal-title-line-height-ratio);margin:0}.cart-disclosure-modal__item-content{font-size:1.3rem;line-height:calc(1 + .45 / var(--font-body-scale))}.cart-disclosure-modal__item-content p{margin:0}.cart-disclosure-modal__item-content p+p{margin-top:1rem}@media screen and (max-width:749px){.cart-disclosure-modal{padding:1.6rem}.cart-disclosure-modal__content{max-height:calc(100vh - 3.2rem);max-width:100%;padding:1.8rem}}.cart-item__name:hover{text-decoration:underline;text-underline-offset:.3rem;text-decoration-thickness:.2rem}.cart-item__price-wrapper>*{display:block;margin:0;padding:0}.cart-item__discounted-prices dd{margin:0}.cart-item__discounted-prices .cart-item__old-price{font-size:1.4rem}.cart-item__old-price{opacity:.7}.cart-item__final-price{font-weight:400}.product-option{font-size:1.4rem;word-break:break-word;line-height:calc(1 + .5 / var(--font-body-scale))}.cart-item cart-remove-button{display:flex;margin-left:1rem}@media screen and (min-width:750px)and (max-width:989px){.cart-item cart-remove-button{width:4.5rem;height:4.5rem}}cart-remove-button .button{min-width:calc(4.5rem / var(--font-body-scale));min-height:4.5rem;padding:0;margin:0 .1rem .1rem 0}cart-remove-button .button:before,cart-remove-button .button:after{content:none}cart-remove-button .button:not([disabled]):hover{color:rgb(var(--color-foreground))}@media screen and (min-width:750px){cart-remove-button .button{min-width:3.5rem;min-height:3.5rem}}cart-remove-button .icon-remove{height:1.5rem;width:1.5rem}.cart-item .loading__spinner{top:0;left:auto;right:auto;bottom:0;padding:0}@media screen and (min-width:750px){.cart-item .loading__spinner{right:0;padding-top:4.5rem;bottom:auto}}.cart-item .loading__spinner:not(.hidden)~*{visibility:hidden}.cart-item__error{display:flex;align-items:flex-start;margin-top:.2rem;width:min-content;min-width:100%}.cart-item__error-text{font-size:1.3rem;line-height:1.4;letter-spacing:.04rem;order:1}.cart-item__error-text+.svg-wrapper{flex-shrink:0;width:1.5rem;height:1.5rem;margin-right:.7rem;margin-top:.25rem}.cart-item__error-text:empty+.svg-wrapper{display:none}.product-option+.product-option{margin-top:.4rem}.product-option *{display:inline;margin:0}.cart-items thead th{text-transform:uppercase}@media screen and (max-width:749px){.cart-items,.cart-items thead,.cart-items tbody{display:block;width:100%}.cart-items thead tr{display:flex;justify-content:space-between;border-bottom:.1rem solid rgba(var(--color-foreground),.2);margin-bottom:4rem}.cart-item{display:grid;grid-template:repeat(2,auto) / repeat(4,1fr);gap:1.5rem;margin-bottom:3.5rem}.cart-item:has(+.cart-item__nested-line){margin-bottom:1.5rem}.cart-item:last-child{margin-bottom:0}.cart-item__media{grid-row:1 / 3}.cart-item__details{grid-column:2 / 4}.cart-item__quantity{grid-column:2 / 5}.cart-item__quantity-wrapper{flex-wrap:wrap}.cart-item__totals{display:flex;align-items:flex-start;justify-content:flex-end}}@media screen and (min-width:750px){.cart-items{border-spacing:0;border-collapse:separate;box-shadow:none;width:100%;display:table}.cart-items th{border-bottom:.1rem solid rgba(var(--color-foreground),.08)}.cart-items thead th:first-child{width:50%}.cart-items th+th{padding-left:4rem}.cart-items td{vertical-align:top;padding-top:4rem}.cart-items .cart-item__nested-line td{padding-top:1rem}.cart-item{display:table-row}.cart-item>td+td{padding-left:4rem}.cart-item__details{width:35rem}.cart-item__media{width:10rem}.cart-item__price-wrapper>*:only-child:not(.cart-item__discounted-prices){margin-top:1rem}.cart-item__error{margin-left:.3rem}}@media screen and (min-width:990px){.cart-item .cart-item__quantity,.cart-items .cart-items__heading--wide{padding-left:6rem}.cart-item__details{width:50rem}.cart-items thead th:first-child{width:60%}}@media screen and (min-width:750px){.cart-items .cart-items__heading--quantity,.cart-item .cart-item__quantity,.cart-item__quantity--info quantity-popover>*{padding-left:5rem}.cart-item .cart-item__quantity--info,.cart-item__quantity--info .cart-item__quantity-wrapper,.cart-item__quantity--info .cart-items__info{padding-left:0}}@media screen and (max-width:989px){.cart-items .quantity-popover__info-button{padding-left:0}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-cart-items.css.map */

/* ---- component-cart.css ---- */
.cart{position:relative;display:block}.cart__empty-text,.is-empty .cart__contents,cart-items.is-empty .title-wrapper-with-link,.is-empty .cart__footer{display:none}.is-empty .cart__empty-text,.is-empty .cart__warnings{display:block}.cart__warnings{display:none;text-align:center;padding:3rem 0 1rem}.cart__empty-text{margin:4.5rem 0 2rem}.cart__contents>*+*{margin-top:2.5rem}.cart__login-title{margin:5.5rem 0 .5rem}.cart__login-paragraph{margin-top:.8rem}.cart__login-paragraph a{font-size:inherit}@media screen and (min-width:990px){.cart__warnings{padding:7rem 0 1rem}.cart__empty-text{margin:0 0 3rem}}cart-items{display:block}.cart__items{position:relative;padding-bottom:3rem;border-bottom:.1rem solid rgba(var(--color-foreground),.08)}.cart__items--disabled{pointer-events:none}.cart__footer-wrapper:last-child .cart__footer{padding-bottom:5rem}.cart__footer>div:only-child{margin-left:auto}.cart__footer>*+*{margin-top:6.5rem}.cart__footer .discounts{margin-bottom:1rem}.cart__note{height:fit-content;top:2.5rem}.cart__note label{display:flex;align-items:flex-end;position:absolute;line-height:1;height:1.8rem;top:-3rem;color:rgba(var(--color-foreground),.75)}.cart__note .field__input{height:100%;position:relative;border-radius:var(--inputs-radius);padding:1rem 2rem}.cart__note .text-area{resize:vertical}.cart__note:after,.cart__note:hover.cart__note:after,.cart__note:before,.cart__note:hover.cart__note:before,.cart__note .field__input:focus,.cart__note .field__input{border-bottom-right-radius:0}@media screen and (min-width:750px){.cart__items{grid-column-start:1;grid-column-end:3;padding-bottom:4rem}.cart__contents>*+*{margin-top:0}.cart__items+.cart__footer{grid-column:2}.cart__footer{display:flex;justify-content:space-between;border:0}.cart__footer-wrapper:last-child{padding-top:0}.cart__footer>*{width:35rem}.cart__footer>*+*{margin-left:4rem;margin-top:0}}.cart__ctas button{width:100%}.cart__ctas>*+*{margin-top:1rem}.cart__update-button{margin-bottom:1rem}.cart__dynamic-checkout-buttons{max-width:36rem;margin:0 auto}.cart__dynamic-checkout-buttons:has(.dynamic-checkout__content:empty){margin:0}.cart__blocks>*+*{margin-top:1rem}.cart-note__label{display:inline-block;margin-bottom:1rem;line-height:calc(1 + 1 / var(--font-body-scale))}.tax-note{margin:2.2rem 0 1.6rem auto;text-align:center;display:block}.cart__checkout-button{max-width:36rem}.cart__ctas{text-align:center}@media screen and (min-width:750px){.cart-note{max-width:35rem}.cart__update-button{margin-bottom:0;margin-right:.8rem}.tax-note{margin-bottom:2.2rem;text-align:right}[data-shopify-buttoncontainer]{justify-content:flex-end}.cart__ctas{display:flex;gap:1rem}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-cart.css.map */

/* ---- component-discounts.css ---- */
.discounts{font-size:1.2rem}.discounts__discount{display:flex;align-items:center;line-height:calc(1 + .5 / var(--font-body-scale))}.discounts__discount svg{color:rgba(var(--color-button),var(--alpha-button-background))}.discounts__discount--position{justify-content:center}@media screen and (min-width:750px){.discounts__discount--position{justify-content:flex-end}}.discounts__discount>.icon{color:rgb(var(--color-foreground));width:1.2rem;height:1.2rem;margin-right:.7rem}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-discounts.css.map */

/* ---- component-facets.css ---- */
.facets-container{display:grid;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(2,auto);padding-top:1rem}.active-facets-mobile{margin-bottom:.5rem}.mobile-facets__list{overflow-y:auto}@media screen and (min-width:750px){.facets-container>*+*{margin-top:0}.facets__form .product-count{grid-column-start:3;align-self:flex-start}}@media screen and (max-width:989px){.facets-container{grid-template-columns:auto minmax(0,max-content);column-gap:2rem}}.facet-filters{align-items:flex-start;display:flex;grid-column:2;grid-row:1;padding-left:2.5rem}@media screen and (min-width:990px){.facet-filters{padding-left:3rem}}.facet-filters__label{display:block;color:rgba(var(--color-foreground),.85);font-size:1.4rem;margin:0 2rem 0 0}.facet-filters__summary{display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;cursor:pointer;height:4.5rem;padding:0 1.5rem;min-width:25rem;margin-top:2.4rem;border:.1rem solid rgba(var(--color-foreground),.55)}.facet-filters__summary:after{position:static}.facet-filters__field{align-items:center;display:flex;flex-grow:1;justify-content:flex-end}.facet-filters__field .select{width:auto}.facet-filters__field .select:after,.facet-filters__field .select:before,.mobile-facets__sort .select:after,.mobile-facets__sort .select:before{content:none}.facet-filters__field .select__select,.mobile-facets__sort .select__select{border-radius:0;min-width:auto;min-height:auto;transition:none}.select .icon-caret{width:10px}.facet-filters button{margin-left:2.5rem}.facet-filters__sort{background-color:transparent;border:0;border-radius:0;font-size:1.4rem;height:auto;line-height:calc(1 + .5 / var(--font-body-scale));margin:0;padding-left:0;padding-right:1.75rem}.facet-filters__sort+.icon-caret{right:0}@media screen and (forced-colors:active){.facet-filters__sort{border:none}}.facet-filters__sort,.facet-filters__sort:hover{box-shadow:none;filter:none;transition:none}.mobile-facets__sort .select__select:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:.3rem;box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3)}.mobile-facets__sort .select__select.focused{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:.3rem;box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3)}.facet-filters__sort:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:1rem;box-shadow:0 0 0 1rem rgb(var(--color-background)),0 0 .2rem 1.2rem rgba(var(--color-foreground),.3)}.facet-filters__sort.focused{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:1rem;box-shadow:0 0 0 1rem rgb(var(--color-background)),0 0 .2rem 1.2rem rgba(var(--color-foreground),.3)}.facets{display:block;grid-column-start:span 2}.facets__form{display:grid;gap:0 3.5rem;grid-template-columns:1fr max-content max-content;margin-bottom:.5rem}.facets__wrapper{align-items:center;align-self:flex-start;grid-column:1;grid-row:1;display:flex;flex-wrap:wrap}.facets__heading{display:block;color:rgba(var(--color-foreground),.85);font-size:1.4rem;margin:-1.5rem 2rem 0 0}.facets__reset{margin-left:auto}.facets__disclosure{margin-right:3.5rem}.facets__summary{color:rgba(var(--color-foreground),.75);font-size:1.4rem;padding:0 1.75rem 0 0;margin-bottom:1.5rem}.facets__summary .svg-wrapper{height:auto;width:auto}.facets__disclosure fieldset{padding:0;margin:0;border:0}.facets__disclosure[open] .facets__summary,.facets__summary:hover{color:rgb(var(--color-foreground))}.facets__disclosure[open] .facets__display,.facets__disclosure-vertical[open] .facets__display-vertical{animation:animateMenuOpen var(--duration-default) ease}.facets__summary span:first-of-type{transition:text-decoration var(--duration-short) ease}.facets__summary:hover .facets__summary-label{text-decoration:underline;text-underline-offset:.3rem}.facets__and-helptext{color:rgba(var(--color-foreground),.5);font-size:calc(var(--font-heading-scale) * 1.2rem);line-height:calc(var(--font-heading-scale) * 1.2rem)}@media only screen and (min-width:750px){.facets__and-helptext{font-size:calc(var(--font-heading-scale) * 1.3rem);line-height:calc(var(--font-heading-scale) * 1.3rem)}}.facets__disclosure .facets__and-helptext,.facets__disclosure-vertical .facets__and-helptext{display:none}.facets__disclosure[open] .facets__and-helptext,.facets__disclosure-vertical[open] .facets__and-helptext{display:block}.disclosure-has-popup[open]>.facets__summary:before{z-index:2}.facets__summary>span{line-height:calc(1 + .3 / var(--font-body-scale))}.facets__summary .icon-caret{right:0}.facets__display{border-width:var(--popup-border-width);border-style:solid;border-color:rgba(var(--color-foreground),var(--popup-border-opacity));border-radius:var(--popup-corner-radius);box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity));background-color:rgb(var(--color-background));position:absolute;top:calc(100% + .5rem);left:-1.2rem;width:35rem;max-height:55rem;overflow-y:auto}.facets__header{border-bottom:1px solid rgba(var(--color-foreground),.2);padding:1.5rem 2rem;display:flex;justify-content:space-between;font-size:1.4rem;position:sticky;top:0;background-color:rgb(var(--color-background));z-index:1}.facets__header facet-remove{align-self:center}.facets__list{padding:.5rem 2rem}.facets-layout-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;padding:2rem 2.4rem}.facets-layout-list--swatch{--swatch-input--size: 2.4rem}.facets-layout-grid.facets-layout-grid{gap:1rem}.facets-layout-grid.facets__list--vertical{padding:1rem 0}.facets__item{display:flex;align-items:center}.facets-layout-list .facets__label:hover .facet-checkbox__text-label,.facets-layout-list input:focus~.facet-checkbox__text-label{text-decoration:underline}.facets-layout-grid>*{align-items:flex-start}.facets-layout-grid .facets__label{display:flex;flex-direction:column;padding:0;height:100%;font-size:1.3rem}.facets-layout-grid .facets__image-wrapper{display:block;position:relative;aspect-ratio:1 / 1;min-height:0;padding:.4rem}.facets__image{width:100%;height:100%;object-fit:contain}.facets-layout-grid--image .facets__label{outline-style:solid;outline-color:transparent;transition-property:outline-color,outline-width,box-shadow;transition-duration:var(--duration-short);transition-timing-function:ease}.facets-layout-grid--image .facet-checkbox__text{padding:.4rem}.facets-layout-grid--image .facets__label.active{outline-color:rgb(var(--color-foreground));outline-width:.1rem}.facets-layout-grid--image .facets__label:hover{outline-color:rgba(var(--color-foreground),.4);outline-width:.2rem}.facets-layout-grid--image .facets__label:has(:focus-visible){outline-color:rgba(var(--color-foreground),.5);outline-width:.2rem;box-shadow:0 0 3px 1px rgba(var(--color-foreground),.25)}.facets-layout-grid--image .facets__label.active:has(:focus-visible){outline-color:rgb(var(--color-foreground));outline-width:.1rem;box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.5),0 0 .7rem .1rem rgba(var(--color-foreground),.25)}.facets-layout-grid--image .facets__label.disabled{outline:none}.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper{outline:.1rem solid rgb(var(--color-foreground))}.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper:before{content:"";position:absolute;bottom:0;left:0;width:141.4%;height:.1rem;background-color:rgb(var(--color-foreground));transform:rotate(-45deg);transform-origin:left}.facets-layout-grid--image .facets__label.disabled .disabled-line{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;background:transparent;margin:0}.facets-layout-grid--image .facets__label.disabled .disabled-line line{stroke:rgb(var(--color-foreground));stroke-width:1}.list-menu__item label,.list-menu__item input[type=checkbox]{cursor:pointer}.facet-checkbox{padding:1rem 2rem 1rem 0;flex-grow:1;position:relative;font-size:1.4rem;display:flex;word-break:break-word}.facets__label:hover,.facets__label.active,.facets__label:has(:focus-visible){color:rgba(var(--color-foreground),1)}.facets-layout .facets__label.disabled{pointer-events:none}.facets-layout:not(.facets-layout-list--swatch,.facets-layout-grid--image) .facets__label.disabled{opacity:.4}.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper{opacity:.2}:is(.facets-layout-list--swatch,.facets-layout-grid--image) .facets__label.disabled .facet-checkbox__text{opacity:.4}.facets-layout-list--text input[type=checkbox]{position:absolute;opacity:1;width:1.6rem;height:1.6rem;top:.7rem;left:-.4rem;z-index:-1;appearance:none;-webkit-appearance:none}.facets-layout-grid input[type=checkbox],.facets-layout-list--swatch input[type=checkbox]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;margin:0;opacity:0;width:100%;height:100%}.facets-layout-list--swatch .facets__label{display:flex;align-items:center;gap:.8rem}.swatch-input-wrapper{display:flex}.facet-checkbox>svg,.facet-checkbox>.svg-wrapper{background-color:rgb(var(--color-background));margin-right:1.2rem;flex-shrink:0}.facet-checkbox .svg-wrapper{visibility:hidden;position:absolute;left:.3rem;z-index:5;top:1.4rem;width:1.1rem;height:.7rem}.facet-checkbox>input[type=checkbox]:checked~.svg-wrapper>.icon-checkmark{visibility:visible}@media screen and (forced-colors:active){.facet-checkbox>svg{background-color:inherit;border:.1rem solid rgb(var(--color-background))}.facet-checkbox>input[type=checkbox]:checked~.svg-wrapper>.icon-checkmark{border:none}}.facets__price{display:flex;padding:2rem}.facets__price .field+.field-currency{margin-left:2rem}.facets__price .field{align-items:center}.facets__price .field-currency{align-self:center;margin-right:.6rem}.facets__price .field__label{left:1.5rem}button.facets__button{min-height:0;margin:0 0 0 .5rem;box-shadow:none;padding-top:1.4rem;padding-bottom:1.4rem}.active-facets{display:flex;flex-wrap:wrap;width:100%;grid-column:1 / -1;grid-row:2;margin-top:-.5rem}.active-facets__button{display:block;margin-right:1.5rem;margin-top:1.5rem;padding-left:.2rem;padding-right:.2rem;text-decoration:none}span.active-facets__button-inner{color:rgb(var(--color-foreground));box-shadow:0 0 0 .1rem rgb(var(--color-foreground));border-radius:2.6rem;font-size:1rem;min-height:0;min-width:0;padding:.25rem 1.25rem;display:flex;align-items:center}span.active-facets__button-inner:before,span.active-facets__button-inner:after{display:none}.active-facets__button-wrapper{align-items:center;display:flex;justify-content:center;padding-top:1.5rem}.active-facets__button-wrapper *{font-size:1rem}@media screen and (min-width:990px){.active-facets__button{margin-right:1.5rem}.active-facets__button-wrapper *,span.active-facets__button-inner{font-size:1.4rem}}@media screen and (max-width:989px){.active-facets{margin:0 -1.2rem -1.2rem}.active-facets__button,.active-facets__button-remove{margin:0;padding:1.2rem}span.active-facets__button-inner{padding-bottom:.1rem;padding-top:.1rem}.active-facets__button-wrapper{padding-top:0;margin-left:1.2rem}}.active-facets__button:hover .active-facets__button-inner{box-shadow:0 0 0 .2rem rgb(var(--color-foreground))}.active-facets__button--light .active-facets__button-inner{box-shadow:0 0 0 .1rem rgba(var(--color-foreground),.2)}.active-facets__button--light:hover .active-facets__button-inner{box-shadow:0 0 0 .2rem rgba(var(--color-foreground),.4)}a.active-facets__button:focus-visible{outline:none;box-shadow:none}@media(forced-colors:active){a.active-facets__button:focus-visible{outline:transparent solid 1px}}a.active-facets__button.focused{outline:none;box-shadow:none}a.active-facets__button:focus-visible .active-facets__button-inner{box-shadow:0 0 0 .1rem rgba(var(--color-foreground),.2),0 0 0 .2rem rgb(var(--color-background)),0 0 0 .4rem rgb(var(--color-foreground));outline:none}a.active-facets__button.focused .active-facets__button-inner{box-shadow:0 0 0 .1rem rgba(var(--color-foreground),.2),0 0 0 .2rem rgb(var(--color-background)),0 0 0 .4rem rgb(var(--color-foreground));outline:none}.active-facets__button .svg-wrapper{align-self:center;flex-shrink:0;margin-left:.6rem;margin-right:-.2rem;pointer-events:none;width:1.2rem}@media all and (min-width:990px){.active-facets__button .svg-wrapper{margin-right:-.4rem;margin-top:.1rem;width:1.2rem}}.active-facets facet-remove:only-child{display:none}.facets-vertical .active-facets .active-facets-vertical-filter:only-child>facet-remove{display:none}.facets-vertical .active-facets-vertical-filter{display:flex;width:100%;justify-content:space-between}.facets-vertical .active-facets-vertical-filter .active-facets__button-wrapper{padding-top:0;display:flex;align-items:flex-start}.facets-vertical .active-facets__button{margin-top:0}.active-facets__button.disabled,.mobile-facets__clear.disabled{pointer-events:none}.mobile-facets__clear-wrapper{align-items:center;display:flex;justify-content:center}.mobile-facets{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;background-color:rgba(var(--color-foreground),.5);pointer-events:none}.mobile-facets__disclosure{display:flex}.mobile-facets__wrapper{margin-left:0;display:flex}.mobile-facets__wrapper .disclosure-has-popup[open]>summary:before{height:100vh;z-index:3}.mobile-facets__inner{background-color:rgb(var(--color-background));width:calc(100% - 5rem);margin-left:auto;height:100%;overflow-y:auto;pointer-events:all;transition:transform var(--duration-default) ease;max-width:37.5rem;display:flex;flex-direction:column;border-color:rgba(var(--color-foreground),var(--drawer-border-opacity));border-style:solid;border-width:0 0 0 var(--drawer-border-width);filter:drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow),var(--drawer-shadow-opacity)))}.menu-opening .mobile-facets__inner{transform:translate(0)}.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner{transform:translate(105vw)}.mobile-facets__header{border-bottom:.1rem solid rgba(var(--color-foreground),.08);padding:1rem 2.5rem;text-align:center;display:flex;position:sticky;top:0;z-index:2}.mobile-facets__header-inner{flex-grow:1;position:relative}.mobile-facets__info{padding:0 2.6rem}.mobile-facets__heading{font-size:calc(var(--font-heading-scale) * 1.4rem);margin:0}.mobile-facets__count{color:rgba(var(--color-foreground),.7);font-size:1.3rem;margin:0;flex-grow:1}.mobile-facets__open-wrapper{display:inline-block}.mobile-facets__open{text-align:left;width:100%;padding-top:.5rem;padding-bottom:.5rem;display:flex;align-items:center;color:rgba(var(--color-link),var(--alpha-link))}.mobile-facets__open:hover{color:rgb(var(--color-link))}.mobile-facets__open:hover line,.mobile-facets__open:hover circle{stroke:rgb(var(--color-link))}.mobile-facets__open-label{transition:text-decoration var(--duration-short) ease}.mobile-facets__open:hover .mobile-facets__open-label{text-decoration:underline;text-underline-offset:.3rem}.mobile-facets__open>*+*{margin-left:1rem}.mobile-facets__open .svg-wrapper{width:2rem}.mobile-facets__open line,.mobile-facets__open circle{stroke:rgba(var(--color-link),var(--alpha-link))}.mobile-facets__close{display:none;align-items:center;justify-content:center;position:fixed;top:.7rem;right:1rem;width:4.4rem;height:4.4rem;z-index:101;opacity:0;transition:opacity var(--duration-short) ease}.mobile-facets__close .svg-wrapper{width:2.2rem}details.menu-opening .mobile-facets__close{display:flex;opacity:1}details.menu-opening .mobile-facets__close .svg-wrapper{margin:0}.mobile-facets__close-button{align-items:center;background-color:transparent;font-size:1.4rem;font:inherit;letter-spacing:inherit;margin-top:1.5rem;padding:1.2rem 2.6rem;text-decoration:none;display:grid;grid-template-columns:min-content 1fr;text-align:start}.mobile-facets__close-button>.facets__and-helptext{grid-column-start:2}.mobile-facets__close-button .icon-arrow{transform:rotate(180deg);margin-right:1rem}.mobile-facets__main{padding:2.7rem 0 0;position:relative;z-index:1;flex-grow:1;display:flex;flex-direction:column;overflow-y:auto}.mobile-facets__details[open] .icon-caret{transform:rotate(180deg)}.mobile-facets__highlight{position:absolute;top:0;left:0;right:0;bottom:0;display:block;background-color:rgba(var(--color-foreground),.04);opacity:0;visibility:hidden}.mobile-facets__checkbox:checked+.mobile-facets__highlight{opacity:1;visibility:visible}.mobile-facets__summary{padding:1.3rem 2.5rem}.mobile-facets__summary .svg-wrapper{margin-left:auto}.mobile-facets__summary>div{display:flex;align-items:center}.js .mobile-facets__submenu{position:absolute;top:0;width:100%;bottom:0;left:0;z-index:3;transform:translate(100%);visibility:hidden;display:flex;flex-direction:column}.js details[open]>.mobile-facets__submenu{transition:transform .4s cubic-bezier(.29,.63,.44,1),visibility .4s cubic-bezier(.29,.63,.44,1)}.js details[open].menu-opening>.mobile-facets__submenu{transform:translate(0);visibility:visible}.js .menu-drawer__submenu .mobile-facets__submenu{overflow-y:auto}.js .mobile-facets .submenu-open{visibility:hidden}.mobile-facets__item{position:relative}input.mobile-facets__checkbox{border:0;width:1.6rem;height:1.6rem;position:absolute;left:2.1rem;top:1.2rem;z-index:0;appearance:none;-webkit-appearance:none}.mobile-facets__label{padding:1.5rem 2rem 1.5rem 2.5rem;width:100%;transition:background-color .2s ease;word-break:break-word;display:flex}.mobile-facets__label>svg{background-color:rgb(var(--color-background));position:relative;z-index:2;margin-right:1.2rem;flex-shrink:0}.mobile-facets__label .icon-checkmark{position:absolute;top:1.9rem;left:2.8rem;visibility:hidden;width:11px;height:9px}.mobile-facets__label>input[type=checkbox]:checked~.icon-checkmark{visibility:visible}.mobile-facets__arrow,.mobile-facets__summary .icon-caret{margin-left:auto;display:block}.mobile-facets__footer{border-top:.1rem solid rgba(var(--color-foreground),.08);padding:2rem;bottom:0;position:sticky;display:flex;z-index:2;margin-top:auto;background-color:rgb(var(--color-background));background:var(--gradient-background)}.mobile-facets__footer>*+*{margin-left:1rem}.mobile-facets__footer>*{width:50%}.mobile-facets__sort{display:flex;justify-content:space-between}.mobile-facets__sort label{flex-shrink:0}.mobile-facets__sort .select{width:auto}.mobile-facets__sort .select .icon-caret{right:0}.mobile-facets__sort .select__select{background-color:transparent;border-radius:0;box-shadow:none;filter:none;margin-left:.5rem;margin-right:.5rem;padding-left:.5rem;padding-right:1.5rem}.product-count{align-self:center;position:relative;text-align:right}.product-count__text{font-size:1.4rem;line-height:calc(1 + .5 / var(--font-body-scale));margin:0}#ProductCountDesktop.loading,#ProductCount.loading{visibility:hidden}.product-count .loading__spinner,.product-count-vertical .loading__spinner{position:absolute;padding-top:.6rem;right:0;top:50%;transform:translateY(-50%);width:1.8rem}@media screen and (min-width:750px){.facets-vertical{display:flex}.facets-wrap-vertical{border:none;padding-left:0}.facets__form-vertical{display:flex;flex-direction:column;width:26rem}.facets__disclosure-vertical{border-top:.1rem solid rgba(var(--color-foreground),.1);margin-right:0}.facets-vertical .facets__summary{padding-top:1.5rem;margin-bottom:0;padding-bottom:1.5rem}.facets__heading--vertical{margin:0 0 1.5rem;font-size:1.5rem}.facets__header-vertical{padding:1.5rem 2rem 1.5rem 0;font-size:1.4rem}.facets__display-vertical{padding-bottom:1.5rem}.facets-vertical .facets-wrapper{padding-right:3rem}.facets-vertical .facets-wrapper--no-filters{display:none}.facets-vertical .product-grid-container{width:100%}.facets-vertical-form{display:flex;justify-content:flex-end}.product-count-vertical{margin-left:3.5rem;position:relative}.facets-vertical .active-facets__button-wrapper{margin-bottom:2rem}.facets-vertical .facets__price{padding:.5rem .5rem .5rem 0}.facets-vertical .facets__price .field:last-of-type{margin-left:1rem}.facets-vertical .active-facets__button{margin-bottom:1.5rem}.facets-vertical .facet-checkbox input[type=checkbox]{z-index:0}.facets-vertical .active-facets facet-remove:last-of-type{margin-bottom:1rem}.facets-vertical .active-facets{margin:0;align-items:flex-start}.facets__disclosure-vertical[open] .facets__summary .icon-caret{transform:rotate(180deg)}.facets-container-drawer{display:flex;flex-flow:row wrap;align-items:center;column-gap:0}.facets-container-drawer .mobile-facets__wrapper{margin-right:2rem;flex-grow:1}.facets-container-drawer .product-count{margin:0 0 .5rem 3.5rem}.facets-container-drawer .facets-pill{width:100%}.facets-container-drawer .facets__form{display:block}}@media screen and (min-width:750px)and (max-width:989px){.facets-vertical .active-facets__button{padding:1rem;margin-bottom:0;margin-left:-.5rem}.facets-vertical .active-facets__button-remove{padding:0 1rem 1rem}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-facets.css.map */

/* ---- template-collection.css ---- */
@media screen and (max-width:749px){.collection .grid__item:only-child{flex:0 0 100%;max-width:100%}}@media screen and (max-width:989px){.collection .slider.slider--tablet{margin-bottom:1.5rem}}.collection .loading-overlay{position:absolute;z-index:1;width:1.8rem}@media screen and (max-width:749px){.collection .loading-overlay{top:0;right:0}}@media screen and (min-width:750px){.collection .loading-overlay{left:0}}.collection .loading-overlay{top:0;right:0;bottom:0;left:0;display:none;width:100%;padding:0 1.5rem;opacity:.7}@media screen and (min-width:750px){.collection .loading-overlay{padding-left:5rem;padding-right:5rem}}.collection.loading .loading-overlay{display:block}.collection--empty .title-wrapper{margin-top:10rem;margin-bottom:15rem}@media screen and (max-width:989px){.collection .slider--tablet.product-grid{scroll-padding-left:1.5rem}}.collection__description>*{margin:0}.collection__title.title-wrapper{margin-bottom:2.5rem}.collection__title .title:not(:only-child){margin-bottom:1rem}@media screen and (min-width:990px){.collection__title--desktop-slider .title{margin-bottom:2.5rem}.collection__title.title-wrapper--self-padded-tablet-down{padding:0 5rem}.collection slider-component:not(.page-width-desktop){padding:0}.collection--full-width slider-component:not(.slider-component-desktop){padding:0 1.5rem;max-width:none}}.collection__view-all a:not(.link){margin-top:1rem}
/*# sourceMappingURL=/cdn/shop/t/10/assets/template-collection.css.map */

/* ---- section-main-page.css ---- */
.page-title {
  margin-top: 0;
}

.main-page-title {
  margin-bottom: 3rem;
}

@media screen and (min-width: 750px) {
  .main-page-title {
    margin-bottom: 4rem;
  }
}

.page-placeholder-wrapper {
  display: flex;
  justify-content: center;
}

.page-placeholder {
  width: 52.5rem;
  height: 52.5rem;
}

/* ---- section-contact-form.css ---- */
.contact img{max-width:100%}.contact .form__message{align-items:flex-start}.contact .icon-success{margin-top:.2rem}.contact .field{margin-bottom:1.5rem}@media screen and (min-width:750px){.contact .field{margin-bottom:2rem}}.contact__button{margin-top:3rem}@media screen and (min-width:750px){.contact__button{margin-top:4rem}}@media screen and (min-width:750px){.contact__fields{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:2rem}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/section-contact-form.css.map */

/* ---- section-related-products.css ---- */
.related-products {
  display: block;
}

.related-products__heading {
  margin: 0 0 3rem;
}

/* ---- section-main-product.css ---- */
product-info{display:block}.product{margin:0}.product.grid{gap:0}.product--no-media{max-width:57rem;margin:0 auto}.product__media-wrapper{padding-left:0}@media screen and (min-width:750px){.product__column-sticky{display:block;position:sticky;top:3rem;z-index:2}.product--thumbnail .thumbnail-list{padding-right:var(--media-shadow-horizontal-offset)}.product__info-wrapper{padding:0 0 0 5rem}.product__info-wrapper--extra-padding{padding:0 0 0 8rem}.product--right .product__info-wrapper{padding:0 5rem 0 0}.product--right .product__info-wrapper--extra-padding{padding:0 8rem 0 0}.product--right .product__media-list{margin-bottom:2rem}.product__media-container .slider-buttons{display:none}.product--right .product__media-wrapper{order:2}}@media screen and (min-width:990px){.product--large:not(.product--no-media) .product__media-wrapper{max-width:65%;width:calc(65% - var(--grid-desktop-horizontal-spacing) / 2)}.product--large:not(.product--no-media) .product__info-wrapper{padding:0 0 0 4rem;max-width:35%;width:calc(35% - var(--grid-desktop-horizontal-spacing) / 2)}.product--large:not(.product--no-media).product--right .product__info-wrapper{padding:0 4rem 0 0}.product--medium:not(.product--no-media) .product__media-wrapper,.product--small:not(.product--no-media) .product__info-wrapper{max-width:55%;width:calc(55% - var(--grid-desktop-horizontal-spacing) / 2)}.product--medium:not(.product--no-media) .product__info-wrapper,.product--small:not(.product--no-media) .product__media-wrapper{max-width:45%;width:calc(45% - var(--grid-desktop-horizontal-spacing) / 2)}}.shopify-payment-button__button{font-family:inherit;min-height:4.6rem}.shopify-payment-button__button [role=button].focused{outline:.2rem solid rgba(var(--color-foreground),.5)!important;outline-offset:.3rem;box-shadow:0 0 0 .1rem rgba(var(--color-button),var(--alpha-button-border)),0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3)!important}.shopify-payment-button__button [role=button]:focus:not(:focus-visible){outline:0;box-shadow:none!important}.shopify-payment-button__button [role=button]:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.5)!important;box-shadow:0 0 0 .1rem rgba(var(--color-button),var(--alpha-button-border)),0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3)!important}.shopify-payment-button__button--unbranded{background-color:rgba(var(--color-button),var(--alpha-button-background));color:rgb(var(--color-button-text));font-size:1.4rem;line-height:calc(1 + .2 / var(--font-body-scale));letter-spacing:.07rem}.shopify-payment-button__button--unbranded::selection{background-color:rgba(var(--color-button-text),.3)}.shopify-payment-button__button--unbranded:hover,.shopify-payment-button__button--unbranded:hover:not([disabled]){background-color:rgba(var(--color-button),var(--alpha-button-background))}.shopify-payment-button__more-options{margin:1.6rem 0 1rem;font-size:1.2rem;line-height:calc(1 + .5 / var(--font-body-scale));letter-spacing:.05rem;text-decoration:underline;text-underline-offset:.3rem}.shopify-payment-button__button+.shopify-payment-button__button--hidden{display:none}.product-form{display:block}.product-form__error-message-wrapper:not([hidden]){display:flex;align-items:flex-start;font-size:1.3rem;line-height:1.4;letter-spacing:.04rem;margin-bottom:1.5rem}.product-form__error-message-wrapper .svg-wrapper{flex-shrink:0;width:1.5rem;height:1.5rem;margin-right:.7rem;margin-top:.25rem}.product-form__input{flex:0 0 100%;padding:0;margin:0 0 1.2rem;max-width:44rem;min-width:fit-content;border:none}.product-form__input .form__label{padding-left:0}.product-form__input .select{max-width:100%}.product-form__input .svg-wrapper{right:1.5rem}.product-form__submit{margin-bottom:1rem}.product-form__submit[aria-disabled=true]+.shopify-payment-button .shopify-payment-button__button[disabled],.product-form__submit[disabled]+.shopify-payment-button .shopify-payment-button__button[disabled]{cursor:not-allowed;opacity:.5}@media screen and (forced-colors:active){.product-form__submit[aria-disabled=true]{color:Window}}.shopify-payment-button__more-options{color:rgb(var(--color-foreground))}.shopify-payment-button__button{font-size:1.5rem;letter-spacing:.1rem}.product__info-container>*+*{margin:1.5rem 0}.product__info-container iframe{max-width:100%}.product__info-container .product-form,.product__info-container .product__description,.product__info-container .icon-with-text{margin:2.5rem 0}.product__text{margin-bottom:0}a.product__text{display:block;text-decoration:none;color:rgba(var(--color-foreground),.75)}.product__text.caption-with-letter-spacing{text-transform:uppercase}.product__title{word-break:break-word;margin-bottom:1.5rem}.product__title>*{margin:0}.product__title>a{display:none}.product__title+.product__text.caption-with-letter-spacing{margin-top:-1.5rem}.product__text.caption-with-letter-spacing+.product__title{margin-top:0}.product__accordion .accordion__content{padding:0 1rem}.product .price .badge,.product .price__container{margin-bottom:.5rem}.product .price dl{margin-top:.5rem;margin-bottom:.5rem}.product .price--sold-out .price__badge-sale{display:none}@media screen and (min-width:750px){.product__info-container{max-width:60rem}.product__info-container .price--on-sale .price-item--regular{font-size:1.6rem}.product__info-container>*:first-child{margin-top:0}}.product__description-title{font-weight:600}.product--no-media .product__title,.product--no-media .product__text,.product--no-media .product__tax,.product--no-media .product__sku,.product--no-media shopify-payment-terms{text-align:center}.product--no-media .product__media-wrapper,.product--no-media .product__info-wrapper{padding:0}.product__tax{margin-top:-1.4rem}.product--no-media .share-button{max-width:100%}.product--no-media .product-form__quantity,.product--no-media .share-button,.product--no-media .product__view-details,.product--no-media .product__pickup-availabilities,.product--no-media .product-form{display:flex;align-items:center;justify-content:center;text-align:center}.product--no-media .product-form{flex-direction:column}.product--no-media .product-form>.form{max-width:30rem;width:100%}.product--no-media .product-form__quantity{flex-direction:column;max-width:100%}.product-form__quantity .form__label{margin-bottom:.6rem}.price-per-item__label.form__label{margin-bottom:0rem}.product-form__quantity-top .form__label{margin-bottom:1.2rem}.product-form__buttons{max-width:44rem}.product--no-media .product__info-container>modal-opener{display:block;text-align:center}.product--no-media .product-popup-modal__button{padding-right:0}.product--no-media .price{text-align:center}.product__media-list video{border-radius:calc(var(--media-radius) - var(--media-border-width))}@media screen and (max-width:749px){.product__media-list{margin-left:-2.5rem;margin-bottom:3rem;width:calc(100% + 4rem)}.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide){margin-left:-1.5rem;margin-right:-1.5rem}.slider.product__media-list::-webkit-scrollbar{height:.2rem;width:.2rem}.product__media-list::-webkit-scrollbar-thumb{background-color:rgb(var(--color-foreground))}.product__media-list::-webkit-scrollbar-track{background-color:rgba(var(--color-foreground),.2)}.product__media-list .product__media-item{width:calc(100% - 3rem - var(--grid-mobile-horizontal-spacing))}.product--mobile-columns .product__media-item{width:calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing))}}@media screen and (min-width:750px){.product--thumbnail .product__media-list,.product--thumbnail_slider .product__media-list{padding-bottom:calc(var(--media-shadow-vertical-offset) * var(--media-shadow-visible))}.product__media-list{padding-right:calc(var(--media-shadow-horizontal-offset) * var(--media-shadow-visible))}.product--thumbnail .product__media-item:not(.is-active),.product--thumbnail_slider .product__media-item:not(.is-active){display:none}.product-media-modal__content>.product__media-item--variant.product__media-item--variant{display:none}.product-media-modal__content>.product__media-item--variant:first-child{display:block}}@media screen and (min-width:750px)and (max-width:989px){.product__media-list .product__media-item:first-child{padding-left:0}.product--thumbnail_slider .product__media-list{margin-left:0}.product__media-list .product__media-item{width:100%}}.product__media-icon .icon{width:1.2rem;height:1.4rem}.product__media-icon,.thumbnail__badge{background-color:rgb(var(--color-background));border-radius:50%;border:.1rem solid rgba(var(--color-foreground),.1);color:rgb(var(--color-foreground));display:flex;align-items:center;justify-content:center;height:3rem;width:3rem;position:absolute;left:1.2rem;top:1.2rem;z-index:1;transition:color var(--duration-short) ease,opacity var(--duration-short) ease}.product__media-video .product__media-icon{opacity:1}.product__modal-opener--image .product__media-toggle:hover{cursor:zoom-in}.product__modal-opener:hover .product__media-icon{border:.1rem solid rgba(var(--color-foreground),.1)}@media screen and (min-width:750px){.grid__item.product__media-item--full{width:100%}.product--columns .product__media-item:not(.product__media-item--single):not(:only-child){max-width:calc(50% - var(--grid-desktop-horizontal-spacing) / 2)}.product--large.product--columns .product__media-item--full .deferred-media__poster-button{height:5rem;width:5rem}.product--medium.product--columns .product__media-item--full .deferred-media__poster-button{height:4.2rem;width:4.2rem}.product--medium.product--columns .product__media-item--full .deferred-media__poster-button .icon{width:1.8rem;height:1.8rem}.product--small.product--columns .product__media-item--full .deferred-media__poster-button{height:3.6rem;width:3.6rem}.product--small.product--columns .product__media-item--full .deferred-media__poster-button .icon{width:1.6rem;height:1.6rem}}@media screen and (min-width:990px){.product--stacked .product__media-item{max-width:calc(50% - var(--grid-desktop-horizontal-spacing) / 2)}.product:not(.product--columns) .product__media-list .product__media-item:first-child,.product:not(.product--columns) .product__media-list .product__media-item--full{width:100%;max-width:100%}.product__modal-opener .product__media-icon{opacity:0}.product__modal-opener:hover .product__media-icon,.product__modal-opener:focus .product__media-icon{opacity:1}}.product__media-item>*{display:block;position:relative}.product__media-toggle{display:flex;border:none;background-color:transparent;color:currentColor;padding:0}.product__media-toggle:after{content:"";cursor:pointer;display:block;margin:0;padding:0;position:absolute;top:calc(var(--border-width) * -1);right:calc(var(--border-width) * -1);bottom:calc(var(--border-width) * -1);left:calc(var(--border-width) * -1);z-index:2}.product__media-toggle:focus-visible{outline:0;box-shadow:none}@media(forced-colors:active){.product__media-toggle:focus-visible,.product__media-toggle:focus-visible:after{outline:transparent solid 1px;outline-offset:2px}}.product__media-toggle.focused{outline:0;box-shadow:none}.product__media-toggle:focus-visible:after{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.5);border-radius:var(--media-radius)}.product__media-toggle.focused:after{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.5);border-radius:var(--media-radius)}.product-media-modal{background-color:rgb(var(--color-background));height:100%;position:fixed;top:0;left:0;width:100%;visibility:hidden;opacity:0;z-index:-1}.product-media-modal[open]{visibility:visible;opacity:1;z-index:101}.product-media-modal__dialog{display:flex;align-items:center;height:100vh}.product-media-modal__content{max-height:100vh;width:100%;overflow:auto}.product-media-modal__content>*:not(.active),.product__media-list .deferred-media{display:none}@media screen and (min-width:750px){.product-media-modal__content{padding-bottom:2rem}.product-media-modal__content>*:not(.active){display:block}.product__modal-opener:not(.product__modal-opener--image){display:none}.product__media-list .deferred-media{display:block}}@media screen and (max-width:749px){.product--thumbnail .is-active .product__modal-opener:not(.product__modal-opener--image),.product--thumbnail_slider .is-active .product__modal-opener:not(.product__modal-opener--image){display:none}.product--thumbnail .is-active .deferred-media,.product--thumbnail_slider .is-active .deferred-media{display:block;width:100%}}.product-media-modal__content>*{display:block;height:auto;margin:auto}.product-media-modal__content .media{background:none}.product-media-modal__model{width:100%}.product-media-modal__toggle{background-color:rgb(var(--color-background));border:.1rem solid rgba(var(--color-foreground),.1);border-radius:50%;color:rgba(var(--color-foreground),.55);display:flex;align-items:center;justify-content:center;cursor:pointer;right:2rem;padding:1.2rem;position:fixed;z-index:2;top:2rem;width:4rem}.product-media-modal__content .deferred-media{width:100%}@media screen and (min-width:750px){.product-media-modal__content{padding:2rem 11rem}.product-media-modal__content>*{width:100%;max-width:90rem}.product-media-modal__content>*+*{margin-top:2rem}.product-media-modal__toggle{right:5rem;top:2.2rem}}@media screen and (min-width:990px){.product-media-modal__content{padding:2rem 11rem}.product-media-modal__content>*+*{margin-top:1.5rem}.product-media-modal__content{padding-bottom:1.5rem}.product-media-modal__toggle{right:5rem}}.product-media-modal__toggle:hover{color:rgba(var(--color-foreground),.75)}.product-media-modal__toggle .icon{height:auto;margin:0;width:2.2rem}.product-popup-modal{box-sizing:border-box;opacity:0;position:fixed;visibility:hidden;z-index:-1;margin:0 auto;top:0;left:0;overflow:auto;width:100%;background:rgba(var(--color-foreground),.2);height:100%}.product-popup-modal[open]{opacity:1;visibility:visible;z-index:101}.product-popup-modal__content{border-radius:var(--popup-corner-radius);background-color:rgb(var(--color-background));overflow:auto;height:80%;margin:0 auto;left:50%;transform:translate(-50%);margin-top:5rem;width:92%;position:absolute;top:0;padding:0 1.5rem 0 3rem;border-color:rgba(var(--color-foreground),var(--popup-border-opacity));border-style:solid;border-width:var(--popup-border-width);box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity))}.product-popup-modal__content.focused{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3),var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity))}.product-popup-modal__content:focus-visible{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3),var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity))}@media screen and (min-width:750px){.product-popup-modal__content{padding-right:1.5rem;margin-top:10rem;width:70%;padding:0 3rem}.product-media-modal__dialog .global-media-settings--no-shadow{overflow:visible!important}}.product-popup-modal__content img{max-width:100%}@media screen and (max-width:749px){.product-popup-modal__content table{display:block;max-width:fit-content;overflow-x:auto;white-space:nowrap;margin:0}.product-media-modal__dialog .global-media-settings,.product-media-modal__dialog .global-media-settings video,.product-media-modal__dialog .global-media-settings model-viewer,.product-media-modal__dialog .global-media-settings iframe,.product-media-modal__dialog .global-media-settings img{border:none;border-radius:0}}.product-popup-modal__opener{display:inline-block}.product-popup-modal__button{font-size:1.6rem;padding-right:1.3rem;padding-left:0;min-height:4.4rem;text-underline-offset:.3rem;text-decoration-thickness:.1rem;transition:text-decoration-thickness var(--duration-short) ease}.product-popup-modal__button:hover{text-decoration-thickness:.2rem}.product-popup-modal__content-info{padding-right:4.4rem}.product-popup-modal__content-info>*{height:auto;margin:0 auto;max-width:100%;width:100%}@media screen and (max-width:749px){.product-popup-modal__content-info>*{max-height:100%}}.product-popup-modal__toggle{background-color:rgb(var(--color-background));border:.1rem solid rgba(var(--color-foreground),.1);border-radius:50%;color:rgba(var(--color-foreground),.55);display:flex;align-items:center;justify-content:center;cursor:pointer;position:sticky;padding:1.2rem;z-index:2;top:1.5rem;width:4rem;margin:0 0 0 auto}.product-popup-modal__toggle:hover{color:rgba(var(--color-foreground),.75)}.product-popup-modal__toggle .icon{height:auto;margin:0;width:2.2rem}.product__media-list .media>*{overflow:hidden}.thumbnail-list{flex-wrap:wrap;grid-gap:1rem}.slider--mobile.thumbnail-list:after{content:none}@media screen and (min-width:750px){.product--stacked .thumbnail-list{display:none}.thumbnail-list{display:grid;grid-template-columns:repeat(4,1fr)}}.thumbnail-list_item--variant:not(:first-child){display:none}@media screen and (min-width:990px){.thumbnail-list{grid-template-columns:repeat(4,1fr)}.product--medium .thumbnail-list{grid-template-columns:repeat(5,1fr)}.product--large .thumbnail-list{grid-template-columns:repeat(6,1fr)}}@media screen and (max-width:749px){.product__media-item{display:flex;align-items:center}.product__modal-opener{width:100%}.thumbnail-slider{display:flex;align-items:center}.thumbnail-slider .thumbnail-list.slider{display:flex;padding:.5rem;flex:1;scroll-padding-inline-start:.5rem}.thumbnail-list__item.slider__slide{width:calc(33% - .6rem)}}@media screen and (min-width:750px){.product--thumbnail_slider .thumbnail-slider{display:flex;align-items:center}.thumbnail-slider .thumbnail-list.slider--tablet-up{display:flex;padding:.5rem;flex:1;scroll-padding-inline-start:.5rem}.product__media-wrapper .slider-mobile-gutter .slider-button{display:none}.thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide{width:calc(25% - .8rem)}.product--thumbnail_slider .slider-mobile-gutter .slider-button{display:flex}}@media screen and (min-width:900px){.product--small .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide{width:calc(25% - .8rem)}.thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide{width:calc(20% - .8rem)}}.thumbnail{position:absolute;top:0;left:0;display:block;height:100%;width:100%;padding:0;color:rgb(var(--color-foreground));cursor:pointer;background-color:transparent}.thumbnail:hover{opacity:.7}.thumbnail.global-media-settings img{border-radius:0}.thumbnail[aria-current]{box-shadow:0 0 0 .1rem rgb(var(--color-foreground));border-color:rgb(var(--color-foreground))}.image-magnify-full-size{cursor:zoom-out;z-index:1;margin:0;border-radius:calc(var(--media-radius) - var(--media-border-width))}.image-magnify-hover{cursor:zoom-in}.product__modal-opener--image .product__media-zoom-none,.product__media-icon--none{display:none}.product__modal-opener>.loading__spinner{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;display:flex;align-items:center;height:48px;width:48px}.product__modal-opener .path{stroke:rgb(var(--color-button));opacity:.75}@media(hover:hover){.product__media-zoom-hover,.product__media-icon--hover{display:none}}@media screen and (max-width:749px){.product__media-zoom-hover,.product__media-icon--hover{display:flex}}.js .product__media{overflow:hidden!important}.thumbnail[aria-current]:focus-visible{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.5)}.thumbnail[aria-current]:focus,.thumbnail.focused{outline:0;box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.5)}@media(forced-colors:active){.thumbnail[aria-current]:focus,.thumbnail.focused{outline:transparent solid 1px}}.thumbnail[aria-current]:focus:not(:focus-visible){outline:0;box-shadow:0 0 0 .1rem rgb(var(--color-foreground))}.thumbnail img{object-fit:cover;width:100%;height:100%;pointer-events:none}.thumbnail__badge .icon{width:1rem;height:1rem}.thumbnail__badge .icon-3d-model{width:1.2rem;height:1.2rem}.thumbnail__badge{color:rgb(var(--color-foreground),.6);height:2rem;width:2rem;left:auto;right:calc(.4rem + var(--media-border-width));top:calc(.4rem + var(--media-border-width))}@media screen and (min-width:750px){.product:not(.product--small) .thumbnail__badge{height:3rem;width:3rem}.product:not(.product--small) .thumbnail__badge .icon{width:1.2rem;height:1.2rem}.product:not(.product--small) .thumbnail__badge .icon-3d-model{width:1.4rem;height:1.4rem}}.thumbnail-list__item{position:relative}.thumbnail-list__item:before{content:"";display:block;padding-bottom:100%}.product:not(.featured-product) .product__view-details{display:none}.product__view-details{display:block;text-decoration:none}.product__view-details:hover{text-decoration:underline;text-underline-offset:.3rem}.product__view-details .icon{width:1.2rem;margin-left:1.2rem;flex-shrink:0}.product__inventory{display:flex;align-items:center;gap:.5rem}.product__inventory .svg-wrapper,.product__inventory svg{width:15px;height:15px}.product--no-media .product__inventory{justify-content:center}.product__inventory.visibility-hidden:empty{display:block}.product__inventory.visibility-hidden:empty:after{content:"#"}.product__inventory .icon-inventory-status circle:first-of-type{opacity:.3}.icon-with-text{--icon-size: calc(var(--font-heading-scale) * 3rem);--icon-spacing: calc(var(--font-heading-scale) * 1rem)}.icon-with-text--horizontal{display:flex;justify-content:center;column-gap:3rem;flex-direction:row}.icon-with-text--vertical{--icon-size: calc(var(--font-heading-scale) * 2rem)}.icon-with-text .svg-wrapper{fill:rgb(var(--color-foreground));height:var(--icon-size);width:var(--icon-size)}.icon-with-text--horizontal .svg-wrapper,.icon-with-text--horizontal img{margin-bottom:var(--icon-spacing)}.icon-with-text--vertical .svg-wrapper{min-height:var(--icon-size);min-width:var(--icon-size);margin-right:var(--icon-spacing)}.icon-with-text img{height:var(--icon-size);width:var(--icon-size);object-fit:contain}.icon-with-text--vertical img{margin-right:var(--icon-spacing)}.icon-with-text--horizontal .h4{padding-top:calc(var(--icon-size) + var(--icon-spacing));text-align:center}.icon-with-text--horizontal .svg-wrapper+.h4,.icon-with-text--horizontal img+.h4,.icon-with-text--horizontal.icon-with-text--text-only .h4{padding-top:0}.icon-with-text__item{display:flex;align-items:center}.icon-with-text--horizontal .icon-with-text__item{flex-direction:column;width:33%}.icon-with-text--vertical .icon-with-text__item{margin-bottom:var(--icon-size)}.product__sku.visibility-hidden:after{content:"#"}.product-media-container{--aspect-ratio: var(--preview-ratio);--ratio-percent: calc(1 / var(--aspect-ratio) * 100%);position:relative;width:100%;max-width:calc(100% - calc(var(--media-border-width) * 2))}.product-media-container.constrain-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}.product-media-container.constrain-height.media-fit-contain{--contained-width: calc(var(--constrained-height) * var(--aspect-ratio));width:min(var(--contained-width),100%)}.product-media-container .media{padding-top:var(--ratio-percent)}.product-media-container.constrain-height .media{padding-top:min(var(--constrained-height),var(--ratio-percent))}@media screen and (max-width:749px){.product-media-container.media-fit-cover{display:flex;align-self:stretch}.product-media-container.media-fit-cover .media{position:initial}}@media screen and (min-width:750px){.product-media-container{max-width:100%}.product-media-container:not(.media-type-image){--aspect-ratio: var(--ratio)}.product-media-container.constrain-height{--viewport-offset: 170px;--constrained-min-height: 500px}.product-media-container.media-fit-cover,.product-media-container.media-fit-cover .product__modal-opener,.product-media-container.media-fit-cover .media{height:100%}.product-media-container.media-fit-cover .deferred-media__poster img{object-fit:cover;width:100%}}.product-media-container .product__modal-opener{display:block;position:relative}@media screen and (min-width:750px){.product-media-container .product__modal-opener:not(.product__modal-opener--image){display:none}}.recipient-form{--recipient-checkbox-margin-top: .64rem;display:block;position:relative;max-width:44rem;margin-bottom:2.5rem}.recipient-form-field-label{margin:.6rem 0}.recipient-form-field-label--space-between{display:flex;justify-content:space-between}.recipient-checkbox{flex-grow:1;font-size:1.6rem;display:flex;word-break:break-word;align-items:flex-start;max-width:inherit;position:relative;cursor:pointer}.recipient-form>input[type=checkbox]{position:absolute;width:1.6rem;height:1.6rem;margin:var(--recipient-checkbox-margin-top) 0;top:0;left:0;z-index:-1;appearance:none;-webkit-appearance:none}.recipient-fields__field{margin:0 0 2rem}.recipient-fields .field__label{white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 3.5rem);overflow:hidden}.recipient-checkbox>svg{margin-top:var(--recipient-checkbox-margin-top);margin-right:1.2rem;flex-shrink:0}.recipient-form .icon-checkmark{visibility:hidden;position:absolute;left:.28rem;z-index:5;top:.4rem;width:10px;height:9px}.recipient-form>input[type=checkbox]:checked+label .icon-checkmark{visibility:visible}.js .recipient-fields{display:none}.recipient-fields hr{margin:1.6rem auto}.recipient-form>input[type=checkbox]:checked~.recipient-fields{display:block;animation:animateMenuOpen var(--duration-default) ease}.recipient-form>input[type=checkbox]:not(:checked,:disabled)~.recipient-fields,.recipient-email-label{display:none}.js .recipient-email-label.required{display:inline}.recipient-form ul{line-height:calc(1 + .6 / var(--font-body-scale));padding-left:4.4rem;text-align:left}.recipient-form ul a{display:inline}.recipient-form .error-message:first-letter{text-transform:capitalize}@media screen and (forced-colors:active){.recipient-fields>hr{border-top:.1rem solid rgb(var(--color-background))}.recipient-checkbox>svg{background-color:inherit;border:.1rem solid rgb(var(--color-background))}.recipient-form>input[type=checkbox]:checked+label .icon-checkmark{border:none}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/section-main-product.css.map */

/* ---- component-product-variant-picker.css ---- */
variant-selects{display:block}.product--no-media .product-form__input--pill,.product--no-media .product-form__input--swatch,.product--no-media .product-form__input--dropdown{display:flex;align-items:center;justify-content:center;text-align:center}.product--no-media .product-form__input.product-form__input--pill,.product--no-media .product-form__input.product-form__input--swatch{flex-wrap:wrap;margin:0 auto 1.2rem}.product--no-media .product-form__input--dropdown{flex-direction:column;max-width:100%}:is(.product-form__input--pill,.product-form__input--swatch) .form__label{margin-bottom:.2rem}.product-form__input input[type=radio]{clip:rect(0,0,0,0);overflow:hidden;position:absolute;height:1px;width:1px}.product-form__input input[type=radio]:not(.disabled):not(.visually-disabled)+label>.label-unavailable{display:none}.product-form__input--dropdown{--swatch-input--size: 2rem;margin-bottom:1.6rem}.product-form__input--dropdown .dropdown-swatch+select{padding-left:calc(2.4rem + var(--swatch-input--size))}.product-form__input--dropdown .dropdown-swatch{position:absolute;left:1.6rem;top:calc(50% - var(--swatch-input--size) / 2);width:var(--swatch-input--size);height:var(--swatch-input--size);z-index:1}.product-form__input--pill input[type=radio]+label{border:var(--variant-pills-border-width) solid rgba(var(--color-foreground),var(--variant-pills-border-opacity));background-color:rgb(var(--color-background));color:rgba(var(--color-foreground));border-radius:var(--variant-pills-radius);color:rgb(var(--color-foreground));display:inline-block;margin:.7rem .5rem .2rem 0;padding:1rem 2rem;font-size:1.4rem;letter-spacing:.1rem;line-height:1;text-align:center;transition:border var(--duration-short) ease;cursor:pointer;position:relative}.product-form__input--pill input[type=radio]+label:before{content:"";position:absolute;top:calc(var(--variant-pills-border-width) * -1);right:calc(var(--variant-pills-border-width) * -1);bottom:calc(var(--variant-pills-border-width) * -1);left:calc(var(--variant-pills-border-width) * -1);z-index:-1;border-radius:var(--variant-pills-radius);box-shadow:var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset) var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow),var(--variant-pills-shadow-opacity))}.product-form__input--pill input[type=radio]+label:hover{border-color:rgb(var(--color-foreground))}.product-form__input--pill input[type=radio]:checked+label{background-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}@media screen and (forced-colors:active){.product-form__input--pill input[type=radio]:checked+label{text-decoration:underline}.product-form__input--pill input[type=radio]:focus-visible+label{outline:transparent solid 1px;outline-offset:2px}}.product-form__input--pill input[type=radio]:checked+label::selection{background-color:rgba(var(--color-background),.3)}.product-form__input--pill input[type=radio]:disabled+label,.product-form__input--pill input[type=radio].disabled+label{border-color:rgba(var(--color-foreground),.1);color:rgba(var(--color-foreground),.6);text-decoration:line-through}.product-form__input--pill input[type=radio].disabled:checked+label,.product-form__input--pill input[type=radio]:disabled:checked+label{color:rgba(var(--color-background),.6)}.product-form__input--pill input[type=radio]:focus-visible+label{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.55)}.product-form__input--pill input[type=radio].focused+label{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.55)}.product-form__input--swatch{display:flex;flex-wrap:wrap}.product-form__input--swatch .swatch-input__input+.swatch-input__label{--swatch-input--size: 3.6rem;margin:.7rem 1.2rem .2rem 0}@media screen and (min-width:750px){.product-form__input--swatch .swatch-input__input+.swatch-input__label{--swatch-input--size: 2.8rem}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-product-variant-picker.css.map */

/* ---- component-swatch-input.css ---- */
.swatch-input__input+.swatch-input__label{--swatch-input--border-radius: 50%;display:inline-block;max-width:100%;border-radius:var(--swatch-input--border-radius);cursor:pointer;outline-offset:.2rem;outline-color:transparent;outline-style:solid;transition-property:outline-color,outline-width,box-shadow;transition-duration:var(--duration-short);transition-timing-function:ease;forced-color-adjust:none}.swatch-input__input+.swatch-input__label.swatch-input__label--square{--swatch-input--border-radius: .2rem}.swatch-input__input:active+.swatch-input__label,.swatch-input__input:checked+.swatch-input__label{outline:.1rem solid rgb(var(--color-foreground))}.swatch-input__input+.swatch-input__label:hover,.swatch-input__input:hover+.swatch-input__label{outline:.2rem solid rgba(var(--color-foreground),.4)}.swatch-input__input:focus-visible+.swatch-input__label{outline:.2rem solid rgba(var(--color-foreground),.5);box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 .1rem .5rem rgba(var(--color-foreground),.25)}.swatch-input__input:active:focus-visible+.swatch-input__label,.swatch-input__input:checked:focus-visible+.swatch-input__label{outline:.1rem solid rgb(var(--color-foreground));box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 .1rem .4rem rgba(var(--color-foreground),.25)}.swatch-input__input.visually-disabled:not(:active):not(:checked)+.swatch-input__label{transition:none}.swatch-input__input.visually-disabled:not(:active):not(:checked)+.swatch-input__label:hover{outline:none}.swatch-input__input:disabled+.swatch-input__label{pointer-events:none}.swatch-input__input:disabled+.swatch-input__label>.swatch,.swatch-input__input.visually-disabled+.swatch-input__label>.swatch{position:relative;overflow:hidden}.swatch-input__input:disabled+.swatch-input__label>.swatch,.swatch-input__input.visually-disabled+.swatch-input__label>.swatch{opacity:.4}.swatch-input__input:disabled+.swatch-input__label>.swatch:after,.swatch-input__input.visually-disabled+.swatch-input__label>.swatch:after{--diagonal--size: calc(var(--swatch-input--size) * 1.414);--crossed-line--size: .1rem;content:"";position:absolute;bottom:calc(var(--crossed-line--size) * -.5);left:0;width:var(--diagonal--size);height:var(--crossed-line--size);background-color:rgb(var(--color-foreground));transform:rotate(-45deg);transform-origin:left}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-swatch-input.css.map */

/* ---- component-swatch.css ---- */
.swatch{--swatch--size: var(--swatch-input--size, 4.4rem);--swatch--border-radius: var(--swatch-input--border-radius, 50%);display:block;width:var(--swatch--size);max-width:100%;aspect-ratio:1 / 1;background:var(--swatch--background);background-position:var(--swatch-focal-point, initial);background-size:cover;background-origin:border-box;border:.1rem solid rgba(var(--color-foreground),.15);border-radius:var(--swatch--border-radius)}.swatch--square{--swatch--border-radius: var(--swatch-input--border-radius, .2rem)}.swatch--unavailable{border-style:dashed;border-color:rgba(var(--color-foreground),.5)}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-swatch.css.map */

/* ---- component-deferred-media.css ---- */
.deferred-media__poster{background-color:transparent;border:none;cursor:pointer;margin:0;padding:0;height:100%;width:100%;overflow:hidden;border-radius:calc(var(--border-radius) - var(--border-width))}.media>.deferred-media__poster{display:flex;align-items:center;justify-content:center}.deferred-media__poster img{width:auto;max-width:100%;height:100%}.deferred-media{overflow:hidden}.deferred-media:not([loaded]) template{z-index:-1}.deferred-media[loaded]>.deferred-media__poster{display:none}.deferred-media__poster:focus-visible{outline:none;box-shadow:0 0 0 var(--media-border-width) rgba(var(--color-foreground),var(--media-border-opacity)),0 0 0 calc(var(--media-border-width) + .3rem) rgb(var(--color-background)),0 0 0 calc(var(--media-border-width) + .5rem) rgba(var(--color-foreground),.5);border-radius:calc(var(--media-radius) - var(--media-border-width))}.deferred-media__poster:focus{outline:none;box-shadow:0 0 0 var(--media-border-width) rgba(var(--color-foreground),var(--media-border-opacity)),0 0 0 calc(var(--media-border-width) + .3rem) rgb(var(--color-background)),0 0 0 calc(var(--media-border-width) + .5rem) rgba(var(--color-foreground),.5);border-radius:calc(var(--media-radius) - var(--media-border-width))}.global-media-settings--full-width .deferred-media__poster,.global-media-settings--full-width .deferred-media__poster:is(:focus,:focus-visible){border-radius:0}@media(forced-colors:active){.deferred-media__poster:focus{outline:transparent solid 1px}}.deferred-media__poster:focus:not(:focus-visible){outline:0;box-shadow:none}.deferred-media__poster-button{background-color:rgb(var(--color-background));border:.1rem solid rgba(var(--color-foreground),.1);border-radius:50%;color:rgb(var(--color-foreground));display:flex;align-items:center;justify-content:center;height:6.2rem;width:6.2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);transition:transform var(--duration-short) ease,color var(--duration-short) ease;z-index:1}.deferred-media__poster-button:hover{transform:translate(-50%,-50%) scale(1.1)}.deferred-media__poster-button .icon{width:2rem;height:2rem}.deferred-media__poster-button .icon-play{margin-left:.2rem}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-deferred-media.css.map */

/* ---- nahleh-promo.css ---- */
/* Nahleh promo/trust banner — static centered row on desktop,
   seamless looping marquee on mobile. */

.nh-promo {
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nh-promo .utility-bar__grid {
  padding: 0;
}

/* Desktop: centered static row */
.nh-promo__static {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.4rem;
  padding: 0.9rem 1.6rem;
  flex-wrap: wrap;
}

.nh-promo__item {
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.nh-promo__item--link:hover {
  text-decoration: underline;
}

.nh-promo__item .svg-wrapper {
  color: var(--nh-amber);
  display: inline-flex;
  flex-shrink: 0;
}

.nh-promo__item svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
  stroke: currentColor;
}

.nh-promo__dot {
  opacity: 0.3;
}

/* Mobile: seamless marquee, hidden on desktop.
   max-width + overflow make this element the clipping window (its grid parent
   would otherwise let it grow to the track's full width), and direction: ltr
   anchors the track to the window's left edge — in the page's RTL flow the
   track anchors right, which puts the track's END on screen at the start of
   each cycle and drains it into an empty stretch as it slides left. */
.nh-promo__marquee {
  display: none;
  max-width: 100%;
  overflow: hidden;
  direction: ltr;
}

.nh-promo__marquee-track {
  display: flex;
  direction: ltr;
  width: max-content;
  gap: 2.4rem;
  padding: 0.9rem 0;
  animation: nh-marquee 22s linear infinite;
}

.nh-promo__group {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  flex: none;
}

/* The track holds 6 copies of the group (see announcement-bar.liquid), so one
   seamless loop shifts by exactly one group + one gap: a sixth of the track's
   width (-100% / 6) plus the sixth of a gap the percentage doesn't cover. */
@keyframes nh-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-16.6667% - 0.4rem));
  }
}

/* The track stays LTR so the animation anchors left; each group lays its items out in the page
   direction so Arabic text and "30%" read correctly. */
.nh-promo[dir="rtl"] .nh-promo__group {
  direction: rtl;
}

@media screen and (max-width: 820px) {
  .nh-promo__static {
    display: none;
  }

  .nh-promo__marquee {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nh-promo__marquee-track {
    animation: none;
  }
}

/* ---- nahleh-hero.css ---- */
.nh-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
}

.nh-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
  font-size: 1.3rem;
  font-weight: 800;
  padding: 0.7rem 1.5rem;
  border-radius: var(--nh-radius-pill);
  margin-bottom: 2rem;
}

.nh-hero__title {
  font-size: 5.4rem;
  font-weight: 900;
  margin: 0 0 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.nh-hero__title span {
  color: var(--nh-amber);
}

.nh-hero__lead {
  margin: 0 0 3rem;
  font-size: 1.8rem;
  line-height: 1.8;
  color: var(--nh-body);
  font-weight: 500;
  max-width: 44rem;
}

.nh-hero__cta-row {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.nh-hero__cta {
  height: 5.6rem;
  padding: 0 2.8rem;
  border: none;
  border-radius: var(--nh-radius-pill);
  background: var(--nh-amber);
  color: var(--nh-white);
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--nh-shadow-amber);
  transition:
    transform 0.12s,
    box-shadow 0.2s,
    background-color 0.15s;
  text-decoration: none;
}

.nh-hero__cta svg {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  transition: transform 0.15s ease;
}

.nh-hero__cta:hover {
  box-shadow: var(--nh-shadow-amber-hover);
  transform: translateY(-1px);
  color: var(--nh-white);
}

.nh-hero__cta:hover svg {
  transform: translateX(0.2rem);
}

html[dir="rtl"] .nh-hero__cta:hover svg {
  transform: translateX(-0.2rem);
}

.nh-hero__cta--ghost {
  background: var(--nh-white);
  color: var(--nh-charcoal);
  border: 1.5px solid var(--nh-border-2);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0 2.4rem;
  box-shadow: none;
}

.nh-hero__cta--ghost:hover {
  background: #f4ecdd;
  transform: none;
  box-shadow: none;
  color: var(--nh-charcoal);
}

.nh-hero__stats {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  margin-top: 3.4rem;
  flex-wrap: wrap;
}

.nh-hero__stat {
  display: flex;
  flex-direction: column;
}

.nh-hero__stat b {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--nh-charcoal);
}

.nh-hero__stat small {
  font-size: 1.25rem;
  color: var(--nh-muted);
  font-weight: 600;
}

.nh-hero__div {
  width: 1px;
  height: 3.4rem;
  background: var(--nh-border-2);
}

.nh-hero__art {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 42rem;
}

.nh-hero__art svg {
  width: 120%;
  max-width: 56rem;
}

.nh-hero__image {
  width: 100%;
  height: auto;
  max-width: 56rem;
  border-radius: var(--nh-radius-xl);
  object-fit: cover;
}

@keyframes nh-hero-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1rem);
  }
}

.nh-hero__float--1 {
  animation: nh-hero-float 7s ease-in-out infinite;
}

.nh-hero__float--2 {
  animation: nh-hero-float 8s ease-in-out 0.8s infinite;
}

.nh-hero__float--3 {
  animation: nh-hero-float 6.4s ease-in-out 0.4s infinite;
}

@media screen and (max-width: 820px) {
  .nh-hero {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .nh-hero__title {
    font-size: 3.8rem;
  }

  .nh-hero__art {
    display: none;
  }

  .nh-hero__cta {
    height: 5rem;
    padding: 0 2.2rem;
    font-size: 1.45rem;
  }

  .nh-hero__cta--ghost {
    padding: 0 1.9rem;
    font-size: 1.4rem;
  }
}

/* A phone: the three stats share one row (smaller type, the dividers between them) instead of 2 + 1. */
@media screen and (max-width: 749px) {
  .nh-hero__stats {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 2.6rem;
  }

  .nh-hero__stat {
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    text-align: center;
  }

  .nh-hero__stat b {
    font-size: 1.7rem;
    white-space: nowrap;
  }

  .nh-hero__stat small {
    font-size: 1.1rem;
    line-height: 1.35;
  }

  .nh-hero__div {
    flex: none;
    align-self: center;
    height: 2.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nh-hero__float--1,
  .nh-hero__float--2,
  .nh-hero__float--3 {
    animation: none;
  }
}

/* ---- nahleh-categories.css ---- */
/* Category cards (sections/nahleh-categories). From 750px: every card in one row, equal height. Phone: the
   cards stacked, one full-width box under the other. A card is only as tall as its text, plus its image when
   it has one — no empty block where a picture would be. */
.nahleh-categories {
  display: grid;
  grid-template-columns: repeat(var(--nahleh-categories-count, 3), minmax(0, 1fr));
  gap: 1.6rem;
}

.nahleh-category {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  border-radius: var(--nh-radius-xl);
  padding: 2.4rem 2.8rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.nahleh-category__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
}

.nahleh-category__heading {
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 0.8rem;
  color: var(--nh-charcoal);
}

.nahleh-category__subtext {
  margin: 0 0 1.4rem;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--nh-body);
  line-height: 1.6;
}

.nahleh-category__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: rgb(var(--color-button));
  white-space: nowrap;
}

.nahleh-category__link svg {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

/* The icon: a square box on the card's own colour, sized by the section's "Icon size"
   (--nahleh-category-icon-size). No hexagon or tile — a crop cut icons (the sparkles at their corners). */
.nahleh-category__icon {
  flex: none;
  width: var(--nahleh-category-icon-size, 8.4rem);
  height: var(--nahleh-category-icon-size, 8.4rem);
}

.nahleh-category__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "Icon fit: Fill the box" — a photo fills the square, with soft corners instead of a hard crop. */
.nahleh-categories--icon-cover .nahleh-category__icon {
  border-radius: var(--nh-radius-lg);
  overflow: hidden;
}

.nahleh-categories--icon-cover .nahleh-category__icon img {
  object-fit: cover;
}

/* A tablet: three cards of ~224px leave the title ~68px beside the icon, so words broke mid-letter.
   The icon goes above the text instead, and the title gets the card's full width. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .nahleh-category {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 2.2rem;
  }

  .nahleh-category__body {
    width: 100%;
  }

  .nahleh-category__heading {
    font-size: 1.8rem;
  }

  .nahleh-category__icon {
    width: calc(var(--nahleh-category-icon-size, 8.4rem) * 0.8);
    height: calc(var(--nahleh-category-icon-size, 8.4rem) * 0.8);
  }
}

/* A phone: the cards stack, one full-width box under the other (no sideways scrolling). */
@media screen and (max-width: 749px) {
  .nahleh-categories {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }

  .nahleh-category {
    padding: 1.8rem 2rem;
  }

  .nahleh-category__heading {
    font-size: 1.7rem;
    margin-block-end: 0.4rem;
  }

  .nahleh-category__subtext {
    margin-block-end: 0.8rem;
    font-size: 1.25rem;
    line-height: 1.5;
  }

  .nahleh-category__icon {
    width: calc(var(--nahleh-category-icon-size, 8.4rem) * 0.85);
    height: calc(var(--nahleh-category-icon-size, 8.4rem) * 0.85);
  }

  /* Optical nudge, asked for on the stacked cards: the shield sits a little to the left of the other two. */
  .nahleh-category__icon > img[src$="/pet-care.svg"] {
    translate: -0.4rem 0;
  }
}

/* ---- nahleh-card.css ---- */
/* Nahleh product card reskin — CSS-first, no markup changes.
   Targets Dawn's existing .card/.card__* classes so quick-add,
   <product-component>, and bulk-add JS keep working untouched. */

.card-wrapper .card {
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.card-wrapper:hover .card {
  transform: translateY(-3px);
  box-shadow: var(--nh-shadow-card);
}

.card__heading {
  font-weight: 700;
}

.card__heading a {
  color: var(--nh-ink);
}

.card-information .caption-with-letter-spacing {
  color: var(--nh-muted);
}

/* ---- nahleh-collection.css ---- */
/* ===== Category hero banner ===== */
.nh-cat-hero {
  position: relative;
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
  min-height: 22rem;
  padding: 3.6rem 4rem;
  display: flex;
  align-items: center;
}

.nh-cat-hero--tint-sage {
  background: var(--nh-sage-tint);
}

.nh-cat-hero--tint-blush {
  background: var(--nh-blush);
}

.nh-cat-hero--tint-sand {
  background: var(--nh-sand);
}

.nh-cat-hero__content {
  position: relative;
  z-index: 1;
  max-width: 56rem;
}

.nh-cat-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--nh-white);
  color: var(--nh-ink);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: var(--nh-radius-pill);
  margin-bottom: 1.6rem;
}

.nh-cat-hero__badge svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--nh-sage);
}

.nh-cat-hero__title {
  font-size: 3.2rem;
  font-weight: 900;
  margin: 0 0 1.2rem;
  letter-spacing: -0.02em;
  color: var(--nh-charcoal);
}

.nh-cat-hero__description {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--nh-body);
  margin: 0;
}

.nh-cat-hero__art {
  position: absolute;
  bottom: 2rem;
  inset-inline-end: 4rem;
  color: rgba(43, 39, 34, 0.18);
  z-index: 0;
}

.nh-cat-hero__art svg {
  width: 9rem;
  height: 9rem;
}

@media screen and (max-width: 749px) {
  .nh-cat-hero {
    padding: 3rem 2.4rem;
    min-height: unset;
  }

  .nh-cat-hero__content {
    text-align: start;
    margin-inline-start: 0;
  }

  .nh-cat-hero__title {
    font-size: 2.4rem;
  }

  .nh-cat-hero__art {
    display: none;
  }
}

/* ===== Filter bar ===== */
.nh-cat-filter__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin: 2.4rem 0 1.2rem;
}

.nh-cat-filter__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nh-cat-filter__sort-select {
  appearance: none;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-md);
  /* Room for the arrow on its side (inline-end), in either direction. */
  padding-block: 1rem;
  padding-inline: 1.4rem 3.6rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--nh-ink);
  font-family: inherit;
  cursor: pointer;
}

.nh-cat-filter__sort svg {
  position: absolute;
  inset-inline-end: 1.4rem;
  width: 1rem;
  height: 1rem;
  color: var(--nh-muted);
  pointer-events: none;
}

.nh-cat-filter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.nh-cat-filter__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--nh-radius-pill);
  border: 1px solid var(--nh-border);
  background: var(--nh-white);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--nh-body);
  cursor: pointer;
  font-family: inherit;
}

.nh-cat-filter__pill.is-active {
  background: var(--nh-sand);
  border-color: var(--nh-amber);
  color: var(--nh-amber-deep);
}

.nh-cat-filter__count {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nh-muted);
  margin: 0 0 2rem;
}

/* ===== Product grid =====
   Every Nahleh product grid (collection, homepage, search, related products). A grid track, not a
   flex row: a lone card on the last row keeps its column's width and sits at the start.
   --nh-cols / --nh-cols-mobile carry a section's column settings. */
.nh-cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--nh-cols, 4), minmax(0, 1fr));
  gap: 1.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Without this, iPhone Safari refuses to shrink a grid item below its
   image's intrinsic width (500-1000px), blowing one card up to fill the
   whole screen. Chrome clamps this on its own; WebKit needs it explicit. */
.nh-cat-grid > li {
  display: flex;
  min-width: 0;
}

@media screen and (max-width: 989px) {
  .nh-cat-grid {
    grid-template-columns: repeat(var(--nh-cols-mobile, 2), minmax(0, 1fr));
  }
}

@media screen and (max-width: 480px) {
  .nh-cat-grid {
    gap: 1.2rem;
  }
}

/* ===== Product card =====
   One card everywhere (themes/nahleh/sections/ProductCard.tsx). Cards in a row line up: the card fills
   its row's height, the rating row is reserved even when empty, the title is always two lines tall,
   and the footer (cart button + price) sits at the bottom. */
.nh-cat-card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
  transition: transform 0.18s ease;
}

.nh-cat-card:hover {
  transform: translateY(-3px);
}

.nh-cat-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 2rem;
  /* One neutral backdrop for every card (it used to rotate sand / blush / sage by position). */
  background: var(--nh-cream);
}

/* height: auto + the image's own aspect-ratio instead of height: 100% —
   WebKit resolves a percentage height against the aspect-ratio parent
   unreliably and can render the image at its intrinsic size instead. */
.nh-cat-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.nh-cat-card__media svg {
  width: 6rem;
  height: 6rem;
  color: var(--nh-amber-deep);
  opacity: 0.75;
}

.nh-cat-card__badge {
  position: absolute;
  top: 1.2rem;
  inset-inline-start: 1.2rem;
  font-size: 1.15rem;
  font-weight: 800;
  padding: 0.4rem 1rem;
  border-radius: var(--nh-radius-pill);
  color: var(--nh-white);
}

.nh-cat-card__badge--new {
  background: var(--nh-sage);
}

.nh-cat-card__badge--sale {
  background: var(--nh-coral);
}

.nh-cat-card__badge--soldout {
  background: var(--nh-charcoal);
}

.nh-cat-card__body {
  flex: 1 1 auto;
  padding: 1.6rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nh-cat-card__rating {
  display: flex;
  align-items: center;
  min-height: 1.8rem;
  gap: 0.4rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nh-ink);
}

.nh-cat-card__rating svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--nh-amber-gold);
}

.nh-cat-card__rating span {
  color: var(--nh-muted);
  font-weight: 500;
}

.nh-cat-card__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--nh-charcoal);
  text-decoration: none;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Exactly two lines tall, also for a one-line title. */
  min-height: calc(1.4em * 2);
}

.nh-cat-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem;
  margin-block-start: auto;
  padding-block-start: 0.4rem;
}

/* The old price, then the current one: each on one line ("15.000 د.أ" never splits), a clear gap
   between them; on a phone they stack, the struck-through price above. */
.nh-cat-card__price {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.2rem 1rem;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--nh-charcoal);
}

.nh-cat-card__was,
.nh-cat-card__now {
  white-space: nowrap;
}

.nh-cat-card__was {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--nh-muted);
}

@media screen and (max-width: 749px) {
  .nh-cat-card__price {
    flex-direction: column;
    align-items: flex-end;
  }
}

.nh-cat-card__cart {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--nh-radius-md);
  border: 1px solid var(--nh-amber);
  background: var(--nh-white);
  color: var(--nh-amber-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.nh-cat-card__cart svg {
  width: 1.6rem;
  height: 1.6rem;
}

.nh-cat-card__cart.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ===== Promo card ===== */
.nh-cat-promo {
  background: var(--nh-charcoal);
  border-radius: var(--nh-radius-xl);
  padding: 2.4rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 20rem;
}

.nh-cat-promo__badge {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: rgba(235, 177, 52, 0.15);
  color: var(--nh-amber-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1.6rem;
}

.nh-cat-promo__heading {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--nh-cream);
  margin: 0 0 0.8rem;
}

.nh-cat-promo__text {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(251, 248, 243, 0.65);
  margin: 0 0 1.6rem;
}

.nh-cat-promo__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--nh-amber-gold);
  text-decoration: none;
}

.nh-cat-promo__link .icon-arrow {
  width: 1.2rem;
}

/* Homepage grids (featured collection): a card that would sit alone in the last row is left out, so the
   rows stay full — 5 products in 2 columns show as 4. Collection pages keep every product. */
@media screen and (min-width: 990px) {
  .nh-cat-grid--no-orphan[data-cols="2"] > li:nth-child(2n+1):last-child:not(:first-child),
  .nh-cat-grid--no-orphan[data-cols="3"] > li:nth-child(3n+1):last-child:not(:first-child),
  .nh-cat-grid--no-orphan[data-cols="4"] > li:nth-child(4n+1):last-child:not(:first-child),
  .nh-cat-grid--no-orphan[data-cols="5"] > li:nth-child(5n+1):last-child:not(:first-child),
  .nh-cat-grid--no-orphan[data-cols="6"] > li:nth-child(6n+1):last-child:not(:first-child) {
    display: none;
  }
}

@media screen and (max-width: 989px) {
  .nh-cat-grid--no-orphan[data-cols-mobile="2"] > li:nth-child(2n+1):last-child:not(:first-child) {
    display: none;
  }
}

/* ---- nahleh-why-us.css ---- */
.nh-why {
  background: var(--nh-charcoal);
  border-radius: var(--nh-radius-xl);
  padding: 4.4rem 4rem 4.8rem;
}

.nh-why__header {
  text-align: center;
  margin: 0 0 3.6rem;
}

.nh-why__eyebrow {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--nh-amber-gold);
  margin-bottom: 1rem;
}

.nh-why__heading {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--nh-cream);
  margin: 0;
  letter-spacing: -0.02em;
}

.nh-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1.6rem;
}

.nh-why__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--nh-radius-lg);
  padding: 2.6rem 2.4rem;
}

.nh-why__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: rgba(235, 177, 52, 0.12);
  border: 1px solid rgba(235, 177, 52, 0.4);
  color: var(--nh-amber-gold);
  margin-bottom: 1.8rem;
}

.nh-why__icon svg {
  width: 2.2rem;
  height: 2.2rem;
}

.nh-why__card-heading {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--nh-cream);
  margin: 0 0 1rem;
}

.nh-why__card-text {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.75;
  color: rgba(251, 248, 243, 0.6);
  margin: 0;
}

.nh-why__card-text p {
  margin: 0;
}

@media screen and (max-width: 749px) {
  .nh-why {
    padding: 3.2rem 2rem 3.4rem;
    border-radius: var(--nh-radius-lg);
  }

  .nh-why__heading {
    font-size: 2.1rem;
  }

  .nh-why__grid {
    gap: 1.2rem;
  }
}

/* ---- nahleh-trust-bar.css ---- */
.nh-trust {
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-xl);
  padding: 2.8rem 2rem;
}

.nh-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}

.nh-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.nh-trust__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: var(--nh-radius-md);
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
}

.nh-trust__icon svg {
  width: 2.2rem;
  height: 2.2rem;
}

.nh-trust__label {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--nh-ink);
  margin: 0;
}

@media screen and (max-width: 749px) {
  .nh-trust {
    padding: 2.2rem 1.4rem;
    border-radius: var(--nh-radius-lg);
  }

  /* Every badge in one row (smaller icon and text) instead of 2 + 1. */
  .nh-trust__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }

  .nh-trust__item {
    gap: 0.8rem;
  }

  .nh-trust__icon {
    width: 4rem;
    height: 4rem;
  }

  .nh-trust__icon svg {
    width: 1.9rem;
    height: 1.9rem;
  }

  .nh-trust__label {
    font-size: 1.2rem;
    line-height: 1.35;
  }
}

/* ---- nahleh-faq.css ---- */
.nh-faq__heading {
  font-size: 2.8rem;
  font-weight: 900;
  text-align: center;
  margin: 0 0 3.2rem;
  letter-spacing: -0.02em;
  color: var(--nh-charcoal);
}

.nh-faq {
  max-width: 84rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.nh-faq__item {
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-md);
  padding: 0 2.4rem;
}

.nh-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.9rem 0;
  list-style: none;
}

.nh-faq__item summary::-webkit-details-marker {
  display: none;
}

.nh-faq__question {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--nh-charcoal);
}

.nh-faq__item .icon-caret {
  position: static;
  flex-shrink: 0;
  width: 1.2rem;
  color: var(--nh-charcoal);
  transition: transform 0.2s ease;
}

.nh-faq__item[open] > summary .icon-caret {
  transform: rotate(180deg);
}

.nh-faq__answer {
  padding: 0 0 2rem;
  margin: -0.6rem 0 0;
  color: var(--nh-muted);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
}

.nh-faq__answer > *:first-child {
  margin-top: 0;
}

.nh-faq__answer > *:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 749px) {
  .nh-faq__heading {
    font-size: 2.2rem;
    margin-bottom: 2.4rem;
  }

  .nh-faq__item {
    padding: 0 1.6rem;
  }

  .nh-faq__question {
    font-size: 1.4rem;
  }
}

/* ---- nahleh-footer.css ---- */
.nh-footer {
  background: var(--nh-charcoal);
}

.nh-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.nh-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

.nh-footer__wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--nh-cream);
}

.nh-footer__logo-image {
  height: auto;
}

.nh-footer__dot {
  color: var(--nh-amber-gold);
  font-size: 1.15em;
  line-height: 0;
}

.nh-footer__tagline {
  margin: 1rem 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--nh-amber-gold);
}

.nh-footer__info {
  margin: 2.6rem 0 0;
  font-size: 1.45rem;
  font-weight: 500;
  color: rgba(251, 248, 243, 0.85);
}

/* The info line's parts ("<tagline> – <address>" · "<phone>") each on their own line; a part breaks
   between words only, and the phone is a tel: link. */
.nh-footer__info-part {
  display: block;
}

.nh-footer__info-part + .nh-footer__info-part {
  margin-block-start: 0.6rem;
}

.nh-footer__phone {
  color: inherit;
  text-decoration: none;
  unicode-bidi: isolate;
  direction: ltr;
}

.nh-footer__phone:hover,
.nh-footer__phone:focus-visible {
  text-decoration: underline;
}

.nh-footer__copyright {
  margin: 2.2rem 0 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: rgba(251, 248, 243, 0.4);
}

@media screen and (max-width: 749px) {
  .nh-footer__wordmark {
    font-size: 1.9rem;
  }

  .nh-footer__info {
    margin-top: 2rem;
  }

  .nh-footer__copyright {
    margin-top: 1.8rem;
  }
}

/* ---- nahleh-blog.css ---- */
/* ===== Blog hero ===== */
.nh-blog-hero {
  text-align: center;
  margin: 0 0 2.8rem;
}

.nh-blog-hero__eyebrow {
  margin-bottom: 1.6rem;
}

.nh-blog-hero__eyebrow svg {
  width: 1.2rem;
  height: 1.2rem;
}

.nh-blog-hero__heading {
  font-size: 3.2rem;
  font-weight: 900;
  margin: 0 0 1.2rem;
  letter-spacing: -0.02em;
  color: var(--nh-charcoal);
}

.nh-blog-hero__heading em {
  font-style: normal;
  color: var(--nh-amber-gold);
}

.nh-blog-hero__subtitle {
  max-width: 62rem;
  margin: 0 auto;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--nh-body);
}

/* ===== Blog filter pills ===== */
.nh-blog-filter__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 2.8rem 0 3.2rem;
}

.nh-blog-filter__pill {
  padding: 0.9rem 1.8rem;
  border-radius: var(--nh-radius-pill);
  border: 1px solid var(--nh-border);
  background: var(--nh-white);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--nh-body);
  cursor: pointer;
  font-family: inherit;
}

.nh-blog-filter__pill.is-active {
  background: var(--nh-charcoal);
  border-color: var(--nh-charcoal);
  color: var(--nh-cream);
}

/* ===== Featured article ===== */
.nh-blog-feature {
  display: grid;
  grid-template-columns: 42% 1fr;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 2rem;
}

.nh-blog-feature__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26rem;
  background: linear-gradient(140deg, var(--nh-amber-gold), var(--nh-amber-deep));
}

.nh-blog-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nh-blog-feature__media svg {
  width: 8rem;
  height: 8rem;
  color: rgba(255, 255, 255, 0.85);
}

.nh-blog-feature__badge {
  position: absolute;
  top: 1.6rem;
  inset-inline-end: 1.6rem;
  background: var(--nh-charcoal);
  color: var(--nh-cream);
  font-size: 1.2rem;
  font-weight: 800;
  padding: 0.6rem 1.2rem;
  border-radius: var(--nh-radius-pill);
}

.nh-blog-feature__body {
  padding: 3.2rem 3.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nh-blog-feature__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.nh-blog-feature__tag {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--nh-amber-deep);
  background: var(--nh-sand);
  padding: 0.4rem 1.1rem;
  border-radius: var(--nh-radius-pill);
}

.nh-blog-feature__read-time {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--nh-muted);
}

.nh-blog-feature__title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--nh-charcoal);
  line-height: 1.4;
  margin: 0 0 1.2rem;
}

.nh-blog-feature__excerpt {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--nh-body);
  margin: 0 0 1.6rem;
}

.nh-blog-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--nh-amber-deep);
  white-space: nowrap;
}

/* An SVG with a viewBox and no size fills its container — the arrow once took half the featured card.
   Every icon in the link gets an explicit size and never shrinks; text and arrow stay on one line. */
.nh-blog-feature__link svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.nh-blog-feature__link .icon-arrow {
  width: 1.2rem;
  height: auto;
  transform: scaleX(-1);
}

/* Dawn's arrow is drawn pointing right; flipped above it points left, "forward" in Arabic. English reads
   left-to-right, so /en shows it unflipped. */
html[dir='ltr'] .nh-blog-feature__link .icon-arrow {
  transform: none;
}

/* ===== Blog grid ===== */
.nh-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Same WebKit guard as .nh-cat-grid > li: let items shrink below the
   image's intrinsic width, or iPhone Safari blows the column up. */
.nh-blog__grid > * {
  min-width: 0;
}

@media screen and (max-width: 989px) {
  .nh-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .nh-blog__grid {
    grid-template-columns: 1fr;
  }
}

.nh-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s ease;
}

.nh-blog-card:hover {
  transform: translateY(-3px);
}

.nh-blog-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}

.nh-blog-card__media--tint-0 {
  background: var(--nh-sand);
}

.nh-blog-card__media--tint-1 {
  background: var(--nh-blush);
}

.nh-blog-card__media--tint-2 {
  background: var(--nh-sage-tint);
}

.nh-blog-card__media--tint-3 {
  background: var(--nh-cool-grey);
}

/* Same WebKit guard as .nh-cat-card__media img in nahleh-collection.css:
   percentage heights inside an aspect-ratio box misresolve on iPhone. */
.nh-blog-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Wraps the placeholder shown when an article picture fails to load (hidden until then, QA #19). */
.nh-blog-ph:not([hidden]) {
  display: contents;
}

.nh-blog-card__media svg {
  width: 4.4rem;
  height: 4.4rem;
  color: var(--nh-amber-deep);
  opacity: 0.75;
}

.nh-blog-card__badge {
  position: absolute;
  top: 1.2rem;
  inset-inline-end: 1.2rem;
  background: var(--nh-white);
  color: var(--nh-ink);
  font-size: 1.1rem;
  font-weight: 800;
  padding: 0.4rem 1rem;
  border-radius: var(--nh-radius-pill);
}

.nh-blog-card__body {
  padding: 1.8rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex-grow: 1;
}

.nh-blog-card__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--nh-charcoal);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nh-blog-card__excerpt {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--nh-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.nh-blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--nh-border);
}

.nh-blog-card__date,
.nh-blog-card__read-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--nh-muted);
}

.nh-blog-card__read-time svg {
  width: 1.2rem;
  height: 1.2rem;
}

.nh-blog__pagination {
  margin-top: 4rem;
}

@media screen and (max-width: 749px) {
  .nh-blog-feature {
    grid-template-columns: 1fr;
  }

  .nh-blog-feature__media {
    min-height: 18rem;
  }

  .nh-blog-feature__body {
    padding: 2.4rem 2rem;
  }
}

/* ===== Newsletter ===== */
.nh-newsletter {
  background: var(--nh-charcoal);
  border-radius: var(--nh-radius-xl);
  padding: 4rem 3rem;
  text-align: center;
}

.nh-newsletter__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: var(--nh-radius-md);
  background: rgba(235, 177, 52, 0.15);
  color: var(--nh-amber-gold);
  margin-bottom: 1.8rem;
}

.nh-newsletter__icon svg {
  width: 2rem;
  height: 2rem;
}

.nh-newsletter__heading {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--nh-cream);
  margin: 0 0 1rem;
}

.nh-newsletter__subtitle {
  max-width: 50rem;
  margin: 0 auto 2.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.75;
  color: rgba(251, 248, 243, 0.65);
}

.nh-newsletter-form {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 48rem;
  margin: 0 auto;
}

.nh-newsletter-form__input {
  flex: 1 1 26rem;
  min-width: 0;
  height: 5.4rem;
  padding: 0 1.8rem;
  border-radius: var(--nh-radius-md);
  border: none;
  background: var(--nh-white);
  color: var(--nh-ink);
  font-size: 1.4rem;
  font-family: inherit;
}

.nh-newsletter-form__submit {
  height: 5.4rem;
  padding: 0 2.6rem;
  border-radius: var(--nh-radius-md);
  border: none;
  background: var(--nh-amber);
  color: var(--nh-white);
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  flex: 0 0 auto;
}

.nh-newsletter__message {
  margin: 1.6rem 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--nh-amber-gold);
}

/* ===== Article page ===== */
.nh-article__wrap {
  max-width: 76rem;
  margin: 0 auto;
}

.nh-article__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.nh-article__read-time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--nh-muted);
}

.nh-article__read-time svg {
  width: 1.4rem;
  height: 1.4rem;
}

.nh-article__tag {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--nh-sage);
  background: var(--nh-sage-tint);
  padding: 0.5rem 1.3rem;
  border-radius: var(--nh-radius-pill);
}

.nh-article__title {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--nh-charcoal);
  margin: 0 0 1.4rem;
}

.nh-article__excerpt {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--nh-body);
  margin: 0 0 2.4rem;
}

.nh-article__divider {
  border: none;
  border-top: 1px solid var(--nh-border);
  margin: 0 0 2rem;
}

.nh-article__byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-bottom: 2.8rem;
}

.nh-article__author {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.nh-article__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: var(--nh-amber);
  color: var(--nh-white);
  flex-shrink: 0;
}

.nh-article__avatar svg {
  width: 1.9rem;
  height: 1.9rem;
}

.nh-article__author-name {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--nh-charcoal);
}

.nh-article__author-subtitle {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--nh-muted);
}

.nh-article__share-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--nh-body);
}

.nh-article__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: var(--nh-radius-md);
  border: 1px solid var(--nh-border);
  background: var(--nh-white);
  color: var(--nh-ink);
  cursor: pointer;
  flex-shrink: 0;
}

.nh-article__icon-btn svg {
  width: 1.6rem;
  height: 1.6rem;
}

.nh-article__icon-btn--accent {
  color: var(--nh-sage);
  border-color: var(--nh-sage-tint);
}

.nh-article__hero {
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
  margin: 0 auto 3.2rem;
  height: var(--nh-article-hero-height, 320px);
  width: var(--nh-article-hero-width, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--nh-amber-gold), var(--nh-amber-deep));
}

.nh-article__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nh-article__hero svg {
  width: 10rem;
  height: 10rem;
  color: rgba(255, 255, 255, 0.85);
}

.nh-article__content {
  color: var(--nh-body);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.85;
}

.nh-article__content > *:first-child {
  margin-top: 0;
}

.nh-article__content h2,
.nh-article__content h3,
.nh-article__content h4 {
  font-weight: 800;
  color: var(--nh-charcoal);
  margin: 3rem 0 1.2rem;
}

.nh-article__content p {
  margin: 0 0 1.6rem;
}

.nh-article__content a {
  color: var(--nh-amber-deep);
  text-decoration-color: var(--nh-amber);
}

.nh-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nh-radius-md);
  margin: 1rem 0;
}

/* Default bullet list: amber dot marker */
.nh-article__content ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nh-article__content ol {
  margin: 0 0 1.6rem;
  padding-inline-start: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.nh-article__content ul li {
  position: relative;
  padding-inline-start: 2rem;
}

.nh-article__content ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.85rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--nh-amber);
}

/* Checklist variant: add class="nh-checklist" to a <ul> in the article's HTML source
   to render sage checkmark bullets instead of amber dots. */
.nh-article__content ul.nh-checklist li {
  padding-inline-start: 3.2rem;
}

.nh-article__content ul.nh-checklist li::before {
  content: '✓';
  width: 2.2rem;
  height: 2.2rem;
  top: 0;
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
  font-size: 1.1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quick-tip callout: <div class="nh-callout"><p class="nh-callout__heading">...</p><p>...</p></div> */
.nh-callout {
  background: var(--nh-sand);
  border-radius: var(--nh-radius-lg);
  padding: 2.2rem 2.6rem;
  margin: 0 0 2.4rem;
}

.nh-callout__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--nh-amber-deep);
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 0 1rem !important;
}

.nh-callout__heading svg {
  width: 1.5rem;
  height: 1.5rem;
}

.nh-callout p:last-child {
  margin-bottom: 0 !important;
}

/* Embedded product card: see snippets/nahleh-article-product.liquid for the markup to paste
   into an article's HTML source. */
.nh-article-product {
  display: flex;
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
  text-decoration: none;
  margin: 0 0 2.4rem;
}

.nh-article-product__media {
  flex: 0 0 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  background: linear-gradient(140deg, var(--nh-amber-gold), var(--nh-amber-deep));
}

.nh-article-product__media svg {
  width: 6rem;
  height: 6rem;
  color: rgba(255, 255, 255, 0.85);
}

.nh-article-product__body {
  flex: 1;
  background: var(--nh-charcoal);
  padding: 2.6rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
}

.nh-article-product__label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--nh-amber-gold);
}

.nh-article-product__title {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--nh-cream);
  margin: 0;
}

.nh-article-product__price {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--nh-cream);
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.nh-article-product__price s {
  font-size: 1.2rem;
  color: rgba(251, 248, 243, 0.5);
  font-weight: 600;
}

.nh-article-product__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--nh-amber);
  color: var(--nh-white);
  font-weight: 800;
  font-size: 1.3rem;
  padding: 1rem 1.8rem;
  border-radius: var(--nh-radius-md);
  margin-top: 0.6rem;
  width: fit-content;
}

.nh-article__share {
  display: flex;
  justify-content: center;
}

.nh-article__related {
  max-width: 100rem;
  margin: 5rem auto 0;
  padding-top: 4rem;
  border-top: 1px solid var(--nh-border);
}

.nh-article__related-heading {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--nh-charcoal);
  margin: 0 0 2rem;
}

.nh-article__back {
  max-width: 100rem;
  margin: 2.8rem auto 0;
  display: flex;
  justify-content: flex-start;
}

.nh-article__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--nh-amber-deep);
  text-decoration: none;
}

.nh-article__back .icon-arrow {
  width: 1.2rem;
  transform: scaleX(-1);
}

.nh-article__comments {
  max-width: 76rem;
  margin: 5rem auto 0;
  padding-top: 4rem;
  border-top: 1px solid var(--nh-border);
}

.nh-article__comments h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--nh-charcoal);
}

@media screen and (max-width: 749px) {
  .nh-blog__heading,
  .nh-article__title {
    font-size: 2.2rem;
  }

  .nh-article-product {
    flex-direction: column;
  }

  .nh-article__byline {
    align-items: flex-start;
  }
}

/* ---- nahleh-product.css ---- */
/* Trust badge above title */
.product__trust-badge {
  margin-bottom: 1.4rem;
}

.product__trust-badge svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* Price row */
.nahleh-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.8rem 0 0.6rem;
}

.nahleh-price-row__current {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--nh-charcoal);
  letter-spacing: -0.01em;
}

.nahleh-price-row__compare {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nh-muted);
  text-decoration: line-through;
}

.product__tax {
  margin: 0 0 1.8rem;
  color: var(--nh-muted);
}

/* Media gallery overlays */
.nh-product-gallery {
  position: relative;
}

.nahleh-wishlist-btn {
  position: absolute;
  top: 1.6rem;
  inset-inline-end: 1.6rem;
  z-index: 2;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: var(--nh-white);
  border: none;
  box-shadow: var(--nh-shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nh-ink);
  cursor: pointer;
  padding: 0;
}

.nahleh-wishlist-btn svg {
  width: 1.7rem;
  height: 1.7rem;
}

.nahleh-wishlist-btn.is-liked {
  color: var(--nh-coral);
}

.product-form__checkout-button {
  margin-bottom: 1rem;
}

/* More breathing room above the trust-strip cards */
.product__info-container .nahleh-trust-strip {
  margin-top: 3rem;
}

/* Give the product section itself more room to breathe than the sitewide page-width. */
@media screen and (min-width: 1200px) {
  .nh-product-wide {
    max-width: 138rem;
  }
}

/* More breathing room between the media gallery and the info column. The two
   columns' widths are computed as calc(X% - var(--grid-desktop-horizontal-spacing) / 2),
   so the gap must be raised via that same variable (scoped to .product only) rather
   than via column-gap directly — otherwise gap + widths exceed 100% and the info
   column wraps below the gallery instead of sitting beside it. Both sides subtract
   half the variable and the gap adds it back in full, so total width always stays
   at exactly 100% regardless of how large this value is — safe to raise freely. */
@media screen and (min-width: 750px) {
  .product {
    --grid-desktop-horizontal-spacing: 8rem;
  }
}

@media screen and (min-width: 1200px) {
  .product {
    --grid-desktop-horizontal-spacing: 10rem;
  }
}

/* Video experiences link */
.nh-video-link-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.4rem;
}

.nh-video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--nh-ink);
  text-decoration: none;
}

.nh-video-link .icon-arrow {
  width: 1.2rem;
}

/* ---- nahleh-product-details.css ---- */
.nh-details__heading {
  font-size: 2.4rem;
  font-weight: 900;
  margin: 0 0 2rem;
  letter-spacing: -0.02em;
  color: var(--nh-charcoal);
}

.nh-details {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.nh-details__item {
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-md);
  padding: 0 2.4rem;
}

.nh-details__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.9rem 0;
  list-style: none;
}

.nh-details__item summary::-webkit-details-marker {
  display: none;
}

.nh-details__summary-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nh-details__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nh-amber);
  flex-shrink: 0;
}

.nh-details__icon svg {
  width: 1.9rem;
  height: 1.9rem;
}

.nh-details__title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--nh-charcoal);
}

.nh-details__item .icon-caret {
  position: static;
  flex-shrink: 0;
  width: 1.2rem;
  color: var(--nh-charcoal);
  transition: transform 0.2s ease;
}

.nh-details__item[open] > summary .icon-caret {
  transform: rotate(180deg);
}

.nh-details__content {
  padding: 0 0 2.2rem;
  margin: -0.6rem 0 0;
  color: var(--nh-body);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.85;
}

.nh-details__content > *:first-child {
  margin-top: 0;
}

.nh-details__content > *:last-child {
  margin-bottom: 0;
}

.nh-details__content ul {
  margin: 0;
  padding-inline-start: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

@media screen and (max-width: 749px) {
  .nh-details__item {
    padding: 0 1.6rem;
  }

  .nh-details__title {
    font-size: 1.4rem;
  }

  .nh-details__heading {
    font-size: 2.1rem;
  }
}

/* ---- nahleh-comfort-features.css ---- */
.nh-feature-header {
  text-align: center;
  margin: 0 0 3.2rem;
}

.nh-feature-header .nahleh-eyebrow {
  margin-bottom: 1.4rem;
}

.nh-feature-heading {
  font-size: 2.8rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--nh-charcoal);
}

.nh-feature-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.nh-feature-row {
  display: grid;
  /* Two equal halves whatever their content (minmax: a column never grows to fit its content). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--nh-white);
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
  box-shadow: var(--nh-shadow-soft);
}

/* The image panel is one square at every width, and the image covers it edge to edge. The panel has its
   size before the (lazy) image arrives, so nothing moves when it loads; its tint shows until then. Beside
   longer text it stretches to the row's height and the image still covers it. The slight zoom trims the
   thin dark frame some uploads carry, so every row's image meets the panel's edge the same way. */
.nh-feature-row__media {
  order: 2;
  position: relative;
  overflow: hidden;
  /* The column sets the width; the ratio is the row's minimum height. Without the width, a panel stretched
     to taller text would take its width from that height and spill out of its column. */
  width: 100%;
  aspect-ratio: 1 / 1;
  align-self: stretch;
}

.nh-feature-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  transform: scale(1.04);
}

/* No image: the row is its text alone, never an empty panel. */
.nh-feature-row--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.nh-feature-row__content {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.6rem 4.4rem;
}

.nh-feature-row--reverse .nh-feature-row__media {
  order: 1;
}

.nh-feature-row--reverse .nh-feature-row__content {
  order: 2;
}

.nh-feature-row__eyebrow {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
}

.nh-feature-row__heading {
  font-size: 2.2rem;
  font-weight: 900;
  margin: 0 0 1.4rem;
  letter-spacing: -0.02em;
  color: var(--nh-charcoal);
}

.nh-feature-row__text {
  color: var(--nh-body);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
}

.nh-feature-row__text p {
  margin: 0;
}

.nh-feature-row--tint-0 .nh-feature-row__media {
  background: var(--nh-sand);
}

.nh-feature-row--tint-0 .nh-feature-row__eyebrow {
  color: var(--nh-amber-deep);
}


.nh-feature-row--tint-1 .nh-feature-row__media {
  background: var(--nh-sage-tint);
}

.nh-feature-row--tint-1 .nh-feature-row__eyebrow {
  color: var(--nh-sage);
}


.nh-feature-row--tint-2 .nh-feature-row__media {
  background: var(--nh-blush);
}

.nh-feature-row--tint-2 .nh-feature-row__eyebrow {
  color: var(--nh-coral);
}


@media screen and (max-width: 749px) {
  .nh-feature-row {
    grid-template-columns: 1fr;
  }

  /* Stacked into one column, the desktop side-alternation would put two
     images back-to-back between rows — keep every row text-first here. */
  .nh-feature-row--reverse .nh-feature-row__content {
    order: 1;
  }

  .nh-feature-row--reverse .nh-feature-row__media {
    order: 2;
  }


  .nh-feature-row__content {
    padding: 2.8rem 2.4rem;
  }

  .nh-feature-heading {
    font-size: 2.2rem;
  }
}

/* ---- nahleh-comparison.css ---- */
.nahleh-comparison__heading {
  font-size: 2.8rem;
  font-weight: 900;
  text-align: center;
  margin: 0 0 2.8rem;
  letter-spacing: -0.02em;
}

.nahleh-comparison {
  max-width: 64rem;
  margin: 0 auto;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
}

.nahleh-comparison__row {
  display: grid;
  grid-template-columns: 1fr 9.2rem 9.2rem;
  align-items: center;
}

.nahleh-comparison__row:not(:first-child) {
  border-top: 1px solid var(--nh-cool-grey);
}

.nahleh-comparison__row--head {
  background: var(--nh-charcoal);
  color: var(--nh-cream-2);
}

.nahleh-comparison__feature-label,
.nahleh-comparison__feature {
  padding: 1.8rem 2rem;
  font-size: 1.45rem;
  font-weight: 700;
}

.nahleh-comparison__feature {
  color: var(--nh-ink);
  font-weight: 600;
}

.nahleh-comparison__us-label {
  padding: 1.8rem 0.6rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--nh-amber-gold);
}

.nahleh-comparison__them-label {
  padding: 1.8rem 0.6rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: rgba(251, 248, 243, 0.55);
}

.nahleh-comparison__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0.6rem;
}

.nahleh-comparison__cell--us {
  background: var(--nh-sage-tint);
}

.nahleh-comparison__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nahleh-comparison__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.nahleh-comparison__icon--yes {
  background: var(--nh-sage);
  color: var(--nh-white);
}

.nahleh-comparison__icon--no {
  background: var(--nh-border);
  color: var(--nh-muted);
}

.nahleh-comparison__cell-text {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--nh-ink);
  text-align: center;
}

@media screen and (max-width: 480px) {
  .nahleh-comparison__row {
    grid-template-columns: 1fr 7rem 7rem;
  }

  .nahleh-comparison__feature-label,
  .nahleh-comparison__feature {
    padding: 1.4rem 1.4rem;
    font-size: 1.3rem;
  }
}

/* ---- nahleh-ugc.css ---- */
.nahleh-ugc__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}

.nahleh-ugc__heading {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 1.1rem 0 0;
  letter-spacing: -0.02em;
}

.nahleh-ugc-rail {
  display: block;
  position: relative;
}

.nahleh-ugc-rail__track {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.4rem 0.2rem 1.2rem;
  /* Same inset as the padding, so the first card already sits on a snap point when the page loads: a mandatory
     scroller that is not resnaps itself, and Chrome counts that as a scroll, which ends LCP (sliders.spec). */
  scroll-padding-inline: 0.2rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nahleh-ugc-rail__track::-webkit-scrollbar {
  display: none;
}

.nahleh-ugc-card {
  flex: none;
  width: 20.6rem;
  aspect-ratio: 9 / 16;
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  scroll-snap-align: start;
  background: var(--nh-charcoal);
  box-shadow: var(--nh-shadow-card);
  transition: transform 0.18s ease;
  border: none;
  padding: 0;
  font-family: inherit;
}

.nahleh-ugc-card:hover {
  transform: translateY(-4px);
}

.nahleh-ugc-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

.nahleh-ugc-card__image,
.nahleh-ugc-card__image.placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nahleh-ugc-card__duration {
  position: absolute;
  top: 1.2rem;
  inset-inline-start: 1.2rem;
  z-index: 3;
  background: rgba(20, 18, 15, 0.55);
  backdrop-filter: blur(4px);
  color: var(--nh-white);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 0.3rem 0.9rem;
  border-radius: var(--nh-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nahleh-ugc-card__duration svg {
  width: 1.1rem;
  height: 1.1rem;
}

.nahleh-ugc-card__overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.6rem 1.3rem 1.4rem;
  background: linear-gradient(to top, rgba(18, 16, 13, 0.82), rgba(18, 16, 13, 0.3) 60%, transparent);
  z-index: 3;
  text-align: start;
  color: var(--nh-white);
}

.nahleh-ugc-card__caption {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nahleh-ugc-rail__nav {
  display: flex;
  gap: 0.9rem;
  justify-content: flex-end;
  margin-top: 0.4rem;
}

.nahleh-ugc-rail__button {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--nh-border-2);
  background: var(--nh-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nh-charcoal);
}

.nahleh-ugc-rail__button:hover:not([aria-disabled="true"]) {
  background: var(--nh-sand);
}

/* At the start of the rail "previous" has nowhere to go, at its end "next" (the carousel behaviour sets
   `aria-disabled`, which keeps it focusable); when every clip already fits, the arrows go. */
.nahleh-ugc-rail__button[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.nahleh-ugc-rail__nav:has(.nahleh-ugc-rail__button--prev[aria-disabled="true"]):has(.nahleh-ugc-rail__button--next[aria-disabled="true"]) {
  display: none;
}

/* The arrow is drawn pointing right. "Previous" points back and "next" on, in reading order: in Arabic
   "next" points left. */
.nahleh-ugc-rail__arrow {
  display: block;
}

.nahleh-ugc-rail__button--prev .nahleh-ugc-rail__arrow,
[dir="rtl"] .nahleh-ugc-rail__button--next .nahleh-ugc-rail__arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .nahleh-ugc-rail__button--prev .nahleh-ugc-rail__arrow {
  transform: none;
}


/* ---- nahleh-reviews.css ---- */
.nh-reviews__header {
  text-align: center;
  margin: 0 0 3.2rem;
}

.nh-reviews__heading {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--nh-charcoal);
  margin: 1rem 0 0;
  letter-spacing: -0.02em;
}

.nh-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 2rem;
}

.nh-reviews__card {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-lg);
  box-shadow: var(--nh-shadow-card);
  padding: 2.4rem;
}

.nh-reviews__stars {
  display: flex;
  gap: 0.2rem;
}

.nh-reviews__star {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--nh-amber);
}

.nh-reviews__star svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.nh-reviews__star--empty {
  color: var(--nh-border-2);
}

.nh-reviews__text {
  margin: 0;
  flex: 1;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--nh-body);
}

.nh-reviews__author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nh-reviews__avatar {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
}

.nh-reviews__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nh-sage-tint);
  color: var(--nh-sage);
  font-weight: 800;
  font-size: 1.5rem;
}

.nh-reviews__name {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--nh-charcoal);
}

@media screen and (max-width: 749px) {
  .nh-reviews__heading {
    font-size: 2.1rem;
  }

  .nh-reviews__grid {
    grid-template-columns: 1fr;
  }

  .nh-reviews__card {
    padding: 2rem;
  }
}

/* ---- nahleh-countdown.css ---- */
/* Sale price block, countdown timer, and Buy Now button — scoped to sections/main-product.liquid */

.nahleh-promo-price {
  --nahleh-promo-red: #c0392b;

  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.8rem 0 0.6rem;
  font-family: var(--font-body-family);
}

.nahleh-promo-badge {
  background: var(--nahleh-promo-red);
  color: var(--nh-white);
  font-size: 1.3rem;
  font-weight: 800;
  padding: 0.5rem 1.1rem;
  border-radius: 0.7rem;
  white-space: nowrap;
}

.nahleh-promo-compare {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--nh-muted);
  text-decoration: line-through;
}

/* .nahleh-promo-save nests inside .nahleh-promo-compare (the "save X" badge sits right after the
   struck-through price in the markup) — without its own rule it had no spacing from the price
   before it and visually inherited the line-through across its own text. */
.nahleh-promo-save {
  display: inline-block;
  margin-inline-start: 0.6rem;
  text-decoration: none;
}

.nahleh-promo-final {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--nh-charcoal);
  letter-spacing: -0.01em;
}

.nahleh-countdown {
  --nahleh-promo-red: #c0392b;

  display: block;
  margin: 1.2rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--nh-cream);
  border: 0.1rem solid var(--nahleh-promo-red);
  border-radius: var(--nh-radius-lg);
  font-family: var(--font-body-family);
  text-align: center;
}

.nahleh-countdown__label {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--nahleh-promo-red);
}

nahleh-buy-now-button {
  display: block;
  margin-bottom: 1rem;
}

.nahleh-btn--green {
  background: #1e8449;
  color: var(--nh-white);
}

.nahleh-btn--green:not([disabled]):hover {
  filter: brightness(1.06);
}

.nahleh-btn--green:not([disabled]):active {
  transform: translateY(0);
}

/* ---- component-localization-form.css ---- */
.localization-form{display:flex;flex-direction:column;flex:auto 1 0;padding:1rem;margin:0 auto}.localization-form:only-child{display:inline-flex;flex-wrap:wrap;flex:initial;padding:1rem 0}.localization-form:only-child .button,.localization-form:only-child .localization-form__select{margin:1rem 1rem .5rem;flex-grow:1}@media screen and (min-width:750px){.localization-form{padding:1rem 2rem 1rem 0}.localization-form:first-of-type{padding-left:0}.localization-form:only-child{justify-content:start;width:auto;margin:0 1rem 0 0}.localization-form:only-child .button,.localization-form:only-child .localization-form__select{margin:1rem 0}}.localization-form .button{padding:1rem}.localization-form__currency{opacity:0;transition:opacity .15s cubic-bezier(.25,.46,.45,.94);white-space:nowrap;padding-right:1.7rem}@media screen and (max-width:749px){.localization-form .button{word-break:break-all}.localization-form__currency{opacity:1}}.localization-form__select{border-radius:var(--inputs-radius-outset);position:relative;margin-bottom:1.5rem;padding-left:1rem;text-align:left;min-height:calc(4rem + var(--inputs-border-width) * 2);min-width:calc(7rem + var(--inputs-border-width) * 2)}.disclosure__button.localization-form__select{padding:calc(2rem + var(--inputs-border-width));background:rgb(var(--color-background))}.localization-form__select .icon-caret{position:absolute;content:"";height:.6rem;right:calc(var(--inputs-border-width) + 1.5rem);top:calc(50% - .2rem)}.localization-selector.link{text-decoration:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;color:rgb(var(--color-foreground));width:100%;padding-right:4rem;padding-bottom:1.5rem}.disclosure .localization-form__select{padding-top:1.5rem}.localization-selector option{color:#000}.localization-selector+.disclosure__list-wrapper{opacity:1;animation:animateLocalization var(--duration-default) ease}.disclosure{position:relative}.disclosure__button{align-items:center;cursor:pointer;display:flex;height:4rem;padding:0 1.5rem;font-size:1.3rem;background-color:transparent}.disclosure__list-wrapper{border-width:var(--popup-border-width);border-style:solid;border-color:rgba(var(--color-foreground),var(--popup-border-opacity));overflow:hidden;position:absolute;bottom:100%;transform:translateY(-1rem);z-index:2;background-color:rgb(var(--color-background));border-radius:var(--popup-corner-radius);box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity));max-height:27.5rem}.disclosure__list{position:relative;overflow-y:auto;font-size:1.4rem;padding-bottom:.5rem;padding-top:.5rem;scroll-padding:.5rem 0;max-height:20.5rem;max-width:25.5rem;min-width:12rem;width:max-content}.country-selector__list{padding-bottom:.95rem;padding-top:0}.country-selector__list--with-multiple-currencies{width:25.5rem}.country-selector__close-button{display:none}.country-filter{display:flex;justify-content:end;align-items:center;gap:.5rem;padding:1.5rem 1.5rem .6rem;position:sticky;top:-.02rem;background-color:rgb(var(--color-background));z-index:6}.country-filter__input{min-width:200px}.country-filter__reset-button,.country-filter__search-icon{right:calc(var(--inputs-border-width));top:var(--inputs-border-width)}.country-filter__reset-button:not(:focus-visible):after,.country-filter__reset-button:not(:focus):after{display:block;height:calc(100% - 1.8rem);content:"";position:absolute;right:0}.country-filter__reset-button:focus,.country-filter__reset-button:focus-visible{background-color:rgb(var(--color-background));z-index:4}.country-filter__reset-button:not(:focus-visible):not(.focused){box-shadow:inherit;background-color:inherit}.country-filter__reset-button:hover .icon{transform:scale(1.07)}.country-filter__reset-button .icon.icon-close,.country-filter__search-icon .icon{height:1.8rem;width:1.8rem;stroke-width:.1rem}.country-filter__search-icon{transition:opacity var(--duration-short) ease,visibility var(--duration-short) ease;opacity:1;visibility:visible;pointer-events:none;cursor:text}.country-filter__search-icon--hidden{opacity:0;visibility:hidden}@media screen and (max-width:749px){.disclosure__list-wrapper.country-selector:not([hidden])+.country-selector__overlay:empty{display:block}.country-selector__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--color-foreground),.5);z-index:3;animation:animateLocalization var(--duration-default) ease}.disclosure__list-wrapper.country-selector{position:fixed;bottom:-1rem;left:0;width:100%;height:80%;max-height:80vh;border-radius:0;border:none;box-shadow:none;z-index:4}.disclosure__list.country-selector__list{max-height:85%;min-width:100%;margin-bottom:0;z-index:5}.country-selector__close-button.link{display:flex;justify-content:center;align-items:center;padding:0rem;background-color:transparent;height:4.4rem;width:4.4rem}.country-selector__close-button .icon{width:2rem;height:2rem}.country-filter{padding:1.5rem 2rem .6rem 1.5rem}}@media screen and (min-width:750px){.country-filter--no-padding{padding:0}}.countries{padding-top:.6rem}.popular-countries{border-bottom:1px solid rgba(var(--color-foreground),.2);padding-bottom:.6rem;padding-top:.6rem}.disclosure__item{position:relative}.disclosure__link{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;padding:.9rem 1.5rem;text-decoration:none;line-height:calc(1 + .8 / var(--font-body-scale));color:rgba(var(--color-foreground),.75);word-break:break-word}.disclosure__link:hover{color:rgb(var(--color-foreground))}.disclosure__link .icon-checkmark{width:1rem;margin-right:.2rem}.disclosure__link:hover .localization-form__currency,.disclosure__link:focus-visible .localization-form__currency,.disclosure__link:focus .localization-form__currency{display:inline-block;opacity:1}.disclosure__button[aria-expanded=true] .icon-caret{transform:rotate(180deg)}.header-localization .localization-form:only-child{margin:0;padding:0}.header-localization .disclosure .localization-form__select{font-size:1.4rem;letter-spacing:.06rem;height:auto;min-height:initial;background:transparent}.header-localization .disclosure .localization-form__select:hover{text-decoration:underline}.header-localization .localization-form__select.link:after,.header-localization .localization-form__select.link:before{box-shadow:none}.header-localization .localization-form__select.link:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:-.2rem;box-shadow:0 0 .2rem rgba(var(--color-foreground),.3)}.desktop-localization-wrapper{display:flex;flex-wrap:wrap;justify-content:flex-end}.desktop-localization-wrapper .localization-selector+.disclosure__list-wrapper{animation:animateMenuOpen var(--duration-default) ease}.desktop-localization-wrapper .localization-form:only-child{padding:0}.header-localization:not(.menu-drawer__localization){align-items:center}.js .header-localization:not(.menu-drawer__localization) .localization-form__select{padding:0 2.7rem 0 1.2rem;width:max-content;height:3.8rem}.header-localization:not(.menu-drawer__localization) .localization-form:only-child .localization-form__select{margin:0}.header-localization:not(.menu-drawer__localization).localization-form__select>span{max-width:20ch;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.header-localization:not(.menu-drawer__localization) localization-form:only-child .localization-form__select>span{max-width:26ch}.header-localization:not(.menu-drawer__localization) .localization-form__select .icon-caret{right:.8rem}.header-localization:not(.menu-drawer__localization) .disclosure__list-wrapper{bottom:initial;top:100%;right:0;transform:translateY(0)}@media screen and (min-width:990px){.menu-drawer__localization{display:none}}.menu-drawer__localization localization-form{display:block}.menu-drawer__localization .localization-form__select{background-color:initial;margin-top:0;padding:1rem 3.6rem 1rem 0rem}.menu-drawer__localization .localization-form{padding:0}.menu-drawer__localization .localization-form:only-child .localization-form__select{margin:0}.menu-drawer__localization+.list-social{margin-top:1rem}.language-selector .disclosure__list{min-width:200px}
/*# sourceMappingURL=/cdn/shop/t/10/assets/component-localization-form.css.map */

/* ---- nahleh-header-utility.css ---- */
/* Redesigned header utility row: AR/EN segmented switch + evenly spaced, circular icon buttons. */

.header .header__icons {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.header .desktop-localization-wrapper {
  display: flex;
  align-items: center;
}

.nh-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.3rem;
  margin-inline-end: 1rem;
  border: 1px solid rgba(var(--color-foreground), 0.14);
  border-radius: 999px;
  background: rgba(var(--color-foreground), 0.03);
}

.nh-lang-switch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  color: rgba(var(--color-foreground), 0.6);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a.nh-lang-switch__opt:hover,
a.nh-lang-switch__opt:focus-visible {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-foreground), 0.08);
}

.nh-lang-switch__opt--active {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  cursor: default;
}

.header .header__icon:not(.header__icon--summary) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  margin: 0;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.header .header__icon:not(.header__icon--summary):hover,
.header .header__icon:not(.header__icon--summary):focus-visible {
  background-color: rgba(var(--color-foreground), 0.06);
}

.header .header__icon .icon,
.header .header__icon svg {
  width: 2rem;
  height: 2rem;
}

.header .header__icon--cart {
  position: relative;
}

/* The count sits on the bag's top corner, outside its body (the bag is 2rem, centred in the icon
   button): top-start in RTL, top-end in LTR, which are both the top-right. Dawn's bottom/left offsets
   put it over the bag. The ring separates it from the icon. */
.header .header__icon--cart .cart-count-bubble {
  top: calc(50% - 2.1rem);
  bottom: auto;
  left: auto;
  right: auto;
  inset-inline-end: calc(50% - 2rem);
  box-shadow: 0 0 0 0.2rem rgb(var(--color-background));
}

html[dir='rtl'] .header .header__icon--cart .cart-count-bubble {
  inset-inline-end: auto;
  inset-inline-start: calc(50% - 2rem);
}

/* Under 990px (where the ☰ drawer replaces the inline menu): the header row is ☰ · logo · search + cart, the logo
   exactly in the middle — the side columns share what is left equally instead of the icons pushing the logo
   aside — and the language switch moves into the drawer, under the menu ("Drawer language" below). */
@media screen and (max-width: 989px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header .header__heading,
  .header .header__heading-link {
    justify-self: center;
  }

  .header .header__icons {
    justify-self: end;
  }

  /* Only when this header has the drawer switch: a published theme from before it (header.liquid
     without .nh-drawer-lang) keeps the header switch until the new theme is published. */
  .header:has(.nh-drawer-lang) .header__icons .nh-lang-switch {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .header .header__icon:not(.header__icon--summary) {
    width: 3.8rem;
    height: 3.8rem;
  }
}

/* Drawer language: a labelled, full-width switch with each language's own name ("العربية" | "English"),
   right under the menu links. */
.nh-drawer-lang {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 1.6rem 0;
  margin-inline: 3rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid rgba(var(--color-foreground), 0.08);
}

.nh-drawer-lang__label {
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(var(--color-foreground), 0.6);
}

.nh-drawer-lang .nh-lang-switch {
  display: flex;
  margin: 0;
  padding: 0.4rem;
}

.nh-drawer-lang .nh-lang-switch__opt {
  flex: 1 1 0;
  min-width: 0;
  padding: 1.1rem 1rem;
  font-size: 1.5rem;
  letter-spacing: 0;
}

/* The menu drawer covers the page: the floating WhatsApp button (inline-styled, hence !important) would sit on
   its last row, so it steps aside while the drawer is open. */
html:has(#Details-menu-drawer-container[open]) a[data-wa] {
  display: none !important;
}

/* ---- nahleh-star-dust.css ---- */
/* bundle: dropped the Google Fonts import of Tajawal (self-hosted: @raizn/fonts/storefront) */

.sd-page * { box-sizing: border-box; }
.sd-page {
  background: #16101F;
  color: #F3ECFB;
  font-family: 'Tajawal', tajawal-fb-an, tajawal-fb-ag, tajawal-fb-aa, tajawal-fb-as, tajawal-fb-lr, tajawal-fb-l, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 80px;
}
.sd-page a { text-decoration: none; }
.sd-page ::selection { background: #E8B84B; color: #16101F; }
.sd-scroll::-webkit-scrollbar { display: none; }

@keyframes sd-twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes sd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sd-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes sd-pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sd-pulse { 0%, 100% { box-shadow: 0 10px 30px rgba(37, 211, 102, .45); } 50% { box-shadow: 0 10px 44px rgba(37, 211, 102, .75); } }

.sd-section { position: relative; z-index: 1; }

.sd-page .rte p { margin: 0; }
.sd-page .rte p + p { margin-top: 1em; }

.starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.star { position: absolute; border-radius: 50%; background: #F4D58D; box-shadow: 0 0 6px 1px rgba(244, 213, 141, .8); animation: sd-twinkle 3s ease-in-out infinite; }

.btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #25D366; color: #fff; font-family: inherit; font-weight: 900; text-decoration: none; border-radius: 16px; }
.pulse { animation: sd-pulse 2.6s ease-in-out infinite; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 800; color: #F4D58D; margin-bottom: 10px; }
.sec-title { font-size: 32px; font-weight: 900; margin: 0; letter-spacing: -.6px; }
.center-head { text-align: center; margin-bottom: 34px; }
/* Scoped: a bare `.block` also matched Tailwind's `block` utility on every page (it inset the login form's phone field). */
.sd-section > .block { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* HERO */
.hero { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; padding: 10px 0; }
.hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(232, 184, 75, .14); border: 1px solid rgba(232, 184, 75, .35); color: #F4D58D; font-size: 13px; font-weight: 800; padding: 7px 15px; border-radius: 30px; margin-bottom: 20px; }
.hero-h1 { font-size: 50px; font-weight: 900; margin: 0 0 18px; line-height: 1.18; letter-spacing: -1px; }
.shimmer { background: linear-gradient(100deg, #F4D58D, #E8B84B, #F7E7B8, #E8B84B); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sd-shimmer 4s linear infinite; }
.hero-lead { margin: 0 0 28px; font-size: 17.5px; line-height: 1.85; color: #CBBFDC; font-weight: 500; max-width: 460px; }
.hero-cta-col { display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.btn-quiz { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 56px; border-radius: 16px; background: transparent; border: 1.5px solid rgba(232, 184, 75, .45); color: #F4D58D; font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer; transition: background .2s; }
.btn-quiz:hover { background: rgba(232, 184, 75, .1); }
.hero-stats { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.hero-stats b { font-size: 19px; font-weight: 900; color: #F4D58D; }
.hero-stats small { font-size: 12px; color: #9C8FB0; font-weight: 600; }
.hero-div { width: 1px; height: 30px; background: rgba(232, 184, 75, .2); }
.hero-img-wrap { display: flex; justify-content: center; position: relative; }
.hero-img-float { position: relative; animation: sd-float 6s ease-in-out infinite; }
.hero-glow { position: absolute; inset: -18px; border-radius: 28px; background: radial-gradient(circle at 50% 40%, rgba(232, 184, 75, .35), transparent 70%); filter: blur(14px); }
.hero-img { position: relative; width: 420px; height: auto; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 22px; border: 1px solid rgba(232, 184, 75, .3); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); display: block; }
.hero-img-tag { position: absolute; bottom: 14px; right: 14px; background: rgba(22, 16, 31, .78); backdrop-filter: blur(6px); border: 1px solid rgba(232, 184, 75, .3); color: #F4D58D; font-size: 12.5px; font-weight: 800; padding: 7px 14px; border-radius: 30px; }

/* QUIZ */
.quiz { max-width: 720px; margin: 0 auto; padding: 0 20px; scroll-margin-top: 20px; }
.quiz-card { background: linear-gradient(180deg, rgba(45, 32, 64, .9), rgba(30, 21, 44, .9)); border: 1px solid rgba(232, 184, 75, .28); border-radius: 26px; padding: 34px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.quiz-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #F4D58D; }
.quiz-tag span { width: 26px; height: 26px; border-radius: 50%; background: rgba(232, 184, 75, .16); display: flex; align-items: center; justify-content: center; }
.quiz-counter { font-size: 13px; font-weight: 700; color: #9C8FB0; }
.quiz-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-bottom: 26px; }
.quiz-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #E8B84B, #F4D58D); border-radius: 6px; transition: width .35s ease; }
.q-title { font-size: 24px; font-weight: 900; margin: 0 0 6px; line-height: 1.35; letter-spacing: -.4px; }
.q-hint { margin: 0 0 22px; font-size: 14.5px; color: #A99BBE; font-weight: 500; }
.q-opts { display: flex; flex-direction: column; gap: 12px; }
.q-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: right; padding: 17px 18px; border-radius: 16px; border: 1.5px solid rgba(232, 184, 75, .22); background: rgba(255, 255, 255, .03); color: #F3ECFB; font-family: inherit; cursor: pointer; transition: all .15s; }
.q-opt:hover { border-color: rgba(232, 184, 75, .7); background: rgba(232, 184, 75, .08); }
.q-opt-ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(232, 184, 75, .1); display: flex; align-items: center; justify-content: center; font-size: 23px; flex-shrink: 0; }
.q-opt-txt { flex: 1; min-width: 0; }
.q-opt-txt b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.q-opt-txt small { display: block; font-size: 12.5px; color: #A99BBE; font-weight: 500; margin-top: 2px; }
.q-back { margin-top: 18px; background: none; border: none; color: #9C8FB0; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.result { text-align: center; }
.result-name { font-size: 25px; font-weight: 900; margin: 0 0 6px; letter-spacing: -.4px; }
.result-why { margin: 0 auto 22px; font-size: 15px; line-height: 1.8; color: #CBBFDC; font-weight: 500; max-width: 420px; }
.result-card { display: flex; gap: 14px; align-items: center; justify-content: center; background: rgba(232, 184, 75, .09); border: 1px solid rgba(232, 184, 75, .28); border-radius: 18px; padding: 18px; margin-bottom: 22px; }
.result-thumb { width: 78px; height: 78px; border-radius: 13px; border: 1px solid rgba(232, 184, 75, .3); flex-shrink: 0; object-fit: cover; }
.result-price { font-size: 22px; font-weight: 900; color: #F4D58D; }
.result-again { background: none; border: none; color: #9C8FB0; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* FEATURES */
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feat { background: linear-gradient(180deg, rgba(45, 32, 64, .6), rgba(30, 21, 44, .6)); border: 1px solid rgba(232, 184, 75, .18); border-radius: 20px; padding: 26px 22px; }
.feat-ic { width: 52px; height: 52px; border-radius: 15px; background: rgba(232, 184, 75, .14); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; }
.feat h3 { font-size: 18px; font-weight: 900; margin: 0 0 8px; letter-spacing: -.3px; }
.feat-text { font-size: 14.5px; line-height: 1.75; color: #B7AAC9; font-weight: 500; }

/* GALLERY */
.gal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.gal-scroll { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.gal-item { flex: none; width: 260px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; border: 1px solid rgba(232, 184, 75, .2); scroll-snap-align: start; background: #241A33; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* SIZES */
.sizes { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.size-list { display: flex; flex-direction: column; gap: 12px; }
.size-row { display: flex; align-items: center; gap: 16px; background: linear-gradient(180deg, rgba(45, 32, 64, .6), rgba(30, 21, 44, .6)); border: 1px solid rgba(232, 184, 75, .18); border-radius: 18px; padding: 18px 20px; position: relative; }
.size-row.feat-row { border: 1.5px solid rgba(232, 184, 75, .55); }
.size-tag { position: absolute; top: -10px; right: 18px; background: linear-gradient(90deg, #E8B84B, #F4D58D); color: #16101F; font-size: 11.5px; font-weight: 900; padding: 3px 12px; border-radius: 20px; }
.size-badge { width: 50px; height: 50px; border-radius: 14px; background: rgba(232, 184, 75, .14); color: #F4D58D; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; flex-shrink: 0; }
.size-row .info { flex: 1; min-width: 0; }
.size-row .info b { font-size: 16px; font-weight: 800; }
.size-row .info small { font-size: 13px; color: #A99BBE; font-weight: 500; display: block; margin-top: 2px; }
.size-price { font-size: 18px; font-weight: 900; color: #F4D58D; white-space: nowrap; text-align: left; flex-shrink: 0; }
.note { text-align: center; margin: 18px 0 0; font-size: 13.5px; color: #9C8FB0; font-weight: 500; }

/* STEPS */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { text-align: center; padding: 22px 18px; }
.step-n { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(232, 184, 75, .14); border: 1px solid rgba(232, 184, 75, .3); color: #F4D58D; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; }
.step h3 { font-size: 16.5px; font-weight: 800; margin: 0 0 7px; }
.step p { margin: 0; font-size: 14px; line-height: 1.7; color: #B7AAC9; font-weight: 500; }

/* FINAL CTA */
.final { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.final-card { position: relative; overflow: hidden; background: linear-gradient(150deg, #2E2040, #1C1330); border: 1px solid rgba(232, 184, 75, .3); border-radius: 28px; padding: 54px 40px; text-align: center; }
.final-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(232, 184, 75, .22), transparent 60%); pointer-events: none; }
.final h2 { font-size: 34px; font-weight: 900; margin: 0 0 12px; line-height: 1.25; letter-spacing: -.5px; }
.final-text { margin: 0 auto 26px; font-size: 16px; line-height: 1.8; color: #CBBFDC; font-weight: 500; max-width: 440px; }
.final .trust { margin-top: 18px; font-size: 13px; color: #9C8FB0; font-weight: 600; }

/* STICKY WHATSAPP BAR — hidden until scrolled past the hero CTA, then slides up */
.sticky-wa { position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; display: flex; justify-content: center; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); background: rgba(22, 16, 31, .92); backdrop-filter: blur(12px); border-top: 1px solid rgba(232, 184, 75, .2); transform: translateY(100%); transition: transform .18s ease; pointer-events: none; }
.sticky-wa.is-visible { transform: translateY(0); pointer-events: auto; }
.sticky-wa a { height: 52px; width: 100%; max-width: 420px; font-size: 16.5px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-txt { order: 2; }
  .hero-img-wrap { order: 1; }
  .hero-h1 { font-size: 34px; }
  .hero-lead { font-size: 16px; }
  .hero-img { width: 300px; }
  .quiz-card { padding: 24px 20px; }
  .q-title { font-size: 21px; }
  .sec-title { font-size: 25px; }
  .feat-grid { grid-template-columns: 1fr; }
  .gal-item { width: 210px; }
  .steps-grid { grid-template-columns: 1fr; }
  .final-card { padding: 40px 24px 44px; }
  .final h2 { font-size: 27px; }
  .sd-page { padding-bottom: 80px; }
}

/* ---- cod-form.css ---- */
/* JustLoofah COD order form — RTL, Arabic-first. */
/* bundle: dropped the Google Fonts import of Cairo (self-hosted: @raizn/fonts/storefront) */

/* Type-scale tokens, in px — deliberately independent of the host theme's
   <html> font-size. The installed theme sets html{font-size:62.5%} (root =
   10px), which silently rendered every one of this file's old rem-based
   font-sizes at ~62% of its authored size (labels at 9px, the tax note at
   7.8px). em with a single base per root was ruled out too: .cod-form nests
   inside .cod-form (blocks/cod-cart.liquid -> snippets/cod-cart-body.liquid,
   blocks/cod-form.liquid -> snippets/cod-form-body.liquid), so an em scale
   would compound to base^2 for the nested copy and change again when
   cod-core.js relocates the form into the modal panel. Declared on each of
   the form's independent root trees; every consumer below still carries an
   inline `var(--x, <px>)` fallback because cod-core.js's no-donor launcher
   branch renders .cod-form__submit outside any of these roots. */
.cod-form,
.cod-offer {
  --cod-fs-2xs: 13px;
  --cod-fs-xs: 14px;
  --cod-fs-sm: 15px;
  --cod-fs-md: 16px;
  --cod-fs-lg: 17px;
  --cod-fs-xl: 19px;
  --cod-fs-2xl: 22px;
  --cod-fs-3xl: 28px;
  direction: rtl;
  text-align: right;
  font-family: "Cairo", cairo-fb-an, cairo-fb-ag, cairo-fb-aa, cairo-fb-as, cairo-fb-lr, cairo-fb-l, "IBM Plex Sans Arabic", "Tajawal", tajawal-fb-an, tajawal-fb-ag, tajawal-fb-aa, tajawal-fb-as, tajawal-fb-lr, tajawal-fb-l, system-ui, -apple-system, sans-serif;
  max-width: 560px;
  margin: 24px auto;
  color: #2b2722;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.6;
  letter-spacing: normal;
  word-spacing: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* .cod-offer is a standalone offer block that intentionally reuses the
   form's tier/add-on components (see below) so moving selection out of the
   form does not change the visual language or RTL spacing — it was
   byte-identical to .cod-form above, now collapsed into one rule. */
.cod-offer__notice {
  padding: 12px 14px;
  border: 1px solid #e3a11c;
  border-radius: 12px;
  background: #fff7e6;
  color: #6b4d0b;
  font-size: var(--cod-fs-sm, 15px);
  line-height: 1.6;
}

.cod-form__loading {
  padding: 24px;
  text-align: center;
  color: #857a6a;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.6;
}

.cod-form__title {
  /* This is an <h3>, and themes routinely style headings by element —
     Dawn's base.css has `h1,h2,h3,h4,h5 { font-family: var(--font-heading-family) }`.
     Our Cairo stack is only *inherited* from the .cod-form root, and an
     inherited value always loses to a rule that matches the element directly,
     no matter how low its specificity. Without this the section headings
     silently render in the theme's heading font while the labels and inputs
     beside them render Cairo. */
  font-family: inherit;
  font-size: var(--cod-fs-xl, 19px);
  line-height: 1.35;
  font-weight: 700;
  margin: 22px 0 12px;
}

/* Tiers */
.cod-form__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.cod-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border: 2px solid #e7ded0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.cod-tier:active {
  transform: scale(0.99);
}
.cod-tier.is-selected {
  border-color: #e3a11c;
  box-shadow: 0 0 0 3px rgba(227, 161, 28, 0.18);
}
.cod-tier:focus-visible {
  outline: 3px solid rgba(227, 161, 28, 0.5);
  outline-offset: 2px;
}
/* .cod-tier is a <label> now, not a <button> (a <select> can't live inside
   a <button> — see cod-offer-controls.liquid), paired with a sibling
   <input type="radio"> that carries the actual checked state. The radio is
   visually hidden but still focusable/clickable (position:absolute removes
   it from .cod-form__tiers' grid/flex flow without display:none, which
   would also remove it from the Tab order) — :focus-visible on it repaints
   the exact outline .cod-tier itself used to show as a focusable <button>. */
.cod-tier-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.cod-tier-radio:focus-visible + .cod-tier {
  outline: 3px solid rgba(227, 161, 28, 0.5);
  outline-offset: 2px;
}
.cod-tier__label {
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.35;
  font-weight: 700;
}
.cod-tier__price {
  font-size: var(--cod-fs-xl, 19px);
  line-height: 1.25;
  font-weight: 700;
  color: #2b2722;
  font-variant-numeric: tabular-nums;
}
.cod-tier__compare {
  font-size: var(--cod-fs-xs, 14px);
  line-height: 1.3;
  color: #a99e8c;
  text-decoration: line-through;
}
.cod-tier__desc {
  font-size: var(--cod-fs-xs, 14px);
  line-height: 1.45;
  color: #857a6a;
  text-align: center;
}

/* Phase 3 tier display fields — genuinely NEW classes, so none of this
   touches .cod-tier/.cod-tier__label/.cod-tier__price/.cod-tier__compare/
   .cod-tier__desc above. Each element only exists in the DOM when its
   Liquid field is present (cod-offer-controls.liquid), so a tier carrying
   none of them stays byte-identical to before Phase 3 in either layout. */
.cod-tier__badge {
  font-family: inherit;
  font-size: var(--cod-fs-2xs, 13px);
  line-height: 1.3;
  font-weight: 700;
  color: #6b4d0b;
  background: #fff2cf;
  border-radius: 999px;
  padding: 2px 8px;
  align-self: flex-start;
}
.cod-tier__popular {
  font-family: inherit;
  font-size: var(--cod-fs-2xs, 13px);
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  background: #e3a11c;
  border-radius: 999px;
  padding: 2px 8px;
  align-self: flex-start;
}
.cod-tier__per-unit {
  font-size: var(--cod-fs-2xs, 13px);
  line-height: 1.3;
  color: #857a6a;
  font-variant-numeric: tabular-nums;
}
.cod-tier__savings {
  font-size: var(--cod-fs-2xs, 13px);
  line-height: 1.3;
  font-weight: 700;
  color: #3fa34d;
}

/* ---------------------------------------------------------------------
   Bars layout — wrapper modifier ONLY (form_config.tier_layout: "bars",
   default "cards"). Every selector below is scoped under .cod-tiers--bars
   so none of it is a bare, unscoped rule for .cod-tier / .cod-tier__label /
   .cod-tier__price / .cod-tier__compare / .cod-tier__desc / .cod-form__tiers
   — those stay exactly as they render today under the default "cards"
   layout, which is what's live on nahleh's published theme right now.
   RTL-safe throughout: logical inset-inline properties, never `right:`;
   no rem/em anywhere (CLAUDE.md's "Storefront CSS must never use rem" —
   font-sizes here reuse the existing var(--cod-fs-*, <px>) tokens, no new
   ones declared). ----------------------------------------------------- */
/* Compound selector (0-2-0), NOT a bare `.cod-tiers--bars` (0-1-0). Both
   classes sit on the same element, and `.cod-form__tiers` above sets
   `display: grid` as a single-class selector (0-1-0) too — so two
   single-class rules would tie at 0-1-0 and resolve by source order alone.
   Writing the compound form here (0-2-0) makes the bars layout win
   independently of where this rule sits in the file. `grid-template-columns`
   is reset as belt-and-braces, in case a future rule flips `display` back. */
.cod-form__tiers.cod-tiers--bars {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 8px;
}
.cod-tiers--bars .cod-tier {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  text-align: start;
  padding: 12px 14px;
  border-radius: 12px;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
/* Selection affordance. The real input is visually hidden (.cod-tier-radio at
   113 is 1px/opacity 0), so before this there was no dot, ring or check
   anywhere and nothing signalled that the bars were choices at all. This
   pseudo-element is a decorative radio dot occupying a new inline-start grid
   column; the input keeps every bit of the semantics. Grid columns follow
   `direction`, so it lands on the correct side under RTL with no logical
   offset needed. */
.cod-tiers--bars .cod-tier::before {
  content: "";
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid #d9cfbe;
  background: #fff;
  align-self: center;
}
/* Recommended tier — deliberately QUIETER than the selected state, and
   deliberately placed BEFORE it. This selector and
   `.cod-tiers--bars .cod-tier.is-selected` below are both specificity 0-3-0,
   so they tie and resolve by source order alone: recommended first means
   selected always wins on a tier that is both. Reordering these two rules
   silently makes the selected state invisible on the popular tier. */
.cod-tiers--bars .cod-tier:has(.cod-tier__popular) {
  border-color: #f0d9a3;
  background: #fffdf6;
}
/* Selected state. Hooked on BOTH the `:checked` sibling (CSS-native, cannot
   drift) and the `.is-selected` class the JS writes, so it holds whichever
   sets state first. Measured in the browser: radio.checked and .is-selected
   are always in sync, so the two hooks never disagree. */
.cod-tiers--bars .cod-tier-radio:checked + .cod-tier,
.cod-tiers--bars .cod-tier.is-selected {
  border-color: #e3a11c;
  background: #fff8ec;
  box-shadow: 0 0 0 3px rgba(227, 161, 28, 0.22), 0 1px 2px rgba(43, 39, 34, 0.06);
}
.cod-tiers--bars .cod-tier-radio:checked + .cod-tier::before,
.cod-tiers--bars .cod-tier.is-selected::before {
  border-color: #e3a11c;
  background: radial-gradient(circle at center, #e3a11c 0 42%, #fff 47% 100%);
}
.cod-tiers--bars .cod-tier__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  text-align: start;
}
/* Price hierarchy. This was a 4-row column (compare / price / per-unit /
   savings) which made every discounted bar 35px taller than the plain one and
   put the strikethrough ABOVE the real price. A 2x2 grid with explicit
   per-class placement gives every tier a predictable 2-line block and is
   robust to any of the three optional children being absent — nth-child
   placement would not be, since compare, per-unit and savings each render
   only when their field is set. */
.cod-tiers--bars .cod-tier__pricing {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 1px;
  flex-shrink: 0;
  text-align: end;
}
.cod-tiers--bars .cod-tier__price {
  grid-column: 1;
  grid-row: 1;
}
.cod-tiers--bars .cod-tier__compare {
  grid-column: 2;
  grid-row: 1;
}
.cod-tiers--bars .cod-tier__per-unit {
  grid-column: 1;
  grid-row: 2;
}
/* The savings string is authored "-25%" (U+2D U+32 U+35 U+25) but rendered
   "25%-" — under `direction: rtl` the leading ASCII hyphen is a bidi-neutral
   character and gets reordered to the visual end. Isolating the run in an LTR
   embedding renders it as authored. The cards layout has the identical defect
   and is deliberately NOT fixed here, because cards is live on production. */
.cod-tiers--bars .cod-tier__savings {
  grid-column: 2;
  grid-row: 2;
  direction: ltr;
  unicode-bidi: isolate;
}
/* Badge de-emphasis. `badge_text` has no cross-tier validation, so a merchant
   can set "most popular" on two tiers at once and split the shopper's
   attention. Demoting the badge to a muted outline pill keeps the solid
   `.cod-tier__popular` chip (single-enforced, client and server) as the one
   loud recommendation even when the config carries duplicates. */
.cod-tiers--bars .cod-tier__badge {
  background: transparent;
  border: 1px solid #e7ded0;
  color: #857a6a;
  font-weight: 600;
}
.cod-tiers--bars .cod-tier__popular {
  box-shadow: 0 1px 2px rgba(43, 39, 34, 0.12);
}
.cod-tiers--bars .cod-tier__desc {
  text-align: start;
}

/* Per-bar per-option variant pickers (cod-offer-controls.liquid's
   cod_show_variant_picks / cod-core.js's buildBarVariantPicks +
   bindBarVariantPicks) — selects live INSIDE every bar, under an
   option-name header, one row per pack unit numbered #1/#2/… (the number
   omitted entirely for a quantity-1 tier). Scoped under .cod-tiers--bars
   like every other rule in this section: cards keeps its separate
   below-the-list picker (.cod-form__variants below) untouched. Spans the
   full row width under .cod-tiers--bars .cod-tier's 2-column grid. No
   rem font-sizes; .cod-tier__variant-select reuses .cod-field__input for
   its font/color/border (both already carry the --cod-fs-* px tokens). */
.cod-tiers--bars .cod-tier__variants {
  grid-column: 1 / -1;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e7ded0;
}
.cod-tiers--bars .cod-tier__variant-names {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 2px;
  font-size: var(--cod-fs-xs, 14px);
  font-weight: 600;
  color: #6b6355;
}
.cod-tiers--bars .cod-tier__variant-unit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 140px;
}
/* Same bidi problem as the savings chip: the unit number is two spans,
   <span>#</span><span>N</span>, and RTL reorders them to render "1 #". */
.cod-tiers--bars .cod-tier__variant-number {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font-size: var(--cod-fs-xs, 14px);
  font-weight: 700;
  color: #857a6a;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.cod-tiers--bars .cod-tier__variant-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.cod-tiers--bars .cod-tier__variant-select {
  flex: 1;
  min-width: 96px;
  min-height: 34px;
  padding: 4px 8px;
  font-size: var(--cod-fs-xs, 14px);
  cursor: pointer;
}
/* Collapse the pickers on every bar except the active one. They used to render
   expanded inside all bars simultaneously, so an unselected bar paid 75px of
   picker height it could not act on. Verified in the browser that the select
   values survive hide/reveal, so bindBarVariantPicks' seeding and its
   selectionsByTier map are unaffected. Both hooks for the same reason as the
   selected state above. */
.cod-tiers--bars .cod-tier:not(.is-selected) .cod-tier__variants {
  display: none;
}
.cod-tiers--bars .cod-tier-radio:not(:checked) + .cod-tier .cod-tier__variants {
  display: none;
}

/* Upsells */
.cod-form__upsells {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cod-upsell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e7ded0;
  border-radius: 12px;
  cursor: pointer;
}
.cod-upsell__cb {
  width: 18px;
  height: 18px;
  accent-color: #e3a11c;
}
.cod-upsell.is-disabled,
.cod-upsell__cb:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.cod-upsell__img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
}
.cod-upsell__title {
  flex: 1;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.45;
}
.cod-upsell__price {
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.45;
  font-weight: 600;
  color: #6b6355;
}
/* Phase 3 — additive-only, same convention as .cod-tier__compare: only in
   the DOM when the upsell carries compare_at_price. */
.cod-upsell__compare {
  font-size: var(--cod-fs-xs, 14px);
  line-height: 1.3;
  color: #a99e8c;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* Mix-and-match per-unit variant pickers (cod-core.js: renderVariantPicks).
   Rendered ONLY when a tier's quantity is 2+ AND the product has 2+
   variants — a single-variant product gets none of this markup at all.
   Reuses .cod-field__input / .cod-field__label verbatim (both already carry
   the --cod-fs-* px tokens declared on .cod-form/.cod-offer above) so this
   adds no new font-size, per CLAUDE.md's "Storefront CSS must never use
   rem" gate. */
.cod-form__variants {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.cod-variant-pick {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cod-variant-pick__select {
  cursor: pointer;
}

/* Form fields */
.cod-form__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cod-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cod-field__label {
  font-size: var(--cod-fs-sm, 15px);
  line-height: 1.5;
  font-weight: 600;
  color: #55504a;
}
.cod-field__input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  min-height: 48px;
  border: 1px solid #d9cfbe;
  border-radius: 10px;
  font-family: inherit;
  /* Hard floor: must never resolve below 16px at any breakpoint, or iOS
     zooms the viewport on focus. --cod-fs-md is 16px desktop / 17px
     mobile — always above the floor. */
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.5;
  background: #fff;
  color: inherit;
}
.cod-field__input:focus {
  outline: none;
  border-color: #e3a11c;
  box-shadow: 0 0 0 3px rgba(227, 161, 28, 0.15);
}

/* Composite phone field: country-code select + numeric local-number input */
.cod-field__phone {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.cod-field__cc {
  /* Always rendered with the .cod-field__input class alongside this one
     (see cod-core.js and the *-body.liquid templates), so it already gets
     that rule's font-size/min-height. Width stays in em (not px) so it
     keeps auto-tracking whatever that font-size resolves to. */
  flex: 0 0 auto;
  width: 6.5em;
  padding-inline: 8px;
}
.cod-field__phone-input {
  flex: 1;
}

/* Quantity selector (simple/non-bundle mode). No rule previously existed
   for either class — the input inherited only .cod-field__input and
   rendered as a full-width text field. */
.cod-form__qty,
.cod-field__qty {
  width: 96px;
  min-height: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Summary */
.cod-form__summary {
  border: 1px solid #e7ded0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fbf8f3;
}
.cod-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.cod-summary__row.is-total {
  border-top: 1px dashed #d9cfbe;
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 700;
  font-size: var(--cod-fs-xl, 19px);
  line-height: 1.4;
}

/* Whole-cart summary line items (cart form, drawer, product whole-cart).
   RTL flex row: media (image + qty badge) sits at the right, title grows,
   price then remove-✕ trail to the left — matching the reference design. */
.cod-cartline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #ece3d4;
}
.cod-cartline:first-child {
  padding-top: 2px;
}
.cod-cartline__media {
  position: relative;
  flex: 0 0 auto;
}
.cod-cartline__img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
}
/* Qty badge is a fixed circle pinned to the image corner: glyph size, box
   size/line-height, and offset move together as one unit, or a 2-digit
   quantity clips or drifts off the corner. Offset = -(box/2 - 3), i.e. the
   badge sits centred on the corner with a consistent 3px overlap. Verify
   at qty 1, 12, and 100. */
.cod-cartline__qty {
  position: absolute;
  top: -8px;
  inset-inline-start: -8px;
  min-width: 22px;
  height: 22px;
  box-sizing: border-box;
  padding: 0 5px;
  border-radius: 999px;
  background: #2b2722;
  color: #fff;
  font-size: var(--cod-fs-2xs, 13px);
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.cod-cartline__info {
  flex: 1;
  min-width: 0;
}
.cod-cartline__title {
  font-weight: 600;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.4;
}
.cod-cartline__price {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.cod-cartline__remove {
  flex: 0 0 auto;
  /* Tap target 26px -> 32px desktop / 36px mobile (merchant-requested).
     Full 44px would dominate a 76px cart row; this plus the row's own hit
     area is the accepted compromise. */
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #a99e8c;
  font-family: inherit;
  font-size: var(--cod-fs-sm, 15px);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.cod-cartline__remove:hover {
  background: #fdeceb;
  color: #b3261e;
}
.cod-summary__totals {
  margin-top: 10px;
}
.cod-summary__tax {
  margin-top: 4px;
  font-size: var(--cod-fs-xs, 14px);
  line-height: 1.5;
  color: #6b6355;
  text-align: start;
}

/* Submit */
.cod-form__submit {
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  border: none;
  border-radius: 12px;
  background: #e3a11c;
  color: #fff;
  font-family: inherit;
  font-size: var(--cod-fs-xl, 19px);
  line-height: 1.3;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  /* Anchors the .is-busy spinner below (position: absolute is relative to
     this). Inert otherwise — .cod-form__submit was already the button's own
     stacking/layout context in every use, so this changes nothing visible
     when not busy. */
  position: relative;
}
.cod-form__submit:hover {
  background: #cf9013;
}
.cod-form__submit:disabled {
  opacity: 0.65;
  cursor: default;
}
/* Submit-in-flight spinner, toggled in cod-core.js (setSubmitBusy) alongside
   the existing disabled + textContent handling — never a replacement for
   either. The CTA text stays visible (it carries the two-stage progress
   copy on the whole-cart flow); the spinner only augments it, so
   padding-inline-end makes room rather than overlapping. inset-inline-end
   (not left/right) so this sits at the correct edge under this form's RTL
   direction without a direction-specific override. */
.cod-form__submit.is-busy {
  padding-inline-end: 40px;
}
.cod-form__submit.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 15px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: cod-submit-spin 0.7s linear infinite;
}
@keyframes cod-submit-spin {
  to {
    transform: rotate(360deg);
  }
}
/* sr-only aria-live="polite" status region (ensureStatusRegion in
   cod-core.js) — mirrors the button's busy-stage text for screen readers,
   which don't reliably announce a <button>'s own textContent changes.
   Standard visually-hidden-but-announced pattern; not display:none, which
   would pull it out of the accessibility tree too. */
.cod-form__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cod-form__error {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #fdeceb;
  color: #b3261e;
  font-size: var(--cod-fs-sm, 15px);
  line-height: 1.55;
}

/* Result */
.cod-form__result {
  text-align: center;
  padding: 28px 16px;
  border: 1px solid #e7ded0;
  border-radius: 16px;
  background: #f6fbf4;
}
/* Was a line-height-as-box-height hack (line-height:54px on a 54px circle),
   which couples glyph baseline to box height and breaks the moment either
   changes. Decoupled: flex-centering sizes the box, line-height:1 keeps the
   glyph from adding its own leading on top of that. */
.cod-result__check {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #3fa34d;
  color: #fff;
  font-size: var(--cod-fs-3xl, 28px);
  line-height: 1;
  font-weight: 700;
}
.cod-result__title {
  font-size: var(--cod-fs-2xl, 22px);
  line-height: 1.35;
  font-weight: 700;
}
.cod-result__order {
  margin-top: 6px;
  color: #6b6355;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.5;
}
.cod-result__hint {
  margin-top: 14px;
  font-size: var(--cod-fs-sm, 15px);
  line-height: 1.6;
  color: #6b6355;
}
.cod-result__again {
  margin-top: 16px;
}

/* Popup launcher (display_mode: popup) */
.cod-form__launcher {
  margin-top: 0;
}

/* Embed auto-mount launcher (P6) — same look as .cod-form__submit; inserted
   directly into theme markup (not inside a .cod-form root) so it can't rely
   on cascade from a COD form/block wrapper. RTL-safe (no directional
   properties beyond what .cod-form__submit already sets via inheritance).
   Deliberately has NO font-size: cod-core.js clones the theme's own donor
   button class here so the launcher matches the surrounding theme. */
.cod-embed-launcher {
  display: block;
  box-sizing: border-box;
  text-align: center;
}

/* Modal / drawer overlay (popup display mode) — RTL-friendly */
.cod-modal {
  --cod-fs-2xs: 13px;
  --cod-fs-xs: 14px;
  --cod-fs-sm: 15px;
  --cod-fs-md: 16px;
  --cod-fs-lg: 17px;
  --cod-fs-xl: 19px;
  --cod-fs-2xl: 22px;
  --cod-fs-3xl: 28px;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  direction: rtl;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.6;
  letter-spacing: normal;
  word-spacing: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.cod-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 39, 34, 0.55);
}
.cod-modal__panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  /* min() of vh and dvh so the iOS Safari URL bar can't eat the panel
     bottom when it collapses/expands mid-scroll. */
  max-height: min(88vh, 88dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fbf8f3;
  border: 1px solid #e7ded0;
  border-radius: 16px;
  padding: 18px 20px 26px;
  box-shadow: 0 18px 48px rgba(43, 39, 34, 0.32);
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.6;
}
.cod-modal__close {
  position: absolute;
  /* Tap target 34px -> 40px desktop / 44px mobile (merchant-requested);
     offset grown to match so it stops crowding the first title. */
  top: 14px;
  inset-inline-end: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid #e7ded0;
  border-radius: 50%;
  background: #fff;
  color: #6b6355;
  font-size: var(--cod-fs-sm, 15px);
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.cod-modal__close:hover {
  border-color: #e3a11c;
  color: #2b2722;
}
.cod-modal__content.cod-form {
  margin: 10px auto 0;
}
body.cod-modal-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   Sticky Add to Cart Bar — RTL, Arabic-first. Additive; SSR by
   blocks/cod-embed.liquid only when block.settings.sticky_enable is on.
   All colors come from --cod-sticky-* custom properties set inline by
   Liquid so merchant color-picker settings apply without a build step.
   z-index sits BELOW the COD modal (2147483000) so the modal always
   layers above the bar.

   That z-index (2147482900) also beats any theme cart-drawer z-index,
   which on mobile means the bar renders ON TOP of an open cart drawer and
   covers the drawer's checkout button. The z-index ordering above is not
   the whole story: html.cod-drawer-open (toggled by syncDrawerGate() in
   cod-core.js) and body.cod-modal-open (toggled by the COD modal) both
   force-hide the bar entirely rather than re-layer it — see the rule
   right after .cod-sticky--devices-desktop below. --------------------- */
.cod-sticky {
  --cod-sticky-radius: 16px;
  --cod-fs-2xs: 13px;
  --cod-fs-xs: 14px;
  --cod-fs-sm: 15px;
  --cod-fs-md: 16px;
  --cod-fs-lg: 17px;
  --cod-fs-xl: 19px;
  --cod-fs-2xl: 22px;
  --cod-fs-3xl: 28px;
  position: fixed;
  inset-inline: 0;
  z-index: 2147482900;
  display: flex;
  align-items: center;
  gap: 12px;
  direction: rtl;
  font-family: "Cairo", cairo-fb-an, cairo-fb-ag, cairo-fb-aa, cairo-fb-as, cairo-fb-lr, cairo-fb-l, "IBM Plex Sans Arabic", "Tajawal", tajawal-fb-an, tajawal-fb-ag, tajawal-fb-aa, tajawal-fb-as, tajawal-fb-lr, tajawal-fb-l, system-ui, -apple-system, sans-serif;
  background: var(--cod-sticky-bg, #ffffff);
  box-sizing: border-box;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.6;
  letter-spacing: normal;
  word-spacing: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.cod-sticky--bottom {
  bottom: 0;
}
.cod-sticky--top {
  top: 0;
}

.cod-sticky--shadow-none {
  box-shadow: none;
}
.cod-sticky--shadow-soft {
  box-shadow: 0 -4px 16px rgba(43, 39, 34, 0.12);
}
.cod-sticky--shadow-strong {
  box-shadow: 0 -8px 28px rgba(43, 39, 34, 0.24);
}
.cod-sticky--top.cod-sticky--shadow-soft {
  box-shadow: 0 4px 16px rgba(43, 39, 34, 0.12);
}
.cod-sticky--top.cod-sticky--shadow-strong {
  box-shadow: 0 8px 28px rgba(43, 39, 34, 0.24);
}

/* Device-visibility utility classes */
.cod-sticky--devices-mobile {
  display: none;
}
.cod-sticky--devices-desktop {
  display: none;
}

/* Force-hide the bar rather than re-layer it under a drawer/modal.
   html.cod-drawer-open is set by syncDrawerGate() in cod-core.js whenever
   an open theme cart drawer reaches the viewport edge the bar is pinned to.
   body.cod-modal-open is already set by the COD modal (see the rule at
   ~line 530 above) — needed here too because the modal's translucent
   backdrop (rgba(43,39,34,.55)) does not cover the bar's card, so the bar
   glows through at the bottom; and because closeThemeCartDrawer() closes
   the drawer before the modal opens, which would otherwise clear the
   drawer gate and let the bar pop straight back through the backdrop.
   !important is defensive only: html.cod-drawer-open .cod-sticky (0,2,1)
   already outspecifies .cod-sticky--devices-both { display: flex } (0,1,0)
   inside the device media queries below. */
html.cod-drawer-open .cod-sticky,
body.cod-modal-open .cod-sticky {
  display: none !important;
}

.cod-sticky__image {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: calc(var(--cod-sticky-radius) / 2);
  overflow: hidden;
  background: #f4efe6;
}
.cod-sticky__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cod-sticky__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cod-sticky__title {
  color: var(--cod-sticky-title-color, #2b2722);
  /* Sticky bar is position:fixed and permanently eats viewport height, so
     its type grows conservatively (+1-2px over the old rem-at-16px-root
     estimate) with a tight line-height — scaling it like the rest of the
     form would push more page content off-screen on mobile. */
  font-size: var(--cod-fs-xs, 14px);
  line-height: 1.25;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cod-sticky__stars {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--cod-sticky-star-color, #e3a11c);
  /* 2xs is the one token that does NOT grow on mobile (13px at both
     breakpoints) — the right fit for a fixed-height bar row. */
  font-size: var(--cod-fs-2xs, 13px);
  line-height: 1.2;
}
.cod-sticky__star {
  color: var(--cod-sticky-star-color, #e3a11c);
}
.cod-sticky__star-score {
  font-weight: 700;
  color: var(--cod-sticky-title-color, #2b2722);
  margin-inline-start: 4px;
}
.cod-sticky__review-count {
  color: #857a6a;
}

.cod-sticky__prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cod-sticky__price {
  color: var(--cod-sticky-price-color, #2b2722);
  font-weight: 700;
  font-size: var(--cod-fs-md, 16px);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.cod-sticky__compare {
  color: var(--cod-sticky-compare-color, #a39a8b);
  font-size: var(--cod-fs-xs, 14px);
  line-height: 1.25;
  text-decoration: line-through;
}

.cod-sticky__cta {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: var(--cod-sticky-btn-bg, #e3a11c);
  color: var(--cod-sticky-btn-text, #ffffff);
  font-family: inherit;
  font-weight: 700;
  transition: background-color 0.15s ease;
}
.cod-sticky__cta:hover,
.cod-sticky__cta:active {
  background: var(--cod-sticky-btn-hover, #c98a12);
}

/* Mobile card — image on the right, title/stars/prices stacked and
   right-aligned to its left, full-width pill CTA below. */
@media (max-width: 749px) {
  /* Type tokens read LARGER on mobile than desktop, which looks backwards
     at first glance. It's intentional: the form is full-width on small
     screens (no 560px cap to shrink into), Arabic script needs slightly
     more size than Latin for equal perceived legibility, and the original
     merchant complaint was specifically about the mobile/cart view. Reuses
     this existing breakpoint rather than adding a new one. */
  .cod-form,
  .cod-offer,
  .cod-modal,
  .cod-sticky {
    --cod-fs-xs: 15px;
    --cod-fs-sm: 16px;
    --cod-fs-md: 17px;
    --cod-fs-lg: 18px;
    --cod-fs-xl: 20px;
    --cod-fs-2xl: 23px;
    --cod-fs-3xl: 30px;
  }

  /* Touch target: the compact 34px desktop select is fine for a pointer but
     tight for a thumb, and this store is mobile-heavy. Restore a comfortable
     height on small screens. Scoped under .cod-tiers--bars like every other
     rule in that section, so the cards layout live on nahleh is untouched. */
  .cod-tiers--bars .cod-tier__variant-select {
    min-height: 40px;
    font-size: 16px;
  }

  /* iOS zooms the viewport when a focused control is under 16px, which is what
     the note on .cod-field__input above exists to prevent — but the bars
     override drops these selects to 14px and reintroduced it. Also:
     --cod-fs-2xs is absent from the mobile token block above, so it stays 13px
     while every other token grows. These four bars micro-labels are the
     consumers of it. Overridden here rather than by adding the token upstairs,
     because that block is shared with the cards layout live on production. */
  .cod-tiers--bars .cod-tier__popular,
  .cod-tiers--bars .cod-tier__badge,
  .cod-tiers--bars .cod-tier__per-unit,
  .cod-tiers--bars .cod-tier__savings {
    font-size: 14px;
  }

  .cod-modal__panel {
    /* Reclaim line width on small screens. */
    padding: 16px 16px 24px;
  }

  .cod-cartline__remove {
    width: 36px;
    height: 36px;
  }

  .cod-modal__close {
    width: 44px;
    height: 44px;
  }

  .cod-sticky {
    flex-wrap: wrap;
    padding: 10px 12px 12px;
    border-radius: var(--cod-sticky-radius) var(--cod-sticky-radius) 0 0;
  }
  .cod-sticky--top {
    border-radius: 0 0 var(--cod-sticky-radius) var(--cod-sticky-radius);
  }
  .cod-sticky__info {
    order: 1;
    text-align: right;
  }
  .cod-sticky__image {
    order: 2;
  }
  .cod-sticky__cta {
    order: 3;
    width: 100%;
    padding: 12px 16px;
    border-radius: 25px;
    /* Capped at md (not lg) to stay within the +1-2px mobile growth
       budget — the CTA's font-size is the biggest single driver of the
       bar's total height. */
    font-size: var(--cod-fs-md, 17px);
    line-height: 1.3;
  }

  .cod-sticky--devices-mobile {
    display: flex;
  }
  .cod-sticky--devices-both {
    display: flex;
  }
}

/* Desktop bar — single horizontal row. */
@media (min-width: 750px) {
  .cod-sticky {
    padding: 12px 24px;
    border-radius: var(--cod-sticky-radius);
    max-width: 720px;
    margin-inline: auto;
    inset-inline: 0;
  }
  .cod-sticky--bottom {
    margin-bottom: 16px;
  }
  .cod-sticky--top {
    margin-top: 16px;
  }
  .cod-sticky__info {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .cod-sticky__title {
    max-width: 220px;
  }
  .cod-sticky__cta {
    padding: 10px 28px;
    border-radius: calc(var(--cod-sticky-radius) / 2);
    font-size: var(--cod-fs-md, 16px);
    line-height: 1.3;
  }

  .cod-sticky--devices-desktop {
    display: flex;
  }
  .cod-sticky--devices-both {
    display: flex;
  }
}

/* `money` here is a BUCKS Currency Converter hook — it only converts text
   inside `span.money` — not a styling class. Themes commonly style .money,
   so neutralise it: adding the hook must not restyle a price. */
.cod-form .money,
.cod-sticky .money {
  font: inherit;
  color: inherit;
  display: inline;
  background: none;
}

/* Per-tier scarcity display (product_offers.badge_style / stock_note / sold_out, migration 0105).
   Ribbon: a full-width strip across the top of the card. It is the first DOM child and takes the whole first
   grid row (all three columns), so the dot, info and pricing flow into row 2. The negative margins cancel the
   card's own padding (12px block / 14px inline, `.cod-tiers--bars .cod-tier` above) to reach the card edge. */
.cod-tier__ribbon {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-block-start: -12px;
  margin-inline: -14px;
  margin-block-end: 10px;
  padding: 4px 8px;
  border-radius: 10px 10px 0 0;
  background: #1b2a4a;
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}
.cod-tier.has-ribbon .cod-tier__popular {
  display: none;
}
.cod-tier__stock,
.cod-tier__soldout {
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.cod-tier__stock {
  color: #3a2f00;
  background: #ffd84d;
}
.cod-tier__soldout {
  color: #fff;
  background: #1b2a4a;
  border-radius: 6px;
}
.cod-tier.is-sold-out {
  opacity: 0.55;
  filter: grayscale(1);
  cursor: not-allowed;
  border-color: #e7ded0 !important;
  background: #fff !important;
}
.cod-tier.is-sold-out .cod-tier__variants {
  display: none !important;
}

/* ---- nahleh-cart.css ---- */
/* Cart drawer + cart page additions on top of Dawn's component-cart-drawer.css.
   Dawn's drawer is written for a left-to-right page: it slides in from the right edge and parks
   the close button top-right. On an Arabic page it must come from the left, mirrored. */
[dir="rtl"] .drawer__inner{transform:translate(-100%);border-right:.1rem solid rgba(var(--color-foreground),.2);border-left:0}
[dir="rtl"] .drawer.active .drawer__inner{transform:translate(0)}
[dir="rtl"] .drawer__close{right:auto;left:-10px}
[dir="rtl"] .cart-drawer .tax-note{margin:1.2rem auto 2rem 0;text-align:right}
[dir="rtl"] .drawer__footer summary{padding:1.5rem 0 1.5rem 2.8rem}
.drawer__footer summary{cursor:pointer;list-style:none;justify-content:space-between}
.drawer__footer summary::-webkit-details-marker{display:none}
.drawer__footer textarea{width:100%;min-height:8rem;padding:1rem 1.2rem;border:.1rem solid rgba(var(--color-foreground),.25);border-radius:var(--inputs-radius,.8rem);font:inherit}
.cart-drawer .cart-item__media{position:relative}
.cart-drawer .cart-item__link{position:absolute;inset:0}
.cart-drawer .cart-item__image{border-radius:.8rem;aspect-ratio:1/1;object-fit:cover;width:100%;height:auto}
.cart-drawer .cart__checkout-button{width:100%;display:flex;justify-content:center}
cart-drawer-items[aria-busy="true"]{opacity:.6;pointer-events:none;transition:opacity .15s}

/* Free-delivery progress — the "you are X away" bar Shopify merchants add with an app. */
.nh-free-delivery{padding:.4rem 0 1.4rem}
.nh-free-delivery__text{margin:0 0 .8rem;color:rgb(var(--color-foreground))}
.nh-free-delivery__bar{height:.6rem;border-radius:99rem;background:rgba(var(--color-foreground),.1);overflow:hidden}
.nh-free-delivery__bar>span{display:block;height:100%;border-radius:inherit;background:rgb(var(--color-button));transition:width .4s ease}

/* Cart page: note + free-delivery sit above the totals. */
.cart__note-field{margin-bottom:2rem}
.cart__note-field textarea{width:100%;min-height:9rem;padding:1.2rem;border:.1rem solid rgba(var(--color-foreground),.25);border-radius:var(--inputs-radius,.8rem);font:inherit;background:rgb(var(--color-background))}
.cart__note-field label{display:block;margin-bottom:.6rem}
.cart__footer .nh-free-delivery{max-width:40rem;margin-inline-start:auto}
/* Empty cart page: Dawn shows only its empty message and "continue shopping" button there, and hides the title row
   (`cart-items.is-empty .title-wrapper-with-link`, component-cart.css). The port's cart wrapper is a <div>: same rule for it. */
.is-empty>.page-width>.title-wrapper-with-link{display:none}
/* The drawer is 40rem wide: column headings there only crowd the first line. Kept for screen readers. */
.cart-drawer .cart-items thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Drawer: header and footer stay put, only the lines scroll. Dawn lets the whole panel scroll below 650px
   of height, which pushed "Check out" off a phone screen; 100dvh keeps it above the browser's toolbar. */
cart-drawer,cart-drawer.drawer{height:100%;height:100dvh}
.cart-drawer .drawer__inner{overflow:hidden}
.cart-drawer cart-drawer-items{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cart-drawer .drawer__header,.cart-drawer .drawer__footer{flex-shrink:0}
.cart-drawer .drawer__footer{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}
/* A short screen (a phone held sideways): header + footer can outgrow it, so the whole panel scrolls again
   and Check out stays reachable. */
@media screen and (max-height:500px){.cart-drawer .drawer__inner{overflow-y:auto}.cart-drawer cart-drawer-items{flex:0 0 auto;overflow:visible}}
/* Variant and bundle count on one line ("فردة عدد 4 (زوجين) · 2×" fits a 360px phone at 1.3rem). A longer
   label wraps between words, never truncated; the count stays with its last word, never alone. */
.cart-drawer .nh-variant-line{font-size:1.3rem;word-break:normal;overflow-wrap:anywhere}
.cart-drawer .nh-variant-line__qty{white-space:nowrap}
/* Stepper and trash on one row, the trash centred on the stepper. */
.cart-drawer .cart-item__quantity-wrapper{flex-wrap:nowrap;align-items:center;gap:.8rem}
.cart-drawer .cart-remove-button{flex-shrink:0;min-width:4.4rem;min-height:4.4rem;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center}

/* Cart page: the note and the summary never share a line's space. Dawn gives each child a fixed 35rem
   and a physical margin-left; a grid with a real gap replaces both. Below 990px (a tablet's note column
   would be ~23rem) they stack: note first, then the summary. */
.cart__footer{display:flex;flex-direction:column;gap:3.2rem}
.cart__footer>*,.cart__footer>*+*{width:auto;margin:0}
.cart__footer .cart__note-field{margin-bottom:0;min-width:0}
@media screen and (min-width:990px){
  .cart__footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(28rem,38rem);column-gap:6rem;align-items:start}
  .cart__footer>.cart__blocks{grid-column:-2}
}

/* ---- nahleh-platform.css ---- */
/* Styles for markup the platform renders on Nahleh that the Shopify theme never had.
   Sizes and colours follow nahleh-collection.css so a rating on a Dawn card
   (search, related products) looks like the one on a collection card. */

.nh-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nh-ink);
}

.nh-rating__stars {
  display: inline-flex;
  gap: 0.1rem;
}

.nh-star {
  display: inline-flex;
  color: rgba(var(--color-foreground), 0.15);
}

.nh-star--on {
  color: var(--nh-amber-gold);
}

.nh-star svg {
  width: 1.2rem;
  height: 1.2rem;
}

.nh-rating__count {
  color: var(--nh-muted);
  font-weight: 500;
}

/* Search tabs and filter pills: a wrapping row on desktop, one swipeable row on a phone
   (Dawn's mobile facets drawer needs facets.js, which this storefront does not ship). */
.rz-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
}

.rz-row > * {
  flex: none;
}

.rz-facet {
  position: relative;
}

.rz-facet__toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.8rem 1.4rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.rz-facet__toggle[aria-expanded="true"] {
  background: rgba(var(--color-foreground), 0.06);
}

.rz-facet__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.rz-facet__pop {
  position: absolute;
  /* Dawn's .facets__display pins left:-1.2rem and width:35rem; reset both so RTL anchors right. */
  left: auto;
  right: auto;
  inset-inline-start: 0;
  width: max-content;
  max-width: min(36rem, 90vw);
  top: calc(100% + 0.6rem);
  z-index: 4;
  min-width: 26rem;
  max-height: 34rem;
  overflow-y: auto;
  padding: 1.6rem;
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.15);
  border-radius: 1.2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.rz-facet__backdrop {
  display: none;
}

@media screen and (max-width: 749px) {
  .rz-row--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    padding-block: 0.2rem;
  }

  .rz-row--scroll::-webkit-scrollbar {
    display: none;
  }

  /* On a phone a filter opens as a bottom sheet over a dimmed page. */
  .rz-facet__pop {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    top: auto;
    bottom: 0;
    z-index: 101;
    min-width: 0;
    max-height: 70vh;
    padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom));
    border-radius: 1.6rem 1.6rem 0 0;
    border-bottom: 0;
  }

  .rz-facet__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.35);
  }

  .rz-facet__title {
    display: block;
    margin: 0 0 1.2rem;
    font-weight: 700;
  }
}

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

/* Dawn spaces the cart totals with margin-left, which is the wrong side in Arabic:
   "المجموع الفرعي22.000 د.أ". Mirror it for right-to-left pages. */
[dir="rtl"] .totals > * + * {
  margin-left: 0;
  margin-right: 2rem;
}

/* The floating WhatsApp button never sits on top of an open cart drawer's checkout button. */
html.cod-drawer-open a[data-wa] {
  display: none !important;
}

/* A price never breaks between the amount and "د.أ". */
.cart-item__final-price,
.cart-item__old-price,
.cart-item__price-wrapper .price,
.totals__total-value {
  white-space: nowrap;
}

/* The COD stylesheet pins its widgets right-to-left (it was written for the Arabic store); on the
   English pages that reversed every price ("JD 21.990JD") and label. Follow the element's dir. */
.cod-offer[dir="ltr"],
.cod-form[dir="ltr"],
.cod-sticky[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

.cod-tier__price,
.cod-tier__compare,
.cod-tier__per-unit .money {
  white-space: nowrap;
}

/* COD popup (themes/nahleh/sections/CodPopup.tsx) — the old app's modal, plus what it never had. */
.cod-modal[dir="ltr"] {
  direction: ltr;
  text-align: left;
}
.cod-field__input[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 1px #b3261e inset;
}
.nh-cod-qty {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}
.nh-cod-qty .quantity {
  width: 14rem;
  min-height: 4.8rem;
  background: #fff;
  border-radius: 10px;
}
.cod-form__submit.nh-cod-view {
  display: block;
  text-align: center;
  text-decoration: none;
  background: #fff;
  color: #2b2722;
  border: 1px solid #e7ded0;
}
.cod-form__submit[aria-busy="true"] {
  opacity: 0.75;
  cursor: progress;
}
/* An add-on's prices wrapped as "JD / 11.990" on a phone; keep each amount on one line. */
.cod-upsell__compare,
.cod-upsell__price,
.cod-cartline__price,
.cod-summary__row .money {
  white-space: nowrap;
}
/* On a phone the add-on row had no room for a title plus two prices side by side: stack the
   was-price over the price (desktop keeps the live store's single row). */
.cod-upsell__title { min-width: 0; }
@media (max-width: 480px) {
  .cod-upsell {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 0;
  }
  .cod-upsell__cb, .cod-upsell__img, .cod-upsell__title { grid-row: 1 / span 2; }
  .cod-upsell__compare { grid-column: 4; grid-row: 1; justify-self: end; align-self: end; }
  .cod-upsell__price { grid-column: 4; grid-row: 2; justify-self: end; align-self: start; }
  .cod-upsell__price:only-of-type { grid-row: 1 / span 2; align-self: center; }
}

/* ───────────── Motion (platform, beyond Dawn) ─────────────
   Dawn's drawer snaps its dimmed backdrop on and slides the panel on a 200ms ease. Here the
   backdrop fades, the panel arrives on a spring and leaves faster than it came, a removed line
   folds away, prices dim while a change is on its way to the server, and the header's cart
   bubble bumps when something is added. Nothing changes at rest; reduced motion turns it off. */
:root {
  --sf-ease-spring: linear(0, 0.0081, 0.0317, 0.0695 4.8%, 0.1216, 0.1851 8.2%, 0.3236 11.4%, 0.6089 17.3%, 0.7295, 0.8274 23.3%, 0.9038 26.6%, 0.9565 29.9%, 0.9912 33.3%, 1.0138 37%, 1.0233 40.5%, 1.025 44.4%, 1.0203 49.4%, 1.0038 62.6%, 0.9995 74.7%, 1);
  --sf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sf-ease-in: cubic-bezier(0.55, 0, 0.8, 0.2);
}
cart-drawer.drawer {
  background-color: rgba(var(--color-foreground), 0);
  transition: visibility 240ms, background-color 220ms var(--sf-ease-in);
}
cart-drawer.drawer.active {
  background-color: rgba(var(--color-foreground), 0.5);
  transition: visibility 0ms, background-color 300ms var(--sf-ease-out);
}
cart-drawer .drawer__inner {
  transition: transform 220ms var(--sf-ease-in);
  touch-action: pan-y;
  will-change: transform;
}
cart-drawer.active .drawer__inner {
  transition: transform 460ms var(--sf-ease-spring);
}
/* In Arabic the panel docks to the left edge, so it must hide off that edge — Dawn pushed it right,
   which made it sweep in from the middle of the screen. */
[dir="rtl"] cart-drawer:not(.active) .drawer__inner { transform: translate(-100%); }

/* A removed line folds away instead of vanishing. */
cart-drawer .cart-item { transition: opacity 180ms var(--sf-ease-out), transform 260ms var(--sf-ease-out); }
cart-drawer .cart-item.nh-line-leaving { opacity: 0; transform: translateX(12px); pointer-events: none; }
[dir="rtl"] cart-drawer .cart-item.nh-line-leaving { transform: translateX(-12px); }

/* The shopper's change is on screen; the money follows the server. */
cart-drawer .cart-item__totals, cart-drawer .totals__total-value { transition: opacity 200ms var(--sf-ease-out); }
cart-drawer.nh-cart-stale .cart-item__totals, cart-drawer.nh-cart-stale .totals__total-value { opacity: 0.45; }
cart-drawer .cart-item.nh-line-pending { opacity: 0.55; }
cart-drawer .quantity__input { transition: transform 200ms var(--sf-ease-spring); }
cart-drawer .quantity__button:active { transform: scale(0.88); }
cart-drawer .quantity__button { transition: transform 120ms var(--sf-ease-out); }

/* Free-delivery bar grows smoothly as the cart fills. */
.nh-free-delivery__bar > span { transition: width 600ms var(--sf-ease-spring); }

/* Header cart bubble: a bump when something is added. */
@keyframes nh-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }
#cart-icon-bubble.nh-bump, .cart-count-bubble.nh-bump { animation: nh-bump 520ms var(--sf-ease-spring); }

/* Tactile press on theme buttons. */
.nh-theme .button:not([disabled]):active, .nh-theme .cart__checkout-button:active { transform: scale(0.98); }
.nh-theme .button { transition: transform 120ms var(--sf-ease-out), box-shadow var(--duration-short) ease; }

@media (prefers-reduced-motion: reduce) {
  cart-drawer.drawer, cart-drawer .drawer__inner, cart-drawer .cart-item, .nh-free-delivery__bar > span { transition: none !important; }
  #cart-icon-bubble.nh-bump, .cart-count-bubble.nh-bump { animation: none; }
}

/* Cart page (sections/main-cart): the same instant stepper as the drawer. */
html.nh-cart-stale .cart-item__totals, html.nh-cart-stale .totals__total-value { opacity: 0.45; transition: opacity 200ms var(--sf-ease-out); }
.cart-item.nh-line-leaving { opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity 180ms var(--sf-ease-out), transform 260ms var(--sf-ease-out); }
[dir="rtl"] .cart-item.nh-line-leaving { transform: translateX(-12px); }

/* The merchant's colour for an option value (products.option_swatches) inside a Dawn pill: Dawn's own
   .swatch circle (component-swatch.css), small, before the value's name. */
.product-form__input--pill .nh-pill-swatch {
  --swatch--size: 1.8rem;
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 0.6rem;
}

/* The COD popup's cart rows (− / + / remove) and its discount-code box. Logical properties only. */
.nh-cod-cartrow .cod-cartline__info { display: grid; gap: 6px; }
.nh-cod-cartqty.quantity { width: 11rem; min-height: 3.6rem; background: #fff; border-radius: 8px; }
.nh-cod-cartqty .quantity__button { width: 3.6rem; }
.nh-cod-stale .nh-cod-cartrow .cod-cartline__price,
.nh-cod-stale .cod-summary__row .money { opacity: 0.5; transition: opacity 120ms; }
.cod-summary__row.nh-cod-eta { padding-block: 0 4px; font-size: 13px; color: #7a6f60; }
.nh-cod-promo { margin-block: 12px 4px; }
.nh-cod-promo__row { display: flex; gap: 8px; align-items: stretch; }
.nh-cod-promo__input { flex: 1; min-width: 0; }
.nh-cod-promo__apply { flex: 0 0 auto; padding-block: 0; padding-inline: 18px; border: 1px solid #2b2722; border-radius: 12px; background: #2b2722; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.nh-cod-promo__apply:disabled { opacity: 0.5; cursor: default; }
.nh-cod-promo__applied { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #1f7a3f; font-weight: 600; }
.nh-cod-promo__remove { border: none; background: none; padding: 0; color: #6b6355; text-decoration: underline; cursor: pointer; font: inherit; }
.nh-cod-promo__error { margin-block: 6px 0; font-size: var(--cod-fs-xs, 14px); color: #b3261e; }
.nh-cod-discount .money { color: #1f7a3f; }

/* ============ Search (header overlay, predictive panel, /search) ============
   Logical properties only; the physical `left/right: auto` resets undo Dawn's and nahleh-rtl.css's
   absolute positions, which would otherwise win over the inset-inline ones. */

/* One input with one border. Two frames used to wrap it: the storefront's own `.field` utility
   (globals.css: border, white fill, padding) and Dawn's .field::after; and Dawn's floating label
   covered the icon (the label is now the input's aria-label). */
.nh-search-field.field {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.nh-search-field::before,
.nh-search-field::after {
  display: none;
}

.nh-search-field .search__input.field__input {
  height: 4.8rem;
  margin: 0;
  padding-block: 0;
  padding-inline: 1.6rem 9.2rem;
  border: 1px solid rgba(var(--color-foreground), 0.25);
  border-radius: 1.2rem;
  background: rgb(var(--color-background));
  box-shadow: none;
  text-align: start;
  font-size: 1.6rem;
  /* Typed text runs and aligns in its own direction (Arabic on /en from the right, English on Arabic pages from the
     left) while the box keeps the page's direction, so its end padding stays on the icons' side. `dir="auto"` used to
     flip the whole box: on /en, Arabic then ran under the ✕ and 🔍 (QA, 2026-10-26). */
  unicode-bidi: plaintext;
}

.nh-search-field .search__input.field__input:placeholder-shown {
  padding-inline-end: 4.8rem;
}

.nh-search-field .search__input.field__input:focus,
.nh-search-field .search__input.field__input:focus-visible {
  outline: none;
  border-color: rgba(var(--color-foreground), 0.6);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.08);
}

/* The visible hint is .nh-search-field__hint (Chrome never ends a search field's placeholder in
   "…"); the placeholder itself stays in the markup for assistive technology. */
.nh-search-field .search__input.field__input::placeholder {
  opacity: 0;
}

.nh-search-field__hint {
  position: absolute;
  top: 50%;
  inset-inline: 1.7rem 4.8rem;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: start;
  color: rgba(var(--color-foreground), 0.55);
  font-size: 1.6rem;
  pointer-events: none;
}

.nh-search-field .search__input:not(:placeholder-shown) ~ .nh-search-field__hint {
  display: none;
}

/* A phone fits fewer words: the hint shrinks a little. The typed text keeps 16px (nahleh-base.css:
   smaller makes iOS zoom in). */
@media screen and (max-width: 749px) {
  .nh-search-field__hint {
    font-size: 1.4rem;
  }
}

/* The header modal: field and close button on one line. Dawn puts the button beside
   <predictive-search>; here it sits inside it, after the form, so the element lays them out. */
.search-modal__content > predictive-search.search-modal__form {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.search-modal__content > predictive-search.search-modal__form > form {
  flex: 1 1 auto;
  min-width: 0;
}

.search-modal__content > predictive-search.search-modal__form > .search-modal__close-button {
  flex: none;
  position: static;
  margin: 0;
}

/* Dawn kept 5rem free on a phone for its floating close button; it is in the row now. */
@media screen and (max-width: 749px) {
  html[dir] .search-modal__content:has(> predictive-search > .search-modal__close-button) {
    padding-inline: 1rem;
  }
}

.nh-search-field .field__button.search__button,
.nh-search-field .field__button.reset__button {
  position: absolute;
  top: 50%;
  left: auto;
  right: auto;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgba(var(--color-foreground), 0.75);
}

.nh-search-field .field__button.search__button {
  inset-inline-end: 0.2rem;
}

.nh-search-field .field__button.reset__button {
  inset-inline-end: 4.6rem;
}

.nh-search-field .field__button.reset__button::after {
  display: none;
}

.nh-search-field .field__button svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* The header's panel spans the screen on a phone (nahleh-rtl.css's `right: auto` shrank it to its
   content in Arabic). */
@media screen and (max-width: 749px) {
  html[dir] .predictive-search.predictive-search--header {
    inset-inline: 0;
  }
}

/* Predictive panel on a wide screen: every column it has, side by side over the full width —
   products wider, collections / articles / pages beside them. Dawn's rules expect the pages
   markup twice and pin the first column to 26.4rem, which left half the panel empty. */
@media screen and (min-width: 750px) {
  .predictive-search .predictive-search__results-groups-wrapper {
    display: flex;
    flex-direction: row;
    gap: 3.2rem;
  }

  .predictive-search .predictive-search__results-groups-wrapper .predictive-search__result-group:nth-child(n) {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }

  .predictive-search .predictive-search__results-groups-wrapper .predictive-search__result-group--products:nth-child(n) {
    flex-grow: 2;
  }

  .predictive-search .predictive-search__result-group:nth-child(n) .predictive-search__pages-wrapper {
    display: block;
  }
}

/* Result-type tabs: one row; on a phone it scrolls sideways (snap, faded trailing edge) instead of
   running off the page. */
.nh-search-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-block-end: 1.6rem;
}

.nh-search-tabs {
  min-width: 0;
  max-width: 100%;
}

.nh-search-tabs__list {
  display: flex;
  gap: 0.8rem;
  margin: 0;
  padding-block: 0.2rem;
  padding-inline: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.nh-search-tabs__list::-webkit-scrollbar {
  display: none;
}

.nh-search-tabs__list > li {
  flex: none;
  scroll-snap-align: start;
}

.nh-search-tab {
  display: inline-flex;
  align-items: center;
  min-height: 4rem;
  padding-block: 0;
  padding-inline: 1.6rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 4rem;
  color: rgb(var(--color-foreground));
  font-size: 1.4rem;
  white-space: nowrap;
  text-decoration: none;
}

.nh-search-tab:hover {
  background: rgba(var(--color-foreground), 0.06);
}

.nh-search-tab.is-active {
  border-color: rgb(var(--color-button));
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-weight: 700;
}

@media screen and (max-width: 749px) {
  .nh-search-tabs__list {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 3.2rem);
    mask-image: linear-gradient(to left, transparent 0, #000 3.2rem);
  }

  [dir="rtl"] .nh-search-tabs__list {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3.2rem);
    mask-image: linear-gradient(to right, transparent 0, #000 3.2rem);
  }

  /* The last tab can scroll clear of the fade. */
  .nh-search-tabs__list::after {
    content: "";
    flex: 0 0 2.4rem;
  }
}

@media screen and (min-width: 750px) {
  .nh-search-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

/* Sort: its label, then one pill — the look of the filter pills (.rz-facet__toggle). */
.nh-search-sort {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.nh-search-sort__label {
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.75);
  white-space: nowrap;
}

.nh-search-sort__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nh-search-sort__select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding-block: 0.8rem;
  padding-inline: 1.4rem 3.4rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.4rem;
  cursor: pointer;
}

.nh-search-sort__select:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.2rem;
}

.nh-search-sort__pill .icon-caret {
  position: absolute;
  inset-inline-end: 1.4rem;
  width: 1rem;
  height: 0.6rem;
  pointer-events: none;
}

/* Collections among the results: pills, with the collection's image when it has one. */
.nh-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
}

.nh-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4rem;
  padding-block: 0.4rem;
  padding-inline: 1.6rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 4rem;
  color: rgb(var(--color-foreground));
  font-size: 1.4rem;
  text-decoration: none;
}

.nh-search-chip:hover {
  background: rgba(var(--color-foreground), 0.06);
}

.nh-search-chip img {
  width: 2.8rem;
  height: 2.8rem;
  margin-inline-start: -1rem;
  border-radius: 50%;
  object-fit: cover;
}

.template-search__results-count {
  margin-block: 1.2rem 0;
}

/* "نتائج البحث عن «كريم»" sat right on top of the field. */
.template-search__header h1 {
  margin-block: 0 1.6rem;
}

@media screen and (min-width: 750px) {
  .template-search__header h1 {
    margin-block-end: 2.4rem;
  }
}

/* ============ Sticky buy bar (themes/nahleh/sections/StickyBuyBar.tsx) ============
   One balanced row. Desktop: a floating card — photo and name at the start, then the price block, then
   the button. Phone: full width, the price block and a wide button (~64px). The price block is the
   chosen bundle's price on top, the struck-through price and the saving pill under it. It slides in
   after the first scroll. The page keeps room for it (bar + safe area), so it never covers the footer
   or a button and its arrival never moves the page. */
html.nh-has-sticky-buy body {
  padding-bottom: calc(var(--raizn-sticky-h, 0px) + env(safe-area-inset-bottom));
}

.cod-sticky.nh-sticky-buy {
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.6rem;
  min-height: 64px;
  padding-block: 10px;
  padding-inline: 12px 12px;
  border: 1px solid rgba(43, 39, 34, 0.08);
  box-shadow: 0 12px 32px rgba(43, 39, 34, 0.16);
  transform: translateY(calc(100% + 48px));
  transition: transform 0.22s ease;
}

.cod-sticky.nh-sticky-buy[data-shown] {
  transform: none;
}

.nh-sticky-buy__product {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.nh-sticky-buy__thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: #fbf8f3;
}

.nh-sticky-buy__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: #2b2722;
}

/* The price block: the price on its own line, the struck price and the saving under it. */
.nh-sticky-buy .cod-sticky__prices {
  flex: none;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  gap: 0.1rem 0.6rem;
  line-height: 1.2;
}

.nh-sticky-buy .cod-sticky__price {
  grid-column: 1 / -1;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

.nh-sticky-buy .cod-sticky__compare {
  font-size: 13px;
  white-space: nowrap;
}

.nh-sticky-buy__save {
  justify-self: start;
  padding-block: 1px;
  padding-inline: 7px;
  border-radius: 999px;
  background: #fdecea;
  color: #c8543b;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.cod-sticky.nh-sticky-buy .cod-sticky__cta {
  order: 0;
  flex: none;
  width: auto;
  min-height: 48px;
  padding-block: 10px;
  padding-inline: 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(227, 161, 28, 0.35);
}

@media (min-width: 750px) {
  .cod-sticky.nh-sticky-buy {
    max-width: 760px;
    margin-bottom: 16px;
    border-radius: 18px;
  }
}

/* A phone: the price block and a wide button — no photo or name. */
@media (max-width: 749px) {
  .cod-sticky.nh-sticky-buy {
    gap: 1.2rem;
    padding-block: 10px calc(10px + env(safe-area-inset-bottom));
    padding-inline: 16px;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 24px rgba(43, 39, 34, 0.12);
  }

  .nh-sticky-buy__product {
    display: none;
  }

  .nh-sticky-buy .cod-sticky__prices {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cod-sticky.nh-sticky-buy .cod-sticky__cta {
    flex: 0 0 auto;
    min-width: 46%;
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cod-sticky.nh-sticky-buy {
    transition: none;
  }
}

/* ============ COD order popup on a phone (themes/nahleh/sections/CodPopup.tsx) ============
   A full-screen sheet: nothing of the page shows underneath, the body scrolls, the close button stays
   in reach at the top and the submit button stays at the bottom. */
@media (max-width: 749px) {
  .cod-modal {
    padding: 0;
    align-items: stretch;
  }

  .cod-modal__backdrop {
    display: none;
  }

  .cod-modal .cod-modal__panel {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-block: 0;
    padding-inline: 16px;
    overscroll-behavior: contain;
  }

  .cod-modal .cod-modal__close {
    position: sticky;
    top: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 8px 0;
    margin-inline-start: auto;
    box-shadow: 0 2px 8px rgba(43, 39, 34, 0.12);
  }

  .cod-modal .cod-modal__content.cod-form {
    margin-block-start: -36px;
  }

  .cod-modal .cod-form__submit:not(.cod-result__again) {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-block-end: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -14px 14px -2px #fbf8f3;
  }
}

/* Bundle cards: the "most popular" pill stays on one line, a bundle's name never breaks mid-phrase,
   the phone's country code shows whole ("🇯🇴 +962"), and the submit text keeps to one line. */
.cod-tier__popular {
  white-space: nowrap;
}

.cod-tier__label {
  text-wrap: balance;
}

.cod-field__cc.cod-field__input {
  width: auto;
  min-width: 7.5em;
  padding-inline: 8px 24px;
}

.cod-form__submit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 749px) {
  .cod-tier__popular {
    font-size: 12px;
    padding-block: 1px;
    padding-inline: 6px;
  }

  .cod-form__submit {
    font-size: clamp(15px, 4.4vw, 19px);
  }
}

/* Order placed: the close button sat on the result card's border. It now has its own row inside the
   panel's padding (a full 44×44 target), and the card starts below it. */
.cod-modal__panel:has(.cod-form__result) .cod-modal__close {
  width: 44px;
  height: 44px;
  top: 12px;
  inset-inline-end: 12px;
}

.cod-modal__panel:has(.cod-form__result) .cod-modal__content.cod-form {
  margin-block-start: 52px;
}

@media (max-width: 749px) {
  .cod-modal .cod-modal__panel:has(.cod-form__result) .cod-modal__content.cod-form {
    margin-block-start: 12px;
  }
}

/* A phone: the bundle's pricing stacks into one column (price, struck price, per unit, saving), so its
   name keeps the room it needs instead of breaking into one word per line ("مشد / عدد / 2"). */
@media (max-width: 749px) {
  .cod-tiers--bars .cod-tier__pricing {
    grid-template-columns: auto;
    row-gap: 0;
  }

  .cod-tiers--bars .cod-tier__pricing > * {
    grid-column: 1;
    grid-row: auto;
  }

  .cod-tiers--bars .cod-tier__info {
    flex: 1 1 auto;
  }
}