/** Shopify CDN: Minification failed

Line 3733:8 Expected identifier but found whitespace
Line 3733:9 Unexpected "100%"
Line 3791:6 Expected identifier but found "0"
Line 4054:0 Unexpected "1."
Line 4186:8 Expected identifier but found whitespace
Line 4186:9 Unexpected "#000"
Line 4218:0 Unexpected "#"
Line 5756:0 Comments in CSS use "/* ... */" instead of "//"
Line 7145:0 Unexpected "}"

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

 
  --font-body-family: 'Nimbus Sans', sans-serif !important;
  --font-heading-family: 'Nimbus Sans', sans-serif !important;
 
}

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

  .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 , .page-width {
    padding-left: 2rem;
    padding-right: 2rem;
  }

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

  .mj-article{
    max-width: 150rem !important;
  }

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

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

.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: #000000;
  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: 12px !important;
        font-weight: 400 !important;
  }
}

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:#000000;
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: #000000;
}

.link--text:hover {
  color: #000000, 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: #000000;
}

.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: #000000, 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.3rem;
}

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

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

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 1px;
}

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

/* UMARA.WORLD – custom theme */
/* ===============================
   FUTURA CUSTOM FONT
================================ */


.localization-selector,
.localization-selector span {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

@font-face {
  font-family: 'Nimbus Sans';
  /* src: url("{{ 'NimbusSans-Regular.woff' | asset_url }}") format('woff'); */
  src: url('/cdn/shop/t/2/assets/NimbusSans-Regular.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/cdn/shop/t/2/assets/NimbusSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/cdn/shop/t/2/assets/NimbusSans-Regular.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/cdn/shop/t/2/assets/NimbusSans-Bold.woff') format('woff'); 
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/cdn/shop/t/2/assets/NimbusSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/cdn/shop/t/2/assets/NimbusSans-Bold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/cdn/shop/t/2/assets/NimbusSans-Bold.woff') format('woff'); 
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Include italic variants if used by your theme elements */
@font-face {
  font-family: 'Nimbus Sans';
  src: url('/cdn/shop/t/2/assets/NimbusSans-Italic.woff') format('woff'); 
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('/cdn/shop/t/2/assets/NimbusSans-BoldItalic.woff') format('woff'); 
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: var(--font-body-family);
}

html {
  font-family: 'Nimbus Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family:Assistant, sans-serif !important;
  
    
}


.announcement-bar-slider button {
    display: none !important;
}


/* Header transparent at top */
/* .header-wrapper {
  background-color: transparent !important;
  position: fixed;
  color:white !important;
  /* top: 0; */
  width: 100%;
  z-index: 999;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
} */

/* Text / logo / links for transparent header */
/* .header-wrapper .header__heading,
.header-wrapper .header__logo img,
.header-wrapper .header__link {
  color: #fff; /* white for transparency over hero */
  transition: all 0.3s ease;
} */

/* Transparent header initially */
/* .header-wrapper {
  color:white !important;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
} */

/* Transparent state */
/* .header-wrapper .h2 {
  color: white !important;
} */

/* Menu text (transparent header) */
/* .header-wrapper .list-menu__item,
.header-wrapper .list-menu__item span,
.header-wrapper .list-menu__item a {
  color: white !important;
} */

/* ====================== */
/* SCROLLED STATE */
/* ====================== */

/* .header-wrapper.scrolled .h2 {
  color: rgba(var(--color-foreground), 0.75) !important;
} */


.scrolled-header{
  background:white !important;
}

/* Menu text when scrolled */
/* .header-wrapper.scrolled .list-menu__item,
.header-wrapper.scrolled .list-menu__item span,
.header-wrapper.scrolled .list-menu__item a {
  color: rgba(var(--color-foreground), 0.75) !important;
} */



/* Header background on scroll */
/* .header-wrapper.scrolled {
  width:100%;
  background-color:#f5eeec !important; /* change color if needed */
  top:0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);        /* optional shadow */
} */

/* PRODUCT GRID IMAGE ARROWS */
.card__media {
  position: relative;
}

.card__media .product-grid-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  /* background: rgba(0,0,0,0.7); */
  color: #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.card__media .product-grid-arrow.prev {
  left: 1px;font-weight:400;
  color:black !important;
}

.card__media .product-grid-arrow.next {
  right:1px;font-weight:400;
  color:black !important;
}

.product-grid-arrow {
  pointer-events: auto;
}

.card__media a {
  pointer-events: auto;
}
.card__media .media img {
  display: none;
}

.card__media .media img.is-active {
  display: block;
}


/* Disable clicks on image layer */
.product-media-slider {
  pointer-events: none;
  position: relative;
}

/* Enable arrows */
.product-grid-arrow {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; 
  border: none;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.product-grid-arrow.prev { left: 4px; }
.product-grid-arrow.next { right: 4px; }

/* Slides */
.product-slide {
  display: none;
  width: 100%;
  height: auto;
}

.product-slide.is-active {
  display: block;
}

.card .card__inner .card__media{
  z-index: 1 !important;
}


/* Ensure all slides are hidden by default */
.product-slide {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Only show the active slide */
.product-slide.is-active {
  display: block !important;
  z-index: 2;
}

/* Ensure the container allows stacking */
.product-media-slider {
  position: relative;
  display: grid; /* Stacks images on top of each other */
  overflow: hidden;
}

.product-slide {
  grid-area: 1 / 1; /* All images occupy the same grid space */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease-in-out, visibility 0.9s;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Ensure arrows stay on top of the images */
.product-grid-arrow {
  z-index: 10;
  cursor: pointer;
}

/* Make header icons behave like text links instead of fixed icons */
.header__icons {
  display: flex;
  align-items: center;
  gap: 16px; /* space between Login and BAG */
}

.header__icon {
  width: auto;
  min-width: auto;
  padding: 0 6px;
}

/* Prevent text wrapping on small screens */
.header__icon--account,
.header__icon--cart {
  white-space: nowrap;
}


/* Remove underline by default */
.header__icon--account,
.header__icon--cart {
  text-decoration: none;
}

/* Show underline only on hover */
.header__icon--account:hover,
.header__icon--cart:hover {
  text-decoration: underline;
}


.hover-swap {
  position: relative;
  overflow: hidden;
}

.hover-swap img {
  display: block;
  width: 100%;
  height: auto;
}

.hover-swap .second-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hover-swap:hover .second-img {
  opacity: 1;
}

.hover-swap:hover .first-img {
  opacity: 0;
}


.icon-caret{
  display:none !important;
}

/* Container setup */
.card__media {
  position: relative;
  overflow: hidden;
}

/* Arrow styling - hidden by default */
.product-grid-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  opacity: 0; /* Hidden */
  transition: opacity 0.3s ease; /* Smooth fade */
  padding: 15px;
}

/* Ensure the container holds its shape */
.media.product-media-slider {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Base slide style */
.product-slide {
  transition: opacity 0.5s ease-in-out !important;
  display: block !important; /* Overwrite theme display:none */
  opacity: 0;
}

/* The first image sets the height and is visible by default */
.product-slide:first-child {
  position: relative;
  opacity: 1;
  z-index: 1;
}

/* Subsequent images stack on top */
.product-slide:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Show the active slide */
.product-slide.is-active {
  opacity: 1;
  z-index: 2;
}

/* Arrows Visibility */
.product-grid-arrow {
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.card__media:hover .product-grid-arrow {
  opacity: 1;
}

1. Default States
.card__size-hover-container {
  display: none;  
 
  gap: 5px;
  flex-wrap: wrap;
}

.card__main-info {
  display: block; /* Shown by default */
  margin-top:10px !important;
}

/* 2. Hover States (Triggered by the parent card) */
.card__information:hover .card__main-info {
  display: none !important; 
}

.card__information:hover .card__size-hover-container {
  display: flex !important;  
}


/* 1. Default States */
.card__size-hover-container {
  display: none; 
  gap: 5px;
  flex-wrap: wrap;
  width: 100%;
}

.card__main-info {
  display: flex; /* Matches your flex inline layout */
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin-top:8px !important;
}

/* 2. Hover States - Triggered when the whole card is hovered */
/* This ensures sizes show when hovering the image OR the text */
.card:hover .card__main-info,
.card-wrapper:hover .card__main-info {
  display: none !important;
}

.card:hover .card__size-hover-container,
.card-wrapper:hover .card__size-hover-container {
  display: flex !important;
      padding-top: 0.6rem;
  animation: slideUp 0.3s ease; /* Optional: smooth entry */
}

.price__regular .price-item--regular{
  font-size:12px !important;
}

.tab-titles{
      border-bottom:none !important;
}

.card__information{
  /* padding:0px !important; */
        padding-bottom: 15px !important;
        padding-top: 0.5rem !important;
}

/* Optional animation for a premium feel */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}



/* 3. Button Styling */
.size-quick-add {
  background: #fff;
  border:none;
  color: #000;
  text-decoration:none !important;
  /* border: 1px solid #000; */
  /* padding: 6px 12px; */
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 300 !important;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.size-quick-add:hover {
  background: #fff;
  color: #000;
  font-weight: 300 !important;
}

.is-unavailable{
  color:#7f7f7f !important;
}


/* .size-quick-add:disabled {
  opacity: 0.4;
  text-decoration: none !important;
  cursor: not-allowed;
} */

.tab-content p{
    margin-top: 25px;
}


.product-assistance-block {
  border:1px solid #eee;
  border-radius:0px;
  /* Mimics the full-width block design */
  display: flex;
  justify-content: space-between; /* Pushes the left and right elements to the edges */
  align-items: center;
  border-top: 1px solid #e1e1e1;
  padding: 5px 10px; /* Add padding top/bottom */
  margin-top: 60px !important;
  font-family:  var(--font-body-family);
}

.assistance-question-text {
  font-size: 1.2rem;
  color: #000;
}

/* .contact-us-link {
  /* Styling the right side link to look like the image */
  color: #000; 
  text-decoration: none; 
  font-size: 1.2rem;
  /* Adjust color on hover if desired */
} */

.contact-us-link:hover {
  text-decoration: underline !important;
}

 .contact-us-link {
  color: #000;     
  text-decoration: none; 
  font-size: 1.2rem;
  /* Ensure parent has positioning context */
  position: relative; 
  /* Add some margin to the link itself to account for the icon's width */
  padding-right: 20px; 
}

.icon-contact {
  width: 8px; 
  height: auto;
  transform: rotate(-90deg); /* Keeps it pointing right */
  display: inline-block !important;
  /* Position it absolutely for exact vertical control */
  position: absolute;
  right: 0;
  top: 50%; /* Start halfway down */
  transform: translateY(-50%) rotate(-90deg); /* Adjust up by half its height and rotate */
}

# Remove dropdown from menu which is hidden #
summary.list-menu__item{
      padding-right: 0 !important;
}


/* Wrap title + wishlist in one row */
.product__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Keep title from pushing star to next line */
.product__title h1,
.product__title h2 {
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  flex: 1;
}

/* Wishlist button container */
#swym-custom-pdp-button {
  margin-left: 10px;
  flex-shrink: 0;
}

/* ===== SWYM HEADER: ICON → TEXT "Wishlist" (CLICK SAFE) ===== */
 
/* Hide Swym wishlist button in header */
a.swym-header-launcher,
.swym-header-launcher,
#swym-header-launcher {
  display: none !important;
}


/* Remove underline from wishlist header button */
.header__icon--wishlist,
.header__icon--wishlist:hover,
.header__icon--wishlist:focus,
.header__icon--wishlist:active {
  text-decoration: none !important;
}


.header__icon--wishlist:hover {
  opacity: 0.7;
}


header-menu {
  position: relative;
}

.mega-menu {
  position: static;
}

.mega-menu__content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20rem;
  background: white;
  z-index: 999;
}

.mega-menu__content {
    background: #ffffffe6 !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Right-side mega menu (after login) */
.header__inline-menu--right {
  margin-left: 20px;
  
}

.header__inline-menu--right > ul > li:first-child {
  margin-left: auto;
}


/* Fix mega menu positioning */
.header__inline-menu {
  position: relative;
}

/* .mega-menu__content {
  left: 0;
  right: auto;
  width: 200px; 
}

.mega-menu__content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20rem;
  z-index: 99;
} */

.mega-menu .mega-menu__list--condensed{
  padding-left: 2rem !important;
}


/* Default: Hide Icons on Desktop, Show Text */
.header__icon svg {
  display: none;
}

/* Mobile: Show Icons, Hide Text */
@media screen and (max-width: 749px) {
  .hide-mobile {
    display: none !important;
  }
  .header__icon svg {
    display: block;
    width: 22px;
    height: 22px;
  }
  .header__icon {
    padding: 0 10px;
  }
  /* Style for the mobile cart badge */
  .cart-count-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #000;
    color: #fff;
    font-size: 10px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Desktop: Ensure text is visible and layout is clean */
@media screen and (min-width: 750px) {
  .show-mobile-only {
    display: none !important;
  }
  .header__icon {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    /* text-transform: uppercase; */
  }
}


/* Center the search content vertically */
.header__icon--search {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  height: 100%; /* Ensures it fills the header height */
  list-style: none; /* Removes default summary arrow */
}

.header__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Fix for Safari/Chrome default summary markers */
.header__icon--search::-webkit-details-marker {
  display: none;
}

@media screen and (max-width: 749px) {
  .header__icon--search {
    padding: 0 10px;
    min-width: 44px; /* Standard touch target size */
  }
  
  .header__icon--search .svg-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}


/* 1. Reset the container to allow the button to be absolute */
.card-wrapper, .card {
  position: relative !important;
}

/* 2. Force the button into a small circle in the top right */
.wishlist-card-overlay {
  position: absolute !important;
  top: 5px !important;
  right: 8px !important;
  left: auto !important; /* Fixes centering issues */
  z-index: 9 !important; /* Keep it above the image */
  border:none;
  
  /* Size and alignment */
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:none !important;
  /* Functionality */
  cursor: pointer !important;
  pointer-events: auto !important; /* Ensures it is clickable */
  padding: 0 !important; 
}

/* 3. Icon colors */
.wishlist-card-overlay svg {
  stroke: #000 !important;
  fill: none !important;
  width: 15px !important;
  height: 15px !important;
}

/* 4. Active state (Filled star) */
.wishlist-card-overlay.swym-added svg {
  fill: #000 !important;
}

 
/* 5. Prevent the product link from blocking the button */
.card__link, .full-unstyled-link {
  z-index: 1;
}


/* Bottom sheet base */
.country-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Overlay */
.country-sheet__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Panel */
.country-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.35s ease;
  display: flex;
  flex-direction: column;
}

/* Handle */
.country-sheet__handle {
  width: 40px;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
  margin: 10px auto;
}

/* Header */
.country-sheet__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}

.country-sheet__header h2 {
  margin: 0;
  font-size: 16px;
}

.country-sheet__close {
  background: none;
  border: 0;
  font-size: 18px;
  cursor: pointer;
}

/* Content */
.country-sheet__content {
  overflow-y: auto;
  padding: 10px 20px;
}

/* Open state */
.country-sheet.is-open {
  pointer-events: auto;
}

.country-sheet.is-open .country-sheet__overlay {
  opacity: 1;
}

.country-sheet.is-open .country-sheet__panel {
  transform: translateY(0);
}

.newsletter-content{
  text-align:left; 
  width:20rem !important;
  border-right:1px solid #666;
}


.newsletter-contents{
  /* padding:20px; */
  /* border-right:1px solid #666; */
}

.footer-block__heading {
  text-align:left !important;
  font-size:1.5rem !important;
  margin-bottom: 1rem !important;
}

.footer__content-top { 
    padding-top: 2.1rem;
}

.localization-form {
    padding: 0rem 2rem 0rem 0;
}

 .localization-popup-wrapper {
  position: fixed;
  bottom: -100%; /* Hidden by default */
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  transition: bottom 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.localization-popup-wrapper.is-active {
  bottom: 0;
}

.localization-popup-content {
  background: #fff;
  height: 60vh; /* Half page height */
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  padding: 20px;
}

.popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.local_foot{
  width:100% !important;
  height: 7rem;
      margin-left: 3rem;
      margin-top: 3rem;
}

/* 1. Remove border from the section headers (Please select your...) */
.localization-grid h3, 
.localization-title {
  border-bottom: none !important;
  margin-bottom: 25px;
  padding-bottom: 0;
}

/* 2. Remove the line above the bottom disclaimer text */
.localization-footer {
  border-top: none !important;
  margin-top: 40px;
  padding-top: 0;
}

/* 3. Remove any default borders from the buttons themselves */
.localization-btn, 
.Footer__selecters .link {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 4. Ensure the popup container itself has no border */
.localization-container {
  border: none !important;
}

/* Remove border & button style but keep functionality */
/* Remove ALL borders from localization country & language buttons */

.footer__localization .localization-form__select,
.footer__localization .localization-selector,
.footer__localization .disclosure__button {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0px 1px !important;
  min-height: auto !important;
      margin: 0 !important;
}

/* Remove pseudo border if applied */
.footer__localization .localization-form__select::after,
.footer__localization .localization-selector::after,
.footer__localization .disclosure__button::after {
  display: none !important;
}

/* Remove focus ring */
.footer__localization .localization-form__select:focus {
  outline: none !important;
  box-shadow: none !important;
}


.disclosure__list{
      max-height: max-content !important;
      min-width: 25.5rem !important;
}


.footer__column.footer__localization {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer__menu-inline {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.footer__menu-link {
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: inherit;
}

.footer__blocks-wrapper {
  display: flex;
  gap: 80px;
}

 


.header-wrapper {
  background: transparent !important;
  position: fixed !important;
  z-index: 999 !important;
  width: 100%;
  border: none;
}

 

/* Changes background to white on scroll */
.scrolled-past-header .header-wrapper {
  background-color: #ffffff !important;
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); Optional shadow for depth */
}

/* Ensures menu links remain visible (Black text on white background) */
.scrolled-past-header .header__menu-item, 
.scrolled-past-header .header__icon {
  color: #000000 !important;
}



.footer__column--info{
  display: grid;
  justify-content: left !important;
  margin-top:4%;
  border-right: 1px solid #eee;
}

.footer-block--newsletter{
  padding-top: 2.1rem !important;
}

.product__title{
  margin-bottom:0 !important;
}

.product__info-container>*+*{
  /* margin:0 !important; */
}

#price-template--25904881434935__main {
    margin-top:0px !important;
}
.localization-form:only-child{
  width: 12rem !important;
}


/* Target the Add to Bag button specifically */
.product-form__submit {
    min-height: 33px !important; /* Adjust this value to your preferred height */
    height: 33px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the container doesn't force a larger height */
.product-form__buttons {
    margin-top: 1rem;
}


.button, .button-label, .shopify-challenge__button, .customer button{
  font-size: 1.3rem;
    letter-spacing: 1px;
}

.filter-by-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
}
.filter-by-button::after {
  content: '+';
  margin-left: 10px;
  font-size: 1.2em;
}


.mobile-facets__wrapper{
      right: 0;
    position: absolute;

}

.facets-container-drawer .mobile-facets__wrapper{
          /* margin-right: 11rem !important; */
}

.breadcrumb-filter{
      font-size: 10px;
}


/* --- TRIPLE OVERRIDE FOR FLUSH MOBILE FACET FOOTER --- */

/* 1. Reset the outer container width and clear baseline padding */
.mobile-facets__footer {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* 2. Target the inner wrapper element causing the side gaps */
.mobile-facets__footer > div {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. Make the apply button span edge-to-edge with sharp corners */
.mobile-facets__footer .button {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0px !important;
}


#FacetFiltersFormMobile>.mobile-facets__footer, facet-filters-form .mobile-facets__footer{
  padding: 0px !important;
      border-bottom: 0px !important
}

#FacetFiltersFormMobile .mobile-facets__summary > div{
  border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    height: 40px;
    margin-bottom: 9px;

}


 

.product-form__input--pill input[type=radio]:checked+label{
    background-color: white !important;
    color: #757575 !important;
    border: 0 !important;
    text-decoration:underline !important;
    padding: 0 !important;
}


.product-form__input--pill input[type=radio]+label{
  background-color: white !important;
    color: #757575 !important;
    border: 0 !important;
    padding: 0 !important;
}


/* Removes rounding from all buttons including login */
.button, 
.shopify-payment-button__button, 
.customer button,
.shopify-login-button-wrapper button,
button.button--primary,
button.button--secondary {
  border-radius: 0px !important;
}

/* Specifically removes the visual "shadow" border in Dawn */
.button:after, 
.shopify-payment-button__button:after, 
.customer button:after {
  box-shadow: none !important;
  border-radius: 0px !important;
  border: 1px solid #000;
}


.main-page-title{
  display:none !important;
}

/* Force global size properties onto variant pill blocks on product details pages */
   
  
 
  /* 1. Reset standard size text options so they don't shrink */
  fieldset.product-form__input label {
    font-size: 10px !important;
      border-radius: 0px;
      color:#000 !important;
  }

  /* 2. Target ONLY the square color swatches visually */
  .swatch-input__label--square,
  .swatch-input__label,
  span.swatch--square { 
    max-width: 16px !important;
     
        border-radius: 0px !important;
  } 


  /* MAIN FOOTER */
.footer {
  background:#fff;
  color:#111;
}

/* TOP INFO SECTION */

.footer-top {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:60px;

  text-align:center;
/* 
  padding-top: 25px; */
    padding-bottom: 30px;

  /* border-top:1px solid #eee; */
  border-bottom:1px solid #eee; ;
}

.footer-top h3{
font-size:12px;
font-weight:500;
margin-bottom:15px;
}

.footer-top p,
.footer-top a{
font-size:13px;
line-height:1.7;
color:#111;
text-decoration:none;
}

/* LOWER FOOTER */

.footer__blocks{

display:grid;

grid-template-columns:
1fr
1fr
1fr
2fr;

gap:60px;

padding:50px 0;

align-items:start;
border-bottom: 1px solid #eee;
}

/* MENU */

.footer-block__heading{

font-size:14px;

font-weight:500;

margin-bottom:18px;

}

.footer__blocks ul{

padding:0;

margin:0;

}

.footer__blocks li{

list-style:none;

margin-bottom:0px;

width:auto !important;

}

.footer__blocks a{

font-size:13px;

text-decoration:none;

color:#111;

}

/* NEWSLETTER */

.newsletter-contents{

max-width:450px;

}

/* COUNTRY SELECTOR */

.footer__localization{

display:flex;

justify-content:center;

padding-bottom:50px;

}

/* MOBILE */

@media(max-width:768px){

  .footer-top{

    grid-template-columns:1fr;

    gap:40px;

  }

  .footer__blocks{

    grid-template-columns:1fr;

    gap:40px;

  }

}

.country_select{
  margin:auto !important;
  width: fit-content !important;
}

.language_select{
  display:none !important;
}


/* 2. FLEX ALIGNMENT ENGINE FOR THE SIZE ROW LAYER */
fieldset.product-form__input--pill,
.product-form__input {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

/* Force the text guide wrapper block to calculate left margin empty space */
.size-guide-inline-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: auto !important; /* Pushes the button instantly to the right border */
  padding: 0 !important;
}

/* Clean up text decoration offset properties */
.size-guide-trigger-btn {
  background: transparent !important;
  border: none !important;
  color: #111111 !important;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px !important;
  font-weight: 300 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  cursor: pointer !important;
  letter-spacing: 0.05rem;
  white-space: nowrap !important;
}

.size-guide-trigger-btn:hover {
  opacity: 0.6;
}

/* Remove underline and append a clean right arrow indicator matrix */
.size-guide-trigger-btn {
  background: transparent !important;
  border: none !important;
  color: #111111 !important;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px !important;
  font-weight: 300 !important;
  /* text-decoration: none !important; Force-removes the underline layout decoration line */
  cursor: pointer !important;
  padding: 0 !important;
  letter-spacing: 0.05rem;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important; /* Balanced spatial gap between the words and the chevron mark */
  text-decoration: underline !important;  
}

/* Injects the minimalist text chevron character right arrow visually */
/* Injects a smaller, clean, lightweight right-facing arrow */
.size-guide-trigger-btn::after {
  /* content: "›" !important; */
  font-size: 10px !important;    /* Matches text height perfectly */
  font-weight: 150 !important;   /* Thinner, elegant stroke weight */
  line-height: 1 !important;
  display: inline-block !important;
  transform: translateY(-1px) !important; /* Vertically centers the small arrow with the word */
  color: black;

}

.size-guide-trigger-btn:hover {
  opacity: 0.6;
}



/* ==========================================
   MASHRU FONT SIZE HIERARCHY OVERRIDES
   ========================================== */

/* 12px - Global body/meta/product information */
body,
p,
.rte,
.text-body,
.article-template__content,
.product__description,
.card__information,
.card-information,
.card-information__text,
.price__regular,
.price-item,
.product-meta,
.product-information,
.blog__posts .article-card__excerpt,
.article-card__excerpt,
.article-card__info,
.article-template__content p {
    font-size: 12px !important;
}

/* ==========================================
   HEADER & FOOTER - 13px
   ========================================== */

.header,
.header a,
.header__menu-item,
.header__active-menu-item,
.list-menu__item,
.footer,

.footer__content-top,
.footer__content-bottom,
.footer-block__details-content,
.footer-block__heading {
    font-size: 12px !important;
}

::placeholder{
  color:#ccc !important;
}

.footer a{
 font-size: 12px !important;
}

.footer__content-bottom{
  border-top: none !important;
      padding-top: 0rem !important;
}
/* ==========================================
   COLLECTION / CATEGORY PAGES
   Heading & Description - 13px
   ========================================== */

.collection-hero__title,
.collection-hero__description,
.collection__title,
.collection-description,
.main-page-title {
    font-size: 13px !important;
}

/* Product Name / Price - 12px */
.card__heading,
.card__heading a,
.card-information__text,
.card-information__text a,
.price,
.price-item,
.price__regular,
.price__sale {
    font-size: 12px !important;
}

/* ==========================================
   PRODUCT DETAIL PAGE
   ========================================== */

/* Product Name */
.product__title,
.product__title h1,
.product h1 {
    font-size: 13px !important;
}

/* Product Price */
.product .price,
.product .price-item,
.product__info-container .price {
    font-size: 10px !important;
}

/* Description / Details / Material / Size Info */
.product__description,
.product__accordion,
.product__accordion .accordion__content,
.product__accordion .rte,
.product-form__input,
.size-guide,
.size-chart,
.product-details,
.material-care {
    font-size: 10px !important;
}

/* ==========================================
   JOURNAL LANDING PAGE
   ========================================== */

/* Journal Heading */
.blog-title,
.blog__title,
.main-blog-title,
.template-blog h1,
.blog-articles .title {
    font-size: 13px !important;
}

/* Article Cards */
.article-card__title,
.article-card__title a {
    font-size: 12px !important;
}

.article-card__date,
.article-template__date {
    font-size: 12px !important;
}

.article-card__excerpt,
.article-card__info {
    font-size: 12px !important;
}

/* ==========================================
   JOURNAL ARTICLE PAGE
   ========================================== */

/* Article Heading */
.article-template__title,
.article-template h1,
.article h1 {
    font-size: 22px !important;
}

/* Date */
.article-template__date {
    font-size: 12px !important;
}

/* Body */
.article-template__content,
.article-template__content p,
.article-template__content li,
.article-template__content span {
    font-size: 12px !important;
}

/* Prev / Next */
.article-template__link,
.article-template__link a,
.article-pagination a {
    font-size: 12px !important;
}

/* ==========================================
   HOMEPAGE
   ========================================== */

/* Editorial Text */
.banner__text,
.rich-text__text,
.rich-text p,
.multicolumn-card__info p,
.image-with-text__text,
.slideshow__text {
    font-size: 12px !important;
}

/* Homepage Product Name */
.featured-collection .card__heading,
.featured-collection .card__heading a {
    font-size: 12px !important;
}

/* Homepage Product Information */
.featured-collection .card-information,
.featured-collection .price,
.featured-collection .price-item {
    font-size: 10px !important;
}




/* ==========================================
   GLOBAL HEADING RULES
   ========================================== */

/* Page Headings */
h1.page-title,
.main-page-title,
.page-title,
.section-heading,
.title--primary {
    font-size: 22px !important;
}

/* Ensure navigation remains 13px */
nav a,
.header__menu-item,
.menu-drawer__menu-item {
    font-size: 12px !important;
}


@font-face {
  font-family: 'Nimbus Roman';
  src: url("https://db.onlinewebfonts.com/t/4b024e5407bc8b61b20397831a3fc282.eot");
  src: url("https://db.onlinewebfonts.com/t/4b024e5407bc8b61b20397831a3fc282.eot?#iefix")format("embedded-opentype"),
  url("https://db.onlinewebfonts.com/t/4b024e5407bc8b61b20397831a3fc282.woff2")format("woff2"),
  url("https://db.onlinewebfonts.com/t/4b024e5407bc8b61b20397831a3fc282.woff")format("woff"),
  url("https://db.onlinewebfonts.com/t/4b024e5407bc8b61b20397831a3fc282.ttf")format("truetype"),
  url("https://db.onlinewebfonts.com/t/4b024e5407bc8b61b20397831a3fc282.svg#Nimbus Roman W02 Bold Display")format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



    

/* Custom Styling for the Main Header Logo Text */
.header__heading-text,
a.header__heading-link span,
.header__heading {
  font-family:'Nimbus Roman';
  text-transform: uppercase !important; /* Forces uppercase just in case */
  letter-spacing: 0.18em !important; /* Elegant spacing between letters */
  font-size: calc(var(--font-heading-scale) * 2.6rem) !important; /* Clean sizing */
}

 



.footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright{
           text-align: center !important;
}

.footer__content-bottom-wrapper{
  display: block !important;

}

.drawer__heading, .totals,.button,.totals__total,cart-item__name{
          font-size: 12px !important;
          padding: 0% 15px;
          font-weight:300px !important;
}

@media screen and (min-width: 992px) {
  .drawer.active .drawer__inner, .mobile-facets__inner { 
    width: 600px !important;
  }

  .journal-body, .mj-text{
  max-width: 560px !important;
  width: 560px !important;
}

  .drawer__footer{
        padding: 0rem 0 !important;
  }

.drawer__inner{
  padding: 0px !important;
}

  .product-media-container.constrain-height.media-fit-contain{
        --contained-width: auto !important;
  }

   .mobile-facets__inner { 
    width: 400px !important;
    max-width: 400px !important;
  }

  .mashru-contact-panel{
    width: 400px !important;
  }

}

/* --- FULL WIDTH FILTER APPLY BUTTON OVERRIDE --- */

/* 1. Remove the surrounding container padding at the bottom of the drawer */
.facets__footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2. Force the apply button wrapper to stretch edge to edge */
.facets__footer facet-remove, 
.facets__footer .button {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* 3. Ensure the button itself is square and has zero margins */
.facets__footer .button {
  border-radius: 0px !important; /* Sharp corners like The Row style */
  margin-left: 0 !important;
  margin-right: 0 !important;
}


.Button--View_Bag{ 
    height: 30px !important;
    width: 100%;
    background:#f0f0f0;
    color:#000;
    cursor: pointer;
}


.Button--View_Bag:hover{ 
    background:#bebbbb; 
}



.drawer__inner {
  background:#fffffffd;
}


@media screen and (max-width: 989px) {
    .section-template--25904881271095__multicolumn_47mL8m-padding{
      padding-bottom:0px !important;
    }
}

@media screen and (max-width: 749px) {
  .header__heading-link .h2,
  .header__heading-text,
  a.header__heading-link span.h2 {
    font-size: 1.9rem !important;
    letter-spacing: 0.1em !important;
  }
}

@media screen and (max-width: 749px) {

  /* Full width link rows */
  .footer__blocks {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .footer__column--info {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer-block--menu {
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer__blocks ul {
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer__blocks li {
    list-style: none !important;
    margin: 0 !important;
    width: 100% !important;
    /* border-bottom: 1px solid rgba(0,0,0,0.1) !important; */
  }

  /* Each link row */
  .footer__blocks a.link,
  .footer__blocks .list-menu__item--link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 1.5rem !important;
    font-size: 1.3rem !important;
    text-decoration: none !important;
    color: #111 !important;
    letter-spacing: 0.02em !important;
  }

  /* › arrow on right */
  .footer__blocks a.link::after,
  .footer__blocks .list-menu__item--link::after {
    content: '›' !important;
    font-size: 1.8rem !important;
    font-weight: 300 !important;
    color: #111 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Newsletter full width */
  .newsletter-contents {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    padding: 20px 1.5rem !important;
    /* border-bottom: 1px solid rgba(0,0,0,0.1) !important; */
  }

  /* Footer top info */
  .footer-top {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    padding: 30px 1.5rem !important;
    gap: 20px !important;
    /* border-bottom: 1px solid rgba(0,0,0,0.1) !important; */
  }
}


/* Footer */
.mobile-facets__footer{
    padding:20px !important;
    border-top:1px solid #e5e5e5;
    background:#fff;
}

/* Remove all wrapper */
.mobile-facets__clear-wrapper{
    display:flex !important;
    justify-content:center;
    margin-bottom:18px !important;
}

/* Remove all link */
.mobile-facets__clear{
    display:inline-block !important;
    font-size:12px !important;
    color:#111 !important;
    text-decoration:underline !important;
    font-weight:400 !important;
    line-height:1 !important;
}

/* Apply button */
.mobile-facets__footer .button{
    width:100% !important;
    height:54px !important;
    background:#111 !important;
    color:#fff !important;
    border:0 !important;
    border-radius:0 !important;
    font-size:12px !important;
    letter-spacing:.03em;
}

.mobile-facets__footer>*{
      width: 100% !important;
}

/* Hide any extra buttons if present */
.mobile-facets__footer .button:not(.button--primary){
    display:none !important;
}

/* --- THE ROW EXACT MATCH FULL-SCREEN DROPDOWN SEARCH ENGINE --- */

/* 1. Full-width dropdown with a solid white background */
details[open].menu-drawer-container + .search-modal,
.header__search details[open] .search-modal,
main-search-modal,
.search-modal {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: none !important;
  border-bottom: none !important;
  padding: 40px 0 80px 0 !important;
  display: block !important;
  z-index: 99 !important;
}

/* 2. Unconstrain inner elements */
.search-modal__content {
  background: transparent !important;
  background-color: transparent !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* 3. Center and structure the search form */
.search-modal__form {
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  position: relative !important;
  display: block !important;
}

/* 4. Complete reconstruction of the input field to remove the box container */
.search-modal__form .search__input.field__input,
.search-modal__form .field__input {
  border: none !important;
  border-bottom: 1.5px solid #000000 !important; /* Kept only the bottom line */
  border-radius: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  height: auto !important;
  width: 100% !important;
  color: #000000 !important;
}

/* Force "Search" label text to behave cleanly if it acts as a floating element */
.search-modal__form .field__label {
  display: none !important; /* Hides Dawn's broken floating top text */
}

/* Stylize standard placeholder text behavior */
.search-modal__form .search__input.field__input::placeholder {
  color: #777777 !important;
  opacity: 1 !important;
}

/* 5. STRICT REMOVAL OF SEARCH ICON AND DECORATIVE BOXES */
.search-modal__form .field:after,
.search-modal__form .field:before,
.search-modal__form .field__button,
.search-modal__form .icon-search,
.search-modal__form svg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* 6. Snap the Close (X) button cleanly to the right edge of the page layout */
.search-modal__close-button,
button.search-modal__close-button {
  position: fixed !important;
  right: 40px !important;
  top: 80px !important; /* Tweak this value to match your main layout flow perfectly */
  left: auto !important;
  background: transparent !important;
  border: none !important;
  z-index: 101 !important;
  display: flex !important;
}
 
.predictive-search-products, .predictive-search__image,.predictive-search__heading,.predictive-search__search-for-button{
  display:none !important;
}

.predictive-search__result-group:first-of-type,
#predictive-search-results .predictive-search__result-group:first-child {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.predictive-search__list-item{
  /* display:grid !important; */
  justify-content: left;
}

/* Appends ellipses to the search input placeholder text */
.search-modal__form .search__input.field__input::placeholder {
  content: "Search..." !important;
}

/* Fallback override to catch webkit browsers */
.search-modal__form .search__input.field__input::-webkit-input-placeholder {
  content: "Search..." !important;
}
//* ============================================
   SEARCH DROPDOWN — CLOSE GAP BELOW HEADER
   (safe rollback: absolute positioning,
   explicit relative anchor)
   ============================================ */

.header__search {
  position: relative !important;
}

details[open].menu-drawer-container + .search-modal,
.header__search details[open] .search-modal,
main-search-modal,
.search-modal {
  position: absolute !important;
  top: 83% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
}
/* ==========================================================================
   THE ROW FLUSH LEFT-ALIGNED TYPOGRAPHIC STACK FOR CART DRAWER
   ========================================================================== */

/* 1. Eliminate internal horizontal table line separators and headers */
.cart-drawer thead,
.cart-drawer th,
.cart-drawer .visually-hidden {
  display: none !important;
}

/* 2. Flatten table components completely so columns collapse */
.cart-drawer .cart-items, 
.cart-drawer td, 
.cart-drawer tr, 
.cart-drawer tbody {
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Re-structure the product row container as a flat flex box */
.cart-drawer .cart-item {
  display: flex !important;
  padding: 0px 30px !important;
  gap: 20px !important;
  border: none !important;
  position: relative !important;
}

/* Resize item thumbnails cleanly */
.cart-drawer .cart-item__media {
  width: 16rem !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.cart-item__media {
  width: 20rem !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.cart-drawer .cart-item__image {
  max-width: 100% !important;
  height: auto !important;
}

/* --- THE KEY FIX: COLLAPSE THE RIGHT COLUMN INLINE --- */

/* 4. Strip the absolute positioning and grid structure from Dawn's right cell columns */
.cart-drawer .cart-item__totals,
.cart-drawer .cart-item__price-wrapper {
  display: block !important;
  position: static !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

/* 5. Force details container to behave as a single left-aligned layout strip */
.cart-drawer .cart-item__details {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0px !important; /* Tightens up layout rows */
  padding: 0 !important;
  align-content: center;
}

/* 6. Match typographic properties directly to micro-minimal scales */
.cart-drawer .cart-item__name,
.cart-drawer .product-option,
.cart-drawer .cart-item__discounted-prices,
.cart-drawer .cart-item__details dl,
.cart-drawer .cart-item__details dt,
.cart-drawer .cart-item__details dd,
.cart-drawer .cart-item__totals *,
.cart-drawer .cart-item__price-wrapper * {
  font-family: inherit !important;
  font-size: 12px !important; /* Micro font sizing */
  font-weight: 400 !important;
  line-height: 1.4 !important; /* Compact line vertical layout height */
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  text-align: left !important;
  padding-right: 5px !important;
}

/* Separate title line fractionally from attributes */
.cart-drawer .cart-item__name {
  margin-bottom: 2px !important;
}

/* --- 7. CLEAN HIDE FOR DUPLICATE / NATIVE QUANTITY FIELDS --- */

.cart-drawer .quantity-popover-container{
  display: none !important;
}

.cart-item cart-remove-button {
     
    margin-left: -5rem !important;
    margin-top: 62% !important;
}



/* Push the 'Remove' anchor text all the way to the base of the information pile */
.cart-drawer .cart-item__details::after { 
  display: block !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  text-decoration: none !important;
  margin-top: 184px !important; /* Generous breathing gap matching reference image */
  cursor: pointer !important;
  opacity: 0.9 !important;
  text-align: left !important;
}




/* --- 8. STEP BY STEP STRUCTURAL TEXT RE-ORDERING --- */

/* Clear any lingering layout artifacts from old code blocks */
.cart-drawer .cart-item__name::after,
.cart-drawer .cart-item__price-wrapper::after {
  display: none !important;
  content: none !important;
}

/* Wipe clean default display mechanics on description lists */
.cart-drawer .cart-item__details dl {
  display: flex !important;
  flex-direction: column !important;
      margin-top: 10% !important;
}

/* Append custom "Qty: 1" directly after the size variant line item */
.cart-drawer .cart-item__details dl::after {
  content: "Qty: 1" !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #000000 !important;
  display: none !important;
  margin-top: 0px !important;

}
 


/* --- HIDE THE LOADING DRAWER CIRCLE AND DUPLICATE COLUMN PRICES --- */

/* 1. Stop the infinite background loading circle spinner from displaying */
.cart-drawer .loading__spinner,
.cart-drawer .loading-overlay,
.cart-drawer spinner,
.cart-drawer .cart-drawer__loading {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0px !important;
  height: 0px !important;
}

/* 2. Completely eliminate the extra standalone right column price string */
.cart-drawer .cart-item__totals.right,
.cart-drawer td.cart-item__totals {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0px !important;
}

/* 3. Ensure the item row container adjusts to full layout width */
.cart-drawer .cart-item {
  display: flex !important;
  width: 100% !important;
}

/* --- THE ROW: INCREASE CART PRODUCT THUMBNAIL SIZE --- */

/* 1. Expand the product image container column width */
.cart-drawer .cart-item__media {
  width: 184px !important; /* Increased from 85px to make it larger */
  max-width: 35% !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* 2. Ensure the image scales seamlessly inside the newly expanded width */
.cart-drawer .cart-item__image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 3. Adjust the text details spacing right next to the larger thumbnail */
.cart-drawer .cart-item__details {
  max-width: 65% !important;
}

/* --- REPLACE CART DRAWER CLOSE CROSS WITH TEXT --- */

/* 1. Clear any default dimensions, padding, or alignment transformations on the close button link */
.cart-drawer .drawer__close {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  top: 0px !important;
  right: 18px !important;
  transform: none !important;
}

/* 2. Completely hide the native Shopify cross (X) SVG icon graphics */
.cart-drawer .drawer__close svg,
.cart-drawer .drawer__close .svg-wrapper,
.cart-drawer .drawer__close .icon {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0px !important;
  height: 0px !important;
}

/* 3. Inject the clean text string "Close" into the button element container */
.cart-drawer .drawer__close::before {
  content: "Close" !important;
  font-family: inherit !important;
  font-size: 12px !important; /* Matches micro-typography layout scale */
  font-weight: 400 !important;
  text-transform: none !important; /* Ensures it keeps normal sentence casing */
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  display: inline-block !important;
  cursor: pointer !important;
}



/* --- OVERRIDE SYSTEM LIMITS TO FORWARD PAGE WIDTH TO 1650PX --- */
:root, 
body, 
html {
  --page-width: 165rem !important; /* Converts 1650px scale seamlessly into rem grid spacing */
  --page-width-margin: 0px !important;
}

/* Force structural layout page frames to stretch cleanly */
.page-width,
.header,
.footer,
.grid--page-width {
  max-width: 1650px !important;
  width: 100% !important;
}

/* ─────────────────────────────────────────
   CART PAGE — THE ROW STYLE
───────────────────────────────────────── */

/* Page title centered */
.cart__title,
h1.cart__title {
  text-align: center !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 40px !important;
}

/* Table headers */
.cart-items thead tr th,
.cart-items .caption-with-letter-spacing {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  text-transform: capitalize !important;
  border-bottom: 1px solid rgba(0,0,0,0.15) !important;
  padding-bottom: 12px !important;
}

/* Each cart row */
.cart-item {
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  padding: 30px 0 !important;
}

/* Larger product image */
.cart-item__image {
  width: 214px !important;
  height: 278px !important;
  object-fit: cover !important;
}

/* Product name */
.cart-item__name,
.cart-item__name.h4 {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  text-decoration: none !important;
}

/* Price & size meta */
.cart-item__details .product-option,
.cart-item__details dl,
.cart-item__details dd,
.cart-item__details dt {
  font-size: 12px !important;
  color: #000000 !important;
  font-weight: 400 !important;
}

/* Quantity — inline style */
.cart-item__quantity .quantity {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.cart-item__quantity .quantity::before,
.cart-item__quantity .quantity::after {
  display: none !important;
}

.cart-item__quantity .quantity__input {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  background: transparent !important;
}

.cart-item__quantity .quantity__button {
  font-size: 12px !important;
  color: #000000 !important;
}

/* Hide trash icon — show "Remove" text */
cart-remove-button button .svg-wrapper {
  display: none !important;
}

cart-remove-button button::after {
  content: 'Remove' !important;
  font-size: 1.2rem !important;
  color: #000000 !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}

cart-items, .cart__footer{
  padding-left: 23rem;
  padding-right: 23rem;
}

.title--primary{
  font-size:13px !important;
}

cart-remove-button button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-width: auto !important;
  min-height: auto !important;
  height: auto !important;
  width: auto !important;
  display: block !important;
  margin-top: 10px !important;
}

cart-remove-button button:after {
  box-shadow: none !important;
}

/* Totals */
.totals__total {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
}

.totals__total-value {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
}

/* Tax note */
.tax-note {
  font-size: 1.2rem !important;
  color: #555 !important;
}

/* Checkout button */
.cart__checkout-button {
  font-size: 1.3rem !important;
  letter-spacing: 0.05em !important;
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  height: 32px !important;
  min-height: 32px !important;
}

/* Continue shopping link */
.cart__continue-btn,
a.underlined-link[href*="collections"] {
  font-size: 1.2rem !important;
  color: #111 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Remove border from quantity popover wrapper */
.cart-item__quantity-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Shipping note */
.cart__shipping-text {
  font-size: 1.2rem !important;
  color: #555 !important;
  text-align: right !important;
}

.cart-item__details{
  align-content: center;
}


/* ==========================================================================
   THE ROW EXACT MATCH - FOUR COLUMN MINIMALIST FOOTER & NEWSLETTER
   ========================================================================== */

/* --- 1. CORE FOOTER COLUMN ARCHITECTURE --- */
/* Forces your footer elements to distribute evenly in a flat row */
.footer__blocks-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* Perfect 4-column split */
  gap: 40px !important;
  align-items: flex-start !important;
  max-width: 1200px !important; /* Matches your centered boxed grid layout */
  margin: 0 auto !important;
  padding: 40px 20px !important;
}

/* Force the newsletter block container to behave as a normal column inline */
.footer-block--newsletter {
  grid-column: 4 !important; /* Anchors the signup block strictly to column 4 */
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* --- 2. MICRO-TYPOGRAPHY SPECS --- */
/* Converts all footer headers and text lines to the raw editorial text scale */
.footer-block__heading,
.footer-block__details-content,
.footer-block__details-content a,
.footer__localization-panel,
.footer__copyright * {
  font-family: inherit !important;
  font-size: 10px !important; /* Delicate editorial text scale */
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  text-transform: none !important;
}

/* Space headings identically to description rows */
.footer-block__heading {
  margin-bottom: 15px !important;
}

/* --- 3. THE ROW WIREFRAME SIGNUP INPUT --- */
/* Strips standard heavy block borders and applies a thin underline asset */
.footer-block--newsletter .field {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid #000000 !important; /* Crisp baseline wire */
  border-radius: 0px !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  height: auto !important;
  min-height: auto !important;
}

/* Format text settings inside fields */
.footer-block--newsletter .field__input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 11px !important;
  color: #000000 !important;
  padding: 8px 0 !important;
  height: auto !important;
  width: 100% !important;
}

/* Style the placeholder string values */
.footer-block--newsletter .field__input::placeholder {
  color: #777777 !important;
  opacity: 1 !important;
}

/* Hide native floating system labels */
.footer-block--newsletter .field__label {
  display: none !important;
}

/* Clean background layouts around input wrappers */
.footer-block--newsletter .field:after,
.footer-block--newsletter .field:before {
  display: none !important;
}

/* --- 4. SIGNUP ARROW CONTROL LINK --- */
/* Replaces heavy submission boxes with a clean right aligned minimal chevron */
.footer-block--newsletter .field__button {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #000000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.footer-block--newsletter .field__button svg {
  width: 12px !important;
  height: 12px !important;
  color: #000000 !important;
  fill: #000000 !important;
}

/* --- 5. CLEAN UP EXTRA SUB-TEXT BLOCKS --- */
/* Discards extra paragraph headers from the signup box to keep tracking tight */
.footer-block__newsletter-text {
  display: none !important;
}

.disclosure{
    border: 1px solid #ccc;
    padding-left: 5px;
    width: 110px;
}


/* --- RESPONSIVE BOXED LAYOUT FIX --- */

/* On Mobile and Tablets: Apply tiny clean side padding gaps */
cart-items, 
.cart__footer {
  padding-left: 20px !important;
  padding-right: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* On Desktop Screens (750px and wider): Apply your luxury margin limits */
@media screen and (min-width: 750px) {
  cart-items, 
  .cart__footer {
    padding-left: 12rem !important;
    padding-right: 12rem !important;
  }
}

@media screen and (min-width: 1200px) {
  cart-items, 
  .cart__footer {
    padding-left: 23rem !important;
    padding-right: 23rem !important;
  }
}

/* Fix mobile alignment behaviors for native tables elements */
@media screen and (max-width: 749px) {
  .cart-items table,
  .cart-items tbody,
  .cart-items tr,
  .cart-items td {
    display: block !important;
    width: 100% !important;
  }
  .cart-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 15px !important;
  }
  .cart-item__details {
    text-align: center !important;
    align-items: center !important;
  }
}

/* --- REPLACE CART REMOVE BUTTON WITH PLAIN TEXT LINK --- */

/* 1. Reset the outer layout element container alignment properties */
cart-remove-button,
.cart-item cart-remove-button {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Strip background frames, shadows, and default sizing limits from the interactive button */
cart-remove-button .button,
.cart-item cart-remove-button .button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: auto !important;
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  margin-top:45px !important;
}

/* 3. Hide the native trash can or cross SVG icons completely on all devices */
cart-remove-button svg,
cart-remove-button .icon,
cart-remove-button .icon-remove,
.cart-item cart-remove-button svg,
.cart-item cart-remove-button .svg-wrapper {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0px !important;
  height: 0px !important;
}

/* 4. Inject the clean text string "Remove" styled to match the micro-typography layout of The Row */
#cart .cart-remove-button .button::after,
#cart  .cart-item cart-remove-button .button::after {
  content: "Remove" !important;
  font-family: inherit !important;
  font-size: 10px !important; /* Micro scale matching your description stack font */
  font-weight: 400 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  text-decoration: none !important; /* Clean plain text appearance */
  box-shadow: none !important;
      padding-left: 50px !important;
}

/* 5. Add a subtle underline strictly on active cursor interaction */
#cart  cart-remove-button .button:hover::after,
#cart  .cart-item cart-remove-button .button:hover::after {
  text-decoration: underline !important;
}


/* --- ULTIMATE MOBILE SIDE-BY-SIDE CART GRID ENGINE --- */
@media screen and (max-width: 749px) {
  
  /* 1. Force the individual row container to behave as a rigid horizontal grid layout split */
  .cart-items tr.cart-item,
  tr.cart-item,
  .cart-item {
    display: grid !important;
    grid-template-columns: 100px 1fr !important; /* Forces a strict 100px image column, and all text columns on the right */
    grid-template-rows: auto !important;
    gap: 20px !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: start !important;
    padding: 25px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  }

  /* 2. Anchor the product image explicitly to the left (Column 1) */
  .cart-items td.cart-item__media,
  .cart-item__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100px !important;
    max-width: 100px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cart-item__image {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 3. Force the details text layout container directly into the right area (Column 2) */
  .cart-items td.cart-item__details,
  .cart-item__details {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4. Ensure internal titles and text properties maintain uniform left alignment grids */
  .cart-item__name,
  .cart-item__details .product-option,
  .cart-item__details dl,
  .cart-item__details dt,
  .cart-item__details dd {
    text-align: left !important;
    align-items: flex-start !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
  }

  /* 5. Force the downstream pricing and quantity modifiers to collapse below your description info */
  .cart-items td.cart-item__quantity,
   
  .cart-item__quantity  {
    grid-column: 0 !important; /* Keeps them neatly aligned on the right text side area */
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    /* margin-top: 6px !important; */
    margin-top: -45%;
    padding: 0 !important;
  }

.cart-items td.cart-item__totals{
  display:none !important;
}
  
  /* Fix standard item removal positions to align cleanly underneath */
  cart-remove-button,
  .cart-item cart-remove-button {
    display: block !important;
    text-align: left !important;
    margin-top: 8px !important;
  }

/* --- REPLACE CART REMOVE BUTTON WITH PLAIN TEXT LINK --- */

/* 1. Reset the outer layout element container alignment properties */
cart-remove-button,
.cart-item cart-remove-button {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Strip background frames, shadows, and default sizing limits from the interactive button */
cart-remove-button .button,
.cart-item cart-remove-button .button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: auto !important;
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* 3. Hide the native trash can or cross SVG icons completely on all devices */
cart-remove-button svg,
cart-remove-button .icon,
cart-remove-button .icon-remove,
.cart-item cart-remove-button svg,
.cart-item cart-remove-button .svg-wrapper {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0px !important;
  height: 0px !important;
}

/* 4. Inject the clean text string "Remove" styled to match the micro-typography layout of The Row */
cart-remove-button .button::after,
.cart-item cart-remove-button .button::after {
  content: "Remove" !important;
  font-family: inherit !important;
  font-size: 11px !important; /* Micro scale matching your description stack font */
  font-weight: 400 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  text-decoration: none !important; /* Clean plain text appearance */
  box-shadow: none !important;
}

/* 5. Add a subtle underline strictly on active cursor interaction */
cart-remove-button .button:hover::after,
.cart-item cart-remove-button .button:hover::after {
  text-decoration: underline !important;
}


.section-template--25904881271095__custom_collection_grid_zrtwek-padding {
    padding-top: 70px !important;
}


.section-template--25904881271095__multicolumn_47mL8m-padding{
  padding-top: 0px !important;
}

}


.predictive-search__item--link-with-thumbnail{
  display:block !important;
}


@media screen and (min-width: 990px) {
  /* 1. Setup a standard 2-column grid layout */
  .product__media-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 75% !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* 2. Set all images to stretch across the full width */
  .product__media-item {
    grid-column: span 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* 3. Explicitly target the 2nd and 3rd items to sit side-by-side */
  .product__media-item:nth-child(2),
  .product__media-item:nth-child(3) {
    grid-column: span 1 !important;
  }

  /* 4. Fix Dawn container layout styles */
  .product__media-list .media {
    padding-bottom: 0 !important;
    position: relative !important;
    width: 100% !important;
    /* Sets standard proportions for your rows */
    aspect-ratio: 3 / 4 !important; 
  }

  .product__media-list .product__media {
    height: 100% !important;
    width: 100% !important;
  }

  /* 5. Fill container space uniformly without distortion */
  .product__media-list img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
}

/* SMARTPHONE CAROUSEL RESET */
@media screen and (max-width: 767px) {
  .product__media-list {
    display: flex !important;
    gap: 8px !important;
  }
}

  
.multicolumn-card__info .link{
    margin-top: 1.5rem !important;
}

.multicolumn-card__info>:nth-child(2){
    margin-top: 0px !important;
}


.related-products__heading{
  font-size: 1.3rem !important; 
}



#Slider-template--25904881271095__multicolumn_akeqeJ{
          padding-left: 2rem !important;
        padding-right: 2rem !important;
                
}

#Slider-template--25904881271095__multicolumn_akeqeJ .media--portrait{
      width: 99% !important;
    
}

.rich-text__text {
      margin-top: 0 !important;
}


.newsletter-form {        
    max-width: 37rem !important;
}
 

.mega-menu[open] .mega-menu__content{
    width: 1650px  !important;
    height: 156px !important;
}


.plus-sign{
    font-size: 15px;
    font-weight: 100;
    color:grey;
}

.facets-container{
      padding-bottom: 2rem !important;
}

.product--large:not(.product--no-media) .product__info-wrapper {
        padding: 0 0 0 0rem !important;
         
}


@media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__info-wrapper {
         
        max-width: 40% !important;
        width: calc(40% - var(--grid-desktop-horizontal-spacing) / 2) !important;
    }
}

@media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__media-wrapper {
        max-width: 61% !important;
        width: calc(61% - var(--grid-desktop-horizontal-spacing) / 2) !important;
    }


   
}

@media screen and (min-width: 750px) {
    .product__info-container {
        max-width: 45rem !important;
    }

    .product-form__input--pill input[type=radio]+label{
      margin: 0.7rem 2.5rem .2rem 0 !important;
    }

    .product-form__input--pill input[type=radio]+label{
       color:  #000  !important;
    }
    .product-form__input--pill input[type=radio]:checked+label{
      font-weight:800 !important;
      color:  #000  !important;
    }

    .product-form__input--pill input[type=radio]:disabled+label, .product-form__input--pill input[type=radio].disabled+label{
      color: #757575 !important;
    }

}


.button, .shopify-challenge__button, .customer button {
    
    color: #000 ;
     
    background-color: rgb(255 255 255);
    border: 0px solid #eee;
    /* padding-top: 10px !important; */
}


.price-template--25904881434935__main{
      margin-bottom: 14px !important;
}

variant-selects{
      margin-top: 14px !important;
}


.product-form__input{
      margin: 0 0 2.0rem !important;
}

 @media screen and (min-width: 750px) {
    .section-template--25904881434935__main-padding {
        padding-top: 55px !important;
       
    }
} 


.related-products{
  margin-top: 42px !important;
}


.mobile-facets__open-label{
      font-size: 10px !important;

}


    .footer__content-bottom-wrapper   {
        margin-top: 35px !important;
    } 

    .localization-selector, .localization-selector span{
      font-size:10px;
    }


    .care-instructions-list{
          list-style-type: " - ";
    }


    .cart-title-div{
          display: flex;
    justify-content: space-between;
    position: relative;
        width: -webkit-fill-available !important;
    }



    .drawer__header{
          margin-bottom: 20px;
    }


    .drawer__inner , .drawer__footer{
      border:0px !important;
    }

    .tax-note{
      display:none !important;
    }


    .cart-drawer__footer{
          margin-bottom: 20px;
    }


    .cart__empty-text{
          font-size: 12px !important;
          margin: 22rem 0 3rem !important;
    }


    .cart-item__quantity{
          padding-top: 14rem !important;
    }

    .cart-item__price-wrapper{
          padding-top: 11rem !important;
    }


    .caption-with-letter-spacing{
          color: black !important;
    }

    .cart-item__quantity > quantity-popover{
      margin-left: -5rem;
    }

    .title-wrapper-with-link > .title--primary{
      text-align: center;
      width: 100%;
    }

    .title-wrapper-with-link .title{
              margin-bottom: 6rem !important;
    }

    .cart__blocks > .js-contents{
          margin-bottom: 42px !important;
    }


    /* Remove underline from header navigation items when their dropdown is open */
.header__menu-item[aria-expanded="true"],
details[open] > .header__menu-item,
.menu-opening .header__menu-item {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Ensure child summary elements inside disclosure menus do not render underlines */
details summary.header__menu-item[aria-expanded="true"] {
  text-decoration: none !important;
  border-bottom: 0 !important;
}



#CartDrawer-CartItems cart-remove-button .button:before, #CartDrawer-CartItems cart-remove-button .button:after {
    font-size: 10px !important;
    text-decoration: none !important;
}


#CartDrawer-CartItems cart-remove-button  {
    top: 78%;
    position: absolute;
    text-decoration: none;
}


/* Make the footer country/region selector button slim */
.footer__localization-panel {
  margin-bottom: 0 !important;
}

#FooterCountryForm .localization-selector.link,
#FooterCountryForm select.localization-selector,
.disclosure__button.localization-selector,
#FooterCountryForm .select .select__select {
  padding-top: 4px !important;
  /*padding-bottom: 4px !important;*/
  min-height: 18px !important;
  height: 18px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* Adjust the positioning of the small dropdown arrow inside the slimmed input box */
#FooterCountryForm .select .svg-wrapper,
#FooterCountryForm .localization-selector + svg {
  height: 10px !important;
  width: 10px !important;
  top: calc(50% - 5px) !important;
}


.is-disabled{
  cursor:not-allowed !important;
}


/* Baseline layout for the color subtitle */
.card__color-subtitle {
  margin-top: 0px !important;
  font-size: 0.9em;
  color: #000000 !important;
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
  opacity: 1;
  display: block;
}

/* Hides the color text completely when the mouse hovers over the product card */
.card-wrapper:hover .card__color-subtitle {
  opacity: 0;
  display: none;
}



/* Force Wishlist Tab Buttons & Layout Text to 10px */
.swym-wishlist-container,
.swym-ui-component *,
.swym-wishlist-detail-title,
.swym-wishlist-main-title,
.swym-empty-wishlist-container * {
    font-size: 10px !important;
}

/* Force All Wishlist Buttons to be Square (0px Border Radius) */
.swym-ui-component button,
.swym-ui-component .swym-button,
.swym-empty-wishlist-continue-btn,
.swym-add-to-cart-btn,
.swym-wishlist-container button {
    border-radius: 0px !important;
}

/* Optional: Match the thin border styling seen on your Cart Drawers */
.swym-ui-component button {
    border: 1px solid #000000 !important;
}


/* Reduce padding on the Wishlist / Saved for Later tabs */
.swym-wishlist-container .swym-tab-nav {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: auto !important;
    line-height: normal !important;
}

/* Reduce vertical padding on all action buttons (Open Cart, Move all to cart) */
.swym-wishlist-container button,
.swym-wishlist-container .swym-button,
.swym-empty-wishlist-continue-btn,
.swym-wishlist-container [class*="-btn"] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: auto !important;
    height: auto !important;
}


/* Target the precise list tabs layout container */
ul.swym-htc-tabs {
    height: auto !important;
    min-height: auto !important;
}

/* Force thin vertical padding on individual tab item blocks */
ul.swym-htc-tabs .swym-htc-tab-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    height: auto !important;
    min-height: auto !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


.swym-sfl-add-all-to-cart-btn , .swym-sfl-cart-btn{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.swym-sfl-title{
  font-size: 10px !important;
}


.swym-ui-component.swym-wishlist-page .swym-sfl-tab-container .swym-sfl-list-view .swym-sfl-list-heading .swym-sfl-title{
      font-size: 10px !important;
      display: none !important;
}

.totals__total-value{
  color:#000000 !important;
}
.tab-content,.tab-titles li{
    color:#000000 !important;
    font-size:12px !important;
}


.swym-ui-component.swym-wishlist-page .swym-wishlist-container-title-bar, .swym-ui-component .swym-add-wishlist-modal .swym-modal-content .swym-wishlist-item, .swym-ui-component .swym-add-wishlist-modal .swym-modal-content .swym-new-wishlist-item, .swym-ui-component .swym-htc-tabs, .swym-ui-component.swym-wishlist-page .swym-sfl-tab-container .swym-sfl-list-view .swym-sfl-detail-separator, .swym-ui-component .swym-simple-wishlist-container .swym-sfl-tab-container .swym-sfl-list-view .swym-sfl-detail-separator{
      border-right: 1px solid !important;
    border-left: 1px solid !important;
}

.swym-action-container > button,  .swym-is-button{
  border:0px solid !important;
}

#swym-user-login-status-btn{
  display:none !important;
}

/* .swym-ui-component{
  display:none;
} */
.rte{
  
  color:#000000;
}
.shopify-policy__body{
  width:610px;
}
.swym-storefront-layout-layout{
  display:none !important;
}
.swym-storefront-layout-notification-position-left{
  display:none !important;
}
.mashru-contact-block p, .mashru-contact-block a{
  font-size:12px !important;
  color:#000000 !important;
}
.shopify-policy__container{
  max-width:637px !important;
}
.card__inner, .color-scheme-2{
 width:333px !important;
 height:458px !important;
 margin-left: 10px;
 

}
.rich-text__heading, .rte inline-richtext{
  font-weight:500 !important;
}
.header{
  padding-top:5px !important;
  
}
.footer__blocks{
  padding-top:8px !important;
}

.price__regular, .price-item--regular{
margin-right:8px !important;
}
}
@media screen and (max-width: 500px) {
.card__inner, .color-scheme-2{
width:50% !important;
height:300px !important;
}
.price__regular, .price-item--regular{
margin-right:12px !important;
}
.size-quick-add{
  margin-right:-10px !important;
}
.plus-sign{
  margin-right:22px !important;
}
}
.header-wrapper {
 position:fixed !important;
}
/* ============================================
   MOBILE PRODUCT GRID FIX
   Overrides broken fixed-size .card__inner rules
   that caused product images to merge/overlap
   ============================================ */
@media screen and (max-width: 749px) {

  /* Let the card fill its grid cell instead of a fixed 50%/300px box */
  .card__inner,
  .color-scheme-2 {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
  }

  .card-wrapper,
  .card {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Each product sits cleanly in its own 2-per-row cell */
  .product-grid .grid__item,
  .collection .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2) !important;
    max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2) !important;
    box-sizing: border-box !important;
  }

  /* Let .media keep its own natural height (Dawn's .ratio / .media--portrait
     already reserves the correct proportional space) — just make sure it's
     not forced to a fixed pixel height anywhere else */
  .card__media,
  .card__media .media {
    height: auto !important;
  }

  /* Image fills whatever box .media reserves, cropped cleanly */
  .card__media img,
  .card__media .media img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}
/* ============================================
   MOBILE JOURNAL/MULTICOLUMN — FORCE 3 COLUMNS
   ============================================ */
@media screen and (max-width: 749px) {

  /* Force the multicolumn grid to 3 columns on mobile instead of stacking */
  .multicolumn-list.grid--1-col-tablet-down,
  .multicolumn .grid--1-col-tablet-down {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .multicolumn-list.grid--1-col-tablet-down .grid__item,
  .multicolumn .grid--1-col-tablet-down .grid__item {
    width: 33.33% !important;
    max-width: 33.33% !important;
    flex: 0 0 33.33% !important;
  }

  /* Shrink the illustration/image height so 3 fit without excess scroll */
  .multicolumn-card .media,
  .multicolumn-card__media {
    padding-bottom: 100% !important;
  }

  /* Tighten text so it doesn't overflow the narrower column */
  .multicolumn-card__info,
  .multicolumn-card__info p,
  .multicolumn-card__info .link {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }
}
/* ============================================
   PREVENT HORIZONTAL SCROLL / RIGHT-SIDE GAP
   ============================================ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.page-width,
.header,
.footer,
.grid--page-width,
.mega-menu__content {
  max-width: 100vw !important;
}
/* ============================================
   Discover MULTICOLUMN / JOURNAL IMAGE HEIGHT — ALL SCREENS
   Change the numbers below to resize (mobile vs desktop separately)
   ============================================ */

:root {
  --journal-image-height-mobile: 410px;  /* 👈 EDIT for mobile/tablet */
  --journal-image-height-desktop: 581px; /* 👈 EDIT for laptop/desktop */
}

/* Mobile & tablet (below 990px) */
@media screen and (max-width: 989px) {
  .multicolumn-card__image-wrapper .media {
    padding-bottom: 0 !important;
    height: var(--journal-image-height-mobile) !important;
  }
}

/* Laptop & desktop (990px and up) */
@media screen and (min-width: 990px) {
  .multicolumn-card__image-wrapper .media {
    padding-bottom: 0 !important;
    height: var(--journal-image-height-desktop) !important;
  }
}
/* ============================================
   FORCE JOURNAL/MULTICOLUMN IMAGES VISIBLE ON MOBILE
   ============================================ */
@media screen and (max-width: 749px) {

  .multicolumn-card__image-wrapper,
  .multicolumn-card__image-wrapper .media,
  .multicolumn-card__image-wrapper .media img,
  .multicolumn-card__image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .multicolumn-card__image-wrapper .media {
    position: relative !important;
    width: 100% !important;
    height: var(--journal-image-height-mobile, 220px) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .multicolumn-card__image-wrapper .media img,
  .multicolumn-card__image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
  }
}
.slider-mobile-gutter{
  margin-left:3px !important;
}
.grid product-grid{
  margin-right:3px;
}
.section-title{
  font-size:12px !important;
}
.mobile-facets__clear-wrapper{
  display:none !important;
}
.active-facets__button-wrapper{
  display:none !important;
}

.rich-text__heading{
  color:#000000 !important;
}
/* ============================================
   DESKTOP PRODUCT GRID — CENTERED, TIGHTER GAPS
   (keeps card size at 333px x 458px)
   ============================================ */
@media screen and (min-width: 990px) {

  /* Reduce the side padding specifically on the collection product grid container */
  .collection.page-width {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #product-grid.product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 333px) !important;
    justify-content: center !important;
    align-content: flex-start !important;
    column-gap: 31px !important;
    row-gap: 32px !important;
    margin: 0 auto !important;
  }

  #product-grid.product-grid .grid__item {
    width: 333px !important;
    max-width: 333px !important;
    margin: 0 !important;
  }

  .card__inner,
  .color-scheme-2 {
    margin-left: 0 !important;
  }
}

/* On tighter laptop widths (e.g. 990–1400px), shrink gap/padding further */
@media screen and (min-width: 990px) and (max-width: 1400px) {
  .collection.page-width {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  #product-grid.product-grid {
    column-gap: 4px !important;
  }
}
/* ============================================
   MOBILE PRODUCT GRID — CENTERED, EQUAL GAPS
   (keeps existing 2-column responsive sizing)
   ============================================ */
@media screen and (max-width: 749px) {

  #product-grid.product-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 10px !important;           /* 👈 adjust to match reference spacing */
    column-gap: 10px !important;
    row-gap: 30px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;     /* 👈 equal left/right margin from screen edge */
    box-sizing: border-box !important;
  }

  #product-grid.product-grid .grid__item {
    width: calc(50% - 5px) !important;  /* half of the 10px gap subtracted from each */
    max-width: calc(50% - 5px) !important;
    flex: 0 0 calc(50% - 5px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* remove the stray offset that was pushing cards off-center */
  .card__inner,
  .color-scheme-2 {
    margin-left: 0 !important;
    width: 100% !important;
  }
}
/* ============================================
   MOBILE FACET FILTER — CATEGORY AS 3 BOXES
   ============================================ */
.mobile-facets__list--boxed {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 15px 20px !important;
  list-style: none !important;
}

.mobile-facets__list--boxed .mobile-facets__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mobile-facets__list--boxed .mobile-facets__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: 1px solid #ddd !important;
  border-radius: 0px !important;
  padding: 14px 6px !important;
  min-height: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Hide default checkbox square + checkmark icons for the boxed style */
.mobile-facets__list--boxed .mobile-facets__checkbox,
.mobile-facets__list--boxed .mobile-facets__highlight,
.mobile-facets__list--boxed .mobile-facets__label svg {
  display: none !important;
}

/* Hide the "(count)" number so boxes read like the reference image */
.mobile-facets__list--boxed .facet-checkbox__count {
  display: none !important;
}

.mobile-facets__list--boxed .facet-checkbox__text,
.mobile-facets__list--boxed .facet-checkbox__text-label {
  font-size: 12px !important;
  letter-spacing: 0.02em;
  color: #111 !important;
}

/* Selected state */
.mobile-facets__list--boxed .mobile-facets__label.active {
  border-color: #000 !important;
  font-weight: 500 !important;
}

/* Disabled option */
.mobile-facets__list--boxed .mobile-facets__label.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}
/* ============================================
   DESKTOP FACET FILTER — CATEGORY AS 3 BOXES
   ============================================ */
@media screen and (min-width: 990px) {
  .facets__list--boxed {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding: 10px 0 15px !important;
    list-style: none !important;
  }

  .facets__list--boxed .facets__item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .facets__list--boxed .facets__label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    border-radius: 0px !important;
    padding: 14px 6px !important;
    min-height: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  /* Hide default checkbox square + checkmark icons for the boxed style */
  .facets__list--boxed .facets__label input[type='checkbox'],
  .facets__list--boxed .facets__label svg {
    display: none !important;
  }

  .facets__list--boxed .facet-checkbox__text,
  .facets__list--boxed .facet-checkbox__text-label {
    font-size: 12px !important;
    letter-spacing: 0.02em;
    color: #111 !important;
  }

  /* Selected state */
  .facets__list--boxed .facets__label.active {
    border-color: #000 !important;
    font-weight: 500 !important;
  }

  /* Disabled option */
  .facets__list--boxed .facets__label.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
  }
}

/* Hide the "(count)" number in both desktop and mobile boxed views */
.facets__list--boxed .facet-checkbox__count,
.mobile-facets__list--boxed .facet-checkbox__count {
  display: none !important;
}
/* ============================================
   MOBILE FILTER DRAWER — CLOSE (X) ICON SIZE
   ============================================ */
.mobile-facets__disclosure .mobile-facets__close {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-facets__disclosure .mobile-facets__close .svg-wrapper {
  width: 16px !important;
  height: 16px !important;
}

.mobile-facets__disclosure .mobile-facets__close .svg-wrapper svg {
  width: 100% !important;
  height: 100% !important;
}
/* ============================================
   COLOR FILTER — SWATCH BOX LAYOUT (mobile drawer)
   Wrapping boxes sized to content, swatch + label
   ============================================ */
.mobile-facets__list.facets-layout-list--swatch {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 15px 20px !important;
  list-style: none !important;
  align-items: flex-start !important;
}

.mobile-facets__list.facets-layout-list--swatch .mobile-facets__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.mobile-facets__list.facets-layout-list--swatch .mobile-facets__label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 0px !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* Swatch square sizing */
.mobile-facets__list.facets-layout-list--swatch .swatch-input-wrapper,
.mobile-facets__list.facets-layout-list--swatch .swatch-input-wrapper .swatch {
  width: 18px !important;
  height: 18px !important;
  border-radius: 0px !important;
  flex-shrink: 0 !important;
}

.mobile-facets__list.facets-layout-list--swatch .facet-checkbox__text-label {
  font-size: 12px !important;
  color: #111 !important;
}

/* Hide the "(count)" number to match reference */
.mobile-facets__list.facets-layout-list--swatch .facet-checkbox__count {
  display: none !important;
}

/* Selected state */
.mobile-facets__list.facets-layout-list--swatch .mobile-facets__label.active {
  border-color: #000 !important;
}
/* ============================================
   MATERIAL FILTER — WRAPPING TAG-STYLE BOXES
   (boxes sized to text, wrap left-to-right)
   ============================================ */
.mobile-facets__list.mobile-facets__list--boxed-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 15px 20px !important;
  list-style: none !important;
  align-items: flex-start !important;
}

.mobile-facets__list--boxed-wrap .mobile-facets__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.mobile-facets__list--boxed-wrap .mobile-facets__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #ddd !important;
  border-radius: 0px !important;
  padding: 14px 20px !important;
  min-height: 48px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease;
}

/* Hide default checkbox square + checkmark icons */
.mobile-facets__list--boxed-wrap .mobile-facets__checkbox,
.mobile-facets__list--boxed-wrap .mobile-facets__highlight,
.mobile-facets__list--boxed-wrap .mobile-facets__label svg {
  display: none !important;
}

.mobile-facets__list--boxed-wrap .facet-checkbox__text,
.mobile-facets__list--boxed-wrap .facet-checkbox__text-label {
  font-size: 12px !important;
  letter-spacing: 0.02em;
  color: #111 !important;
}

/* Hide the "(count)" number to match reference */
.mobile-facets__list--boxed-wrap .facet-checkbox__count {
  display: none !important;
}

/* Selected state */
.mobile-facets__list--boxed-wrap .mobile-facets__label.active {
  border-color: #000 !important;
  font-weight: 500 !important;
}

/* Disabled option */
.mobile-facets__list--boxed-wrap .mobile-facets__label.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}
/* ============================================
   FILTER ROWS + INNER BOXES — UNIFIED SIZE & COLOR
   (Category / Color / Material / Size headers,
   and every box/swatch/tag inside them)
   ============================================ */
:root {
  --facet-row-height: 46px !important;      /* 👈 controls header row AND inner box height */
  --facet-row-font-size: 10px !important;   /* 👈 controls header row AND inner box text size */
}

/* --- Filter header rows: Category / Color / Material / Size --- */
.mobile-facets__summary,
.facets__summary {
  min-height: var(--facet-row-height) !important;
}

.mobile-facets__summary span,
.mobile-facets__summary div,
.facets__summary span,
.facets__summary div,
.facets__summary-label {
  color: #000000 !important;
  font-size: var(--facet-row-font-size) !important;
}

/* --- Category boxes (Dresses / Skirts / Accessories) --- */
.mobile-facets__list--boxed .mobile-facets__label,
.facets__list--boxed .facets__label {
  min-height: var(--facet-row-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.mobile-facets__list--boxed .facet-checkbox__text-label,
.facets__list--boxed .facet-checkbox__text-label {
  font-size: var(--facet-row-font-size) !important;
}

/* --- Material boxes (wrapping tag style) --- */
.mobile-facets__list--boxed-wrap .mobile-facets__label,
.facets__list--boxed-wrap .facets__label {
  min-height: var(--facet-row-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.mobile-facets__list--boxed-wrap .facet-checkbox__text-label,
.facets__list--boxed-wrap .facet-checkbox__text-label {
  font-size: var(--facet-row-font-size) !important;
}

/* --- Color swatch boxes --- */
.mobile-facets__list.facets-layout-list--swatch .mobile-facets__label,
.facets__list.facets-layout-list--swatch .facets__label {
  min-height: var(--facet-row-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.mobile-facets__list.facets-layout-list--swatch .facet-checkbox__text-label,
.facets__list.facets-layout-list--swatch .facet-checkbox__text-label {
  font-size: var(--facet-row-font-size) !important;
}
/* ============================================
   FILTER ROWS + INNER BOXES — FINAL UNIFIED SIZING
   ============================================ */
:root {
  --facet-row-height: 36px !important;      /* 👈 controls header row AND inner box height */
  --facet-row-font-size: 10px !important;   /* 👈 controls header row AND inner box text size */
}

/* --- Header rows: Category / Color / Material / Size --- */
.mobile-facets__summary,
.facets__summary {
  min-height: var(--facet-row-height) !important;
}

.mobile-facets__summary span,
.mobile-facets__summary div,
.facets__summary span,
.facets__summary div,
.facets__summary-label {
  color: #000000 !important;
  font-size: var(--facet-row-font-size) !important;
}

/* --- ALL inner boxes: Category, Material (wrap), Color (swatch) --- */
.mobile-facets__list--boxed .mobile-facets__label,
.facets__list--boxed .facets__label,
.mobile-facets__list--boxed-wrap .mobile-facets__label,
.facets__list--boxed-wrap .facets__label,
.mobile-facets__list.facets-layout-list--swatch .mobile-facets__label,
.facets__list.facets-layout-list--swatch .facets__label {
  height: var(--facet-row-height) !important;
  min-height: 0 !important;
  max-height: var(--facet-row-height) !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  line-height: 1 !important;
}

.mobile-facets__list--boxed .facet-checkbox__text-label,
.facets__list--boxed .facet-checkbox__text-label,
.mobile-facets__list--boxed-wrap .facet-checkbox__text-label,
.facets__list--boxed-wrap .facet-checkbox__text-label,
.mobile-facets__list.facets-layout-list--swatch .facet-checkbox__text-label,
.facets__list.facets-layout-list--swatch .facet-checkbox__text-label {
  font-size: var(--facet-row-font-size) !important;
  line-height: 1 !important;
}
/* ============================================
   SWYM WISHLIST PAGE — 333x458 CARDS, CENTERED
   Targets real classes confirmed via DevTools:
   ul.swym-wishlist-grid > li > div.swym-wishlist-item
   > a.swym-wishlist-image-wrapper > img.swym-wishlist-image
   ============================================ */

/* Grid: centered, equal gaps left/right regardless of item count */
.swym-ui-component .swym-wishlist-grid,
.swym-wishlist-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 10px !important;
  column-gap: 30px !important;
  row-gap: 32px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

.swym-wishlist-grid > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 333px !important;
  width: 333px !important;
  max-width: 333px !important;
}

.swym-wishlist-item {
  width: 333px !important;
  max-width: 333px !important;
}

/* Image box: exactly 333 x 458 */
.swym-wishlist-image-wrapper {
  display: block !important;
  position: relative !important;
  width: 333px !important;
  height: 458px !important;
  max-width: 333px !important;
  overflow: hidden !important;
}

.swym-wishlist-image-wrapper img.swym-wishlist-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Remove/close (X) icon — keep it pinned top-right over the image */
.swym-wishlist-image-wrapper ~ button.swym-is-button,
.swym-wishlist-item button.swym-is-button {
  position: absolute !important;
  top: 5px !important;
  right: 15px !important;
  z-index: 5 !important;
}

/* ============================================
   MOBILE — 2 per row, equal centered gaps
   ============================================ */
@media screen and (max-width: 749px) {
  .swym-wishlist-grid {
    gap: 10px !important;
    column-gap: 10px !important;
    row-gap: 30px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  .swym-wishlist-grid > li {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }

  .swym-wishlist-item,
  .swym-wishlist-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .swym-wishlist-image-wrapper {
    height: 300px !important;
  }
}
.breadcrumb-filter{
  color:#000000 !important;
      margin-left: 25px;
      margin-bottom:20px;
}
.mobile-facets__open-label, .plus-sign{
  color:#000000 !important;
   margin-right: 12px;
   margin-bottom:20px;
}
/* ============================================
   HOMEPAGE FEATURED COLLECTION — MATCH
   COLLECTION PAGE SPACING/CENTERING
   ============================================ */
@media screen and (min-width: 990px) {

  /* Target the homepage product slider/grid wrapper
     (covers both slider and static grid variants) */
  .featured-collection .product-grid,
  .featured-collection ul.grid,
  section[id*="featured-collection"] .product-grid,
  section[id*="featured-collection"] ul.grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    column-gap: 31px !important;
    row-gap: 32px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .featured-collection .grid__item,
  section[id*="featured-collection"] .grid__item {
    width: 333px !important;
    max-width: 333px !important;
    flex: 0 0 333px !important;
    margin: 0 !important;
  }

  /* Match the same reduced side padding used on the collection page */
  .featured-collection.page-width,
  section[id*="featured-collection"] .page-width {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
/* ============================================
   HOMEPAGE SLIDER PRODUCT GRID — MATCH
   COLLECTION PAGE SPACING/CENTERING
   (targets ul.product-grid inside slider-component,
   confirmed via devtools: id="Slider-template--...")
   ============================================ */
@media screen and (min-width: 990px) {

  slider-component ul.product-grid.grid--4-col-desktop {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    column-gap: 31px !important;
    row-gap: 32px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  slider-component ul.product-grid.grid--4-col-desktop > .grid__item {
    width: 333px !important;
    max-width: 333px !important;
    flex: 0 0 333px !important;
    margin: 0 !important;
  }

  /* Match the same reduced side padding used on the collection page */
  slider-component.page-width {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
/* ============================================
   WISHLIST — NAME + VARIANT LEFT, PRICE RIGHT
   BELOW IMAGE (confirmed structure via devtools)
   ============================================ */
@media screen and (min-width: 990px) {

  .swym-ui-component .swym-wishlist-grid > li div.swym-wishlist-item {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .swym-ui-component .swym-wishlist-grid > li a.swym-wishlist-image-wrapper {
    order: 1 !important;
    position: relative !important;
    display: block !important;
    width: 333px !important;
    height: 458px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .swym-ui-component .swym-wishlist-grid > li a.swym-wishlist-image-wrapper img.swym-wishlist-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }

  /* Show the hidden product-name span, put it first in the info row */
  .swym-ui-component .swym-wishlist-grid > li div.swym-wishlist-item > span[id] {
    display: block !important;
    order: 2 !important;
    margin-top: 17px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    text-align: left !important;
    line-height: 1.4 !important;
  }

  /* Variant line (e.g. "XXS / Nut Brown") sits directly under the name */
  .swym-ui-component .swym-wishlist-grid > li .swym-variant-title {
    order: 3 !important;
    margin-top: 2px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    text-align: left !important;
  }

  /* Price: pull it up next to the name using absolute positioning
     within the flex column so it reads name-left / price-right */
  .swym-ui-component .swym-wishlist-grid > li div.swym-wishlist-item {
    position: relative !important;
  }

  .swym-ui-component .swym-wishlist-grid > li .swym-product-price {
    order: 2 !important;
    position: absolute !important;
    top: 468px !important;   /* sits level with the name row (458px image + 10px gap) */
    right: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
  }

  .swym-ui-component .swym-wishlist-grid > li .swym-product-final-price {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 12px !important;
    color: #000000 !important;
  }

  /* Hide the add-to-cart / delete overlay buttons that were breaking layout,
     only if you want them gone — remove this block if you still need them */
  .swym-ui-component .swym-wishlist-grid > li button.swym-add-to-cart-btn,
  .swym-ui-component .swym-wishlist-grid > li .swym-is-button:not(.swym-delete-btn) {
    order: 4 !important;
    position: static !important;
    margin-top: 12px !important;
    width: 100% !important;
  }
}
/* ============================================
   WISHLIST — HIDE DUPLICATE TITLE BOX ABOVE
   ADD TO CART BUTTON
   (confirmed: button.swym-is-button > h2.swym-title.swym-title-1)
   ============================================ */
.swym-ui-component .swym-wishlist-grid button.swym-is-button:has(h2.swym-title.swym-title-1) {
  display: none !important;
}
/* ============================================
   WISHLIST — REPLACE X (DELETE) ICON WITH
   FILLED STAR, SAME POSITION/SIZE AS HOMEPAGE
   ============================================ */
.swym-ui-component .swym-wishlist-grid button.swym-delete-btn {
  position: relative !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide Swym's original X icon completely */
.swym-ui-component .swym-wishlist-grid button.swym-delete-btn .swym-icon {
  display: none !important;
}

/* Draw a filled star in its place, matching homepage star styling */
.swym-ui-component .swym-wishlist-grid button.swym-delete-btn::before {
  content: "★" !important;
  display: block !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #000000 !important;
  font-family: Arial, sans-serif !important;
}
/* ============================================
   FILTER — UNIFORM COLOR SWATCH BOX SIZE
   (matches Category box grid, e.g. Accessories)
   ============================================ */

/* Turn the swatch list into the same 3-col grid Category uses */
.mobile-facets__list.facets-layout-list--swatch,
.facets__list.facets-layout-list--swatch {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  flex-wrap: unset !important;
}

/* Each swatch item now fills its grid cell instead of shrink-wrapping text */
.mobile-facets__list.facets-layout-list--swatch .mobile-facets__item,
.facets__list.facets-layout-list--swatch .facets__item {
  width: 100% !important;
  flex: unset !important;
}

.mobile-facets__list.facets-layout-list--swatch .mobile-facets__label,
.facets__list.facets-layout-list--swatch .facets__label {
  width: 100% !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* ============================================
   FILTER ROWS — EASY VERTICAL SPACING CONTROL
   Controls the gap between the outer row
   (Category/Color/Material/Size) and its boxes
   ============================================ */
:root {
  --facet-list-vertical-spacing: 1px !important; /* 👈 EDIT this one value to adjust spacing */
}

.mobile-facets__list--boxed,
.facets__list--boxed,
.mobile-facets__list--boxed-wrap,
.facets__list--boxed-wrap,
.mobile-facets__list.facets-layout-list--swatch,
.facets__list.facets-layout-list--swatch {
  padding-top: var(--facet-list-vertical-spacing) !important;
  padding-bottom: var(--facet-list-vertical-spacing) !important;
}
/* ============================================
   FILTER INNER BOXES — FLUSH LEFT/RIGHT ALIGNMENT
   (boxes start exactly under the row's left edge
   and end exactly under the +/- icon on the right)
   ============================================ */

.mobile-facets__list--boxed,
.facets__list--boxed,
.mobile-facets__list--boxed-wrap,
.facets__list--boxed-wrap,
.mobile-facets__list.facets-layout-list--swatch,
.facets__list.facets-layout-list--swatch {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* If the outer summary row (Category/Color/Material/Size) has its own
   left/right padding, mirror it here so boxes align exactly under it */
.mobile-facets__disclosure,
.facets__disclosure {
  --facet-row-side-padding: 0px; /* 👈 edit if your outer row has side padding */
}
/* ============================================
   MATERIAL FILTER — MATCH SIZE'S EQUAL-WIDTH GRID BOXES
   (overrides facets-layout-list--text flex behavior)
   ============================================ */

ul.facets-layout-list--text.mobile-facets__list--boxed-wrap,
ul.facets-layout-list--text.facets__list--boxed-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: var(--facet-list-vertical-spacing, 6px) 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

ul.facets-layout-list--text.mobile-facets__list--boxed-wrap .mobile-facets__item,
ul.facets-layout-list--text.facets__list--boxed-wrap .facets__item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.facets-layout-list--text.mobile-facets__list--boxed-wrap .mobile-facets__label,
ul.facets-layout-list--text.facets__list--boxed-wrap .facets__label {
  width: 100% !important;
  height: var(--facet-row-height, 36px) !important;
  min-height: 0 !important;
  max-height: var(--facet-row-height, 36px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
/* ============================================
   FORCE CORRECT SWATCH COLORS — COLOR FILTER DRAWER
   (targets by list position: 1=Sepia, 2=Nut Brown, 3=Olive)
   ============================================ */

.mobile-facets__list.facets-layout-list--swatch .mobile-facets__item:nth-child(1) .swatch,
.facets__list.facets-layout-list--swatch .facets__item:nth-child(1) .swatch {
  background-color: #a3917e !important;
}

.mobile-facets__list.facets-layout-list--swatch .mobile-facets__item:nth-child(2) .swatch,
.facets__list.facets-layout-list--swatch .facets__item:nth-child(2) .swatch {
  background-color: #6f4827 !important;
}

.mobile-facets__list.facets-layout-list--swatch .mobile-facets__item:nth-child(3) .swatch,
.facets__list.facets-layout-list--swatch .facets__item:nth-child(3) .swatch {
  background-color: #516e5c !important;
}
/* ============================================
   WISHLIST — POSITION STAR ICON OVER IMAGE
   (top-right corner, matching homepage overlay)
   ============================================ */
.swym-ui-component .swym-wishlist-grid > li div.swym-wishlist-item {
  position: relative !important;
}

.swym-ui-component .swym-wishlist-grid button.swym-delete-btn {
  position: absolute !important;
  top: 5px !important;
  right: 8px !important;
  z-index: 9 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.swym-ui-component .swym-wishlist-grid button.swym-delete-btn .swym-icon {
  display: none !important;
}

.swym-ui-component .swym-wishlist-grid button.swym-delete-btn::before {
  content: "★" !important;
  display: block !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #666666 !important;
  font-family: Arial, sans-serif !important;
}
/* ============================================
   WISHLIST — CENTERED "Saved" TITLE ABOVE
   THIN GRAY LINE (matches "Bag" cart title style)
   ============================================ */

/* Easy adjustment knob for icon size — change this one value */
:root {
  --wishlist-icon-size: 18px;
}

/* 1. Hide the Wishlist / Saved for Later tab buttons */
.swym-ui-component ul.swym-htc-tabs {
  display: none !important;
}

/* 2. Remove the old left-aligned title attempt (if previously added) */
.swym-ui-component .swym-wishlist-detail-header::before {
  content: none !important;
}

/* 3. Add centered "Saved" title, same style as cart page "Bag" title */
.swym-ui-component .swym-simple-wishlist-container::before {
  content: "Saved" !important;
  display: block !important;
  text-align: center !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: capitalize !important;
  color: #000000 !important;
  margin: 40px 0 19px !important;   /* 👈 space between title and the gray line below */
}

/* 4. Keep the existing thin gray divider */
.swym-ui-component .swym-wishlist-detail-separator {
  border-bottom: 1px solid #e5e5e5 !important;
  height: 0 !important;
  margin: 0px 0 24px !important;
}

/* 5. Resize the share + three-dot icons via the single variable above */
.swym-ui-component .swym-wishlist-detail-header svg,
.swym-ui-component .swym-wishlist-detail-header .swym-icon {
  width: var(--wishlist-icon-size) !important;
  height: var(--wishlist-icon-size) !important;
}
/* ============================================
   WISHLIST — HIDE "My Wishlist" TITLE AND
   THE BLACK DIVIDER LINE BELOW IT
   (confirmed via devtools:
   div.swym-wishlist-main-title.swym-heading.swym-heading-1
   sits inside div.swym-wishlist-container-title-bar,
   whose border-bottom is the black line)
   ============================================ */

/* Hide "My Wishlist" heading */
.swym-ui-component .swym-wishlist-main-title {
  display: none !important;
}

/* Hide the black divider line under the title bar */
.swym-ui-component .swym-wishlist-container-title-bar {
  border-bottom: none !important;
}
/* ============================================
   WISHLIST — SHARE + THREE-DOT ICON ALIGNMENT
   WITH ADJUSTABLE SPACING & COLOR
   ============================================ */

/* Easy adjustment knobs */
:root {
  --wishlist-icons-gap: 16px;       /* 👈 change this to adjust spacing between the two icons */
  --wishlist-icons-color: #000000;  /* 👈 change this to adjust icon color (default: black) */
}

.swym-ui-component .swym-action-container {
  display: flex !important;
  align-items: center !important;
  gap: var(--wishlist-icons-gap) !important;
}

.swym-ui-component .swym-share-btn,
.swym-ui-component .swym-wishlist-context-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--wishlist-icons-color) !important;
  margin-left:15px !important;
}

.swym-ui-component .swym-share-btn .swym-icon,
.swym-ui-component .swym-wishlist-context-menu .swym-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.swym-ui-component .swym-share-btn svg,
.swym-ui-component .swym-wishlist-context-menu svg {
  fill: var(--wishlist-icons-color) !important;
  stroke: var(--wishlist-icons-color) !important;
  color: var(--wishlist-icons-color) !important;
}
/* ============================================
   WISHLIST — REMOVE HORIZONTAL SCROLLBAR
   (confirmed via devtools:
   div.swym-wishlist-detail.swym-simple-wishlist-detail
   has overflow: auto causing the scroll)
   ============================================ */

.swym-ui-component .swym-wishlist-detail {
  overflow: visible !important;
  overflow-x: hidden !important;
}

.swym-ui-component .swym-simple-wishlist-container-content {
  overflow: visible !important;
  overflow-x: hidden !important;
}
/* ============================================
   WISHLIST — ALIGN "ADD TO CART" BUTTON
   TO IMAGE WIDTH (333px, start/end aligned)
   ============================================ */

.swym-ui-component .swym-wishlist-grid > li .swym-add-to-cart-btn {
  width: 100% !important;
  max-width: 333px !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.swym-product-price{
  padding-right: 0px !important;
}
.h3{
  font-family:Assistant, sans-serif !important;
}


.swym-ui-component .swym-wishlist-grid .swym-wishlist-item .swym-variant-title{
  margin: 0 !important;
}
.swym-wishlist-context-menu-item, .swym-delete-btn
{
  padding:5px !important;
  color:#000000 !important;
}
.preorder-badge, .rectangle {
  background:none !important;
color:#666666 !important;
margin-right: 445px;
top:10px !important;
}
.swym-product-price{
  padding-top:8px !important;
}
.mobile-facets__list.facets-layout-list--swatch .mobile-facets__label,
.facets__list.facets-layout-list--swatch .facets__label {
  width: 100% !important;
  justify-content: flex-start !important;   /* changed from center */
  white-space: nowrap !important;
}
/* ============================================
   SEARCH RESULTS PAGE — LEFT-ALIGNED GRID
   (easy-adjust variables)
   ============================================ */
:root {
  --search-grid-item-width: 333px;      /* 👈 card width */
  --search-grid-gap: 31px;              /* 👈 horizontal gap between cards (desktop) */
  --search-grid-row-gap: 32px;          /* 👈 vertical gap between rows (desktop) */
  --search-grid-left-start: 7rem;       /* 👈 EDIT THIS to move images left/right from screen edge (desktop) */
}

@media screen and (min-width: 990px) {
  #product-grid ul.product-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    column-gap: var(--search-grid-gap) !important;
    row-gap: var(--search-grid-row-gap) !important;
    margin: 0 !important;
    padding-left: var(--search-grid-left-start) !important;
    padding-right: 0 !important;
  }

  #product-grid ul.product-grid .grid__item {
    width: var(--search-grid-item-width) !important;
    max-width: var(--search-grid-item-width) !important;
    flex: 0 0 var(--search-grid-item-width) !important;
    margin: 0 !important;
  }

  .template-search__results.page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mobile: 2 per row, centered, equal gaps */
@media screen and (max-width: 749px) {
  #product-grid ul.product-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    row-gap: 30px !important;
    padding: 0 15px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  #product-grid ul.product-grid .grid__item {
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    flex: 0 0 calc(50% - 5px) !important;
    margin: 0 !important;
  }
}
.cart-remove-button .button--tertiary::after {
  content: none !important;
  border: none !important;
  background: none !important;
}
#cart .cart-remove-button .button::after {
  content: none !important;
}
#cart .cart-remove-button .button::after,
#cart .cart-remove-button .button--tertiary::after {
  content: none !important;
}
#cart .cart-item cart-remove-button .button {
  position: static !important;
  padding: 8px 0 !important;
  min-height: auto !important;
  min-width: auto !important;
}

#cart .cart-item cart-remove-button .button::after {
  content: "Remove" !important;
  position: static !important;
  display: inline-block !important;
  padding-left: 0 !important;
  font-size: 10px !important;
  text-transform: capitalize !important;
  color: #000000 !important;
  box-shadow: none !important;
}

#cart .cart-item cart-remove-button .button::before {
  content: none !important;
}

/* ============================================
   SEARCH RESULTS PAGE — HEADER + BREADCRUMB +
   SEARCH BOX (matches target layout)
   ============================================ */

.template-search__header.page-width {
  text-align: left !important;
  max-width: var(--page-width) !important;
}

/* Breadcrumb: reuse existing .breadcrumb-filter look,
   but override the global left-margin so it lines up
   flush with the page-width container instead */
.template-search__header .breadcrumb-filter.template-search__breadcrumb {
  margin-left: 0 !important;
  margin-bottom: 2.4rem !important;
  font-size: 10px !important;
  color: #000000 !important;
}

.template-search__header .breadcrumb-filter.template-search__breadcrumb a {
  color: #000000 !important;
  text-decoration: none !important;
}

.template-search__header .breadcrumb-filter.template-search__breadcrumb a:hover {
  text-decoration: underline !important;
}

.template-search__header .breadcrumb-filter.template-search__breadcrumb span {
  margin: 0 0.4rem;
}

/* Heading */
.template-search__header .template-search__title {
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 3.2rem !important;
}

/* Search box */
.template-search__search {
  width: 100% !important;
}

/* ============================================
   SEARCH RESULTS PAGE — HEADER + BREADCRUMB +
   SEARCH BOX (matches target layout)
   ============================================ */

.template-search__header.page-width {
  text-align: left !important;
  max-width: var(--page-width) !important;
}

/* Breadcrumb: reuse existing .breadcrumb-filter look,
   but override the global left-margin so it lines up
   flush with the page-width container instead */
.template-search__header .breadcrumb-filter.template-search__breadcrumb {
  margin-left: 0 !important;
  margin-bottom: 2.4rem !important;
  font-size: 10px !important;
  color: #000000 !important;
}

.template-search__header .breadcrumb-filter.template-search__breadcrumb a {
  color: #000000 !important;
  text-decoration: none !important;
}

.template-search__header .breadcrumb-filter.template-search__breadcrumb a:hover {
  text-decoration: underline !important;
}

.template-search__header .breadcrumb-filter.template-search__breadcrumb span {
  margin: 0 0.4rem;
}

/* Heading */
.template-search__header .template-search__title {
  text-align: left !important;
  font-weight: 500 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.02em !important;
  margin: 42px 0 0px !important;
}

/* Search box */
.template-search__search {
  width: 100% !important;
  /* Overrides the inline <style> block in main-search.liquid
     (.template-search__search { max-width: 74.1rem; }) which was
     capping the bar at ~741px regardless of screen size */
  max-width: 100% !important;
}

/* ============================================
   SEARCH RESULTS PAGE — HEADER + BREADCRUMB +
   SEARCH BOX (matches target layout)
   ============================================ */

.template-search__header.page-width {
  text-align: left !important;
  max-width: var(--page-width) !important;
}

/* Breadcrumb: reuse existing .breadcrumb-filter look,
   but override the global left-margin so it lines up
   flush with the page-width container instead */
.template-search__header .breadcrumb-filter.template-search__breadcrumb {
  margin-left: 0 !important;
  margin-bottom: 2.4rem !important;
  font-size: 10px !important;
  color: #000000 !important;
}

.template-search__header .breadcrumb-filter.template-search__breadcrumb a {
  color: #000000 !important;
  text-decoration: none !important;
}

.template-search__header .breadcrumb-filter.template-search__breadcrumb a:hover {
  text-decoration: underline !important;
}

.template-search__header .breadcrumb-filter.template-search__breadcrumb span {
  margin: 0 0.4rem;
}

/* Heading */
.template-search__header .template-search__title {
  text-align: left !important;
  font-weight: 500 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 3.2rem !important;
}

/* Search box */
.template-search__search {
  width: 100% !important;
  /* Overrides the inline <style> block in main-search.liquid
     (.template-search__search { max-width: 74.1rem; }) which was
     capping the bar at ~741px regardless of screen size */
  max-width: 100% !important;
}

/* ============================================
   CENTER THE WHOLE SEARCH PAGE CONTENT BLOCK
   (breadcrumb + heading + search box + product grid)
   so there's equal spacing on left and right, and
   the search bar's edges line up with the first/last
   product image
   ============================================ */
:root {
  --search-content-width: calc(333px * 4 + 31px * 3); /* 4 cols x 333px + 3 gaps (default gap 31px) */
}

@media screen and (min-width: 990px) and (max-width: 1400px) {
  :root {
    --search-content-width: calc(333px * 4 + 4px * 3); /* tighter gap used at this breakpoint */
  }
}

@media screen and (min-width: 990px) {
  /* Center the product grid instead of pinning it to a left offset */
  #product-grid ul.product-grid {
    justify-content: center !important;
    padding-left: 0 !important;
  }

  /* Center the header block (breadcrumb/heading/search) to the exact
     same width as the grid, so both stay aligned at any screen width */
  .template-search__header.page-width {
    max-width: var(--search-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.template-search__search .field {
  max-width: 100% !important;
  width: 100% !important;
}

/* Strip Dawn's boxed input shell (shadow + border pseudo-elements) */
.template-search__search .field:before,
.template-search__search .field:after {
  display: none !important;
}

.template-search__search .search__input.field__input {
  border: none !important;
  border-bottom: var(--search-underline-weight, 1px) solid #000000 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 1.5rem 4rem 1.5rem 0 !important;
  margin: 0 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.02em !important;
}

.template-search__search .field__label {
  display: none !important; /* remove floating "Search..." label, use placeholder instead */
}

.template-search__search .search__input.field__input::placeholder {
  color: #777777 !important;
  opacity: 1 !important;
}

/* Push search icon flush right, drop the circular clear (x) button styling */
.template-search__search .field__button {
  right: 0 !important;
  background: transparent !important;
}

/* Easy-adjust knobs — change these two values whenever you want to
   resize the underline thickness or the search icon */
:root {
  --search-underline-weight: 1px;  /* 👈 EDIT to make the line thicker/thinner */
  --search-icon-size: 1.6rem;      /* 👈 EDIT to resize the search icon */
}

.template-search__search .field__button .svg-wrapper {
  width: var(--search-icon-size) !important;
  height: var(--search-icon-size) !important;
}

/* Hide the clear/reset (x) button entirely to match target's clean look */
.template-search__search .reset__button {
  display: none !important;
}

/* "Your search for ... revealed the following:" text under the search bar */
.template-search__results-text {
  text-align: center !important;
  font-weight: 500 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  margin: 2.4rem 0 0 !important;
}

/* NOTE: the old --search-grid-left-start: 7rem variable (further up in
   base.css) is no longer used — the grid is now centered via
   justify-content instead of pinned to a fixed left padding. You can
   leave that old block in place, it's simply overridden below. */
/* ============================================
   CART PAGE — CENTER "REMOVE" UNDER QUANTITY
   The .cart-item cart-remove-button rule elsewhere in
   this file (margin-left:-5rem; margin-top:62%) was
   written for the cart DRAWER but has no drawer-only
   scope, so it was also shifting Remove out of place
   on the main /cart page. This resets it there and
   stacks Remove directly under the quantity control,
   centered in a straight vertical line.
   ============================================ */
#cart .cart-item__quantity-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.2rem !important;
}

#cart .cart-item cart-remove-button {
  margin: 0 !important;
  align-self: center !important;
  position: static !important;
}

#cart .cart-item cart-remove-button .button {
  margin-top: 0 !important;
}

#cart .cart-item cart-remove-button .button::after {
  padding-left: 0 !important;
}

/* Strip the generic .button box-shadow "border" so Remove is plain text */
#cart .cart-item cart-remove-button .button {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#cart .cart-item cart-remove-button .button::before,
#cart .cart-item cart-remove-button .button::after {
  box-shadow: none !important;
  border: none !important;
}
.swym-modal-content{
  display:none !important;
}
.facets__wrapper{
  display:none !important;
}
.preorder-badge-card {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  border: none;
  color: #666666;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  text-transform: capitalize;
  pointer-events: none;
}


#main-search-filters{
  display:none !important;
}


.localization-form{
  /* display:none !important; */
}
/* ============================================================================
   MASHRU - MOBILE OVERRIDES  (everything below applies at max-width: 749px ONLY)
   Desktop and laptop views are never touched by this file.

   HOW TO USE
   1. Delete every earlier version of these blocks from base.css
      (the header block, the collection grid block, the gutter block,
       the details slider block). Keep only this one.
   2. Paste this entire file at the VERY END of base.css.

   CONTENTS
   Section A - knobs (all adjustable values live here)
   Section B - header: 2-line burger, no star, "Bag (0)" text
   Section C - search panel close (X) alignment
   Section D - shared page gutter (header + images line up)
   Section E - collection grid: one image per row, title left / link right
   Section F - details section: images restored + swipe carousel
   ============================================================================ */

@media screen and (max-width: 749px) {

/* ============================================================
   SECTION A - KNOBS
   Change values here, not further down.
   ============================================================ */
:root {
  /* shared page gutter: drives BOTH the header and the images,
     so their left and right edges can never drift apart */
  --m-page-gutter: 20px;

  /* header */
  --m-logo-size: 2.1rem;      /* MASHRU wordmark size */
  --m-logo-tracking: 0.12em;  /* wordmark letter spacing */
  --m-burger-width: 20px;     /* width of the two burger lines */
  --m-burger-gap: 8px;        /* vertical space between the two lines */
  --m-burger-weight: 1px;     /* thickness of each line */
  --m-search-size: 17px;      /* magnifier icon size */
  --m-bag-size: 13px;         /* "Bag (0)" text size */
  --m-right-gap: 18px;        /* space between search and Bag */
  --m-close-size: 16px;       /* search panel close (X) size */

  /* collection grid (Ready-to-wear / Accessories) */
  --m-grid-row-gap: 40px;     /* space between the two cards */
  --m-grid-caption-gap: 10px; /* space between image and text row */
  --m-grid-sub-gap: 2px;      /* space between title and grey subtitle */

  /* details section */
  --m-details-ratio: 3200 / 2095; /* source image ratio, prevents cropping */
  --m-details-caption-gap: 18px;  /* space between image and caption */
}


/* ============================================================
   SECTION B - HEADER
   ============================================================ */

/* --- B1. Burger: three lines become two thin lines ---
   The theme SVG is hidden and the lines are drawn on the inner span,
   centred on the same axis as MASHRU, the magnifier and Bag. */
.header__icon--menu .icon-hamburger {
  display: none !important;
}

header-drawer details:not([open]) > .header__icon--menu {
  display: block !important;
  padding-left: 0 !important;
  padding-right: 10px !important;
  width: auto !important;
}

header-drawer details:not([open]) > .header__icon--menu > span {
  position: relative !important;
  display: block !important;
  width: var(--m-burger-width) !important;
  height: 100% !important;
}

header-drawer details:not([open]) > .header__icon--menu > span::before,
header-drawer details:not([open]) > .header__icon--menu > span::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--m-burger-weight) !important;
  background-color: #000000 !important;
}

header-drawer details:not([open]) > .header__icon--menu > span::before {
  top: calc(50% - (var(--m-burger-gap) / 2) - var(--m-burger-weight)) !important;
}

header-drawer details:not([open]) > .header__icon--menu > span::after {
  top: calc(50% + (var(--m-burger-gap) / 2)) !important;
}

/* --- B2. Logo (name stays MASHRU) --- */
.header__heading-link .h2,
.header__heading-text,
a.header__heading-link span.h2 {
  font-size: var(--m-logo-size) !important;
  letter-spacing: var(--m-logo-tracking) !important;
}

/* --- B3. Wishlist star: hidden on mobile only --- */
.header__icons .header__icon--wishlist,
.header__icon--wishlist {
  display: none !important;
}

/* --- B4. Right side spacing --- */
.header__icons {
  gap: var(--m-right-gap) !important;
  align-items: center !important;
}

/* --- B5. Search: smaller magnifier --- */
.header__icon--search .svg-wrapper,
.header__icon--search svg {
  width: var(--m-search-size) !important;
  height: var(--m-search-size) !important;
}

.header__icon--search {
  padding: 0 !important;
  min-width: auto !important;
  display: flex !important;
  align-items: center !important;
  height: 4.4rem !important;
}

/* --- B6. Bag: icon hidden, label becomes "Bag (0)" ---
   Markup is:  <svg class="icon-bag">
               <span class="header-text-label hide-mobile">&nbsp;Shopping bag</span>
               <span class="cart-count-inline"> (0)</span>
   The words "Shopping bag" are collapsed and "Bag" printed in their
   place, so the live count span keeps working. */
.header__icon--cart .custom-icon,
.header__icon--cart .icon-bag,
.header__icon--cart svg,
.header__icon--cart .svg-wrapper,
.header__icon--cart .show-mobile-only,
.header__icon--cart .cart-count-badge,
.header__icon--cart .cart-count-bubble {
  display: none !important;
}

.header__icon--cart {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: auto !important;
  height: 4.4rem !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.header__icon--cart .header-text-label.hide-mobile {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
  height: auto !important;
  margin: 0 !important;
}

.header__icon--cart .header-text-label.hide-mobile::after {
  content: "Bag" !important;
  display: block !important;
  font-size: var(--m-bag-size) !important;
  line-height: 1 !important;
  color: #000000 !important;
  letter-spacing: 0.02em !important;
}

.header__icon--cart .cart-count-inline {
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--m-bag-size) !important;
  line-height: 1 !important;
  color: #000000 !important;
  margin-left: 3px !important;
  height: auto !important;
}


/* ============================================================
   SECTION C - SEARCH PANEL CLOSE (X)
   base.css pins this with position:fixed / top:80px / right:40px,
   which is a desktop coordinate. On mobile it is returned to the
   flow and centred at the right end of the search row.
   ============================================================ */
.search-modal__content {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 var(--m-page-gutter) !important;
  position: relative !important;
}

.search-modal__form {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.search-modal__close-button,
button.search-modal__close-button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  min-width: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
}

.search-modal__close-button .svg-wrapper,
.search-modal__close-button svg,
.search-modal__close-button .icon {
  width: var(--m-close-size) !important;
  height: var(--m-close-size) !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ============================================================
   SECTION D - SHARED PAGE GUTTER
   Header content and images read the same value, so the image
   edges line up with the burger on the left and Bag on the right.
   ============================================================ */
.header.page-width,
.header-wrapper .header.page-width {
  padding-left: var(--m-page-gutter) !important;
  padding-right: var(--m-page-gutter) !important;
}

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

.header__icons > *:last-child,
.header__icon--cart {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

header-drawer,
header-drawer details:not([open]) > .header__icon--menu {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.page-width[class*="custom_collection_grid"],
[class*="custom_collection_grid"].page-width {
  padding-left: var(--m-page-gutter) !important;
  padding-right: var(--m-page-gutter) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ============================================================
   SECTION E - COLLECTION GRID: ONE IMAGE PER ROW
   The two columns come from an inline style attribute on the div,
   so !important is required to beat it. No template ID is hardcoded,
   so this survives a theme republish.
   ============================================================ */
[class*="custom_collection_grid"] > div[style*="grid-template-columns"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--m-grid-row-gap) !important;
}

/* Each card: row 1 = image, row 2 = title | link, row 3 = subtitle */
[class*="custom_collection_grid"] > div[style*="grid-template-columns"] > div {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  column-gap: 12px !important;
  row-gap: var(--m-grid-sub-gap) !important;
  align-items: start !important;
  text-align: left !important;
}

[class*="custom_collection_grid"] > div[style*="grid-template-columns"] > div > a:first-child {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  margin-bottom: var(--m-grid-caption-gap) !important;
}

/* title */
[class*="custom_collection_grid"] > div[style*="grid-template-columns"] > div > :nth-child(2) {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  align-self: start !important;
}

/* grey subtitle */
[class*="custom_collection_grid"] > div[style*="grid-template-columns"] > div > :nth-child(3) {
  grid-column: 1 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  align-self: start !important;
}

/* CTA link, level with the title */
[class*="custom_collection_grid"] > div[style*="grid-template-columns"] > div > :last-child {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  align-self: start !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* nothing may spill past the gutter */
[class*="custom_collection_grid"] > div[style*="grid-template-columns"],
[class*="custom_collection_grid"] > div[style*="grid-template-columns"] > div,
[class*="custom_collection_grid"] > div[style*="grid-template-columns"] > div > a:first-child,
[class*="custom_collection_grid"] > div[style*="grid-template-columns"] > div > a:first-child img {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}


/* ============================================================
   SECTION F - DETAILS SECTION: IMAGES + SWIPE CAROUSEL
   The photos are landscape (3200x2095) but the theme puts them in a
   .media--portrait box with object-fit:cover, so on a narrow phone
   column only the blank middle strip survived. The box now follows
   the image ratio and the image is contained, so nothing is cropped.
   ============================================================ */

/* F1. Replace the old forced 3-column rule with a snapping scroller */
.multicolumn-list.grid--1-col-tablet-down,
.multicolumn .grid--1-col-tablet-down {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  scrollbar-width: none !important;
}

.multicolumn-list.grid--1-col-tablet-down::-webkit-scrollbar,
.multicolumn .grid--1-col-tablet-down::-webkit-scrollbar {
  display: none !important;
}

/* F2. One slide fills the screen */
.multicolumn-list.grid--1-col-tablet-down > .grid__item,
.multicolumn .grid--1-col-tablet-down > .grid__item {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 var(--m-page-gutter) !important;
  box-sizing: border-box !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
}

/* F3. Box follows the image ratio instead of the portrait crop */
.multicolumn-card,
.multicolumn-card__image-wrapper,
.multicolumn-card__image-wrapper .media,
.multicolumn-card .media {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.multicolumn-card__image-wrapper .media,
.multicolumn-card .media {
  height: auto !important;
  aspect-ratio: var(--m-details-ratio) !important;
  background: transparent !important;
}

/* F4. Whole photo visible, nothing cut off.
   Change contain to cover only if you re-crop the source files. */
.multicolumn-card__image-wrapper .media img,
.multicolumn-card .media img,
.multicolumn-card__image,
img.multicolumn-card__image {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* F5. Centred caption under the image */
.multicolumn-card__info {
  text-align: center !important;
  padding: 0 var(--m-page-gutter) !important;
  margin-top: var(--m-details-caption-gap) !important;
}

.multicolumn-card__info .link {
  display: inline-block !important;
  margin-top: 12px !important;
}

} /* end @media max-width: 749px */
@media screen and (max-width: 749px) {
  /* TEMPORARY PROBE: remove once confirmed */
  html body .multicolumn-card__image-wrapper .media {
    outline: 2px solid red !important;
  }

  html body .multicolumn-card__image-wrapper,
  html body .multicolumn-card__image-wrapper .media,
  html body .multicolumn-card .media {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    aspect-ratio: 3200 / 2095 !important;
    overflow: hidden !important;
    background: #f2f2f2 !important;
  }

  html body .multicolumn-card__image-wrapper .media img,
  html body .multicolumn-card .media img,
  html body img.multicolumn-card__image {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* ============================================================
   DETAILS SLIDER - PROGRESS BAR  (max-width: 749px ONLY)
   Paste at the END of base.css, after the main mobile override file.
   The bar itself is created by the script; this only styles it.
   ============================================================ */

@media screen and (max-width: 749px) {

  /* ---------- KNOBS ---------- */
  :root {
    --m-bar-width: 110px;   /* length of the thin line */
    --m-bar-height: 1px;    /* thickness of the line */
    --m-bar-track: #dcdcdc; /* pale part */
    --m-bar-fill: #000000;  /* moving segment */
    --m-bar-space-top: 22px;
    --m-bar-space-bottom: 16px;
  }

  .m-slider-progress {
    position: relative !important;
    display: block !important;
    width: var(--m-bar-width) !important;
    height: var(--m-bar-height) !important;
    margin: var(--m-bar-space-top) auto var(--m-bar-space-bottom) !important;
    background: var(--m-bar-track) !important;
    overflow: hidden !important;
  }

  .m-slider-progress > span {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: var(--m-bar-fill) !important;
    transition: transform 0.45s ease !important;
    will-change: transform !important;
  }

  /* the caption already sits under the bar, tighten its top gap */
  .multicolumn-card__info {
    margin-top: 0 !important;
  }
}

/* Never show the bar on laptop or desktop */
@media screen and (min-width: 750px) {
  .m-slider-progress {
    display: none !important;
  }
}
/* ============================================================================
   MOBILE PRODUCT CAROUSEL  (max-width: 749px ONLY)
   Homepage featured-collection rows become a horizontal rail with
   arrows, matching the reference. Desktop and laptop untouched.

   BEFORE PASTING - one theme setting:
   Theme editor > that Featured Collection section >
     - tick "Enable swipe on mobile"   (this is what outputs the arrows)
     - set "Number of columns on mobile" to 2
   Without that tick there are no arrow buttons for this CSS to style.

   PASTE AT THE END of base.css, after your other mobile blocks.
   Scoped to "slider-component ul.product-grid", so the collection
   page and search page grids are not affected.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ---------- KNOBS ---------- */
  :root {
    --m-rail-card: 50%;      /* width of one card, 50% = two visible */
    --m-rail-gap: 4px;       /* white gap between cards */
    --m-rail-edge: 0px;      /* 0 = rail bleeds to both screen edges */
    --m-arrows-lift: 38px;   /* pulls the arrows up beside the title */
    --m-arrows-gap: 18px;    /* space between the two arrows */
    --m-arrows-size: 16px;   /* arrow glyph size */
  }

  /* ---------- 1. RAIL ---------- */
  slider-component.page-width,
  slider-component.slider-component-full-width {
    padding-left: var(--m-rail-edge) !important;
    padding-right: var(--m-rail-edge) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  slider-component ul.product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: var(--m-rail-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    scrollbar-width: none !important;
  }

  slider-component ul.product-grid::-webkit-scrollbar {
    display: none !important;
  }

  /* ---------- 2. CARDS ---------- */
  slider-component ul.product-grid > .grid__item {
    flex: 0 0 var(--m-rail-card) !important;
    width: var(--m-rail-card) !important;
    max-width: var(--m-rail-card) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
  }

  slider-component ul.product-grid .card__inner,
  slider-component ul.product-grid .card-wrapper,
  slider-component ul.product-grid .card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* ---------- 3. CAPTION: name then price, both left ----------
     Touch devices latch :hover, which is why the size row (XXS XS S...)
     was showing on one card. It is suppressed here and the normal
     name/price block is forced back on.                               */
  html body slider-component ul.product-grid .card__size-hover-container {
    display: none !important;
  }

  html body slider-component ul.product-grid .card:hover .card__main-info,
  html body slider-component ul.product-grid .card-wrapper:hover .card__main-info,
  html body slider-component ul.product-grid .card__information:hover .card__main-info,
  html body slider-component ul.product-grid .card__main-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
  }

  slider-component ul.product-grid .card__information {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  /* name on a single line, ellipsis like the reference */
  slider-component ul.product-grid .card__heading,
  slider-component ul.product-grid .card__heading a {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  slider-component ul.product-grid .price,
  slider-component ul.product-grid .price__regular,
  slider-component ul.product-grid .price-item {
    text-align: left !important;
    margin: 0 !important;
  }

  /* keep the caption clear of the bleeding rail edges */
  slider-component ul.product-grid > .grid__item .card__information {
    padding-left: 2px !important;
  }

  /* ---------- 4. ARROWS beside the section title ---------- */
  slider-component .slider-buttons {
    display: flex !important;
    order: -1 !important;            /* moves the row above the rail */
    justify-content: flex-end !important;
    align-items: center !important;
    gap: var(--m-arrows-gap) !important;
    margin: calc(var(--m-arrows-lift) * -1) 0 14px 0 !important;
    padding: 0 20px !important;
    background: transparent !important;
  }

  /* reference shows only the two arrows, no page counter */
  slider-component .slider-counter {
    display: none !important;
  }

  slider-component .slider-button {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #000000 !important;
    line-height: 1 !important;
  }

  /* base.css hides .icon-caret globally, so the built-in SVGs would
     render as empty buttons. Text glyphs are used instead.          */
  slider-component .slider-button svg,
  slider-component .slider-button .icon,
  slider-component .slider-button .svg-wrapper {
    display: none !important;
  }

  slider-component .slider-button--prev::before {
    content: "\2190" !important;   /* left arrow */
  }

  slider-component .slider-button--next::before {
    content: "\2192" !important;   /* right arrow */
  }

  slider-component .slider-button::before {
    font-size: var(--m-arrows-size) !important;
    line-height: 1 !important;
    color: #000000 !important;
    display: block !important;
  }

  slider-component .slider-button[disabled],
  slider-component .slider-button:disabled {
    opacity: 0.25 !important;
    cursor: default !important;
  }

  /* ---------- 5. SECTION TITLE ---------- */
  .collection__title.title-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }
}
@media screen and (max-width: 749px) {

  /* one knob: vertical space between stacked sections */
  :root {
    --m-section-gap: 15px;
  }

  /* multicolumn (Details) bottom padding */
  [class*="__multicolumn"][class*="-padding"] {
    padding-bottom: var(--m-section-gap) !important;
  }

  /* featured collection (products) top padding */
  [class*="featured_collection"][class*="-padding"] {
    padding-top: 0 !important;
  }

  /* caption should not add its own trailing space */
  .multicolumn-card__info {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
@media screen and (max-width: 749px) {
  html body .multicolumn-card__image-wrapper,
  html body .multicolumn-card__image-wrapper .media,
  html body .multicolumn-card .media,
  html body .multicolumn-card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}
@media screen and (max-width: 749px) {
  :root {
    --m-cta-lift: 0px;   /* the only value to tune */
  }

  [class*="custom_collection_grid"] > div[style*="grid-template-columns"] > div > :last-child {
    position: relative !important;
    top: calc(var(--m-cta-lift) * -1) !important;
    line-height: 1.2 !important;
  }
}
/* ============================================================
   MOBILE MULTICOLUMN IMAGE SIZE  (max-width: 749px ONLY)
   Details and Spine sized independently.
   Paste at the END of base.css, after your other mobile blocks.
   ============================================================ */

@media screen and (max-width: 749px) {

  /* ---------- KNOBS ---------- */
  :root {
    --m-details-img-ratio: 3 / 2;  /* Details section image shape */
    --m-spine-img-ratio: 4 / 5;    /* Spine journal image shape */
  }

  /* ---------- shared: card stops showing behind the image ---------- */
  html body [id*="__multicolumn_"] .multicolumn-card {
    background: transparent !important;
    padding: 0 !important;
  }

  html body [id*="__multicolumn_"] .multicolumn-card__image-wrapper,
  html body [id*="__multicolumn_"] .multicolumn-card .media {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
  }

  html body [id*="__multicolumn_"] .multicolumn-card .media img,
  html body [id*="__multicolumn_"] img.multicolumn-card__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* ---------- DETAILS section only ---------- */
  html body [id*="__multicolumn_47mL8m"] .multicolumn-card__image-wrapper,
  html body [id*="__multicolumn_47mL8m"] .multicolumn-card .media {
    aspect-ratio: var(--m-details-img-ratio) !important;
  }

  /* ---------- SPINE journal section only ---------- */
  html body [id*="__multicolumn_akeqeJ"] .multicolumn-card__image-wrapper,
  html body [id*="__multicolumn_akeqeJ"] .multicolumn-card .media {
    aspect-ratio: var(--m-spine-img-ratio) !important;
  }
}
/* ============================================================
   MOBILE IMAGE HEIGHT TUNING  (max-width: 749px ONLY)
   Two independent knobs. Change ONLY the two values below.
   ============================================================ */

@media screen and (max-width: 749px) {

  /* ---------- THE TWO KNOBS ---------- */
   :root {
    --m-product-img-height: 280px;  /* was 350px, now shorter */
    --m-spine-img-height: 403px;    /* was 245px, now taller */
     --m-spine-img-width: 100%; 
  }

  /* ---------- product rail cards ---------- */
  html body slider-component ul.product-grid .card__media,
  html body slider-component ul.product-grid .card__media .media,
  html body slider-component ul.product-grid .card__inner {
    height: var(--m-product-img-height) !important;
    max-height: var(--m-product-img-height) !important;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  html body slider-component ul.product-grid .card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

    html body [id*="__multicolumn_akeqeJ"] .multicolumn-card__image-wrapper,
  html body [id*="__multicolumn_akeqeJ"] .multicolumn-card .media {
    height: var(--m-spine-img-height) !important;
    width: var(--m-spine-img-width) !important;
    max-width: var(--m-spine-img-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
  }
}
/* ============================================================================
   MOBILE ONLY - FILTER ROW LABELS FLUSH TO THE IMAGE EDGES (max-width: 749px)
   "Ready-to-wear" starts where image 1 starts.
   The "+" ends where image 2 ends.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* the row itself: two shrink-to-fit children, pushed apart */
  html body *:has(> .mobile-facets__wrapper),
  html body *:has(> .breadcrumb-filter),
  html body .facets-container,
  html body .facets-container-drawer,
  html body facet-filters-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 0 !important;
    /* neutralise any grid fallback that was creating the two halves */
    grid-template-columns: none !important;
  }

  /* LEFT LABEL - shrink to its text, hard left */
  html body .breadcrumb-filter {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto 0 0 !important;   /* auto on the RIGHT pushes nothing left */
    padding: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-self: center !important;
    white-space: nowrap !important;
  }

  /* RIGHT CONTROL - shrink to its text, hard right */
  html body .mobile-facets__wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;   /* auto on the LEFT pushes it right */
    padding: 0 !important;
    text-align: right !important;
    justify-content: flex-end !important;
    align-self: center !important;
    white-space: nowrap !important;
  }

  /* every layer inside the right control must also shrink and right-align,
     otherwise one of them re-centres the text */
  html body .mobile-facets__wrapper > *,
  html body .mobile-facets__wrapper details,
  html body .mobile-facets__wrapper summary,
  html body .mobile-facets__wrapper .mobile-facets__open,
  html body .mobile-facets__wrapper menu-drawer,
  html body .mobile-facets__wrapper .disclosure-has-popup {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  html body .mobile-facets__open-label {
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* the + is the very last glyph on the line */
  html body .plus-sign {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
}
/* ============================================================================
   MOBILE ONLY - FILTER ROW INDEPENDENT MARGIN KNOB (max-width: 749px)
   Adjusts ONLY "Ready-to-wear" and "Filter By +".
   Paragraph and product images are not affected.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* start from the page gutter, then add or subtract as needed.
       positive value  = pulls the label inward (away from the edge)
       negative value  = pushes it outward (past the image edge)      */
    --m-filter-left-nudge: 1px;    /* 👈 moves "Ready-to-wear" only */
    --m-filter-right-nudge: 10px;   /* 👈 moves "Filter By +" only   */
  }

  html body .breadcrumb-filter {
    margin-left: var(--m-filter-left-nudge) !important;
    margin-right: auto !important;
  }

  html body .mobile-facets__wrapper {
    margin-right: var(--m-filter-right-nudge) !important;
    margin-left: auto !important;
  }
}
/* ============================================================================
   MASHRU - MOBILE GUTTER ALIGNMENT  v2   (max-width: 749px ONLY)

   REPLACES the earlier "mashru-mobile-gutter-alignment.css" block.
   Delete that block from base.css first, then paste this one at the VERY END.
   Desktop and laptop are untouched.

   WHAT CHANGED SINCE v1
   1. Filter row fixed. base.css sets
        .mobile-facets__wrapper { position: absolute; right: 0; }
      which pulled "Filter By +" past the image edge. It is returned to the
      normal flow here. The gutter also landed on two nested wrappers, which
      doubled the left inset. Padding is now zeroed on every wrapper and the
      gutter is applied once, as a margin on the two visible children.
   2. Paragraph block made nesting proof. Padding and width caps are stripped
      from every wrapper, then the gutter is applied once on the text elements
      themselves, so it cannot stack no matter how deep the section nests.
   3. Optional left-align toggle for the intro block at the bottom.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ------------------------------------------------------------------
     KNOBS - change values here only
     ------------------------------------------------------------------ */
  :root {
    /* the gutter the header uses. Everything below inherits it. */
    --m-page-gutter: 20px;

    /* space between the two product images.
       30px keeps the image width identical to the current build.
       Lower it and the images get wider, raise it and they get narrower. */
    --m-grid-gap: 30px;

    /* old per element nudges are neutralised, the gutter does the work now */
    --m-filter-left-nudge: 0px;
    --m-filter-right-nudge: 0px;
  }


  /* ==================================================================
     1. INTRO BLOCK  (Ready-to-wear heading + description paragraph)

     Step 1a strips padding and width caps from every wrapper in the
     section, so nothing can stack. Step 1b then applies the gutter
     exactly once, on the elements that actually hold the text.
     ================================================================== */

  /* 1a. neutralise all wrappers */
  html body [class*="collection-hero"],
  html body [class*="rich-text"],
  html body .collection-description,
  html body .collection__description {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 1b. apply the gutter once, on the text elements */
  html body .collection-hero__title,
  html body .collection-hero__description,
  html body .collection-hero__text-wrapper,
  html body .rich-text__heading,
  html body .rich-text__text,
  html body .rich-text__caption,
  html body .rich-text__buttons {
    padding-left: var(--m-page-gutter) !important;
    padding-right: var(--m-page-gutter) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* the paragraph itself must not add its own inset */
  html body .collection-hero__description p,
  html body .rich-text__text p,
  html body .collection-hero__description .rte,
  html body .rich-text__text .rte {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }


  /* ==================================================================
     2. FILTER ROW  ("Ready-to-wear" left, "Filter By +" right)
     ================================================================== */

  /* 2a. zero every wrapper so the gutter cannot be applied twice */
  html body .facets-container,
  html body .facets-container-drawer,
  html body facet-filters-form,
  html body *:has(> .facets-container),
  html body *:has(> .breadcrumb-filter),
  html body *:has(> .mobile-facets__wrapper) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2b. left label sits on the gutter */
  html body .breadcrumb-filter {
    margin-left: var(--m-page-gutter) !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2c. right control returned to normal flow, then sat on the gutter.
         base.css pins this absolute at right:0, which is what pushed the
         "+" past the image edge. */
  html body .mobile-facets__wrapper {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    margin-right: var(--m-page-gutter) !important;
    margin-left: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .mobile-facets__open-label {
    margin-right: 6px !important;
  }

  /* the "+" is the last glyph on the line, nothing after it */
  html body .plus-sign {
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==================================================================
     3. PRODUCT GRID
     Gutter lives on .collection.page-width only. The <ul> gets zero
     padding so the two paddings can no longer stack to 30px.
     ================================================================== */
  html body .product-grid-container .collection.page-width {
    padding-left: var(--m-page-gutter) !important;
    padding-right: var(--m-page-gutter) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  html body .collection.page-width ul#product-grid.product-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    column-gap: var(--m-grid-gap) !important;
    row-gap: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* two per row, width derived from the gap so the card size stays put */
  html body .collection.page-width ul#product-grid.product-grid > .grid__item {
    width: calc((100% - var(--m-grid-gap)) / 2) !important;
    max-width: calc((100% - var(--m-grid-gap)) / 2) !important;
    flex: 0 0 calc((100% - var(--m-grid-gap)) / 2) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body .collection.page-width ul#product-grid.product-grid .card__inner,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper,
  html body .collection.page-width ul#product-grid.product-grid .card,
  html body .collection.page-width ul#product-grid.product-grid .color-scheme-2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .collection.page-width ul#product-grid.product-grid .card__information {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* ==================================================================
     4. OPTIONAL - LEFT ALIGN THE INTRO BLOCK

     The heading and paragraph are centre aligned, so each line wraps
     wherever it runs out of room and the visible text edge sits inside
     the 20px container. That is normal for centred text and no amount
     of padding will change it.

     If you want the first character to line up exactly with the left
     edge of the first product image, delete the opening and closing
     comment markers around the block below to switch the intro block
     to left aligned.
     ================================================================== */
  /*
  html body .collection-hero__title,
  html body .collection-hero__description,
  html body .collection-hero__description p,
  html body .rich-text__heading,
  html body .rich-text__text,
  html body .rich-text__text p {
    text-align: left !important;
  }

  html body .rich-text__wrapper,
  html body .rich-text__blocks,
  html body .collection-hero__text-wrapper {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  */
}
/* ============================================================================
   MASHRU - MOBILE ALIGNMENT PATCH  v2.1   (max-width: 749px ONLY)

   Paste directly AFTER the v2 block in base.css. Do not remove v2, this
   only corrects two things inside it.

   FIX 1 - "Filter By +" now sits hard right, ending on the same line as the
           right edge of the second product image.
           Cause: .breadcrumb-filter had margin-right:auto AND
           .mobile-facets__wrapper had margin-left:auto. Two auto margins in a
           flex row split the free space between them, which parked the control
           in the middle. Only the right hand one stays auto now.

   FIX 2 - The paragraph block now spans exactly from the left edge of image 1
           to the right edge of image 2.
           Cause A: ancestor padding could still shrink the text column, so the
           width is pinned to the viewport and centred, which is immune to any
           symmetric padding above it.
           Cause B: centre aligned text wraps ragged, so both edges sat inside
           the images no matter what padding was applied. The text is justified
           here so both edges run flush, with the final line still centred.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==================================================================
     FIX 1 - FILTER ROW, PUSH "Filter By +" TO THE RIGHT EDGE
     ================================================================== */
  html body .facets-container,
  html body .facets-container-drawer,
  html body *:has(> .mobile-facets__wrapper),
  html body *:has(> .breadcrumb-filter) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* left label: no auto margin, it must not absorb the free space */
  html body .breadcrumb-filter {
    margin-left: var(--m-page-gutter) !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
  }

  /* right control: the only auto margin, so all free space goes here */
  html body .mobile-facets__wrapper {
    position: static !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: var(--m-page-gutter) !important;
    flex: 0 0 auto !important;
  }


  /* ==================================================================
     FIX 2 - PARAGRAPH BLOCK, EDGES FLUSH WITH THE PRODUCT IMAGES
     ================================================================== */

  /* 2a. pin the text column to the viewport minus the gutter on each side.
         Centring it with auto margins means any leftover padding on a parent
         cannot pull it off the gutter, because that padding is symmetric. */
  html body .collection-hero__title,
  html body .collection-hero__description,
  html body .rich-text__heading,
  html body .rich-text__text,
  html body .rich-text__caption {
    width: calc(100vw - (var(--m-page-gutter) * 2)) !important;
    max-width: calc(100vw - (var(--m-page-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2b. justify the body copy so the left and right edges are both flush.
         text-align-last keeps the closing line centred, which preserves the
         look of the original centred block.

         TO GO BACK TO CENTRED RAGGED TEXT: delete this rule. The block will
         still be the correct width, the visible text edges will simply sit
         inside the images again, which is normal for centred type. */
  html body .collection-hero__description,
  html body .collection-hero__description p,
  html body .rich-text__text,
  html body .rich-text__text p {
    text-align: justify !important;
    text-align-last: center !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
    word-spacing: normal !important;
  }

  /* the section heading above the paragraph stays centred */
  html body .collection-hero__title,
  html body .rich-text__heading {
    text-align: center !important;
  }
}
/* ============================================================================
   MASHRU - INTRO PARAGRAPH ALIGNMENT  v2.3   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v2, v2.1 and v2.2.

   THE REAL MARKUP  (confirmed in devtools)
     <div class="rtw-hero">
       <div class="rtw-hero">
         <h1>Ready-to-wear</h1>
         <p>Restraint and silhouette ...</p>

   Two nested divs sharing the class "rtw-hero", styled by an inline <style>
   block inside the template, not by base.css. Every earlier selector
   (collection-hero__description, rich-text__text, and so on) matched nothing,
   which is why the paragraph never moved.

   Because both wrappers carry the same class, any padding applied to
   .rtw-hero would be applied twice and double the inset. So both wrappers are
   zeroed and the gutter is set on the <h1> and <p> themselves, using a
   viewport based width that no ancestor padding can shrink.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* 1. neutralise BOTH nested wrappers so nothing can stack */
  html body .rtw-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. the heading and paragraph span exactly image edge to image edge */
  html body .rtw-hero h1,
  html body .rtw-hero p {
    width: calc(100vw - (var(--m-page-gutter) * 2)) !important;
    max-width: calc(100vw - (var(--m-page-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. heading stays centred */
  html body .rtw-hero h1 {
    text-align: center !important;
  }

  /* 4. paragraph justified so BOTH edges run flush with the product images.
         Centred text wraps ragged, so its visible edges always sit inside the
         images no matter how wide the container is. Justifying is what makes
         the left and right edges actually line up.

         TO GO BACK TO CENTRED: delete this rule 4 only. The paragraph keeps
         the correct width, the text edges simply go ragged again. */
  html body .rtw-hero p {
    text-align: justify !important;
    text-align-last: center !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }
}
/* ============================================================================
   MASHRU - MOBILE PRODUCT IMAGE HEIGHT   v2.6   (max-width: 749px ONLY)

   REPLACES v2.5 entirely. Delete v2.5 from base.css first, then paste this
   at the VERY END. Collection grid only, desktop and laptop untouched.

   WHAT WAS WRONG IN v2.5
   It applied the height to .card__inner as well. That element carries the
   card width, so giving it a fixed height and overflow:hidden let the layout
   re-measure it and the width shifted. Here the height lands only on the
   image box, and the width of every element in the chain is explicitly
   pinned to 100% so it cannot move.

   ----------------------------------------------------------------------------
   HOW TO CHANGE THE HEIGHT YOURSELF, ANY TIME
   ----------------------------------------------------------------------------
   ONE number to edit: --m-card-img-height, just below.

     smaller number  =  shorter image
     larger number   =  taller image

     --m-card-img-height: 244px;   another 5px shorter
     --m-card-img-height: 264px;   15px taller

   The width is NOT controlled here. It is set by --m-grid-gap in the v2
   block, and nothing in this file can alter it.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 THE ONLY NUMBER TO EDIT */
    --m-card-img-height: 249px;
  }

  /* height lands on the image box only, never on the card itself */
  html body .collection.page-width ul#product-grid.product-grid .card__media,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media {
    height: var(--m-card-img-height) !important;
    min-height: 0 !important;
    max-height: var(--m-card-img-height) !important;
    padding-bottom: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    position: relative !important;

    /* width explicitly held so the height change cannot disturb it */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* the card keeps its own width and lets its height follow the content */
  html body .collection.page-width ul#product-grid.product-grid .card__inner,
  html body .collection.page-width ul#product-grid.product-grid .card,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* photo fills the box, cropped from the centre, never squashed */
  html body .collection.page-width ul#product-grid.product-grid .card__media img,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}
@media screen and (max-width: 749px) {
  html body .collection.page-width ul#product-grid.product-grid .card__inner {
    overflow: visible !important;
  }
}
/* ============================================================================
   MASHRU - FILTER BY, FINAL   v2.4   (max-width: 749px ONLY)

   BEFORE PASTING THIS, REMOVE THE CONFLICTS:
   1. In the v2.1 block, delete the section headed
        "FIX 1 - FILTER ROW, PUSH Filter By + TO THE RIGHT EDGE"
      Keep FIX 2, that is what corrected the paragraph.
   2. Delete the entire v2.2 block if you pasted it.
   3. Paste this at the VERY END of base.css.

   After that, exactly ONE rule in the whole file sets position on
   .mobile-facets__wrapper, so paste order can no longer decide the outcome.

   WHY THE EARLIER ATTEMPTS FAILED
   v2.1 set position:static, v2.2 set position:absolute. Same element, same
   specificity, so the lower one in the file wins. With v2.2 sitting above
   v2.1, static won and the control fell back into normal flow next to
   "Ready-to-wear", which is what the screenshot shows.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* Distance from the right edge of the screen to the "+".
       20px should land it directly under the right edge of the paragraph
       and of the second product image.

       IF IT SITS TOO FAR IN, lower this number.
       IF IT HANGS OFF THE EDGE, raise it.
       This is the only value you should need to touch. */
    --m-filter-right-offset: 20px;
  }

  html body .mobile-facets__wrapper {
    position: absolute !important;
    right: var(--m-filter-right-offset) !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  /* left label stays on the gutter */
  html body .breadcrumb-filter {
    margin-left: var(--m-page-gutter) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
  }

  /* nothing trailing the "+" */
  html body .plus-sign {
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .mobile-facets__open-label {
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
  }
}
/* ============================================================================
   MASHRU - PRODUCT IMAGE FIT   v2.7   (max-width: 749px ONLY)

   Paste at the VERY END of base.css. Nothing needs deleting, this sits below
   v2.6 and overrides it.

   WHY THE PHOTOS WENT NARROW
   This theme does not use a plain <img> in the card. It uses a custom slider:

     .card__media
        .media.product-media-slider     <- display:grid, holds the slides
           img.product-slide            <- one per photo, stacked in grid-area 1/1

   v2.6 fixed .card__media and .media to 249px tall but never sized the
   .product-slide children, so each photo kept its own natural width inside a
   full width box. The grey you can see is .media's placeholder background
   showing through beside the photo.

   This block sizes the whole chain: box, slider, and every slide.

   ----------------------------------------------------------------------------
   HOW TO CHANGE THE HEIGHT YOURSELF
   ----------------------------------------------------------------------------
   ONE knob: --m-card-img-ratio. It is width / height.

     5 / 8    current, matches the original card shape
     4 / 5    shorter
     2 / 3    slightly shorter
     1 / 1.7  taller

   A ratio is used instead of a pixel height so the box scales with the phone
   width and the photo can never letterbox again.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 THE ONLY VALUE TO EDIT */
    --m-card-img-ratio: 5 / 8;
  }

  /* 1. THE BOX - proportional, overrides v2.6's fixed 249px */
  html body .collection.page-width ul#product-grid.product-grid .card__media,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media.product-media-slider,
  html body .collection.page-width ul#product-grid.product-grid .product-media-slider {
    display: block !important;      /* the slider was display:grid */
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    aspect-ratio: var(--m-card-img-ratio) !important;
    overflow: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. THE SLIDES - this is the part v2.6 missed.
        Every photo now fills the box edge to edge, cropped from the centre.
        display is deliberately NOT set here, so the slider's own show/hide
        logic for the active slide keeps working. */
  html body .collection.page-width ul#product-grid.product-grid .card__media img,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media img,
  html body .collection.page-width ul#product-grid.product-grid .card__media .product-slide,
  html body .collection.page-width ul#product-grid.product-grid .product-media-slider .product-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. THE CARD - width untouched, height follows its content */
  html body .collection.page-width ul#product-grid.product-grid .card__inner,
  html body .collection.page-width ul#product-grid.product-grid .card,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* ============================================================================
   MASHRU - PRODUCT IMAGE FIT   v2.8   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v2.7.

   WHAT CHANGED IN THINKING
   v2.6 and v2.7 both tried to set the card height on .card__media / .media.
   That is not where Dawn's card height comes from. It comes from

       <div class="card__inner ratio" style="--ratio-percent: NN%">

   where .ratio::before reserves the height. Forcing a height or an
   aspect-ratio further down just made a tall empty box while the photo kept
   its natural size in the top left corner, which is what the screenshot shows.

   This block does the opposite. The height goes back to .ratio, untouched,
   and every layer between the card and the photo is stretched to fill it:

       .card__inner.ratio        height from the theme
         .card__media            absolute, fills
           .media                absolute, fills
             .product-media-slider  absolute, fills
               img / .product-slide absolute, fills, cropped centre

   Nothing here sets a height or a ratio, so the cards go back to the exact
   proportions they had before any of the height work started.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* 1. THE CARD - height comes from .ratio again. Every height and
        aspect-ratio override from v2.5, v2.6 and v2.7 is cancelled. */
  html body .collection.page-width ul#product-grid.product-grid .card__inner,
  html body .collection.page-width ul#product-grid.product-grid .card__inner.ratio,
  html body .collection.page-width ul#product-grid.product-grid .card,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2. THE LAYERS - each one stretches to the box .ratio created,
        instead of trying to define a size of its own. */
  html body .collection.page-width ul#product-grid.product-grid .card__media,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media.product-media-slider,
  html body .collection.page-width ul#product-grid.product-grid .product-media-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. THE PHOTO - fills the box, cropped from the centre.
        display is deliberately left alone so the slider's active-slide
        logic keeps working. */
  html body .collection.page-width ul#product-grid.product-grid .card__media img,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media img,
  html body .collection.page-width ul#product-grid.product-grid .card__media .product-slide,
  html body .collection.page-width ul#product-grid.product-grid .product-media-slider .product-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ============================================================================
   MASHRU - PRODUCT IMAGE HEIGHT IN PIXELS   v2.9   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v2.8.

   ----------------------------------------------------------------------------
   THE ONE KNOB
   ----------------------------------------------------------------------------
   --m-card-img-height, a few lines below. Plain pixels.

       254px   the original card height, current value
       240px   shorter
       280px   taller

   Change the number, save, hard refresh. Nothing else needs touching.

   WIDTH IS NOT CONTROLLED HERE and cannot be changed by this block. Width
   comes from --m-grid-gap in the v2 block: a bigger gap makes the images
   narrower, a smaller gap makes them wider.

   ----------------------------------------------------------------------------
   WHY THIS ONE WORKS WHEN v2.5 AND v2.6 DID NOT
   ----------------------------------------------------------------------------
   Dawn builds the card box like this:

       <div class="card__inner ratio" style="--ratio-percent: NN%">

   and .ratio::before reserves the height using that percentage. So:

     v2.5 put a height on .card__inner but left ::before reserving its own
          height as well, so the two fought and the layout re-measured the width.
     v2.6 moved the height down to .card__media, which is not what sizes the
          card at all, so the box grew while the photo stayed small.

   Here the height goes on .card__inner AND ::before is switched off, so there
   is exactly one thing deciding the height. Every layer below is then
   stretched to fill it, so the photo can never sit small in the corner.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 THE ONLY NUMBER TO EDIT */
    --m-card-img-height: 254px;
  }

  /* 1. Switch off the theme's ratio spacer so it stops reserving height.
        Without this the knob below has something fighting it. */
  html body .collection.page-width ul#product-grid.product-grid .card__inner.ratio::before,
  html body .collection.page-width ul#product-grid.product-grid .card__inner::before {
    content: none !important;
    padding-bottom: 0 !important;
    height: 0 !important;
    width: 0 !important;
    display: none !important;
  }

  /* 2. The knob applies here, on the element that actually sizes the card.
        Width is left at 100% of the grid cell so it cannot shift. */
  html body .collection.page-width ul#product-grid.product-grid .card__inner,
  html body .collection.page-width ul#product-grid.product-grid .card__inner.ratio {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--m-card-img-height) !important;
    min-height: var(--m-card-img-height) !important;
    max-height: var(--m-card-img-height) !important;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. The card wrapper keeps its width and lets its height follow. */
  html body .collection.page-width ul#product-grid.product-grid .card,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4. Every layer between the card and the photo fills the box. */
  html body .collection.page-width ul#product-grid.product-grid .card__media,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media.product-media-slider,
  html body .collection.page-width ul#product-grid.product-grid .product-media-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 5. The photo fills the box, cropped from the centre.
        display is left alone so the slider's active-slide logic still works. */
  html body .collection.page-width ul#product-grid.product-grid .card__media img,
  html body .collection.page-width ul#product-grid.product-grid .card__media .media img,
  html body .collection.page-width ul#product-grid.product-grid .card__media .product-slide,
  html body .collection.page-width ul#product-grid.product-grid .product-media-slider .product-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ============================================================================
   MASHRU - ROW GAP + FILTER BY OFFSET   v3.0   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v2.9.

   ----------------------------------------------------------------------------
   TWO KNOBS, BOTH BELOW
   ----------------------------------------------------------------------------

   --m-card-row-gap          vertical space BETWEEN product rows
                             was 30px, now 25px

       smaller number  =  rows sit closer together
       larger number   =  more air between rows

       It only affects the space between row 1 and row 2. It does not touch
       the image height (that is --m-card-img-height in v2.9) or the gap
       beside the images (that is --m-grid-gap in v2).


   --m-filter-right-offset   distance from the right edge of the screen
                             to the "+" in "Filter By +"
                             was 20px, now 13px

       smaller number  =  "+" moves further RIGHT
       larger number   =  "+" moves further LEFT

       Note the direction: this is a distance from the edge, so lowering it
       pushes the text outward. It was measuring 20px from its own container
       rather than from the screen, which is why the "+" was landing about 7px
       short of the paragraph edge. 13px closes that gap.

       This value is also declared in the v2.4 block. This one is lower in the
       file, so this is the one that applies. Edit it here, not there.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 KNOB 1 - space between product rows */
    --m-card-row-gap: 2px;

    /* 👇 KNOB 2 - distance from screen edge to the "+" */
    --m-filter-right-offset: 13px;
  }

  /* KNOB 1 applies here. column-gap is left alone so the image
     width cannot change. */
  html body .collection.page-width ul#product-grid.product-grid {
    row-gap: var(--m-card-row-gap) !important;
  }

  /* KNOB 2 applies here. */
  html body .mobile-facets__wrapper {
    right: var(--m-filter-right-offset) !important;
  }
}
/* ============================================================================
   MASHRU - CARD CAPTION ORDER   v3.1   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v3.0.
   Collection grid only. Desktop and laptop are untouched.

   RESULT
       Sculptural Poplin Dress     <- line 1, product name
       Sepia                       <- line 2, colour
       Rs.10,000.00                <- line 3, price

   ----------------------------------------------------------------------------
   HOW TO RESEQUENCE IT YOURSELF LATER
   ----------------------------------------------------------------------------
   Each of the three pieces has an "order" number in section 3 below. Lowest
   number goes on top. To swap two lines, swap their numbers. For example, to
   put price above colour:

       .card__heading         order: 1
       .price                 order: 2      <- was 3
       .card__color-subtitle  order: 3      <- was 2

   Spacing between the three lines is the --m-card-info-gap knob.

   ----------------------------------------------------------------------------
   WHY display:contents IS USED
   ----------------------------------------------------------------------------
   The markup groups two of the three pieces together:

       .card__information
          .card__main-info          <- flex row: name on the left, price right
             .card__heading
             .price
          .card__color-subtitle     <- sits OUTSIDE that group

   CSS "order" only reorders siblings, and the colour is not a sibling of the
   name and price. display:contents removes .card__main-info from the layout
   while keeping its children, so all three end up as siblings of one flex
   column and can be ordered in any sequence.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 space between the three caption lines */
    --m-card-info-gap: 2px;
  }

  /* 1. The caption becomes a single left aligned column */
  html body .collection.page-width ul#product-grid.product-grid .card__information {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: var(--m-card-info-gap) !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2. Dissolve the name+price wrapper so all three pieces become siblings.
        The :hover variants are included because touch screens latch hover,
        which would otherwise hide the whole caption after a tap. */
  html body .collection.page-width ul#product-grid.product-grid .card__main-info,
  html body .collection.page-width ul#product-grid.product-grid .card:hover .card__main-info,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper:hover .card__main-info,
  html body .collection.page-width ul#product-grid.product-grid .card__information:hover .card__main-info {
    display: contents !important;
  }

  /* the size row that normally replaces the caption on hover stays hidden,
     since there is no real hover on a phone */
  html body .collection.page-width ul#product-grid.product-grid .card__size-hover-container,
  html body .collection.page-width ul#product-grid.product-grid .card:hover .card__size-hover-container,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper:hover .card__size-hover-container {
    display: none !important;
  }

  /* 3. THE SEQUENCE - swap these numbers to reorder */
  html body .collection.page-width ul#product-grid.product-grid .card__heading {
    order: 1 !important;
  }

  html body .collection.page-width ul#product-grid.product-grid .card__color-subtitle {
    order: 2 !important;
  }

  html body .collection.page-width ul#product-grid.product-grid .price,
  html body .collection.page-width ul#product-grid.product-grid .price__container,
  html body .collection.page-width ul#product-grid.product-grid .card-information__wrapper .price {
    order: 3 !important;
  }

  /* 4. Each line is its own full width row, left aligned, no leftover
        margins from the old side by side layout */
  html body .collection.page-width ul#product-grid.product-grid .card__heading,
  html body .collection.page-width ul#product-grid.product-grid .card__heading a,
  html body .collection.page-width ul#product-grid.product-grid .card__color-subtitle,
  html body .collection.page-width ul#product-grid.product-grid .price,
  html body .collection.page-width ul#product-grid.product-grid .price__regular,
  html body .collection.page-width ul#product-grid.product-grid .price-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* the colour line must stay visible, base.css hides it on hover */
  html body .collection.page-width ul#product-grid.product-grid .card__color-subtitle,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper:hover .card__color-subtitle {
    display: block !important;
    opacity: 1 !important;
  }
}
/* ============================================================================
   MASHRU - CARD CAPTION ORDER   v3.2   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v3.1. Nothing needs deleting.

   WHAT WENT WRONG IN v3.1
   The price appeared first because the flex item is not .price itself, it is
   a wrapper AROUND the price. My "order: 3" landed on the inner element while
   the wrapper kept the default order of 0, so it sorted ahead of the name.

   THE FIX
   Section 1 collapses every likely wrapper inside the caption with
   display:contents. That removes the wrappers from the layout but keeps their
   contents, so the name, colour and price all become direct children of one
   flex column. The order numbers then apply to the real elements.

   ----------------------------------------------------------------------------
   TO RESEQUENCE LATER
   ----------------------------------------------------------------------------
   Change the numbers in section 2. Lowest goes on top.

       1 = product name
       2 = colour
       3 = price
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* 1. Collapse every wrapper between .card__information and the three
        pieces of text, so nothing can hold an order of its own. */
  html body .collection.page-width ul#product-grid.product-grid .card__information .card__main-info,
  html body .collection.page-width ul#product-grid.product-grid .card__information .card-information,
  html body .collection.page-width ul#product-grid.product-grid .card__information .card-information__wrapper,
  html body .collection.page-width ul#product-grid.product-grid .card__information .card-information__text,
  html body .collection.page-width ul#product-grid.product-grid .card__information .price__container,
  html body .collection.page-width ul#product-grid.product-grid .card__information .price__regular,
  html body .collection.page-width ul#product-grid.product-grid .card:hover .card__main-info,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper:hover .card__main-info {
    display: contents !important;
  }

  /* 2. THE SEQUENCE - swap these numbers to reorder */

  /* line 1, product name */
  html body .collection.page-width ul#product-grid.product-grid .card__information .card__heading {
    order: 1 !important;
  }

  /* line 2, colour */
  html body .collection.page-width ul#product-grid.product-grid .card__information .card__color-subtitle {
    order: 2 !important;
  }

  /* line 3, price. Both the price element and any remaining wrapper are
     given the same number, so whichever one is the flex item lands last. */
  html body .collection.page-width ul#product-grid.product-grid .card__information .price,
  html body .collection.page-width ul#product-grid.product-grid .card__information .price-item,
  html body .collection.page-width ul#product-grid.product-grid .card__information .price-item--regular {
    order: 3 !important;
  }

  /* 3. Each piece is its own full width line */
  html body .collection.page-width ul#product-grid.product-grid .card__information .card__heading,
  html body .collection.page-width ul#product-grid.product-grid .card__information .card__color-subtitle,
  html body .collection.page-width ul#product-grid.product-grid .card__information .price {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ============================================================================
   MASHRU - CARD CAPTION ORDER   v3.3   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v3.2. Nothing needs deleting.

   THE REAL MARKUP  (confirmed in devtools)

       div.card__information
          div.card__main-info            <- inline style: flex, gap 10px
             h3.card__heading.h5         <- inline style: flex: 1
             div.card__price-wrapper     <- THE PRICE LIVES IN HERE
                div.price
                   div.price__container
                      div.price__regular
                         span.price-item.price-item--regular
          div.card__color-subtitle       <- sibling of .card__main-info

   WHY v3.1 AND v3.2 PUT THE PRICE FIRST
   Both gave "order: 3" to .price, .price-item and similar. None of those is
   the flex item. Once .card__main-info was dissolved, the flex items were
   .card__heading, .card__price-wrapper and .card__color-subtitle. The price
   WRAPPER was never named, so it kept the default order of 0 and sorted ahead
   of the name. Naming it is the whole fix.

   ----------------------------------------------------------------------------
   TO RESEQUENCE LATER
   ----------------------------------------------------------------------------
   Only three elements carry an order number now. Lowest goes on top.

       .card__heading         product name
       .card__color-subtitle  colour
       .card__price-wrapper   price

   To put price second and colour third, swap those two numbers.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 space between the three caption lines */
    --m-card-info-gap: 2px;
  }

  /* 1. Caption is one left aligned column */
  html body .collection.page-width ul#product-grid.product-grid .card__information {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: var(--m-card-info-gap) !important;
    width: 100% !important;
  }

  /* 2. Dissolve the name+price row so its two children become flex items.
        !important is required because .card__main-info carries an inline
        style attribute. */
  html body .collection.page-width ul#product-grid.product-grid .card__main-info,
  html body .collection.page-width ul#product-grid.product-grid .card:hover .card__main-info,
  html body .collection.page-width ul#product-grid.product-grid .card-wrapper:hover .card__main-info {
    display: contents !important;
  }

  /* 3. THE SEQUENCE */
  html body .collection.page-width ul#product-grid.product-grid .card__heading {
    order: 1 !important;
  }

  html body .collection.page-width ul#product-grid.product-grid .card__color-subtitle {
    order: 2 !important;
  }

  html body .collection.page-width ul#product-grid.product-grid .card__price-wrapper {
    order: 3 !important;
  }

  /* 4. Each one is a full width line. The heading's inline "flex: 1" is
        overridden so it cannot stretch or share a row. */
  html body .collection.page-width ul#product-grid.product-grid .card__heading,
  html body .collection.page-width ul#product-grid.product-grid .card__color-subtitle,
  html body .collection.page-width ul#product-grid.product-grid .card__price-wrapper {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* the price sits flush left like the other two lines */
  html body .collection.page-width ul#product-grid.product-grid .card__price-wrapper .price,
  html body .collection.page-width ul#product-grid.product-grid .card__price-wrapper .price__container,
  html body .collection.page-width ul#product-grid.product-grid .card__price-wrapper .price__regular {
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .collection.page-width ul#product-grid.product-grid .card__price-wrapper .price-item {
    display: inline-block !important;
    margin: 0 !important;
  }
}
/* ============================================================================
   MASHRU - HOMEPAGE CARD CAPTION ORDER   v3.4   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v3.3.
   Homepage product rail only. The collection grid is handled by v3.3.
   Desktop and laptop are untouched.

   RESULT
       Bustier Petal Volume Dress   <- line 1, product name
       Olive                        <- line 2, colour
       Rs.8,000.00                  <- line 3, price

   THE MARKUP  (same as the collection card, confirmed in devtools)

       div.card__information
          div.card__main-info            <- inline style: flex, gap 10px
             h3.card__heading.h5         <- inline style: flex: 1
             div.card__price-wrapper     <- the price lives in here
          div.card__color-subtitle       <- sibling of .card__main-info

   WHY THE ORDER IS CURRENTLY NAME / PRICE / COLOUR
   The mobile rail block further up in base.css sets .card__main-info to
   flex-direction: column, which stacks the name above the price but keeps the
   colour outside that group, so it falls to the bottom. Dissolving the
   wrapper with display:contents makes all three siblings, which is what lets
   the colour move up between them.

   ----------------------------------------------------------------------------
   TO RESEQUENCE LATER
   ----------------------------------------------------------------------------
   Three elements carry an order number in section 3. Lowest goes on top.

       .card__heading         product name
       .card__color-subtitle  colour
       .card__price-wrapper   price
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 space between the three caption lines on the homepage rail */
    --m-rail-info-gap: 2px;
  }

  /* 1. Caption is one left aligned column */
  html body slider-component ul.product-grid .card__information {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: var(--m-rail-info-gap) !important;
    width: 100% !important;
  }

  /* 2. Dissolve the name+price wrapper so its children become flex items.
        !important is needed twice over here: .card__main-info carries an
        inline style attribute, and the rail block above already forces it to
        flex with !important. */
  html body slider-component ul.product-grid .card__main-info,
  html body slider-component ul.product-grid .card:hover .card__main-info,
  html body slider-component ul.product-grid .card-wrapper:hover .card__main-info,
  html body slider-component ul.product-grid .card__information:hover .card__main-info {
    display: contents !important;
  }

  /* 3. THE SEQUENCE */
  html body slider-component ul.product-grid .card__heading {
    order: 1 !important;
  }

  html body slider-component ul.product-grid .card__color-subtitle {
    order: 2 !important;
  }

  html body slider-component ul.product-grid .card__price-wrapper {
    order: 3 !important;
  }

  /* 4. Each piece is a full width line. The heading's inline "flex: 1" is
        overridden so it cannot stretch or share a row. */
  html body slider-component ul.product-grid .card__heading,
  html body slider-component ul.product-grid .card__color-subtitle,
  html body slider-component ul.product-grid .card__price-wrapper {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 5. Price flush left like the other two lines */
  html body slider-component ul.product-grid .card__price-wrapper .price,
  html body slider-component ul.product-grid .card__price-wrapper .price__container,
  html body slider-component ul.product-grid .card__price-wrapper .price__regular {
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body slider-component ul.product-grid .card__price-wrapper .price-item {
    display: inline-block !important;
    margin: 0 !important;
  }

  /* 6. The colour line must stay visible. base.css hides it on hover, and
        touch screens latch hover after a tap. */
  html body slider-component ul.product-grid .card__color-subtitle,
  html body slider-component ul.product-grid .card-wrapper:hover .card__color-subtitle,
  html body slider-component ul.product-grid .card:hover .card__color-subtitle {
    display: block !important;
    opacity: 1 !important;
  }
}
/* ============================================================================
   MASHRU - PRODUCT PAGE GALLERY   v3.5   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v3.4.
   Product detail pages only. Desktop and laptop are untouched.

   THE MARKUP  (confirmed in devtools)

       slider-component.slider-mobile-gutter
          ul.product__media-list.grid.grid--peek.slider.slider--mobile
             li.product__media-item.grid__item.slider__slide
                div.product-media-container.media-fit-contain.constrain-height
                   modal-opener.product__modal-opener
                      div.product__media.media

   Three things were making the image small and inset:
     1. .slider-mobile-gutter adds a left margin
     2. grid--peek sizes each slide at "100% minus 3rem" so the next image
        peeks in from the side, which is why it never filled the width
     3. media-fit-contain letterboxes the photo inside its box

   ----------------------------------------------------------------------------
   THE THREE KNOBS
   ----------------------------------------------------------------------------

   --m-pdp-img-height : 650px
       Height of the product image.
       Bigger number = taller image. Try 600px or 640px for a fuller screen.

   --m-pdp-top-pull : 90px
       How far the image is pulled UP toward the header.
       Bigger number = image moves up, less white space above it.
       Smaller number = more space above the image.
       If the image slides UNDER the header and gets hidden, this is too big.

   --m-pdp-img-fit : cover
       cover   = photo fills the full width, cropped top and bottom
       contain = whole photo visible, with space at the sides
       Set it to contain if cover crops too much off the model.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 THE THREE KNOBS */
    --m-pdp-img-height: 650px;
    --m-pdp-top-pull: 90px;
    --m-pdp-img-fit: cover;
  }

  /* 1. FULL WIDTH - the rail breaks out of any padding on its parents.
        width:100vw with the negative margin trick means it spans the whole
        screen no matter what padding sits above it. */
  html body slider-component.slider-mobile-gutter,
  html body .product__media-wrapper slider-component,
  html body .product__media-list {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* pull the whole gallery up toward the header */
  html body .product__media-wrapper slider-component,
  html body .product__media-wrapper {
    margin-top: calc(var(--m-pdp-top-pull) * -1) !important;
    padding-top: 0 !important;
  }

  /* 2. EACH SLIDE IS A FULL SCREEN WIDTH - cancels the grid--peek sizing
        and the first-slide left margin that created the inset */
  html body .product__media-list > .grid__item,
  html body .product__media-list > .product__media-item,
  html body .product__media-list > .slider__slide,
  html body .product__media-list .grid__item:first-of-type {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    flex: 0 0 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. THE HEIGHT KNOB lands on the media box, and every layer inside
        stretches to fill it */
  html body .product__media-list .product-media-container,
  html body .product__media-list .product-media-container.constrain-height,
  html body .product__media-list .product__modal-opener,
  html body .product__media-list .product__media,
  html body .product__media-list .product__media.media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--m-pdp-img-height) !important;
    min-height: 0 !important;
    max-height: var(--m-pdp-img-height) !important;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  /* the theme's contained-width variable would otherwise narrow the box */
  html body .product__media-list .constrain-height {
    --contained-width: 100% !important;
  }

  /* 4. THE PHOTO fills the box. media-fit-contain is overridden by the
        --m-pdp-img-fit knob. */
  html body .product__media-list .product__media img,
  html body .product__media-list .media img,
  html body .product__media-list .product-media-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: var(--m-pdp-img-fit) !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 5. Keep the zoom button and arrows sitting over the image */
  html body .product__media-list .product__media-icon,
  html body .product__media-list .product__media-toggle {
    z-index: 3 !important;
  }
}
/* ============================================================================
   MASHRU - PRODUCT TABS ON ONE LINE   v3.6   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v3.5.
   Product detail pages only. Desktop and laptop are untouched.

   RESULT
       Description   Details   Fabric & Care
       ‾‾‾‾‾‾‾‾‾‾‾
       all three on one row, active tab underlined like the desktop view

   THE MARKUP  (confirmed in devtools)

       div.product-tabs
          ul.tab-titles
             li.tab-title.active[data-tab="tab-description"]  Description
             li.tab-title[data-tab="tab-details"]             Details
             li.tab-title[data-tab="tab-materials"]           Fabric & Care
          div.tab-contents

   WHY THEY WERE STACKING
   The template's inline <style> makes ul.tab-titles a flex row, but only
   inside a min-width media query. Below that width the <li> items fall back
   to normal block behaviour, so each one takes a full line. Forcing the row
   on mobile is the fix. The active underline comes from the ::after that the
   desktop styles already use, recreated here.

   ----------------------------------------------------------------------------
   THE KNOBS
   ----------------------------------------------------------------------------
   --m-tab-gap            : 20px   space between the three tabs
   --m-tab-font-size      : 10px   tab text size
   --m-tab-underline-gap  : 6px    space between the text and its underline
   --m-tab-underline      : 1px    thickness of the underline
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-tab-gap: 20px;
    --m-tab-font-size: 10px;
    --m-tab-underline-gap: 6px;
    --m-tab-underline: 1px;
  }

  /* 1. The row */
  html body .product-tabs .tab-titles,
  html body .product-tabs ul.tab-titles {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: var(--m-tab-gap) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: none !important;
  }

  /* 2. Each tab shrinks to its text and stays on one line */
  html body .product-tabs .tab-titles li,
  html body .product-tabs .tab-titles li.tab-title {
    display: inline-block !important;
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 0 var(--m-tab-underline-gap) 0 !important;
    white-space: nowrap !important;
    font-size: var(--m-tab-font-size) !important;
    line-height: 1.2 !important;
    list-style: none !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* 3. Active tab, matching the desktop treatment */
  html body .product-tabs .tab-titles li.tab-title.active,
  html body .product-tabs .tab-titles li.active {
    color: #000000 !important;
    font-weight: 400 !important;
  }

  html body .product-tabs .tab-titles li.tab-title.active::after,
  html body .product-tabs .tab-titles li.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: var(--m-tab-underline) !important;
    background-color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 4. Inactive tabs carry no underline */
  html body .product-tabs .tab-titles li.tab-title:not(.active)::after {
    display: none !important;
    content: none !important;
  }

  /* 5. Body copy sits below the row with a little breathing space */
  html body .product-tabs .tab-contents {
    width: 100% !important;
    margin-top: 0 !important;
  }
}
/* ============================================================================
   MASHRU - SWATCH SPACING + ACTIVE SIZE   v3.7   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v3.6.
   Product detail pages only. Desktop and laptop are untouched.

   TWO CHANGES
   1. The gap between the colour swatch and the size row now matches the gap
      between the product name and the price.
   2. The selected size is bold and black with an underline, the same
      treatment the desktop view already uses.

   THE MARKUP  (confirmed in devtools)

       variant-selects
          fieldset.product-form__input.product-form__input--swatch   <- colour
          fieldset.product-form__input.product-form__input--pill     <- sizes
             input[type=radio] + label   (one pair per size)

   WHY THE ACTIVE SIZE LOOKED DIFFERENT ON MOBILE
   base.css styles the checked label grey (#757575) for all screens, and only
   turns it bold black inside a min-width: 750px query. So the desktop got the
   highlight and the phone did not. The same two properties are applied here
   for mobile.

   ----------------------------------------------------------------------------
   THE KNOBS
   ----------------------------------------------------------------------------
   --m-swatch-to-size-gap : 15px
       Vertical space between the colour swatch and the size row.
       Bigger number = more space. Set it to match the name/price gap exactly
       if 15px looks slightly off on your device.

   --m-size-active-weight : 800
       How bold the selected size is. 400 is normal, 800 is heavy.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-swatch-to-size-gap: 15px;
    --m-size-active-weight: 800;
  }

  /* 1. SPACING - the colour block controls the gap, the size block adds none */
  html body variant-selects .product-form__input--swatch {
    margin-top: 0 !important;
    margin-bottom: var(--m-swatch-to-size-gap) !important;
  }

  html body variant-selects .product-form__input--pill {
    margin-top: 0 !important;
  }

  /* 2. SELECTED SIZE - bold, black, underlined, matching desktop */
  html body .product-form__input--pill input[type='radio']:checked + label {
    color: #000000 !important;
    font-weight: var(--m-size-active-weight) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    background-color: #ffffff !important;
    border: 0 !important;
  }

  /* 3. UNSELECTED SIZES - unchanged behaviour, listed so the selected one
        always wins regardless of source order */
  html body .product-form__input--pill input[type='radio']:not(:checked) + label {
    font-weight: 400 !important;
    text-decoration: none !important;
  }

  /* 4. SOLD OUT / UNAVAILABLE SIZES stay greyed, as on desktop */
  html body .product-form__input--pill input[type='radio']:disabled + label,
  html body .product-form__input--pill input[type='radio'].disabled + label {
    color: #757575 !important;
    font-weight: 400 !important;
  }
}


/* ----------------------------------------------------------------------------
   OPTIONAL - MAKE THE UNSELECTED SIZES BLACK TOO

   Desktop shows every size in black and marks the selected one by weight and
   underline. Mobile currently shows the unselected ones in grey. If you want
   mobile to match desktop completely, delete the two comment markers around
   the block below.

@media screen and (max-width: 749px) {
  html body .product-form__input--pill input[type='radio']:not(:checked) + label {
    color: #000000 !important;
  }
}

   ---------------------------------------------------------------------------- */
   /* ============================================================================
   MASHRU - NAME TO PRICE SPACING   v3.8   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v3.7.
   Product detail pages only. Desktop and laptop are untouched.

   WHERE 28px COMES FROM
   The price-to-colour gap is not one value, it is two margins stacking:

       .price-template--...__main   margin-bottom: 14px
       variant-selects              margin-top:    14px
                                    ------------------
                                    total           28px

   So 28px above the price gives the name-to-price gap the same measurement.

   ----------------------------------------------------------------------------
   THE KNOB
   ----------------------------------------------------------------------------
   --m-name-to-price-gap : 28px
       Space between the product name and the price.
       Bigger number = more space.

       If you later change the price-to-colour gap, keep the two matched by
       editing this to the same total.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 THE ONLY NUMBER TO EDIT */
    --m-name-to-price-gap: 12px !important;
  }

  /* the title contributes nothing, so the gap is set in one place only */
  html body .product__info-container .product__title {
    margin-bottom: 0 !important;
  }

  /* the knob applies here. The attribute selector is used instead of the
     full id so this keeps working if the theme is republished and the
     template id changes. */
  html body .product__info-container [id^='price-template--'] {
    margin-top: var(--m-name-to-price-gap) !important;
  }
}
/* ============================================================================
   MASHRU - NAME TO PRICE SPACING   v3.9   (max-width: 749px ONLY)

   REPLACES v3.8, which had no effect. Paste at the VERY END of base.css.
   You can leave v3.8 in place, this overrides it.

   WHY v3.8 DID NOTHING
   It set margin-top on the price element. But base.css already contains

       #price-template--25904881434935__main { margin-top: 0px !important; }

   That is an ID selector. An ID outranks any combination of classes and
   attribute selectors, so it wins on specificity regardless of which rule
   comes later in the file. Both were !important, so the 0px held.

   THE FIX
   The gap is applied as margin-bottom on .product__title instead. That
   element is styled by a plain class rule (.product__title), which this
   selector does outrank, so the knob takes effect.

   ----------------------------------------------------------------------------
   THE KNOB
   ----------------------------------------------------------------------------
   --m-name-to-price-gap : 28px
       Space between the product name and the price.
       Bigger number = more space.

       28px matches the price-to-colour gap, which is itself two stacking
       margins: 14px below the price plus 14px above variant-selects.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 THE ONLY NUMBER TO EDIT */
    --m-name-to-price-gap: 7px;
  }

  /* the gap lives here, on the title, because the price element is locked
     by an ID rule further up the file */
  html body .product__info-container .product__title,
  html body .product__info-container div.product__title {
    margin-top: 0 !important;
    margin-bottom: var(--m-name-to-price-gap) !important;
  }
}
/* ============================================================================
   MASHRU - SIZE GUIDE + GALLERY ARROWS   v4.0   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v3.9.
   Product detail pages only. Desktop and laptop are untouched.

   TWO CHANGES
   1. "Size Guide" drops onto its own line below the sizes instead of sitting
      to their right.
   2. The faint arrows over the product photo are removed.

   THE MARKUP  (confirmed in devtools)

       fieldset.product-form__input--pill        <- flex row, wraps
          input[type=radio] + label              <- one pair per size
          div.size-guide-inline-wrapper
             button.size-guide-trigger-btn       <- "Size Guide"

   WHY SIZE GUIDE WAS ON THE RIGHT
   .size-guide-inline-wrapper has margin-left: auto, which pushes it to the
   far end of the flex row. Setting the wrapper to full width makes the row
   wrap, and clearing the auto margin lets it sit at the left.

   WHY ARROWS APPEARED OVER THE PHOTO
   The mobile carousel block further up base.css draws arrow glyphs with

       slider-component .slider-button--prev::before { content: "←" }

   That selector is not scoped to the homepage, so it also applied to the
   product gallery, which is another slider-component. They are hidden here
   for the gallery only, so the homepage rail arrows still work.

   ----------------------------------------------------------------------------
   THE KNOB
   ----------------------------------------------------------------------------
   --m-size-guide-gap : 14px
       Space between the size row and the Size Guide link below it.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    /* 👇 space above the Size Guide link */
    --m-size-guide-gap: 14px;
  }

  /* 1. SIZE GUIDE ON ITS OWN LINE, LEFT ALIGNED */
  html body .product-form__input--pill .size-guide-inline-wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: var(--m-size-guide-gap) !important;
    justify-content: flex-start !important;
    order: 99 !important;
  }

  html body .product-form__input--pill .size-guide-trigger-btn {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  /* 2. NO ARROWS OVER THE PRODUCT PHOTO */
  html body .product__media-wrapper .slider-buttons,
  html body .product__media-wrapper .slider-button,
  html body .product__media-wrapper .slider-counter,
  html body media-gallery .slider-buttons,
  html body media-gallery .slider-button,
  html body media-gallery .slider-counter,
  html body slider-component[id^='GalleryViewer'] .slider-buttons,
  html body slider-component[id^='GalleryViewer'] .slider-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  /* the glyphs are drawn on ::before, so those are cleared too */
  html body .product__media-wrapper .slider-button::before,
  html body media-gallery .slider-button::before,
  html body slider-component[id^='GalleryViewer'] .slider-button::before {
    content: none !important;
    display: none !important;
  }
}


/* ----------------------------------------------------------------------------
   OPTIONAL - PUT SIZE GUIDE ON THE RIGHT OF ITS OWN LINE

   The block above left aligns it under the sizes. If you would rather it sat
   at the right edge, still on its own line, delete the two comment markers.

@media screen and (max-width: 749px) {
  html body .product-form__input--pill .size-guide-inline-wrapper {
    justify-content: flex-end !important;
  }
}

   ---------------------------------------------------------------------------- */
   /* ============================================================================
   MASHRU - HOMEPAGE CARD HOVER LEAK   v4.1   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v4.0. Nothing needs deleting.
   Homepage product rail only. Desktop and laptop are untouched.

   WHAT IT FIXES
   1. "OLIVE" appearing above the product name on the first card.
   2. "XXS XS S M L XL" appearing above the product name on the second card.

   Both are the same element, .card__size-hover-container, which base.css
   opens on hover so the shopper can quick-add a size from the grid.

   WHY THE EXISTING RULE DID NOT HOLD
   The mobile carousel block already contains

       html body slider-component ul.product-grid .card__size-hover-container
       { display: none !important; }

   That is 2 classes + 4 elements. base.css higher up has

       .card:hover .card__size-hover-container { display: flex !important; }

   which is 3 classes. CSS compares the class column before the element
   column, so 3 classes beats 2 classes + 4 elements and base.css wins.
   Being later in the file makes no difference, and neither does !important,
   since both rules carry it.

   A phone has no real hover, but a tap latches the :hover state, so the panel
   opened on touch. It also carries no order value, so it defaulted to order 0
   and sorted above the name (1), colour (2) and price (3) set in v3.4.

   THE FIX
   Every hover, active and focus-within variant is named, so the hiding rule
   now out-scores base.css in the states that were leaking. The collection
   grid already does this in v3.1, which is why only the homepage was wrong.

   ----------------------------------------------------------------------------
   TO BRING THE QUICK-ADD PANEL BACK ON THE HOMEPAGE
   ----------------------------------------------------------------------------
   Delete section 1 only. Sections 2 and 3 keep the caption in the right
   order regardless, so they should stay.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* 1. THE QUICK-ADD PANEL NEVER OPENS ON THE HOMEPAGE RAIL ---------------- */
  html body slider-component ul.product-grid .card__size-hover-container,
  html body slider-component ul.product-grid .card:hover .card__size-hover-container,
  html body slider-component ul.product-grid .card:active .card__size-hover-container,
  html body slider-component ul.product-grid .card:focus-within .card__size-hover-container,
  html body slider-component ul.product-grid .card-wrapper:hover .card__size-hover-container,
  html body slider-component ul.product-grid .card-wrapper:active .card__size-hover-container,
  html body slider-component ul.product-grid .card-wrapper:focus-within .card__size-hover-container,
  html body slider-component ul.product-grid .card__information:hover .card__size-hover-container,
  html body slider-component ul.product-grid .card__information:active .card__size-hover-container,
  html body slider-component ul.product-grid .card__information:focus-within .card__size-hover-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  /* 2. NAME AND PRICE STAY VISIBLE IN EVERY STATE -------------------------
        base.css hides .card__main-info on hover. display:contents keeps its
        two children in the flex column so the v3.4 order numbers still apply. */
  html body slider-component ul.product-grid .card__main-info,
  html body slider-component ul.product-grid .card:hover .card__main-info,
  html body slider-component ul.product-grid .card:active .card__main-info,
  html body slider-component ul.product-grid .card:focus-within .card__main-info,
  html body slider-component ul.product-grid .card-wrapper:hover .card__main-info,
  html body slider-component ul.product-grid .card-wrapper:active .card__main-info,
  html body slider-component ul.product-grid .card-wrapper:focus-within .card__main-info,
  html body slider-component ul.product-grid .card__information:hover .card__main-info,
  html body slider-component ul.product-grid .card__information:focus-within .card__main-info {
    display: contents !important;
  }

  /* 3. COLOUR LINE STAYS VISIBLE IN EVERY STATE ---------------------------
        base.css fades and hides .card__color-subtitle on hover. */
  html body slider-component ul.product-grid .card__color-subtitle,
  html body slider-component ul.product-grid .card:hover .card__color-subtitle,
  html body slider-component ul.product-grid .card:active .card__color-subtitle,
  html body slider-component ul.product-grid .card:focus-within .card__color-subtitle,
  html body slider-component ul.product-grid .card-wrapper:hover .card__color-subtitle,
  html body slider-component ul.product-grid .card-wrapper:active .card__color-subtitle,
  html body slider-component ul.product-grid .card-wrapper:focus-within .card__color-subtitle,
  html body slider-component ul.product-grid .card__information:hover .card__color-subtitle,
  html body slider-component ul.product-grid .card__information:focus-within .card__color-subtitle {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    order: 2 !important;
  }
}
/* ============================================================================
   MASHRU - VIEW BAG PAGE LAYOUT   v4.2   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v4.1. Nothing needs deleting.
   Cart page (/cart) only. The cart drawer, desktop and laptop are untouched.

   TARGET LAYOUT (from the reference)

       [image]   Product Name
                 Rs.8,000.00

                 Size: XXS
                 Color: Olive

                 -  Quantity: 1  +

                 Remove
       -------------------------------------------------

   WHAT WAS WRONG AND WHY

   1. HUGE VERTICAL GAPS
      base.css has two unscoped rules written for the desktop cart:
          .cart-item__quantity      { padding-top: 14rem !important; }
          .cart-item__price-wrapper { padding-top: 11rem !important; }
      140px and 110px of padding on a phone, which is the empty space you can
      see between the options and the quantity control.

   2. QUANTITY FLOATING IN THE WRONG PLACE
      The older mobile block tried to cancel that with
          .cart-item__quantity { margin-top: -45%; }
      A percentage margin resolves against the container WIDTH, not the
      padding it was meant to undo, so the control lands somewhere different
      on every screen size.

   3. NO PRICE UNDER THE NAME
      The same older block contains
          .cart-items td.cart-item__totals { display: none !important; }
      Dawn outputs two totals cells, one for small screens and one for large.
      That rule hides both, so mobile lost the price completely.

   4. "Product Total" AND THE STRAY SHORT LINE
      That is the table <thead>, still rendering. The reference has no column
      headers, and the short rule underneath is the <th> bottom border.

   THE APPROACH
   The row becomes a two column grid. The image sits in column 1 and spans the
   full height. Everything else is placed in column 2 and stacked with order
   numbers. .cart-item__details is set to display:contents so the name and the
   options list become grid items themselves, which is what allows the price
   to sit between them rather than after them.

   ----------------------------------------------------------------------------
   THE KNOBS - all at the top of the block, change values there only
   ----------------------------------------------------------------------------
   --m-cart-gutter      20px   space from the screen edge to the image
   --m-cart-img-w      100px   image width, height follows the 2:3 ratio
   --m-cart-col-gap     24px   space between the image and the text column
   --m-cart-line-gap     4px   space between the Size line and the Color line
   --m-cart-block-gap   18px   space between name/price, options, quantity, Remove
   --m-cart-item-gap    32px   space above and below the divider between items
   --m-cart-title-gap   28px   space under the "Bag" heading
   --m-cart-font        12px   name and price size
   --m-cart-meta-font   12px   Size, Color, quantity and Remove size
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-cart-gutter: 20px;
    --m-cart-img-w: 100px;
    --m-cart-col-gap: 24px;
    --m-cart-line-gap: 4px;
    --m-cart-block-gap: 18px;
    --m-cart-item-gap: 32px;
    --m-cart-title-gap: 28px;
    --m-cart-font: 12px;
    --m-cart-meta-font: 12px;
  }


  /* ==========================================================================
     1. PAGE HEAD - drop the column headers, tighten the space under "Bag"
     ========================================================================== */

  html body #cart .cart-items thead,
  html body #cart .cart-items thead tr,
  html body #cart .cart-items thead th,
  html body #cart .cart-items caption {
    display: none !important;
  }

  html body #cart .title-wrapper-with-link .title,
  html body #cart .title-wrapper-with-link .title--primary,
  html body #main-cart-items ~ * .title--primary {
    margin-top: 0 !important;
    margin-bottom: var(--m-cart-title-gap) !important;
  }

  /* one gutter for the whole page, applied once */
  html body #cart cart-items,
  html body #cart .cart__footer,
  html body cart-items,
  html body .cart__footer {
    padding-left: var(--m-cart-gutter) !important;
    padding-right: var(--m-cart-gutter) !important;
    box-sizing: border-box !important;
  }

  /* the table itself must not add a second inset */
  html body #cart .cart-items,
  html body #cart .cart-items tbody,
  html body #cart .cart-items table {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
  }


  /* ==========================================================================
     2. THE ROW - two column grid, image left, everything else stacked right
     ========================================================================== */

  html body #cart .cart-items tr.cart-item,
  html body #cart tr.cart-item {
    display: grid !important;
    grid-template-columns: var(--m-cart-img-w) minmax(0, 1fr) !important;
    grid-auto-rows: min-content !important;
    column-gap: var(--m-cart-col-gap) !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: start !important;
    text-align: left !important;
    width: 100% !important;
    margin: 0 0 var(--m-cart-item-gap) 0 !important;
    padding: 0 0 var(--m-cart-item-gap) 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
  }

  /* IMAGE - column 1, spans the whole row height */
  html body #cart .cart-item > td.cart-item__media {
    grid-column: 1 !important;
    grid-row: 1 / span 30 !important;
    display: block !important;
    width: var(--m-cart-img-w) !important;
    max-width: var(--m-cart-img-w) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  html body #cart .cart-item .cart-item__image-container,
  html body #cart .cart-item .cart-item__image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* DETAILS CELL dissolves so its children become grid items in their own
     right. Without this the price can only ever sit after the options. */
  html body #cart .cart-item > td.cart-item__details {
    display: contents !important;
  }


  /* ==========================================================================
     3. THE STACK IN COLUMN 2 - swap the order numbers to resequence
     ========================================================================== */

  /* order 1 - PRODUCT NAME */
  html body #cart .cart-item .cart-item__name {
    grid-column: 2 !important;
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    font-size: var(--m-cart-font) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    text-decoration: none !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* order 2 - PRICE
     This is Dawn's small screen totals cell. The large screen one stays
     hidden by its own .small-hide class. */
  html body #cart .cart-item > td.cart-item__totals.large-up-hide,
  html body #cart .cart-item > td.cart-item__totals.medium-hide {
    grid-column: 2 !important;
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 0 var(--m-cart-block-gap) 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  html body #cart .cart-item > td.cart-item__totals.small-hide {
    display: none !important;
  }

  /* the 11rem desktop padding is cancelled here */
  html body #cart .cart-item .cart-item__price-wrapper,
  html body #cart .cart-item .cart-item__discounted-prices,
  html body #cart .cart-item .cart-item__price-wrapper .price,
  html body #cart .cart-item .cart-item__price-wrapper .price__container {
    display: block !important;
    text-align: left !important;
    font-size: var(--m-cart-font) !important;
    font-weight: 400 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* order 3 - SIZE AND COLOR */
  html body #cart .cart-item .cart-item__details > dl,
  html body #cart .cart-item dl {
    grid-column: 2 !important;
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 var(--m-cart-block-gap) 0 !important;
    padding: 0 !important;
  }

  /* label and value on ONE line, which they were not before */
  html body #cart .cart-item .product-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 0 var(--m-cart-line-gap) 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body #cart .cart-item .product-option:last-child {
    margin-bottom: 0 !important;
  }

  html body #cart .cart-item .product-option dt,
  html body #cart .cart-item .product-option dd,
  html body #cart .cart-item .product-option span {
    display: inline !important;
    font-size: var(--m-cart-meta-font) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
  }

  /* order 4 - QUANTITY AND REMOVE
     The 14rem desktop padding and the -45% margin are both cancelled here. */
  html body #cart .cart-item > td.cart-item__quantity {
    grid-column: 2 !important;
    order: 4 !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  html body #cart .cart-item .cart-item__quantity-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: var(--m-cart-block-gap) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #cart .cart-item quantity-popover,
  html body #cart .cart-item .quantity-popover-container {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }


  /* ==========================================================================
     4. THE QUANTITY CONTROL - "-  Quantity: 1  +"
     ========================================================================== */

  html body #cart .cart-item .quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  /* the theme draws a box around the control with these two pseudo elements */
  html body #cart .cart-item .quantity::after,
  html body #cart .cart-item .quantity-popover-container::after,
  html body #cart .cart-item .quantity-popover-container::before {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
  }

  /* THE LABEL. Pseudo elements are flex items, so order places it between
     the minus button and the number, exactly as in the reference.
     TO REMOVE THE WORD "Quantity:", delete this one rule. */
  html body #cart .cart-item .quantity::before {
    content: "Quantity:" !important;
    order: 2 !important;
    display: block !important;
    font-size: var(--m-cart-meta-font) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #000000 !important;
    white-space: nowrap !important;
  }

  html body #cart .cart-item .quantity__button:first-of-type {
    order: 1 !important;
  }

  html body #cart .cart-item .quantity__input {
    order: 3 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body #cart .cart-item .quantity__button:last-of-type {
    order: 4 !important;
  }

  html body #cart .cart-item .quantity__button,
  html body #cart .cart-item .quantity__input {
    font-size: var(--m-cart-meta-font) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #000000 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body #cart .cart-item .quantity__button {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 2px !important;
  }


  /* ==========================================================================
     5. REMOVE - plain text, left aligned, directly under the quantity
        Cancels the global -5rem left margin and 62% top margin, which were
        written for the cart drawer.
     ========================================================================== */

  html body #cart .cart-item cart-remove-button {
    position: static !important;
    display: block !important;
    align-self: flex-start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
  }

  html body #cart .cart-item cart-remove-button .button {
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html body #cart .cart-item cart-remove-button .button::after {
    content: "Remove" !important;
    position: static !important;
    display: inline-block !important;
    font-size: var(--m-cart-meta-font) !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    text-decoration: none !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  html body #cart .cart-item cart-remove-button .button::before {
    content: none !important;
    display: none !important;
  }

  html body #cart .cart-item cart-remove-button .button:hover::after {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }


  /* ==========================================================================
     6. FOOTER - divider, right aligned total, shipping note
     ========================================================================== */

  html body #cart .cart__footer {
    padding-top: var(--m-cart-item-gap) !important;
  }

  html body #cart .totals {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
  }

  html body #cart .totals__total,
  html body #cart .totals__total-value {
    font-size: var(--m-cart-meta-font) !important;
    font-weight: 400 !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body #cart .cart__shipping-text,
  html body #cart .cart__blocks .tax-note {
    display: block !important;
    text-align: center !important;
    font-size: var(--m-cart-meta-font) !important;
    color: #000000 !important;
    margin: 0 0 var(--m-cart-block-gap) 0 !important;
  }
}


/* ----------------------------------------------------------------------------
   OPTIONAL - REMOVE THE DIVIDER UNDER THE LAST ITEM

   The reference draws a rule between items and another under the last one
   before the total. If you would rather the last item had no line, delete the
   two comment markers below.

@media screen and (max-width: 749px) {
  html body #cart .cart-items tr.cart-item:last-child {
    border-bottom: none !important;
  }
}

   ---------------------------------------------------------------------------- */
   /* ============================================================================
   MASHRU - VIEW BAG PAGE CORRECTIONS   v4.3   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v4.2. Do NOT delete v4.2, this
   corrects it. Cart page (/cart) only. Drawer, desktop and laptop untouched.

   WHAT v4.2 GOT RIGHT
   The two column grid, the image column and the price sitting directly under
   the product name are all working and are left alone here.

   WHAT WAS STILL WRONG AND WHY

   1. "Quantity:" PRINTED ON TOP OF THE NUMBER
      base.css uses .quantity:before as an absolutely positioned box that
      paints the input background:
          .quantity:before { position: absolute; top:0; right:0;
                             bottom:0; left:0; z-index:-1; }
      v4.2 replaced its content with the word "Quantity:" but left the
      positioning alone, so the label was stretched across the whole control
      instead of sitting between the minus button and the number.

   2. THE "+" PUSHED TO THE FAR RIGHT
      base.css has .quantity__input { width: 100%; flex-grow: 1; }
      v4.2 set width:auto, but auto on a number input means its default
      intrinsic width, roughly 20 characters. The input stayed wide and shoved
      the plus button to the edge. It needs an explicit narrow width.

   3. "Size:" AND ITS VALUE SPLIT INTO TWO COLUMNS
      A <dd> carries a browser default margin-inline-start of 40px. v4.2
      cleared "margin", but margin-inline-start is a logical property and is
      applied after it, so the 40px survived and the theme's own width rule
      widened the gap further.

   4. THE 100px GAP UNDER "Bag", AND THE FOOTER TOTALS
      In Dawn the <h1 class="title"> and the whole .cart__footer sit OUTSIDE
      <form id="cart">. Every v4.2 rule written as "#cart .title..." or
      "#cart .totals..." therefore matched nothing. The 6rem title margin from
      base.css was never overridden. Those rules are rewritten here without
      the #cart prefix, scoped with :has() so no other page is affected.

   5. DIVIDERS BETWEEN ITEMS
      The reference has no rule between products, only one above the total.
      v4.2 drew one after every item. Corrected below.

   ----------------------------------------------------------------------------
   THE KNOBS
   ----------------------------------------------------------------------------
   --m-cart-gutter        23px   screen edge to the image
   --m-cart-title-gap     36px   space under the "Bag" heading
   --m-cart-block-gap     16px   name/price to options, options to quantity
   --m-cart-remove-gap    24px   quantity to Remove
   --m-cart-item-gap      52px   space between one product and the next
   --m-cart-qty-input-w   18px   width of the quantity number
   --m-cart-footer-gap    30px   space above and below the footer divider
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-cart-gutter: 23px;
    --m-cart-title-gap: 36px;
    --m-cart-block-gap: 16px;
    --m-cart-remove-gap: 24px;
    --m-cart-item-gap: 52px;
    --m-cart-qty-input-w: 18px;
    --m-cart-footer-gap: 30px;
  }


  /* ==========================================================================
     1. TITLE GAP
        Written without #cart, because the heading is a sibling of the form,
        not a descendant. :has() keeps it to the cart page only.
     ========================================================================== */

  html body .page-width:has(form#cart) .title-wrapper-with-link,
  html body .page-width:has(form#cart) .title-wrapper {
    margin: 0 !important;
    padding-top: 0 !important;
  }

  html body .page-width:has(form#cart) .title-wrapper-with-link .title,
  html body .page-width:has(form#cart) .title,
  html body .page-width:has(form#cart) .title--primary {
    margin-top: 0 !important;
    margin-bottom: var(--m-cart-title-gap) !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     2. ONE GUTTER, APPLIED ONCE
        .page-width already adds 1.5rem on mobile. v4.2 added 20px on top of
        it, which is why the image sat further in than the reference.
     ========================================================================== */

  html body cart-items,
  html body #cart cart-items,
  html body .cart__footer,
  html body .cart__blocks {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .page-width:has(form#cart),
  html body .page-width:has(.cart__footer) {
    padding-left: var(--m-cart-gutter) !important;
    padding-right: var(--m-cart-gutter) !important;
    box-sizing: border-box !important;
  }


  /* ==========================================================================
     3. SIZE AND COLOR ON ONE LINE
        margin-inline-start is the property that has to be cleared, not margin.
        The selectors also catch dt/dd directly under .cart-item__details in
        case a product renders without the .product-option wrapper.
     ========================================================================== */

  html body #cart .cart-item .cart-item__details dl {
    display: block !important;
    width: 100% !important;
    margin: 0 0 var(--m-cart-block-gap) 0 !important;
    padding: 0 !important;
  }

  html body #cart .cart-item .product-option,
  html body #cart .cart-item .cart-item__details dl > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body #cart .cart-item .product-option dt,
  html body #cart .cart-item .product-option dd,
  html body #cart .cart-item .cart-item__details dt,
  html body #cart .cart-item .cart-item__details dd {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  /* long values such as "Green / Brown" may wrap, so only the label is locked */
  html body #cart .cart-item .product-option dd,
  html body #cart .cart-item .cart-item__details dd {
    white-space: normal !important;
  }


  /* ==========================================================================
     4. THE QUANTITY CONTROL - "-  Quantity: 1  +"
     ========================================================================== */

  /* THE FIX FOR THE OVERLAP. The theme's background box is returned to the
     normal flow so the label becomes an ordinary flex item. */
  html body #cart .cart-item .quantity::before {
    content: "Quantity:" !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    order: 2 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    pointer-events: auto !important;
    font-size: var(--m-cart-meta-font, 12px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #000000 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* THE FIX FOR THE STRETCHED INPUT. An explicit width, and flex-grow off. */
  html body #cart .cart-item .quantity__input,
  html body #cart .cart-item input.quantity__input {
    order: 3 !important;
    width: var(--m-cart-qty-input-w) !important;
    min-width: var(--m-cart-qty-input-w) !important;
    max-width: var(--m-cart-qty-input-w) !important;
    flex: 0 0 var(--m-cart-qty-input-w) !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  html body #cart .cart-item .quantity {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #cart .cart-item .quantity::after {
    content: none !important;
    display: none !important;
  }

  html body #cart .cart-item .quantity__button:first-of-type {
    order: 1 !important;
  }

  html body #cart .cart-item .quantity__button:last-of-type {
    order: 4 !important;
  }

  html body #cart .cart-item .quantity__button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #000000 !important;
  }

  html body #cart .cart-item .quantity__button .svg-wrapper,
  html body #cart .cart-item .quantity__button svg {
    width: 10px !important;
    height: 10px !important;
  }


  /* ==========================================================================
     5. VERTICAL RHYTHM AND DIVIDERS
        The reference has no rule between products, only one above the total.
     ========================================================================== */

  html body #cart .cart-items tr.cart-item,
  html body #cart tr.cart-item {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: var(--m-cart-item-gap) !important;
  }

  html body #cart .cart-items tr.cart-item:last-child {
    margin-bottom: 0 !important;
  }

  /* name sits tight to its price, then a clear block gap before the options */
  html body #cart .cart-item > td.cart-item__totals.large-up-hide,
  html body #cart .cart-item > td.cart-item__totals.medium-hide {
    margin-bottom: var(--m-cart-block-gap) !important;
  }

  /* quantity to Remove gets its own, slightly larger gap */
  html body #cart .cart-item .cart-item__quantity-wrapper {
    gap: var(--m-cart-remove-gap) !important;
  }


  /* ==========================================================================
     6. FOOTER - single divider, right aligned total
        Written without #cart, because .cart__footer is a separate section.
     ========================================================================== */

  html body .cart__footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin-top: var(--m-cart-footer-gap) !important;
    padding-top: var(--m-cart-footer-gap) !important;
  }

  html body .cart__footer .totals {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
  }

  html body .cart__footer .totals__subtotal,
  html body .cart__footer .totals__total,
  html body .cart__footer .totals__subtotal-value,
  html body .cart__footer .totals__total-value {
    font-size: var(--m-cart-meta-font, 12px) !important;
    font-weight: 400 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .cart__footer .cart__blocks > *,
  html body .cart__footer .js-contents {
    margin-bottom: 0 !important;
  }
}


/* ----------------------------------------------------------------------------
   OPTIONAL A - SHOW THE SHIPPING NOTE

   The reference prints "Shipping & taxes calculated at checkout" under the
   total. base.css hides it globally with .tax-note { display: none }. To bring
   it back on mobile only, delete the two comment markers below.

@media screen and (max-width: 749px) {
  html body .cart__footer .tax-note {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #000000 !important;
    margin: 0 0 18px 0 !important;
  }
}

   ----------------------------------------------------------------------------
   OPTIONAL B - PUT THE DIVIDERS BACK BETWEEN ITEMS

   If you decide you prefer a rule after each product rather than the
   reference's open whitespace, delete the two comment markers below.

@media screen and (max-width: 749px) {
  html body #cart .cart-items tr.cart-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding-bottom: var(--m-cart-item-gap) !important;
    margin-bottom: var(--m-cart-item-gap) !important;
  }
  html body #cart .cart-items tr.cart-item:last-child {
    border-bottom: none !important;
  }
}

   ---------------------------------------------------------------------------- */
   /* ============================================================================
   MASHRU - VIEW BAG IMAGE ALIGNMENT   v4.4   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v4.3. Do NOT delete v4.3.
   Cart page (/cart) only. Drawer, desktop and laptop untouched.

   THREE CORRECTIONS

   1. IMAGE STARTS TOO HIGH
      In the reference the product NAME is the topmost thing in the row, and
      the image begins level with the PRICE underneath it:

              Emma Coat            <- row 1, name only, column 1 empty
        [img] $4,100               <- row 2, image starts here
        [img]
        [img] Size: 0
        [img] Color: Green / Brown
        [img] -  Quantity: 1  +
              Remove

      v4.2 placed the image at "grid-row: 1 / span 30", so it started level
      with the name instead. Moving it to row 2 leaves column 1 empty on the
      name row, which is exactly what the reference does. This is structural,
      not a margin nudge, so it holds at any font size or option count.

   2. IMAGE SLIGHTLY TOO LARGE
      Measured off the reference the image is 87px wide. Yours renders at 98px.
      Height follows the 2:3 ratio of the source file either way.

   3. TWO DIVIDER LINES ABOVE THE TOTAL
      The reference has one rule between the last item and the total. Yours
      draws two, 60px apart: the v4.3 .cart__footer border-top, plus a second
      one from the table or footer chain that was never cleared. Every border
      in that area is reset here, then exactly one is drawn.

   ----------------------------------------------------------------------------
   THE KNOBS
   ----------------------------------------------------------------------------
   --m-cart-img-w          88px   image width, height follows automatically
   --m-cart-col-gap        20px   image to text column
   --m-cart-item-gap       30px   space between one product and the next
   --m-cart-rule-above     42px   last "Remove" down to the divider
   --m-cart-rule-below     44px   divider down to the Subtotal line
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-cart-img-w: 88px;
    --m-cart-col-gap: 20px;
    --m-cart-item-gap: 30px;
    --m-cart-rule-above: 42px;
    --m-cart-rule-below: 44px;
  }


  /* ==========================================================================
     1. IMAGE STARTS ON THE PRICE ROW, NOT THE NAME ROW
     ========================================================================== */

  html body #cart .cart-item > td.cart-item__media {
    grid-column: 1 !important;
    grid-row: 2 / span 30 !important;
    align-self: start !important;
    justify-self: start !important;
    width: var(--m-cart-img-w) !important;
    max-width: var(--m-cart-img-w) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* the name keeps column 2 and stays alone on row 1 */
  html body #cart .cart-item .cart-item__name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 1 !important;
  }

  html body #cart .cart-items tr.cart-item,
  html body #cart tr.cart-item {
    grid-template-columns: var(--m-cart-img-w) minmax(0, 1fr) !important;
    column-gap: var(--m-cart-col-gap) !important;
    margin-bottom: var(--m-cart-item-gap) !important;
  }

  html body #cart .cart-item .cart-item__image-container,
  html body #cart .cart-item .cart-item__image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     2. EXACTLY ONE DIVIDER ABOVE THE TOTAL
        Everything in the chain is cleared first, then one rule is drawn.
     ========================================================================== */

  html body #cart .cart-items,
  html body #cart .cart-items table,
  html body #cart .cart-items tbody,
  html body #cart .cart-items tr.cart-item,
  html body #cart .cart-items tr.cart-item td,
  html body #cart .cart__contents,
  html body #cart cart-items,
  html body #main-cart-footer,
  html body .cart__footer .cart__blocks,
  html body .cart__footer .js-contents,
  html body .cart__footer .totals,
  html body .cart__footer .cart__ctas {
    border-top: none !important;
    border-bottom: none !important;
  }

  /* the single rule, drawn last so it wins over the reset above */
  html body .cart__footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-bottom: none !important;
    margin-top: var(--m-cart-rule-above) !important;
    padding-top: var(--m-cart-rule-below) !important;
  }
}


/* ----------------------------------------------------------------------------
   OPTIONAL - IMAGE BACK ON THE NAME ROW

   If you decide you prefer the image top level with the product name rather
   than with the price, delete the two comment markers below.

@media screen and (max-width: 749px) {
  html body #cart .cart-item > td.cart-item__media {
    grid-row: 1 / span 30 !important;
  }
}

   ---------------------------------------------------------------------------- */
   /* ============================================================================
   MASHRU - VIEW BAG, LINE + QUANTITY GAP   v4.5   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v4.4. Do NOT delete v4.4.
   Cart page (/cart) only. Drawer, desktop and laptop untouched.

   TWO CORRECTIONS

   1. THE STRAY GREY LINE UNDER THE LAST "Remove"
      v4.4 reset borders on a named list of elements, but two wrappers inside
      the form were missed:
          <form id="cart">
            <div class="cart__items" id="main-cart-items">   <- not covered
              <div class="js-contents">                      <- not covered
                <table class="cart-items">
      Rather than keep adding names one at a time, every top and bottom border
      inside the form is cleared here. Nothing in there needs one: the
      "Proceed to checkout" button draws its edge with box-shadow, and the
      quantity control's box was already stripped in v4.3.

      The line you are KEEPING sits on .cart__footer, which is a separate
      Shopify section outside <form id="cart">, so this cannot reach it.

   2. TOO MUCH SPACE ABOVE "Quantity"
      Measured against the reference:
                              yours     reference
          price  -> Size       32px       40px
          Size   -> Color      18px       20px
          Color  -> Quantity   33px       24px   <- this one
          Quantity -> Remove   41px       42px

      Only the Color-to-Quantity gap is out. That is the bottom margin on the
      <dl>, which up to now shared --m-cart-block-gap with the price-to-options
      gap, so it could not be changed on its own. It gets its own knob below.

   ----------------------------------------------------------------------------
   THE KNOBS
   ----------------------------------------------------------------------------
   --m-cart-options-gap    7px   Color line down to the Quantity row
                                 smaller number = Quantity moves up

   --m-cart-price-gap     16px   price down to the Size line
                                 LEFT AS IT WAS. The reference runs about 8px
                                 looser here. If you want that too, change this
                                 to 24px. Otherwise ignore it.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-cart-options-gap: 7px;
    --m-cart-price-gap: 16px;
  }


  /* ==========================================================================
     1. NO HORIZONTAL RULES ANYWHERE INSIDE THE CART FORM
     ========================================================================== */

  html body #cart,
  html body #cart *,
  html body #cart *::before,
  html body #cart *::after {
    border-top: 0 none !important;
    border-bottom: 0 none !important;
  }


  /* ==========================================================================
     2. GAP ABOVE THE QUANTITY ROW
     ========================================================================== */

  html body #cart .cart-item .cart-item__details dl,
  html body #cart .cart-item dl {
    margin-bottom: var(--m-cart-options-gap) !important;
  }

  /* the price-to-options gap keeps its own value, unchanged */
  html body #cart .cart-item > td.cart-item__totals.large-up-hide,
  html body #cart .cart-item > td.cart-item__totals.medium-hide {
    margin-bottom: var(--m-cart-price-gap) !important;
  }
}
/* ============================================================================
   MASHRU - VIEW BAG, LINE + QUANTITY GAP   v4.5   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v4.4. Do NOT delete v4.4.
   Cart page (/cart) only. Drawer, desktop and laptop untouched.

   TWO CORRECTIONS

   1. THE STRAY GREY LINE UNDER THE LAST "Remove"
      v4.4 reset borders on a named list of elements, but two wrappers inside
      the form were missed:
          <form id="cart">
            <div class="cart__items" id="main-cart-items">   <- not covered
              <div class="js-contents">                      <- not covered
                <table class="cart-items">
      Rather than keep adding names one at a time, every top and bottom border
      inside the form is cleared here. Nothing in there needs one: the
      "Proceed to checkout" button draws its edge with box-shadow, and the
      quantity control's box was already stripped in v4.3.

      The line you are KEEPING sits on .cart__footer, which is a separate
      Shopify section outside <form id="cart">, so this cannot reach it.

   2. TOO MUCH SPACE ABOVE "Quantity"
      Measured against the reference:
                              yours     reference
          price  -> Size       32px       40px
          Size   -> Color      18px       20px
          Color  -> Quantity   33px       24px   <- this one
          Quantity -> Remove   41px       42px

      Only the Color-to-Quantity gap is out. That is the bottom margin on the
      <dl>, which up to now shared --m-cart-block-gap with the price-to-options
      gap, so it could not be changed on its own. It gets its own knob below.

   ----------------------------------------------------------------------------
   THE KNOBS
   ----------------------------------------------------------------------------
   --m-cart-options-gap    7px   Color line down to the Quantity row
                                 smaller number = Quantity moves up

   --m-cart-price-gap     16px   price down to the Size line
                                 LEFT AS IT WAS. The reference runs about 8px
                                 looser here. If you want that too, change this
                                 to 24px. Otherwise ignore it.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-cart-options-gap: 7px;
    --m-cart-price-gap: 16px;
  }


  /* ==========================================================================
     1. NO HORIZONTAL RULES ANYWHERE INSIDE THE CART FORM
     ========================================================================== */

  html body #cart,
  html body #cart *,
  html body #cart *::before,
  html body #cart *::after {
    border-top: 0 none !important;
    border-bottom: 0 none !important;
  }


  /* ==========================================================================
     2. GAP ABOVE THE QUANTITY ROW
     ========================================================================== */

  html body #cart .cart-item .cart-item__details dl,
  html body #cart .cart-item dl {
    margin-bottom: var(--m-cart-options-gap) !important;
  }

  /* the price-to-options gap keeps its own value, unchanged */
  html body #cart .cart-item > td.cart-item__totals.large-up-hide,
  html body #cart .cart-item > td.cart-item__totals.medium-hide {
    margin-bottom: var(--m-cart-price-gap) !important;
  }
}
/* ============================================================================
   MASHRU - GAP ABOVE THE CART GREY LINE   v4.7   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v4.6. Do NOT delete v4.6.
   Cart page (/cart) only. Drawer, desktop and laptop untouched.


   ############################################################################
   ##                                                                        ##
   ##   ONE NUMBER TO EDIT:   --m-rule-gap                                   ##
   ##                                                                        ##
   ##   It is the distance from the bottom of the last "Remove" down to the  ##
   ##   grey line. Nothing else contributes to it any more.                  ##
   ##                                                                        ##
   ##       42px   current, matches the reference                            ##
   ##       30px   tighter                                                   ##
   ##       20px   very tight                                                ##
   ##       60px   looser                                                    ##
   ##                                                                        ##
   ##   Negative values work too, for example -10px, if you ever want the    ##
   ##   line closer than zero allows. You will not need that now, but it is  ##
   ##   there as an escape hatch.                                            ##
   ##                                                                        ##
   ############################################################################


   WHY IT WAS 118px INSTEAD OF 42px

   Three things were stacking, and the biggest one is Dawn's own:

       .cart__items { padding-bottom: 4rem; }        <- 40px, Dawn's default
       tr.cart-item:last-child { margin-bottom }     <- 30px, from v4.4
       .cart__footer { margin-top }                  <- 42px, from v4.3

   That .cart__items rule is the same one that was drawing the first grey line
   you had me remove in v4.5. Removing its border left its padding behind.

   Everything between the last product and the footer is flattened to zero
   below, then the gap is set once, in one place.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     THE KNOB
     ========================================================================== */

  :root {
    --m-rule-gap: 42px;
  }


  /* ==========================================================================
     1. FLATTEN EVERYTHING BETWEEN THE LAST PRODUCT AND THE FOOTER
        Any one of these carrying leftover space would make the knob lie.
     ========================================================================== */

  html body #cart,
  html body #cart .cart__items,
  html body #cart .cart__contents,
  html body #cart .cart__warnings,
  html body #cart .js-contents,
  html body #cart table.cart-items,
  html body #cart tbody,
  html body #cart .cart-items tr.cart-item:last-child,
  html body cart-items,
  html body .page-width:has(form#cart),
  html body .shopify-section:has(form#cart) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  html body #main-cart-footer,
  html body .shopify-section:has(.cart__footer),
  html body .page-width:has(.cart__footer) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  /* ==========================================================================
     2. THE GAP, SET ONCE
        margin-top is the space ABOVE the line. padding-top, set back in v4.6
        by --m-cart-rule-below, is the space BELOW it. They stay independent.
     ========================================================================== */

  html body .cart__footer {
    margin-top: var(--m-rule-gap) !important;
  }
}
/* ============================================================================
   MASHRU - CART DRAWER LAYOUT   v5.0   (max-width: 749px ONLY)

   >>> DELETE THE ENTIRE v4.9 BLOCK BEFORE PASTING THIS. <<<
   Self-contained replacement. Paste at the VERY END of base.css, after v4.7.
   Cart DRAWER only. The /cart page, desktop and laptop are untouched.


   THE REAL MARKUP  (from your DevTools breadcrumb)

       tr#CartDrawer-Item-1.cart-item
         td.cart-item__media
           img.cart-item__image
         td.cart-item__details
           div.cart-title-div              <- CUSTOM, not part of Dawn
             a.cart-item__name.h4.break    Bustier Petal Volume Dress
             div.product-option
               span.money                  Rs.8,000.00
           ... Color / Size option rows
         td.cart-item__totals              <- hidden by your theme, unused
         td.cart-item__quantity
           quantity control + cart-remove-button


   WHY v4.8 AND v4.9 BOTH FAILED

   I was repositioning td.cart-item__totals, assuming that held the price the
   way Dawn does it. Your theme hides that cell and prints the price from a
   span.money inside div.cart-title-div instead, and base.css lays that
   wrapper out as:

       .cart-title-div { display: flex; justify-content: space-between; }

   A flex pair pushed to opposite ends. That is why the price stayed welded to
   the name line through both attempts, and why "order" moved it left in v4.8
   and right in v4.9. I was styling an element that is not on screen.

   WHAT THIS VERSION DOES INSTEAD

   The name, price and options are already in the correct order inside one
   cell. So the row needs only TWO grid items, not five:

           col 1          col 2
   row 1   [ image ]      td.cart-item__details   (name, price, Color, Size)
   row 2   [ image ]      td.cart-item__quantity  (Qty, Remove)

   No display:contents, no per-element grid placement, no order values. The
   single structural change inside the cell is turning .cart-title-div from
   flex back to block so the price drops under the name.


   ############################################################################
   ##  THE NUMBERS YOU WILL WANT TO CHANGE - ALL IN SECTION 0                ##
   ############################################################################

     --d-img-w       112px   product image WIDTH
     --d-img-h       169px   product image HEIGHT
     --d-gutter       18px   drawer edge to the image
     --d-col-gap      21px   image to the text column
     --d-header-gap   24px   "Bag / Close" row down to the first image
     --d-block-gap    26px   price down to the Color line
     --d-remove-gap   23px   Qty line down to "Remove"
     --d-item-gap     44px   space between one product and the next
     --d-font         12px   all text in the row

   Image width and height are independent, the photo crops rather than
   distorts. Your files are 2:3, so for no cropping keep height at 1.5x width:
   100 -> 150, 112 -> 169, 120 -> 180.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOBS
     ========================================================================== */

  :root {
    --d-img-w: 112px;
    --d-img-h: 169px;
    --d-gutter: 18px;
    --d-col-gap: 21px;
    --d-header-gap: 24px;
    --d-block-gap: 26px;
    --d-line-gap: 2px;
    --d-remove-gap: 23px;
    --d-item-gap: 44px;
    --d-font: 12px;
  }


  /* ==========================================================================
     1. FULL WIDTH DRAWER
        Dawn caps the panel with max-width: calc(100vw - 3rem), which is the
        strip of page you can still see on the left. Several selectors are
        listed because the outer element differs between Dawn versions.
     ========================================================================== */

  html body #CartDrawer .drawer__inner,
  html body cart-drawer .drawer__inner,
  html body .cart-drawer .drawer__inner,
  html body .drawer.active .drawer__inner {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     2. NO BORDERS, NO SHADOWS, NO COLUMN HEADERS
        The short grey line and the bars around "Remove" are box-shadows, not
        borders, which is why clearing borders alone never removed them.
     ========================================================================== */

  html body #CartDrawer-CartItems,
  html body #CartDrawer-CartItems *,
  html body #CartDrawer-CartItems *::before,
  html body #CartDrawer-CartItems *::after {
    border: 0 none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  html body #CartDrawer-CartItems thead,
  html body #CartDrawer-CartItems thead tr,
  html body #CartDrawer-CartItems thead th,
  html body #CartDrawer-CartItems caption {
    display: none !important;
  }

  /* the unused totals cell, so it can never print a second price */
  html body #CartDrawer-CartItems .cart-item > td.cart-item__totals {
    display: none !important;
  }


  /* ==========================================================================
     3. SHELL - gutter applied ONCE
     ========================================================================== */

  html body #CartDrawer-CartItems,
  html body #CartDrawer-CartItems table.cart-items,
  html body #CartDrawer-CartItems tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body #CartDrawer-CartItems .drawer__cart-items-wrapper {
    display: block !important;
    width: 100% !important;
    padding: var(--d-header-gap) var(--d-gutter) 0 var(--d-gutter) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }


  /* ==========================================================================
     4. THE ROW - two grid items only
     ========================================================================== */

  html body #CartDrawer-CartItems tr.cart-item,
  html body #CartDrawer-CartItems .cart-item {
    display: grid !important;
    grid-template-columns: var(--d-img-w) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: var(--d-col-gap) !important;
    row-gap: 0 !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 0 var(--d-item-gap) 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body #CartDrawer-CartItems tr.cart-item:last-child {
    margin-bottom: 0 !important;
  }

  html body #CartDrawer-CartItems .cart-item > td.cart-item__media {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: start !important;
    display: block !important;
    position: relative !important;
    width: var(--d-img-w) !important;
    max-width: var(--d-img-w) !important;
    height: var(--d-img-h) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .cart-item__media img,
  html body #CartDrawer-CartItems .cart-item__image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .cart-item > td.cart-item__details {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .cart-item > td.cart-item__quantity {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* the two hand positioned pseudo elements from the old drawer CSS */
  html body #CartDrawer-CartItems .cart-item__details::before,
  html body #CartDrawer-CartItems .cart-item__details::after {
    content: none !important;
    display: none !important;
    margin: 0 !important;
  }


  /* ==========================================================================
     5. THE FIX - .cart-title-div stops being a flex pair
        This one rule is what drops the price under the name.
     ========================================================================== */

  html body #CartDrawer-CartItems .cart-title-div {
    display: block !important;
    position: static !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PRODUCT NAME */
  html body #CartDrawer-CartItems .cart-item__name,
  html body #CartDrawer-CartItems a.cart-item__name.h4 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-family: var(--font-body-family) !important;
    font-size: var(--d-font) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    text-decoration: none !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PRICE - the .product-option that sits inside .cart-title-div */
  html body #CartDrawer-CartItems .cart-title-div .product-option {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    white-space: nowrap !important;
    margin: 0 0 var(--d-block-gap) 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .cart-title-div .product-option .money,
  html body #CartDrawer-CartItems .cart-title-div .product-option span {
    position: static !important;
    display: inline !important;
    font-family: var(--font-body-family) !important;
    font-size: var(--d-font) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     6. COLOR AND SIZE - one line each
        Scoped so it cannot touch the price .product-option above.
     ========================================================================== */

  html body #CartDrawer-CartItems .cart-item__details dl {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .cart-item__details > .product-option,
  html body #CartDrawer-CartItems .cart-item__details dl .product-option {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 var(--d-line-gap) 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body #CartDrawer-CartItems .cart-item dt,
  html body #CartDrawer-CartItems .cart-item dd {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    font-size: var(--d-font) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    text-align: left !important;
  }


  /* ==========================================================================
     7. "Qty: 1" THEN "Remove"
     ========================================================================== */

  html body #CartDrawer-CartItems .cart-item__quantity-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--d-remove-gap) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .quantity-popover-container,
  html body #CartDrawer-CartItems quantity-popover {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .quantity {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .quantity::before {
    content: "Qty:" !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    order: 1 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    font-size: var(--d-font) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .quantity::after {
    content: none !important;
    display: none !important;
  }

  html body #CartDrawer-CartItems .quantity__button {
    display: none !important;
  }

  html body #CartDrawer-CartItems .quantity__input {
    order: 2 !important;
    width: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
    text-align: left !important;
    background: transparent !important;
    font-size: var(--d-font) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems cart-remove-button {
    position: static !important;
    top: auto !important;
    display: block !important;
    align-self: flex-start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems cart-remove-button .button {
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body #CartDrawer-CartItems cart-remove-button .button::before {
    content: none !important;
    display: none !important;
  }

  html body #CartDrawer-CartItems cart-remove-button .button::after {
    content: "Remove" !important;
    position: static !important;
    display: inline-block !important;
    font-size: var(--d-font) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-transform: capitalize !important;
    text-decoration: none !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     8. HEADER AND FOOTER
     ========================================================================== */

  html body .drawer__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 var(--d-gutter) !important;
    margin: 0 !important;
  }

  html body .drawer__heading,
  html body .drawer__close::before {
    font-size: var(--d-font) !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  html body .cart-drawer .drawer__footer,
  html body .cart-drawer__footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: var(--d-item-gap) !important;
  }

  html body .cart-drawer .totals,
  html body .cart-drawer__footer .totals {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 var(--d-gutter) !important;
    margin: 0 0 20px 0 !important;
  }

  html body .cart-drawer .totals__subtotal,
  html body .cart-drawer .totals__subtotal-value,
  html body .cart-drawer .totals__total,
  html body .cart-drawer .totals__total-value {
    font-size: var(--d-font) !important;
    font-weight: 400 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .cart-drawer .cart__ctas,
  html body .cart-drawer .cart__ctas .button,
  html body .cart-drawer .Button--View_Bag {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}


/* ----------------------------------------------------------------------------
   OPTIONAL - KEEP THE PLUS AND MINUS IN THE DRAWER

   The reference shows a static "Qty: 1". To let shoppers change quantity from
   the drawer, delete the two comment markers below.

@media screen and (max-width: 749px) {
  html body #CartDrawer-CartItems .quantity__button {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 2px !important;
    margin: 0 !important;
    background: transparent !important;
    color: #000000 !important;
  }
  html body #CartDrawer-CartItems .quantity__button:first-of-type { order: 0 !important; }
  html body #CartDrawer-CartItems .quantity__button:last-of-type  { order: 3 !important; }
  html body #CartDrawer-CartItems .quantity__button svg {
    width: 10px !important;
    height: 10px !important;
  }
}

   ---------------------------------------------------------------------------- */
   /* ============================================================================
   MASHRU - CART DRAWER FINISHING   v5.1   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.0. Do NOT delete v5.0.
   Cart DRAWER only. The /cart page, desktop and laptop are untouched.


   ############################################################################
   ##  KNOBS - SECTION 0                                                     ##
   ############################################################################

     --d-img-top-nudge   0px   shifts the image DOWN relative to the name
                               positive = image moves down
                               negative = image moves up

     The image width and height knobs are still --d-img-w and --d-img-h in
     v5.0, Section 0. They currently measure 113 x 169 against the reference's
     112 x 169, so they are already correct and I have not changed them.


   THE THREE FIXES

   1. "Bag" SITTING ABOVE "Close"
      The header is a flex row, but its two children are different heights:
      .drawer__close is a 44px touch target while .drawer__heading is a bare
      h2. On top of that, base.css gives the heading its own inset through

          .drawer__heading, .totals, .button, .totals__total { padding: 0% 15px; }

      which is why "Bag" also sits further right than "Close" does from its
      edge. Both children are given the same height and centred, and that
      15px is removed so "Bag" lands on the same 18px gutter.

   2. Qty APPEARING ABOVE Remove
      In your markup cart-remove-button comes BEFORE the quantity control in
      the cell, so it printed first. Order values sort them.

      The spacing also moves off the flex "gap" and onto a margin. A single
      gap value would have forced the same distance in both places, but the
      reference wants Qty tight under Size and Remove further down:

          Color: Olive
          Size: XXS
          Qty: 2          <- normal line spacing
                          <- --d-remove-gap
          Remove

   3. IMAGE ALIGNMENT
      The size was already right. What looked wrong is that the text column
      ended at Qty while the image ran about 23px past it. With Qty moved
      below Size the text block grows to match the image height, which is what
      the reference shows. The nudge knob is there if you still want to shift
      the image against the text.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOB
     ========================================================================== */

  :root {
    --d-img-top-nudge: 0px;
  }


  /* ==========================================================================
     1. HEADER - "Bag" and "Close" on one line, both on the gutter
     ========================================================================== */

  html body #CartDrawer .drawer__header,
  html body .cart-drawer .drawer__header,
  html body .drawer__inner > .drawer__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 var(--d-gutter) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html body .drawer__header .drawer__heading,
  html body h2.drawer__heading {
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--d-font) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #000000 !important;
  }

  html body .drawer__header .drawer__close,
  html body button.drawer__close {
    align-self: center !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 44px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  html body .drawer__close::before {
    font-size: var(--d-font) !important;
    line-height: 1 !important;
    color: #000000 !important;
  }


  /* ==========================================================================
     2. Qty ABOVE Remove
        Both the cell and the inner wrapper are handled, because the two
        elements may be direct children of either one.
     ========================================================================== */

  html body #CartDrawer-CartItems .cart-item > td.cart-item__quantity,
  html body #CartDrawer-CartItems .cart-item__quantity-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* FIRST - the Qty line, with the gap to Remove as its bottom margin */
  html body #CartDrawer-CartItems .cart-item > td.cart-item__quantity quantity-popover,
  html body #CartDrawer-CartItems .cart-item > td.cart-item__quantity .quantity-popover-container,
  html body #CartDrawer-CartItems .cart-item__quantity-wrapper quantity-popover,
  html body #CartDrawer-CartItems .cart-item__quantity-wrapper .quantity-popover-container {
    order: 1 !important;
    display: block !important;
    width: auto !important;
    margin: 0 0 var(--d-remove-gap) 0 !important;
    padding: 0 !important;
  }

  /* SECOND - Remove */
  html body #CartDrawer-CartItems .cart-item > td.cart-item__quantity cart-remove-button,
  html body #CartDrawer-CartItems .cart-item__quantity-wrapper cart-remove-button,
  html body #CartDrawer-CartItems cart-remove-button {
    order: 2 !important;
    align-self: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     3. IMAGE - vertical nudge against the text
     ========================================================================== */

  html body #CartDrawer-CartItems .cart-item > td.cart-item__media {
    margin-top: var(--d-img-top-nudge) !important;
  }
}
/* ============================================================================
   MASHRU - CART DRAWER TEXT ORDER   v5.2   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.1. Do NOT delete v5.0 or v5.1.
   Cart DRAWER only. The /cart page, desktop and laptop are untouched.


   WHY v5.1's ORDER RULES DID NOTHING

   Your drawer renders:   Color, Size, Remove, Qty
   The reference wants:   Color, Size, Qty, Remove

   v5.1 assumed Remove and the quantity control were siblings in
   td.cart-item__quantity and sorted them with "order". They are not. Reading
   the render, cart-remove-button sits INSIDE td.cart-item__details, after the
   option rows, and the quantity cell is placed below it:

       td.cart-item__details
         div.cart-title-div        name + price
         ... Color / Size rows
         cart-remove-button        <- Remove is here
       td.cart-item__quantity
         quantity control          <- Qty is here, in a different cell

   "order" only sorts items inside the SAME flex or grid container. Remove and
   Qty are in different cells, so no order value could ever swap them.

   THE FIX
   td.cart-item__details is dissolved with display:contents. Its children then
   become items of the row grid in their own right, sitting alongside the
   quantity cell, and a single sequence can be applied across all of them:

       order 1   title block   name + price
       order 2   option rows   Color, Size
       order 3   quantity      Qty
       order 4   Remove

   This holds whichever cell Remove actually lives in. If it turns out to be
   inside the quantity cell after all, it is already after Qty there, so the
   result is the same either way.


   ############################################################################
   ##  KNOBS - SECTION 0                                                     ##
   ############################################################################

     --d-img-w    112px   image width   (reference measures 112)
     --d-img-h    169px   image height  (reference measures 169)

   These override the v5.0 values. Yours were rendering 114 x 169, so this is
   a 2px correction. Keep height at 1.5x width for no cropping.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOBS
     ========================================================================== */

  :root {
    --d-img-w: 112px;
    --d-img-h: 169px;
  }


  /* ==========================================================================
     1. THE ROW - auto rows so the stack can grow
        v5.0 pinned exactly two rows and spanned the image across both. With
        four ordered items in column 2 the grid needs to create rows freely.
     ========================================================================== */

  html body #CartDrawer-CartItems tr.cart-item,
  html body #CartDrawer-CartItems .cart-item {
    display: grid !important;
    grid-template-columns: var(--d-img-w) minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-rows: min-content !important;
    column-gap: var(--d-col-gap) !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  html body #CartDrawer-CartItems .cart-item > td.cart-item__media {
    grid-column: 1 !important;
    grid-row: 1 / span 20 !important;
    align-self: start !important;
    width: var(--d-img-w) !important;
    max-width: var(--d-img-w) !important;
    height: var(--d-img-h) !important;
    overflow: hidden !important;
  }


  /* ==========================================================================
     2. DISSOLVE THE DETAILS CELL
     ========================================================================== */

  html body #CartDrawer-CartItems .cart-item > td.cart-item__details {
    display: contents !important;
  }


  /* ==========================================================================
     3. THE SEQUENCE - swap these numbers to resequence
     ========================================================================== */

  /* order 1 - NAME + PRICE. Stays a block so the two stack inside it. */
  html body #CartDrawer-CartItems .cart-title-div {
    grid-column: 2 !important;
    order: 1 !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* order 2 - COLOR / SIZE. Covers both a <dl> wrapper and bare option divs. */
  html body #CartDrawer-CartItems .cart-item__details dl,
  html body #CartDrawer-CartItems .cart-item__details > .product-option {
    grid-column: 2 !important;
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 var(--d-line-gap) 0 !important;
    padding: 0 !important;
  }

  /* order 3 - Qty */
  html body #CartDrawer-CartItems .cart-item > td.cart-item__quantity {
    grid-column: 2 !important;
    grid-row: auto !important;
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 0 var(--d-remove-gap) 0 !important;
    padding: 0 !important;
  }

  /* order 4 - Remove */
  html body #CartDrawer-CartItems .cart-item__details > cart-remove-button,
  html body #CartDrawer-CartItems cart-remove-button {
    grid-column: 2 !important;
    grid-row: auto !important;
    order: 4 !important;
    display: block !important;
    position: static !important;
    align-self: start !important;
    justify-self: start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ============================================================================
   MASHRU - CART DRAWER REMOVE POSITION   v5.3   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.2. Do NOT delete v5.0 - v5.2.
   Cart DRAWER only. The /cart page, desktop and laptop are untouched.


   WHY "Remove" DROPPED SO FAR DOWN

   v5.2 spans the image across the text rows:

       td.cart-item__media { grid-row: 1 / span 20; height: 169px; }

   A grid item that spans several rows forces those rows to add up to at least
   its own height. The text only needs about 150px, so the browser has ~20px
   of surplus plus the empty spanned rows to place, and it pushes that space
   into the rows holding the later items rather than the trailing empty ones.
   Remove is the last item, so it absorbs all of it.

   Raising or lowering --d-remove-gap could never fix that, because the gap
   was not coming from a margin.

   THE FIX
   The image is taken out of the row sizing altogether. The row becomes a
   single text column with left padding the width of the image, and the image
   is positioned absolutely inside that padding:

       +----------+  Large Lotus Silk Scarf
       |          |  Rs.580.00
       |  image   |
       |  abs.    |  Color: Olive
       |  pos.    |  Size: One size
       |          |  Qty: 1
       +----------+
                     Remove

   Row heights are now driven purely by the text, so Remove sits directly
   under Qty at exactly --d-remove-gap, and the image height can be changed
   freely without moving any text.

   min-height on the row keeps short items from being shorter than the image.


   ############################################################################
   ##  KNOBS                                                                 ##
   ############################################################################

     --d-remove-gap   23px   Qty down to Remove. This now actually controls it.

     Image size is still --d-img-w / --d-img-h from v5.2, Section 0. Changing
     the height no longer affects the text spacing at all.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --d-remove-gap: 23px;
  }


  /* ==========================================================================
     1. THE ROW - one text column, image sits in the left padding
     ========================================================================== */

  html body #CartDrawer-CartItems tr.cart-item,
  html body #CartDrawer-CartItems .cart-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-rows: min-content !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    align-items: start !important;
    position: relative !important;
    width: 100% !important;
    min-height: var(--d-img-h) !important;
    padding: 0 0 0 calc(var(--d-img-w) + var(--d-col-gap)) !important;
    margin: 0 0 var(--d-item-gap) 0 !important;
    box-sizing: border-box !important;
  }

  html body #CartDrawer-CartItems tr.cart-item:last-child {
    margin-bottom: 0 !important;
  }

  /* THE IMAGE - out of the flow, so it cannot stretch any text row */
  html body #CartDrawer-CartItems .cart-item > td.cart-item__media {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    display: block !important;
    width: var(--d-img-w) !important;
    max-width: var(--d-img-w) !important;
    height: var(--d-img-h) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems .cart-item__media img,
  html body #CartDrawer-CartItems .cart-item__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     2. THE TEXT STACK - now all in column 1
        Same sequence as v5.2, moved off column 2 since the grid is single
        column now. Swap the order numbers to resequence.
     ========================================================================== */

  /* order 1 - name + price */
  html body #CartDrawer-CartItems .cart-title-div {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* order 2 - Color / Size */
  html body #CartDrawer-CartItems .cart-item__details dl,
  html body #CartDrawer-CartItems .cart-item__details > .product-option {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 var(--d-line-gap) 0 !important;
    padding: 0 !important;
  }

  /* order 3 - Qty, carrying the gap down to Remove */
  html body #CartDrawer-CartItems .cart-item > td.cart-item__quantity {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 var(--d-remove-gap) 0 !important;
    padding: 0 !important;
  }

  /* order 4 - Remove */
  html body #CartDrawer-CartItems .cart-item__details > cart-remove-button,
  html body #CartDrawer-CartItems cart-remove-button {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 4 !important;
    display: block !important;
    position: static !important;
    align-self: start !important;
    justify-self: start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ============================================================================
   MASHRU - DRAWER "Remove" POSITION   v5.4   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.3. v5.3 must be in place.
   Cart DRAWER only. The /cart page, desktop and laptop are untouched.


   ############################################################################
   ##                                                                        ##
   ##   ONE NUMBER TO EDIT:   --d-remove-gap                                 ##
   ##                                                                        ##
   ##   Distance from the "Qty" line down to "Remove".                       ##
   ##                                                                        ##
   ##       23px   current, matches the reference                            ##
   ##       16px   tighter                                                   ##
   ##       32px   looser                                                    ##
   ##                                                                        ##
   ##   Nothing else contributes to it after this block, so the number you    ##
   ##   set is the distance you get.                                         ##
   ##                                                                        ##
   ############################################################################


   THE TWO RULES THAT WERE PUSHING IT DOWN

   Both were written for the old drawer layout and hand positioned Remove
   against a fixed row height:

       #CartDrawer-CartItems cart-remove-button {
         position: absolute;
         top: 78%;                 <- 78% of a 169px row is about 132px
       }

       cart-remove-button .button {
         margin-top: 45px !important;
       }

   The first one explains the size of the drop almost exactly. Neither is
   needed now that the stack is ordered, so both are cleared here along with
   every other margin and offset on the element and its inner button.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     THE KNOB
     ========================================================================== */

  :root {
    --d-remove-gap: 4px;
  }


  /* ==========================================================================
     1. THE GAP, SET IN ONE PLACE
        It lives on the Qty line's bottom margin, not on Remove, so it cannot
        be affected by anything inside the remove button.
     ========================================================================== */

  html body #CartDrawer-CartItems .cart-item > td.cart-item__quantity {
    margin: 0 0 var(--d-remove-gap) 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     2. REMOVE - no absolute offset, no stray margins
     ========================================================================== */

  html body #CartDrawer-CartItems cart-remove-button,
  html body #CartDrawer-CartItems .cart-item cart-remove-button,
  html body #CartDrawer-CartItems .cart-item__details > cart-remove-button {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: block !important;
    align-self: start !important;
    justify-self: start !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #CartDrawer-CartItems cart-remove-button .button,
  html body #CartDrawer-CartItems .cart-item cart-remove-button .button {
    position: static !important;
    top: auto !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #CartDrawer-CartItems cart-remove-button .button::after {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
  }


  /* ==========================================================================
     3. NOTHING ELSE ADDS SPACE ABOVE IT
     ========================================================================== */

  html body #CartDrawer-CartItems .cart-item__details,
  html body #CartDrawer-CartItems .cart-item__quantity-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  html body #CartDrawer-CartItems .cart-item__details::after,
  html body #CartDrawer-CartItems .cart-item__quantity-wrapper::after {
    content: none !important;
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
  }
}
/* ============================================================================
   MASHRU - DRAWER BUTTON HEIGHT   v5.5   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.4.
   Cart DRAWER only. The /cart page, desktop and laptop are untouched.


   ############################################################################
   ##                                                                        ##
   ##   ONE NUMBER TO EDIT:   --d-btn-height                                 ##
   ##                                                                        ##
   ##   Height of BOTH "Proceed to checkout" and "View Bag".                 ##
   ##                                                                        ##
   ##       54px   current, matches the reference                            ##
   ##       48px   shorter                                                   ##
   ##       60px   taller                                                    ##
   ##                                                                        ##
   ##   The two are deliberately tied to one value so they can never drift   ##
   ##   apart. If you ever want them different, split the variable in two.   ##
   ##                                                                        ##
   ############################################################################


   WHAT WAS CAPPING THEM

   Two rules from the cart page work, neither of them scoped, so both also
   applied to the drawer:

       .cart__checkout-button { height: 32px !important; min-height: 32px !important; }
       .Button--View_Bag      { height: 30px !important; }

   Yours were rendering about 27px against the reference's 54px.

   The text is centred with flex rather than with padding or line-height, so
   it stays centred at any height you set.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     THE KNOB
     ========================================================================== */

  :root {
    --d-btn-height: 50px;
  }


  /* ==========================================================================
     1. BOTH BUTTONS - same height, text centred, full bleed
     ========================================================================== */

  html body .cart-drawer #CartDrawer-Checkout,
  html body .cart-drawer .cart__checkout-button,
  html body .cart-drawer .cart__ctas .button,
  html body .cart-drawer__footer #CartDrawer-Checkout,
  html body .cart-drawer__footer .cart__checkout-button,
  html body .cart-drawer .Button--View_Bag,
  html body .cart-drawer__footer .Button--View_Bag {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--d-btn-height) !important;
    min-height: var(--d-btn-height) !important;
    max-height: var(--d-btn-height) !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }


  /* ==========================================================================
     2. THE WRAPPERS - no extra space, no gap between the two bars
     ========================================================================== */

  html body .cart-drawer .cart__ctas,
  html body .cart-drawer__footer .cart__ctas {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  html body .cart-drawer__footer > a[href="/cart"],
  html body .cart-drawer .cart__ctas + a[href="/cart"] {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
  }


  /* ==========================================================================
     3. LABEL TEXT - centred inside the taller bar
        "Proceed to checkout" is printed by a ::before on the button, so it
        needs its own line-height reset or it sits off centre.
     ========================================================================== */

  html body .cart-drawer #CartDrawer-Checkout::before,
  html body .cart-drawer .cart__checkout-button::before,
  html body .cart-drawer .Button--View_Bag::before {
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .cart-drawer #CartDrawer-Checkout::after,
  html body .cart-drawer .cart__checkout-button::after {
    display: none !important;
    content: none !important;
  }
}
/* ============================================================================
   MASHRU - SAVED (WISHLIST) PAGE   v5.6   (max-width: 749px ONLY)

   Paste at the VERY END of base.css. Nothing needs deleting.
   Saved page only. Desktop and laptop are untouched.


   WHAT WAS WRONG AND WHY

   1. "ADD TO CART" SITTING ON TOP OF THE PHOTO
      base.css has this, with no media query around it:

          .swym-wishlist-item button.swym-is-button {
            position: absolute; top: 5px; right: 15px;
          }

      It was written for the star, but the add-to-cart button carries the same
      swym-is-button class, so it got pinned to the top of the card too. The
      desktop block undoes it with position:static inside a min-width: 990px
      query, so only laptop and desktop ever got the fix.

   2. NO PRODUCT NAME
      Swym ships the name as a hidden span:  <span id="..." style="display:none">
      The desktop block unhides it. That block is also inside min-width: 990px,
      so on mobile only the variant ("One size") and the price survived.

   3. ONE CARD PER ROW
      Swym injects its own inline <style> with
          .swym-wishlist-grid { max-width: 900px; margin: auto; }
      and the old mobile rule sized cards with flex percentages, which the
      injected style could still fight. The grid is switched to CSS grid here,
      so two columns are structural rather than negotiated.

   4. THE EMPTY BOXES AND STRAY LINES UNDER "Saved"
      base.css draws left and right borders on the title bar, the tabs and the
      separator. At full desktop width those edges sit off screen. On a phone
      the containers are narrow, so the borders close up into visible boxes.

   ----------------------------------------------------------------------------
   THE KNOBS - all in Section 0
   ----------------------------------------------------------------------------
     --w-gutter      20px    screen edge to the first card
     --w-gap         10px    space between the two columns
     --w-row-gap     30px    space between rows
     --w-img-ratio    5 / 8  card shape, same as the collection grid
     --w-cap-gap      8px    image down to the product name
     --w-line-gap     2px    name to variant to price
     --w-btn-gap     10px    price down to the ADD TO CART bar
     --w-btn-height  34px    height of the ADD TO CART bar
     --w-font        10px    all card text
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOBS
     ========================================================================== */

  :root {
    --w-gutter: 20px;
    --w-gap: 10px;
    --w-row-gap: 30px;
    --w-img-ratio: 5 / 8;
    --w-cap-gap: 8px;
    --w-line-gap: 2px;
    --w-btn-gap: 10px;
    --w-btn-height: 34px;
    --w-font: 10px;
  }


  /* ==========================================================================
     1. PAGE HEAD - no boxes, icons on one row
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-container-title-bar,
  html body .swym-ui-component .swym-htc-tabs,
  html body .swym-ui-component .swym-sfl-detail-separator,
  html body .swym-ui-component .swym-wishlist-detail-separator,
  html body .swym-ui-component .swym-add-wishlist-modal .swym-modal-content .swym-wishlist-item,
  html body .swym-ui-component .swym-simple-wishlist-container .swym-sfl-tab-container .swym-sfl-list-view .swym-sfl-detail-separator {
    border-left: 0 none !important;
    border-right: 0 none !important;
  }

  html body .swym-ui-component .swym-simple-wishlist-container,
  html body .swym-ui-component .swym-simple-wishlist-container-content,
  html body .swym-ui-component .swym-wishlist-detail,
  html body .swym-ui-component .swym-wishlist-detail-content,
  html body .swym-ui-component .swym-wishlist-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* the "Saved" heading */
  html body .swym-ui-component .swym-simple-wishlist-container::before {
    margin: 32px 0 18px !important;
  }

  /* share + three dots, right aligned on one line */
  html body .swym-ui-component .swym-wishlist-detail-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 var(--w-gutter) !important;
    box-sizing: border-box !important;
  }

  html body .swym-ui-component .swym-action-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .swym-ui-component .swym-share-btn,
  html body .swym-ui-component .swym-wishlist-context-menu {
    margin-left: 14px !important;
  }

  /* one thin rule under the icons, matching desktop */
  html body .swym-ui-component .swym-wishlist-detail-separator {
    border-bottom: 1px solid #e5e5e5 !important;
    height: 0 !important;
    width: 100% !important;
    margin: 12px 0 22px !important;
  }


  /* ==========================================================================
     2. THE GRID - two real columns
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-grid,
  html body ul.swym-wishlist-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--w-gap) !important;
    row-gap: var(--w-row-gap) !important;
    justify-content: stretch !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 var(--w-gutter) !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  html body .swym-wishlist-grid > li {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }


  /* ==========================================================================
     3. THE CARD - a single ordered column
        Swap the order numbers in Section 4 to resequence.
     ========================================================================== */

  html body .swym-wishlist-grid .swym-wishlist-item,
  html body .swym-wishlist-grid > li div.swym-wishlist-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }


  /* ==========================================================================
     4. THE SEQUENCE
     ========================================================================== */

  /* order 1 - PHOTO */
  html body .swym-wishlist-grid .swym-wishlist-image-wrapper,
  html body .swym-wishlist-grid a.swym-wishlist-image-wrapper {
    order: 1 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--w-img-ratio) !important;
    overflow: hidden !important;
    margin: 0 0 var(--w-cap-gap) 0 !important;
    padding: 0 !important;
  }

  html body .swym-wishlist-grid .swym-wishlist-image-wrapper img,
  html body .swym-wishlist-grid img.swym-wishlist-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* order 2 - PRODUCT NAME. Swym ships this hidden, so it is unhidden here. */
  html body .swym-wishlist-grid .swym-wishlist-item > span[id] {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: var(--w-font) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    text-align: left !important;
    margin: 0 0 var(--w-line-gap) 0 !important;
    padding: 0 !important;
  }

  /* order 3 - VARIANT / COLOUR */
  html body .swym-wishlist-grid .swym-variant-title,
  html body .swym-ui-component .swym-wishlist-grid .swym-wishlist-item .swym-variant-title {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    font-size: var(--w-font) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    text-align: left !important;
    margin: 0 0 var(--w-line-gap) 0 !important;
    padding: 0 !important;
  }

  /* order 4 - PRICE. The desktop block pins this with top: 468px, which is
     tied to the 458px desktop image. Returned to the flow here. */
  html body .swym-wishlist-grid .swym-product-price {
    order: 4 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 100% !important;
    font-size: var(--w-font) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    text-align: left !important;
    margin: 0 0 var(--w-btn-gap) 0 !important;
    padding: 0 !important;
  }

  html body .swym-wishlist-grid .swym-product-final-price,
  html body .swym-wishlist-grid .swym-product-price span {
    display: inline-block !important;
    font-size: var(--w-font) !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* order 5 - ADD TO CART. THE MAIN FIX: position:static takes it off the
     photo, where the unscoped swym-is-button rule had pinned it. */
  html body .swym-wishlist-grid button.swym-add-to-cart-btn,
  html body .swym-ui-component .swym-wishlist-grid > li button.swym-add-to-cart-btn {
    order: 5 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--w-btn-height) !important;
    min-height: var(--w-btn-height) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: var(--w-font) !important;
    letter-spacing: 0.03em !important;
    box-sizing: border-box !important;
  }

  html body .swym-wishlist-grid button.swym-add-to-cart-btn * {
    color: #ffffff !important;
    font-size: var(--w-font) !important;
  }

  /* the duplicate title button stays hidden, as on desktop */
  html body .swym-ui-component .swym-wishlist-grid button.swym-is-button:has(h2.swym-title.swym-title-1) {
    display: none !important;
  }


  /* ==========================================================================
     5. THE STAR - back over the top right of the photo
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-grid button.swym-delete-btn {
    position: absolute !important;
    top: 5px !important;
    right: 6px !important;
    z-index: 9 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body .swym-ui-component .swym-wishlist-grid button.swym-delete-btn::before {
    font-size: 15px !important;
  }
}


/* ----------------------------------------------------------------------------
   OPTIONAL - NAME LEFT, PRICE RIGHT ON ONE LINE

   Desktop puts the price on the same line as the product name. The block above
   stacks them instead, because at half a phone screen a long name and a price
   on one line wrap badly. If you would rather match desktop exactly, delete the
   two comment markers below.

@media screen and (max-width: 749px) {
  html body .swym-wishlist-grid .swym-wishlist-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  html body .swym-wishlist-grid .swym-wishlist-image-wrapper { grid-column: 1 / -1 !important; }
  html body .swym-wishlist-grid .swym-wishlist-item > span[id] { grid-column: 1 !important; }
  html body .swym-wishlist-grid .swym-product-price {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    padding-left: 6px !important;
  }
  html body .swym-wishlist-grid .swym-variant-title { grid-column: 1 !important; }
  html body .swym-wishlist-grid button.swym-add-to-cart-btn { grid-column: 1 / -1 !important; }
}

   ---------------------------------------------------------------------------- */
   /* ============================================================================
   MASHRU - SAVED PAGE, IMAGE HEIGHT + HEADER ROW   v5.7   (max-width: 749px)

   Paste at the VERY END of base.css, after v5.6. Do NOT delete v5.6.
   Saved page only. Desktop and laptop are untouched.


   WHY v5.6 CAME UP SHORT ON THESE TWO POINTS

   1. THE IMAGE BOX
      v5.6 sized it with  aspect-ratio: var(--w-img-ratio)  and left height on
      auto. The old wishlist block further up base.css still has

          @media (max-width: 749px) {
            .swym-wishlist-image-wrapper { height: 300px !important; }
          }

      Between that and Swym's own injected inline <style>, the ratio never won
      cleanly and the box ended up landscape. An explicit pixel height with the
      ratio switched off is not negotiable in the same way, so that is what is
      used here.

   2. THE SHARE AND THREE-DOT ICONS
      v5.6 wrote the border reset as

          html body .swym-ui-component .swym-wishlist-container-title-bar

      which is 2 classes. The rule it needed to beat is

          .swym-ui-component.swym-wishlist-page .swym-wishlist-container-title-bar

      which is 3 classes. Element names in a selector never outrank a class, so
      3 classes wins no matter how far down the file my version sits and no
      matter how many !important flags are on it. The side borders survived,
      which is what draws those empty boxes, and the two icons stayed in
      separate stacked containers.

      Fixed below by matching .swym-wishlist-page directly and by clearing the
      side borders across the whole page rather than element by element.

   ----------------------------------------------------------------------------
   THE KNOBS - Section 0
   ----------------------------------------------------------------------------
     --w-img-height   254px   product image height
                              This is the same value as the collection grid's
                              --m-card-img-height, so the two pages match.
                              Bigger number = taller image.

     --w-gap           30px   space between the two columns. Also matched to
                              the collection grid (--m-grid-gap), so the cards
                              come out the same width on both pages.

     --w-gutter        20px   screen edge to the first card, and the right edge
                              the two icons align to.

     --w-icons-gap     16px   space between the share icon and the three dots.
     --w-icons-size    18px   size of both icons.
     --w-rule-above    14px   icons down to the grey line.
     --w-rule-below    22px   grey line down to the first image.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOBS
     ========================================================================== */

  :root {
    --w-img-height: 254px;
    --w-gap: 30px;
    --w-gutter: 20px;
    --w-icons-gap: 16px;
    --w-icons-size: 18px;
    --w-rule-above: 14px;
    --w-rule-below: 22px;
  }


  /* ==========================================================================
     1. IMAGE BOX - fixed height, ratio switched off
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-grid .swym-wishlist-image-wrapper,
  html body .swym-ui-component .swym-wishlist-grid a.swym-wishlist-image-wrapper,
  html body .swym-ui-component.swym-wishlist-page .swym-wishlist-image-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--w-img-height) !important;
    min-height: var(--w-img-height) !important;
    max-height: var(--w-img-height) !important;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    margin: 0 0 var(--w-cap-gap, 8px) 0 !important;
    box-sizing: border-box !important;
  }

  html body .swym-ui-component .swym-wishlist-grid .swym-wishlist-image-wrapper img,
  html body .swym-ui-component .swym-wishlist-grid img.swym-wishlist-image,
  html body .swym-ui-component.swym-wishlist-page img.swym-wishlist-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* column gap kept in step with the collection grid */
  html body .swym-ui-component .swym-wishlist-grid,
  html body ul.swym-wishlist-grid {
    column-gap: var(--w-gap) !important;
    padding-left: var(--w-gutter) !important;
    padding-right: var(--w-gutter) !important;
  }


  /* ==========================================================================
     2. NO SIDE BORDERS ANYWHERE ON THE PAGE
        These are what draw the empty boxes above the grid.
     ========================================================================== */

  html body .swym-ui-component.swym-wishlist-page,
  html body .swym-ui-component.swym-wishlist-page *,
  html body .swym-ui-component.swym-wishlist-page *::before,
  html body .swym-ui-component.swym-wishlist-page *::after,
  html body .swym-ui-component .swym-simple-wishlist-container,
  html body .swym-ui-component .swym-simple-wishlist-container * {
    border-left: 0 none !important;
    border-right: 0 none !important;
  }

  /* the hidden "My Wishlist" bar must not reserve height either */
  html body .swym-ui-component.swym-wishlist-page .swym-wishlist-container-title-bar {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     3. SHARE + THREE DOTS - one right aligned row, as on desktop
     ========================================================================== */

  html body .swym-ui-component.swym-wishlist-page .swym-wishlist-detail-header,
  html body .swym-ui-component .swym-wishlist-detail-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 var(--w-gutter) !important;
    box-sizing: border-box !important;
  }

  html body .swym-ui-component.swym-wishlist-page .swym-action-container,
  html body .swym-ui-component .swym-action-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    gap: var(--w-icons-gap) !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  /* share first, dots second, matching desktop */
  html body .swym-ui-component .swym-share-btn {
    order: 1 !important;
  }

  html body .swym-ui-component .swym-wishlist-context-menu {
    order: 2 !important;
  }

  /* the 15px left margin from the older block would double the gap */
  html body .swym-ui-component .swym-share-btn,
  html body .swym-ui-component .swym-wishlist-context-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #000000 !important;
  }

  html body .swym-ui-component .swym-share-btn svg,
  html body .swym-ui-component .swym-wishlist-context-menu svg,
  html body .swym-ui-component .swym-wishlist-detail-header svg {
    width: var(--w-icons-size) !important;
    height: var(--w-icons-size) !important;
    fill: #000000 !important;
    stroke: #000000 !important;
    color: #000000 !important;
  }


  /* ==========================================================================
     4. ONE GREY LINE UNDER THE ICONS
     ========================================================================== */

  html body .swym-ui-component.swym-wishlist-page .swym-wishlist-detail-separator,
  html body .swym-ui-component .swym-wishlist-detail-separator,
  html body .swym-ui-component .swym-sfl-detail-separator {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    border-top: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
    margin: var(--w-rule-above) 0 var(--w-rule-below) 0 !important;
    padding: 0 !important;
  }
}
/* ============================================================================
   MASHRU - SAVED PAGE, CARD SIZE IN PIXELS   v5.8   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.7. Do NOT delete v5.6 or v5.7.
   Saved page only. Desktop and laptop are untouched.


   ############################################################################
   ##                                                                        ##
   ##   THE TWO NUMBERS YOU EDIT                                             ##
   ##                                                                        ##
   ##       --w-card-width    160px    WIDTH of the card and the photo       ##
   ##       --w-img-height    254px    HEIGHT of the photo                   ##
   ##                                                                        ##
   ##   The photo always fills the card, so the card width IS the image      ##
   ##   width. You do not set them separately.                               ##
   ##                                                                        ##
   ##   bigger width   =  wider cards, less space between the two columns    ##
   ##   bigger height  =  taller photos, more of the model visible           ##
   ##                                                                        ##
   ############################################################################


   ----------------------------------------------------------------------------
   HOW TO PICK A WIDTH WITHOUT BREAKING THE ROW
   ----------------------------------------------------------------------------
   Two cards, one gap between them, and one gutter on each side have to fit
   across the screen. The sum is:

       (--w-card-width x 2)  +  --w-gap  +  (--w-gutter x 2)

   Your phone is 390pt wide, and the current numbers come to exactly that:

       160 x 2  =  320
       + gap    =   30      ->  350
       + 20 x 2 =   40      ->  390   fits

   So if you make the cards wider, take the difference off --w-gap or
   --w-gutter, or the row will be wider than a smaller phone. As a safety net
   the tracks are written as minmax(0, width), which lets a card shrink rather
   than push the layout sideways on a narrow device. That means on a 375pt
   phone a 160px card quietly renders at about 152px. Nothing overflows, but
   the number you typed is a maximum, not a guarantee.


   ----------------------------------------------------------------------------
   COMMON EDITS
   ----------------------------------------------------------------------------
   Taller photos, same width:
       --w-img-height: 290px;

   Wider cards with a tighter gap:
       --w-card-width: 172px;
       --w-gap: 12px;              (172x2 + 12 + 40 = 396, still fine at 390
                                    because of the minmax safety net, but 168
                                    would be exact)

   Edge to edge, almost no margin:
       --w-card-width: 180px;
       --w-gap: 10px;
       --w-gutter: 10px;           (180x2 + 10 + 20 = 390)

   Keep matching the Ready-to-wear grid: that page uses --m-card-img-height
   (254px) and --m-grid-gap (30px). Change both pages together if you want
   them to stay identical.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOBS
     ========================================================================== */

  :root {
    /* the two main ones */
    --w-card-width: 160px;
    --w-img-height: 240px;

    /* spacing around them */
    --w-gap: 30px;     /* between the two columns */
    --w-gutter: 20px;  /* screen edge to the outer cards */
    --w-row-gap: 30px; /* between one row of cards and the next */
  }


  /* ==========================================================================
     1. THE GRID - two fixed width columns, centred
        minmax(0, ...) is the safety net described in the header. Replace it
        with a bare var(--w-card-width) only if you want the width enforced
        even when that means the row can overflow a small screen.
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-grid,
  html body ul.swym-wishlist-grid,
  html body .swym-ui-component.swym-wishlist-page .swym-wishlist-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, var(--w-card-width))) !important;
    justify-content: center !important;
    align-items: start !important;
    column-gap: var(--w-gap) !important;
    row-gap: var(--w-row-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--w-gutter) !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  html body .swym-wishlist-grid > li {
    display: block !important;
    width: 100% !important;
    max-width: var(--w-card-width) !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body .swym-wishlist-grid .swym-wishlist-item,
  html body .swym-wishlist-grid > li div.swym-wishlist-item {
    width: 100% !important;
    max-width: var(--w-card-width) !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     2. THE PHOTO - width follows the card, height is the knob
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-grid .swym-wishlist-image-wrapper,
  html body .swym-ui-component .swym-wishlist-grid a.swym-wishlist-image-wrapper,
  html body .swym-ui-component.swym-wishlist-page .swym-wishlist-image-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: var(--w-card-width) !important;
    min-width: 0 !important;
    height: var(--w-img-height) !important;
    min-height: var(--w-img-height) !important;
    max-height: var(--w-img-height) !important;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    margin: 0 0 var(--w-cap-gap, 8px) 0 !important;
    box-sizing: border-box !important;
  }

  /* the photo fills that box and crops from the centre top, so changing
     either knob never squashes or stretches the model */
  html body .swym-ui-component .swym-wishlist-grid .swym-wishlist-image-wrapper img,
  html body .swym-ui-component .swym-wishlist-grid img.swym-wishlist-image,
  html body .swym-ui-component.swym-wishlist-page img.swym-wishlist-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     3. CAPTION AND BUTTON - kept to the card width
        Nothing to edit here. These simply stop the text and the black bar
        from running wider than the photo when you change --w-card-width.
     ========================================================================== */

  html body .swym-wishlist-grid .swym-wishlist-item > span[id],
  html body .swym-wishlist-grid .swym-variant-title,
  html body .swym-wishlist-grid .swym-product-price,
  html body .swym-wishlist-grid button.swym-add-to-cart-btn {
    width: 100% !important;
    max-width: var(--w-card-width) !important;
    box-sizing: border-box !important;
  }
}
/* ============================================================================
   MASHRU - SAVED PAGE, HEADER ROW   v5.9   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.8. Do NOT delete v5.6 - v5.8.
   Saved page only. Desktop and laptop are untouched.


   THE TWO FIXES

   1. THE EXTRA GREY LINES
      Three separate elements were each drawing an edge: the title bar, the
      detail header and the separator. On desktop those sit at page width so
      only one of them reads as a line. On a phone they stack into the ladder
      you marked. Every border on the page is cleared here, then exactly one
      is drawn back on the separator, below the icons, as on desktop.

   2. SHARE AND DOTS NOT INLINE
      My earlier attempt set flex-direction on .swym-action-container. That
      only works if both icons are children of it, and on a phone Swym renders
      them nested one level deeper, so the rule had nothing to sort.

      This version does not try to guess the nesting. The wrappers between
      .swym-wishlist-detail and the icons are collapsed with display:contents,
      which removes them from the layout while keeping their children. Both
      icons then become direct children of one flex row, whatever Swym wrapped
      them in, and order values put share first and the dots second.


   ############################################################################
   ##  THE NUMBERS YOU EDIT - Section 0                                      ##
   ##                                                                        ##
   ##    --w-icons-gap     16px   space between the share icon and the dots  ##
   ##    --w-icons-size    18px   size of both icons                         ##
   ##    --w-icons-right   20px   dots to the right edge of the screen       ##
   ##                             keep this equal to --w-gutter so the dots  ##
   ##                             line up with the right edge of card 2      ##
   ##    --w-rule-above    14px   icons down to the grey line                ##
   ##    --w-rule-below    22px   grey line down to the first photo          ##
   ##    --w-title-gap     18px   "Saved" down to the icons                  ##
   ############################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOBS
     ========================================================================== */

  :root {
    --w-icons-gap: 16px;
    --w-icons-size: 18px;
    --w-icons-right: 20px;
    --w-rule-above: 14px;
    --w-rule-below: 22px;
    --w-title-gap: 18px;
  }


  /* ==========================================================================
     1. NO BORDERS ANYWHERE ON THE PAGE
        Blanket clear. The one line we want is drawn back in Section 4.
     ========================================================================== */

  html body .swym-ui-component.swym-wishlist-page,
  html body .swym-ui-component.swym-wishlist-page *,
  html body .swym-ui-component.swym-wishlist-page *::before,
  html body .swym-ui-component.swym-wishlist-page *::after,
  html body .swym-ui-component .swym-simple-wishlist-container,
  html body .swym-ui-component .swym-simple-wishlist-container * {
    border: 0 none !important;
    box-shadow: none !important;
  }

  /* the hidden "My Wishlist" bar and the tab strip must not reserve height */
  html body .swym-ui-component.swym-wishlist-page .swym-wishlist-container-title-bar {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .swym-ui-component ul.swym-htc-tabs {
    display: none !important;
  }


  /* ==========================================================================
     2. ONE FLEX ROW FOR THE WHOLE DETAIL BLOCK
        icons -> grey line -> grid, in that order
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-detail,
  html body .swym-ui-component .swym-simple-wishlist-detail {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    column-gap: var(--w-icons-gap) !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* THE KEY LINE: the wrappers vanish, their children stay.
     This is what puts the two icons on the same row without needing to know
     how deeply Swym nested them. */
  html body .swym-ui-component .swym-wishlist-detail-header,
  html body .swym-ui-component .swym-action-container {
    display: contents !important;
  }


  /* ==========================================================================
     3. THE TWO ICONS - share first, dots second
     ========================================================================== */

  html body .swym-ui-component .swym-share-btn,
  html body .swym-ui-component .swym-wishlist-context-menu {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    margin: var(--w-title-gap) 0 0 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #000000 !important;
    cursor: pointer !important;
  }

  html body .swym-ui-component .swym-share-btn {
    order: 1 !important;
  }

  html body .swym-ui-component .swym-wishlist-context-menu {
    order: 2 !important;
    margin-right: var(--w-icons-right) !important;
  }

  html body .swym-ui-component .swym-share-btn svg,
  html body .swym-ui-component .swym-wishlist-context-menu svg {
    width: var(--w-icons-size) !important;
    height: var(--w-icons-size) !important;
    fill: #000000 !important;
    stroke: #000000 !important;
    color: #000000 !important;
  }


  /* ==========================================================================
     4. THE SINGLE GREY LINE
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-detail-separator,
  html body .swym-ui-component .swym-sfl-detail-separator {
    order: 3 !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    margin: var(--w-rule-above) 0 var(--w-rule-below) 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================================
     5. THE GRID SITS BELOW THE LINE, FULL WIDTH
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-detail-content {
    order: 4 !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ----------------------------------------------------------------------------
   OPTIONAL - PUT THE DOTS ON THE LEFT AND SHARE ON THE RIGHT

   Desktop reads share, then dots. If you ever want them the other way round,
   delete the two comment markers below.

@media screen and (max-width: 749px) {
  html body .swym-ui-component .swym-share-btn {
    order: 2 !important;
    margin-right: var(--w-icons-right) !important;
  }
  html body .swym-ui-component .swym-wishlist-context-menu {
    order: 1 !important;
    margin-right: 0 !important;
  }
}

   ---------------------------------------------------------------------------- */
   /* ============================================================================
   MASHRU - SAVED PAGE, ICONS ON ONE LINE   v6.0   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.9. Keep v5.6 - v5.9 in place,
   this overrides the icon part of v5.9 and leaves everything else alone.
   Saved page only. Desktop and laptop are untouched.


   WHAT YOUR DEVTOOLS SCREENSHOT SHOWED

       div.swym-wishlist-detail-header
         h2.swym-wishlist-main-title            "My Wishlist", hidden
         div.swym-action-container
           button.swym-share-btn.swym-color-2   <- share lives in here
         div#swym-wishlist-context-menu         <- dots are OUTSIDE that div

   The dots are a SIBLING of .swym-action-container, not a child of it. Every
   attempt so far assumed the two icons shared a parent, so nothing could sort
   them into a row. On top of that, Swym's own stylesheet positions the share
   button, which is why it drifted down over the photos instead of following
   the flow.

   THE APPROACH THAT ACTUALLY HOLDS
   Stop trying to make them flex siblings. The header becomes a fixed height
   box, and each icon is pinned inside it with top: 50% and transform. Two
   elements both centred on the same box are on the same line by definition,
   regardless of nesting or of what Swym does to them. The dots are targeted
   by their id, which outranks anything class based.


   ############################################################################
   ##  THE NUMBERS YOU EDIT - Section 0                                      ##
   ##                                                                        ##
   ##    --w-icons-row     40px   height of the icon row                     ##
   ##                             bigger = more air above and below the two  ##
   ##    --w-icons-gap     18px   space between share and the dots           ##
   ##    --w-icons-size    18px   size of both icons                         ##
   ##    --w-icons-right   20px   dots to the right edge of the screen       ##
   ##                             keep equal to --w-gutter so they line up   ##
   ##                             with the right edge of the second card     ##
   ##    --w-icons-shift    0px   nudges BOTH icons up or down together      ##
   ##                             negative = up, positive = down             ##
   ############################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOBS
     ========================================================================== */

  :root {
    --w-icons-row: 40px;
    --w-icons-gap: 18px;
    --w-icons-size: 18px;
    --w-icons-right: 20px;
    --w-icons-shift: 0px;
  }


  /* ==========================================================================
     1. THE HEADER BECOMES THE BOX THE ICONS ARE PINNED INSIDE
        The extra class in the selector is there to outrank the
        display:contents that v5.9 put on this element.
     ========================================================================== */

  html body .swym-ui-component.swym-wishlist-page .swym-wishlist-detail .swym-wishlist-detail-header,
  html body .swym-ui-component .swym-simple-wishlist-detail .swym-wishlist-detail-header,
  html body .swym-ui-component .swym-wishlist-detail .swym-wishlist-detail-header {
    display: block !important;
    position: relative !important;
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--w-icons-row) !important;
    min-height: var(--w-icons-row) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* the wrapper around the share button contributes nothing now */
  html body .swym-ui-component.swym-wishlist-page .swym-wishlist-detail-header .swym-action-container,
  html body .swym-ui-component .swym-wishlist-detail-header .swym-action-container {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  /* the hidden "My Wishlist" heading must not take up space */
  html body .swym-ui-component .swym-wishlist-detail-header .swym-wishlist-main-title {
    display: none !important;
  }


  /* ==========================================================================
     2. SHARE - pinned left of the dots
        Long selector on purpose: it has to beat Swym's own positioning.
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-detail-header .swym-action-container button.swym-share-btn,
  html body .swym-ui-component .swym-wishlist-detail-header button.swym-share-btn.swym-color-2,
  html body .swym-ui-component .swym-wishlist-detail-header .swym-share-btn {
    position: absolute !important;
    top: calc(50% + var(--w-icons-shift)) !important;
    bottom: auto !important;
    left: auto !important;
    right: calc(var(--w-icons-right) + var(--w-icons-size) + var(--w-icons-gap)) !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--w-icons-size) !important;
    height: var(--w-icons-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    color: #000000 !important;
    cursor: pointer !important;
    z-index: 3 !important;
  }


  /* ==========================================================================
     3. THE DOTS - pinned to the right edge
        Targeted by id, which no class based rule can outrank.
     ========================================================================== */

  html body #swym-wishlist-context-menu,
  html body .swym-ui-component #swym-wishlist-context-menu,
  html body .swym-ui-component .swym-wishlist-detail-header .swym-wishlist-context-menu {
    position: absolute !important;
    top: calc(50% + var(--w-icons-shift)) !important;
    bottom: auto !important;
    left: auto !important;
    right: var(--w-icons-right) !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--w-icons-size) !important;
    height: var(--w-icons-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    color: #000000 !important;
    cursor: pointer !important;
    z-index: 3 !important;
  }


  /* ==========================================================================
     4. THE ICON GRAPHICS
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-detail-header .swym-share-btn .swym-icon,
  html body .swym-ui-component .swym-wishlist-detail-header .swym-share-btn span,
  html body .swym-ui-component #swym-wishlist-context-menu .swym-icon,
  html body .swym-ui-component #swym-wishlist-context-menu span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  html body .swym-ui-component .swym-wishlist-detail-header .swym-share-btn svg,
  html body .swym-ui-component #swym-wishlist-context-menu svg {
    width: var(--w-icons-size) !important;
    height: var(--w-icons-size) !important;
    display: block !important;
    fill: #000000 !important;
    stroke: #000000 !important;
    color: #000000 !important;
  }


  /* ==========================================================================
     5. THE GREY LINE STAYS DIRECTLY UNDER THE ICON ROW
     ========================================================================== */

  html body .swym-ui-component .swym-wishlist-detail-separator,
  html body .swym-ui-component .swym-sfl-detail-separator {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    margin: var(--w-rule-above, 14px) 0 var(--w-rule-below, 22px) 0 !important;
    padding: 0 !important;
  }

  html body .swym-ui-component .swym-wishlist-detail-content {
    order: 3 !important;
  }
}


/* ---- Policy pages: mobile fix ---- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

.shopify-policy__container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 20px 48px !important;
  box-sizing: border-box !important;
}

.shopify-policy__title {
  text-align: center !important;
}

.shopify-policy__body,
.shopify-policy__body .rte {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.shopify-policy__body * {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

.shopify-policy__body p,
.shopify-policy__body li {
  text-align: left !important;
  margin: 0 0 12px !important;
}

.shopify-policy__body h2 {
  margin: 24px 0 10px !important;
  font-weight: 600 !important;
}

.shopify-policy__body ul {
  padding-left: 18px !important;
  margin: 0 0 12px !important;
}

@media screen and (max-width: 749px) {
  .shopify-policy__title h1 {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .shopify-policy__body,
  .shopify-policy__body .rte,
  .shopify-policy__body p,
  .shopify-policy__body li,
  .shopify-policy__body a,
  .shopify-policy__body strong,
  .shopify-policy__body span,
  .shopify-policy__body div {
    font-size: 10px !important;
    line-height: 1.7 !important;
  }

  .shopify-policy__body h2 {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}
/* ============================================================================
   MASHRU - CART PAGE FONT + FOOTER SPACING   v5.6   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.5.
   Cart PAGE (/cart) only. The drawer, desktop and laptop are untouched.


   ############################################################################
   ##  KNOBS - SECTION 0                                                     ##
   ############################################################################

     --m-cart-font       12px   size of ALL text in the cart rows and totals
     --m-cart-rule-below 44px   already yours, from v4.6. It now controls
                                BOTH the gap above Subtotal and the gap below
                                it, so the two stay equal automatically.


   THE THREE FIXES

   1. PRODUCT NAME IN THE WRONG FONT
      Your markup is

          <a class="cart-item__name h4 break">Bustier Petal Volume Dress</a>

      That "h4" class maps to

          h4, .h4 { font-family: var(--font-heading-family); }

      while "Color:" and everything else render in var(--font-body-family).
      Two different families, which is the difference you are seeing. The name
      is pointed at the body family here.

   2. ONE TEXT SIZE
      Name, price, Color, Size, Quantity, Remove and Subtotal are all put on
      --m-cart-font, so nothing can drift out of step later.

   3. SUBTOTAL SPACING
      Currently:
          grey line -> Subtotal      44px   (--m-cart-rule-below, v4.6)
          Subtotal  -> checkout       14px   (v4.3, .totals margin-bottom)

      The second one is tied to the same variable, so both gaps match and both
      move together if you change it.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOB
     ========================================================================== */

  :root {
    --m-cart-font: 12px;
  }


  /* ==========================================================================
     1. PRODUCT NAME - body font, same size as "Color"
     ========================================================================== */

  html body #cart .cart-item .cart-item__name,
  html body #cart .cart-item a.cart-item__name,
  html body #cart .cart-item a.cart-item__name.h4,
  html body #cart .cart-item .cart-item__name.h4.break {
    font-family: var(--font-body-family) !important;
    font-size: var(--m-cart-font) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    text-decoration: none !important;
    word-break: normal !important;
  }


  /* ==========================================================================
     2. EVERY OTHER PIECE OF TEXT - same family, same size
     ========================================================================== */

  html body #cart .cart-item .product-option,
  html body #cart .cart-item .product-option .money,
  html body #cart .cart-item .product-option span,
  html body #cart .cart-item dt,
  html body #cart .cart-item dd,
  html body #cart .cart-item .price,
  html body #cart .cart-item .price-item,
  html body #cart .cart-item .price__regular,
  html body #cart .cart-item .cart-item__price-wrapper,
  html body #cart .cart-item .quantity__input,
  html body #cart .cart-item .quantity__button,
  html body #cart .cart-item .quantity::before,
  html body #cart .cart-item cart-remove-button .button,
  html body #cart .cart-item cart-remove-button .button::after,
  html body .cart__footer .totals,
  html body .cart__footer .totals__subtotal,
  html body .cart__footer .totals__subtotal-value,
  html body .cart__footer .totals__total,
  html body .cart__footer .totals__total-value {
    font-family: var(--font-body-family) !important;
    font-size: var(--m-cart-font) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #000000 !important;
  }


  /* ==========================================================================
     3. FOOTER - equal space above and below Subtotal
        v4.6 sets .cart__footer padding-top to --m-cart-rule-below, which is
        the gap ABOVE. The same variable is used below.
     ========================================================================== */

  html body .cart__footer .totals {
    margin: 0 0 var(--m-cart-rule-below) 0 !important;
    padding: 0 !important;
  }

  html body .cart__footer .cart__ctas,
  html body .cart__footer .cart__checkout-button {
    margin-top: 0 !important;
  }
}
/* ============================================================================
   MASHRU - QUANTITY ROW SPACING   v5.7   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v5.6.
   Cart PAGE (/cart) only. The drawer shows a static "Qty: N" with no stepper,
   so it is unaffected. Desktop and laptop untouched.


   ############################################################################
   ##  KNOBS - SECTION 0                                                     ##
   ############################################################################

     --m-qty-gap        8px   the spacing used on BOTH sides of "Quantity:"
                              raise it and every gap in the row grows together

     --m-qty-input-w   12px   width of the box holding the number
                              raise to 20px if you ever allow 2 digit
                              quantities, then set the pull below to -13px

     --m-qty-plus-pull  -5px  fine tune for the gap between the number and "+"
                              more negative = "+" moves left


   WHY THE GAPS WERE UNEVEN

   The row is minus / "Quantity:" / input / plus, laid out with a single flex
   gap of 8px. But the number sits inside an 18px wide input with the text
   CENTRED, so about 5px of empty box sits between the label and the digit:

       -  [8px]  Quantity:  [8px][5px empty] 1 [5px empty][8px]  +
                            \_____________/
                              reads as 13px

   The "-" has no such box, so its gap looked correct while the number's
   looked too wide. Nothing was wrong with the gap value itself.

   THE FIX
   The flex gap is set to zero and each element carries its own margin, so the
   spacing is stated explicitly rather than inferred. The digit is left
   aligned with no padding, so it starts exactly --m-qty-gap after the label,
   matching the "-" side. The pull knob then trims the leftover box width on
   the right so "+" sits the same distance from the digit.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOBS
     ========================================================================== */

  :root {
    --m-qty-gap: 13px;
    --m-qty-input-w: 12px;
    --m-qty-plus-pull: -5px;
  }


  /* ==========================================================================
     1. THE ROW - spacing by margin, not by gap
     ========================================================================== */

  html body #cart .cart-item .quantity {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* the minus button */
  html body #cart .cart-item .quantity__button:first-of-type {
    order: 1 !important;
    margin: 0 var(--m-qty-gap) 0 0 !important;
    padding: 0 !important;
  }

  /* the word "Quantity:" */
  html body #cart .cart-item .quantity::before {
    order: 2 !important;
    margin: 0 var(--m-qty-gap) 0 0 !important;
    padding: 0 !important;
  }

  /* the number - left aligned so it starts where the margin ends */
  html body #cart .cart-item .quantity__input,
  html body #cart .cart-item input.quantity__input {
    order: 3 !important;
    width: var(--m-qty-input-w) !important;
    min-width: var(--m-qty-input-w) !important;
    max-width: var(--m-qty-input-w) !important;
    flex: 0 0 var(--m-qty-input-w) !important;
    text-align: left !important;
    text-indent: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* the plus button */
  html body #cart .cart-item .quantity__button:last-of-type {
    order: 4 !important;
    margin: 0 0 0 calc(var(--m-qty-gap) + var(--m-qty-plus-pull)) !important;
    padding: 0 !important;
  }
}
/* ============================================================================
   MASHRU - CART PAGE IMAGE HEIGHT   v4.9   (max-width: 749px ONLY)

   DELETE v4.8 before pasting this. Keep v4.2 - v4.7 in place.
   Paste at the VERY END of base.css.
   Cart page (/cart) only. Drawer, desktop and laptop untouched.

   WHAT IT DOES
   Matches your red guide lines: the image top starts level with the product
   name, and the bottom sits just under the "Remove" line.

       ___________________________  <- red line, image top starts here
       [img]  Bustier Petal Volume Dress
       [img]  Rs.16,000.00
       [img]  Size: XXS
       [img]  Color: Olive
       [img]  Quantity: 2
       [img]  Remove
       ___________________________  <- red line, image bottom ends here

   NOTHING ELSE MOVES
   The image is positioned absolutely inside the row instead of sitting in a
   grid track. That means its height can be anything at all and the name,
   price, Size, Color, Quantity and Remove spacing stays exactly as it is now.
   The text column, the gutter and the column gap are all unchanged.

   ############################################################################
   ##  THE TWO NUMBERS YOU EDIT                                              ##
   ##                                                                        ##
   ##    --m-cart-img-w     88px   image WIDTH   (unchanged)                 ##
   ##    --m-cart-img-h    162px   image HEIGHT                              ##
   ##                                                                        ##
   ##    bigger height = image grows DOWNWARDS, top stays on the name        ##
   ##    smaller height = bottom edge moves up                               ##
   ##                                                                        ##
   ##    The top is locked to the name line, so the height knob only ever    ##
   ##    moves the bottom edge. Nudge it a few px either way if your device  ##
   ##    lands slightly off the red line.                                    ##
   ############################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-cart-img-w: 88px;
    --m-cart-img-h: 157px;
  }

  /* 1. THE ROW - anchor for the image, and tall enough to hold it */
  html body #cart .cart-items tr.cart-item,
  html body #cart tr.cart-item {
    position: relative !important;
    min-height: var(--m-cart-img-h) !important;
  }

  /* 2. THE IMAGE - out of the grid flow, pinned to the top left of the row.
        top: 0 is the name line, so the two always start together. */
  html body #cart .cart-item > td.cart-item__media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    display: block !important;
    width: var(--m-cart-img-w) !important;
    max-width: var(--m-cart-img-w) !important;
    height: var(--m-cart-img-h) !important;
    min-height: var(--m-cart-img-h) !important;
    max-height: var(--m-cart-img-h) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. THE CONTAINER FILLS THAT BOX */
  html body #cart .cart-item .cart-item__image-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 4. THE PHOTO FILLS IT, CROPPED FROM THE CENTRE, NEVER SQUASHED */
  html body #cart .cart-item .cart-item__image,
  html body #cart .cart-item .cart-item__media img {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ============================================================================
   PDP SIZE ROW - SPACING + SELECTED / AVAILABLE / UNAVAILABLE   v6.1
   (max-width: 749px ONLY)

   Paste at the VERY END of base.css. Nothing needs deleting.
   Product detail page only. Desktop and laptop are untouched.


   WHAT THIS DOES

   1. Spreads XXS XS S M L XL out with the same open spacing as the reference
      (30 32 34 36 38 40 ...), instead of the cramped row you have now.
   2. Selected size  -> black, bold, underlined  (same as desktop).
   3. Available size -> black.
   4. Unavailable    -> grey.


   WHY MOBILE LOOKED DIFFERENT FROM DESKTOP

   base.css sets the sizes grey for ALL screens:

       .product-form__input--pill input[type=radio]+label {
         color: #757575 !important;
       }

   and then turns them black, and the checked one bold, only inside

       @media screen and (min-width: 750px) { ... }

   The same media query also holds the spacing:

       .product-form__input--pill input[type=radio]+label {
         margin: 0.7rem 2.5rem .2rem 0 !important;   <- the 2.5rem is the gap
       }

   So laptop got the spacing and the colours, the phone got neither. Both are
   rebuilt here for mobile, with the gap moved off the label margin and onto
   the row's column-gap, which keeps the spacing even and stops the last size
   carrying a trailing margin.


   ############################################################################
   ##  THE KNOBS - SECTION 0                                                 ##
   ##                                                                        ##
   ##    --m-size-gap           30px   space BETWEEN each size               ##
   ##                                  bigger number = more spread out       ##
   ##                                  the reference sits around 30 to 40px  ##
   ##                                                                        ##
   ##    --m-size-row-gap        8px   space between lines IF the sizes ever ##
   ##                                  wrap onto a second row                ##
   ##                                                                        ##
   ##    --m-size-font          10px   size text                             ##
   ##    --m-size-active-weight  800   how bold the selected size is         ##
   ##    --m-size-color      #000000   available sizes                       ##
   ##    --m-size-unavailable #757575  sold out sizes                        ##
   ############################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     0. THE KNOBS
     ========================================================================== */

  :root {
    --m-size-gap: 35px;
    --m-size-row-gap: 8px;
    --m-size-font: 10px;
    --m-size-active-weight: 800;
    --m-size-color: #000000;
    --m-size-unavailable: #757575;
  }


  /* ==========================================================================
     1. THE ROW - spacing lives here, once, as column-gap
     ========================================================================== */

  html body fieldset.product-form__input--pill,
  html body .product-form__input--pill {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: var(--m-size-gap) !important;
    row-gap: var(--m-size-row-gap) !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }


  /* ==========================================================================
     2. EACH SIZE - no margin, no padding, no box
        Any margin left here would be added on top of the column-gap and the
        row would go uneven again.
     ========================================================================== */

  html body .product-form__input--pill input[type='radio'] + label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: var(--m-size-font) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }


  /* ==========================================================================
     3. AVAILABLE, NOT SELECTED - black
     ========================================================================== */

  html body .product-form__input--pill
    input[type='radio']:not(:checked):not(:disabled):not(.disabled) + label {
    color: var(--m-size-color) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
  }


  /* ==========================================================================
     4. SELECTED - black, bold, underlined
     ========================================================================== */

  html body .product-form__input--pill input[type='radio']:checked + label {
    color: var(--m-size-color) !important;
    font-weight: var(--m-size-active-weight) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    background-color: transparent !important;
    border: 0 none !important;
  }


  /* ==========================================================================
     5. UNAVAILABLE - grey
        Four selectors because the theme marks a sold out size in more than
        one way depending on the product: the input can be disabled, or the
        input or the label can carry a class.
     ========================================================================== */

  html body .product-form__input--pill input[type='radio']:disabled + label,
  html body .product-form__input--pill input[type='radio'].disabled + label,
  html body .product-form__input--pill input[type='radio'] + label.disabled,
  html body .product-form__input--pill input[type='radio'] + label.is-unavailable {
    color: var(--m-size-unavailable) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    cursor: not-allowed !important;
  }

  /* if a sold out size happens to be the selected one, it stays underlined
     so the shopper can still see which size is active */
  html body .product-form__input--pill input[type='radio']:checked:disabled + label,
  html body .product-form__input--pill input[type='radio']:checked.disabled + label {
    color: var(--m-size-unavailable) !important;
    font-weight: var(--m-size-active-weight) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }


  /* ==========================================================================
     6. SIZE GUIDE - stays on its own line underneath, as set in v4.0
        Repeated here because the new row-gap would otherwise sit on top of
        its margin and push it down.
     ========================================================================== */

  html body .product-form__input--pill .size-guide-inline-wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 99 !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: var(--m-size-guide-gap, 14px) !important;
  }
}


/* ----------------------------------------------------------------------------
   OPTIONAL A - SPREAD THE SIZES ACROSS THE FULL WIDTH

   The reference runs the numbers right across the column. If you want that
   instead of a fixed gap, delete the two comment markers below. The sizes will
   then space themselves evenly edge to edge, whatever the product's size list.

@media screen and (max-width: 749px) {
  html body fieldset.product-form__input--pill {
    justify-content: space-between !important;
    column-gap: 8px !important;
  }
  html body .product-form__input--pill .size-guide-inline-wrapper {
    justify-content: flex-start !important;
  }
}

   ----------------------------------------------------------------------------
   OPTIONAL B - STRIKE THROUGH THE SOLD OUT SIZES

   The reference draws a line through 30, 42 and 44. Your desktop only greys
   them. If you want the line on mobile too, delete the two comment markers.

@media screen and (max-width: 749px) {
  html body .product-form__input--pill input[type='radio']:disabled + label,
  html body .product-form__input--pill input[type='radio'].disabled + label,
  html body .product-form__input--pill input[type='radio'] + label.disabled {
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
  }
}

   ---------------------------------------------------------------------------- */
   /* ============================================================================
   MASHRU - EMPTY SAVED PAGE TEXT   v6.2   (all screen sizes)

   Paste at the VERY END of base.css.
   If you already pasted the earlier v6.2, DELETE that one first. This replaces
   it. The old version guessed .swym-empty-wishlist-message, which does not
   exist on your build, so it did nothing to the paragraph.

   CONFIRMED MARKUP from your DevTools:

       div.swym-empty-wishlist-container
         h3.swym-empty-wishlist-title.swym-heading.swym-heading-1
              "Love It? Add To My Wishlist"
         p.swym-empty-wishlist-text.swym-text.swym-text-1
              "My Wishlist allows you to keep track of..."
         button.swym-empty-wishlist-continue-btn
              "Continue shopping"

   HOW IT WORKS
   Swym prints that text from its own script, so CSS cannot delete it. The
   original is collapsed with font-size: 0 so the text node takes no space, and
   the replacement is printed by a ::after with its own size. The elements stay
   in the DOM, so nothing Swym does breaks.

   The selectors repeat all three of Swym's classes on purpose. Swym styles
   these from an injected <style> block with a long grouped selector, and a
   shorter selector of mine would lose to it no matter how far down the file
   it sits.

   ----------------------------------------------------------------------------
   TO EDIT THE WORDING LATER
   ----------------------------------------------------------------------------
   Change the text inside the content: "..." lines. Two rules:
     - keep the straight quotes at each end
     - for curly quotes and apostrophes use escapes, not the character itself:
           \2019  apostrophe        you\2019re
           \201C  opening quote
           \201D  closing quote
   ============================================================================ */

/* ---------- 1. THE HEADING ---------- */

html body .swym-ui-component .swym-empty-wishlist-container h3.swym-empty-wishlist-title.swym-heading.swym-heading-1,
html body .swym-ui-component h3.swym-empty-wishlist-title.swym-heading.swym-heading-1 {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}

html body .swym-ui-component .swym-empty-wishlist-container h3.swym-empty-wishlist-title.swym-heading.swym-heading-1::after,
html body .swym-ui-component h3.swym-empty-wishlist-title.swym-heading.swym-heading-1::after {
  content: "Your saved pieces";
  display: block !important;
  font-family: var(--font-body-family) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  color: #000000 !important;
  text-align: center !important;
  text-transform: none !important;
}

/* ---------- 2. THE PARAGRAPH ---------- */

html body .swym-ui-component .swym-empty-wishlist-container p.swym-empty-wishlist-text.swym-text.swym-text-1,
html body .swym-ui-component p.swym-empty-wishlist-text.swym-text.swym-text-1 {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .swym-ui-component .swym-empty-wishlist-container p.swym-empty-wishlist-text.swym-text.swym-text-1::after,
html body .swym-ui-component p.swym-empty-wishlist-text.swym-text.swym-text-1::after {
  content: "Save the pieces you are considering and keep them together in one place. Your selections will remain here, allowing you to return to them at any time and continue exploring the collection at your own pace.";
  display: block !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  font-family: var(--font-body-family) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  color: #000000 !important;
  text-align: center !important;
}

/* ---------- 3. THE BLOCK AROUND THEM ---------- */

html body .swym-ui-component .swym-empty-wishlist-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* space between the paragraph and the Continue shopping button */
html body .swym-ui-component .swym-empty-wishlist-continue-btn {
  margin-top: 28px !important;
}

/* ---------- 4. MOBILE ---------- */

@media screen and (max-width: 749px) {
  html body .swym-ui-component .swym-empty-wishlist-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  html body .swym-ui-component .swym-empty-wishlist-container p.swym-empty-wishlist-text.swym-text.swym-text-1::after,
  html body .swym-ui-component p.swym-empty-wishlist-text.swym-text.swym-text-1::after {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }
}
/* ============================================================================
   MASHRU / UMARA - PDP NAME, PRICE AND SIZE TYPE   v6.3   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   Product detail page only. Grids, cart and wishlist are untouched.

   ############################################################################
   ##  THE THREE NUMBERS YOU EDIT  (Section 0)                               ##
   ##                                                                        ##
   ##    --u-name-price-gap   4px    space between the product NAME and the  ##
   ##                                PRICE                                   ##
   ##                                smaller = they sit closer together      ##
   ##                                0px is allowed if you want them flush   ##
   ##                                                                        ##
   ##    --u-price-font      13px    PRICE text size                         ##
   ##                                13px is the product name size, so the   ##
   ##                                two now match. Change BOTH lines below  ##
   ##                                if you ever resize the name as well.    ##
   ##                                                                        ##
   ##    --u-size-font       12px    XXS XS S M L XL text size               ##
   ##                                was 10px. Try 11px or 13px to taste.    ##
   ############################################################################

   NOTES ON WHAT THIS OVERRIDES

   1. The gap knob replaces --m-name-to-price-gap from the v3.9 block. Edit it
      HERE from now on, the v3.9 value no longer has any effect.

   2. The gap is set as margin-bottom on the title, not margin-top on the
      price. base.css has

          #price-template--25904881434935__main { margin-top: 0px !important; }

      An ID selector outranks any class rule, so a margin-top knob could never
      win. Putting the space on the title sidesteps that completely.

   3. The price size fights three separate rules (10px, 12px and a .price-item
      rule), which is why the selectors below are long. They are scoped to
      .product__info-container so collection cards and the cart keep their own
      smaller price sizing.
   ============================================================================ */

/* ==========================================================================
   0. THE KNOBS
   ========================================================================== */

:root {
  --u-name-price-gap: 4px;
  --u-price-font: 13px;
  --u-size-font: 12px;
}


/* ==========================================================================
   1. NAME TO PRICE SPACING
      Everything in the chain is flattened first, then the gap is set once,
      so the number you type is the distance you actually get.
   ========================================================================== */

html body .product__info-container .product__title,
html body .product__info-container div.product__title {
  margin-top: 0 !important;
  margin-bottom: var(--u-name-price-gap) !important;
  padding-bottom: 0 !important;
}

html body .product__info-container .product__title h1,
html body .product__info-container .product__title h2 {
  margin: 0 !important;
  padding: 0 !important;
}

html body .product__info-container [id^='price-template--'],
html body .product__info-container .price,
html body .product__info-container .price__container,
html body .product__info-container .price__regular {
  padding-top: 0 !important;
}


/* ==========================================================================
   2. PRICE FONT SIZE
   ========================================================================== */

html body .product__info-container .price,
html body .product__info-container .price .price-item,
html body .product__info-container .price__regular .price-item--regular,
html body .product__info-container .price__sale .price-item,
html body .product__info-container [id^='price-template--'] .price-item,
html body .product__info-container [id^='price-template--'] span {
  font-size: var(--u-price-font) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #000000 !important;
}


/* ==========================================================================
   3. SIZE ROW FONT SIZE  (XXS XS S M L XL)
      Selected, available and sold out states are all covered, so they stay
      the same size as each other.
   ========================================================================== */

html body fieldset.product-form__input--pill input[type='radio'] + label,
html body fieldset.product-form__input--pill input[type='radio']:checked + label,
html body fieldset.product-form__input--pill input[type='radio']:disabled + label,
html body fieldset.product-form__input--pill input[type='radio'].disabled + label,
html body fieldset.product-form__input--pill label {
  font-size: var(--u-size-font) !important;
  line-height: 1.2 !important;
}
/* ============================================================================
   MASHRU / UMARA - PRE-ORDER BADGE POSITION + SIZE   v6.4   (max-width: 749px)

   >>> If you already pasted the earlier v6.4, DELETE it before pasting this.
   Paste at the VERY END of base.css.
   Collection and homepage product cards only. Desktop and laptop untouched.

   ############################################################################
   ##  THE THREE NUMBERS YOU EDIT                                            ##
   ##                                                                        ##
   ##    --m-preorder-top     6px   distance from the TOP edge of the image  ##
   ##    --m-preorder-left    8px   distance from the LEFT edge of the image ##
   ##    --m-preorder-font   10px   "Pre-Order" text size                    ##
   ##                                                                        ##
   ##    smaller top/left = badge moves closer to the corner                 ##
   ##    0px is allowed on either one if you want it flush                   ##
   ##                                                                        ##
   ##    The top and left values are the ACTUAL distances you see. The        ##
   ##    badge's own padding is zeroed in Section 2, so the number you type   ##
   ##    is the gap you get. Before this block the badge carried 4px top and  ##
   ##    10px left of padding on top of its 10px offset, which is why it sat  ##
   ##    about 20px in from the corner rather than 10px.                      ##
   ############################################################################

   TWO RULES WERE POSITIONING IT

       .preorder-badge-card { top: 10px; left: 10px; padding: 4px 10px; }
       .preorder-badge, .rectangle { top: 10px; margin-right: 445px; }

   That 445px right margin was written for a desktop card. On a phone the card
   is about 160px wide, so it can squeeze or shift the badge unpredictably.
   It is cleared below along with every other stray offset.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* ==========================================================================
     1. THE KNOBS
     ========================================================================== */

  :root {
    --m-preorder-top: 6px;
    --m-preorder-left: 5px;
    --m-preorder-font: 10px;
  }


  /* ==========================================================================
     2. THE BADGE - pinned to the top left of the image
     ========================================================================== */

  html body .preorder-badge-card,
  html body .card .preorder-badge-card,
  html body .card-wrapper .preorder-badge-card,
  html body .preorder-badge,
  html body .rectangle {
    position: absolute !important;
    top: var(--m-preorder-top) !important;
    left: var(--m-preorder-left) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 5 !important;

    /* padding and margins zeroed so the knobs above are the real distances */
    margin: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;

    display: block !important;
    width: auto !important;
    max-width: calc(100% - (var(--m-preorder-left) * 2)) !important;

    font-size: var(--m-preorder-font) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    color: #666666 !important;
    text-transform: capitalize !important;
    white-space: nowrap !important;

    background: transparent !important;
    border: none !important;
    pointer-events: none !important;
  }
}
/* ============================================================================
   MASHRU - JOURNAL HEADING FONT   v6.5   (all screen sizes)

   base.css sets h1..h6 to "Assistant, sans-serif !important", which was
   striking out the Times New Roman declaration in journal-listing:1435.
   A class + element selector with !important outranks that bare h1 rule.
   ============================================================================ */

html body .journal-heading h1,
html body .mj-article .journal-heading h1 {
  font-family: 'Times New Roman', Times, serif !important;
  font-size: 21px !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
  color: #000000 !important;
}
/* ============================================================================
   MASHRU - CART PRODUCT NAME FONT   v6.6   (all screen sizes)

   Beats two things:
     1. h4, .h4 { font-family: var(--font-heading-family); }   (Nimbus Sans)
     2. the v5.6 mobile rule that forces var(--font-body-family)

   Specificity here is 1 ID + 5 classes + 4 elements, higher than v5.6's
   1 ID + 3 classes + 2 elements, and it sits later in the file, so nothing
   currently in base.css can override it.
   ============================================================================ */

html body #cart .cart-items .cart-item td.cart-item__details a.cart-item__name.h4,
html body #cart .cart-items .cart-item td.cart-item__details a.cart-item__name.h4.break,
html body #CartDrawer-CartItems .cart-item td.cart-item__details a.cart-item__name.h4,
html body #CartDrawer-CartItems .cart-item td.cart-item__details a.cart-item__name.h4.break {
  font-family: Assistant, sans-serif !important;
}
/* ============================================================================
   MASHRU - PDP PRE-ORDER BADGE POSITION   v6.7   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   Product DETAIL page only. Collection and homepage cards keep v6.4.

   ##########################################################################
   ##  THE NUMBERS YOU EDIT - Section 0                                    ##
   ##                                                                      ##
   ##    --pdp-preorder-left   12px   gap from the LEFT edge of the photo  ##
   ##    --pdp-preorder-top    12px   gap from the TOP edge of the photo   ##
   ##    --pdp-preorder-font   11px   "Pre-Order" text size                ##
   ##                                                                      ##
   ##    smaller left  =  badge moves further LEFT                         ##
   ##    smaller top   =  badge moves further UP                           ##
   ##    0px is allowed on either one if you want it flush to the corner   ##
   ##                                                                      ##
   ##    These are the ACTUAL distances you see on screen. The badge's own ##
   ##    padding and margins are zeroed in Section 2, so nothing is added  ##
   ##    on top of the number you type.                                    ##
   ##                                                                      ##
   ##    Mobile has its own pair in Section 3, edit those separately.      ##
   ##########################################################################
   ============================================================================ */

/* ==========================================================================
   0. THE KNOBS
   ========================================================================== */

:root {
  --pdp-preorder-left: 12px;
  --pdp-preorder-top: 12px;
  --pdp-preorder-font: 11px;
}


/* ==========================================================================
   1. THE ANCHOR
      An absolutely positioned badge measures from its nearest positioned
      ancestor. Without this it would measure from the whole page instead of
      from the photo, and the knobs would drift as the layout changes.
   ========================================================================== */

html body .product__media-wrapper .product__modal-opener,
html body .product__media-wrapper .product-media-container,
html body .product__media-list .product__media-item,
html body [class*='preorder-container-'] {
  position: relative !important;
}


/* ==========================================================================
   2. THE BADGE
   ========================================================================== */

html body .product__media-wrapper .preorder-badge,
html body .product__media-wrapper .preorder-badge.rectangle,
html body .product__media-list .preorder-badge,
html body .product__modal-opener .preorder-badge {
  position: absolute !important;
  top: var(--pdp-preorder-top) !important;
  left: var(--pdp-preorder-left) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 5 !important;

  /* the 445px right margin and all padding cleared, so the knobs are exact */
  margin: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;

  display: block !important;
  width: auto !important;
  max-width: calc(100% - (var(--pdp-preorder-left) * 2)) !important;

  font-family: var(--font-body-family) !important;
  font-size: var(--pdp-preorder-font) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
  color: #666666 !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;

  /* the green inline background needs !important to be cleared */
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  pointer-events: none !important;
}


/* ==========================================================================
   3. MOBILE - its own pair of numbers
   ========================================================================== */

@media screen and (max-width: 749px) {
  :root {
    --pdp-preorder-left: 8px;
    --pdp-preorder-top: 8px;
    --pdp-preorder-font: 10px;
  }
}
/* ============================================================================
   MASHRU - READY-TO-WEAR HEADING SIZE   v6.8   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   Collection page heading only. Body copy, product cards and filters are
   untouched.

   ##########################################################################
   ##  THE NUMBER YOU EDIT                                                 ##
   ##                                                                      ##
   ##    --rtw-heading-font   12px   size of the "Ready-to-wear" heading   ##
   ##                                                                      ##
   ##    bigger number = larger heading                                    ##
   ##########################################################################

   WHY THE PREFIX IS NEEDED
   The 10px comes from an inline <style> block inside the collection template
   (ready-to-wear:1584), which loads AFTER base.css. A matching
   ".rtw-hero h1" rule of yours would tie on specificity and lose on source
   order, so "html body" is added to outrank it outright.

   The v2.3 mobile block already targets this element for width and margins.
   It sets no font-size, so the two do not conflict.
   ============================================================================ */

:root {
  --rtw-heading-font: 12px;
}

html body .rtw-hero h1,
html body .rtw-hero .rtw-hero h1 {
  font-size: var(--rtw-heading-font) !important;
  line-height: 1.5 !important;
}
/* ============================================================================
   MASHRU - FOOTER NEWSLETTER INTRO TEXT   v6.9   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   The "Subscribe for early access..." line in the footer only. The email
   field, the arrow and the rest of the footer are untouched.

   ##########################################################################
   ##  THE NUMBER YOU EDIT                                                 ##
   ##                                                                      ##
   ##    --footer-newsletter-font   12px                                   ##
   ##                                                                      ##
   ##    bigger number = larger text                                       ##
   ##########################################################################

   WHY IT NEEDED ITS OWN RULE
   The line is a bare <small> element with no class, so no rule in base.css
   reaches it. Its size was coming from the browser's default stylesheet:

       small { font-size: smaller; }

   "smaller" is a relative keyword, so it always computes to roughly 80% of
   whatever the parent is, and it sits ON the element itself rather than
   being inherited. That means the footer's own 12px rules could never reach
   it either. An explicit size on the element is the only thing that fixes it.
   ============================================================================ */

:root {
  --footer-newsletter-font: 12px;
}

html body .footer-block__newsletter form.footer__newsletter small,
html body .footer-block__newsletter small,
html body form#ContactFooter small {
  font-size: var(--footer-newsletter-font) !important;
  font-family: var(--font-body-family) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #000000 !important;
  display: block !important;
}
/* ============================================================================
   MASHRU - CONTACT PANEL HEADINGS   v7.0   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   The slide-out contact panel headings ("Contact", "Assistance") only. The
   body copy inside the panel and every other h3 on the site are untouched.

   ##########################################################################
   ##  THE NUMBER YOU EDIT                                                 ##
   ##                                                                      ##
   ##    --contact-heading-weight   400                                    ##
   ##                                                                      ##
   ##    400 = normal                                                      ##
   ##    500 = slightly heavier, still not bold                            ##
   ##    600 = the original                                                ##
   ##########################################################################

   WHY THE LONG SELECTOR
   The 600 comes from an inline <style> block inside the contact panel
   snippet, which renders after base.css in the document. A matching
   ".mashru-contact-block h3" rule would tie on specificity and lose on
   source order, so the panel class and "html body" are added to outrank it
   outright.

   Only font-weight is set here. The size (15px) and colour (#111) are left
   as they are, and the font-family is left to base.css, which already
   resolves h3 to Assistant.
   ============================================================================ */

:root {
  --contact-heading-weight: 400;
}

html body .mashru-contact-panel .mashru-contact-block h3,
html body #mashruContact .mashru-contact-block h3,
html body .mashru-contact-block h3 {
  font-weight: var(--contact-heading-weight) !important;
}
/* ============================================================================
   MASHRU - JOURNAL SIGNATURE   v7.1   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   The "— Radha" signature line at the end of a journal letter only. The body
   copy above it and the related articles below are untouched.

   ##########################################################################
   ##  THE TWO NUMBERS YOU EDIT                                            ##
   ##                                                                      ##
   ##    --signature-font     12px   size of the signature line            ##
   ##    --signature-weight    300   how light it is                       ##
   ##                                300 = light, 400 = normal             ##
   ##########################################################################

   WHY THE LONG SELECTOR
   The 10px comes from an inline <style> block on the page template, which
   renders after base.css. That rule already carries !important, so matching
   it selector-for-selector would tie on specificity and still lose on source
   order. The parent classes and "html body" are added to outrank it.

   ALSO WORTH KNOWING
   The template writes "font-weight: 300px", which is invalid — font-weight
   takes a plain number with no unit. The browser discards the whole line,
   which is the warning triangle DevTools shows beside it. A valid weight is
   set below. If you would rather the signature simply inherit its weight
   from the paragraph above, delete the font-weight line from this block.
   ============================================================================ */

:root {
  --signature-font: 12px;
  --signature-weight: 300;
}

html body .mj-article .mj-text span.bts-signature,
html body .mj-body span.bts-signature,
html body span.bts-signature,
html body .bts-signature {
  font-size: var(--signature-font) !important;
  font-weight: var(--signature-weight) !important;
  line-height: 1.6 !important;
}
/* ============================================================================
   MASHRU - PDP TAB LABELS   v7.2   (min-width: 750px ONLY)

   Paste at the VERY END of base.css. Nothing needs deleting.
   Desktop and laptop only. Mobile keeps its own size, set by
   --m-tab-font-size in the v3.6 block, so the two cannot conflict.

   ##########################################################################
   ##  THE NUMBER YOU EDIT                                                 ##
   ##                                                                      ##
   ##    --tab-font   12px   size of Description / Details / Fabric & Care ##
   ##                                                                      ##
   ##    FOR MOBILE, edit --m-tab-font-size in v3.6 instead. It is         ##
   ##    currently 10px. Set it to 12px if you want both to match.         ##
   ##########################################################################

   WHY THE LONG SELECTOR
   The size comes from an inline <style> block in the product template, which
   renders after base.css in the document. A matching ".tab-title" rule would
   tie on specificity and lose on source order, so the parent classes and
   "html body" are added to outrank it.

   Both the active and inactive tabs are covered, so the underlined one stays
   the same size as the other two.
   ============================================================================ */

@media screen and (min-width: 750px) {

  :root {
    --tab-font: 12px;
  }

  html body .product-tabs ul.tab-titles li.tab-title,
  html body .product-tabs ul.tab-titles li.tab-title.active,
  html body .product-tabs .tab-titles li {
    font-size: var(--tab-font) !important;
    line-height: 1.4 !important;
  }
}
html body .product-tabs .care-guide-link {
  color: #000000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* ============================================================================
   MASHRU - SIMILAR ITEMS ROW   v7.3   (min-width: 990px ONLY)

   Paste at the VERY END of base.css. Nothing needs deleting.

   SCOPE
   Every selector below starts with ".related-products", which is the
   <product-recommendations> block at the bottom of a product page. The
   collection grid, the homepage rail, search results and the wishlist all use
   different parents, so none of them can be reached by this block.

   ##########################################################################
   ##  THE NUMBER YOU EDIT                                                 ##
   ##                                                                      ##
   ##    --rp-card-ratio   333 / 458   the card shape                      ##
   ##                                                                      ##
   ##    This is the existing 333x458 proportion, written as a ratio so    ##
   ##    the cards can fill their column at any screen width without the   ##
   ##    photo stretching. Leave it unless you want a different shape.     ##
   ##########################################################################

   WHY THE MARGINS WERE UNEVEN
   base.css pins every card to a fixed 333px wide with a 10px left margin:

       .card__inner, .color-scheme-2 { width: 333px !important;
                                       height: 458px !important;
                                       margin-left: 10px; }

   The grid item each card sits in is wider than 333px, so every card left
   dead space on its right. Four of those gaps collect at the end of the row,
   which is the wide right margin. The 10px margin pulled the row left on top
   of that.

   The star is positioned "right: 8px" against .card-wrapper. That wrapper was
   wider than the photo, so the star sat beside the image instead of on it.
   Once the card fills its column, the wrapper and the photo are the same
   width and the star lands where it should. No change to the star itself is
   needed.
   ============================================================================ */

@media screen and (min-width: 990px) {

  :root {
    --rp-card-ratio: 333 / 458;
  }

  /* 1. THE ROW - equal space at both ends.
        The grid's own column-gap handles the spacing between cards, so no
        margin is needed on the cards themselves. */
  html body .related-products ul.product-grid {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .related-products ul.product-grid > .grid__item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2. THE CARD - fills its column instead of sitting at a fixed 333px.
        The fixed height is released too, or the taller card would crop. */
  html body .related-products .card-wrapper,
  html body .related-products .card,
  html body .related-products .card__inner,
  html body .related-products .card__inner.ratio,
  html body .related-products .color-scheme-2 {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. THE IMAGE BOX - keeps the original proportion at any column width */
  html body .related-products .card__inner,
  html body .related-products .card__inner.ratio {
    aspect-ratio: var(--rp-card-ratio) !important;
    overflow: hidden !important;
  }

  /* the theme's ratio spacer would fight the aspect-ratio above */
  html body .related-products .card__inner.ratio::before,
  html body .related-products .card__inner::before {
    content: none !important;
    padding-bottom: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* 4. EVERY LAYER BETWEEN THE CARD AND THE PHOTO FILLS THAT BOX */
  html body .related-products .card__media,
  html body .related-products .card__media .media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* 5. THE PHOTO - fills the box, cropped from the centre, never squashed */
  html body .related-products .card__media img,
  html body .related-products .card__media .media img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 6. THE CAPTION - lines up with the photo edges */
  html body .related-products .card__information {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* ============================================================================
   MASHRU - PRE-ORDER NOTE UNDER ADD TO BAG   v7.4   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   Renders only on products where the custom.preorder_note metafield has a
   value, so no other product page is affected.

   ##########################################################################
   ##    --preorder-note-font    12px   text size                          ##
   ##    --preorder-note-gap     14px   space below the Add to bag button  ##
   ##########################################################################
   ============================================================================ */

:root {
  --preorder-note-font: 12px;
  --preorder-note-gap: 14px;
}

html body .product__info-container .product__preorder-note {
  display: block !important;
  width: 100% !important;
  margin: var(--preorder-note-gap) 0 0 0 !important;
  padding: 0 !important;
  font-family: var(--font-body-family) !important;
  font-size: var(--preorder-note-font) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #000000 !important;
  text-align: left !important;
}
/* ============================================================================
   MASHRU - PREDICTIVE SEARCH RESULTS FONT   v7.5   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   The dropdown result list under the search box only. Product pages,
   collection cards and the search results page are untouched.

   ##########################################################################
   ##    --search-item-font   Assistant, sans-serif                        ##
   ##########################################################################

   WHY IT LOOKED DIFFERENT
   Each result is a <p> carrying the "h5" class:

       <p class="predictive-search__item-heading h5">Sculptural Poplin Dress</p>

   base.css sets h5 to Assistant, but that is a bare element selector, so
   ".predictive-search__item-heading" from Shopify's own predictive search
   stylesheet outranks it on the shared properties. Naming the class here
   settles which one applies.
   ============================================================================ */

:root {
  --search-item-font: Assistant, sans-serif;
}

html body .predictive-search__item-heading,
html body p.predictive-search__item-heading.h5,
html body .predictive-search__item-content .predictive-search__item-heading,
html body .predictive-search__item .predictive-search__item-heading {
  font-family: var(--search-item-font) !important;
}
/* ============================================================================
   MASHRU - CUSTOMER CARE SIDEBAR LINKS   v7.6   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   The left sidebar link list on the Customer Care pages only. The body copy
   on the right, the header nav and the footer are untouched.

   ##########################################################################
   ##  THE NUMBER YOU EDIT                                                 ##
   ##                                                                      ##
   ##    --care-menu-font   12px   size of every link in the sidebar list  ##
   ##                                                                      ##
   ##    This covers the whole list at once: Online Return Form, My         ##
   ##    Account, Shopping and Payment, Shipping and Delivery, Returns and  ##
   ##    Refunds, Terms & Conditions.                                       ##
   ##########################################################################

   WHY THE LONG SELECTOR
   The 10px comes from an inline <style> block in the page template, which
   renders after base.css in the document. A matching ".default-page__menu a"
   rule would tie on specificity and lose on source order, so the parent
   class and "html body" are added to outrank it.

   The .active state is named separately because the current page's link may
   be styled by its own rule, and it should stay the same size as the rest.
   ============================================================================ */

:root {
  --care-menu-font: 12px;
}

html body .default-page__sidebar .default-page__menu a,
html body .default-page__menu a,
html body .default-page__menu a.active,
html body .default-page__menu li a {
  font-size: var(--care-menu-font) !important;
  line-height: 1.5 !important;
}


/* Localization Dropdown Base CSS */
.localization-selector-wrapper {
  margin: 20px 0;
  display: inline-block;
}
.disclosure {
  position: relative;
}
.disclosure__button {
  background: transparent;
  border: 1px solid #111;
  padding: 10px 15px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.disclosure__arrow {
  font-size: 10px;
}
.disclosure__list-wrapper {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #111;
  min-width: 200px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 100;
  margin-bottom: 5px;
}
.disclosure__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.disclosure__link {
  display: block;
  padding: 10px 15px;
  color: #111;
  text-decoration: none;
  font-size: 14px;
}
.disclosure__link:hover, .disclosure__link--active {
  background: #f4f4f4;
}
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
/* ============================================================================
   MASHRU - NO STRIKETHROUGH ON SOLD OUT SIZES   v7.7   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   The size row on product detail pages only. Prices, cart and collection
   cards are untouched — their own strikethroughs (compare-at prices) are not
   reached by these selectors.

   WHAT IT DOES
   Sold out sizes stay GREY, which is how a shopper still knows they are
   unavailable. Only the line through the text is removed.

   WHERE THE LINE CAME FROM
   Dawn's variant picker stylesheet, component-product-variant-picker.css:

       .product-form__input--pill input[type=radio]:disabled+label,
       .product-form__input--pill input[type=radio].disabled+label {
         text-decoration: line-through;
       }

   On your build the "disabled" class sits on the INPUT, not the label, so
   the second of those two selectors is the one matching. Both are cleared
   here, along with the label-side variants, so it holds either way.

   The v6.1 mobile block already sets text-decoration: none on some of these
   states. This block covers desktop as well and catches the class-on-input
   case that v6.1 missed.
   ============================================================================ */

html body .product-form__input--pill input[type='radio']:disabled + label,
html body .product-form__input--pill input[type='radio'].disabled + label,
html body .product-form__input--pill input[type='radio'] + label.disabled,
html body .product-form__input--pill input[type='radio'] + label.is-unavailable,
html body .product-form__input--pill input[type='radio']:checked:disabled + label,
html body .product-form__input--pill input[type='radio']:checked.disabled + label {
  text-decoration: none !important;
  text-decoration-line: none !important;
}
/* ============================================================================
   MASHRU - CARE GUIDE LINK   (all screen sizes)

   ##########################################################################
   ##  THE TWO NUMBERS YOU EDIT                                            ##
   ##                                                                      ##
   ##    --care-link-underline   0.5px   thickness of the line             ##
   ##    --care-link-offset      3px     gap between text and line         ##
   ##                                                                      ##
   ##    smaller thickness = finer line                                    ##
   ##    0.5px is about as thin as browsers render reliably                ##
   ##                                                                      ##
   ##    Sub-pixel widths round differently by screen, so on a standard    ##
   ##    display 0.5px and 1px may look identical. On a retina screen the  ##
   ##    difference shows. If 0.5px looks unchanged, your screen is        ##
   ##    rounding it up and 1px is the practical floor.                    ##
   ##########################################################################
   ============================================================================ */

:root {
  --care-link-underline: 0.5px;
  --care-link-offset: 3px;
}

html body .product-tabs .care-guide-link {
  color: #000000 !important;
  text-decoration: underline !important;
  text-decoration-thickness: var(--care-link-underline) !important;
  text-underline-offset: var(--care-link-offset) !important;
}
/* ============================================================================
   MASHRU - FOOTER COUNTRY SELECTOR   v7.8   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting.
   The country/region box in the footer only. The header, the mobile
   localization sheet and the rest of the footer are untouched.

   ##########################################################################
   ##  THE NUMBERS YOU EDIT                                                ##
   ##                                                                      ##
   ##    --loc-box-width    200px   width of the bordered box              ##
   ##                               big enough for "United States (USD)"   ##
   ##                               raise it if a longer country name      ##
   ##                               still wraps, e.g. "United Arab         ##
   ##                               Emirates (AED)"                        ##
   ##                                                                      ##
   ##    --loc-box-padding    8px   space inside the box, left and right   ##
   ##    --loc-label-gap      8px   space between the label and the box    ##
   ##########################################################################

   WHY IT WRAPPED
   Two width caps were fighting the content:

       .disclosure                  { width: 110px; }
       .localization-form:only-child { width: 12rem !important; }

   Both are released here and replaced with a single knob, and white-space is
   set to nowrap so the text cannot break regardless of the width you choose.
   ============================================================================ */

:root {
  --loc-box-width: 200px;
  --loc-box-padding: 8px;
  --loc-label-gap: 8px;
}

/* 1. THE COLUMN - label and box stacked and centred together */
html body .footer__localization,
html body .footer__column--localization,
html body .footer__localization-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* 2. THE LABEL - centred over the box */
html body .footer__localization .localization-form__label,
html body .footer__localization h2,
html body .footer__localization .caption-large {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 var(--loc-label-gap) 0 !important;
  padding: 0 !important;
}

/* 3. THE BOX - one width knob, both old caps released */
html body .footer__localization .disclosure,
html body #FooterCountryForm .disclosure,
html body .footer__localization .localization-form,
html body .footer__localization .localization-form:only-child {
  width: var(--loc-box-width) !important;
  max-width: var(--loc-box-width) !important;
  min-width: var(--loc-box-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 4. THE TEXT - never breaks onto a second line */
html body .footer__localization .disclosure__button,
html body .footer__localization .localization-selector,
html body #FooterCountryForm .localization-selector {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  padding-left: var(--loc-box-padding) !important;
  padding-right: calc(var(--loc-box-padding) + 14px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

html body .footer__localization .localization-selector span,
html body #FooterCountryForm .localization-selector span {
  white-space: nowrap !important;
}
/* ============================================================================
   MASHRU - FOOTER BOX TEXT + COPYRIGHT SIZE   v7.9   (all screen sizes)

   Paste at the VERY END of base.css. Nothing needs deleting — this sits
   after v7.8 and corrects its alignment.

   ##########################################################################
   ##  THE NUMBERS YOU EDIT                                                ##
   ##                                                                      ##
   ##    --loc-box-padding      8px   space inside the box, both sides     ##
   ##    --footer-copy-font    12px   size of the copyright line           ##
   ##########################################################################
   ============================================================================ */

:root {
  --loc-box-padding: 8px;
  --footer-copy-font: 12px;
}


/* ==========================================================================
   1. COUNTRY BOX - text centred, still one line

   v7.8 set justify-content: flex-start, which pinned it left. The right
   padding there was also larger than the left, to leave room for a dropdown
   arrow. Your build hides that arrow (base.css sets .icon-caret to
   display:none), so the padding is now equal on both sides and the text sits
   truly centred rather than optically off.
   ========================================================================== */

html body .footer__localization .disclosure__button,
html body .footer__localization .localization-selector,
html body #FooterCountryForm .localization-selector,
html body #FooterCountryForm .disclosure__button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  padding-left: var(--loc-box-padding) !important;
  padding-right: var(--loc-box-padding) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

html body .footer__localization .localization-selector span,
html body #FooterCountryForm .localization-selector span {
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
  white-space: nowrap !important;
}


/* ==========================================================================
   2. COPYRIGHT LINE - "© 2026, Mashru Powered by Shopify"

   base.css sets this to 10px in a grouped rule:

       .footer-block__heading, .footer-block__details-content,
       .footer__localization-panel, .footer__copyright * { font-size: 10px !important; }

   That rule also catches the footer headings, so it cannot simply be raised
   without enlarging those too. Naming .copyright__content directly lifts only
   this line and leaves the headings alone.
   ========================================================================== */

html body .footer__content-bottom .footer__copyright,
html body .footer__copyright .copyright__content,
html body .footer__copyright small.copyright__content,
html body .footer__copyright .policies,
html body .footer__copyright .policies a,
html body .footer__copyright .policies li {
  font-size: var(--footer-copy-font) !important;
  line-height: 1.6 !important;
}
/* Desktop keeps the original offset. Mobile is handled in v8.1 below. */
@media screen and (min-width: 750px) {
  .local_foot{
    width:100% !important;
    height: 7rem;
    margin-left: 3rem;
    margin-top: 3rem;
  }
}
/* ============================================================================
   MASHRU - HIDE LANGUAGE SELECTOR   v8.2   (all screen sizes)

   Paste at the VERY END of base.css.

   WHY THIS IS NEEDED
   base.css hides the language selector with:

       .language_select { display: none !important; }

   That is one class. The v8.1 block sets display:flex on .local_foot using
   longer selectors, and the language selector carries BOTH classes:

       <div class="local_foot language_select">

   So v8.1 won and the hidden box reappeared. This restores the hide with a
   selector long enough to outrank it.
   ============================================================================ */

html body .local_foot.language_select,
html body .footer__localization .local_foot.language_select,
html body .footer__column.footer__localization .local_foot.language_select,
html body .language_select {
  display: none !important;
}
/* ============================================================================
   MASHRU - MOBILE COUNTRY BOX SIZE   v8.3   (max-width: 749px ONLY)

   Paste at the VERY END of base.css. Leave v8.1 and v8.2 in place.

   ##########################################################################
   ##    --m-loc-width     170px   width of the box                        ##
   ##    --m-loc-height     34px   height of the box                       ##
   ##########################################################################

   WHAT v8.1 MISSED
   The border you see is on div.disclosure, but the BUTTON inside it carries
   Dawn's own min-width and min-height (from the .field / button rules, which
   set min-width: 7rem and a 4.5rem min-height). A width on the parent cannot
   shrink past a min-width on the child, so the box stayed at its old size.

   Both the wrapper and the button are sized here, and every min-width and
   min-height in the chain is zeroed so the numbers above are the real ones.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-loc-width: 170px;
    --m-loc-height: 34px;
  }

  /* 1. THE BORDERED WRAPPER */
  html body .footer__localization .disclosure,
  html body #FooterCountryForm .disclosure,
  html body .local_foot .disclosure,
  html body .country_select .disclosure {
    display: block !important;
    width: var(--m-loc-width) !important;
    max-width: var(--m-loc-width) !important;
    min-width: 0 !important;
    height: var(--m-loc-height) !important;
    max-height: var(--m-loc-height) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 2. THE BUTTON INSIDE - this is the part v8.1 did not size.
        Dawn's min-width and min-height were holding the box open. */
  html body .footer__localization .disclosure__button,
  html body .footer__localization .localization-form__select,
  html body .footer__localization .localization-selector,
  html body #FooterCountryForm .disclosure__button,
  html body #FooterCountryForm .localization-selector,
  html body .local_foot .disclosure__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 6px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* 3. THE TEXT SPAN */
  html body .footer__localization .localization-selector span,
  html body #FooterCountryForm .localization-selector span,
  html body .local_foot .localization-selector span {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* 4. THE FORM WRAPPERS - the 12rem cap and any leftover width released */
  html body .footer__localization localization-form,
  html body .footer__localization .localization-form,
  html body .footer__localization .localization-form:only-child,
  html body #FooterCountryForm {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html body .footer__localization .localization-form > div,
  html body #FooterCountryForm > div {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }
}
/* ============================================================================
   MASHRU - MOBILE COUNTRY BOX   v8.5   (max-width: 749px ONLY)

   Paste at the VERY END of base.css.

   ##########################################################################
   ##  EDIT THE NUMBERS DIRECTLY IN THE RULES BELOW                        ##
   ##                                                                      ##
   ##    170px = width of the box                                          ##
   ##     34px = height of the box                                         ##
   ##                                                                      ##
   ##  They appear twice each (width/max-width, height/max-height).        ##
   ##  Change all four if you resize.                                      ##
   ##########################################################################

   WHY v8.4 DID NOT TAKE EFFECT
   DevTools showed the v8.4 rule winning, but with a warning icon beside
   every var() reference. That means the custom property was not resolving,
   and when a var() is invalid the browser throws away the entire
   declaration — so width and height simply never applied.

   The cause is that --m-loc-width and --m-loc-height are declared in more
   than one block in this file (v8.0, v8.1, v8.3, v8.4 all set them), and the
   declarations are interfering with each other.

   Literal pixel values are used here instead, so there is nothing to resolve
   and nothing to conflict with.
   ============================================================================ */

@media screen and (max-width: 749px) {

  /* THE BORDERED WRAPPER */
  html body #FooterCountryForm .disclosure,
  html body .footer__localization .disclosure,
  html body .local_foot .disclosure,
  html body .country_select .disclosure {
    display: block !important;
    width: 170px !important;
    max-width: 170px !important;
    min-width: 0 !important;
    height: 34px !important;
    max-height: 34px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* THE BUTTON INSIDE */
  html body #FooterCountryForm .localization-selector.link,
  html body #FooterCountryForm .localization-selector,
  html body #FooterCountryForm .disclosure__button,
  html body #FooterCountryForm .disclosure__button.localization-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
}
/* ============================================================================
   MASHRU - SWATCH COLOURS FROM SHOPIFY, NOT FROM POSITION   v8.6

   Paste at the VERY END of base.css. Delete nothing.

   WHAT IT FIXES
   The block headed "FORCE CORRECT SWATCH COLORS" further up this file paints
   the filter swatches by their POSITION in the list:

       .facets__item:nth-child(1) .swatch { background-color: #a3917e; }
       .facets__item:nth-child(2) .swatch { background-color: #6f4827; }
       .facets__item:nth-child(3) .swatch { background-color: #516e5c; }

   In Ready-to-wear, position 3 happens to be Olive, so it looks correct.
   In Dresses & Skirts, position 3 is White, so White is painted olive green.
   Any collection where the colour order differs will show wrong swatches.

   Your colours are already set correctly in Shopify admin, on the Color
   product option. This hands control back to those values.

   :nth-child(n) matches EVERY item, and carries the same weight as
   :nth-child(1), so with the two extra element names it outranks the old
   rules on all three positions and on every position beyond them.
   ============================================================================ */

html body .mobile-facets__list.facets-layout-list--swatch .mobile-facets__item:nth-child(n) .swatch,
html body .facets__list.facets-layout-list--swatch .facets__item:nth-child(n) .swatch,
html body .mobile-facets__list .swatch-input-wrapper .swatch,
html body .facets__list .swatch-input-wrapper .swatch {
  background: var(--swatch--background) !important;
  background-color: var(--swatch--background) !important;
  background-image: var(--swatch--background-image, none) !important;
  background-size: cover !important;
  background-position: center !important;
}
/* ============================================================================
   MASHRU - MOBILE PDP IMAGE FIT   v9.1   (max-width: 749px ONLY)

   Paste at the VERY END of base.css. Keep v3.5, this overrides three of its
   values. Desktop and laptop are not touched: every rule is inside the
   mobile media query, and v8.9 / v9.0 stay in charge above 990px.

   ##########################################################################
   ##    --m-pdp-top-pull   0px    how far the image is pulled UP toward   ##
   ##                              the header                              ##
   ##                              0 = sits directly under it, nothing     ##
   ##                              hidden. Raise it only if you want the   ##
   ##                              image tucked behind the header again.   ##
   ##                                                                      ##
   ##    --m-pdp-img-fit  cover    cover now crops nothing, because the    ##
   ##                              box below matches the photo exactly.    ##
   ##                              Leave it on cover.                      ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-pdp-top-pull: 0px;
    --m-pdp-img-fit: cover;
  }

  /* 1. THE BOX - height comes from the photo, not from a fixed 650px.
        Shopify already writes --ratio on .product-media-container from the
        file's own dimensions, so this adapts to anything uploaded later. */
  html body .product__media-list .product-media-container,
  html body .product__media-list .product-media-container.constrain-height,
  html body .product__media-list .product__modal-opener,
  html body .product__media-list .product__media,
  html body .product__media-list .product__media.media {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    aspect-ratio: var(--ratio, 0.6667) !important;
    overflow: hidden !important;
  }

  html body .product__media-list .constrain-height {
    --contained-width: 100% !important;
  }

  /* 2. NOT PULLED UNDER THE HEADER.
        .header-wrapper is position:fixed, so a negative margin here slides
        the top of the photo behind it. */
  html body .product__media-wrapper,
  html body .product__media-wrapper slider-component {
    margin-top: calc(var(--m-pdp-top-pull) * -1) !important;
  }

  /* 3. THE PHOTO fills the box edge to edge with nothing cut off,
        because the box is now the same shape as the file. */
  html body .product__media-list .product__media img,
  html body .product__media-list .media img,
  html body .product__media-list .product-media-container img {
    object-fit: var(--m-pdp-img-fit) !important;
    object-position: center !important;
  }
}
/* ============================================================================
   MASHRU - MOBILE PDP TOP SPACING   v9.2   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v9.1. Keep v9.1.
   Nothing here crops or resizes the photo. It only closes the white space
   above it. Desktop and laptop are not touched.

   ##########################################################################
   ##  ONE NUMBER TO EDIT:   --m-pdp-top-pull                              ##
   ##                                                                      ##
   ##    0px    where you are now, too much space                          ##
   ##   24px    starting point below                                       ##
   ##   40px    tighter still                                              ##
   ##                                                                      ##
   ##   bigger number = image moves UP, closer to the header               ##
   ##                                                                      ##
   ##   Go up in steps of about 8px. If the top of the model's head starts ##
   ##   disappearing behind the header, you have gone one step too far.    ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-pdp-top-pull: 24px;
  }

  /* 1. The product section's own top padding, which is most of the gap.
        Attribute selector rather than the full template id, so this keeps
        working if the theme is republished. */
  html body [class*='__main-padding'],
  html body .product.product--large,
  html body .section-main-product,
  html body .shopify-section:has(.product__media-wrapper) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 2. The gallery itself, once, with the knob */
  html body .product__media-wrapper,
  html body .product__media-wrapper slider-component {
    margin-top: calc(var(--m-pdp-top-pull) * -1) !important;
    padding-top: 0 !important;
  }
}
/* ============================================================================
   MASHRU - MOBILE PDP TOP SPACING   v9.3   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v9.2. Keep v9.2.

   The section padding removal in v9.2 already closed the gap on its own,
   so the 24px pull on top of it is now overlap rather than tightening.
   Zero here means the image starts exactly where the header ends: nothing
   hidden at the top, no dead space at the bottom.

   ##########################################################################
   ##  --m-pdp-top-pull   0px                                              ##
   ##                                                                      ##
   ##  Leave it at 0. Any positive value slides the photo UNDER the fixed  ##
   ##  header and pushes the same amount of empty box out at the bottom,   ##
   ##  which is the cut head you are seeing now.                           ##
   ##                                                                      ##
   ##  If a gap ever reappears, it is the section padding coming back,     ##
   ##  not this knob. Fix it in v9.2, not here.                            ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {
  :root {
    --m-pdp-top-pull: 0px;
  }
}
/* ============================================================================
   MASHRU - MOBILE ACTIVE FILTER CHIP   v9.4   (max-width: 749px ONLY)

   Paste at the VERY END of base.css. Nothing needs deleting.
   Desktop and laptop keep the larger chip, every rule is inside the mobile
   media query.

   ##########################################################################
   ##    --m-chip-height    26px   height of the chip                      ##
   ##    --m-chip-pad       10px   space inside it, left and right         ##
   ##    --m-chip-font      10px   text size                               ##
   ##    --m-chip-gap       10px   space between the chip and the text     ##
   ##                              on either side of it                    ##
   ##########################################################################

   WHY IT OVERLAPPED
   component-facets.css sets padding: 1.2rem on the chip and margin-top:
   1.5rem on the button, both desktop values. The row it sits in is not a
   flex row on mobile, so the chip and the "Dresses & Skirts" breadcrumb
   were free to occupy the same space rather than pushing each other apart.
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-chip-height: 26px;
    --m-chip-pad: 10px;
    --m-chip-font: 10px;
    --m-chip-gap: 10px;
  }

  /* 1. THE ROW - three items that push each other apart instead of stacking */
  html body .facets-container .collection-top-row,
  html body .facets-container-drawer .collection-top-row,
  html body .facets-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: var(--m-chip-gap) !important;
    row-gap: 8px !important;
    width: 100% !important;
  }

  /* 2. THE CHIP CONTAINER - no longer absolutely placed or full width */
  html body .active-facets.active-facets-mobile,
  html body .active-facets-mobile facet-remove,
  html body .active-facets__button-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. THE CHIP ITSELF - the 1.2rem padding and 1.5rem margins cleared */
  html body a.active-facets__button,
  html body .active-facets__button,
  html body .active-facets__button.active-facets__button--light,
  html body .active-facets__button-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: var(--m-chip-height) !important;
    min-height: 0 !important;
    max-height: var(--m-chip-height) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 var(--m-chip-pad) !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    font-size: var(--m-chip-font) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    color: #000000 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* 4. THE X - scaled to the smaller chip */
  html body .active-facets__button svg,
  html body .active-facets__button .svg-wrapper,
  html body .active-facets__button .icon-close-small {
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* 5. THE BREADCRUMB AND "Filter By +" keep their own space */
  html body .breadcrumb-filter,
  html body .mobile-facets__wrapper {
    flex: 0 0 auto !important;
    max-width: 45% !important;
  }
}
/* ============================================================================
   MASHRU - FILTER CHIP CLEANUP   v9.5   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v9.4. Keep v9.4.

   TWO CORRECTIONS TO v9.4

   1. "Remove all" hidden again.
      v9.4 grouped .active-facets__button-wrapper in with the chip container
      and gave the whole group a border and a height. That wrapper holds the
      Remove all link, so it turned into a second visible box. base.css
      already hides it on mobile via .mobile-facets__clear-wrapper, but my
      rule outranked that. Hidden here explicitly.

   2. The double border around "Beige".
      The chip got a border from v9.4, and its wrapper got the same border
      from the same grouped selector, so you saw a box inside a box. Only
      the chip keeps one now.

   ##########################################################################
   ##    --m-chip-border   1px solid #ddd                                  ##
   ##                                                                      ##
   ##    Set to "none" if you want the chip to read as plain text with     ##
   ##    just the x beside it, no box at all.                              ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-chip-border: 1px solid #ddd;
  }

  /* 1. NO "Remove all" */
  html body .active-facets__button-wrapper,
  html body facet-remove.active-facets__button-wrapper,
  html body .active-facets-mobile .active-facets__button-wrapper,
  html body .mobile-facets__clear-wrapper,
  html body .active-facets__button-wrapper a,
  html body .active-facets__button-wrapper .active-facets__button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 2. NO BORDER ON ANY WRAPPER - only the chip itself carries one */
  html body .active-facets.active-facets-mobile,
  html body .active-facets-mobile facet-remove,
  html body .active-facets,
  html body facet-remove {
    border: none !important;
    background: transparent !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }

  /* 3. THE CHIP - one border, sized as before */
  html body a.active-facets__button,
  html body .active-facets__button.active-facets__button--light {
    border: var(--m-chip-border) !important;
  }
}
/* ============================================================================
   MASHRU - FILTER CHIP SINGLE BORDER   v9.6   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v9.5. Keep v9.4 and v9.5.

   THE MARKUP  (confirmed in your DevTools)

       facet-remove
         a.active-facets__button.active-facets__button--light   <- v9.4 border
           span.active-facets__button-inner.button.button--tertiary
                "Beige"                                          <- box-shadow
             span.svg-wrapper                                    (the x)

   Two elements, two boxes. The border moves onto the inner span, which is
   the one that hugs the text, and the outer link becomes a plain wrapper.

   ##########################################################################
   ##    --m-chip-border   1px solid #ddd                                  ##
   ##                                                                      ##
   ##    Set to "none" for plain text with just the x, no box at all.      ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-chip-border: 1px solid #ddd;
  }

  /* 1. THE OUTER LINK - no border, no box, shrinks to its content */
  html body a.active-facets__button,
  html body a.active-facets__button.active-facets__button--light,
  html body .active-facets-mobile a.active-facets__button {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2. THE INNER SPAN - the theme's box-shadow ring cleared, one border
        put in its place. This is the element that fits the text. */
  html body .active-facets__button .active-facets__button-inner,
  html body span.active-facets__button-inner,
  html body span.active-facets__button-inner.button.button--tertiary,
  html body .active-facets__button--light .active-facets__button-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: max-content !important;
    height: var(--m-chip-height, 26px) !important;
    min-height: 0 !important;
    max-height: var(--m-chip-height, 26px) !important;
    box-shadow: none !important;
    border: var(--m-chip-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 var(--m-chip-pad, 10px) !important;
    font-size: var(--m-chip-font, 10px) !important;
    line-height: 1 !important;
    color: #000000 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* 3. The .button class on that span also carries the theme's
        ::before and ::after shadow layers */
  html body span.active-facets__button-inner::before,
  html body span.active-facets__button-inner::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    border: none !important;
  }
}
/* ============================================================================
   MASHRU - FILTER CHIP ALIGNMENT   v9.7   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v9.6. Keep v9.4 to v9.6.

   WHY IT SAT AT THE EDGE
   v9.4 set padding: 0 on .active-facets and its wrappers to clear the
   desktop 1.2rem. That removed the left inset along with it, so when the
   chip wrapped onto its own line it started at 0 while "Ready-to-wear"
   starts at the page gutter. The gutter is put back here as a margin, which
   the chip row can carry without reintroducing the old padding.

   ##########################################################################
   ##    --m-chip-left   20px   chip to the left edge of the screen        ##
   ##                           SAME value as --m-page-gutter, which is    ##
   ##                           what "Ready-to-wear" and the product       ##
   ##                           images use. Change both together if you    ##
   ##                           ever move the gutter.                      ##
   ##                                                                      ##
   ##    --m-chip-top     8px   space between "Ready-to-wear" and the chip ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-chip-left: 20px;
    --m-chip-top: 8px;
  }

  /* the chip row sits on the gutter and drops onto its own line */
  html body .active-facets.active-facets-mobile,
  html body .active-facets-mobile {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    margin: var(--m-chip-top) 0 0 var(--m-chip-left) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* facet-remove is the element that actually holds the chip, so it must
     not add or subtract an inset of its own */
  html body .active-facets-mobile facet-remove {
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }
}
/* ============================================================================
   MASHRU - FILTER ROW BASELINE   v9.8   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v9.7.

   Aligns "Ready-to-wear" and "Filter By +" on one line. Vertical only,
   nothing moves left or right, so the gutter work in v2 and v9.7 is intact.

   ##########################################################################
   ##    --m-row-gap-below   20px   space under the row, before the chip   ##
   ##                               or the first product image             ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-row-gap-below: 20px;
  }

  /* 1. The row centres its two items on the same axis */
  html body .facets-container,
  html body .facets-container-drawer,
  html body *:has(> .breadcrumb-filter),
  html body *:has(> .mobile-facets__wrapper) {
    align-items: center !important;
  }

  /* 2. Neither item carries its own bottom margin any more, so neither can
        sit higher than the other. The space below moves to the row. */
  html body .breadcrumb-filter,
  html body .mobile-facets__wrapper,
  html body .mobile-facets__open-label,
  html body .plus-sign {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    line-height: 1.2 !important;
  }

  /* 3. Both sides centred within their own box */
  html body .mobile-facets__wrapper summary,
  html body .mobile-facets__wrapper .mobile-facets__open {
    align-items: center !important;
  }

  /* 4. The gap that used to come from those margins */
  html body .facets-container,
  html body .facets-container-drawer {
    margin-bottom: var(--m-row-gap-below) !important;
  }
}
/* ============================================================================
   MASHRU - FILTER ROW BASELINE   v9.9   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v9.8.

   THE MARKUP  (confirmed in your DevTools)

       div.facets-container.facets-container-drawer
         div.collection-top-row
           div.collection-top-row__left
             div.breadcrumb-filter            "Ready-to-wear"
         menu-drawer.mobile-facets__wrapper   "Filter By +"
         div.active-facets.active-facets-mobile
         facet-filters-form

   The two wrappers between .facets-container and the breadcrumb are
   collapsed with display:contents. That removes them from the layout while
   keeping their child, so "Ready-to-wear" becomes a direct flex item of the
   same row as "Filter By +" and the two can finally align.

   ##########################################################################
   ##    --m-row-gap-below   20px   space under the row                    ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-row-gap-below: 20px;
  }

  /* 1. THE KEY LINE - the two wrappers vanish, the breadcrumb stays */
  html body .facets-container .collection-top-row,
  html body .facets-container .collection-top-row__left,
  html body .facets-container-drawer .collection-top-row,
  html body .facets-container-drawer .collection-top-row__left {
    display: contents !important;
  }

  /* 2. Now that all three are siblings, the row can align them */
  html body .facets-container,
  html body .facets-container-drawer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: var(--m-row-gap-below) !important;
  }

  /* 3. Neither side carries a margin that could lift it off the line */
  html body .breadcrumb-filter,
  html body .mobile-facets__wrapper {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
    flex: 0 0 auto !important;
  }

  html body .mobile-facets__open-label,
  html body .plus-sign {
    margin-bottom: 0 !important;
    align-self: center !important;
  }

  /* 4. The chip still drops onto its own full-width line below */
  html body .active-facets.active-facets-mobile {
    flex: 0 0 100% !important;
    order: 2 !important;
  }
}
/* ============================================================================
   MASHRU - FILTER ROW BASELINE   v10.0   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v9.9. Keep v9.9.

   WHY NOTHING MOVED
   v2.4 sets .mobile-facets__wrapper to position: absolute so it could be
   pushed to the right edge. Out of flow means align-items cannot reach it,
   so "Filter By +" was never being aligned against anything.

   It is returned to the flow here and pushed right with margin-left: auto
   instead, which is the flex way of doing the same job. The gutter is
   preserved, so it should not move horizontally.

   ##########################################################################
   ##    --m-filter-right   20px   "Filter By +" to the right edge         ##
   ##                              Match this to --m-page-gutter so it     ##
   ##                              lines up with the second product image. ##
   ##                              Note this REPLACES the 13px offset from ##
   ##                              v2.4, which was measuring from a        ##
   ##                              different box.                          ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-filter-right: 20px;
  }

  html body .mobile-facets__wrapper,
  html body menu-drawer.mobile-facets__wrapper {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;
    margin: 0 var(--m-filter-right) 0 auto !important;
    padding: 0 !important;
  }

  /* the inner layers must also centre, or the label sits off the line
     inside its own box */
  html body .mobile-facets__wrapper details,
  html body .mobile-facets__wrapper summary,
  html body .mobile-facets__wrapper .mobile-facets__open,
  html body .mobile-facets__wrapper .disclosure-has-popup {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}
/* ============================================================================
   MASHRU - FILTER ROW TO GRID GAP   v10.1   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v10.0.

   ##########################################################################
   ##  ONE NUMBER TO EDIT:   --m-row-gap-below                             ##
   ##                                                                      ##
   ##    20px   where you are now                                          ##
   ##    10px   set below                                                  ##
   ##     6px   tighter                                                    ##
   ##     0px   images sit directly under the row                          ##
   ##                                                                      ##
   ##  Nothing else contributes after this block, so the number you type   ##
   ##  is the gap you get.                                                 ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-row-gap-below: 10px;
  }

  /* the gap, set in one place */
  html body .facets-container,
  html body .facets-container-drawer {
    margin-bottom: var(--m-row-gap-below) !important;
    padding-bottom: 0 !important;
  }

  /* nothing between the row and the first image adds to it */
  html body .product-grid-container,
  html body .product-grid-container .collection.page-width,
  html body .collection.page-width ul#product-grid.product-grid,
  html body #main-collection-product-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* ============================================================================
   MASHRU - SIMILAR ITEMS ARROWS CLICKABLE   v10.3   (all screen sizes)

   >>> Use this INSTEAD of v10.2. If you already pasted v10.2, delete it. <
   Paste at the VERY END of base.css.
   Related products block only. The collection grid and homepage rail work
   already and are not touched.

   WHY THE ARROWS WERE DEAD

       div.card__inner
         div.card__media              <- base.css: z-index: 1 !important
           div.product-grid-arrow      <- z-index: 10, but trapped
           div.media.product-media-slider
         div.card__content
           a.full-unstyled-link        <- z-index: 2, covers the whole card

   .card__media at z-index 1 creates a stacking context, so everything
   inside it is capped at level 1 relative to the card. The product link at
   level 2 therefore sits above the arrows no matter how high their own
   z-index goes. Lifting the CONTAINER is the fix, not the arrows.

   ##########################################################################
   ##    --rp-arrow-size   36px   tap target size                          ##
   ##                             36px is a comfortable thumb target.      ##
   ##                             Do not go below 30px on mobile.          ##
   ##                                                                      ##
   ##    The arrow glyph itself does not change size. This is the          ##
   ##    invisible area around it that accepts the tap.                    ##
   ##########################################################################
   ============================================================================ */

:root {
  --rp-arrow-size: 36px;
}


/* ==========================================================================
   1. THE FIX - lift the media block above the product link
   ========================================================================== */

html body .related-products .card .card__inner .card__media,
html body .related-products .card__media {
  z-index: 3 !important;
}


/* ==========================================================================
   2. THE ARROWS - real tap targets, above everything in that block
   ========================================================================== */

html body .related-products .card__media .product-grid-arrow,
html body .related-products .product-grid-arrow.prev,
html body .related-products .product-grid-arrow.next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--rp-arrow-size) !important;
  height: var(--rp-arrow-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #000000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

html body .related-products .product-grid-arrow.prev {
  left: 1px !important;
  right: auto !important;
}

html body .related-products .product-grid-arrow.next {
  right: 1px !important;
  left: auto !important;
}

/* the svg inside keeps its own small size, centred in the tap area */
html body .related-products .product-grid-arrow svg {
  pointer-events: none !important;
  display: block !important;
}


/* ==========================================================================
   3. THE PRODUCT LINK - stays tappable, just below the arrows
      Not disabled, only lowered, so tapping the photo still opens the
      product page everywhere except the two arrow squares.
   ========================================================================== */

html body .related-products .card__content,
html body .related-products .card__link,
html body .related-products .full-unstyled-link {
  z-index: 1 !important;
}


/* ==========================================================================
   4. TOUCH DEVICES - arrows always visible
      base.css fades them in on .card__media:hover, which does not fire
      reliably on a phone, so on your Android they were invisible until a
      stray tap latched the hover state.
   ========================================================================== */

@media (hover: none) {
  html body .related-products .product-grid-arrow {
    opacity: 1 !important;
  }
}
/* ============================================================================
   MASHRU - SIMILAR ITEMS ARROWS   v10.4   (all screen sizes)

   >>> Replaces v10.3. Delete v10.3 first. <
   Paste at the VERY END of base.css.

   The media block sits above the link so the arrows are reachable, but it
   passes taps straight through, so the photo still opens the product. Only
   the two arrow squares actually catch a tap.
   ============================================================================ */

:root {
  --rp-arrow-size: 36px;
}

/* media above the link, but transparent to taps */
html body .related-products .card .card__inner .card__media,
html body .related-products .card__media {
  z-index: 3 !important;
  pointer-events: none !important;
}

/* only the arrows catch taps */
html body .related-products .card__media .product-grid-arrow,
html body .related-products .product-grid-arrow.prev,
html body .related-products .product-grid-arrow.next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--rp-arrow-size) !important;
  height: var(--rp-arrow-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #000000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

html body .related-products .product-grid-arrow.prev { left: 1px !important; right: auto !important; }
html body .related-products .product-grid-arrow.next { right: 1px !important; left: auto !important; }

html body .related-products .product-grid-arrow svg {
  pointer-events: none !important;
  display: block !important;
}

/* the link goes back to normal, no z-index of my own */
html body .related-products .card__content,
html body .related-products .card__link,
html body .related-products .full-unstyled-link {
  z-index: auto !important;
}

@media (hover: none) {
  html body .related-products .product-grid-arrow {
    opacity: 1 !important;
  }
}
/* ============================================================================
   MASHRU - FOOTER COUNTRY SELECTOR CENTRING   v10.5   (max-width: 749px ONLY)

   Paste at the VERY END of base.css. Nothing needs deleting.
   Desktop and laptop keep the 3rem offset, every rule is inside the mobile
   media query.

   ##########################################################################
   ##    --m-loc-top   24px   space above the "Country/region" label       ##
   ##                                                                      ##
   ##    This replaces the 3rem (48px) top margin that came with the same  ##
   ##    desktop rule. Raise it if the block feels too tight under the     ##
   ##    newsletter field.                                                 ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-loc-top: 24px;
  }

  /* 1. THE FIX - the 3rem left offset removed, block centred */
  html body .local_foot,
  html body .footer__localization .local_foot,
  html body .country_select,
  html body .local_foot.country_select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: var(--m-loc-top) auto 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* 2. THE COLUMN - everything inside it centres on the screen */
  html body .footer__column.footer__localization,
  html body .footer__localization,
  html body .footer__localization-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* 3. THE LABEL */
  html body #FooterCountryLabel,
  html body .footer__localization h2.caption-large {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto 8px auto !important;
    padding: 0 !important;
  }

  /* 4. THE FORM WRAPPERS - no stray offsets between the column and the box */
  html body #FooterCountryForm,
  html body .footer__localization localization-form,
  html body .footer__localization .localization-form,
  html body .footer__localization .localization-form:only-child,
  html body #FooterCountryForm > div,
  html body #FooterCountryForm form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* 5. THE BOX - keeps its 170px width from v8.5, now truly centred */
  html body #FooterCountryForm .disclosure,
  html body .footer__localization .disclosure {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ============================================================================
   MASHRU - FILTER DRAWER ROWS FULL WIDTH   v10.6   (max-width: 749px ONLY)

   Paste at the VERY END of base.css, after v10.5. Nothing needs deleting.

   WHAT WENT WRONG
   v10.0 targeted ".mobile-facets__wrapper details / summary" to centre the
   closed "Filter By +" button. That wrapper is the entire menu-drawer, so
   the same rule hit the four accordion rows inside the open panel and shrank
   them to their text width.

   Width is restored here for the rows only. The "Filter By +" button on the
   collection page keeps the centring from v10.0, because that button is
   .mobile-facets__open and is named separately below.

   ##########################################################################
   ##    --m-facet-row-h    40px   height of each filter row               ##
   ##    --m-facet-row-gap   9px   space between the rows                  ##
   ##    --m-facet-pad      20px   drawer edge to the rows                 ##
   ##                                                                      ##
   ##    40px and 9px match what your DevTools shows the theme intends,    ##
   ##    so these reproduce the correct screenshot exactly.                ##
   ##########################################################################
   ============================================================================ */

@media screen and (max-width: 749px) {

  :root {
    --m-facet-row-h: 40px;
    --m-facet-row-gap: 9px;
    --m-facet-pad: 20px;
  }

  /* 1. THE PANEL - rows stack full width */
  html body #FacetFiltersFormMobile,
  html body .mobile-facets__inner,
  html body .mobile-facets__main,
  html body .mobile-facets {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. THE ROWS - the v10.0 shrink undone */
  html body .mobile-facets__wrapper details.mobile-facets__details,
  html body .mobile-facets__details,
  html body #FacetFiltersFormMobile .mobile-facets__details {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 0 var(--m-facet-row-gap) 0 !important;
    padding: 0 var(--m-facet-pad) !important;
    box-sizing: border-box !important;
  }

  html body .mobile-facets__wrapper summary.mobile-facets__summary,
  html body .mobile-facets__summary,
  html body #FacetFiltersFormMobile .mobile-facets__summary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. THE BORDERED BOX - label left, plus right, as the theme intends */
  html body #FacetFiltersFormMobile .mobile-facets__summary > div,
  html body .mobile-facets__summary > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--m-facet-row-h) !important;
    min-height: var(--m-facet-row-h) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #eee !important;
    box-sizing: border-box !important;
  }

  /* 4. THE SUBMENU that opens under a row */
  html body .mobile-facets__submenu {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. THE "Filter By +" BUTTON keeps its v10.0 sizing.
        Named explicitly so step 2 cannot widen it back to full width. */
  html body .mobile-facets__wrapper .mobile-facets__open,
  html body summary.mobile-facets__open {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

html body .footer__localization .disclosure, html body #FooterCountryForm .disclosure{
    min-width: 100px !important;
    max-width: 100px !important;
    padding: 0;
}
/*.disclosure__list-wrapper {
    width: 100px !important;
    min-width: 100px !important;
}*/

div#dynamic-checkout-cart {
    visibility: visible;
}

/*Fixed Mobile menu and resolve scrolling issues*/
body.overflow-hidden-tablet {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

body.overflow-hidden-tablet .menu-drawer{
      height: 600px;
}
body.overflow-hidden-tablet .shopify-pc__banner__dialog {
    z-index: 0 !important;
}
body.overflow-hidden-tablet .menu-drawer__localization.header-localization {
    display: none;
}